¿Debe un icono mostrar el estado actual o el siguiente estado?

Question

Al usar imágenes de iconos sin leyendas de texto, ¿debe el icono representar el estado actual o el siguiente? Por ejemplo, tengo un bloque de texto que quiero minimizar/maximizar o quiero alternar mostrando All User Records o simplemente My Records. Estoy seguro de que hay argumentos convincentes para cada lado y sé que la coherencia es la clave, pero ¿cuáles son los argumentos relacionados con un buen diseño intuitivo del usuario?

Answer 1

No hay ni una estandarización ni una tendencia humana general en esto. Por ejemplo, MS Windows UX Interaction Guidelines especifica four basic kinds of toggling progressive disclosure control. Tres de cada cuatro muestran el estado cuando se activa, mientras que uno muestra el estado actual.

Creo que si prueba un enfoque particular para sus usuarios, obtendrá diferentes resultados dependiendo de lo que pregunte. Si les muestra un control y les pregunta en qué estado se encuentra la aplicación, tenderán a leer el ícono como si indicara el estado. Si les muestra un control y les pide que cambien el estado (donde en algunos casos el estado ya ha cambiado), leerán el ícono como si fuera el estado que desea alcanzar. Es precisamente por eso que inventaron botones para alternar.

Si tiene suerte, los usuarios utilizan el icono principalmente para leer el estado o establecer el estado, y no para ambos. Luego, deje que el ícono indique para lo que lo usen los usuarios.

Si de hecho lo utilizan tanto para leer el estado y el establecimiento del estado, que está básicamente REGARSE, pero hay algunas cosas que usted puede tratar de minimizar hosehood:

• Uso de texto, además de o en lugar de un ícono. Cuando se marca con un verbo (por ejemplo, "Conectar"), el control indica el estado que recibe el usuario. Cuando se etiqueta con un adjetivo o sustantivo (por ejemplo, "En línea"), implica el estado actual.

• Si su lib no admite los iconos de alternar, considere usar un control de casilla de verificación, si eso está permitido.

• Si su lib no admite casillas de verificación, considere dos controles, uno para establecer cada estado, donde el estado actual está deshabilitado. No es demasiado bueno para leer el estado actual, pero hay algo de precedencia para esto en los menús desplegables.

• Fiddle con diseño gráfico o colocación para que sea coherente con el significado que ha elegido. Por ejemplo:

  • botones de comando siempre se etiquetan con la acción que se comprometen, por lo que si su icono indica el estado del usuario obtiene, después dar al icono de una apariencia elevada como un botón de comando. Si el ícono indica el estado actual, entonces dale una apariencia plana.

  • Los controles de la barra de herramientas generalmente muestran el estado que provocan, así que ponga el icono en la parte superior de la ventana si indica el estado que recibe el usuario. Por el contrario, los iconos en el "área de trabajo" de la ventana indican objetos o atributos, por lo que los íconos allí deben mostrar el estado actual. Los iconos en la parte inferior de la ventana (en la barra de estado) también deberían mostrar el estado actual.

Answer 2

Si solo va a tener un botón para alternar entre dos estados, entonces el botón debe representar el siguiente estado, porque esa es la acción que el botón tomará cuando se haga clic.

Dio el ejemplo de texto minimizado/maximizado. Piensa en cualquier interfaz de árbol expandible que veas en Windows. Un árbol minimizado tiene un [+] al lado, porque al hacer clic en el botón se expandirá el árbol. Y un árbol maximizado tiene un [-] al lado por la misma razón.

También podría tratar de hacer un alternar que está resaltado o "presionado" como dice mihi, pero eso podría ser más confuso.

Answer 3

Esto no ha sido realmente estandarizado. Los iconos de carpetas, por ejemplo, muestran las carpetas abiertas cuando están abiertas y las carpetas cerradas cuando están cerradas. Lo mismo para los triángulos de revelación, etc.

Sin embargo, en otros contextos, esto no siempre es cierto. En un reproductor de películas, la flecha "Reproducir" muestra cuando la película está no reproduciéndose, y muestra el ícono de pausa cuando está reproduciendo. Probablemente lo que hay que hacer es usar su mejor juicio y luego sondear a sus usuarios. Si una preponderancia de las personas que prueba se confunde con las opciones de su icono, cambie de lugar. Luego, pruébelos nuevamente y verifique si su prueba inicial se mantiene. :)

Answer 4

Prefiero el enfoque de "siguiente estado" (haga clic en más para expandir, haga clic en menos para colapsar). Una razón es que este es el enfoque más utilizado, por lo que hacer cualquier otra cosa podría confundir a los usuarios (y a mí también). Otra razón es que el enfoque de "siguiente estado" parece más atractivo para que el usuario haga clic.