Cabecera web o header: elementos esenciales + 5 ejemplos para inspirarte

Lydia Calero

Diseñadora Web Freelance

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.

cabecera-web-above-the-fold

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.

Por ejemplo, esta es la parte que se ve de mi web en escritorio:

cabecera-web-lydia-calero-escritorio

Y esta es la parte que se ve de mi web en móvil:

cabecera-web-lydia-calero-movil

 

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:

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.

2. 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.

cabecera-web-boton-llamada-a-la-accion

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.

ilustracion-cabecera-web

5 ejemplos de header que te servirán de inspiración

1. Viajes El Corte Inglés

cabecera-web-header-el-corte-ingles

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

cabecera-web-header-wendys

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. Sendinblue

cabecera-web-header-sendinblue

La página web de Sendinblue 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 empresa de automatización de marketing es ofrecer un gran número de herramientas en una y de ahí su lema “Toma el control de tu negocio” 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

cabecera-web-header-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.

¿Y tú, qué opinas? ¿Qué elementos has incluido en la cabecera de tu web? ¿Conoces algún ejemplo de cabecera que te guste?

¡Te espero en los comentarios!

Y si te ha gustado el post, anímate a compartirlo en tus Redes Sociales. ¡Compartir es vivir!

Soy Lydia Calero y ayudo a pymes y emprendedores autónomos a conseguir una página web atractiva y eficaz para su negocio. Estoy especializada en el diseño de páginas web con WordPress y Divi, tema Premium de Elegant Themes, la combinación perfecta para crear sitios web espectaculares. Pídeme presupuesto sin compromiso para diseñar tu página web con WordPress y Divi. Te lo enviaré en menos de 24/48 horas, totalmente a la medida y adaptado a tus necesidades específicas.

¿Te ha resultado útil este artículo?

Average rating / 5. Vote count:

¡Aún no hay votos! Sé el primero en valorar este artículo

¡Siento mucho que el post no te haya resultado útil!

¡Ayúdame a mejorarlo!

¿Cuáles son tus sugerencias para mejorar este post?

8 trucos infalibles para triunfar con tu página web

Descubre las claves para conseguir una página web que te ayude a atraer nuevos clientes, multiplicar tus resultados y destacar sobre tu competencia.

También podría gustarte…

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

dos × 3 =

Información básica sobre protección de datos Ver más

  • Responsable Lidia Calero Jimenez.
  • Finalidad  Moderar los comentarios. Responder las consultas.
  • Legitimación Tu consentimiento.
  • Destinatarios  LUCUSHOST.
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes consultar la información detallada en la Política de Privacidad.

Share This
¡Hey! La ley me obliga a informarte de que esta web utiliza deliciosas cookies para asegurarte una mejor experiencia de usuario. Puedes leer más sobre el tema o aceptarlas para seguir navegando tan ricamente.    Leer más
Privacidad