Los iconos se han transformado en un elemento común y constante de nuestra vida diaria. Podemos encontrarlos en diferentes ámbitos y pertenecientes a distintos tipos de empresas o sociedades. Estos pequeños elementos juegan un papel muy importante a la hora de hacer publicidad, ya que pueden suponer una impronta que permanezca en la persona durante largo tiempo.

Un icono puede convertirse en el símbolo de nuestra empresa, en nuestra seña de identidad. Puede transmitir, con sólo una imagen, aquello que queremos comunicar. Pero también suponen una herramienta que puede hacer más accesible conocer nuestros servicios o productos. Con esto nos referimos a los iconos en el diseño web. Unos iconos claros, visibles y adecuadamente colocados, harán que nuestra página sea más intuitiva y resulte más sencillo y agradable moverse en ella.

¿Cuál es el origen de los iconos?

Antiguamente, en el cristianismo oriental, la palabra “icono” hacía referencia a las representaciones religiosas. Estas podían ser esculturas, pinturas, etc…

Hace más de cuarenta años, aparecen los ordenadores y los iconos comienzan a utilizarse y a tomar las formas que hoy conocemos.

Xerox Star

Estos fueron los primeros que, en los años 70, hicieron uso de la interfaz gráfica de usuario (GUI). Ellos desarrollaron el primer ordenador con iconos gráficos, a principios de los años 80, que recibió ese nombre: Xerox Star.

Apple Lisa y Susan Kare

En el año 1983, aparecen los iconos de Susan Kare. Planos, en blanco y negro, accesibles y de aspecto desenfadado. Estos iconos, conocidos por todos, suponen un precedente en la historia de las interfaces gráficas. A día de hoy, aún se pueden encontrar algunos de ellos en los escritorios.

Evolución

A lo largo de los años 80 y 90, los iconos fueron experimentando gran cantidad de cambios. Se les añadía nuevos detalles, colores, dimensiones… y, ya en el año 2000, alcanzaron nuevos estilos mucho más innovadores y realistas. El cambio de siglo nos trajo una amplia gama de posibilidades para poder experimentar con ellos y conseguir nuevos efectos y texturas.

Actualidad

Como decíamos al comienzo de este post, los iconos se han convertido en parte de nuestro día a día. Los utilizamos para comunicarnos en todos nuestros ámbitos, ya sea en el ámbito privado, como las conversaciones de texto escrito, como en el ámbito público, como pueden ser los iconos para mostrarnos dónde se encuentra el baño en un local.

Los tenemos muy asumidos y nos suponen una forma rápida de comunicación. Pero, para conseguir que esta comunicación sea eficaz, hay que cuidar los detalles y estudiar bien cómo presentarlos y el lugar idóneo para hacerlo.

Importancia de los iconos en el diseño web

Los iconos pueden hacer más sencilla y navegable nuestra página, pero también pueden conseguir todo lo contrario. Si queremos que nuestra web sea un “hogar” agradable, en el que la persona que acceda se sienta cómoda y no se sienta agobiada o perdida dentro de ella (lo que conlleva una necesidad impetuosa de salir de ella), tenemos que cuidar de los iconos, su imagen y la comprensibilidad de los mismos.

Hay varios aspectos que deben cumplir los iconos. Te hablamos de algunos de ellos para que los tengas en cuenta a la hora de realizar tu diseño web.

Simplicidad

Con los iconos pretendemos transmitir información con una sola imagen. Para que esta información llegue de la forma más clara posible, es necesario que busquemos la simplicidad en ellos. Al igual que un texto largo y enrevesado puede confundirnos o no aclararnos del todo las ideas, unos iconos muy sobrecargados o complejos pueden generar más dudas de las que solventan.

Concisión

Antes de incluir un icono en nuestra página web, debemos plantearnos si este icono puede tener significados distintos o pueden ser interpretados de maneras diversas. Es fundamental que la transmisión del mensaje sea concisa y no dé lugar a dudas o a otras interpretaciones. También lo diseñaremos para que este sea lo más compacto posible, ya que el espacio es un elemento muy valioso y es fundamental que se encuentre bien organizado y ordenado.

Reconocibles

Cuando diseñemos nuestra página web e insertemos los iconos, es fundamental plantearnos si estos serán reconocibles para los usuarios. Para ello, debemos buscar que su concepto sea claro y que esté relacionado con la función o característica que está describiendo.

Cuando, por el contrario, hacemos uso de iconos que no son fácilmente interpretables en un primer momento, ya llevamos al usuario a tener que aprender qué significan y a recordarlo cada vez que entren en nuestra web. Esto conlleva, a no ser que haya mucho interés por su parte, el abandono de la página.

Favorecer la usabilidad

Es primordial que nos ayuden a conseguir que la experiencia del usuario sea positiva. Los tiempos de espera nos resultan cada día menos asumibles, se busca la rapidez y la instantaneidad. Si nuestros iconos no proporcionan eso al usuario, este, seguramente, pierda la paciencia y desista de continuar en nuestra web.

Para conseguir esto, estudiaremos detenidamente el significado de cada icono, dónde los situamos, si ayudan a realizar acciones, etc. Ya que, si no cuidamos de estos detalles, los iconos se pueden convertir en elementos molestos dentro de la página, en lugar de ser elementos de guía y ayuda.

Acompañarlos con etiquetas de texto

A veces, por tratarse de web más específicas o por otras razones, puede que no todos los usuarios entiendan los iconos. Para ello, es recomendable añadir una etiqueta de texto que sea breve.

Una opción pueden ser los coach marks o cuadros indicativos de texto. Estos aparecen cuando pasamos el cursor por encima de los iconos. El problema que plantean es que no pueden aplicarse a dispositivos que tengan pantalla táctil.

Otra opción a la que podemos recurrir, y que suele ser la más común, son las etiquetas de texto que señalan el significado del icono.

Colocarlos con coherencia

Hay determinados iconos que, en las páginas web, suelen ir colocados en el mismo lugar. Por lo tanto, los usuarios están habituados a buscarlos siempre en el mismo lugar. Esto lo tendremos en cuenta a la hora de diseñar nuestra web, evitando cambiar esos iconos habituales para no confundir al usuario y hacer la navegación tediosa o confusa. Un ejemplo de estos iconos sería el menú de la hamburguesa, que suele aparecer arriba a la izquierda.

Cuidar la estética de la web

Aunque la finalidad principal de los iconos es que resulten útiles y faciliten la navegación, también es fundamental cuidar la estética de la web. Para ello, los iconos deberán seguir y reforzar el estilo de la página. También, entre los iconos, debe existir un estilo similar.

: