Diseño UX

Íconos sólidos y lineales: Cómo impactan en la UX

Los iconos son un factor importante a considerar al momento de diseñar sitios web. Estos elementos son signos que, a través de una relación de semejanza con el mundo real, refuerzan palabras o ideas dentro de los contenidos o, en algunos casos, sustituyen ideas completas.

Para escoger o diseñar una paleta iconográfica hay que tener claros dos aspectos: Por el lado de la interfaz, los íconos deben estar regidos por los lineamientos gráficos del sitio. De modo que estos no sean percibidos como ajenos por el usuario.

Por el lado de la usabilidad y la experiencia de usuario, los íconos se deben leer e interpretar con claridad, evitando que su significado sea ambiguo e induzca a error en los usuarios a la hora de tomar decisiones o interactuar con nuestra interfaz.

A continuación revisaremos cómo diseñar íconos que mejoren la usabilidad y la experiencia de nuestros usuarios:

Identifica rasgos característicos

Lo primero que debemos hacer al momento de elegir o diseñar íconos es distinguir cuál es el rasgo característico del signo. Es decir, qué parte lo vuelve  reconocible, para así no confundirlo con otra idea o concepto.

Por ejemplo: en el caso del signo de mensaje, la cola del globo de diálogo es el rasgo característico. Si no lo tuviera, el signo sería solamente un óvalo.

Otro ejemplo es el del candado, cuyo rasgo característico es el ojo de la cerradura. Sin él, el signo podría confundirse con una maleta o una bolsa, aludiendo a una idea de equipaje.

Luego de identificar cuál es la parte del objeto que lo hace reconocible, nos enfrentamos a la siguiente pregunta: ¿Usaremos imágenes sólidas o solo los contornos? Para poder decidir y tomar una elección correcta, debemos revisar la diferencia entre ambos  signos tanto en su usabilidad como en su facilidad para ser reconocidos. Esto es  más importante que su estética.

Íconos de contorno

Para que estos sean fácilmente reconocibles, su rasgo debe sobresalir de los bordes del signo. Por ejemplo, la misma burbuja de mensaje es más fácil de reconocer por su contorno, ya que su rasgo distintivo, la cola, se encuentra fuera del óvalo.

Otro ejemplo son los dientes de la llave, ya que estos se encuentran fuera del círculo.

También es importante destacar que para que un ícono de contorno pueda leerse bien y sea identificable, el espacio negativo (el espacio en blanco) debe ser amplio.

Íconos sólidos

Por defecto, los signos sólidos son más fáciles de reconocer que los de contorno, ya que constituyen una silueta sólida y fiel a su símil del mundo real. Los íconos de contorno no son representaciones reales de lo que se ve, ya que los objetos reales no están dibujados.

Estos funcionan bien cuando el signo es pequeño y el espacio en negativo no es muy generoso.

Por ejemplo, un ícono de tijera es más fácil de reconocer en sólido. Pues la cantidad de elementos para hacerlo reconocible en contorno son mayores, por lo tanto, se reduce el espacio en negativo.

En resumen, a la hora de tomar una decisión sobre la paleta iconográfica, hay que tener en cuenta estos factores:

• Los íconos deben poseer rasgos característicos que los distingan.
• Los sólidos son más rápidos de reconocer que los de contorno, a menos que sus rasgos distintivos sean sutiles y no se proyecten lo suficiente de los bordes.
• Aquellos de contorno son más reconocibles cuando su espacio negativo es amplio.
• Los íconos sólidos son más reconocibles cuando el espacio interno es estrecho.

Siguiendo estas recomendaciones, es fácil diseñar íconos útiles que contribuyan a crear una mejor experiencia para los usuarios de nuestra interfaz.