Echa un vistazo a la web, desde tu bandeja de entrada de correo electrónico hasta Facebook o cualquier rincón extraño por el que navegues, y verás iconos, a menudo apoyando al texto o reemplazándolo por completo.
Echa un vistazo a la web, desde tu bandeja de entrada de correo electrónico hasta Facebook o cualquier rincón extraño por el que navegues, y verás iconos, a menudo apoyando al texto o reemplazándolo por completo.
Pero los seres humanos han utilizado iconos como herramienta de comunicación mucho antes del auge de la web y del diseño de experiencia de usuario (UX). Y dondequiera que se hayan usado, siempre han tenido un único objetivo: comunicar un mensaje de manera eficiente a través de un lenguaje visual comúnmente entendido.
Para lograrlo, los iconos necesitan dos cosas:
- Reconocimiento generalizado
- Un significado único y ampliamente reconocido
Cuando los iconos logran esas dos cosas, no hay duda de su poder. Solo hay que mirar las principales religiones del mundo. A pesar de la amplia gama de significados que podrías asignar a la cruz, la estrella de seis puntas o la media luna con estrella, reconoces inmediatamente cada uno como un símbolo de un movimiento mundial.
(Vale la pena señalar que la media luna y la estrella no son de ninguna manera un símbolo oficial del islam, una religión famosa por ser iconoclasta).
Pero en el mundo digital, los iconos se enfrentan a serios desafíos. Uno de los mayores es el uso inconsistente.
Así que analicemos más de cerca esos problemas y descubramos cómo trabajar con ellos y superarlos.
El reconocimiento universal y la siempre esquiva definición global
La adopción generalizada de un icono es difícil y podría incluso requerir algún tipo de estandarización, posiblemente hasta un organismo regulador que haga cumplir su uso.
La cuestión es que la gente no siempre deducirá el significado de un icono de la forma en que tú pretendes. Las asociaciones culturales e incluso personales pueden alterar el significado previsto de un símbolo, a veces de forma desastrosa.
Si un icono no es familiar, la gente deducirá su significado a partir de sus experiencias previas y pistas contextuales (es decir, otras señales dentro de la interfaz de usuario).
Esto puede jugar a tu favor o en tu contra.
Por ejemplo, la señalización vial suele ser geográficamente específica, y es seguro asumir que un conductor estadounidense no se encontrará de repente y sin querer conduciendo por carreteras europeas. En este caso, la señalización para Estados Unidos debe diseñarse de acuerdo con las normas vigentes en EE. UU.
Por otro lado, si estás diseñando señalización para un país pequeño y sin salida al mar, atravesado por autopistas internacionales, tendrás que tener en cuenta las normas y los idiomas de una amplia variedad de conductores.
Limitaciones culturales
Si diseñas para una audiencia internacional, ten en cuenta que los iconos pueden sufrir los mismos problemas de traducción que el lenguaje escrito y hablado. Las connotaciones de un icono pueden variar enormemente entre culturas, creando el tipo de ambigüedad que siempre debemos evitar en el diseño de IU y UX.
Considera el icono del ojo, usado a menudo en interfaces donde las visualizaciones son importantes. Al no tener apenas un significado preexistente en la cultura norteamericana, el icono del ojo es una solución elegante. Sin embargo, para algunos, el ojo conlleva una connotación negativa como el mal de ojo, el ojo de la envidia o el ojo de la enfermedad.
Adaptación del usuario
Al igual que otros medios de comunicación, los iconos son dinámicos: están en un estado constante de flujo semántico que, en parte, se ve afectado por nuestro propio uso de ellos.
A medida que los significados de los iconos evolucionan, habrá que eliminar las versiones anteriores para poder construir un lenguaje visual estandarizado.
Si las personas que usan tu sitio o producto digital se han familiarizado con los resultados de interactuar con un icono en particular, ¡mantén esa relación! Cambiar repentinamente el significado de un símbolo en una interfaz conduce a una mala experiencia de usuario.
Ebook gratuito: Introducción al diseño web
Domina los conceptos fundamentales del diseño web, como la tipografía, la teoría del color, el diseño visual y mucho más.
Ambigüedad del mensaje y por qué las palabras (todavía) importan
Usa las palabras
Las personas procesan las imágenes más rápido que el texto, especialmente cuando ya conocen el significado de dichas imágenes.
Pero, ¿puedes confiar en un solo icono para transmitir el mismo mensaje a todo el mundo? En muchos casos, las palabras aclararán el mensaje de un icono y darán a los usuarios confianza en los resultados de sus interacciones. Esa mayor confianza puede traducirse en importantes mejoras positivas en las métricas clave.
Así que, aunque los iconos pueden ser más rápidos, las palabras son más fiables. ¡Y funcionan aún mejor juntos!
Cada vez más, los diseñadores de interfaces combinan iconos y palabras. Es un sacrificio menor. El icono de hamburguesa, que prácticamente se ha vuelto famoso por su falta de claridad, cobra sentido de repente con la palabra "Menú" debajo.
Evita las modas
Los iconos de moda, por definición, no están hechos para durar. Son divertidos para proyectos de corta duración, pero para aplicaciones que esperan una larga vida útil, querrás ceñirte a los clásicos.
En Hollow Icons, Aubrey Johnson explica sus reacciones cuando le pidieron que revisara los diseños móviles de un colega.
La aplicación se veía bastante bien en general, pero parte del diseño seguía la estela que sentó iOS7. Estaban diseñando para "encajar" en la plataforma.
Como argumenta Johnson más adelante, a pesar de la tendencia de los iconos de línea fina, en realidad son una opción inferior en comparación con los iconos rellenos. Los diseñadores deben tener cuidado con seguir modas cuando se sacrifica la usabilidad.
Si tus iconos parecen demasiado específicos para una situación concreta, desafíate a encontrar una solución mejor para tus diseños.
Los clásicos se convirtieron en clásicos por su atemporalidad y su uso constante. Y ese uso constante ha creado la familiaridad que buscamos. Los conocemos. Hemos interactuado con ellos. Sabemos qué resultados esperar.
Los iconos de moda carecen de capacidad de reconocimiento, y ese es un elemento crítico a la hora de establecer las expectativas del usuario.
Sin explicaciones
Nueve de cada diez veces, si un icono necesita explicación, es que ya está fallando. La familiaridad nace de la repetición, y las desviaciones pueden provocar confusión o una mala experiencia de usuario.
Evita que un icono cargue con todo el peso; utiliza otros elementos de diseño para aclarar su significado.
Por ejemplo, para reforzar que tu icono de lupa representa una búsqueda y no un zoom, colócalo dentro de un campo de entrada de texto. De este modo, los usuarios estarán preparados para reconocer la herramienta de búsqueda a través del icono, y esa preparación se verá reforzada por la presencia de la barra de búsqueda, ya sea expandida o contraída.
Aquí tienes un ejemplo de un diseño de barra de búsqueda expandible que utiliza la lupa apoyada por una interacción sutil. La vista previa de la barra de búsqueda aclara el significado de la lupa, en este contexto, como el icono de búsqueda.
¿Cómo podemos mejorar?
Úsalos con moderación y criterio
Los iconos no siempre deberían ser tu solución por defecto, a pesar de su eficiencia.
En su lugar, las soluciones de diseño inteligente pueden reforzar el mensaje de tus iconos y aumentar la interacción del usuario. Toma como ejemplo la tendencia actual en los principales sitios web: están alejándose del icono de menú de hamburguesa único para representar la navegación principal e implementando una jerarquía de iconos. El nuevo diseño promociona las páginas más populares como iconos, lo que aumenta la familiaridad y reduce la dependencia de un único icono de menú ambiguo.
Facebook realmente impulsó este cambio hacia la navegación de "barra de pestañas" cuando rediseñaron su diseño de menú en 2013 para reflejar mejor cómo utiliza la gente la aplicación de Facebook.
Apégate a lo convencional
Muévete con cuidado y sé siempre consciente de las implicaciones de usar iconos poco familiares; cualquier desviación de las normas aceptadas debe ser intencionada, es decir, diseñada para aprovechar ese significado o uso poco común.
Los iconos que respetan las convenciones serán reconocidos más fácilmente por una base de usuarios más amplia, ayudando así a que las personas interactúen con tus iconos con mayor confianza.
Diseña un contexto significativo
Al igual que el lenguaje, los iconos adquieren significado a través de su contexto. Así que refuerza tus iconos con un buen diseño que cree el entorno necesario para que el icono destaque.
Por ejemplo, una flecha en el borde derecho de un libro digital podría significar cualquier cosa, pero dada su ubicación, la gente probablemente entenderá que la flecha sirve para pasar a la página siguiente.
Ten en cuenta que este ejemplo es de bajo riesgo (un usuario puede volver fácilmente a la página anterior si no tenía intención de avanzar todavía), lo que lo convierte en un buen lugar para experimentar. Un escenario de mayor riesgo, como publicar una actualización de estado en redes sociales o enviar un correo electrónico, sería un mal lugar para probar algo nuevo.
Usa los iconos con responsabilidad
Sé intencional y preciso con tus iconos, acompáñalos de texto cuando sea necesario y busca la mayor inclusividad posible. Además, diseña el contexto de tus iconos para reforzar su significado.
No olvides nunca que un icono eficaz se basa en el reconocimiento generalizado y en un mensaje concreto y coherente. Si tienes esto en cuenta, no hay margen de error.
