Si bien refiere a un concepto propio del diseño y la programación, todos los especialistas del marketing debemos saber qué es el header de una página web y sus funciones. Siempre que un usuario ingrese a una, va a ver el header o cabecera web, clave en el posicionamiento en buscadores.
Qué es el Header
Para responder en detalle hay que decir que es el término que refiere a la parte de arriba de un site. Es decir, los elementos que por lo general arman la cabecera de la web, como los elementos de la identidad corporativa, el menú, los íconos de redes, la info de contacto y un buscador. Como se trata de lo inicial que el usuario ve, hay que considerar 2 hechos:
- Que la persona pueda navegar con facilidad por este
- Que brinde data relevante acerca de la identidad de la marca para conectar al instante con las visitas.
Funciones del Header
Tal como sucede con el footer, este es un elemento que va una y otra vez en todas las pages de un site. ¿Cuáles son las funciones del Header?
La cabecera tiene, por su parte, la meta de transmitir al usuario quien está detrás de la marca. Y, además, brindar al usuario links de otras webs que igual son de importancia para simplificar la navegación allí.
Por esto, la cabecera de una web tiene dentro de sus funciones optimizar la usabilidad del site y dar una buena experiencia de usuario; sin dejar el lado estético, que tiene que ir junto con la identidad corporativa.
El header del sitio web cuenta con enorme trascendencia porque resulta la primera impresión que causa a quien visita, la que es una u otra según las metas de la page y de las necesidades del Buyer.
Elementos clave que debe tener
Existe un listado de los elementos clave que debe tener un Header porque resultan de relevancia para la audiencia. Los conocemos:
Menú central
En el él están las secciones principales del site, el caso de las categorías, FAQs, Sobre Nosotros, contacto, blog y más. Este tiene la opción de ser desplegable o de formato individual.
Botones de redes
Estos botones sociales deben ir siempre posibilitando la apertura de nueva pestaña para no correr el riesgo de sacar de la página.
Navegador interno
Si se cuenta con mucho content, un navegador interno colabora con los usuarios a ubicar los contents con facilidad. Algo por demás clave en las tiendas en línea.
Información de contacto
El correo de soporte, los números de atención o links a formulario de contacto son elementos que tienen que figurar en cualquier header. En especial, si se trata de web corporativa.
Botón de registro o inicio de sesión
Si cuentas con una web con suscriptores o que demanda registro alguno, colocar un botón en la sección de logueo es por demás positivo.
Menú de idiomas
Si cuentas con varios idiomas a disposición en la web, esta alternativa tiene que estar adelante siempre, por eso ubica un link o botón en el espacio.
Llamada a la acción
Es posible hacer buen uso de la cabecera para ubicar un CTA estratégico. Como puede ser un demo o prueba sin costo.
Importancia en la experiencia de usuario
La importancia es grande porque lo motiva a continuar consumiendo contents y fidelizar, a la vez que le permites a Google comprender cómo opera la web y qué secciones o contenidos son de más categoría.
Asimismo, las optimizaciones que debas hacer a la cabecera son permanentes, o sea, no es preciso cambiarlas seguido, a no ser que cuentes con un motivo importante, como puede ser la creación de una categoría.
Consejos para optimizar la cabecera
Veamos en lo que sigue algunos consejos para optimizar el header que pueden aplicarse a casi todas las cuestiones y colaboran en añadirle más valor al header y que suba su efectividad y valor.
En esta acción, únicamente se coloca una info simple, específica y corta. Abarca el logo, de ser preciso, un eslogan si deseas aclarar o solo algo abstracto.
Siempre tiene que ir a tono con la página y todas las urls.
El Header tiene que ser un elemento que colabore con el usuario en su navegación en la web, no que lo enrede.
Se puede incluir un CTA o llamada a la acción central en el header, como un suscríbete, realiza tu pedido o reserva hoy.
Trata de que el header no sea muy elevado. En la parte de la web que vemos previo a hacer scroll, siempre debe ir una data o CTA esencial.
Tipos de Header
Cabecera de un blog
En un blog, lo central es simplificar la navegación entre los diversos contents. Así, vemos elementos como: las categorías del blog, un buscador para hallar artículos o temas de interés y un sobre nosotros en el que se menciona quién es la empresa detrás.
Asimismo, si trata del habitual blog de marca personal, es igual típico dar con enlaces a servicios o pages de ventas.
Header de una web empresa
Cuando hablamos de la cabecera de una web corporativa vemos elementos como: inicio, sobre nosotros, servicios con submenús, blog, portafolio o casos de éxito, e-commerce de haberlo, y contacto.
Asimismo, en este tipo de páginas es común hallar lo que se denomina Header Top, un espacio por arriba del Header en el que se ponen elementos como call to action o data como email o teléfono, entre más.
Header de una tienda en línea
En la situación de un e-commerce es fundamental la zona del logo y la atención a los tonos, porque buscamos destacar más el branding o imagen de marca y también hallaremos elementos como: categorías de productos, destacados, mi cuenta y descuentos.
También, en el Header Top es frecuente ver cierto tipo de código de descuento o cupón para optimizar el ida y vuelta.
Ejemplo de un Header
Encabezado de una línea con logo centrado a la izquierda
Uno de los tipos de cabecera de site más habitual es el de una única línea con un logo que se alinea de lado izquierdo. El motivo de su utilización es su simplicidad de navegación, algo que siempre debe prevalecer en una web.
El logo alineado a la izquierda captura la atención del usuario rápidamente porque se ubica justo en el lugar que casi todos comenzamos a leer. Es efectivo, directo y, casi siempre, lo primero que ve. Asimismo, el encabezado deja lugar para links o CTA en igual línea, lo que simplifica la navegación de las visitas.
Cómo se escribe el Header en HTML
Aquí, el encabezado se escribe con la etiqueta ‹header› ‹/header›.
Entre sus particularidades, el tag header se usa para especificar el encabezado o cabecera de una web.
Es posible establecer más de una en la misma page
Puede llevar un logo, formulario de search, nombre de autor y demás componentes.
Se coloca en la parte de arriba de la página
Va repetido en todas las pages que integran la web.
El final de cabecera es un componente que todas las webs tienen, a partir de este artículo y tomando en cuenta todo lo detallado, ya sabes lo que es un header y cómo potenciarlo para más provecho. En Imactions contamos con expertos en diseño web, si deseas crear u optimizar tu página, podés contactarnos o ver nuestro trabajo en la web, ¡Esperamos te haya servido!
