Nos guste o no, la capacidad de atención humana en general es más bien tirando a poca. Y cuando se trata de visitantes de una web, el 55% pasará menos de 15 segundos en tu página para decidir si puedes ofrecerle lo que necesita o no.
Quince segundos.
Es un hecho: todo lo queremos aquí y ahora.
Por eso, la información que incluyas en tu cabecera web (header), que es lo primero que van a ver los usuarios, es vital para conseguir mantener su atención o no.
Vamos, lo que de toda la vida se ha llamado “Above the Fold”.
¿Above the quéee?
Si nunca has oído esta expresión, te cuento de dónde proviene, que el saber no ocupa lugar.
Qué significa el concepto “Above the Fold”
El concepto “Above the Fold” (por encima del doblez) deriva de la costumbre de doblar los periódicos por la mitad para ser expuestos para la venta, de forma que solo la mitad superior de la portada quedaba a la vista.
Sabiendo esto, es fácil deducir cuál es el “Above the Fold” de una web: todo aquello que podemos ver en la pantalla de nuestro dispositivo de un primer vistazo, antes de tener que hacer scroll.
Teniendo en cuenta los 15 segundos que se va a tomar el usuario en decidir si le interesa lo que le ofreces, es necesario que enfoques el diseño de tu web a captar su atención lo antes posible.
El objetivo es enganchar a tu visitante desde un primer momento, animarle a seguir navegando y conseguir que finalmente realice la acción que buscas (ya sea suscribirse a una newsletter o comprar un producto, por ejemplo).
Colocando los elementos correctos en la cabecera de tu web conseguirás ese primer objetivo de ganarte a tu visitante desde el segundo número uno.
6 elementos que no pueden faltar en tu cabecera web
La home o página de inicio es la página más importante de tu web. Es la que suele recibir más visitas y la que va a causar la primera impresión en tu visitante.
Estos son los seis elementos esenciales que siempre deben aparecer en la cabecera de tu página de inicio:
1. Logo
Sí, puede parecer un poco tonto incluir este elemento en la lista, ya que es bastante obvio que el logo de tu empresa es una pieza esencial que siempre debe aparecer en la cabecera de tu web.
Y precisamente por eso hay que incluirlo en la lista.
El mejor lugar para colocar el logo de tu empresa es en la parte superior, junto al menú de navegación. Puedes ponerlo en la esquina superior derecha o en la esquina superior izquierda. También puedes situarlo en la parte superior central o centrado alineado con el menú.
Esto ya va en gustos.
Pero lo más importante es que tenga un tamaño correcto, ni muy grande ni muy pequeño, y que se vea bien, que no esté borroso ni pase desapercibido por culpa de un fondo desafortunado.
Además, el logo siempre debe ir linkeado a la página de inicio, ya que algunos estudios han demostrado que la gran mayoría de usuarios hace clic en el logo para volver a la home, en lugar de hacerlo a través del menú de navegación.
El menú de navegación de tu web es la guía que ayuda a los visitantes a moverse por tu página.
Aunque para ti todo el contenido de tu web sea importante, piensa bien en ello y trata de incluir solo aquellas páginas realmente claves para tu negocio (Inicio, Servicios, Quiénes Somos, Blog o Contacto) y deja el resto (Preguntas Frecuentes, Páginas Legales, etc) para otras zonas, como el pie de página.
Por supuesto, estas páginas claves siempre van a depender de tu tipo de negocio y de tus objetivos concretos.
Piensa en esto: qué información es más relevante para tus clientes, qué me interesa comunicar a mis usuarios. Y añádela a tu menú.
Por ejemplo, si tienes una escuela de yoga y unos precios definidos, lo suyo es que incluyas en el menú una pestaña de Tarifas.
O si tienes un restaurante, lo más probable es que quieras incluir una pestaña con la carta en tu menú.
Pero recuerda siempre no abusar y no querer meter absolutamente todo en tu menú.
Un par de consejos para que el menú de navegación sea aún más efectivo:
- Que sea fijo en todos los dispositivos, para que esté siempre visible.
- Destacar la pestaña que más te interese en forma de botón o Call To Action.
3. Propuesta de valor
Una propuesta de valor sólida te servirá para causar una gran impresión en los visitantes de tu web y proporcionar una imagen clara de lo que tu marca puede ofrecer.
Compartiendo tu propuesta de valor directamente en la cabecera de tu página de inicio puede ayudarte a diferenciarte de la competencia y calar hondo desde un primer momento en el subconsciente de los visitantes de tu web.
Para definir tu propuesta de valor ten en cuenta estas cuatro cosas:
- Quiénes son tus clientes
- Qué productos o servicios vendes
- Qué te diferencia de la competencia
- Qué beneficio puedes ofrecer a tus clientes si te eligen
4. Llamada a la acción
Las llamadas a la acción (CTAs) son la clave para animar a los usuarios a dar el siguiente paso en tu web y conseguir conversiones.
Por eso, en la cabecera de tu página web no puede faltar nunca un botón de llamada a la acción que facilite al usuario la tarea de llegar a donde tú quieres: página de contacto para que pida más información, página de compra, página de suscripción a newsletter, etc.
Al usuario, cuanto más fácil se lo pongas, mejor.
5. Datos de contacto y Redes Sociales
A veces puede ocurrir que alguien entre en tu web con el único objetivo de averiguar cuál es tu teléfono o tu e-mail para contactar directamente, así que estos datos tienen que estar siempre a la vista desde el primer momento.
Lo ideal es que crees un menú secundario junto al menú principal e incluyas ahí todos tus datos de contacto: teléfono, e-mail y enlaces a redes sociales.
Y si dejas los menús fijos, como te recomendaba más arriba, los datos de contacto estarán siempre visibles.
6. Elementos visuales
Para captar la atención de tus visitantes, nada mejor que incluir algún elemento visual, ya sea una animación, un gráfico, una ilustración, un vídeo o una imagen atractiva.
Muchos estudios han demostrado que incluir archivos multimedia mejora las conversiones en una página web.
5 ejemplos de header que te servirán de inspiración
1. Viajes El Corte Inglés
Viajes El Corte Inglés ha optado por dos menús: uno principal con los diferentes tipos de viaje y uno secundario encima del principal donde podemos acceder al listado de agencias, preguntas frecuentes, acceso para usuarios registrados y el teléfono.
Para la imagen de cabecera, han seleccionado varias con destinos de su programación, que van cambiando según refrescas la página, y en todas aparece destacado el mensaje de financiación.
Como llamada a la acción destacada, la agencia ha optado por incluir un buscador de hoteles, vuelos, vuelo + hotel, cruceros, trenes y circuitos.
Por último, la cabecera incluye un enlace a un artículo destacado del blog de viajes.
2. Wendy’s
La empresa de comida rápida norteamericana Wendy’s ha incluido dos menús en su cabecera: uno principal con el menú, sus valores, quiénes son y empleos; y uno secundario encima del principal con acceso para usuarios registrados, listado de restaurantes y dos botones para pedir (recogida y entrega a domicilio).
La propuesta de valor de esta empresa es la recogida y entrega a domicilio de sus menús. Por eso, han optado por incluir llamadas a la acción destacadas para que el usuario pueda acceder fácilmente a estos servicios.
Como imagen destacada han utilizado la foto de una de sus hamburguesas.
No sé a ti, pero a mí me acaba de entrar un hambre que me muero, ¡y son las 11 de la mañana! Estos de Wendy’s saben cómo captar la atención del usuario hambriento.
3. Greenhouse
La empresa de software para contratación de talentos Greenhouse ha optado por el minimalismo y la sencillez en su página web.
La cabecera consta de un único menú con cuatro pestañas (Productos y soluciones, Recursos, Sobre nosotros y Comunidad), un buscador, un botón de registro y una llamada a la acción destacada para solicitar una demo.
Cada pestaña contiene un submenú desplegable con otras opciones de interés.
Esta misma llamada a la acción se repite más abajo junto a un pequeño formulario para que el usuario deje su e-mail si quiere recibir una demo.
En este caso, queda claro que el objetivo principal de esta web es captar los datos de los usuarios interesados en recibir una demostración de los servicios de la empresa para después contactar con ellos y cerrar una posible venta.
4. Brevo
La página web de Brevo es una de mis favoritas por su diseño sencillo y atractivo.
El menú tiene cuatro pestañas principales, dos de ellas con submenús a las diferentes funcionalidades y recursos. Además, incluye un selector de idioma y acceso a usuarios registrados.
La propuesta de valor de esta plataforma es ofrecer una solución integral para crear relaciones con los clientes a través de email, SMS, chat y mucho más, y de ahí su lema “Conexiones que impulsan tu crecimiento” como lema principal en su header.
Su cabecera también incluye una llamada a la acción bien destacada y visible para registrarse gratis y una ilustración animada, que aporta dinamismo.
5. ASOS
Cuando entras en una tienda online de ropa, ¿no quieres tener acceso inmediato a un buscador con filtros para poder encontrar enseguida lo que necesitas exactamente?
Seguramente sí. Y, como tú, la mayoría de todos nosotros los usuarios.
ASOS lo sabe y por eso ha situado un buscador bien visible en la parte superior de su cabecera y dos llamadas a la acción muy claras: Moda Mujer y Moda Hombre.
En este caso, la página de inicio es simplemente la cabecera y un pie de página con enlaces de interés. No quieren desviar la atención del visitante sobre el objetivo principal: comprar. Y en la cabecera está todo lo que el visitante necesita para hacerlo.
Con el diseño y el contenido adecuados, la cabecera de tu web puede ser muy efectiva para tu negocio: captando la atención de tus visitantes desde un primer momento y animándolos a seguir navegando por tu web.
Si te ha gustado el post, puedes dejarme un comentario, regalarme 5 estrellitas o compartirlo en tus redes sociales, que es gratis 😉
