Diseño de iconos
Cada día vemos cientos de iconos. Están por todas partes, tanto online como offline. Los utilizamos para comunicarnos, para transmitir conceptos básicos y para universalizar el diseño.
Algunas veces, sin embargo, olvidamos las razones que trascienden a su uso y lo que pueden significar en un diseño complejo.
En la entrada de hoy queremos hacer un breve recorrido por sus usos y las características básicas para evitar que pierdan su eficacia.
Los iconos, mecanismos de comunicación universal
Lo primero que llama la atención cuando hablamos de iconos es su capacidad para trascender lenguas y culturas. Son rápidamente reconocibles y evitan interpretaciones erróneas que puedan generar confusiones.
Precisamente esta característica los hace ideales para el entorno digital, donde un mismo diseño debe servir para distintas lenguas y culturas.
Sin embargo, por muy elementales que sean los iconos creados, no es una disciplina exenta de complicación. Cada cultura, como cada persona, tiene sus propias convenciones gráficas y esto puede llegar a causar dudas sobre el significado de un mismo icono.
Por ejemplo, si te das un paseo por los principales portales japoneses (Goo, Rakuten o Yomiuri) descubrirás un diseño muy alejado del estándar europeo o americano, con colores chillones banners y espacios caóticos, más propios de los años 90 que de los tópicos de paz y armonía que se suponen en la cultura nipona.
¿A qué es debido? Las diferencias culturales afectan a los estándares gráficos igual que afectan a otras disciplinas visuales, como la moda o el arte.
Para los japoneses, acostumbrados a un paisaje urbano abarrotado y un estilo de interpretación exagerado, una web como la que puedes ver debajo de estas líneas, es el colmo de la elegancia y la simplicidad.
Las convenciones gráficas de esta cultura afectan a cómo perciben los iconos, que a pesar de servir para comunicarnos universalmente, tienen sus matices de unos países a otros.
Crear interés visual a través de los iconos
La principal misión de los iconos es servir de vehículo de comunicación. O lo que es lo mismo, sustituir la descripción de un objeto, una acción, una idea o un concepto.
Esta misión se puede ver gravemente comprometida cuando abusamos de su uso. Como vehículo de comunicación que son, deben guiar al usuario de un lugar a otro, servir de puente entre dos destinos u ofrecer el conocimiento necesario para que el usuario obtenga aquello que desea.
Limitando su uso creamos la primera y más importante regla que veremos en esta entrada: crear interés visual en el usuario, mejorando su experiencia.
Iconos y usabilidad digital
Si recuerdas las primeras webs, todas las funciones estaban basadas en texto. La velocidad de la red era lenta (¿quién no recuerda los 8 kbps?) y lo único mejor que una imagen de bajo peso era el texto.
Cuando la velocidad comenzó a mejorar y se hizo evidente que las webs necesitan algo de “estilo”, los diseñadores tomaron por asalto internet creando una suerte de señalética que llamaron iconografía web.
Desde entonces hemos visto muchos estilos de iconos, algunos tan universales como el de la geolocalización o el de la señal wifi, que a día de hoy son un estándar universal.
Si durante los primeros años de este siglo los iconos fueron complejos y en tres dimensiones, desde 2010 hemos asistido a una corriente simplificadora.
Dicha corriente ha permitido eliminar aspectos superfluos de los iconos, como las sombras o los degradados, dando lugar a toda una corriente, el conocido como “flat design”.
Flat Design e iconografía, simplicidad al poder
Si no has oído hablar de este término, definimos Diseño Plano o Flat Design como un estilo de diseño que elimina cualquier aspecto superfluo, dando la sensación de estar pegado a la página, sin ningún efecto tridimensional.
Se eliminan por tanto sombras, degradados, texturas, relieves o cualquier otro adorno que distraiga del significado del icono.
Es tan popular porque responde al aspecto moderno, futurista y sencillo que las marcas tecnológicas más importantes del mundo pretenden proyectar en sus productos.
¿Por qué es tan popular entre estas empresas? Además de dotar a dispositivos como smartphones o tablets de un nada despreciable aspecto futurista, permite al usuario centrarse en la funcionalidad, sin dejar espacio para la interpretación.
Así, un icono de encendido se convierte en algo fácil de reconocer, donde no hay que pensar ni investigar cuál será el icono que permita acceder a esta funcionalidad.
Además, habrás notado que desde hace una década, muchos dispositivos electrónicos (especialmente los de las empresas tecnológicas más punteras) no van acompañados por manuales de instrucciones.
No responde a la necesidad de ahorrar papel, no. Responde a una concepción más profunda en la que tiene mucho que ver la iconografía.
La idea es que estos dispositivos sean tan sencillos de utilizar que no sean necesarios más que un par de toques para poder ponerlos en funcionamiento.
Para lograr que esta experiencia de usuario (user experience en inglés) sea completamente satisfactoria, el usuario no puede perder tiempo averiguando qué significa cada uno de los iconos que ve en la pantalla.
Aquí es donde el diseño plano se vuelve imprescindible. Sencillo, fácil y limpio, sin posibilidad de confusiones.
Factores que influyen en la funcionalidad de los iconos
Está claro que los iconos son un lenguaje universal, que tiende puentes visuales entre culturas y usuarios, donde la simplicidad es un valor fundamental.
Pero ¿qué factores debemos tener en cuenta para evitar alterar su funcionalidad o significado?
1/ Evitar confundir al usuario
Aunque te parezca increíble, hay un extenso catálogo de iconografía confusa, en la que el sentido de la imagen pasa totalmente desapercibida.
En la imagen que hemos seleccionado de este recopilatorio de iconos confusos puedes ver claramente de lo que hablamos. ¿Se recomienda bajar las escaleras? ¿Se llama la atención de los que quieren dar la vuelta en plena subida? No queda claro, de forma que el icono pierde su eficacia.
Por eso el primer requisito para asegurar la eficacia de un icono es que no confunda al usuario. Y no solo es cuestión de mantener un aspecto gráfico sencillo.
El truco está en utilizar estándares universales que reducen las probabilidades de que pueda darse más de una interpretación a un mismo icono.
2/ Huir de la multifunción
¿Qué significa el icono +? Dependiendo del contexto puede significar multitud de cosas, desde añadir un producto al carrito a incorporar una nueva función o recibir más información.
Todas estas circunstancias son interpretables con el icono mencionado, pero si las utilizamos en distintos lugares al mismo tiempo pueden provocar que el usuario se pierda.
Un problema que sin duda quedaría resuelto si se estableciera un estándar de navegación web o de iconografía funcional.
3/ Evita hacer trabajar al cerebro
Hace escasas semanas asistimos al rediseño de Twitter, con un aspecto renovado de sus iconos, criticado en muchos medios por su falta de nitidez.
El problema principal está en que según algunos expertos, los iconos huecos (o al menos los que no tienen un trazo grueso) son más difíciles de procesar para el cerebro y por tanto, afectan directamente a la legibilidad de los mismos.
Aunque el debate viene de lejos, pues ya en 2013 la prestigiosa revista Medium los atacaba con virulencia, la realidad es que su aspecto limpio los ha impuesto en muchas webs e interfaces, incluida la odiada actualización de iOS 7.
¿Nuestra opinión como profesionales de la comunicación visual?
En The Corporate Agency respetamos la aspiración de los diseñadores que buscan la pulcritud gráfica, pero creemos que la experiencia de usuario debería mandar por encima de cualquier otra consideración, facilitando la lectura y evitando la fatiga visual.
Así, creemos que aunque los iconos huecos puedan parecer más sofisticados, los sólidos son procesados con mayor rapidez, como puedes comprobar en la imagen que está sobre estas líneas.
Haz la prueba y aléjate un poco de la pantalla. ¿Qué iconos puedes ver mejor? Sin duda los sólidos, porque destacan sobre el fondo, especialmente cuando el tamaño disminuye.
4/ Respetar el imaginario colectivo
¿Has probado alguna vez a buscar un icono que represente una acción? Si no lo has hecho nunca, es un buen ejercicio para entender cómo es posible que “play” se pueda representar de tantas formas posibles.
Una forma segura de evitar elegir el icono equivocado es investigar cuál es el imaginario colectivo que corresponde a la idea que queremos representar.
Así descubriremos si el icono que hemos elegido realmente representa el mensaje deseado o no.
5/ Evitar iconos que representan acciones abstractas
Cuando buscamos un icono que represente una acción como “avanzar” debemos encontrar un objeto que sirva para reflejar esa acción.
Si, por ejemplo, elegimos una flecha que indique la dirección de izquierda a derecha, lo más probable es que el icono no se entienda en países con otros abecedarios distintos del latino, pues existen multitud de alfabetos que utilizan un sistema de escritura de derecha a izquierda, lo que hará que el icono elegido signifique “retroceder”.
Lo mismo sucede con acciones complejas como “deshacer o rehacer”, tan utilizados en las interfaces de software.
Un estudio revela que la mayoría de los usuarios tiene problemas para distinguir estas dos acciones, especialmente cuando se escogen iconos a los que no acompaña texto.
Cómo utilizar los iconos en diseño de presentaciones
Para terminar, nos gustaría mostrarte algunas aplicaciones de estas lecciones en diseño de presentaciones.
Además de mantener los principios que te hemos comentado, aplica los siguientes consejos:
- Busca familias de iconos para dar al diseño coherencia y evitar confusión.
- Utiliza la misma paleta de colores que en textos y fondos.
- Busca un estilo acorde con la temática de la presentación.
- No incluyas demasiados iconos en una sola diapositiva para evitar saturar al lector.
- Busca iconos que representen objetos cotidianos, fácilmente reconocibles.
Para ilustrar estos principios, hemos seleccionado dos presentaciones de nuestra agencia.
La primera, perteneciente a un trabajo realizado para Disney Channel sobre la campaña de marketing de la película infantil “Los Descendientes”, utiliza iconos sencillos, universales, fácilmente reconocibles a primera vista.
Para mantener el aspecto gráfico de toda la presentación, optamos por rodearlos de un círculo con los colores identificativos de la campaña.
El segundo, realizado para Schweppes, contiene iconos que representan distintos tipos de consumidores. Elegimos iconos en la línea moderna y minimalista que definimos para toda la presentación, la ponencia “Mixology Fair” a cargo de Sergio Padilla y Gastón Martínez.
¿Nos cuentas cómo utilizas los iconos en tus presentaciones? ¿Tienes en cuenta todos estos parámetros? Te esperamos en los comentarios.
