Un header, de l’anglais “head” se traduisant par “tête”, est par définition une bande horizontale que l’on retrouve en haut de chaque page web.

Bien que nous ne prêtons pas attention à cet en-tête pour les sites que l’on fréquente régulièrement, le header a cependant une importance majeure pour les nouveaux utilisateurs de votre site.

Ici encadré en rouge :

Notre œil ayant pour habitude de parcourir les documents de gauche à droite et de haut en bas, le header devient donc le premier élément auquel on prête attention, la première “image” que l’on a de votre site. Il est bon de rappeler que l’utilisateur va définir en quelques secondes seulement si le site auquel il vient d’accéder lui sera utile et pertinent pour sa recherche. La visite moyenne d’un site est en effet de moins d’une minute environ, il convient donc de convaincre dès les premiers fragments d’instants.

Le header devient alors un véritable outil de persuasion pour donner envie au lecteur d’aller plus loin et le conforter dans le fait qu’il trouvera certainement la réponse à sa problématique dans le contenu de votre site. Même s’il n’existe pas de règle concernant sa composition, des éléments semblent cependant indispensables pour un en-tête pertinent.

Parmi les éléments qu’il est préférable de faire apparaître :

• votre logo, en haut à gauche de préférence pour que ce soit le premier élément sur lequel l’œil se pose, l’utilisateur sait ainsi qu’il est au bon endroit
• un fond reprenant votre identité visuelle pour être identifiable et en cohérence avec votre stratégie graphique
• un menu et ses catégories pour faciliter la navigation et permettre au visiteur de comprendre l’organisation du site et se l’approprier

Bien évidemment votre activité ou votre stratégie peuvent influencer la composition de votre header et d’autres composants peuvent venir compléter cette barre :

• votre slogan pour affirmer votre identité une nouvelle fois
• vos coordonnées de contact car c’est l’endroit où les clients potentiels iront chercher ces informations en premier lieu
• vos réseaux sociaux
• le choix des langues s’il s’agit d’un site internationale
• une barre de recherche si votre site contient beaucoup de contenu
• un bouton d’appel à l’action (“call to action” – CTA) du type inscription à la newsletter ou renvoi à un formulaire de contact par exemple
• un accès membre ou une zone de connexion pour les sites marchands notamment
• un panier pour les sites marchands toujours

Il est fortement déconseillé de mettre plus de 5 éléments dans votre header pour ne pas le surcharger, ce qui peut effrayer ou perdre le visiteur. L’objectif principal est de donner envie à l’utilisateur de parcourir plus amplement votre site et de lui permettre d’identifier votre cœur de métier ou votre positionnement. Pour épurer cette en-tête vous pouvez par exemple opter pour le menu “hamburger” qui sera moins imposant qu’un menu classique. Il faut, quoiqu’il en soit, maintenir une cohérence visuelle avec le reste des pages web (wording, couleurs…), pour des raisons esthétiques évidentes mais également pour consolider votre identité visuelle.

Enfin, en terme d’expérience utilisateur, n’omettez pas de faire apparaître votre header en haut de toutes les pages de votre site et éventuellement de le fixer pour suivre le défilement de celles-ci. Dans ce cas, il peut être adapté et contenir uniquement quelques informations clés comme le menu pour aider la navigation toujours, mais également et obligatoirement votre logo qui renverra à la page d’accueil si vous cliquez dessus.

Le header de votre site web est la première chose qui sera prise en considération par vos visiteurs. Il s’agit donc de soigner son esthétisme tout autant que son contenu pour leur permettre d’identifier votre activité, les convaincre qu’ils sont sur le site adéquat et ainsi peut-être les transformer en lead qualifiés.