Pautas para usar imágenes de forma efectiva

Experiencia de usuario
20/3/2019
|
Samuel Gimeno Artigas

Nick Babich nos da en un artículo cinco pautas para usar imágenes de forma efectiva en nuestro producto digital.

2019 03 20 blog
Ejemplo de lo que no se debe hacer en rojo y lo que sí en verde sobre el foco de atención de una imagen. Imagen de Nick Babich.

Las imágenes son elementos esenciales en un producto digital pero a veces no se usan adecuadamente. Por eso Nick Babich nos da unas pautas para que mejoremos el uso de las imágenes y no cometamos errores de bulto que puedan perjudicar la experiencia de nuestros usuarios.

Las cinco pautas de Babich son:

  1. Usa imágenes relevantes para el contexto
  2. Ten un foco de atención
  3. Provee imágenes de alta calidad
  4. No te olvides de la accesibilidad
  5. Sé cuidadoso con las imágenes de stock

Usa imágenes relevantes para el contexto

Cada imagen en tu diseño debe tener un propósito claro y hay que evitar las imágenes puramente decorativas. Ya que las imágenes decorativas normalmente o son obviadas por los usuarios o les distraen de sus objetivos. Por lo que no dan una buena experiencia de usuario.

Testea el significado de las imágenes y lo que a tus usuarios les transmiten. Tiene que quedar claro el mensaje que les quieres mostrar a tus usuarios con las imágenes y si no es así, debes cambiarlas si eres el product manager.

Además las imágenes tienen que tener un impacto emocional sobre los usuarios, por lo que deben reforzar los sentimientos que están intentando crear. Un mensaje de error aunque le pongas un smiley de felicidad, seguirá siendo un mensaje de error y el smiley no le aportará una experiencia satisfactoria al usuario, más bien lo contrario.

Ten un foco de atención

Cuando el foco de atención de la imagen se oscurece, la imagen pierde su significado. No hagas a los usuarios que busquen el significado de la imagen. Hay un truco para mejorar ésto, dejar en la imagen sólo un objeto que sea el que capte toda la atención del usuario. De esta manera el foco de atención está claro y es único.

Provee imágenes de alta calidad

Pon el tamaño de la imagen de manera que se vean bien en todos los tamaños de pantalla y plataformas, y que no se vean borrosas ni pixeladas las imágenes. Otro elemento sobre el que hay que tener atención en las imágenes es la proporción para que la imagen no aparezca distorsionada.  

No te olvides de la accesibilidad

Si vas a mostrar texto sobre la imagen, es importante testear el ratio de contraste de color para asegurarse que el texto es legible.

Los textos pequeños deben de tener un ratio de contraste de 4.5:1, y los grandes un ratio de contraste de 3:1. Si quieres comprobar la ratio de contraste usa esta herramienta.

No te olvides de la gente con problemas visuales y que usa lectores de pantalla, acuérdate de dar texto alternativo a las imágenes para que los lectores de pantalla les puedan dar alternativas a lo que se ve.

Sé cuidadoso con las imágenes de stock

Evita las fotos genéricas de stock ya que hacen sentir a tu producto falso, y hace que los usuarios duden de él.

Si quieres poner fotos de equipo, lo mejor es poner una foto de equipo real, que una foto de un equipo que puedes coger por ahí y que no es real. Y no te preocupes si esa foto no parece muy pulida, ya que los usuarios se dan cuenta de esos detalles y ven que la tomó una persona real sobre personas reales, lo que ayuda a mantener una conexión humana.

Las imágenes son un elemento importante del diseño, las debemos elegir con cuidado y observar que estén todas correctamente hechas y puestas, para que los usuarios no noten imágenes distorsionadas, pixeladas o borrosas. Unas buenas imágenes crean una buena experiencia de usuario y causan una buena impresión en los usuarios del producto que estamos diseñando.

¿Quieres darnos tu impresión sobre este post?

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.