La importancia de los iconos en el diseño web

Por Amelia Rubio hace 2 meses

Es difícil imaginarnos una vida sin iconos. Piénsalo bien, están en todos lados y a veces no nos damos cuenta. Estas imágenes tan pequeñitas son una parte crucial de nuestra interacción con cualquier entorno tecnológico.

Es por ello por lo que los iconos se han convertido en un elemento importante dentro del diseño de interfaces y, en concreto, del diseño web. 

Sin embargo, los iconos ya se usaban antes de la era del Internet. ¿Has caído alguna vez en que las señales de tráfico son iconos? Todos entendemos las indicaciones que transmiten sin necesidad de palabras.

Los iconos transmiten significado y son una herramienta poderosa para comunicar acciones. Aunque un mal uso de los iconos también puede afectar la usabilidad de un sitio web y, por tanto, repercutir en la experiencia de usuario. Y es que no todos los iconos son válidos ni podemos suponer que todos los usuarios están destinados a entenderlos. 

Usar los iconos de manera adecuada en el diseño de una web es una de las claves del éxito y, para ello, deberás conocer algo más sobre iconos.

De la iconografía religiosa al escritorio del ordenador

La palabra “icono” tiene su origen en el cristianismo oriental y se empleaba para referirse a cualquier representación religiosa, ya fuesen esculturas, pinturas, etc.

Sin embargo, es con la aparición de los primeros ordenadores, hace ya más de 40 años, cuando los iconos tal como los conocemos aparecen por primera vez.

Xerox Star- El pionero

En Xerox fueron lo primeros en usar la interfaz gráfica de usuario (GUI, por sus siglas en inglés) en los años 70. A principios de los 80, desarrollaron el primer ordenador con iconos gráficos, el Xerox Star.

xerox star interface

Fuente: Interaction Design Foundation

Los iconos de Apple Lisa y Susan Kare: un toque desenfadado

En 1983, los diseños accesibles y divertidos de Susan Kare dieron a la interfaz de Apple Lisa un aspecto relajado. Poco sabía Kare que sus iconos sentarían un precedente en la historia de las interfaces gráficas, incluso algunos de ellos aún se utilizan en nuestros escritorios. Se trataban de iconos planos en blanco y negro.

susan kare iconsFuente: Susan Kare. Graphic Design (Website)

La evolución de los iconos

Durante los años 80 y 90 los iconos experimentaron muchos cambios. Fueron continuamente rediseñados, incorporando más detalles, dimensiones y colores, y fue a partir del 2000 cuando nacieron nuevos estilos de iconos. El nuevo siglo nos trajo iconos con diferentes texturas, muchos colores, transparentes y con un aspecto más realista.

En la página web History of icons encontrarás información detallada sobre la evolución de los iconos a través de una línea de tiempo divertida y precisa.

Los iconos en la actualidad

La tecnología avanza muy rápido. En apenas unas décadas se ha pasado de iconos en blanco y negro a poder comunicarnos únicamente con iconos. ¡Incluso podemos escribir un texto con emojis y entenderlo!

Estamos tan acostumbrados a los iconos que ni siquiera nos damos cuenta de que están ahí. Son parte de nuestras vidas y de nuestra interacción con los sitios web y las interfaces. No podemos entender una web sin iconos.

Sin embargo, una mayor interacción con iconos significa que necesitamos seguir unas buenas prácticas para sacarles el máximo partido. ¿Cómo usar correctamente los iconos para mejorar la experiencia del usuario y la navegación en un sitio web?

Iconos en el diseño web: por qué son importantes

Los iconos son una herramienta visual poderosa. Cuando se usan correctamente, mejoran la navegación y promueven la satisfacción del usuario. Sin embargo, cuando se emplean de forma incorrecta, se vuelven molestos y generan un ruido visual indeseado. Por eso, los iconos son tan importantes en el diseño web.

Los principios básicos que los iconos deben seguir en una página web son simplicidad y concisión. Pero también hay otros aspectos que determinarán el éxito de un diseño web.

Los iconos deben ser simples

El objetivo principal de los iconos es comunicar acciones o funciones de forma clara y comprensible. Por lo tanto, los iconos que incluyen mucha información pueden dar lugar a confusión y crear conflicto al usuario.

Evita utilizar demasiados detalles. Los iconos son una metáfora del texto. Los textos largos y complejos son difíciles de entender y afectan a la experiencia del usuario. Del mismo modo, a los usuarios les resultará difícil reconocer un icono con muchos detalles. En caso de duda, opta por diseños simples reconocibles a primera vista.

Los iconos deben ser concisos

Cuando le envías un mensaje de texto a tu amig@, ¿cuántos emojis usas para comunicarte? ¿Utilizas cada emoticono con un significado único? Piensa por ejemplo en la cara que guiña el ojo 😉. Estoy segura de que no lo usas siempre de la misma manera…

Los diseños pueden transmitir muchos significados dependiendo de la persona que los lea. Así que, antes de usar un icono específico, primero piensa en los múltiples significados que puede tener y si llevaría a la confusión. Un icono bien diseñado debe comunicar claramente la función para la que se utiliza.

Además, recuerda que los iconos deben ser lo más compactos posible. En una interfaz de usuario, el espacio es valioso y debe haber suficiente sitio para las diferentes funciones.

Los iconos deben ser fáciles de reconocer

Al elegir los iconos para una web, asegúrate de que los usuarios reconozcan el diseño. Para conseguirlo, es importante que el concepto del icono sea claro, reconocible y esté vinculado a la función o característica que describe.

Si un icono es difícil de interpretar a primera vista, implica que los usuarios tendrán que reaprender su significado cada vez que accedan al sitio web.

Veámoslo en un ejemplo. Si eres usuario de Andriod, levanta la mano si no sabías que significaban estos tres iconos la primera vez que interactuaste con esta interfaz:

android navigation buttonsImagen: Botones de navegación de Android 

En el caso de Google Docs, los iconos no son mucho más claros:

Google docs icons

Imagen: Iconos de Google Docs. A primera vista, el usuario no puede identificar a qué se refieren. Después de trabajar con esta aplicación durante mucho tiempo, algunos usuarios encuentran sus funciones difíciles de recordar. 

Precisamente este es uno de los problemas de utilizar iconos no reconocidos por el usuario en general. Las nuevas funcionalidades requieren nuevas imágenes para representarlas. Sin embargo, esto puede ser un problema para los diseñadores de páginas web, ya que los iconos únicos y diferentes pueden dar lugar a malentendidos y confusión.

Los usuarios deben entender los iconos

Cuando un diseñador/a elige los iconos de un sitio web, debe prestar atención al concepto que representa el icono teniendo en cuenta los usuarios potenciales. Hay algunos iconos estándar utilizados en todo el mundo que se entienden por el público en general.

Entre estos iconos familiares, podemos encontrar algunos como el sobre para un correo electrónico, o el conocido disquete de Word para la función de “guardar”. Algunos de estos iconos nacieron en el siglo pasado, pero perduran hasta hoy, lo que los convierte en un gran ejemplo de iconos bien diseñados.

battery iconImagen: el icono de la carga está representado por una batería, aunque hoy en día las baterías, tal y como se conocen tradicionalmente, apenas se usan.

Los iconos favorecen la usabilidad

Los iconos deben ayudar al usuario a navegar por el sitio web. A medida que la tecnología avanza, nuestra impaciencia también aumenta. Estamos acostumbrados a conseguir las cosas muy rápido, y si encontramos algo difícil, ni siquiera nos molestamos en intentarlo. Por lo tanto, los diseños web deben favorecer la experiencia del usuario y hacerla positiva.

Para mejorar la usabilidad de una web, los diseñadores deben prestar atención a aspectos como el significado detrás de cada icono, dónde se encuentra en la web, si los iconos ayudan a los usuarios a realizar ciertas acciones, etc.

Sin embargo, si no se emplean correctamente, los iconos se convierten en un elemento molesto dentro de la web que afecta negativamente a la experiencia de usuario.

Acompaña los iconos con etiquetas de texto

Los iconos refuerzan el mensaje. Tal y como dice el dicho “una imagen vale más que mil palabras” y, en este caso, se convierte en una realidad. Un icono puede comunicar más cosas que el texto en un espacio más pequeño.

Veamos el siguiente ejemplo:

instagram icons

Imagen: estas son las principales funciones de Instagram dentro de su interfaz, que permiten a los usuarios interactuar con la aplicación (versión de escritorio).

Hay cuatro iconos diferentes situados en la esquina superior derecha de la aplicación, y ocupan poco espacio. Sin embargo, cada uno de ellos indica una acción diferente: ir al menú principal, enviar un mensaje directo a alguien, buscar más contenido y cuentas, o ver tus interacciones.

El problema es que no todos los usuarios entienden todos los iconos, sobre todo, los iconos específicos de una aplicación o sitio web, ya que pueden tener diferentes interpretaciones. Por eso, según las buenas prácticas del diseño UI y UX, se recomienda acompañar al icono con una etiqueta de texto breve.

Algunas interfaces optan por coach marks o cuadros indicativos de texto que aparecen en el icono al pasar el cursor por encima. Aunque la idea es buena, no es compatible con el diseño web adaptable, ya que no puede aplicarse a dispositivos con pantalla táctil. Por lo tanto, una de las soluciones más comunes para evitar los malentendidos son las etiquetas de texto, que indican a los usuarios el significado de un icono determinado.

gmail icons

Imagen: Opciones de Gmail para los correos electrónicos recibidos. 

facebook iconsImagen: este es el menú de la izquierda de Facebook. Se han añadido etiquetas de texto junto a los iconos para indicar sus funcionalidades, aunque algunas de ellas son muy conocidas. 

Sé coherente en la posición de los iconos

Hay iconos que siempre aparecen en el mismo lugar y que los usuarios conocen que están ahí. Intenta en la medida de lo posible evitar cambiar el lugar de esos iconos para conseguir un diseño intuitivo.

Por ejemplo, el menú de la hamburguesa suele aparecer en la esquina superior izquierda, por lo que deberás asegurarte de que tu menú también aparezca en la izquierda.

En cuanto a las etiquetas de texto, la ubicación también es importante. Si decides utilizar algunas etiquetas, siempre coloca el icono en primer lugar.

Los iconos contribuyen a la estética de la web

Aunque debes elegir la usabilidad por encima de la creatividad cuando se trata de diseño web, es importante que los iconos que selecciones sigan el estilo general de la página y lo refuercen.

Todos los iconos deben tener un estilo o diseño similar siempre que sea posible. Si optas por ser creativo, asegúrate de que el estilo se pueda identificar claramente en todo el sitio.

Sitios como Flaticon ofrecen a los usuarios la posibilidad de descargar iconos de con el mismo estilo y color, y ayuda así a proporcionar consistencia a la interfaz.

location icon flaticon

Los iconos deben promover la diversidad

Además de hacer que todos se sientan incluidos, la diversidad es sinónimo de usabilidad y experiencia de usuario positiva. Si no empleas iconos inclusivos, al final estarás excluyendo al resto de usuarios potenciales.

En los últimos años, se están derribando muchas de las ideas estereotipadas escondidas en el lenguaje y poco a poco se va avanzando hacia una forma de comunicación más inclusiva que llegue a todos. Y este intento de promover un lenguaje diverso también puede trasladarse a los iconos.

inclusive icons

Utiliza iconos que incluyan al mayor número posible de personas. De esta manera, no solo ayudarás a promover una comunicación más justa e inclusiva, sino que llegarás a mucha más gente que solo usando un icono que englobe a una parte pequeña de la población.

Conclusión

Los iconos son pequeños, pero juegan un papel importante en las páginas web. Tal es su relevancia, que determinan la usabilidad de una interfaz.

Al diseñar una página, e incluso al diseñar los iconos, los diseñadores deben tener en cuenta que los iconos son herramienta de comunicación visual de gran peso y ayudan a los usuarios a navegar en la web.

En apenas 40 años, los iconos han experimentado un crecimiento significativo y están en continua evolución. Está en nuestras manos asegurarnos de que los nuevos diseños se adapten a los tiempos modernos y sirvan para representar nuevas ideas y funcionalidades de manera efectiva.

Por Amelia Rubio

Compartir:

Comentarios

Reply to Jorge

Jorge
Jorge

hace 6 días

Excelentes consejos practicos! Muchas gracias, los tendré muy presentes en mis diseños