Una mala experiencia de usuario no solo hace perder usuarios. Pierde la confianza. Aquí hay 3 ejemplos de cómo abordamos el diseño de UX en Topsort.
Introducción
Cada interfaz de usuario es una conversación. Cuando un botón está desactivado, cuando desaparece una selección o cuando una acción no recibe ningún comentario, la interfaz habla. La pregunta es: ¿qué dice?
En Topsort, diseñamos teniendo en cuenta los principios artísticos y científicos porque comprender cómo las personas procesan la información, forman modelos mentales y generan confianza nos hace mejores en nuestro trabajo. No se trata de teorías abstractas, sino de herramientas prácticas para crear interfaces y experiencias que parezcan intuitivas. No porque sean sencillas, sino porque se alinean con la forma humanos tienden a pensar.
Estos son tres ejemplos de cómo aplicar los fundamentos de la experiencia de usuario a los desafíos reales de los productos. Cada uno de ellos se basa en los principios establecidos de la interacción entre humanos y ordenadores: la visibilidad del estado del sistema, el reconocimiento por encima del recuerdo y la retroalimentación a través de la comunicación visual.
Los ejemplos
Ejemplo 1: Estados de la fila de productos que realmente se comunican
La oportunidad
Una versión anterior del selector de productos tenía un problema común: las filas desactivadas simplemente aparecían en gris sin ninguna explicación. Si un producto no estaba disponible o llegabas al límite de la campaña, tenías que adivinar por qué no podías seleccionarlo.
Por qué es importante
Esto infringe una de las heurísticas fundamentales de usabilidad: la visibilidad del estado del sistema. Cuando el sistema no comunica su estado, formamos modelos mentales incorrectos. Nos preguntamos: «¿Está roto? ¿Hice algo mal? ¿Es esto un error?» La ambigüedad crea una carga cognitiva y erosiona la confianza.
El enfoque
Hemos mapeado todos los estados de fila posibles (nombres predeterminados, deshabilitados, seleccionados, no disponibles y largos) y diseñamos tratamientos explícitos para cada uno. Las filas deshabilitadas ahora muestran información sobre herramientas que explican por qué están deshabilitadas. Los productos no disponibles se distinguen visualmente con mensajes claros al pasar el ratón sobre ellos. La interfaz ahora responde a la pregunta incluso antes de que tengas que hacerla.
Ejemplo 2: Volver a convertir la vida en una subasta
La oportunidad
El selector de estrategias de puja funcionó. Seleccionarías una opción:Conservador, Moderado, Agresivo—y la tarjeta se resaltará para confirmar su elección. Limpio, claro y funcional. Estuvo bien, pero es genial donde aterrizamos.
Por qué estar bien no es suficiente
La psicología cognitiva nos dice que las personas procesan la información visual más rápido que el texto, y la metáfora nos ayuda a entender los conceptos abstractos. La estrategia de puja es intrínsecamente abstracta: ¿qué significa realmente «agresiva» en el contexto de las subastas de anuncios?
También está la cuestión de la confirmación. Los objetos físicos nos proporcionan información táctil: sientes el mango de una tetera en tus manos, el agradable clic de un botón. Un objeto bien diseñado te indica cómo usarlo solo por su forma: una boquilla indica por dónde se vierte el líquido y un asa te invita a cogerlo. Las interfaces digitales no tienen ese aspecto físico, por lo que nos basamos en las señales visuales: botones que parecen presionables, tarjetas que responden cuando pasas el ratón sobre el ratón y animaciones que dicen «sí, lo tenemos».
El hecho de resaltar al hacer clic te confirmaba, pero queríamos algo más, algo que diera sentido a la elección y que ayudara a mantener los conceptos.
El enfoque
Hemos añadido ilustraciones animadas con nuestra mascota, Toppie, en diferentes modos para cada estrategia. Agresivo se incendia, Conservador recibe una bebida caliente, y Moderado consigue un equilibrio. Las cartas se animan al seleccionarlas, añadiendo personalidad y creando un momento de placer. La metáfora visual hace que lo abstracto sea concreto, el diseño memorable de los personajes hace que perdure, y la animación refuerza esa sensación táctil de «lo tengo» que pretendía lograr el punto culminante de la carta original: acaba de aparecer.
Ejemplo 3: Muestra lo que has seleccionado
La oportunidad
Al seleccionar las opciones de segmentación (Ubicaciones, Palabras clave, Categorías, o Audiencias), sus selecciones desaparecieron en un menú desplegable. Tenías que volver a abrirlo para recordar lo que habías elegido. Para segmentar por ubicación con regiones anidadas, como São Paulo (SP), cuando se seleccionan varias subregiones, no hay forma de ver sus opciones de un vistazo.
La cuestión más profunda
Esto se reduce a reconocer frente a recordar. Intenta recordar lo que almorzaste hace tres días. Difícil, ¿verdad? Ahora imagina que alguien te muestra una foto de ella, al instante. Esa es la diferencia. Ver es más fácil que recordar. Obligarte a recordar lo que han seleccionado crea una carga cognitiva innecesaria. Reconocer (ver tus selecciones) siempre es más fácil que recordar (recordar lo que has elegido). El estado oculto también viola el principio de visibilidad—si no puedes ver sus selecciones, no pueden verificarlas, lo que provoca ansiedad y comprobaciones repetidas veces.
El enfoque
Hemos convertido los menús desplegables en pantallas de etiquetas de selección múltiple. Ahora las selecciones siempre están visibles como fichas extraíbles. Para las ubicaciones, mostramos la abreviatura y el recuento del estado: São Paulo (SP) 2 le indica exactamente lo que está seleccionado. El mismo patrón para las palabras clave, las categorías y los segmentos de audiencia. Todo es escaneable, editable y claro. Ahora puedes reconocer sus selecciones de un vistazo en lugar de recordar ellos.
Los fundamentos importan
No se trata solo de preferencias de diseño, sino de aplicaciones de principios cognitivos bien investigados. Cuando hablamos de «gran experiencia de usuario» o diseño de productos, en realidad nos referimos a interfaces que se adaptan al funcionamiento de la cognición humana: memoria de trabajo limitada, reconocimiento de patrones, necesidad de retroalimentación y formación de modelos mentales.
Las pequeñas violaciones de estos principios se agravan. Un estado de desactivación confuso aquí, selecciones ocultas allá. Individualmente son pequeñas fricciones, pero juntas crean una carga cognitiva que se acumula a lo largo del recorrido del usuario. Empiezas a preguntarte: «¿Esto funciona? ¿Hice algo mal? ¿Puedo confiar en esta plataforma para mi presupuesto publicitario?»
Algunas de las mejores interfaces parecen obvias, intuitivas y, de alguna manera, naturales. Responden a las preguntas antes de que las formules, confirman las acciones de inmediato y hacen visible el estado del sistema. Algunos lo llaman «pulir» o «hacer manualidades», como si se tratara de un lujo artesanal, algo que se añade cuando se tiene tiempo libre. No lo es. Este es el trabajo. Entender cómo piensan las personas y construir en consecuencia no es algo sencillo, es la base. Si tu interfaz no se ajusta a la cognición humana, no importa cuántas funciones utilices: nadie confiará en ella.