Diseño UX

Diseño de iconos para la usabilidad

Los iconos se han vuelto un factor fundamental en el último tiempo. El diseño responsivo y la adaptación a diferentes pantallas flexibles, nos permite generar una reestructuración de sus elementos, sin perder la capacidad de comunicar lo que se necesita.

Cuando una iconografía es bien desarrollada puede reemplazar etiquetas de texto y ahorrar espacio para la visualización móvil.

Sin embargo, otros iconos son utilizados con un sentido estético sin ser dirigidos a mejorar la usabilidad. De igual manera, es importante no fragmentar la consistencia del sitio generando distintas familias iconográficas.

Consideraciones preliminares

Antes de iniciar con el trabajo de diseño debemos considerar dos importantes aspectos:

La investigación como primera etapa

Para lograr un buen trabajo es importante investigar a la competencia y también, documentarnos sobre los iconos que se ocupan en distintas herramientas. En la primera etapa se debe considerar lo siguiente:

• Iconos usados por la competencia: Es un buen ejercicio observar a la competencia para identificar qué iconos utilizan. De esa forma, nos da una idea sobre las prácticas y estilos que ya se están utilizando.
• Iconos utilizados en módulos recurrentes: Independientemente de si se trata de la competencia o no, debemos documentar y analizar qué tipos de iconos se utilizan en módulos que vemos en distintas plataformas.

El proceso de diseño

Existe un proceso de diseño que debemos conocer perfectamente para avanzar y darle sentido al trabajo que vamos a entregar. Entre los puntos más relevantes a este tema encontramos:

• Esquemático y conceptual: La idea de un icono es que sea fácil de reconocer. Con unas pocas líneas o incluir más detalles, puede transformarlo en una masa confusa. Hay excepciones en las que en la ilustración de icono emplea mucho trabajo de luces, sombras y profundidad. En ese sentido, debemos identificar si el icono representa una gran cantidad de acciones y funcionalidades diferentes o si el icono representa solo una acción dentro de otras acciones igual de importantes.

• Sigue la regla de los 5 segundos: Nielsen Norman Group propone usar esta regla a la hora de diseñar iconos. La regla dice que si tardamos más de 5 segundos en pensar un icono apropiado para algo, este icono no puede por sí solo comunicar el significado.
• Generar una familia: Para un producto digital, la mejor idea es generar una familia iconográfica. Es allí donde podemos agregar otros iconos que pudieran ser útiles a futuro para el producto.
• Espacio de trabajo y grillas: Una familia iconográfica debería compartir el peso visual, estilo de línea, relleno, colores y proporción. Todos los íconos deberían compartir la misma grilla y diseñarse dentro de estos límites. Así obtendremos un pack homogéneo y a la medida.
• Testear iconos: En usabilidad y en la experiencia de usuario muchas etapas se tratan con solo testear. Esto no es algo diferente para los iconos, sobre todo cuando intentan representar conceptos o acciones complejas, o cuando por uso de espacio deben por si solos representar un significado.

En este sentido, proponemos hacer un simple test con los usuarios donde les preguntaremos qué esperan que signifique el icono. Esto, nos dará luces de si vamos bien encaminados en la propuesta y los ajustes que debemos hacerle.

Por esa razón, cuando un diseñador tiene en cuenta las consideraciones preliminares, se prepara para investigar y sigue el proceso de diseño, los resultados son gratificantes para el usuario final.