Los iconos agregan forma y función a sus diseños de interfaz de usuario cuando se usan correctamente. Pueden acelerar las interacciones del usuario al ser inmediatamente reconocibles, y también pueden agregar estilo e interés visual a los diseños de su interfaz de usuario.

3. Dar significado a los iconos

Las imágenes utilizadas para los iconos deben tener un significado que se entienda fácilmente. El significado debe estar directamente relacionado con la función del icono, como el icono de una casa para la página de inicio. Si bien los usuarios a veces descifran fácilmente las metáforas, los íconos más literales generalmente son más rápidos de reconocer.

4. Asegúrate de que sean escalables

Los íconos a menudo se usan en tamaños pequeños, pero ocasionalmente puede encontrar casos de uso en los que desee usar versiones más grandes (o incluso más pequeñas). Por esa razón, asegúrese de que sus íconos se vean bien independientemente del tamaño en el que se muestren. Puede utilizar iconos progresivamente más complejos a medida que aumenta el tamaño, pero asegúrese de no dejar que se vuelvan demasiado complicados.

5. Hacer que los íconos sean accesibles

Si no utilizas etiquetas de texto para acompañar a tus iconos, asegúrate de implementar las etiquetas alt adecuadas para que su funcionalidad siga siendo accesible para las personas que utilizan lectores de pantalla.

En una línea similar, asegúrate de que tus íconos tengan suficiente contraste y sean del tamaño suficiente para ser accesibles. También debes asegurarte de que los objetivos táctiles alrededor de los íconos sean suficientes para que los usuarios que puedan tener problemas de control motor fino sigan tocando el área deseada.

6. Cuidado con el color

Como regla general, los íconos deben ser de un solo color. Además, no utilices colores diferentes para cada uno de sus iconos a menos que contribuya directamente a hacerlos más utilizables. En la mayoría de los casos, puedes utilizar un color diferente para indicar un icono activo, mientras que el resto son de otro color.

7. Utiliza siempre vectores

Al crear iconos personalizados, siempre debes crearlos en un formato de imagen vectorial. De esta manera, se pueden escalar fácilmente sin perder claridad o nitidez. Al guardarlos para usarlos en productos digitales, el tipo de archivo SVG es la mejor opción, ya que conserva la escalabilidad del icono y la transparencia.

La siguiente mejor alternativa a SVG es guardarlos como archivos PNG sin pérdida, ya que conservarán la transparencia y la calidad no se deteriorará.

8. Mantén los iconos uniformes

Tus iconos deben ser uniformes en estilo y tamaño. El uso de iconos que no tienen un estilo coherente confundirá a los usuarios y hará que su interfaz se vea desordenada. El uso de iconos que no sean del mismo tamaño tendrá un efecto similar.

Cuando se trata de tamaño, el peso visual es más importante que las dimensiones exactas en píxeles.

Sin embargo, cuando se trata de tamaño, el peso visual es más importante que las dimensiones exactas de los píxeles. Con ese fin, puede diseñar íconos que tengan un peso visual menor y un poco más grandes que los íconos más pesados.

Compare los íconos de estrella y cuadrados, por ejemplo. Si los hace exactamente con las mismas dimensiones de píxeles, el cuadrado parecerá ser más grande debido a su apariencia más sólida. Al extender los brazos de la estrella un poco más allá de las dimensiones del cuadrado, crea iconos que parecen tener el mismo tamaño. Solo asegúrese de colocarlos en contenedores que tengan las mismas dimensiones para que se mantengan la ubicación y el espacio adecuados.

9. Priorizar la claridad

Los usuarios no deben estar preguntándose qué es un icono, y mucho menos qué representa. Asegúrate de que las imágenes que usas sean inmediatamente discernibles para los usuarios y de que no estén tratando de averiguar cuáles se supone que son tus íconos.

También debes asegurarte de que las funciones que representan tus iconos estén claras. Siempre que uses algo que no sean iconos universales (llegaremos a ellos en un momento), considera el hecho de agregar etiquetas de texto para explicar lo que hace el ícono. Es increíblemente útil para los nuevos usuarios y garantiza que los usuarios no se confundan sobre lo que hacen los diferentes iconos.

10. Utiliza iconos universales

Cuando se trata de iconografía, no intentes reinventar la rueda. Claro, los íconos creativos únicos pueden agregar interés visual a su interfaz de usuario. Pero si los usuarios no los entienden o son difíciles de descifrar, estás perjudicando la experiencia general del usuario.

Para funciones comunes, limítate a los iconos que la gente reconoce. A continuación, te muestro algunos ejemplos de iconos reconocidos universalmente:

• Icono de casa para la página de inicio
• Tres líneas horizontales para indicar un menú de hamburguesas.
• Una lupa para buscar
• Un lápiz para editar o modificar contenido.
• Un pulgar hacia arriba o un corazón para que le guste algo
• Un corazón o una estrella para marcar algo como favorito
• Un marcador para guardar un marcador
• Una flecha que sale de la parte superior de un cuadrado para compartir algo.
• Una flecha que apunta hacia abajo en un cuadrado para descargar algo.
• Un engranaje o una rueda dentada para los ajustes.
• Un icono de candado para mostrar que algo es seguro

Hay otros que son específicos del contexto (como las formas para los controles del reproductor multimedia), pero este es un buen lugar para comenzar. Si está usando la funcionalidad mencionada en la lista, generalmente es mejor usar un ícono reconocido universalmente. Si se desvía de un icono universal, asegúrate de agregar una etiqueta de texto para ayudar a los usuarios.

No todos los diseños de IU deben incluir iconos, pero cuando se usan correctamente, pueden mejorar la experiencia del usuario al mismo tiempo que brindan un atractivo estético adicional para sus sitios web y otros productos digitales.