Aparte del contenido principal de un sitio web, estos incluyen dos elementos fundamentales, header y footer, que ayudan a los visitantes a navegar a través de nuestras páginas u obtener información adicional necesaria.
El header es un elemento de vital importancia en nuestro sitio web, es lo primero que ve un cliente al entrar en nuestra web, muestra a los usuarios en qué lugar se encuentran y les permite moverse a través de las diferentes páginas.
Aunque el termino header se trata de un término de diseño web, todos los profesionales de marketing deben familiarizarse con él, ya que es un elemento que influye en el posicionamiento. En este artículo vamos a explicar cómo diseñar correctamente un header para que sirva de guía al usuario y pueda llegar al lugar deseado en un solo clic.
¿Qué es el Header?
El termino header (cabecera), es la parte superior de la página web y qué, como ocurre con el footer, está presente en todas las páginas que componen una web para dotarlas de continuidad y coherencia.
Por lo general, el header está formado por una serie de elementos comunes como el logo de la empresa, nombre, imagen o imágenes representativas y, en algunos casos, los datos de contacto. Al ser lo primero que usuario visualiza al entrar en el sitio web, se debe cuidar dos aspectos: que permita a los usuarios una fácil navegación a través de él, y ofrecer información relevante sobre tu identidad para conectar lo antes posible con tus visitantes.
Los elementos a continuación son lo que habitualmente forman la cabecera de una web. Sin embargo, son opcionales:
Elementos de la identidad corporativa: en el header podemos encontrar elementos como el logo, el eslogan y el nombre de la empresa.
Menú: aunque hablemos del menú como elemento opcional, es indudable que el menú debe encontrarse en la cabecera ya que permite al usuario navegar por la web y encontrar lo que busca. En este apartado deben encontrarse todas las secciones de una web.
Iconos de las redes sociales: los iconos de las redes sociales pueden situarse al principio de la página o al final, en el footer. Esto es decisión de la empresa y del desarrollador web.
Información de contacto: puedes introducir el teléfono o correo electrónico de la empresa para que el usuario consiga el contacto rápidamente.
Buscador: los buscadores permiten al usuario introducir palabras claves relacionadas con el negocio para encontrar de manera más rápida lo que busquen dentro de tu sitio web.
Breve descripción: aunque no encontremos este elemento de manera habitual, algunas empresas añaden una breve descripción del negocio en la cabecera para informar al usuario de donde se encuentran o a qué se dedica la empresa.
Como podemos observar, el header presenta la información básica para identificar una empresa o persona detrás de la compañía, y nos invita a descubrir y navegar por el contenido de la página web.
Funciones del header
El header es un elemento que se repite en todas las páginas de un sitio web. Tiene, por un lado, la finalidad de mostrar al usuario quien se encuentra detrás de la marca a través de elementos como el logo, las descripciones breves, imágenes… Por otra parte, ofrece al visitante enlaces de otra web para facilitarle la navegación.
Con esto, podemos deducir que la cabecera de un sitio web tiene entre sus funciones mejorar el manejo a través de la web y ofrecer una buena experiencia al usuario, además de poseer una función estética que deberá ir en línea con su identidad corporativa.
Tipos de header según el sitio web
Podemos encontrar diferentes tipos de header en función del tipo de web. Vamos a mostrar algunos de ellos:
Cabecera o header para un blog
Lo más habitual en la cabecera de un blog será encontrarnos con secciones como:
- Categorías
- Páginas de acerca o sobre mí
- Página de contacto
- Buscar para encontrar artículos
Si el blog es de marca personal:
- Sección de servicios
- Sección portfolio
Si hablamos de un blog magazine:
- Banners publicitarios
- Enlace al archivo de autores
En el caso de las webs para blogs, los logos suelen ser más tipográficos ya que no es tan habitual que exista una marca comercial tras ellos.
Cabecera o header para una web corporativa
En una web corporativa el header suele ser un poco más complejo. Lo más habitual será encontrar el logotipo bien destacado, ya que nuestro mayor interés es que se relacione el contenido con la marca.
Las secciones más habituales son las siguientes:
- Página de inicio o portada web
- Sobre nosotros (para hablar acerca de la compañía)
- Página de servicios
- Portfolio
- Tienda si tenemos productos para vender online
- Blog
- Página de contacto
Además, las webs corporativas pueden agregar una zona superior llamada header top donde se coloca información o llamadas a la acción como:
- Teléfono de empresa y horarios de atención al cliente.
- Correo electrónico de contacto
- Redes sociales
- Acceso a la intranet
Cabecera o header para tienda online
Las tiendas online suelen tener las cabeceras más complejas e interesantes de todos los tipos de webs. A parte del branding o logo de la empresa, encontramos una sección de mayor importancia: Categorías de productos.
De esta forma, el header para una tienda online quedaría dispuesto de la siguiente forma:
- Inicio
- Categoría de productos
- Sobre nosotros
- Mi cuenta
- Contacto
En algunas ocasiones podemos encontrar dos headers top con banners de ofertas e información de atención al cliente para reforzar la confianza de los usuarios.
Diseñar un header
Cuando vayas a crear tu header, debes tener en cuenta algunos aspectos que te ayudarán a crear una cabecera con mayor atractivo:
No la ubiques demasiado arriba: antes de hacer scroll (desplazamiento o deslizamiento) solemos encontrar la información más importante de la web. Cosas como la propuesta de valor o la llamada a la acción.
Si nos pasamos de altura, es probable que tengas menos espacio para introducir estos dos últimos elementos. Además, el Branding podría quedar oculto.
Dejar fijo el header cuando se hace scroll: si quieres que la cabecera web se quede fija y acompañe al usuario cuando navega a través de la web, desde hacer uso de un header fixed o sticky header.
De esta forma el Branding y el menú de navegación estarán presente para el usuario por toda la página.
Tips para diseñar el header
Por último, para concluir el artículo, te vamos a dejar algunos consejos para diseñar un header que consiga satisfacer a tus clientes:
Resalta los elementos más importantes: ¿qué acciones quieres que realicen los visitantes en tu sitio web?
- Links de navegación
- Marca de la empresa
- Llamada a la acción (Reservar, donar, contactar…)
- Información de contacto
- Iconos de redes sociales
- Eslogan
- Conmutador de idiomas
- Carrito de compra
Utilizar fuentes claras y legibles: el texto debe ser fácil de leerm utiliza palabras cortas y fuentes claras con tamaño coherente.
Headers transparentes: prueba a poner un header transparente cuando utilices imágenes impactantes de portada. De esta forma, las imágenes quedan expuestas en mayor medida mientras que se muestran los enlaces importantes.
Encabezado fijo: permite que el usuario puede desplazarse a otra página desde cualquier punto y mantén presente el logo de tu empresa.
Personalidad: Utiliza elementos de diseño que muestren la personalidad de la empresa.
Menús ampliables: ideales para sitios web con muchas imágenes como portfolios. Este tipo de headers llevan bastante tiempo apareciendo en sitios adaptados a móviles.
Actualiza el encabezado: los headers son muy flexibles y tienen un gran impacto en la visualización del sitio web. Cambia el diseño cada cierto tiempo para mantener un aspecto fresco.