15+ Magnifiques en-têtes de sites Web et pourquoi ils fonctionnent si bien

Quelle est la première chose qu’un utilisateur voit sur votre site Web ?

Exactement, l’en-tête.

Si ce n’est pas assez attrayant, si cela n’apporte pas de clarté, vos utilisateurs pourraient simplement s’en aller, et peut-être ne jamais revenir.

Nous ne voulons pas cela, n’est-ce pas ?

Les en-têtes de site web sont une partie centrale de la conception d’un site web. Ils jouent un rôle clé pour attirer l’attention des utilisateurs et établir une connexion avec les visiteurs du site web.

C’est pourquoi, dans les lignes qui suivent, nous allons aborder quelques principes de conception d’en-tête que vous devez connaître lors de la conception d’un en-tête de site web.

Principes de conception d’en-tête à suivre

Des études de recherche ont révélé que les yeux des utilisateurs se déplacent sur une page Web en suivant l’un des 3 modèles suivants :

• Le modèle Gutenberg

Source de l’image : https://vanseodesign.comThe Le motif Gutenberg peut être appliqué à un contenu lourd en texte. Il suggère que les yeux des lecteurs balaient la page d’un bout à l’autre et vers le bas en une série de mouvements horizontaux.

Exemple:

• Le motif en Z

Le motif en Z définit le chemin que suivent les yeux des utilisateurs lorsqu’ils balayent une page, un chemin qui prend la forme d’une lettre Z. Il est recommandé pour la conception de pages de destination, que les lecteurs balaient rapidement.

Exemple:

• Le motif en forme de F

Ce schéma décrit le style le plus couramment utilisé pour lire des blocs de contenu dans le média en ligne. Les utilisateurs balaient rapidement une page Web et leurs yeux suivent un modèle en F.

Exemple:

Sans entrer dans les détails de ces modèles, nous aimerions renforcer que pour n’importe lequel de ces modèles, la ligne horizontale supérieure est l’endroit où les visiteurs commencent à balayer une page.

Que faut-il intégrer dans un en-tête de site Web?

Ces modèles montrent pourquoi un concepteur de sites Web doit décider avec soin ce que les utilisateurs doivent voir en premier. L’en-tête doit servir d’accroche pour capter leur attention et les inviter à explorer le reste de la page.

Il n’y a aucune chance de faire une seconde impression. Vous devez donc réfléchir à deux fois à ce que vous allez inclure dans l’en-tête :

• Forte image de héros

Une image de héros est une très grande image de bannière qui s’affiche au-dessus du pli sur une page Web. Elle est incluse dans la section d’en-tête et est la première chose que les utilisateurs voient en arrivant sur un site web. Les images de héros ont également pour but d’attirer l’attention des visiteurs sur l’argument de vente unique (USP) de l’entreprise. Selon une pratique exemplaire, l’utilisation de visages de personnes réelles dans les images de héros peut aider les visiteurs à mieux s’identifier à la marque. La communication devient plus humaine et personnelle.

Source : Drift.com

• Unique selling point (USP)

L’USP est une phrase qui explique la raison d’être d’une entreprise. Elle doit révéler ce que l’entreprise fait, pourquoi et pour qui. Elle doit également souligner les caractéristiques et les avantages uniques, qui font que la marque se distingue de ses concurrents. Une USP forte est essentielle pour transmettre le bon message aux visiteurs du site Web et, en fin de compte, pour les convertir en clients.

Source : miro.com

• Nom de marque

Le nom de marque habitue les gens à l’identité du site ou renforce l’image que les gens ont de l’identité de votre entreprise.

L’image doit refléter la personnalité de votre marque et garantir que votre voix de marque est cohérente sur l’ensemble du site Web. Elle doit être facilement reconnaissable, même si elle est découpée dans l’en-tête du site Web. Et lorsqu’elle est placée dans l’en-tête du site Web, elle doit jouer un rôle clé dans l’établissement d’une connexion personnelle avec chaque utilisateur.

Source : carolinaherrera.com

• Vidéo du produit

Parce qu’il ne faut que 50 millisecondes aux utilisateurs pour se faire une opinion sur un site Web, cela signifie que vous devez avoir les messages les plus importants dans l’en-tête. C’est la raison pour laquelle de nombreuses entreprises n’attendent pas que leurs utilisateurs fassent défiler le site pour arriver aux caractéristiques de leur produit/service, mais elles utilisent la puissance de la vidéo pour mieux transmettre leur message. De plus, n’oublions pas que 78% des gens regardent des vidéos en ligne chaque semaine, et 55% regardent des vidéos en ligne chaque jour.

Source : wistia.com

• Appel à l’action (CTA)

Un CTA est un message (généralement sur un bouton), qui déclenche une certaine réponse des visiteurs du site web. L’appel à l’action doit être clairement défini et facile à comprendre par les visiteurs du site web. Naturellement, un CTA placé dans l’en-tête, juste à l’endroit où les visiteurs commencent leur parcours sur le site Web, augmente les chances d’obtenir l’action souhaitée de la part des utilisateurs respectifs.

Source : creatopy.com

• Produit en vedette

Dans le cas où vous dirigez un magasin de commerce électronique, vous voudrez mettre l’accent sur la qualité et la commodité d’un certain produit, et la meilleure façon de le faire est d’inclure ce produit dans l’en-tête. L’attention des utilisateurs sera dirigée vers cette meilleure offre, et ils seront enclins à entrer dans le processus d’achat.

Source : amazon.com

Dans tous les cas ci-dessus, la règle générale est la suivante : restez simple, restez clair, rendez l’en-tête engageant ! Les recherches montrent que « la différence moyenne dans la façon dont les utilisateurs traitent les informations au-dessus et en dessous du pli est de 84%. » Il est donc préférable de concentrer vos efforts pour réduire ces chiffres autant que possible. Et vous y parviendrez mieux si vous vous êtes fixé des objectifs quant à ce que vous voulez transmettre.

Les grands sites web, comme www.youtube.com, limitent l’espace dédié à l’en-tête à une faible quantité. Cela est fait exprès, car l’intention est de laisser l’attention des utilisateurs être dirigée vers quelque chose de plus important, comme des produits, ou des services, ou des vidéos (par exemple YouTube).

Parfois, vous n’avez même pas besoin d’un en-tête, ou si vous en avez un, il suffit d’un petit.

Tout dépend des particularités du site web. Pensez-y et donnez à votre site web la personnalité dont il a besoin, peu importe ce que les tendances du web design vous « disent » de temps en temps.

Que vous inspire l’en-tête de votre site web ?

En plus de transmettre certains messages, vous pouvez aussi envisager d’insuffler certaines émotions aux lecteurs. Selon l’objectif que vous donnez à l’en-tête, il peut inspirer aux lecteurs l’un des éléments suivants :

• Curiosité

Pour certains sites web, il serait approprié de mettre en place un en-tête qui inspire la curiosité aux lecteurs. Ils voudront en savoir plus, ils en voudront plus, ils se précipiteront pour explorer la suite de l’histoire.

C’est ce que je ressens à propos de cet en-tête de Canva. Ils font une énorme promesse juste là : « Concevez n’importe quoi ». Et vous êtes invité à le tester. Pouvez-vous résister ?

• Action

Dans certains cas, il est préférable d’inciter à l’action directement depuis l’en-tête. Avec un appel à l’action, vous pouvez inviter les utilisateurs à cliquer sur un bouton, ou à effectuer une autre interaction avec le site Web, dès le départ. Dans le cas de Planable, leur USP est directement liée au CTA ci-dessous. De plus, si vous n’êtes pas tout à fait prêt à acheter, il y a aussi une option pour programmer une démonstration.

• Trust

Il peut être utile de commencer par inspirer confiance à vos visiteurs. Vous voulez qu’ils prennent certaines mesures plus tard, et pour cela, ils doivent être pleinement confiants qu’ils prennent la bonne décision.

Voyons comment Salesforce le fait. Ils déclarent qu’ils sont le plus grand CRM du monde. Ok, vous pourriez dire que 99% des entreprises qui existent ne sont pas les premières dans leur domaine. Et vous auriez raison. Mais, si vous lisez ce qui suit, vous trouverez certainement quelque chose que vous pourrez utiliser. Il y a une étude de cas qui montre l’efficacité du produit. Vous pouvez vous-même tirer parti d’une telle étude de cas.

• Pain

Pourquoi diable voudriez-vous inspirer de la douleur aux lecteurs, surtout à partir de l’en-tête ? Eh bien, de nombreuses entreprises ont leur marketing basé sur le principe du FUD (Fear, Uncertainty, Doubt). À un stade précoce du processus de conversion, la peur/douleur déclenchera la décision d’appliquer immédiatement une solution et de faire disparaître cette douleur.

Ce peut être une approche pour les services de cybersécurité, les services de sécurité physique, mais aussi dans les soins de santé ou les fonds de pension.

Cette approche peut être exploitée dans les campagnes qui veulent faire prendre conscience aux gens qu’il faut se vacciner contre le COVID, ou porter une ceinture de sécurité.

• Laughter

Peut-être que vous voulez vous connecter émotionnellement avec les visiteurs, dès le début. Et il n’y a pas de meilleure façon de le faire que de les faire rire. Et de rire fort. Un sentiment de complicité se forme et vous aurez vos utilisateurs à vos côtés, pendant qu’ils explorent le site web.

• Familiarité

Connecter la situation des utilisateurs avec une situation similaire présentée dans l’en-tête peut créer un certain degré de familiarité.

Types d’en-têtes pour différents types de sites web

Selon les spécificités du site web, un en-tête s’adaptera mieux au design global qu’un autre. Par conséquent, vous devriez avoir une idée claire du type d’en-tête qui conviendra le mieux à votre propre site Web (qu’il s’agisse d’un site de commerce électronique, d’un blog, d’un portfolio, d’un journal en ligne, etc.).

• En-tête axé sur le CTA

Dans le cas de Blue Apron, l’en-tête du site Web utilise une grande vidéo, au lieu d’une grande image héroïque. Il transmet un sentiment de confort, de familiarité, d’appétit.

Puis, nous avons un CTA qui invite l’utilisateur à prendre des mesures pour bénéficier de la même expérience confortable et délicieuse.

Le site Web de CrazyEgg est doté d’un en-tête qui invite les utilisateurs à prendre leur produit pour une démonstration en direct. Leur produit est tout à fait adapté à de telles démonstrations en temps réel. Et il prouve instantanément les avantages du produit. Ils utilisent également un indice visuel, pointant vers le CTA : la main de l’homme dans le ballon dirige l’œil vers le bouton.

• En-tête axé sur la marque

C’est un bel exemple de site Web avec un en-tête axé sur l’identité et les éléments de marque. Il comprend le logo, une réplique des couleurs du logo de la marque dans la partie supérieure, ainsi que leur slogan.

• En-tête axé sur le contenu

Ceci convient très bien aux blogs, et aux magazines, qui mettent en avant des articles et des histoires.

Mais, j’ai aussi trouvé quelques exceptions.

Patagonia ne fait pas la promotion de sa boutique sur la page d’accueil, mais, ils poussent des histoires qui montrent leur engagement à faire un changement dans le monde. Cette histoire actuelle, présentée dans l’en-tête du site Web, porte sur l’esclavage et l’activisme.

Dans le cas d’Ikea, la partie gauche de l’écran invite les visiteurs à se rendre dans l’un des magasins en ligne, tandis que l’autre moitié invite les utilisateurs à lire l’histoire d’Ikea.

• En-tête centré sur le fond vidéo

BUKWILD a intégré 3 vidéos différentes dans l’en-tête du site web. Chacune des vidéos peut être lue en plaçant la souris sur la section correspondante. Ce qui est intéressant dans cela, c’est la façon créative dont ils utilisent les vidéos comme des parties d’une plus grande « image », celle qui représente leur marque.

• En-tête axé sur le produit

Dans le cas de Cropp, un magasin de mode en ligne, les dernières collections sont présentées dans l’en-tête.

Threadless.com met l’art mural dans un contexte et présente un Squad CMYK. L’en-tête comprend également un CTA clair, pour tous ceux qui se sentent appartenir d’une certaine manière à ce scénario présenté dans l’en-tête par la « squad ».

• En-tête axé sur le branding personnel

Dans le cas du blog de voyage Alex in Wanderland, dans l’en-tête du site Web, outre une photo d’Alex, les utilisateurs peuvent voir le début d’une histoire dans cet en-tête : « Cinq ans et des poussières sur la route… ». C’est une invitation pour les lecteurs à vouloir explorer d’autres histoires.

Pour conclure…

Les en-têtes contribuent grandement au succès ou à l’échec d’un site web. Techniquement parlant, cette partie supérieure est naturellement la première chose sur le site web avec laquelle les gens interagissent.

.