Existen una serie de elementos que forman parte de una interfaz web como texto, colores, fotografías, ilustraciones, etc. Uno de estos elementos son los iconos, que no solamente se emplean en el diseño flat como puede ser la suposición más lógica, sino que se utilizan en una gran variedad de sitios web con diversos estilos. En este artículo mencionamos algunos de los más comunes usos de los iconos en el diseño web para que tengas en cuenta la importancia que poseen estos elementos y en futuros proyectos puedas ubicarlos de forma más precisa.
Para la descripción de características o servicios
Hay un número elevado de empresas y startup que ofrecen un servicio o producto. Muchos de estos productos son digitales y usualmente se trata de una aplicación web o móvil que soluciona un problema específico de la audiencia. Es de esperarse que en la página oficial, entonces, se mencionen las características más notables de dicha aplicación.
Es inevitable que se utilicen palabras para explicar estos conceptos, pero deberá utilizarse un lenguaje sencillo y describir los beneficios o funciones de forma breve y precisa. Sin embargo, a pesar de utilizar estas técnicas para mejorar la comprensión de tus usuarios, estos podrían aburrirse al ver tanto texto. Por esta razón, es una estrategia común añadir iconos para describir estas funciones y características. No sólo añaden una mayor variedad a la sección de la página web, sino que sirven para reforzar el mensaje y explicar de forma visual algún concepto. De esta manera, es mucho más sencillo para el usuario relacionar el icono con el concepto y entender las características o funciones descritas.
También puede utilizarse para explicar y dividir los servicios que cierta empresa ofrece o para explicar las fases de algún proceso.
Para indicar los datos a ingresar en formularios web
En la gran mayoría de sitios web se coloca un formulario para envío de consultas o dudas. En otros sitios se emplea un formulario para inicio de sesión o creación de una cuenta nueva. En otros casos se puede colocar para la inscripción a algún boletín de noticias. Existe una gran cantidad de propósitos que puede tener un formulario web, pero en la mayoría de sitios se incluye al menos uno como medio de contacto entre la audiencia y la empresa.
Aunque es usual que se coloque una descripción textual del dato que se debe ingresar en cada campo, en ciertos formularios es posible encontrar iconos relacionados. Por ejemplo, si se requiere la dirección de correo electrónico se añadirá el símbolo arroba o sobre como icono. A menudo, el icono no basta y para evitar malentendidos los usuarios colocan el icono relacionado al dato en la parte derecha del campo, mientras que en el propio campo añaden el tipo de dato que se debe ingresar.
El objetivo principal de todo diseñador es que el formulario web se pueda rellenar de forma rápida y sencilla. Añadir tanto el tipo de dato como un icono relacionado mejora la rápida comprensión, así que puede ser una adición ideal para tus formularios web.
Para optimizar la navegación
En las aplicaciones móviles se suelen emplear iconos como parte del menú debido al espacio reducido de pantalla que poseen estos dispositivos. También es posible que se emplee texto para cada elemento del menú, pero usualmente este se encuentra “escondido” mediante el menú hamburguesa, un icono utilizado ampliamente en aplicaciones móviles.
Aunque es más común que se emplea texto en los elementos del menú de un sitio web, es posible utilizar iconos como menú. Aunque usualmente se utiliza tanto texto como iconos para evitar malentendidos, en ciertas páginas web que dividen su menú en pocas secciones puede ser ideal. También cuando se emplea un menú más o menos experimental y en vez de situarse en la parte superior de la página, se ubica de forma vertical en la parte izquierda de la pantalla.
Si se piensa de forma lógica, los iconos ayudan a explicar conceptos de forma visual, además se pueden utilizar como elementos distintivos, de tal forma que es más sencillo localizar cierta sección del menú mediante un icono. Es una estrategia que se suele emplear en paneles de control de aplicaciones web, por ejemplo.
Sin embargo, debes analizar si vale la pena correr ese riesgo pues los usuarios ya están acostumbrados a ciertos patrones de diseño, particularmente en lo que respecta a la navegación.
Para controlar sliders de imágenes
Los sliders de imágenes se emplean en una gran cantidad de sitios web pues ofrecen grandes beneficios y tienen diversos propósitos. Eso sí, debes seleccionar cuidadosamente las fotografías que colocarás en el slider para un mejor uso de este recurso.
En algunos sliders no se da la opción a los usuarios de regresar a una diapositiva anterior, sin embargo, es recomendable darle cierta libertad a los usuarios, particularmente si se utilizan imágenes de estilo publicitario que promocionan algún descuento o un nuevo producto. En estos casos se suelen colocar flechas en los lados derecho e izquierdo de las imágenes, aunque también estos iconos pueden estar ubicado en la parte inferior, bajo las fotografías.
No sólo se suelen colocar flechas para avanzar o regresar a una fotografía, sino que también se puede colocar el popular icono que indica “pausa”. De esta manera, el usuario puede ver cuidadosamente una fotografía particular sin necesidad de que se agote la cuenta regresiva propia que poseen los sliders.
En conclusión…
En mayor o menor medida, se utilizan iconos en la interfaz de tu sitio web. Probablemente los empleas sin darte cuenta pues son un elemento mínimo, usualmente pequeño, pero que tiene un gran poder dentro de una interfaz. Ya que cada elemento que coloques en tu interfaz puede afectar la experiencia de usuario, es recomendable conocer en qué tipo de situaciones los iconos son empleados de forma adecuada para evitar añadirlos en secciones del diseño donde no realmente no pueden ser aprovechados al máximo.