¿Qué son?
Un icono es un signo gráfico que representa un objeto o un concepto. En entorno digital, el término icono hace referencia específicamente a un elemento gráfico simple que representa contenidos o acciones.
Semiótica de los iconos
La semiótica es la disciplina que analiza cómo utilizamos los signos para comunicar significados. En semiótica, se distinguen tres tipos de elementos –iconos, índices y símbolos–, que corresponden a los que en diseño conocemos bajo el nombre único de icono. Por tanto, en una interfaz interactiva es posible encontrar iconos, índices y símbolos, aunque a todos ellos les llamemos iconos.
Icono
En semiótica, el icono propiamente dicho es un elemento gráfico altamente estilizado que representa un objeto basándose en similitudes formales.
Por ejemplo, la acción de «Insertar imagen» suele representarse en aplicaciones interactivas mediante un icono que remite directamente a la idea formal de una imagen:
Opción de «Insertar imagen» de Google Docs.
Índice
El índice corresponde a un elemento gráfico que tiene una relación directa con su referente sin mantener una similitud formal con este; por ejemplo, el humo es índice de fuego.
En aplicaciones interactivas, encontramos numerosos casos de utilización de índices para representar acciones o conceptos abstractos. Por ejemplo, la opción de «Imprimir» suele representarse mediante un icono de impresora, relacionando el significado con la forma del dispositivo que ejecuta la acción:
Opción de «Imprimir» de Google Docs.
La lupa que suele asociarse a la opción de búsqueda es otro ejemplo de utilización de índices en interfaces gráficas:
Opción de «Buscar» de Google Docs.
Símbolo
El símbolo corresponde a un elemento gráfico que se asocia a su referente estrictamente por convención. Suele utilizarse para representar los conceptos más abstractos: los símbolos matemáticos o musicales son ejemplos de esta categoría de iconos.
En aplicaciones interactivas suelen utilizarse símbolos para representar conceptos sobre los que existe una fuerte convención cultural en el mundo físico y, por lo tanto, son fácilmente reconocibles. Un ejemplo es el símbolo «+» usado para añadir elementos a un conjunto:
Opción de «Crear nuevo documento» de Google Drive. La utilización del símbolo «+» remite a la idea de añadir un nuevo documento a los que el usuario tenga ya creados.
También suelen utilizarse símbolos en casos en que la convención cultural se ciñe al ámbito digital pero está fuertemente arraigada y, por tanto, es fácilmente reconocible para el usuario.
Opciones de «Deshacer/Rehacer» en Google Docs.
Relación entre icono y referente
La relación entre el icono (a partir de ahora entendemos «icono» en su concepto amplio, incluyendo iconos, índices y símbolos) y su referente se establece principalmente a través de tres figuras retóricas: metáfora, metonimia y sinécdoque.
Metáfora
La metáfora consiste en la traslación del significado de un concepto a otro, estableciendo entre ellos una relación de analogía.
Se trata de la figura retórica más utilizada en el diseño de iconos en interfaces gráficas, de la que encontramos numerosos ejemplos en los elementos que forman parte del escritorio del ordenador –de hecho, la idea de «escritorio del ordenador» es en sí misma una metáfora. El icono de papelera es una de las metáforas más conocidas, basada en una analogía entre el objeto físico y la acción de eliminar archivos del ordenador.
El icono de la papelera constituye, en entorno digital, una metáfora claramente reconocible para indicar la opción de eliminar archivos. Los archivos que se arrastran hasta el icono permanecen provisionalmente en la papelera hasta que el usuario decide «vaciarla», momento en que se procede a su eliminación definitiva. La secuencia de acciones en entorno digital es análoga a la que se lleva a cabo en el mundo físico para eliminar objetos reales.
Fuente: https://pixabay.com/vectors/trash-icon-waste-junk-clean-2935441/.
A lo largo de la historia de las interfaces gráficas, la utilización de metáforas ha resultado muy útil para introducir al usuario en un entorno al que no está habituado. En los primeros años de la difusión de ordenadores personales entre el gran público (últimas dos décadas del siglo XX), el uso de metáforas en interfaces era muy frecuente, ya que permitían a los usuarios establecer paralelismos entre el mundo físico en el que habitaban y el mundo digital que estaban descubriendo.
Actualmente, las interfaces gráficas están repletas de metáforas que pasan desapercibidas; en algunos casos, el usuario se ha habituado a ellas hasta tal punto que pueden llegar a perder el vínculo con los referentes originales. Este es el caso del icono que generalmente se utiliza para representar la opción que permite guardar un archivo:
Para representar la opción de almacenar o guardar un archivo, numerosas aplicaciones utilizan el icono del disquete. Este elemento se utilizaba a finales del siglo XX para almacenar archivos, y a inicios del siglo XXI fue sustituido progresivamente por otros dispositivos. Actualmente, hace ya años que los disquetes no se utilizan, y de hecho los usuarios más jóvenes no los han utilizado jamás. Sin embargo, el icono del disquete continúa siendo una referencia habitual y reconocida en las interfaces gráficas: se trata de un icono que ha adquirido autonomía respecto a su referente original.
Fuente: https://commons.wikimedia.org/wiki/file:Save_font_awesome.svg.
Metonimia
La metonimia es un tipo de metáfora en la que una cosa o idea se representa mediante otra con la que mantiene alguna relación semántica.
La utilización en algunas interfaces de un reloj de arena para indicar el acceso a las funciones de un reloj normal constituye una metonimia.
Fuente: https://commons.wikimedia.org/wiki/file:Font_Awesome_5_regular_hourglass.svg.
Sinécdoque
La sinécdoque consiste en representar un objeto mediante una de sus partes o en representar una parte del objeto mediante el todo.
En MacOS Mojave, el icono de altavoz se utiliza para representar el acceso a todas las funciones de audio del sistema, tanto las de salida (altavoces, auriculares y otros dispositivos) como las de entrada (micrófono y otros dispositivos).
Fuente: captura de pantalla de MacOS.
Iconos e interacción
Los iconos son frecuentemente utilizados en interfaces interactivas, ya que presentan diversas ventajas:
- Ahorran espacio: generalmente un icono es más compacto que el texto necesario para mostrar la información equivalente. Además, pueden utilizarse recursos de interacción para reunir varios iconos en un espacio pequeño (por ejemplo, una paleta desplegable de iconos).
- Pueden identificarse rápidamente: un icono bien diseñado o estándar es reconocible con solo un vistazo.
- Son válidos para múltiples idiomas: un icono no necesita traducción (siempre y cuando se diseñe teniendo en cuenta las diferencias culturales que puedan existir entre los usuarios a los que va destinado).
- Enriquecen el aspecto visual de una interfaz.
- Permiten proporcionar continuidad visual a una interfaz, si existe una coherencia de estilo entre los diferentes iconos utilizados en una aplicación. En el caso de familias de productos interactivos, un buen sistema de iconos proporciona cohesión al conjunto.
A pesar de todas las ventajas implícitas, es importante tener en cuenta que existen iconos que, al haberse convertido en estándares, son fácilmente reconocibles para todos los usuarios (por ejemplo, la impresora para imprimir); sin embargo, cuando se diseña un nuevo icono no existe garantía de que pueda ser comprendido por parte de todos los usuarios, a no ser que se realicen comprobaciones exhaustivas.
El icono de hamburguesa que se utiliza para menús desplegables en interfaces móviles no es fácilmente reconocible para todo el mundo. En pruebas de usabilidad, se ha comprobado que existen usuarios que no identifican que pueden visualizar el menú pulsando sobre este icono, de manera que algunos diseñadores recomiendan complementarlo con el texto «MENÚ» para fijar su significado.
Pautas para diseñar iconos
Al diseñar iconos para una aplicación interactiva, es importante tener presente el impacto que estos representan en el desarrollo de la interacción, ya que un diseño deficiente puede impedir al usuario entender cómo funciona la interfaz.
Para garantizar un óptimo diseño de iconos en un entorno interactivo, pueden seguirse las siguientes pautas:
- El diseño de un icono debe mantenerse simple y esquemático. Hay que evitar detalles innecesarios y centrarse en los elementos que caracterizan al objeto. El objetivo no es realizar una representación que sea realista, sino priorizar que sea rápidamente reconocible.
- Siempre que sea posible, hay que recurrir a iconos que resulten familiares a los usuarios. Por ejemplo, para representar la opción de búsqueda, la lupa es fácilmente reconocible, mientras que un monóculo no lo es.
- Los iconos no tienen como objetivo decorar la interfaz: si no comunican un contenido, no es necesario incluirlos.
- Cuando se genera un nuevo icono que no corresponde a ningún estándar existente, es muy recomendable comprobar si los usuarios lo entenderán correctamente. La evaluación puede ser muy sencilla: basta con preguntar a varios usuarios qué creen que significa el icono en cuestión.
- A nivel de evaluación, resulta muy útil tener en cuenta la regla de los cinco segundos: si el usuario tarda más de cinco segundos en reconocer el significado de un icono, es que no es adecuado.
- Hay que evitar utilizar iconos similares para funciones diferentes o diferentes iconos para una misma función.
- Para ayudar a los usuarios a entender su sentido, hay que complementar con una etiqueta textual breve y clara aquellos iconos que se refieren a conceptos muy abstractos o que no están estandarizados.
En el caso del icono de hamburguesa para menús desplegables en móviles, que como hemos visto anteriormente puede resultar problemático, una etiqueta textual ayuda a fijar su significado.
Fuente: https://uxplanet.org/perfect-menu-for-mobile-apps-39b2cb5b7377.
Apariencia visual de los iconos
Además de las cuestiones directamente relacionadas con la interacción, existen también pautas que se deben tener presentes a nivel gráfico:
- En consonancia con la necesidad de mantener el icono simple y esquemático, se recomienda no utilizar más de tres colores para su diseño. Además, hay que evitar cualquier elemento gráfico innecesario o puramente decorativo.
- Dentro de una aplicación, los iconos deben ser entendidos como un sistema: hay que aplicar unos criterios gráficos coherentes que doten de continuidad al conjunto y lo hagan identificable. Este sistema ha de preservar la coherencia, en todos los iconos, de las características básicas referentes al grosor de las líneas, radio de los vértices, estilo volumétrico (plano, 3D, con sombra, etc.) y paleta de colores.
- El tamaño de un icono no es el mismo en una interfaz para escritorio que en una para pantalla táctil. En el escritorio es suficiente con colocar el cursor encima del icono para activarlo, de manera que el clic sobre él puede realizarse con mucha precisión. En la pantalla táctil el elemento activador es el dedo, que tiene una superficie mucho más amplia que el cursor y es, por tanto, menos preciso. Aunque en el escritorio el tamaño de un icono se elige sobre todo teniendo en cuenta el contexto gráfico en el que se incluye, en pantalla táctil hay que tener en cuenta el factor de poca precisión de la activación. Por ello, el área de activación debería ser de 45-50 dp (density-independent pixel) aproximadamente: no es necesario que el icono llene todo este espacio, sino que el área que ocupa (y que puede incluir márgenes alrededor) sea de estas dimensiones.
La guía de estilo de Material Design (Android), por ejemplo, indica que en este entorno un icono debe ocupar un área de activación de 48 dp, aunque el gráfico como tal se reduce a una área de 24 dp.
Fuente: https://material.io/design/iconography/system-icons.html#system-icon-metrics.
- Comprobar la escalabilidad del diseño: ¿se ve bien el icono en cualquiera de los tamaños en los que aparece, teniendo en cuenta la diversidad de dispositivos?
Referencias
Babich, N. (2018). Checklist for Using Icons In UI [artículo en línea]. UX Planet. [Fecha de consulta: 17 de octubre de 2019]. <https://uxplanet.org/checklist-for-using-icons-in-ui-acb6dee36e8a>
Golde, A. (2018). How to Design an Icon Set: Simple Checklist for Graphic Designers [artículo en línea]. Icons8. [Fecha de consulta: 17 de octubre de 2019]. <https://icons8.com/articles/design-icon-set-simple-checklist-graphic-designers/>
Google (2019). Icons [artículo en línea]. Material Design. [Fecha de consulta: 17 de octubre de 2019]. <https://material.io/design/iconography/#design-principles>
Harlwy, A. (2014). Icon Usability [artículo en línea]. Nielsen Norman Group. [Fecha de consulta: 17 de octubre de 2019]. <https://www.nngroup.com/articles/icon-usability/>
Lewis, S. (2016). 6 Easy Steps To Better Icon Design [artículo en línea]. Smashing Magazine. [Fecha de consulta: 17 de octubre de 2019]. <https://www.smashingmagazine.com/2016/05/easy-steps-to-better-logo-design/>