Diseño UX

Diseño de iconos para la usabilidad

Diseño 3 min. de lectura

No nos equivocamos al decir que una buena construcción de iconos puede ayudar en la consolidación, consistencia y comunicación de significados para los usuarios. En IDA revisamos las bases para diseñar iconos que no entorpezcan la usabilidad y nos permitan tener un producto más amable.

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:

Iconos de reconocimiento universal:

Son iconos arraigados a la cultura general en el mundo digital que no deben ser rediseñados, salvo para hacer un ajuste de estilo (tipo de relleno y bordes, colores y grosor). Un rediseño podría afectar drásticamente la usabilidad del producto.

Los iconos necesitan etiqueta de texto:

Salvo los iconos de reconocimiento universal que mencionamos, cualquier otro tipo de icono que diseñemos debe estar acompañado por una etiqueta de texto. Para evitar confusiones, se debe acompañar cada icono con una etiqueta de texto que le de sentido. No podemos por ejemplo, usar sólo iconos para una barra de navegación, porque causaría frustración en los usuarios y los llevaría al error. La usabilidad siempre debería ir antes que la estética en un producto digital.

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.

Acerca del Autor

Diseñadora UX/UI

Creo en el diseño que empatiza y entiende la importancia de las personas. Trabajo para construir plataformas fáciles de usar que ofrezcan experiencias gratificantes. Apasionada por las tecnologías, la innovación, la investigación y el aprendizaje constante.

Agregar un comentario