Imágenes para mobile ¿Cómo diseñarlas?

¿Por qué diseñar imágenes para mobile?

Las empresas y marcas que quieran presencia online positiva deben dedicar esfuerzos y recursos para que sus plataformas y canales de comunicación estén óptimos, tanto en la versión desktop como en la versión mobile porque es innegable la preponderancia del uso del celular: un estudio de la Universidad de Cambridge documenta que habrá 6 billones de Smartphone para el 2020 (Ya en el 2016 lideraba el ranking como el dispositivo tecnológico más usado en el mundo)

De ahí la importancia de destinar el tiempo necesario para el diseño de todas las imágenes mobile. ¿Qué quiere decir que la pasen? Como mínimo debes revisar que:

• La imagen sea de calidad (no esté pixelada)
• No tenga demora en la velocidad de carga (Testea cuánto se demora tu sitio en cargar con: https://tools.pingdom.com/)
• Esté en contexto y tenga valor comunicativo.
• Respete el manual de marca o la estética previamente definida.
• Respete los derechos de autor (Usa banco de imágenes libres como: https://pixabay.com/es/ o https://unsplash.com/search/photos/doctor u otorga el crédito correspondiente)
• Soporte la lectura en las diferentes tipos de pantallas y tolere el “zoom” en el celular (Revisa la versión mobile de tu sitio web en: http://quirktools.com/screenfly/)

Estas recomendaciones aplican en general a las imágenes que queramos subir en nuestras plataformas. Ahora veamos algunos detalles específicos para las imágenes relacionadas con productos.

Tips para crear imágenes que muestren productos en mobile:

Antes de centrarse en los tips es importante entender que preocuparse por crear buenas imágenes de los productos responde a la necesidad de comunicarnos de la mejor forma con nuestros clientes habituales, pero sobre todo con nuestros clientes potenciales.

Debemos pensar en cómo van a ver nuestros productos las personas que ingresan por primera vez a nuestra página y si esta imagen responde a todas las preguntas que se harán antes de hacer la compra. Y ¿cómo saber qué es lo que se pregunta o prefieren nuestros usuarios?

Una de las herramientas más conocidas en el mundo del marketing digital y la analítica web es el TEST A|B que consiste en experimentos en los que se ponen a prueba dos patrones similares con una variable distinta. Por ejemplo, si queremos testear que imagen nos favorece más para vender un producto,  se activa un anuncio que aleatoriamente va a mostrar una landing con la imagen A y otra con la imagen B y el programa con el que se realiza el test, arrojará qué landing en función de la imagen prefirieron los usuarios.

¡Por suerte ya hay estudios que demuestran qué es lo que es más conveniente a la hora de mostrar un producto!  Veamos las recomendaciones dadas por el Engineering Desing Centre (EDC)

• Mostrar un producto por vez (evitar collage, kits o armados excesivos de imágenes)
• Debe ser una fotografía o imagen prediseñada frontal (evitar perfiles o perspectivas)
• Debe guardar los espacios sugeridos para cada dispositivo (ver «Imagen 1»)
• La imagen debe mostrar claramente: marca, tipo de producto (ej. Shampoo), variante (Revitaliza el color) y cantidad de contenido. Si no es así debe usarse una barra lateral que explique los aspectos faltantes.
• En caso de crear esta barra o herramienta visual, se debe usar la misma en todos los productos que la misma acompañe. Este pieza debe ser lo más sencilla posible: sin efectos visuales, sombras, bordes extras. (Se recomienda la tipografía Open Sans Bold, el texto sin mayúscula, lectura de abajo hacia arriba, con una, dos y hasta tres palabras keywords del producto)

Imagen 1:

Fuente | Imagen tomada de la investigación «Mobile friendly hero image research» del EDC

Siguiendo con esta estética el producto debe estar lo suficientemente separado de textos o elementos visuales acompañantes, y en lo posible debe usarse todo el espacio disponible.

Para hacerlo más fácil, a continuación te dejamos ejemplos de prácticas buenas y malas respecto del tratamiento de imágenes para producto reveladas en el estudio mencionado.

Fuente | Imagen tomada de la investigación «Mobile friendly hero image research» del EDC

Las imágenes consideradas como erróneas son aquellas en las que no se puede ver claramente la marca del producto, la imagen no ocupa todo recuadro disponible, hay diferentes tamaños y formatos para mostrar productos de una misma marca, y además no ofrecen información valiosa al comprador sobre, por ejemplo, la cantidad de producto que llevará. ¡Esperamos este artículo haya sido útil! y recuerda:

¡En G2 ROCKET ayudamos a que tu negocio crezca y despegue con las mejores estrategias de marketing digital!

También te puede interesar | Guía para mejorar tu marketing en instagram