Contenido del Articulo
Reemplazar un estado por otro sin pensar es una receta para la frustración del usuario.
Los estados a menudo no se sienten muy importantes hasta que los crea para verlos fácilmente.
El caso más común y extremo es el salpicadero de un coche. Cuando conduce por la autopista a 65 mph, lo último que quiere hacer es apartar la vista de la carretera para tratar de descifrar el estado extraño.
La mayoría de los estados suelen ser independientes del tiempo, pero comprender los estados suele ser una parte importante de la experiencia del usuario. Esto se debe a que, a menudo, el camino feliz es irse después de verificar los estados. Después de todo, no hay problemas inesperados.
Pero eso no significa que siempre sea así. Esto es lo que debe tener en cuenta al desarrollar otros caminos.
Diseñando estados que no sean el camino feliz
Anteriormente, hablé sobre la necesidad de mostrar solo la información suficiente en las revisiones para que se ajuste al viaje feliz del usuario.
Después de todo, todo lo que necesitan en este caso es una verificación rápida del estado, como “todo se ve bien”.
Sin embargo, si las cosas no van tan bien, no puedes simplemente reemplazar un personaje por otro y continuar trabajando en tu diseño.
Debe observar los estados con más detalle por una razón clave: los usuarios deben poder determinar sus próximos pasos en función del estado. Esto se resume a menudo en la primera de las diez heurísticas de Jakob Nielsen: la visibilidad del estado de un sistema.
Todo lo que el estado nos dice es que el estado de “Red” es malo, lo que podría significar una docena de cosas diferentes. Este es el equivalente a un mensaje de error que dice “Algo salió mal”. No hay suficiente contexto para que el usuario sepa qué hacer a continuación.
¿Cómo podemos mejorarlo? Primero, debemos hacer preguntas que nos ayuden a determinar el rol que desempeñarán los estados (y cuál es la mejor manera de respaldar la interacción del usuario):
- ¿Cuántos estados debe dar a sus usuarios?
- ¿Cuáles son los siguientes pasos que los usuarios deben seguir después de cada estado?
- ¿Cómo interactúan varias alertas entre sí?
¿Cuántos estados pueden esperar que los usuarios conozcan o conozcan?
A menudo asumimos que solo se asociarán tres colores con los estados:
- Verde, que significa que todo está bien, “Adelante” o que el paso está completo.
- Amarillo, que significa precaución, advertencia o “reducir la velocidad”.
- Rojo, que significa Error, “Detener” u otros problemas.
Pero una de las primeras preguntas que debe hacerse es si esto es suficiente para resumir todos los estados posibles. Para aclarar, considere un ejemplo bastante típico: algo o alguien está desconectado. ¿Qué color describe mejor esta condición? Este es un estado importante, pero no necesariamente va bien con estos colores.
Si su paquete está fuera de línea (es decir, aún no está en el sistema), ¿necesita una advertencia crítica (roja)? Tal vez tal vez no. Algunos paquetes, como un trasplante de corazón, pueden requerir este estado, mientras que otros, como el papel de la impresora, pueden no hacerlo.
Uno de los peligros de poner todo en la categoría “roja” es el riesgo de fatiga de advertencias cuando los usuarios comienzan a ignorar las advertencias (con resultados desastrosos). Sin embargo, colocar algo en la categoría “amarilla” puede reducir el estado.
Sin conexión, como se vio después, a menudo se representa en gris.
Este es el peligro de trabajar con pocos colores. Entonces, ¿cuántos colores necesitas? Depende de tu entorno. Por ejemplo, en el sector de la tecnología de la información, existen seis niveles de gravedad estándar:
- Advertencia
- Menor
- Principal
- Crítico
- Indefinido (no se puede determinar)
- Borrado (la advertencia ha sido borrada)
Como resultado, puede haber hasta siete colores para mostrar los distintos estados requeridos.
Es posible que su dominio no tenga reglas de estado estrictas, pero debe averiguar cuántos estados necesita representar. Esto se debe a que debe comprender cuántos colores usar y cómo hacer que se destaquen entre sí de un vistazo. Además, no desea que sus usuarios confundan una advertencia menor con una advertencia importante porque tienen un color similar.
Sin embargo, hay otra cuestión a tener en cuenta al considerar sus estados: ¿cuál es el siguiente paso que pueden dar los usuarios?
Diseñe para las próximas acciones probables de su usuario según el estado
¿Cuál debería ser el siguiente paso para el usuario si recibe una advertencia crítica? Esto es algo que debe considerar, ya que es posible que deba considerar pasos adicionales para asegurarse de que los usuarios conozcan ciertos estados.
Por ejemplo, ¿qué sucede si hay una alerta crítica urgente sobre algo (como que su servidor ha sido pirateado o un mensajero está esperando abajo)? En este caso, es posible que se requieran elementos de diseño adicionales, como notificaciones de alerta o modales.
El nivel de gravedad a menudo refleja el mantra de búsqueda de información visual de Ben Schneiderman: primero navegue, haga zoom y filtre, luego detalles a pedido.
Por lo general, es necesario proporcionar una descripción general simple con estados “verdes”, mientras que los estados “amarillos” a menudo requieren una ampliación para una mayor comprensión. Por otro lado, los estados rojos requieren que los usuarios profundicen en los detalles para comprender qué se debe hacer como siguiente paso.
Sin embargo, esta es solo una regla general: deberá realizar una investigación del usuario para comprender cuáles serán los próximos pasos del usuario, especialmente si está diseñando con más de tres estados de color.
Esto es especialmente importante si presenta varios estados en una página. En este caso, debe considerar cómo los estados pueden interactuar entre sí.
¿Cómo interactúan varios estados entre sí?
Los estados individuales no viven en burbujas, y si no piensas en ellos, esto puede tener consecuencias terribles.
Tener un modal de alerta emergente cada vez que hay una alerta crítica suena bien, pero aparecen seis modals de alerta cada vez que acceden a la página cuando se encuentran en un escenario catastrófico con múltiples estados críticos.
Sin mencionar que puede haber interdependencias entre diferentes estados. Por ejemplo, si un servidor se muestra inactivo, ¿qué muestran los otros estados asociados con ese servidor (si los hay)?
Como resultado, cuantos más estados muestre, más tendrá que considerar si hay otras interdependencias en las que debe pensar.
Los estados, además de “todo está bien”, importan
Los estados que indican problemas suelen ser más críticos para los usuarios que los que indican que todo está en orden.
En estos casos, debe anticipar lo que el usuario hará a continuación después de ver dichos estados. Como resultado, no puede simplemente cambiar el color y esperar que todo funcione bien. Si no se proporciona a los usuarios los próximos pasos claros, se producirá frustración.
Entonces, si agrega varios estados para apoyar al usuario y su deseo de visibilidad, hágase estas tres preguntas. De esta manera, no solo proporciona íconos de diferentes colores: les da una idea de detalles importantes e instrucciones claras sobre cómo proceder.
Kai Wong es diseñador sénior de UX, escritor de diseño y colaborador del boletín Data and Design. su nuevo libro diseño de UX basado en datos, explica pequeños cambios que puede realizar en los datos para mejorar el proceso de diseño de UX.
