Volver a freebies

C贸mo ampliar la interfaz de usuario con ilustraciones

UX UIPor Lisandro Pati帽o

Dise帽amos para humanos, por ende, debemos tener encuenta las emociones que despertamos con nuestras interfaces para dirigir la toma de decisiones 馃か. Las ilustraciones son un buen soporte para mejorar el dise帽o de la interfaz de usuario en este aspecto.

Beneficios de usar ilustraciones

El papel de los elementos visuales cada vez tiene m谩s protagonismo en esta era de consumo de informaci贸n r谩pido y masivo. Seg煤n estudios sobre la velocidad de procesamiento del sistema visual humano, las personas tardan en promedio 150 milisegundos en procesar una imagen y 100 milisegundos m谩s en comprender su significado. Las im谩genes son m谩s f谩ciles de recordar, y su mensaje es claro para personas independientemente de su idioma, hasta incluso es m谩s accesible para personas con distintas capacidades de lectura. Por eso en las infograf铆as, 铆conos, ilustraciones y recursos gr谩ficos se utilizan tan ampliamente.

A grandes rasgos, podemos distinguir cinco grandes beneficios de usar ilustraciones en nuestras interfaces:

  • Se perciben mucho m谩s r谩pido que un texto, por lo que los usuarios pueden captar el mensaje clave r谩pidamente.
  • Se establece una jerarqu铆a visual.
  • Mayor atractivo est茅tico y emocional de la interfaz.
  • Activan la psicolog铆a del color, las formas y las met谩foras visuales.
  • Son llamativas y llaman la atenci贸n de los usuarios sobre los detalles necesarios.

Aplicado a webs y apps m贸viles, en primer lugar, las ilustraciones son otro elemento funcional, siendo decorativas en un segundo an谩lisis. Como siempre, en el an谩lisis del p煤blico objetivo encontraremos todos estos beneficios y sabremos aplicarlos correctamente, reconociendo cu谩les son las met谩foras que ayudar谩n a nuestros usuarios en el recorrido hasta su objetivo.

Es necesario que las ilustraciones sean concisas, y deben usarse con moderaci贸n: la intensidad gr谩fica puede aumentar el riesgo de sobrecargar una interfaz.

Ilustracion en Moviles

Tipos de ilustraciones

En las interfaces modernas, podemos encontrar toda la variedad de estilos y opciones expresadas en ilustraciones, desde im谩genes vectoriales e 铆conos hasta obras de arte elaboradas digitalmente. Al ser un elemento de dise帽o funcional, pueden despertar emociones y satisfacer diversas necesidades y funciones.

Onboarding

Onboarding es un concepto que lleg贸 al UX desde el 谩mbito laboral y RRHH. Ayuda a los reci茅n llegados a comprender c贸mo funciona una interfaz. Se usa cuando se introducen nuevas funciones y actualizaciones o los usuarios interact煤an con una funcionalidad que no exist铆a previamente. Se utiliza incluso en videojuegos.

Grandes empresas como MercadoLibre, Dropbox y Slack aplican ilustraciones con este objetivo, logrando una explicaci贸n m谩s r谩pida de sus funciones integrando a todo tipo de usuarios y sus experiencias.

Onboarding

Tema

Otro tipo de ilustraciones son las que establecen inmediatamente el tema general y el estado de 谩nimo del sitio web o la aplicaci贸n. Presentan fuertes met谩foras y asociaciones visuales para establecer un atractivo emocional desde los primeros segundos de interacci贸n. Ahorra tiempo y esfuerzo del usuario al respaldar una experiencia de usuario positiva y crear la atm贸sfera necesaria.

Tema

Tutoriales

Las ilustraciones de tutoriales e informaci贸n sobre herramientas son indicaciones visuales. A diferencia de las 'onboarding', estas tienen potencial explicativo y su principal objetivo es aclarar o incentivar acciones concretas.

Las im谩genes de este tipo hacen que la interfaz de usuario sea mucho m谩s amigable para las personas a las que no les gusta o no pueden leer textos.

Tutoriales

Otras

Tambi茅n pueden utilizarse ilustraciones con otros prop贸sitos, como por ejemplo para premiar, las recompensas forman otro tipo popular de ilustraciones de interfaz. Insignias, calcoman铆as, medallas, estrellas, copas y todas las dem谩s cosas de este tipo agregan gamificaci贸n a la experiencia del usuario y marcan el progreso del usuario. 驴Qu茅 podr铆a ser m谩s dulce que sentir que eres un ganador?

Premios

Otro gran aporte es la ilustracion de mascotas, personajes carism谩ticos para acompa帽ar el recorrido. Se convierten en una especie de comunicadores entre la interfaz y el usuario. Las mascotas contribuyen mucho a la voz y el tono del sitio web o la aplicaci贸n e incluso pueden convertirse en una cara metaf贸rica de un producto. La naturaleza simb贸lica de estas im谩genes las hace memorables: dan vida a las interacciones.

Mascota

O sino como entretenimiento, se trata directamente de las emociones y la satisfacci贸n est茅tica. 驴Qui茅n dijo que la belleza, el estilo o simplemente la diversi贸n no pueden ser un factor confiable para retener a los usuarios?

驴D贸nde obtener ilustraciones?

Bien, ahora es momento de poner las manos a la obra. 驴D贸nde puedo obtener ilustraciones si no soy ilustrador? En un equipo de trabajo un ilustrador tiene un rol muy importante en el desarrollo de una interfaz, pero para peque帽as empresas o freelancers, tenemos la posibilidad de acceder a librer铆as de ilustraciones de forma gratuita 贸 paga. Te recomiendo las siguientes:

Storytale

Ilustraciones variadas y de gran calidad, incluyendo elementos 3D, en su mayor铆a pagas.

Stories

Ilustraciones en su mayor铆a planas para web y apps.

Icons8

Gran cantidad de elementos visuales para tus plataformas, desde 铆conos hasta ilustraciones. Elementos de pago y gratuitos.

Freepik

Todo tipo de elementos visuales en sus diferentes formas, vectores y fotos. En su mayor铆a gratuitas.

Isometriclove

Una librer铆a enorme de ilustraciones isometricas.

Handz

Librer铆a gigante y GRATUITA de ilustraciones de manos en 3D (pst, la uso much铆simo para hacer carruseles en Instagram).

Isoflat

M谩s, m谩s y m谩s recursos isom茅tricos, esta vez con una idea m谩s flat que la de Isometriclove.

Toy Faces

Amrit es un dise帽ador que admiro mucho, y entre sus recursos gratuitos nos regal贸 esta joyita que tiene una versi贸n paga y una peque帽a versi贸n gratuita.

隆Espero que estos recursos te sean de utilidad para tus interfaces!