Adaptar imágenes grandes a dispositivos móviles

Experiencia de usuario
23/5/2017
|
Samuel Gimeno Artigas
Escritorio redondo con laptop, gafas, planta, celular, lápices y unas manos de mujer tecleando.

Las imágenes y el aspecto gráfico de los productos digitales en dispositivos móviles suele ser uno de los grandes quebraderos de cabeza a la hora de diseñar el aspecto visible tanto para diseñadores de UX como visuales.

Una imagen que funciona bien en una pantalla grande normalmente no lo hace en una pequeña y viceversa. Por poner un ejemplo, cuando ponemos una captura de una app móvil en el blog del Estudio en un dispositivo móvil se ve casi perfecta, mientras que en un dispositivo de escritorio se ve no muy bien en el mejor de los casos.

bmoharris
Captura de la versión desktop y móvil de BMO Harris que pone Norman Nielsen como ejemplo. Imagen de Norman Nielsen

Para ayudarnos a resolver todos estos problemas y mejorar nuestros diseños multidispositivo, Norman Nielsen ha escrito un artículo donde incluye una serie de problemas comunes y sus soluciones que nos ayudarán a tomar mejores decisiones de diseño en nuestro trabajo con productos digitales.

Problemas comunes con las imágenes

Norman Nielsen localiza tres problemas muy comunes con las imágenes:

  1. Claridad de la imagen y correcta visualización del texto superpuesto sobre ella: esto ocurre cuando los colores del texto superpuesto y de la imagen de fondo apenas tienen contraste. Además, en pantallas pequeñas se da otro problema, que el texto tape la imagen por completo (o casi) y la imagen no se distinga. Además, por mucho cuidado que se tenga, siempre habrá en alguna pantalla que no se distinga.
  2. Recorte inadecuado o mal escalado: en una pantalla grande funcionan bien los paisajes y los formatos panorámicos, mientras que en una pequeña suelen funcionar los retratos y las imágenes verticales. Hay que planear correctamente las imágenes que van a ir en cada formato y elegir muy bien los recortes para que las imágenes no pierdan el significado que les queremos dar.
  3. Scroll innecesario y excesivo: las imágenes en dispositivos móviles hacen que la página sea más larga. Una lista de productos o de servicios de un producto digital que en escritorio se ven varios elementos a la vez en dispositivos móviles puede que no se vea más que un elemento, causando frustración en el usuario al tener que hacer scroll contínuamente para ver los elementos. Además hay dos problemas añadidos: las agrupaciones visuales se ven dañadas al no verse al completo el contenido y puede ser necesario hacer scroll más allá de lo visible para encontrar contenido significativo.

Soluciones a los problemas comunes

Casi todos los problemas suelen tener una solución, en este caso Norman Nielsen nos da una serie de soluciones que se adaptan a los problemas del epígrafe anterior:

  • Quitar las imágenes: Norman Nielsen no dice de quitar todas las imágenes de los diseños móviles. Dice que quitemos las imágenes que no aporten significado en una versión móvil, lo cual ayudará a evitar scroll innecesario y a aligerar la carga del dispositivo móvil. Norman Nielsen recomienda eliminar (o considerar hacerlo) si cumple alguno de estos requisitos:
    • es poco clara en pantalla pequeña
    • pierde significado al ser recortada al tamaño correcto
    • queda invisible por el texto superpuesto
    • aumenta el scroll en la página
    • no añade entendimiento significativo al contenido de la página
  • Redimensiona o recorta la imagen: en dispositivos móviles las imágenes tienen que tener significado además de adaptarse a las dimensiones del dispositivo. Los iconos se adaptan muy bien a dispositivos móviles pero piensa que tendrás que elegir un tamaño adecuado para que no sean demasiado grandes. Los iconos quedan muy bien acompañando el texto de los encabezados a modo de viñetas.
  • Mueve o edita el texto asociado a una imagen: muchas veces sólo con editar la imagen no es suficiente, considera también la posición y el texto que lo acompañan. En móvil los textos deben ser precisos y cortos para no ocupar el espacio de la pantalla. De ahí la importancia de la redacción en las interfaces para móviles sobre la que tanto hincapié hemos hecho desde el Estudio.

Tener un aspecto visual y gráfico cuidado en un producto digital es sencillo a poco que se le preste un poco de atención a los detalles y se pruebe el producto digital en varios dispositivos o se usen herramientas como Responsinator para ver el aspecto en varios dispositivos y pantallas en disposición tanto horizontal, como vertical.

Desde el Estudio os recomendamos ponerle mimo a todos los aspectos de un producto digital y hacer tests con usuarios para comprobar que el producto se adapta a las necesidades y las expectativas de los usuarios, y si no poder hacer variaciones hasta que consigamos alinear las expectativas con el producto.

En Torresburriel Estudio te podemos ayudar a implementar procesos de mejora continua en tus productos digitales mediante una consultoría de acompañamiento. Contacta con nosotros y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.

¿Quieres darnos tu impresión sobre este post?

2 respuestas a “Adaptar imágenes grandes a dispositivos móviles”

  1. […] unos meses os hablamos de problemas y soluciones cuando se intentan traspasar imágenes grandes de un diseño de escritorio a una pantalla pequeña. En el post de hoy os hablaremos de otro caso muy común en nuestros días que es justo el […]

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.