+ # Iconografía  En una interfaz gráfica de ordenador, un icono es una imagen que representa una aplicación, una capacidad o algún otro concepto o entidad especifica con significado para el usuario. Un icono usualmente es seleccionable, pero también puede ser no seleccionable, como el logo de una compañia. En la práctica, los iconos son símbolos pequeñitos que dicen mucho. Están en todos lados y cumplen un rol importantísimo en el éxito de una interfaz de usuario. ## Cómo usar iconos ### Tipos de Iconos Encajar iconos en categorías te ayudarán a tomar decisiones más inteligentes cuando los uses en tu diseño de Interfaz de Usuario. Sin embargo, hay muchísimas variables diferentes y categorizaciones de íconos. Como en otras áreas de los sistemas de información, categorizar elementos con muchas variables tiene varias soluciones. El mayor problema con los iconos es que hay muchas variables que se superponen y no hay mucha especificidad. Una buena idea para simplificarnos el entendimiento es concentrarnos primeramente en la parte visual. :::info #### :warning: Tamaños de Iconos Los iconos pueden ser **grandes** (40 píxeles o más) o **pequeños** (40 píxeles o menos). Los iconos **grandes** se usan como logos de aplicación, para explicar un servicio o una funcionalidad, logos de empresas y de identidad de marca. Los iconos **pequeños** tienden a ser usados como elementos de control de interfaz, suelen ser decorativos y funcionales. Nos centraremos en los iconos pequeños, pero la siguiente clasificación sirve para ambas categorías. ::: ### Categorías de Iconos Una vez tienes iconos pequeños o grandes, podemos categorizarlos en los siguientes grupos:  ### 1) Iconos Sólidos *(Filled Icons/Glyphs)* Son iconos gráficos y usualmente son sólidos. La palabra glyph viene del griego y significa 'símbolo o jeroglífico'. Pueden escalarse y configurarse. como son sólidos suelen encajar en temaños pequeños pero no suelen ser muy interesantes visualmente en tamaños más grandes. Aunque no son los más lindos, tienden a ser muy **fáciles de leer**. :::warning **Consejo Profesional:** - Deben ser pixel perfect. Al tener un solo color hace que los defectos sean obvios y se noten más - Se ven mejores en tamaños pequeños que granes - Siempre considera usar una fuente prefabricada que hacer tus propios iconos ::: ### 2) Iconos de Línea *(Line Icons)* Se han vuelto más populares porque son limpios y contemporáneos. Aunque los Glyph se consideran más fáciles de usar, este no siempre es el caso. Por ejemplo, el icono de burbuja de diálogo funciona mejor como ícono de línea que como glyph.  :::warning **Consejo Profesional:** - Si vas a usar dos colores, usa dos que funcionen bien juntos y, sobre todo, no hagan '*clashing*' - Considera usar un sólo color para la forma principal y detalles en el otro color - Menos siempre es más - Aunque los iconos son pequeños, no pueden ser exageradamente pequeños si estás usando más de un color. Si tu icono tendrá menos de 22px, no uses dos colores ::: ### 3) Iconos Rellenos con Bordes *(Filled Outline Icons)* Son los iconos más alegres pero hay que tener cuidado con la cantidad de color que se utiliza y su tamaño.  :::warning **Consejo Profesional:** - No uses negro puro #000000, siempre utiliza un color oscuro - Limita tu paleta por icono y por set de iconos - Menos es más, no intentes resaltar mucho el detalle ::: ### 4) Iconos de Forma Coloreada *(Coloured Shaped Icons)* Las formas coloreadas sólo son grupos de formas geométricas y colores. Conseguir la combinación correcta de colores y detalles es complicado, porque no tienen silueta. Los famosos *'flat icons'* (iconos planos) entran en esta categoría. Son limpios, amigables y muy llamativos. Sin embargo, son muy difíciles de hacer y, algunas veces, de usar  :::warning **Consejo Profesional:** - La paleta de colores debe ser poco brillante. Usa colores suaves o pasteles - Hay una diferencia sutil entre cuándo agregar detalle y cuándo no - Intenta por lo menos que tengan 24 píxeles - Son buenos para utilizar como ilustraciones o inconografía grande para indicar servicios o funcionalidades ::: ### 5) Iconos Esqueumorficos *(Skeumorphic Icons)* A diferencia de las otras categorías, estos iconos ya poseen todos los ingredientes. Son en 3D y tienen sombras y degradados. Una de las teorías de este estilo de diseño es que haciendo que los iconos se vean tan similares como en la vida real, los usuarios se sienten más cómodos. Lazy designer notes: Consider adding a bottom shadow. Make your light sources come from the same direction. Most user interface design programs won’t have the functionality to achieve the kind of lighting you will need to make this style of icon. Consider using a 3D modelling program. Make sure your icons all face in the same direction.  :::warning **Consejo Profesional:** - Aunque nos enfocamos en iconos pequeños en esta clase, nunca utilices este tipo de iconos para elementos muy pequeños - Crearlos es muy dificil, necesitarás porbablemente un programa de modelado en 3D para conseguir la iluminación que necesitas - Si consigues una buena bandeja de estos iconos, úsalos para cosas muy puntuales - Evalúa si el producto que estás creando tiene la madurez suficiente para utilizar estos iconos :::   ### Etiquetando iconos :::success **Una historia de éxito** En el 2005, un joven llamado Jensen Harris trabajaba como Program Manager en Microsoft. Durante ese verano, aprendió una lección de UX sobre el uso de los iconos.  *Jensen Herris in a picture still working for Microsoft / Google Images* En un post titulado 'La importancia de las etiquetas', explicó un problema de usabilidad que habían observado en el equipo de Outlook 98 (recordáis esa herramienta de correo, ¿no?). Parte del esfuerzo del equipo en cuanto a experiencia de usuario era mejorar la estructura del menú y la barra de herramientas. Y uno de los problemas que encontraron una y otra vez entre usuarios no expertos era que la gente no utilizaba la barra de herramientas de iconos!!! A excepción del icono Delete (borrar), que ya les era familiar desde el sistema operativo Windows 95, los usuarios usaban el menú principal para contestar, reenviar y crear nuevos mensajes. El equipo realizó varios intentos para solventar el problema, incluyendo: - Introducir nuevos iconos - Reordenar la posición de los iconos - Posicionar los iconos bajo los menús de los cuales venían los comandos. Nada cambió. Así que Microsoft hizo un pequeño cambio: añadió etiquetas a los botones más importantes de la barra de herramientas. ¿El resultado? De acuerdo a Harris, se incrementó significativamente el uso de estas opciones en usuarios de todos los niveles. ::: :::info **Pregunta:** ¿Deberían tener los iconos etiquetas? - ¿Por qué sí o no? - ¿Afectará la usabilidad? ::: Cuando usas iconos familiares como "casa" y "carrito de la compra", probablemente sientas que son elementos muy conocidos y por intuición decidas no etiquetarlos. Pero muchos iconos no forman parte de los 'iconos universales' que todo el mundo reconoce. De la misma forma, los usuarios tienen capacidades diversas y no siempre pueden saber a lo que te refieres con un icono.  :::info Adivina qué significa este icono ::: Pruebas de usabilidad demuestran que los usuarios a veces se detienen y preguntan qué significa un icono que no tiene etiqueta o simplemente evitan la interacción con el icono. Los iconos son **ayudas visuales** para comprender una interfaz. Si no los etiquetas castigas: - a los nuevos usuarios - a los usuarios infrecuentes - a los usuarios con capacidades diferentes  :::info ¿Qué tal ahora? **Nada le gana a la claridad de poner etiquetas a los iconos!** - Una etiqueta de texto configura la expectativa del usuario y activa la habilidad predictiva. ::: :::warning :bulb: **Escritorio, presente y tooltips** Un tooltip es una etiqueta de texto que se hace visible al hacer *hover* por encima de un elemento. Cuando trabajamos con diseños de escritorio, como tenemos la interacción del hover disponible, podemos etiquetar iconos utilizando esta herramienta. Así queda un diseño más limpio y comprensible.  El icono y el tooltip o la etiqueta deben tener el mismo estilo (grosor, tamaño y color) - recuerda la gestalt. ::: ## Resumen - Siempre recuerda escoger qué tipo de iconos vas a utilizar, para mantener consistencia decántate por iconos de línea, rellenos o con dos colores, pero no por los tres - Los iconos son una de las grandes oportunidades para comunicar la personalidad de tu producto ## Additional Resources - Hack Design: [Using Icons in Interfaces](https://hackdesign.org/lessons/24?utm_source=email&utm_medium=lessonLink&utm_content=24&utm_campaign=weeklyLesson) - Artículos cortos con información interesante sobre iconografía y UI - :+1: Top Pick: [9 Guidelines for Clear and Intuitive Icons](http://uxmovement.com/buttons/9-guidelines-for-clear-and-intuitive-icons/) - [Entypo](http://www.entypo.com/) by Daniel Bruce - [IKONS](http://ikons.piotrkwiatkowski.co.uk/) by Piotr Adam Kwiatkowski - [Material Icons](https://material.io/icons/) by Google - [Noun Project](https://thenounproject.com/) - [Font Awesome](https://fontawesome.com/) - [Why icons are important](https://medium.com/@Claromentis/why-icons-are-important-29dd86ac45d0)