- La práctica de diseño de incluir iconos por defecto en cada elemento de menú se está extendiendo y está provocando ruido visual innecesario
- Google Sheets y el sistema de menús de la versión Tahoe de macOS son ejemplos representativos, con iconos añadidos en casi todos los elementos del menú
- En algunos menús, el criterio de si incluir o no un icono no es claro y, al superponerse con el indicador de alternancia, provoca desorden de alineación
- En cambio, en casos como el menú de organización de ventanas de Finder, los iconos que ayudan a la comprensión visual son útiles, por lo que es importante una decisión contextual en el uso de iconos
- El problema es que Apple abandonó el principio de sus antiguas pautas de interfaz de “no usar iconos arbitrarios”
Crítica al abuso de iconos en menús
- La práctica de poner iconos en todos los elementos de menú se está volviendo el valor predeterminado y está provocando una interfaz excesivamente compleja
- Como en los menús “File”, “Edit”, “View” de Google Sheets, donde todos los elementos tienen iconos
- Este enfoque desemboca en el hábito de hacer “iconos para rellenar espacio”
- Es apenas una estandarización simple que no contempla ni el contexto de cada menú ni la carga cognitiva
- El uso de iconos debe elegirse con cuidado según el contexto
- Hay que evaluar si realmente mejoran la usabilidad o si, por el contrario, generan confusión
- Un enfoque de “pongamos iconos en todos los menús” es una falta de criterio
El cambio en macOS Tahoe
- macOS se había mantenido alejada de este enfoque durante mucho tiempo, pero en macOS Tahoe se introdujeron iconos en todo el menú
- En el menú de Apple y en los menús de Safari “Safari”, “File”, “View” y otros, solo algunos elementos muestran iconos
- “Settings” tiene icono, pero “Privacy Report” no, entre otros casos, lo que muestra una falta de consistencia
- En el menú File de Safari, solo algunos grupos tienen iconos y sangría aplicada, mientras que otros grupos no
- En el menú “View”, la marca de verificación (toggle) convive con los iconos y la alineación se desordena
- En el menú “View” de la app Mail también se mezcla texto, toggle e iconos, formando una estructura visual compleja
- No queda claro por qué existen los iconos ni cuál es el criterio para elegirlos
Casos excepcionales donde los iconos son útiles
- En casos como el menú de alineación de ventanas de Finder, donde los símbolos permiten entender de inmediato la disposición espacial, los iconos ofrecen una gran eficiencia
- Frente a textos como “Top Left”, “Bottom & Top”, “Quarters”, los iconos de disposición visual ofrecen comprensión inmediata
- Estos casos representan un uso positivo de los iconos que mejora la eficiencia cognitiva
- Es decir, los iconos deben ser una elección situacional, no el “predeterminado”
La contradicción con las pautas de Apple
- Las Human Interface Guidelines de Apple de 992·2005·2020 especifican “no uses iconos arbitrarios en los menú”
- Incluye la advertencia de que pueden “causar confusión visual y desconcertar al usuario”
- Los “ejemplos de lo que no se debe hacer” de esas pautas son hoy similares a los menús de macOS Tahoe
- Eso significa que Apple incumplió sus propias pautas
Conclusión
- La aparición de iconos excesivos por todo el menú está provocando ruido visual
- Al cambiar hacia “poner iconos en todos los menús”, Apple ha hecho más difícil justificar la minimización de iconos
- “Si no hay una razón válida, el valor predeterminado debería ser no usar iconos”
- Hoy, en la era de los iconos que invaden los menús, lo expresa de forma sarcástica con “¡Ayuda!”
3 comentarios
Me parece que está bien porque es información no verbal, pero...
También se siente un poco como una frase generada por IA...
Más bien, cuanto más se usa una aplicación, más se tiende a buscar imágenes o colores antes que texto. Dependiendo del tamaño de la pantalla, puede variar si se muestran junto con texto o si se usan solo íconos, pero en general creo que es mejor que estén.
Opiniones de Hacker News
Desde la perspectiva de accesibilidad y localización, la combinación de ícono + texto es lo más ideal
Usar íconos solo para llenar espacio es un problema, pero si el ícono y el texto no coinciden, la carga cognitiva aumenta aún más
Incluso en pruebas donde se ocultó el texto, la combinación de ícono + texto fue la más efectiva
Usar íconos de forma consistente beneficia tanto a usuarios visuales como verbales, y también ayuda en entornos con viewport estrecho
Al final, creo que el problema es si “hay voluntad de pagar el costo de diseño”
Cuando me cuesta leer texto, los íconos ayudan muchísimo
Aproximadamente el 20% de la población de Estados Unidos es analfabeta, y estas personas usan la tecnología recordando íconos y la posición de los botones
Cuando hay solo íconos es difícil entender el significado, pero cuando están ambos, se siente como si trabajara todo el cerebro
Creo que la razón por la que hay íconos en el menú es para hacer matching visual con la misma función en la barra de herramientas
Si no hay íconos en el menú, eso funciona como una señal de que tampoco los hay en la barra de herramientas
Tanto el menú como la barra de herramientas se podían personalizar, y cada elemento estaba compuesto por ícono + etiqueta
Hoy en día hay demasiados packs de íconos (Font Awesome, Material Icons, etc.), así que los desarrolladores tienden a elegir el que “más o menos se parece”
Nuestro equipo a veces crea íconos personalizados, pero como cuesta mucho, la mayoría de las veces solo buscamos algo adecuado en la enorme biblioteca de Google
Sobre la idea de “si no hay una razón para agregar íconos, mejor no ponerlos por defecto”, creo que los usuarios con memoria visual fuerte pueden recordar los íconos de los menús que usan seguido y encontrarlos más rápido
Yo personalmente suelo recordar atajos de teclado, así que me preocupan más los conflictos de hotkeys que los íconos
En el Gmail de antes, los íconos de enlace y archivo adjunto eran casi iguales y me confundían seguido, pero hace poco lo cambiaron por la forma de un clip y quedó mucho mejor
Lo que más me molestó del ejemplo fue la inconsistencia de sangría entre secciones del menú
Si solo algunos elementos tienen ícono, entonces solo esas líneas quedan con sangría; si no lo tienen, no, pero cuando hay una marca de verificación todo queda sangrado, y eso genera un desequilibrio
Esperaba que Apple resolviera ese tipo de detalles de una forma más refinada, así que decepciona un poco
Hace tiempo un historietista al que seguía enfatizaba la importancia del diseño de silueta, y los íconos actuales están sufriendo el mismo problema
El dashboard de AWS está lleno de ruido visual porque los íconos no se distinguen entre sí
En cambio, un diseño como el de los juegos de cartas, que diferencia tanto por color como por forma para que incluso usuarios con daltonismo puedan reconocerlo, es excelente
Google Sheets hace bien esto, pero otros ejemplos no
Ver este artículo relacionado, el colapso de las guías de diseño y cómo restaurar los íconos
Por eso siento que la usabilidad de macOS empeoró mucho
Todas las pestañas del navegador se ven iguales y no puedes distinguir qué pestaña corresponde a qué tarea
Me gusta el ejemplo de íconos en Google Docs
Incluso sin leer el texto, puedes encontrar rápido el tipo de acción, como agregar/eliminar
Primero ubico la posición aproximada con el ícono, y luego confirmo la función específica con el texto
Gracias a eso se reduce el tiempo de navegación por el menú y baja la carga cognitiva
Seguro hay por ahí algún ticket de “mejora de íconos” enterrado en algún backlog
En el ejemplo de Google Docs, encontrar el ícono de enlace es mucho más rápido que buscar “Insert Link”
Funciones como sangría o alineación también se encuentran fácilmente gracias a los íconos estandarizados
Además, esto ayuda a los usuarios no angloparlantes
Por ejemplo, una persona que no domina bien el japonés puede encontrar más fácilmente la función que quiere gracias a los íconos
Yo suelo poner íconos en casi todos los elementos del menú
Como resultado, se redujo la fatiga mental y la selección se volvió más rápida
Cuanto más complejo es el menú, más útil me parece agregar color para aprovechar varios sentidos
Eso sí, los íconos deben tener siempre una forma con significado
Incluso si no tienen significado, encontrar el “segundo elemento” dentro del mismo set de íconos es mucho más rápido que leer texto
Si solo algunos elementos tienen ícono, da la impresión de que son funciones especiales o de uso frecuente
Me parece mucho más útil que cuando todos los elementos tienen ícono
Funciona como una especie de tooltip invertido
Pero si lo que se quiere es destacar solo ciertos elementos, creo que es más efectivo usar distinción visual consistente o el orden de alineación que los íconos
Los elementos que no usas tan seguido se pueden escanear con más calma