Iconos como parte de una experiencia de usuario impresionante-iconos-como-parte-de-una-experiencia-de-usuario-impresionante.jpg
Debido al espacio limitado en la pantalla, usualmente reemplazamos las etiquetas de texto con iconos siempre que sea posible. Los iconos toman menos espacio, no tienen que ser traducidos, y la gente está familiarizada con ellos después de todo, ¿verdad?

Eso no siempre es cierto. Vamos a ver qué se necesita para hacer un icono de fácil uso.


Beneficios de los iconos

Son muchos de los beneficios de usar iconos en diseño incluyendo:

- Los iconos son buenos objetivos. Su tamaño es típicamente lo suficientemente grande para ser fácilmente tocado en una interfaz de usuario amigable con los dedos.
- Ahorran la propiedad de la pantalla. Los iconos pueden ser lo suficientemente compactos como para permitir mostrar más contenido en un espacio relativamente pequeño.
- Los iconos son rápidos de reconocer de un vistazo. Esto es particularmente cierto para los iconos estándar que la gente ha visto y utilizado antes.
- Normalmente no hay necesidad de traducir iconos para usuarios internacionales. Un buen ejemplo es un envilope. Parece lo mismo en varios países.
- Los iconos mejoran el atractivo estético de un diseño. Porque traen deleite visual a la experiencia del usuario.

Y, por último, pero no menos importante, la mayoría de las aplicaciones utilizan iconos. Es un patrón de diseño que es familiar para los usuarios.

A pesar de estas ventajas potenciales, los iconos a menudo causan problemas de usabilidad cuando se diseñan sin tener en cuenta sus muchas desventajas potenciales.


Tipos de iconos

Centrémonos en los tipos de iconos y su impacto en la experiencia del usuario.


Iconos universales

Los iconos son, por definición, una representación visual de un objeto, acción o idea. Hay algunos iconos que disfrutan principalmente de reconocimiento universal de los usuarios. Los iconos para el hogar, la impresión y el carrito de la compra son tales ejemplos.

Sólo hay un problema detrás de este grupo: los iconos "universales" son raros. Fuera de los ejemplos anteriores, la mayoría de los iconos siguen siendo ambiguos para los usuarios debido a su asociación con diferentes significados a través de varias interfaces.

Iconos como parte de una experiencia de usuario impresionante-screenshot_1.jpgIconos como parte de una experiencia de usuario impresionante-screenshot_1.jpg

Iconos confusos y conflictivos

El problema surge cuando se está implementando un pictograma de uso común que tiene significados contradictorios.

El icono de la "hamburguesa" es un excelente ejemplo de un icono que se está esforzando por llegar a ser universalmente conocido.

Iconos como parte de una experiencia de usuario impresionante-screenshot_2.jpg

Si bien la mayoría de las interfaces utilizan el icono de hamburguesa para comprimir la navegación en una superposición desplazable que está oculta de forma predeterminada, algunos utilizan el mismo (o un icono muy similar) para representar una lista. Por ejemplo, la aplicación de gestión de listas Buy Me a Pie utiliza el icono de 3 líneas como forma de acceder a una lista de elementos añadidos con frecuencia.

Iconos como parte de una experiencia de usuario impresionante-screenshot_3.jpg

Una funcionalidad que difiere del significado más común de "menú de navegación". La coloración es demasiado sutil para hacer que los usuarios se den cuenta de que este icono tiene un significado diferente.

Otros iconos frecuentemente malinterpretados por los usuarios incluyen el corazón y la estrella. Imagine que vea este icono debajo de una imagen en una aplicación. ¿Qué significa esto? ¿Qué sucede si la tocas? No sólo la funcionalidad precisa asociada a estos iconos varía de un sitio a otro, pero estos dos iconos compiten entre sí.

Como resultado, estos iconos y sus significados exactos son difíciles de interpretar con precisión. Incluso en el contexto de la aplicación en sí, estos símbolos pueden ser realmente confuso cuando el usuario está esperando un resultado y obtiene otro.

Iconos únicos

Qué hacer cuando su producto tiene funciones únicas más allá de las acciones estándar de compartir, imprimir, etc. ¿Cómo describir conceptos más abstractos - como revisar su historial de pedidos o controlar su tiempo de sueño - con un solo pictograma?

Muchos diseñadores intentan, y muchos diseñadores fracasan. Ellos ocultan la funcionalidad detrás de los iconos que son realmente muy difíciles de reconocer. ¿Adivinarías, por ejemplo, que puedes enviar mensajes directos detrás de este icono en Instagram?

Iconos como parte de una experiencia de usuario impresionante-screenshot_4.jpg

Como usuario de Instagram, es probable que lo hayas visto antes, pero ¿alguna vez lo has utilizado? No estoy muy seguro.

Cuando Google decidió ocultar otras aplicaciones detrás de un icono poco claro en Gmail, aparentemente recibieron una secuencia de solicitudes de asistencia, como "¿Dónde está mi calendario de Google?".

Las representaciones simbólicas de algunos iconos son simplificadas y algunas veces carecen de sentido. El icono del Centro de juegos, por ejemplo, es un grupo de círculos coloridos y de aspecto vítreo:
Apple iOS Game Center, es un ejemplo.

¿Qué significa el icono de Game Center? ¿Cómo se relaciona con el juego?

No importa cuánto sentido tenga un icono una vez que sepa lo que se supone que representa, puede ser una experiencia completamente diferente para los usuarios principiantes. Y es un error común suponer que sus usuarios están familiarizados con los pictogramas abstractos o están dispuestos a dedicar más tiempo explorándolos y aprendiéndolos.


Etiquetas y usabilidad

Como dijo una vez Bruce Tognazzini, "una palabra vale mil imágenes". Esto puede venir como una decepción para aquellos que dicen que una imagen vale más que mil palabras, pero las etiquetas aumentan drásticamente la utilidad de los iconos.

Es un error común que los usuarios (especialmente los usuarios móviles) jueguen con todos los iconos diferentes hasta que descubran lo que hace cada icono. En realidad, los usuarios son a menudo intimidados por interfaces desconocidas. Los usuarios quieren una idea clara de lo que sucederá antes de tomar una acción en un producto desconocido. Por lo tanto, sus iconos deben establecer expectativas claras para los usuarios antes de hacer clic o tocar en ellos.

La característica más importante de una buena interfaz de usuario: la claridad. E incluso si está utilizando un icono estándar, a menudo es más seguro incluir una etiqueta, especialmente si modificó ligeramente el icono para que coincida con sus preferencias estéticas.


Iconos de Apple AppStore


Los iconos de Apple AppStore que se encuentran en los iconos mejoran la experiencia del usuario. Los usuarios pueden estar seguros de lo que sucede exactamente cuando tocan en un icono de Compras.

Así podemos deducir que:

- Para los iconos con etiquetas, los usuarios fueron capaces de predecir correctamente lo que sucedería cuando hicieron tapping en el icono el 88% del tiempo.
- Para los iconos sin etiquetas, este número se redujo al 60%. Y para los iconos sin etiqueta que son únicos para la aplicación, los usuarios predijeron correctamente lo que sucedería cuando se aprovechó el icono sólo el 34% del tiempo.

Tutoriales y Onboarding

Algunos diseñadores encuentran que las etiquetas desordenan su interfaz. Para evitar el uso de etiquetas, incluirán instrucciones para el uso de iconos en la navegación, con la esperanza de capacitar a los usuarios sobre cómo interactuar con los iconos. Si bien esto puede ser una gran manera de introducir iconos únicos o poco comunes, por lo general es una mala idea. Porque muchos usuarios saltarán tu intro; Sólo quieren empezar con la aplicación. El embarque debe ser una herramienta, no una muleta.


Cosas a tener en cuenta y consejos:

Sus iconos deben ayudar a sus usuarios a hacer lo que necesitan hacer sin requerir esfuerzo. No utilice un icono si su significado no es 100% claro para el usuario. En caso de duda, omita el icono. Resida a la copia simple. Si desea conservar las ventajas gráficas de los iconos, puede combinar el icono con la copia.

Si usas iconos en tu aplicación, procura que sean fáciles de reconocer y memorizar siguiendo estas directrices:

- Evite iconos con significado conflictivo. En primer lugar, los iconos deben comunicar el significado.
- Mantenga los iconos simples y esquemáticos. Reduzca la cantidad de detalles gráficos centrándose en las características básicas del objeto en lugar de crear una imagen altamente realista.
- Utilice etiquetas siempre que ayude al usuario. Esto es especialmente cierto para las características complejas.
- ABC (Siempre Prueba). Ver a un usuario real por primera vez interactuar con su interfaz le ayudará a determinar si sus iconos son lo suficientemente buenos. Pruebe los iconos tanto para su reconocibilidad como para su memorización. Pregunte a un grupo de repetición de usuarios si pueden recordar el significado del icono después de que se le diga lo que representó un par de semanas antes.

Conclusión

Cualquier icono en su interfaz debe servir a un propósito, ya sea que esté diseñando un sitio web o una aplicación. Cuando se hace correctamente, los iconos pueden ayudarle a guiar a los usuarios intuitivamente a través de un flujo de trabajo.


Una interfaz de usuario es como un chiste. Si tienes que explicarlo, no es tan bueno.
Estás diseñando para tus usuarios. Cuanto más fácil sea el producto para su uso, más probable es que lo utilicen.