Optimiser le header d'un site : logo & menu de navigation

L'en-tête (header en anglais)  désigne le haut d’une page sur un site web. 

Il joue un rôle clé dans la conception d'un site Web. 

Présent sur toutes les pages de votre site web, il doit être clair et pertinent. Primordial, il ne peut être négligé de peur de voir fuir le visiteur.

Selon Google, il ne faut que 50 ms pour se faire une opinion sur un site Web et certaines opinions se développent en moins de 17ms. 

La découverte de votre entreprise par les consommateurs commence par le header avec les informations disponibles. 

Vous serez :

1. De quoi se compose un header ? 
2. Les 4 erreurs les plus courantes d'un header
3. Quels sont les éléments d'un bon header ? 
4. Les éléments complémentaires pour un header

Pour apprendre à concevoir un en-tête de site Web qui fonctionne et quels éléments il doit inclure, lisez la suite, il y aura des exemples.

De quoi se compose un header ?

Le header est en quelque sorte, la carte de votre site internet, car il va réunir l’ensemble des informations qui peuvent se trouver sur votre site web. Il va permettre de diriger vos visiteurs sur votre site web. 

Chacun à sa propre définition du header, certains englobent dans le header tous les éléments que nous voyons au-dessus de la ligne de flottaison, d’autres c’est uniquement le header qui englobe  :

• le logo de la compagnie
• le menu de navigation 
  

Nous faisons partie de la deuxième catégorie 😎

Nous verrons plus bas que nous pouvons également ajouter d’autres éléments qui seront utiles en fonction du secteur d'activité de l'entreprise. 

La construction d'un header peut paraître simple mais des règles sont à respecter afin qu'il soit optimal. 

Lors de nos différents audits nous avons constaté certaines erreurs qui reviennent souvent et peuvent être facilement évitées.

Les 4 erreurs les plus courantes d’un header  

Pour illustrer nos propos, nous allons nous baser sur l'exemple d'un cabinet d'experts comptable.

1. Le nombre d’éléments dans le menu navigation. 
   

L’une des erreurs les plus communes est le nombre de menus dans la navbar. 
On se dit que plus nous en mettons plus facile la navigation sera pour les utilisateurs. 
Mais c’est le contraire :  

• Côté expérience utilisateur, une barre de navigation courte est plus facile et plus rapide pour les gens à lire. S'ils doivent parcourir de nombreuses options, ils sont plus susceptibles de quitter votre site Web.
• Côté SEO : Un menu court et clair permet aux moteurs de recherche de naviguer, de comprendre et d'indexer plus facilement votre site.
  

Apparemment, la mémoire à court terme ne peut retenir en moyenne que sept éléments.
Avec moins d'éléments de menu, les yeux de vos visiteurs sont moins susceptibles de parcourir les éléments importants. Chaque fois que vous supprimez un élément de menu, les éléments restants deviennent plus visibles.
Prenons cabinet d'expert comptable avec ces 9 éléments dans le menu de navigation. 
C'est beaucoup trop. Nous pouvons facilement enlever trois éléments et ainsi réduire le nombre d'éléments a six. 

• Supprimer l'élément "Accueil".
  Il n'est pas nécessaire de créer un élément "Accueil" il suffit de lier la page d'Accueil au logo.
• Supprimer les deux éléments "Localisation Avignon" et "Localisation Carpentras"
  Ces informations peuvent être intégrer dans le corps du site web afin d'être présente sur toutes les pages. 
  

2. Mauvais positionnement du logo

Sur pas mal de site le logo est au centre du menu de navigation voire pire des fois il n’existe pas. 

Saviez-vous qu’il est six fois plus difficile pour les visiteurs de trouver votre page d'accueil lorsque le logo n'est pas à gauche. 

Alors mettons le logo à gauche 😄

3. Un mauvais contraste de couleurs 
   

Le menu de navigation doit être claire et visible. Les couleurs de la police choisie et le background doivent avoir un excellent contraste. 

Pour ce cabinet de comptable, le menu de navigation est difficilement lisible. L'écriture en vert clair sur du vert pastel ne fonctionne pas. 

Il ne faut pas avoir à plisser les yeux pour lire le menu.

4. Non responsive

Enfin l'erreur la plus commune est que le site est non responsive et donc le menu de navigation également. 
Les prospects vont devoir zoomer sur le menu pour lire les différents éléments de navigation. 

Ces quatre erreurs sont les plus communes et peuvent être facilement évitées. 
Nous allons vous donner les astuces pour avoir un super en-tête et ne plus faire d'erreurs. 

Quels sont les éléments d’un bon header ? 

Donc un header englobe un logo, un menu de navigation et quelques éléments complémentaires. 

Votre logo 

Comme nous l’avons vu dans les erreurs les plus communes, certaines portent sur le logo. Que ce soit l’absence de logo, l’emplacement ou encore la qualité du logo de nombreuses erreurs peuvent être évitées. 

Rappelons qu’un logo a trois intérêts majeurs :

• Rappeler à l’internaute sur quel site il se trouve. 
• Faciliter la navigation vers la page d’accueil. Cliquer sur le logo permettant de plus en plus souvent d’aller sur cette dernière.
• Assurer une présence de la marque ou de l’entreprise sur toutes les pages du site. 
  

Source : Travaux menés par le Nielsen Norman Group (NNGroup), 

Il est donc essentiel d’avoir son logo sur son site web mais également qu’il soit bien placé. 

En pratique, le logo est en haut à gauche. C’est un usage commun que la plupart des personnes utilisent. 

L’étude réalisée par le cabinet révèle qu’avec un logo placé au centre, 76 % des internautes ont réussi à se rendre sur la page d’accueil en un clic. Avec un logo placé à gauche, ce même taux a atteint 96 %.

Cela signifie qu’il ne faut pas perturber les habitudes par risque de perdre de potentiels prospects. 

Votre menu de navigation

Une navigation concise est importante pour le SEO. Plus votre navigation est concise, plus l'autorité de la page d'accueil sera transférée aux pages intérieures, ce qui les rendra plus susceptibles d'être classées et donc d’augmenter votre référencement. 

Il y a trois choses à respecter : 

• Simplicité : ne pas mettre plus de 5 éléments dans le menu.
• Clarté : chaque élément doit être clair, mettre "contacter" au lieu de "nous contacter".
• Logique : le menu livraison envoi au menu livraison !

La navigation permet de savoir où nous sommes sur le site. Cela donne du contexte.

Pour illustrer nos propos, nous allons prendre la page fictive d’un organisme de formation qui s’appelle Cosmo.  

1. Less is more : Limiter le nombre d'éléments dans le menu de navigation
   

Comme nous le disions dans les erreurs, il faut limiter au maximum les éléments dans la barre de navigation. 

Dans notre premier exemple, nous avons 7 éléments, nous sommes dans la moyenne mais nous pouvons encore plus l’optimiser. 

Avec moins d'éléments de menu, les yeux de vos visiteurs sont moins susceptibles de parcourir les éléments importants. Chaque fois que vous supprimez un élément de menu, les éléments restants deviennent plus visibles.

Il faut se mettre au défi de limiter votre navigation à cinq éléments.

Sans échanger avec le client, nous pouvons supprimer deux éléments: 

• "Accueil"

A la place ajouter votre logo en haut de chaque page et lié le à la page d’Accueil. 
Ce sera très intuitif pour la plupart de vos utilisateurs, car il respecte les conventions de conception Web.

• “Venir”  

Déjà ce n’est pas très clair mais surtout il n’est pas nécessaire d’avoir une page spécifique. Ils peuvent facilement être intégrés dans le contenu, même sur la page d’accueil par exemple. 

‍

2. Privilégiez des noms courts

Gardez les mots que vous utilisez dans votre menu pertinents, précis et courts. De cette façon, les humains et les moteurs de recherche les comprendront facilement. 

Cela peut ne pas fonctionner pour tous les corps de métier, mais si votre barre de navigation dépasse légèrement la limite, quelques mots simples peuvent vous aider. 

Par exemple, il vaut mieux dire « Contact » plutôt que « Contactez-nous », à la fois parce que c'est plus court et que c'est le langage standard que les gens recherchent lorsqu'ils sont sur la page. 

‍

3. Un menu de navigation visible
   

Qu’il soit en haut, à gauche ou à droite, le menu de navigation doit être facilement claire et facilement identifiable : 

• L’écriture doit être claire et grande. 
• La couleur et le contraste doivent être bien choisis.  

Imaginez que Cosmo nous mettions un rose clair sur du blanc avec la font Great Vibes, nous sommes d'accord que c'est à peine visible. 

‍

Ces deux paramètres sont d’autant plus importants qu'aujourd'hui la plupart des personnes consultent les sites sur leur mobile. 

4. Un menu figé "sticky"
   

Les barres de navigation figés ou en d'autres termes les « en-têtes collants », signifient que la navigation vous suit dans la page pendant que vous faites défiler. 

C'est adapté pour n’importe quel type de site : 

• Sites e-commerce — le panier est toujours devant l'utilisateur.
• Sites vitrine - le numéro de téléphone ou un CTA sont constamment affichés.
  

Les en-têtes fixes améliorent l'expérience client, en gardant les utilisateurs orientés et en leur donnant plus de contrôle. 

‍

5. Utiliser un en-tête transparent 
   

Le header transparent est nécessaire et très utile pour les sites avec de super images en fond. 

L’idée est de ne pas gâcher la photo ou l’illustration avec un menu de navigation blanc ou de couleur.

‍

6. Guider le client
   

Le menu de navigation doit guider le client dans sa découverte du site. 

Il suffit de mettre en lumière les éléments sur la barre de navigation lorsque nous passons la souris dessus comme en changeant la couleur par exemple. 

7. Adapté mobile 
   

L'en-tête doit être correctement affiché non seulement sur la version de bureau du site Web, mais également sur la version mobile. 

Il doit donc être réactif et capable de bien s'adapter à n'importe quel appareil mobile.
‍

‍

Les éléments complémentaires 

En plus des éléments que nous avons listés vous pouvez ajouter des éléments supplémentaires. 

Il faut être attentif avec ces éléments pour ne pas surcharger le header et avoir l’effet inverse. Il faut choisir les éléments les plus importants que vous souhaitez mettre en avant. 

Mais nous pouvons ajouter le numéro de téléphone, les réseaux sociaux ou encore la barre de recherche.

1. Une barre de recherche 
   

Une barre de recherche peut être utile pour les sites avec beaucoup de contenus mais elle est surtout très utile pour un site e-commerce. 

Si vous avez être TPE avec un site vitrine il y a très peu de chances pour qu'elle soit pertinente. 

2. Informations de contact, numéro de téléphone 
   

Une autre chose qui peut être ajoutée est le numéro de téléphone. 

Cela est utile pour les restaurants lorsque nous voulons appeler sans avoir à remplir un formulaire de réservation. 

Attention: il faut bien que le numéro soit "cliquable", c'est-à-dire qu'il appelle directement l’entreprise en question. 

3. Réseaux sociaux 
   

Les réseaux sociaux sont en général dans le footer mais vous pouvez aussi les ajouter dans le header. 

Il est d’usage d’afficher les boutons de profils en haut à droite, soit à la suite de la navigation, soit dans une barre juste au-dessus. 

4. Le panier d’achat pour les sites e-commerce 
   

L’un des éléments indispensable pour un site e-commerce est l'icône shopping. 

Vous avez désormais toutes les clés en main pour créer un header optimal. Une construction bien réfléchie vous permettra d'offrir un excellent parcours client à vos visiteurs, mais aussi d'améliorer votre référencement.