Free Press

Un en-tête de site web est la section supérieure de la page web. À l’époque, les gens comprenaient les en-têtes comme des bandes étroites dans les parties supérieures des sites Web qui contenaient un logo, un appel à l’action et des informations de contact. Mais dans le design moderne, tout l’espace au-dessus du pli de la page d’accueil est considéré comme un en-tête.

Etant la partie stratégique de la page que les gens voient dans les premières secondes de chargement d’un site Web, un en-tête agit comme une sorte d’invitation. Il doit fournir des informations de base sur un site afin que les utilisateurs puissent comprendre ce qu’il offre en quelques secondes.

Certains concepteurs font des en-têtes séparés pour les différentes sections du site. Par exemple, vous pouvez faire un grand en-tête pour une page d’accueil et laisser une petite bande pour les autres pages. Mais restez cohérent. Le design de l’en-tête de la page intérieure doit être une version abrégée de l’en-tête de la page principale. Il s’agit d’une bonne pratique de conception de site Web.

Que comprend un en-tête de site Web ?

La tâche de l’en-tête est de donner aux utilisateurs des réponses aux questions de base : quelle marque est représentée, quels biens et services sont offerts, comment entrer en contact avec les employés de l’entreprise, y a-t-il des offres en cours, et ainsi de suite.

À part cela, il représente également la qualité et même l’identité d’un site web. Si l’en-tête suscite une bonne réaction émotionnelle et que le spectateur a l’impression d’avoir quelque chose de valeur, alors vous avez passé le test initial.

Les principaux éléments d’un en-tête de site Web sont généralement :

• logo ou identifiant de marque
• appel à l’action
• texte ou titre
• éléments de navigation
• recherche.

Vous n’êtes pas obligé de tous les ajouter en même temps. Il est nécessaire de trouver un équilibre entre l’abondance d’informations et leur agencement harmonieux. N’utilisez que les données dont vous avez besoin, surcharger un en-tête ne s’avérerait pas bénéfique, aussi importants que puissent paraître tous les liens.

Laisser l’en-tête trop vide n’est pas non plus une bonne idée. Un utilisateur qui ne peut pas comprendre votre interface en quelques secondes va très probablement partir et ne pas revenir. Un mauvais en-tête peut repousser les visiteurs vers un autre site au contenu de moindre qualité.

Dans les conceptions d’en-têtes minimalistes, seuls les liens vers les principales sections du site Web et le logo de l’entreprise sont présentés. Cette technique est particulièrement utile lors de la conception de pages d’atterrissage.

Meilleures pratiques de conception d’en-tête de site web

Rien ne limite votre créativité lorsqu’il s’agit de concevoir la section d’en-tête. L’en-tête du site est une zone ouverte à un large champ de décisions de conception créatives, qui doivent être mémorables, concises et utiles.

Passons en revue les principaux points.

Taille de l’en-tête

Il n’y a pas de réponse définitive à la question de savoir quelle taille doit avoir une image d’en-tête de site Web. Certaines ressources tentent de fournir des ensembles de chiffres précis, mais aujourd’hui, l’un des aspects les plus difficiles de la construction d’un site Web est de garantir l’efficacité de chaque taille d’écran. Et même si deux écrans sont de la même taille, la résolution peut être différente, donc les utilisateurs ne verront pas la même chose.

Donc ne faites pas de fixation sur le concept de pixel exact, mieux vaut suivre des règles simples de bon sens.

L’en-tête doit être d’une hauteur telle qu’elle n’interfère pas avec la perception du contenu. Pour les ressources informationnelles, un petit en-tête serait un excellent choix, tandis que pour les atterrissages, l’en-tête peut être plus grand.

Dans le cas d’en-têtes volumineux, il est préférable de laisser un peu d’espace sous le pli pour qu’un utilisateur ait un aperçu de ce qui va suivre sur la page et commence à faire défiler.

Hiérarchie visuelle

Le groupe Nielsen Norman a formulé sa théorie sur le modèle de lecture en forme de F sur le web pour la première fois en 2006, et elle n’a pas perdu de sa pertinence à ce jour.

Une personne qui se retrouve sur un nouveau site peu familier commence toujours son parcours visuel à partir du coin supérieur gauche de l’écran. Et si elle n’y trouve pas les informations attendues, alors la page sera automatiquement perçue comme délicate et non standard, nécessitant trop d’efforts pour être comprise.

Logo. Une autre étude menée par le NN/g a révélé que les utilisateurs se souviendraient beaucoup plus facilement des marques dont les logos sont placés à gauche par rapport au placement au centre ou dans la partie droite.

Si vous avez un logo de forme ronde, alors il est acceptable de le placer au centre de l’écran, bien que son efficacité sera toujours plus faible par rapport à ceux placés à gauche.

Navigation. Faites bien attention à ne pas trop encombrer cette section d’un site web. Trop de liens submergent les visiteurs. Parfois, une refonte complète de la structure d’un site web peut être nécessaire pour libérer de l’espace pour les catégories les plus importantes.

Faites en sorte que les visiteurs comprennent facilement où ils sont, et comment trouver leur chemin plus loin. Utilisez des effets de survol pour guider les utilisateurs pendant leur navigation.

Appel à l’action. Mettez en œuvre les principes de la hiérarchie visuelle pour mettre naturellement en évidence un CTA.

En-tête fixe (collant)

Les barres de navigation persistantes, ou en d’autres termes les « en-têtes collants », signifient que la navigation vous suit sur la page pendant que vous la faites défiler. C’est maintenant une norme de conception Web.

Faites l’en-tête fixe si cela ne viole pas votre concept de conception globale. C’est une bonne idée pour les conceptions de bureau et mobiles :

• Sites Web de commerce électronique – le panier est toujours devant l’utilisateur.
• Sites Web de service – 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.

Le message transmis par un en-tête

Avant de concevoir un en-tête, tenez compte du style général du site web et de son objectif principal.

S’il s’agit d’un site web promotionnel destiné à la présentation d’un produit, la conception de l’en-tête peut contenir des liens vers les sections principales, combinés à une grande image de héros sur le premier écran puisque le but principal d’un tel site web est de présenter efficacement le produit. Dans le cas de sites de commerce électronique ou de sites commerciaux, la situation peut être différente. Un utilisateur a besoin de naviguer facilement, de connaître les dernières offres, de savoir comment contacter rapidement le responsable et de savoir où voir les commandes qu’il a déjà effectuées, donc dans ce cas, l’en-tête peut être plus concis laissant place à d’autres catégories.

Il y a plusieurs messages possibles qu’un en-tête peut transmettre :

• inciter un consommateur à faire quelque chose
• travailler sur la confiance
• encourager un visiteur à en savoir plus
• être amusant, etc.

Le choix dépend de l’objectif d’un site web particulier.

Des images pertinentes

L’image de l’en-tête doit transmettre directement des informations sur l’entreprise. Par exemple, s’il représente le service de livraison de nourriture, alors l’image pourrait représenter un coursier soigné avec des aliments esthétiquement attrayants. De manière générale, le visiteur, ayant vu votre site, doit avoir envie de vous acheter quelque chose.

Des photos de haute qualité. La photographie est un outil puissant pour les concepteurs de sites web. Elle peut raconter une histoire, évoquer une émotion et motiver vos visiteurs à scroller davantage. Pour les sites comportant des images puissamment frappantes, essayez de réaliser un en-tête transparent. Il affiche mieux les images, en conservant les liens principaux.

Des images coulissantes. Si vous avez plusieurs grandes photos représentant l’activité du site, allez-y ! Les utilisateurs peuvent faire défiler un ensemble d’images exquises en haute résolution.

Illustrations. Les images d’en-tête pour les sites Web doivent frapper la bonne corde sensible et établir une connexion personnelle. Mieux vaut qu’une image soit distincte et facilement reconnaissable même si elle est découpée dans l’en-tête du site Web. Vous pouvez y parvenir en capitalisant sur la tendance actuelle des illustrations.

Vidéo ou animation

Ne concentrez pas votre attention uniquement sur les images statiques.

Ajouter une vidéo fait partie des idées d’en-tête de site web les plus efficaces. Si possible, essayez d’ajouter un matériel vidéo thématique dans un header. De nombreux sites Web l’utilisent pour captiver le public tout en présentant leur entreprise ou leur produit de la meilleure façon possible.

Une autre façon de rendre votre design encore plus attrayant, vivant et mémorable est d’ajouter une animation. Cela peut faire des en-têtes de site web vraiment cool. Si vous recherchez une page web interactive qui engage les téléspectateurs, l’animation est une excellente alternative.

Un appel à l’action bien conçu

Lors de la conception d’un en-tête de site web, le concepteur y ajoute des éléments d’appel à l’action comme « se connecter », « signer », « entrer en contact », etc. Pour attirer l’attention de l’utilisateur afin qu’il aboutisse à l’action nécessaire, le bouton doit contenir une inscription compréhensible pour le client et être perceptible parmi les autres contenus.

Un placement d’appel à l’action à un endroit stratégiquement significatif est une occasion parfaite pour inciter les utilisateurs à agir dès le début, ce qui augmente votre taux de conversion. Certains CTA peuvent être utilisés pendant une période de temps pour promouvoir des offres spéciales, d’autres ont une présence à long terme.

Les meilleures polices pour les en-têtes de sites web

En premier lieu, le client perçoit les noms des sections et les informations fournies par l’entreprise : coordonnées, offres intéressantes. Par conséquent, vous devez choisir des polices claires et lisibles qui ne nuisent pas à la perception et pourraient être comprises au premier coup d’œil.

Pour les grands en-têtes de page d’accueil, vous pouvez utiliser quelques typographies audacieuses et des éléments imaginatifs pour attirer l’attention des utilisateurs, sinon, il est préférable de ne pas choisir des polices fantaisistes qui peuvent s’avérer difficiles à lire.

Création d’un en-tête simple

En gardant un en-tête bien défini et soigné, vos visiteurs auront l’impression que vous ne cherchez pas à les accabler avec vos offres. Un en-tête de site Web créatif peut avoir un aspect très simple.

Navigation cachée (menu hamburger)

C’est une solution de plus en plus utilisée pour la conception de sites Web. Le menu hamburger est une petite icône de trois bandes, qui affiche le menu complet lorsqu’on clique dessus. Cette technique est utilisée par les concepteurs lorsqu’ils doivent se concentrer sur l’écran principal.

Du point de vue de la convivialité du site, c’est une bonne option. Un tel menu est issu du design mobile et est déjà familier aux utilisateurs. Le hamburger convient aux sites promotionnels, où l’accent est mis sur la présentation de haute qualité du produit à l’aide de photos ou de vidéos. Pour les boutiques en ligne, cette option pourrait être moins adaptée, car il est important pour le client d’avoir un panier, des produits sélectionnés et un champ de recherche en accès rapide.

Conception d’en-tête mobile

L’en-tête doit s’afficher correctement non seulement sur la version de bureau du site web, mais aussi sur la version mobile. Il doit donc être réactif et capable de bien s’adapter à n’importe quel appareil mobile.

L’utilisation quotidienne des appareils mobiles a conduit à des conceptions de sites Web qui ressemblent à des mobiles même dans leurs incarnations de bureau. Par exemple, la mise en œuvre de grandes images de héros et de menus hamburger a ses origines dans le design mobile.

En conclusion

Le site web est présenté par son en-tête. C’est comme une carte de visite unique. Par conséquent, lors de la conception d’un site Web, accordez un maximum d’attention à l’en-tête.

Et une dernière bonne pratique de conception d’un en-tête de site Web : effectuez des modifications régulières pour garder votre site Web frais et à jour. Utilisez certaines idées de cet article.