La traducción del artículo por parte de los chicos de NN-Group fue motivada por la necesidad de dar instrucciones simples y comprensibles para los diseñadores de los equipos de producto, que pueden ser consultadas si es necesario. Dado que el artículo se publicó el otro día, decidí traducir y al mismo tiempo compartir material útil con todos. Gracias a Yura Vetrov por el dato. El artículo original se puede encontrar aquí
Spoiler: Los controles que cambian entre dos estados diferentes del sistema deben comunicar claramente a los usuarios tanto el estado actual como el estado al que irá el sistema si el usuario hace clic en ese control.
En una reunión reciente de WebEx con un cliente, entré en pánico, pensando que no podía encender el micrófono. Tuve que dar una presentación de 6 horas, ¿cómo voy a hacerlo si ni siquiera puedo encender el sonido? Seguí haciendo clic en el icono del micrófono tachado, pero el micrófono permaneció tachado sin importar lo que hiciera.
Aquí hay una captura de pantalla:
Panel de control para la aplicación de escritorio WebEx:
Arriba: sin sonido;
Abajo - Estado silenciado
En mi pánico, ¡no noté el cambio de color del icono en absoluto! A pesar de que el micrófono se cruzó en ambos estados, encontré que el color rojo del icono debería haber señalado que el botón estaba activo y yo estaba desactivado.
He visto a usuarios ser víctimas de este problema muchas veces. El botón de silencio se utiliza para alternar entre los dos estados del sistema (Silenciados y No silenciados), pero el problema es que los usuarios no pueden saber fácilmente en qué estado se encuentran actualmente y a qué estado están pasando. (Además, contrariamente a las mejores prácticas de diseño de iconos , la implementación de WebEx carece de texto. etiqueta del botón de silencio).
Dos piezas de información, dos controles
En una situación en la que los usuarios pueden navegar entre dos estados posibles (llamémoslos Encendido y Apagado, para simplificar), hay dos bits de información que son relevantes para el usuario y, aunque están relacionados, no son idénticos:
- El estado actual del sistema: encendido o apagado; en el ejemplo con un micrófono - Silenciar o Activar silencio;
- , — , , ( Unmute Mute).
La forma obvia de implementarlos es tener dos elementos de interfaz de usuario diferentes: un indicador de estado y un botón de cambio de estado.
Por ejemplo, en la aplicación Tesla, la pantalla de controles adopta este enfoque: tiene un indicador de estado que muestra que el automóvil está bloqueado y un botón de desbloqueo. Hacer clic en la luz de estado no hace nada, pero hacer clic en el control desbloqueará el vehículo.
Tesla para iPhone:
(izquierda) El icono sobre el botón de desbloqueo sirve como indicador de estado; El botón Desbloquear es un botón de alternancia de estado que indica claramente lo que sucede si los usuarios hacen clic en él.
(Derecha) El estado y la etiqueta del botón cambian cuando el usuario desbloquea el vehículo.
Dos estados de información, un control
Sin embargo, si tiene un sistema con dos estados, el estado actual y el siguiente, deben complementarse entre sí. En otras palabras, podemos asumir que dos piezas de información (el estado y lo que sucede a continuación) se pueden comunicar usando un solo control: el botón de alternancia de estado. Porque si los usuarios conocen un estado (al menos en teoría) pueden inferir el resultado de un clic;
Sin embargo, recuerde que cualquier decisión que tome requiere tiempo y esfuerzo cognitivo y, a menudo, hay muy poco tiempo para reaccionar rápidamente. Como en el ejemplo: intento encender mi micrófono y todos me están esperando, o me ignoran y continúan la conversación, es decir, no tengo tiempo para detenerme a pensar en la interfaz o sacar conclusiones.
A veces, la afección se puede identificar fácilmente a partir de otras señales. Por ejemplo, en un reproductor de video, solo hay un control (el botón "Reproducir") que indica el estado futuro. Sin embargo, hay suficientes señales para entender que el video se está reproduciendo: el usuario puede escuchar audio o ver cambios en la imagen en la pantalla.
YouTube: el ícono de reproducción se reemplaza por una pausa mientras se reproduce el video. El icono indica el estado en el que entrará el sistema cuando se presione el botón.
Si necesita usar un solo control para denotar el estado y lo que sigue, ¿cómo debe denotarlo?
En esta situación, se pueden considerar dos alternativas:
- , , , , .
. , «», «» « ».
, , , Tesla OBS .
OBS Studio: «Start Recording» «Stop Recording» .
(, ), , . , YouTube . - .
/: , « ». , , , .
Word B () (), , , . .
Volvamos al ejemplo de WebEx. Mirando hacia atrás, podemos ver que WebEx usó un control para indicar tanto el estado actual como lo que sucederá a continuación, e implementó una segunda decisión de diseño: señalar el estado activo. Desafortunadamente, el rojo como indicador activo fue una mala elección por varias razones:
- El color rojo se usa arbitrariamente en la interfaz; por ejemplo, el botón X (Salir) también es rojo, y esto no puede significar que esté activo. (Si el rojo representa un estado activo, ¿qué significa la cruz roja? ¿Que ya salí de la reunión?)
- Otro color (azul) se usa para indicar el estado activo de otros botones, como Video y Chat (es decir, un icono de video azul indica que el video está encendido).
En ausencia de un indicador claro del estado activo, el usuario debe confiar en la etiqueta del botón para decidir qué está pasando, y si la etiqueta del icono no cambia, solo causaría confusión.
Por cierto, la aplicación Teléfono en el iPhone usa la misma implementación, con la única diferencia de que es más consistente que WebEx y usa un relleno blanco para indicar el estado activo. Incluso con estos ajustes, es difícil determinar el estado activo del botón.
Aplicación para iPhone: el botón Silenciar no cambia su icono, pero indica un estado activo con un relleno blanco (izquierda). Si bien el blanco es posiblemente un tono mejor que un color aleatorio, no es un indicador fuerte de un estado activo.
Recomendaciones
Entonces, ¿cuál es la recomendación general para los botones de alternancia de estado que sirven como indicadores de estado? La solución más segura es usar 2 elementos de la interfaz de usuario, uno para el estado actual y el otro para la acción de alternar estado, como en el ejemplo de Tesla.
Si lo desea, puede combinar los dos en un control, tal como lo hace Zoom. Su control de silencio consta de dos componentes separados:
- Una etiqueta de texto que indica lo que sucede si el usuario hace clic en este control.
- Icono que indica el estado actual del sistema
Hacer clic en cualquiera de ellos cambiará el estado.
En el diseño de Zoom, el icono está destinado a representar el estado actual y la etiqueta indica lo que sucederá si los usuarios hacen clic en el botón. Hacer clic en un icono o etiqueta cambia el estado.
Recuerde, su objetivo al encender / apagar es asegurarse de que los usuarios comprendan rápidamente ambos:
- Estado actual
- ¿Qué sucede si hacen clic en este control?
Estima los dos estados por los que pasará el sistema.
¿Es obvio que estos son dos estados opuestos?
- En caso contrario, habla a favor de un diseño con dos controles: uno para el estado actual y otro para la acción de transición a otro estado.
- (, , ), , , .
(, , ), ?
- , , ( ) .
- , — .
( Mute)?
- , .
- , .
Gracias por el tiempo y suscríbete al canal UXHorn , donde constantemente publico los artículos más interesantes sobre UX e investigación.