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.
|
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.
|
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.
|
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.
|
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:
|
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!
