El viejo dicho "una imagen vale más que mil palabras" sigue siendo relevante para las experiencias de hoy. Las personas se sienten atraídas por las imágenes más rápido que el texto, y esta propiedad natural de las fotos e ilustraciones las hace muy útiles para el diseño visual.

En las interfaces de usuario modernas, tanto las fotos como las ilustraciones se convirtieron en elementos funcionales junto con texto y elementos interactivos. Las ilustraciones son una forma versátil de crear un diseño único. Desde ilustraciones de héroe dibujadas a mano hasta pequeños iconos, todo lo que se refiere a una imagen esbozada se siente como arte. En este artículo, me gustaría revisar algunas de las funciones de la ilustración desde la perspectiva del diseño moderno de la interfaz de usuario.

Cómo las ilustraciones ayudan a mejorar la experiencia del usuario

Al igual que otros elementos visuales, la ilustración puede ser una poderosa herramienta de comunicación. Ilustraciones bien hechas tienen los siguientes beneficios:

  • Puede atraer la atención del usuario y brindar la información más importante en un formato visual fácil de entender.
  • Puede agregar claridad a una idea compleja. No es necesario utilizar ninguna palabra si puede proporcionar esta información usando imágenes.
  • Puede involucrar a los usuarios. La hermosa ilustración no solo atrae la atención del usuario, sino que también hace que los usuarios se interesen en un producto en sí mismo.
  • Puede jugar con la imaginación de los usuarios. Es posible combinar la realidad y la imaginación mediante el uso de la ilustración.

6 formas de ilustración mejora UX

Hay muchos casos en que las ilustraciones pueden mejorar la experiencia del usuario de un producto. Aquí hay 6 de ellos:

1. Entregar el punto principal más rápido

Como se dijo antes, las ilustraciones tienen un excelente potencial de explicación y aclaración. En el contexto de sitios web y aplicaciones móviles, hay una docena de maneras de usar ilustraciones para mejorar la experiencia de usuario desde las primeras pantallas. Por ejemplo, es posible hacer que el proceso de incorporación sea más atractivo mediante el uso de ilustraciones en las pantallas de tutoriales. Este enfoque tiene el beneficio adicional para las aplicaciones móviles de ayudar a evitar demasiado texto en la pantalla.

imagen1

Créditos de la imagen: Divan Raj

Usando ilustraciones, es posible mostrar la diferencia entre los planes de productos.

imagen2

Las ilustraciones demuestran la diferencia entre los planes de servicio. Créditos de la imagen: Dribbble

Por último, pero no menos importante, cuando el usuario encuentra un problema, las ilustraciones se pueden utilizar para agregar un poco de sentido del humor para humanizar el problema.

imagen3

Página de error en Vuelos de Google. Créditos de la imagen: Dribbble

2. Crea una experiencia más memorable

Como usuarios, utilizamos muchos productos de forma regular, pero solo unos pocos crean una experiencia verdaderamente memorable.

Como diseñadores, si queremos crear una experiencia memorable, tenemos que aprender cómo funcionan los cerebros humanos. Barbara Fredrickson y Daniel Kahneman propusieron una heurística psicológica llamada regla de punta que dicta la forma en que nuestro cerebro trabaja con la información. La regla de punta estados que las personas juzguen una experiencia en gran parte basada en cómo se sintieron en su apogeo (es decir, su punto más intenso) y en su final, en lugar de basarse en la suma total o el promedio de cada momento de la experiencia. El efecto ocurre independientemente de si la experiencia es agradable o desagradable.

En otras palabras, cuando recordamos experiencias, tendemos a recordar no toda la experiencia, sino solo los eventos clave que sucedieron. Una ilustración agradable es una oportunidad para convertirse en un evento clave y aumentar la conciencia de marca.

Usar mascotas en una interfaz de usuario es una forma popular de aplicar técnicas de ilustración en el diseño para crear una experiencia más memorable. Los elementos de marca, como las mascotas, se convierten en elementos de identidad e interconector entre el usuario y el producto.

imagen4

Silverback , una aplicación para Mac que facilita las pruebas de usabilidad de Guerrilla, usa un gorila ilustrado como mascota.

3. Crea una ilusión de comunicación directa con el usuario

Cada interacción del usuario con un producto es un viaje. Detrás de cada viaje hay un objetivo que el usuario quiere lograr al usar el producto. Para algunas experiencias, es posible convertir un viaje en una historia en la que el usuario será un personaje, y el objetivo será un destino final. Las ilustraciones pueden actuar como un proxy entre el usuario y la aplicación al involucrar a los usuarios en la experiencia.

Un buen ejemplo es Omono . La aplicación utiliza un búho para guiar a los usuarios a través de la interfaz y refuerza la naturaleza fácil de usar de la aplicación.

omono

Las ilustraciones pueden hacer que el usuario se sienta seguro de sus tareas e inspirado para continuar el viaje.

4. Reforzar el concepto estilístico existente

Las ilustraciones se pueden aplicar en una interfaz de usuario para proporcionar soporte visual del concepto estilístico general de la aplicación o sitio web. Junto con otros elementos de marca, como logotipos, fuentes, esquemas de color, ilustraciones tienen un impacto significativo en el estilo del producto. Cuando la ilustración se crea de acuerdo con el estilo, proporciona una sensación más natural y armónica del producto (y de la marca en general). Pero para que eso suceda, las ilustraciones deben ser coherentes, como si provinieran de la misma fuente, incluso si fueron creadas por diferentes personas.

zurb

Créditos de la imagen: Fundación Zurb

5. Vivir el proceso de interacción

Cuando pensamos en nuestras aplicaciones y sitios web, rara vez pensamos en ellos como páginas estáticas vinculadas entre sí. El concepto de interacciones requiere que agreguemos efectos animados y transiciones para que la experiencia se vea y se sienta más natural. Al igual que cualquier otra parte de un diseño, la ilustración se puede enriquecer con animación. Las ilustraciones combinadas con animación pueden ofrecer no solo una experiencia verdaderamente memorable, sino que también pueden hacer que la experiencia sea más dinámica.

Por ejemplo, Readme.io , un servicio que proporciona una hermosa documentación al mundo, hace sonreír a los usuarios cada vez que ingresan la contraseña. A la gente le encantan estos pequeños detalles porque hacen que la experiencia sea más humana.

readme

6. Agregue elementos de Gamification en UX

La gamificación es una técnica popular utilizada por los diseñadores de productos para aumentar la participación del usuario. Un diseñador puede considerar usar la ilustración en la interfaz cuando el usuario debe ser recompensado por algún logro.

imagen8