Booster l'entête de votre site

Je vous propose une série d'articles pour améliorer votre site.

Un site efficace, est un site qui additionne des détails positifs pour simplifier l'expérience de vos internautes.

Abordons aujourd'hui, l'une des zones importantes qui composent un site : son entête !

Elle est appelée Header et contient souvent votre logo et votre menu de navigation.

Surveillez la hauteur de votre entête

En effet, gardez à l'esprit que l'entête de votre site, est l'un des premiers éléments de découverte de votre site. C'est aussi un élément très fort en terme de réassurance.

Mais ce n'est pas parce que cette zone est importante, qu'elle doit prendre une hauteur disproportionnée. J'ai vu des sites avec plus de 50% de la hauteur dédiée au logo et au menu de navigation... OK votre logo est magnifique, mais... ce n'est pas que ça votre site.

L'internaute doit voir non seulement votre entête, découvrir votre bannière et votre premier message, voir plus si cela est possible (en version sur ordinateur, sur mobile, la hauteur est plus limitée).

La règle à retenir :

• sur un ordinateur, votre entête doit mesurer dans les 10-30% maximum de la hauteur d'écran sans défilement.
• sur un mobile, le menu se transforme souvent en menu "burger" les 3 traits que l'on voient un peu partout. Et votre logo se réduit pour garder une zone d'entête dans la même proportion que sur un ordinateur 10-30% maximum de la hauteur d'écran sans défilement..

Pourquoi ce critère ?

Si votre menu de navigation est complexe (on en parle un peu plus bas), votre logo illisible, que cette zone prend la moitié de l'écran...Placez-vous en tant qu'internaute vous perdez du temps.

Pire, cela demande un effort "inconscient" de faire défiler la page... et donc il y a de fortes chances que vous quittiez le site, alors que vous n'êtes que sur une zone de découverte.

Le logo

Un élément important pour mémoriser l'identité du site.

Lorsque vous demandez la création d'un logo, il est indispensable qu'il soit vectoriel, traduisez par le fait qu'il puisse s'adapter à un affichage en 4 x 3, tout en restant lisible sur une carte de visite.

Et pire, depuis l'avènement des mobiles, il doit aussi être visible sur un petit écran.

Un logo, peut contenir des lettres, être associé à des formes, ou n'être qu'une forme (très pratique sur mobile).

Depuis quelques temps, je vois des sites qui n'affichent pas leur logo en version mobile (quel dommage ! 😱). C'est l'identité de votre site, un élément de mémorisation de votre société.

La tendance actuelle est le logo responsive, voir adaptatif, c'est à dire qu'il est différent en version mobile.

Les conventions web du logo

La première des conventions, est qu'il est "cliquable", et permet de revenir à la page d'accueil.

C'est une habitude courante, et lorsqu'elle manque, et qu'il n'y a pas de liens "Accueil" l'internaute est tenté d'utiliser la touche Précédente de son navigateur, et risque de partir.

Pour le placement d'un logo, c'est souvent sur la gauche, et parfois au centre pour séparer le menu de navigation. Il est rarement à droite, ne serait-ce que pour respecter le sens de lecture habituel.

Donc soignez votre logo, rendez-le lisible sur mobile, vous ferez la différence !

Et ne soyez pas frustré, si vous souhaitez afficher votre logo en grande taille, pourquoi ne pas créer un article, qui l'affiche, explique sa conception, montre ses détails, il y a souvent de belles histoires derrière un logo. Et cela renforcera votre storytelling.

Passons maintenant au menu de navigation.

Le menu de navigation

Une partie difficile à mettre en place sur un site, imaginez tout ce qu'elle doit contenir :

• des liens (accueil, votre offre, a propos, contact...)
• des icones pour vos réseaux sociaux
• parfois l'accès au moteur de recherche

Dans le cas d'un site e-commerce, il faut afficher en plus :

• l'icone du panier
• l'icone de l'espace client

Le rôle du menu de navigation

• fournir à l'internaute une aide pour faciliter la navigation sur votre site
• rassurer l'internaute sur ses possibilités d'action sur le site (recherche, contact, connexion, etc)
• servir au référencement via le choix des mots-clés pour les rubriques du menu

Comment réussir son menu de navigation ?

C'est le message que je me répète à chaque fois que j'aborde un menu pour l'un de nos clients.

Evitez un jargon qui ne parle qu'à vous, imprégnez-vous de simplicité en choisissant vos mots.

Limitez le nombre d'entrées de votre menu, pourquoi ?

Tout d'abord, parce que votre menu sera vu et utilisé sur des écrans de différentes tailles, pensez à l'ordinateur, n'oubliez pas la tablette et gardez le focus sur le mobile.

Puis parce que nous possédons tous un élément très pratique, mais limité dans sa capacité... La mémoire immédiate.

Exemple : lorsque vous naviguez sur un site, et que vous découvrez justement le menu de navigation. Il arrive parfois qu'en survolant la deuxième entrée du menu que vous reveniez spontanément sur le premier... Devinez qui est en cause... Votre mémoire immédiate, qui a été saturée par trop d'informations.

Cette démarche fait partie d'une "règle", Le nombre de Miller : 7 qui correspondrait approximativement au nombre maximal d’éléments que l'esprit humain est capable de traiter. Les expériences rapportées par Miller (1956) concernent par exemple le nombre de stimuli (sons, objets visuels) que nous sommes capable de mémoriser à court-terme. Il ne s'agit pas d'une règle absolue, retenez juste qu'il faut limiter le nombre d'items d'un menu.

Maintenant que nous avons défini notre menu, ce qu'il peut contenir, et donné une règle sur le nombre d'items, passons à son utilisation.

Optez pour un menu Sticky

Bien plus qu'un simple effet de mode, cette démarche ergonomique est à appliquer sur votre site. Encore un détail de plus sur la facilité d'utilisation de votre site.

Un menu sticky, est un menu qui reste fixe, lorsque vous défilez sur une page. Vous avez forcement en tête un site qui l'utilise.

Il est bien évidemment possible de s'en passer, pour gagner en hauteur. Par exemple dans le cas ou vous avez un autre menu sticky en bas de page.

Pour optimiser votre navigation dans cette situation, il est conseillé de faciliter la navigation, que ce soit en plaçant de quoi remonter sur la page. Et en indiquant des liens dans les différentes zones.

Conclusion

Nous avons évoqué l'entête de votre site, retenez les points suivants :

• une zone d'entête limitée en hauteur pour découvrir les autres zones de votre site
• un logo qui fait la différence sur mobile
• un menu de navigation simple et favorisant votre référencement

Nous venons d'aborder la première zone d'un site.

La prochaine sera consacrée au pied de page.

J'espère que cet article vous aidera à booster l'efficacité de votre site.

Si vous avez besoin d'un conseil, d'accompagnement pour optimiser l'expérience de vos internautes, contactez- moi via Linkedin 😉