Mejores prácticas de imagen de héroe: 6 cosas a considerar

La imagen principal es el banner principal en el sitio web, generalmente colocado en un lugar destacado, arriba del pliegue, al frente y al centro.

La imagen principal es la primera imagen que verá su audiencia cuando ingrese al universo de su sitio web. Por lo tanto, la tarea de obtener y seleccionar su imagen de héroe no es una tarea que deba tomarse a la ligera.

En esta publicación, he resaltado algunos de los aspectos más cruciales y las mejores prácticas que debe considerar al elegir una imagen de héroe.

1. Usa imágenes relevantes

Si bien pasamos más tiempo en línea que nunca, nuestra capacidad de atención está disminuyendo rápidamente. Un estudio de la Universidad Técnica de Dinamarca concluye que nuestra capacidad de atención colectiva se está reduciendo (sciencedaily.com). Si bien el tiempo promedio que se pasa en una página en promedio, en todas las industrias, es de 62 segundos, más del 50 % de los visitantes pasan menos de 15 segundos activamente en una página (time.com).

Su imagen de héroe debe amplificar su propuesta de valor: lo que está tratando de comunicar. Pregúntate a ti mismo las siguientes preguntas:

• ¿Qué emociones estás tratando de desencadenar?
• ¿Cómo se conecta su imagen a su USP / ESP?
• ¿La imagen contextualiza el contenido del sitio web?

Hemos reunido algunos ejemplos a continuación para mostrar cómo una imagen de héroe puede hacer esto.

HubSpot: con una ilustración como fondo de héroe, HubSpot ejemplifica tanto el aspecto de crecimiento como el hecho de que atienden tanto a las PYMES como a las grandes empresas.

Save the Children: usar una imagen de un niño en su fondo de héroe para ejemplificar a uno de los muchos niños que están tratando de salvar, y así (con suerte) crear una conexión emocional con la audiencia.

Agricultores orgánicos de Riverford: un buen ejemplo de cómo aprovechar una imagen auténtica relacionada con el producto de las verduras orgánicas. La imagen está estrechamente relacionada con los productos y USP.

2. El contraste es clave

Los elementos de diseño deben estar separados para que el elemento más importante se destaque. Por lo tanto, más allá de elegir una buena imagen, también debe considerar cómo esa imagen podría funcionar con el color de fuente deseado, el llamado a la acción y el esquema de color de la marca.

El uso de una superposición simple generalmente puede marcar una gran diferencia, haciendo que su texto se destaque. Además, optimizar la saturación, la temperatura y el contraste con una herramienta de edición puede darle vida a su imagen.

3. Usa el formato correcto

No uses imágenes de baja calidad. Las imágenes pixeladas o borrosas pueden arruinar la primera impresión. Sin embargo, dado que el héroe visual es un elemento crítico de CX, debe asegurarse de que la imagen se represente lo más rápido posible.

Utilice imágenes que tengan entre 1500 y 2500 píxeles de ancho y comprima su imagen para reducir el tamaño del archivo y así aumentar la velocidad de carga.

Debido a que el formato PNG generalmente produce un tamaño de archivo pesado, le recomendamos que solo use este formato si tiene líneas nítidas y áreas claramente separadas de colores planos y texto.

Varias herramientas en línea pueden ayudarlo a comprimir su imagen:

• Tinyjpg.com: Hasta 20 imágenes, máximo 5 MB cada una.
• Compressor.io: Admite jpg, png, gif, svg, webp. Máximo 10 MB
• Imagify.io: límite de carga de tamaño de archivo de 2 MB
• Shortpixel.com: Hasta 50 archivos y máximo 10MB.

4. Crea una conexión emocional

Un estudio reciente publicado en Frontiers descubrió que las imágenes emocionales influyen más en las personas que las palabras emocionales. Por lo tanto, al elegir una imagen con un alto nivel de emotividad, puede desencadenar una reacción emocional en el espectador.

Cuando observamos una expresión facial de emoción, a menudo la imitamos. Según un artículo publicado en la revista Trends in Cognitive Sciences, no son solo nuestras sonrisas o muecas, sino todas nuestras expresiones faciales las que son contagiosas.

De hecho, el cerebro procesa las imágenes 60.000 veces más rápido que el texto, y el 90 por ciento de la información que se transmite al cerebro es visual (t-sciences.com). Somos criaturas visuales y al aprovechar los estímulos emocionales, incluidos rostros emocionales e imágenes evocadoras, podemos desencadenar no solo sentimientos y asociaciones positivas, sino también ayudar a su audiencia a decodificar el mensaje deseado de manera más rápida y precisa.

5. Sé auténtico y realista

Los consumidores se ven abrumados por los estímulos, los anuncios y el ruido. La autenticidad de la marca puede ayudarlo a romper el ruido y hacer que se destaque. Los mensajes genuinos y las imágenes realistas resuenan más poderosamente con las personas y lo ayudan a crear una conexión más fuerte con su audiencia.

Más empresas están utilizando "personas reales" para comercializar sus productos. Dove comenzó su 'Campaña por la belleza real' en 2004 celebrando las diferencias físicas naturales personificadas por todas las mujeres. Más allá de ganar numerosos premios, la marca creó una fuerte conexión emocional con su público objetivo, lo que resultó en un aumento significativo de las ventas.

Marcas como Dove y más tarde Target han utilizado con éxito "personas reales" en su publicidad en los últimos años y por una buena razón: vale la pena ser auténtico.

Esto no significa que deba tomar todas las fotografías usted mismo, ni que deba usar imágenes y videos con baja resolución. Sin embargo, debe utilizar fotografías de personas, lugares y experiencias reales y transmitir una historia de forma real en lugar de utilizar imágenes que parezcan escenificadas.

6. Prueba y optimiza

La elección de una (nueva) imagen de héroe no debe considerarse la etapa final, sino el comienzo de su proceso de optimización. Como se indicó anteriormente, la imagen del héroe es quizás uno de los elementos de diseño más importantes del sitio web y puede tener un impacto significativo en su rendimiento general.

Para asegurarse de que su imagen de héroe esté funcionando según lo previsto, debe implementar un seguimiento de rendimiento adecuado antes de configurarlo en vivo. Con este fin, considere usar una herramienta de prueba A/B para probar variantes alternativas y comparar su variante original con su nueva imagen.

En una prueba implementada por Crazyegg, la versión ganadora aumentó las ventas de los compradores globales en un 29,7 %. En el pasado, he usado las siguientes herramientas para probar variaciones de imágenes:

• Google optimizar (Gratis)
• de forma optimizada
• huevo loco

Recuerda, el fracaso es el primer paso hacia el éxito y no intentarlo es peor que intentarlo y fallar. Es posible que no lo haga bien la primera vez, pero pruebe, pruebe nuevas variaciones y siga optimizando, y será recompensado en consecuencia.