Por qué se necesitan etiquetas de texto (los íconos por sí solos no bastan)

• Apoya firmemente las etiquetas de texto (text labels)
• Las interfaces modernas tienen un exceso de íconos, lo que hace que los usuarios gasten demasiados recursos cognitivos interpretando su significado
• Esto termina ralentizando las tareas y generando experiencias ineficientes de forma repetida
• No es fácil transmitir significado solo con íconos, y la mayoría de ellos están incompletos sin etiquetas de texto

# Problemas que crean los íconos

1. La mayoría de los íconos no transmiten un significado claro de inmediato

• Se suele decir que un “buen ícono” puede comunicar suficientemente su significado, pero en la práctica cualquier ícono implica una carga cognitiva para interpretarlo
• Por ejemplo, el “ícono de papelera” es relativamente claro para indicar eliminar (Delete), pero el “ícono de lápiz” es ambiguo
  • ¿Escribir? ¿Editar? ¿Dibujar? ¿Crear?
• El contexto puede complementar el significado, pero eso también exige una carga cognitiva adicional

2. Cuantos más íconos hay en una interfaz, más difícil se vuelve navegarla

• A medida que aumentan las funciones, se vuelve más difícil diferenciarlas solo con íconos.
• Hasta 5-7 funciones pueden distinguirse con íconos, pero cuando pasan a ser 15-20, es muy probable confundir íconos parecidos para guardar/compartir/editar/crear.
• A medida que se debilita la diferenciación entre íconos con funciones similares, la legibilidad disminuye.

3. Los íconos solo tienen sentido dentro de una interfaz específica

• Los usuarios deben moverse entre distintos entornos de interfaz (navegador web, sistema operativo, apps, etc.)
• Un ícono usado en una interfaz puede tener un significado totalmente distinto en otro entorno
• En especial, al usar conjuntos de íconos estándar (como Google Material Design), si el mismo ícono se usa con otro significado, la confusión aumenta

# Beneficios que las etiquetas de texto aportan a la interfaz

1. El texto por sí solo también es más eficiente

• Nuestro cerebro está optimizado para reconocer palabras rápidamente.
  • Las palabras familiares pueden entenderse de inmediato sin necesidad de leer letra por letra
  • En cambio, la mayoría de los íconos requieren más esfuerzo porque hay que aprender un nuevo lenguaje visual
• Una lista de texto puede leerse de arriba hacia abajo, pero cuando solo hay íconos, hay que escanear alternando horizontal y verticalmente.
  • Especialmente en móviles, cuando se alinean íconos de formas parecidas, aumenta la confusión visual.

2. El texto hace que los íconos sean más eficientes

• Cuando se agregan etiquetas de texto:
  • el significado del ícono se vuelve más claro y la navegación es más rápida
  • disminuye la carga para el diseñador de tener que transmitir todo el significado con un solo ícono.

3. Los íconos pueden ser un elemento visual importante en interfaces centradas en texto

• Los íconos funcionan como puntos de anclaje visual (visual anchor) y, al combinarse con texto, ofrecen la interfaz más efectiva

Encontrar el equilibrio entre íconos y texto

• Al elegir entre íconos y etiquetas de texto, hay que considerar la carga cognitiva del usuario.
• Una UI compuesta solo por íconos puede verse limpia al principio, pero en realidad puede ser ineficiente porque obliga al usuario a interpretarla
• La respuesta no es encontrar el ícono perfecto.
  → Lo importante es combinar íconos y texto para ofrecer la mejor experiencia posible.

# Principios clave para un diseño de UI óptimo

1. No intentes expresar todo solo con íconos.
2. Agregar etiquetas de texto mejora la legibilidad y la accesibilidad.
3. Los íconos y el texto no compiten entre sí, sino que se complementan.
4. Considera cómo se usa la app o el sitio web dentro del entorno digital general.
5. Haz que el usuario no tenga que “interpretar” la interfaz, sino que pueda “entenderla de inmediato”.

Conclusión: no importa una “UI bonita”, sino una “UI fácil de entender”

• Cada vez que surja la tentación de crear un ícono nuevo o de eliminar etiquetas de texto, vale la pena pensarlo otra vez.
• Un diseño verdaderamente limpio no es el que “parece simple”, sino el que “es fácil de entender”.

[ndrgrd]

Parece que los íconos solo deberían usarse cuando se entienden de un vistazo, y que además es imprescindible una función para mostrar texto de apoyo al mantenerlos presionados.

[nemorize]

Limitamos al máximo las situaciones en las que se usan solo íconos.

• Cuando se coloca un ícono evidente en una ubicación evidente (ChevronLeft en la esquina superior izquierda, Vertical3Dots en la esquina superior derecha)
• Cuando se requiere una interacción del usuario para que ese ícono aparezca, y en esa misma zona de interacción se muestra el mismo ícono junto con una etiqueta (BellOff en la acción de desactivar notificaciones)
• Cuando va acompañado de datos numéricos evidentes (me gusta, no me gusta, tiempo)
• Cuando se incluye una función que explica el uso del ícono, como un tooltip o tutorial que describe ese ícono o conjunto de íconos
  ** Cuando lo pide el cliente jaja;

[GN⁺]

Opiniones de Hacker News

• El equilibrio es importante. Si hay algunos íconos en un menú, sirven como puntos de referencia y le dan una “forma” distintiva al menú
  • Si todos los elementos del menú tienen íconos, resulta confuso
• Desde la década de 1990, la investigación de UI ha mostrado que las etiquetas se reconocen mejor que los íconos
  • Hoy existen mejores tecnologías de pantalla, pero hay una tendencia a eliminar el texto por modas de diseño y pereza en la localización
  • Incluso cuando hay guías de usabilidad, se ignoran. Porque el diseño de UI se ha convertido en una profesión guiada por sensaciones
  • Por ejemplo, las Human Interface Guidelines de iOS de Apple indican claramente que la barra de pestañas debe incluir íconos y etiquetas de texto
  • Muchos diseñadores no leen estas guías
• Existe la especulación de que muchos estudios se reproducirían de forma distinta en Europa y Estados Unidos
  • Las señales de tránsito en Estados Unidos están compuestas principalmente por texto
  • Europa tiene muchos países pequeños, así que usa pictogramas
  • Los europeos captan mejor el significado de los pictogramas que los estadounidenses
• La mayor parte del mundo cambió hace mucho tiempo a sistemas de escritura fonética
  • La escritura fonética es superior a los pictogramas
  • Los íconos son opcionales y el texto es esencial
• A menudo, cuando uno está ocupado con cierto tema, aparece al día siguiente en HN
  • Hice una pequeña app de dibujo para mi hijo de 27 meses, y al principio usé solo íconos, pero le resultaban confusos
  • Cuando agregué etiquetas de texto, disminuyó la confusión visual
• Los íconos están bien, pero sin tooltips al pasar el mouse o etiquetas tipo texto alternativo, resultan frustrantes
  • Aprender software nuevo se vuelve más lento y hay que buscar documentación o tutoriales en video
• UX Myth — el mito de que los íconos mejoran la usabilidad
• Siempre he odiado los íconos y su proliferación
  • Defiendo el texto, pero no suele ser bien recibido
  • Mucha gente plantea una nueva hipótesis: que son lectores lentos
  • Leer todas las etiquetas de un menú toma alrededor de 1 segundo
  • Nunca es más rápido interpretar texto que íconos
  • Terminé estando de acuerdo en que hay que considerar a los lectores lentos
• Quiero defender el texto frente al vacío
  • Las etiquetas de texto son pequeñas y tienen suficiente espacio alrededor
  • Se puede resaltar el texto y facilitar el escaneo visual
  • La solución definitiva es permitir que el usuario ignore los errores del diseñador
  • Se enfatiza que reconocer texto es más fácil que reconocer íconos
  • Los íconos ocupan menos espacio y son más eficientes
• He escuchado la frase: “Una imagen vale mil palabras, pero muchas veces una basta”