www without searcher online iconfinder icon copyright user-interface icons

user interface - without - ¿Debe un icono mostrar el estado actual o el siguiente estado?



png searcher (4)

Esto no ha sido verdaderamente 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 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 no se está reproduciendo, y muestra el ícono de pausa cuando se 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. :)

Al usar imágenes de iconos sin leyendas de texto, ¿debería el icono representar el estado actual o el siguiente estado? 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?


No hay estandarización ni tendencia humana general sobre esto. Por ejemplo, las Pautas de interacción de MS Windows UX especifican cuatro tipos básicos de alternar el control de divulgación progresivo . Tres de cada cuatro muestran el estado cuando se activa, mientras que uno muestra el estado actual.

Creo que si prueba un enfoque particular en 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 usan el ícono 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 lo usan tanto para leer el estado como para establecer el estado, básicamente eres una manguera, pero hay algunas cosas que puedes intentar para minimizar el acople:

  • Use texto además o en lugar de un ícono. Cuando se etiqueta 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 iconos de alternancia, considere usar un control de casilla de verificación, si eso está permitido.

  • Si su lib no admite casillas, 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:

    • Los botones de comando siempre están etiquetados con la acción que comprometen, por lo que si su icono indica el estado que recibe el usuario, le da al icono una apariencia en relieve 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, por lo tanto, coloque 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.


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 del "próximo estado" parece más atractivo para que el usuario haga clic.


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

Dio el ejemplo de texto que está 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.