El header es una de las partes más importantes en una página web, pues es el elemento que los usuarios visualizan en primer lugar cuando llegan a tu sitio. Por lo tanto, la cabecera de tu web debe ser ordenada y limpia para que pueda ser visualizada con un solo vistazo y no de lugar a confusión.
A la hora diseñar una web, debes tener en cuenta que el header es un espacio genérico que tendrá el mismo diseño en todas las páginas (salvo en landing pages o apartados muy concretos).
De este modo, el header de tu web debe ser un punto de encuentro para el usuario, donde disponga de toda la información que necesita y le permita navegar por tu sitio.
Además, en función del tipo de web (ecommerce, blog, one page, etc), debes seguir una estrategia diferente para conseguir tus objetivos de conversión, ya sean clics, ventas o suscripciones.
Si quieres saber más sobre cómo crear y planificar un header web de forma efectiva, en este post te doy una serie de consejos y te cuento cuáles son los elementos más recomendables que debes incluir.
Antes de entrar en materia, te dejo un post con unos consejos para crear un footer efectivo en tu web.
Resumen
¿Qué elementos incluir en la cabecera de tu web?
Lo primero que debes hacer es un listado con los elementos que vas a incluir en el header de tu web de forma obligatoria, ya sea por motivos de branding, navegación, conversiones u otros.
Aquí te cuento una serie de elementos que son susceptibles de formar parte de la cabecera de una web, pero por supuesto, no tienes que incluirlos todos. Como ya he dicho, esto depende del tipo de web y cuáles sean tus objetivos.
#1 Logotipo
Si hay un punto que no puede faltar en una web, ese es logotipo, ya que sirve como guía visual para el usuario, te permite reforzar tu branding e imagen de marca, y hace que tus visitas te recuerden por un elemento gráfico.
Además, como norma general, el logotipo en una web suele enlazar con la página de inicio de la misma. Es decir, permite que el usuario pueda volver al principio en todo momento.
A la hora de colocar tu logo, tienes diferentes opciones:
Puedes situarlo en el centro, por encima del menú, como hicimos en la web de Sara Caro.
Otra opción es colocarlo también en el centro, pero alineado con el menú e integrado en sus pestañas de navegación. Así lo hicimos en el header de la web En Conexión Contigo.
También puedes recurrir a un diseño más clásico con el logotipo a la izquierda el menú a la derecha. Es efectivo y funciona. Así lo tienes en la web de ABEO o en esta que lees.
Un ejemplo más, en este caso con el menú fusionado en la cabecera de la web y su imagen de fondo. Una opción muy visual.
Estos son solo unos ejemplos, pero en este sentido no hay límites. Puedes ser todo lo creativo que tu proyecto te permita.
#2 Menú (s)
Otro imprescindible en el header de una web es el menú, elemento que permite al usuario la navegación entre los distintos apartados.
En ese sentido, puedes optar por colocar un solo menú o dos, siempre en función del tipo de web que tengas y especialmente de su estructura (si tu web tiene muchas secciones, posiblemente necesites un menú doble).
Mi consejo es que evites, siempre que puedas, el doble menú para que el usuario no se pierda e intentes aglutinar tus páginas en uno solo.
Pero si tu sitio tiene una gran estructura o se trata, por ejemplo, de un ecommerce o de un blog con muchas categorías, en ese caso lo necesitarás.
Te dejo varios ejemplos donde podrás visualizarlo mejor:
En el blog de Mi Mundo en una maleta utilizamos un menú doble:
- Uno principal con el logo alineado en el centro, que incluye los principales destinos del blog.
- Uno secundario en la parte superior, que incluye las tres únicas páginas estáticas.
Si tienes una tienda online, la web de Acuarela Duck es muy buen ejemplo. En este caso, han utilizado un menú doble organizado de la siguiente forma:
- Menú principal centrado y situado debajo del logo: incluye las páginas principales de la web, así como las categorías de productos.
- Menú secundario en la parte superior: incluye las pestañas complementarias para los clientes: carrito, cuenta, lista, etc.
Otra opción es utilizar un menú principal en el header de la web y otro secundario en el footer, como puedes ver en Territorio Magazine.
#3 Buscador
Otro elemento transversal en el header de una web es el buscador, que siempre recomiendo tener activo por cuestiones de usabilidad (tú conoces muy bien tu web, pero seguro que no es el caso del usuario que entra por primera vez).
En este sentido, tienes diferentes opciones de diseño y ubicación: icono de lupa, barra buscadora, al lado del menú, debajo del logo, etc.
Como ejemplo, puedes ver la web de Casika (tienda de muebles), cuyo header me gusta mucho por su diseño y organización.
#4 Datos de contacto
Otro tipo de información que puedes incluir en la cabecera de tu web son los datos contacto, tales como teléfono o email.
Mi consejo en este sentido es que no incluyas demasiados datos de contacto, solo los que sean estrictamente necesarios para que el usuario te pueda contactar. Por ejemplo, la dirección, que suele ocupar demasiado, recomiendo incluirla en el footer.
Es decir, datos de contacto sí (siempre que los necesites), pero sin pasarse.
Te dejo un ejemplo donde los datos de contacto están, pero ocupan un lugar discreto.
Las redes sociales son otra vía de contacto en una web, pero he querido separarla del apartado anterior para centrarme en ellas.
A la mayoría de clientes le gusta que sus perfiles sociales estén bien visibles en el header de su web, todo lo contrario que a mí.
¿Por qué? Muy sencillo. Porque las redes sociales son un canal complementario para comunicar el mensaje de tu marca o negocio, pero no el principal, que siempre debe ser tu web o blog.
Es decir, el objetivo de las redes sociales es amplificar tu mensaje para convertirlo en tráfico hacia tu web, no al contrario. No tiene sentido que, cuando has conseguido que el usuario aterrice en tu web, lo primero que hagas sea sacarle de ella para llevarle a tus redes sociales.
¿Qué es más importante para ti? ¿Una usuario satisfecho en tu web que puede dar lugar a una conversión, o un like en Instagram?
Por lo tanto, las redes sociales como elemento destacado en el header web nunca las recomiendo, solo si son imprescindibles y está justificado. Mi consejo es que las pongas en el sidebar o en el footer.
Y esto te lo dice una persona a la que le encantan las redes sociales y que es muy activa en ellas, pero si hablamos de estrategia, no te recomiendo sacar al usuario de tu web para llevarlo a la red social que sea. Nadie te asegura que esa persona vaya a volver a la web.
Como ejemplo, te dejo la web de Javi Layunta, en cuyo header incluimos las redes sociales sin restar protagonismo al resto de elementos.
#6 Tienda online
Como ya he comentado en el apartado menú, si tu web es una tienda online, debes incluir en el header los elementos referentes al proceso de compra: carrito, cuenta, pedido, lista de deseos, acceso…
Aquí puedes ver como lo resolvimos en la web de Nairamkitty:
#7 Botones destacados
Otro tipo de elemento que puedes incluir en la cabecera de tu web son botones destacados para enfatizar un servicio, llevar al usuario a una landing o animarle a que haga una acción específica.
Como ejemplo puedes fijarte en la cabecera de mi propia web, donde puedes ver el botón «pedir presupuesto» como destacado.
[En otro post hablaré sobre las tasas de conversión de este botón y el cuestionario al redirige]
Si hablamos de botones destacados, otra opción son los que dan acceso o permiten el registro en una plataforma. Por ejemplo:
Como ves, este tipo de botones son imprescindibles en webs de formación, plataformas que requieren un registro previo, membresías o servicios especializados.
#8 Barra fija
Las barras fijas son muy útiles para mostrar en el header de tu web anuncios, descuentos, cupones, llamadas a la acción o información adicional.
Si las usas, ten cuidado de no cargarlas de información para no restar protagonismo al resto de elementos.
Como ejemplo, te dejo la cabecera de la web Women Shoes, una tienda online de zapatos para mujeres. Me encanta la forma en que han resuelto el incluir gran cantidad de información y datos sin pisarse unos a otros.
#9 Selector de idioma / país
Si tu web es un sitio multi lenguaje porque operas en diferentes países, un elemento obligatorio en el header es un selector de idioma; y si quieres filtrar a las visitas por ubicación, un selector de país.
Aquí te dejo un ejemplo donde han incluido ambos selectores con un resultado brillante en cuanto a diseño y usabilidad:
Como ves, el uso de las banderas de cada idioma / país es un recurso gráfico idóneo para este tipo de selectores.
#10 Formulario de suscripción
Por último, quiero mencionar un recurso que también es susceptible de ser incluido en la cabecera de una web, aunque no es del todo recomendable por el gran espacio que ocupan.
Además, los formularios de suscripción se pueden colocar en otras partes de la web y funcionar de forma óptima a nivel de conversiones.
Por lo tanto, situarlos en el header es algo arriesgado y solo está justificado en tipo de diseños muy concretos.
Recuerda usar solo los elementos que sean imprescindibles para tu público, no satures de información a la persona que visita tu web. Si lo haces, se llevará una mala imagen, y darle la vuelta a una primera impresión negativa en Internet es muy complicado.
Cómo crear el header de tu web
Ahora que ya conoces cuáles son los elementos que puedes incluir en el header de tu web en función de tu diseño y estrategia, te cuento cómo llevarlo a la práctica, para lo cual tienes varias opciones.
- Opciones de tu tema: te recomiendo leer la documentación de tu plantilla WordPress para consultar todas las opciones que incluye a la hora de crear el header de tu web: menús, buscador, redes sociales, diseño, organización, etc.
- Widgets de WordPress: la segunda manera de crear una cabecera para tu web es utilizar los widgets nativos de WordPress. La mayoría de temas permiten añadirlos en el header.
- Si utilizas Divi como plantilla, puedes crear una cabecera totalmente personalizada en tu web con el nuevo generador de temas que ha incluido Divi 4.0. En post post te explico todas las novedades de Divi 4 y aquí te dejo un tutorial con un ejemplo real.
Y aquí te dejo el post en el que te explico cómo crear una cabecera personalizada con el generador de temas de Divi.
Espero que todos estos consejos, recomendaciones y ejemplos te sirvan a la hora de crear el header de tu web, organizar sus elementos y conseguir tus objetivos 😉
