Uso y abuso de los iconos en la era moderna.

El número de iconos que vemos a diario es asombroso. Están en todas partes a nuestro alrededor, tanto en línea como fuera de línea. Nos encanta usarlos. Mejoran la estética de nuestros sitios y pueden proporcionar una mejor experiencia de usuario. A veces, sin embargo, olvidamos la razón detrás del uso de un ícono, y ahí es cuando los íconos pierden su efectividad..


Mecanismo de comunicación universal

El atributo principal para los iconos es ser un lenguaje visual común lo que efectivamente cierra las brechas del lenguaje. Son reconocibles instantáneamente y eliminan la interpretación abierta. Esto los hace perfectos para un contexto digital, ya que muchas personas y sus culturas correspondientes comparten Internet..

Captura de pantalla del proyecto Noun

Diseñar un ícono que sea universalmente legible sigue siendo un gran desafío. Todas nuestras culturas tienen convenciones gráficas que pueden llevar a confusión sobre el significado detrás de algunos iconos diseñados a medida..

Explorar una nueva interfaz que consta de muchos iconos puede ser desafiante a primera vista. Nos toma un tiempo darnos cuenta de dónde está todo y acostumbrarnos al significado de cada icono. Por este motivo, los iconos de etiquetado título atributo, o quizás información sobre herramientas personalizada) mejorará la efectividad para aprender una nueva interfaz y se considera una buena práctica. De hecho, es ampliamente aceptado que los iconos en combinación con las etiquetas son procesados ​​más rápidamente por los usuarios.


Crear interés visual

Uno de los errores más comunes que cometemos es que usamos demasiados Iconos en una configuración determinada. Los iconos son más efectivos cuando mejoran el interés visual y captan la atención del usuario. Ayudan a guiar a los usuarios mientras navegan por una página. Usa demasiados iconos y se convertirán en nada más que decoración. Su uso para la navegación en una página web a menudo puede causar dilución..

Facebook usa tantos iconos que ya no sirven para crear interés visual, sino que actúan más como decoración.. Ciertas interfaces de Windows usan iconos complicados, que no proporcionan una interfaz limpia y, por lo tanto, disminuyen la facilidad de uso.

Al limitar la cantidad de iconos que usas, atraerás la atención del usuario más rápido, lo que facilitará la navegación.

El pie de página de The Verge hace un uso inteligente de los iconos. Aquí, los iconos tienen un claro valor agregado y el diseño no se ve desordenado. En esta captura de pantalla de Behance, los iconos están cuidadosamente equilibrados para que la comprensión de la página sea más rápida. A pesar de que esta página de arte en Artsy contiene muchos íconos, debido a la marca simple del sitio web, los íconos funcionan perfectamente para ayudar al usuario a elegir opciones de navegación..

Los kits de íconos son geniales, pero a veces es mejor intentar diseñar sus propios íconos o editar íconos existentes (con permiso) para satisfacer sus necesidades. La apariencia de un sitio web debe reflejarse en los iconos que utiliza. Como puede ver en los ejemplos, esto no debería ser necesariamente una tarea muy difícil, y definitivamente es algo que puede tener en cuenta para mejorar la marca de su sitio web. Son los pequeños detalles los que hacen la diferencia entre un gran sitio web y un sitio web excepcional..

Por otro lado, crear un contraste a partir de la marca regular puede hacer que sea aún más fácil crear interés visual. Aquí hay un ejemplo de Twitter. Mira cómo destaca el botón para escribir un tweet.?

En términos visuales, los íconos de la interfaz deben ser lo suficientemente variados para ser distintivos, mientras que deben ser lo suficientemente consistentes para funcionar como un todo cohesivo..

El mayor escollo es usar iconos porque ofrecen una estética, no porque se comunican. Los grandes íconos son visualmente agradables y se comunican con los usuarios.


Proporcionar funcionalidad y comentarios

Sin los íconos, estaríamos obligados a usar texto para describir ciertas funciones a nuestros usuarios. Si bien esto hace que las interfaces sean accesibles, ¿te imaginas un reproductor de video que solo use texto que diga "reproducir", "pausar", "como", "pantalla completa"? Los iconos proporcionan metáforas familiares para comunicarse con rapidez.

El poder de los íconos se utiliza para comprender cómo funciona este reproductor de video de manera bastante rápida y eficiente. La combinación de color y un icono reconocible proporciona retroalimentación: algo está mal..

También es posible dar a los usuarios. realimentación A través de iconos, generalmente se realiza en combinación con el color. Por ejemplo, una marca de verificación verde muestra a los usuarios que hay un nombre de usuario disponible. Una cruz en un recuadro rojo le dice al usuario que no volvió a ingresar una nueva contraseña correctamente. Los iconos pueden agregar un soporte maravilloso, especialmente si se aplican en tiempo real. En el ejemplo anterior, me avisan si estoy ingresando algo que no es una URL tiempo real. El concepto detrás de esto tiene muchos propósitos potenciales, todos los cuales mejoran la experiencia del usuario..


Restricciones tecnicas

Ahora vivimos en una época con diferentes tamaños de pantalla, diseños fluidos y densidades de píxeles variables. Esto ha tenido una gran influencia en la forma en que manejamos las imágenes y, por lo tanto, solo tiene sentido que también influya en la forma en que manejamos los íconos..

Tenemos la costumbre cada vez mayor de optimizar imágenes para diferentes dispositivos, pero también podemos adaptar nuestros iconos para crear una experiencia perfecta. Un ícono en particular puede funcionar extremadamente bien a 200px, pero ¿su mensaje aún se transmite claramente a 12px, o su detalle se vuelve borroso? Recientemente, publicamos un artículo que trata sobre la iconografía sensible, explicando este concepto más a fondo..


Haciendo caso omiso de las convenciones

Los iconos son abusados ​​al ignorar las prácticas comunes. Cuando los usuarios se acostumbran a reconocer que un icono significa algo, cambiar la acción detrás de ese icono es extremadamente confuso.

Por esta razón, continuamente se proponen estándares y se refina la iconografía existente. Eche un vistazo a lo que Andy Clarke tiene que decir sobre un ícono estándar para una navegación receptiva. .

Sin embargo, la regla más importante sigue siendo: no se aleje de los patrones de usuario existentes. Aunque un nuevo y elegante icono de menú suena como una excelente manera de desafiar sus habilidades de diseño y crear un diseño único, al mismo tiempo podría ser un desastre para la usabilidad..

Discutiendo iconos huecos

Más recientemente, una publicación de blog publicada en Medium criticó el uso de iconos huecos, después de la versión reciente de iOS 7. Afirmó que el uso de iconos huecos requiere más "trabajo" de los usuarios. Esta publicación de blog ha sido ampliamente discutida en la comunidad de diseño web. Hay puntos de vista diferentes e interesantes. Sin embargo, todos estamos de acuerdo en el hecho de que la iconografía debe tener sentido para el usuario. Lo que, por supuesto, tiene que ver con las convenciones..


El GIF animado de Aubrey Johnson, que demuestra el trabajo que realizan nuestros cerebros en el procesamiento de íconos.

Conclusión

Tenía un objetivo en mente al escribir este artículo: recordarnos que nos preguntemos por qué Estamos usando iconos en los sitios web que creamos. Para muchos de nosotros, se ha convertido en una automatización incluirlos en nuestros proyectos como una cuestión de rutina. La próxima vez, pregúntese cuál es el valor agregado de ese ícono adicional y cómo se compara con los otros íconos del sitio web..


Recursos utiles

  • El manual de iconos
  • Todo sobre iconografía responsiva
  • Hackdesign en Iconografía
  • Interesante extensión de Photoshop / Ilustración
  • Iconmonstr
  • El Proyecto Noun
  • Cómo usar íconos para admitir contenido en diseño web (Smashing Magazine, '09)