Una guía sencilla para aumentar el engagement con las hero images

Las primeras impresiones son importantes: se producen rápidamente… y suelen ser bastante difíciles de cambiar después. Al hablar de la optimización web, este primer contacto tiene el poder de impulsar o desplomar tus tasas de conversión.

La optimización de las tasas de conversión se centra en la experiencia de usuario. Interactúa con los clientes y guíales a lo largo de un recorrido impecable y completo con imágenes atractivas, CTAs convincentes y contenido relevante que capte su atención. Mientras que este proceso holístico debería aplicarse a todas las páginas en un sitio web, si estás dudando al elegir por dónde empezar, intenta centrarte en los puntos principales para los usuarios. Al plantearte esto, uno de los primeros que te han venido a la mente son las hero images, ¿a que sí? 😉

Las hero images pueden ser un factor imprescindible para animar a tus usuarios a quedarse en la página y, finalmente, ¡realizar una conversión! En este artículo, descubrirás lo que tienes que saber para lograrlo.

|

¿Qué son las hero images?

Una hero image es un banner grande que aparece en la parte superior de una página web. Suele situarse debajo de la barra de navegación, ocupando la anchura completa de la pantalla, y representa (o es relevante para) la marca y/o el producto de una manera visualmente atractiva. Las hero images suelen incluir una llamada a la acción para ofrecer contexto a los usuarios nuevos y una indicación de cómo continuar avanzando por el embudo de conversión.

deliveroo header
La hero image de Deliveroo

|

Cómo las hero images pueden ayudar a los usuarios

Cuando se utiliza correctamente, una hero image puede significar la diferencia entre un aumento notable de las conversiones o una tasa de rebote alarmante. Las imágenes son increíblemente eficaces para despertar el interés de los usuarios, transmitiendo la personalidad de tu marca y/o la efectividad de tu producto – normalmente en cuestión de segundos. Emplear hero images para resaltar una oferta promocional o mostrar cómo registrarse para una subscripción (por poner sólo dos ejemplos) puede proporcionar a los usuarios la información práctica que necesitan para continuar avanzando por el embudo.

Por lo tanto, ¿cómo podrías optimizar las hero images para garantizar que sean más efectivas? Te presentamos las cuestiones fundamentales para elegir las hero images perfectas.

|

La relevancia es clave

Como hemos mencionado anteriormente, una hero image representa a una empresa o el contenido que contiene la landing page en la que se encuentra. Debería conservarse una cierta continuidad entre el diseño de la página y estos banners. ¡Asegúrate de que encajen bien con los demás elementos! Los usuarios se percatarán de estas incongruencias – o, incluso peor, podrían llevarles a abandonar la página. Como verás, ninguno de los casos generaría una experiencia de usuario excepcionalmente positiva.

Al hablar de la relevancia, nos referimos a más que la identidad visual de tu marca. Las hero images sirven como referencias para los clientes, y el texto y los CTAs en estos headers (‘cabeceras’) deberían estar claramente alineados con el recorrido del usuario.

Miremos el ejemplo de Airbnb: en su página principal, los usuarios ven una casa anidada en un paisaje precioso, con un CTA que les permite consultar la disponibilidad para alojarse en fechas y lugares específicos.

airbnb homepage header
La hero image en la página principal de Airbnb

|

Por otra parte, en la landing page de los huéspedes de Airbnb, el hero header muestra a una pareja sonriente e incluye un CTA para calcular las ganancias potenciales que podrías obtener al listar tu residencia.

host airbnb header image
La hero image de la landing page de Airbnb

|

Estas hero images han sido modificadas para reflejar las necesidades y los intereses de usuarios específicos (es decir, aquellos que están buscando reservar un alojamiento vs. aquellos que desean convertirse en huéspedes de Airbnb). Las hero images genéricas no generarán tantas conversiones (si es que logran generar alguna…), por lo que es siempre recomendable ser específico.

|

Capta la atención de tus usuarios

Al interactuar con tus usuarios para que visiten, y permanezcan en, tu página web, los headers que llamen su atención aumentarán considerablemente la probabilidad de que tus usuarios realicen la acción deseada.

El objetivo principal de una hero image es generar una conexión casi instantánea con el usuario. Puede responder a sus preguntas, hacerles reír, resonar emocionalmente con ellos, o despertar su curiosidad.

La hero image de Moz es una declaración que afirma, esencialmente, que hay una manera mejor y más eficiente de gestionar el SEO – y no es nada más ni menos que el propio Moz. Con un CTA que ofrece una prueba gratuita, muestra a los usuarios que tendrán una oportunidad de comprobarlo por sí mismos antes de invertir en un plan más nuevo.

moz header image

|

Ten un CTA claro

Las llamadas a la acción deben ser informativas, atractivas y fácilmente reconocibles en la página (aquí tienes una recopilación de algunos ejemplos destacables).

Presta atención y testea el mensaje de los CTAs, ya que incluso las modificaciones menores podrían tener un efecto considerable sobre las tasas de conversión. Asimismo, asegúrate de que el CTA no se pierda entre demás los elementos de la página. ¡El usuario debería poder reconocerlo inmediatamente!

|

Utiliza imágenes de alta calidad

Las header images no tienen por qué ser imágenes estáticas; también podrían ser vídeos, GIFs, ilustraciones e incluso animaciones, como el hero header de HubSpot, mostrado a continuación:

hubspot hero image
El hero header de HubSpot

|

Los vídeos se han convertido en una opción particularmente popular para los hero banners. ¡Un experimento reciente de Forbes reveló que lograban aumentar las conversiones más de 90%!

Si sigues debatiéndote sobre qué utilizar para tu hero image, el testing es la mejor manera de decidir. Prueba a realizar un test A/B entre las imágenes estáticas y las dinámicas/los vídeos para ver qué funciona mejor en tu página o en una landing page específica.

|

Optimiza para las pantallas de distinto tamaño

Los usuarios visitan tu página desde una variedad de dispositivos distintos (a menudo, en el mismo día). Presta atención a cómo tu hero image aparece en ordenadores, tablets y móviles – estos dispositivos tienen distintas dimensiones y orientaciones (vertical y horizontal).

Las hero images que no se hayan optimizado en distintos dispositivos podrían recortar elementos fundamentales (como partes del texto o los CTAs en el banner) en pantallas de distintos tamaños, lo cual daría una imagen descuidada de la página, y seguramente llevaría a oportunidades perdidas con nuevos clientes.

Además, el 57% de los usuarios afirman que no recomendarían a una marca con una versión móvil mal diseñada. Si la hero image es lo primero que verán tus usuarios al llegar a la página, deberá estar optimizada y bien diseñada.

|

Aprendizajes principales

Las hero images pueden ser el gancho que necesitas para captar la atención de tus usuarios con el fin de convencerles de que tu página web es exactamente lo que andaban buscando. Al emplearlas correctamente, conseguirás destacar entre tu competencia – la clave es que el diseño sea ingenioso, divertido, o ‘simplemente’ (y sí, deberíamos destacar esta palabra con muchas, muchas comillas ☻) visualmente impresionante. Recuerda que las hero images deben ser relevantes para el usuario, el contexto de la landing page y tu marca.

Optimiza para los distintos dispositivos, asegúrate de que has destacado los detalles más relevantes, ¡y continúa realizando test para garantizar que estos hero headers están ayudando a aumentar las conversiones!

Share on linkedin
Compartir en LinkedIn
Share on facebook
Compartir en Facebook
Share on twitter
Compartir en Twitter
Ne perdez pas le traffic de votre site sans le convertir
Construisez des expériences complètes qui convertissent, sur tous les canaux digitaux.
+250%
taux de clic
+19%
taux de conversion
+5%
panier moyen
Ils nous font confiance

Demande de démo

Don't throw away hard-earned traffic.
Make your website work overtime - so you don't have to.
+250%
click-through rate
+19%
conversion rate
+5%
average order value
Trusted by

Request a demo