Conception d’une image héroïque : comment perfectionner la première impression de ton site Web ?

Même si tu ne connais pas le terme “image héroïque », tu sais très probablement de quoi il s’agit. Il s’agit de cette grande image proéminente que tu vois en premier lorsque tu visites un site Web et qui agit comme une combinaison d’une bannière et d’un tapis de bienvenue.

Presque tous les sites Web ont une image de héros. Sur certains sites, l’image héroïque change régulièrement, tandis que sur d’autres, elle reste statique pendant des années. De nombreux sites Web utilisent également des curseurs, un ensemble d’images et de titres rotatifs comme images de héros.

Le rôle d’une image de héros est de créer un engagement envers la marque. Comme c’est la première chose qu’un visiteur voit sur un site Web, c’est souvent le facteur qui le décide à rester sur ce site ou à le quitter. Donc, si tu veux créer un site Web attrayant et faire grimper en flèche l’engagement de tes visiteurs, assures-toi de concevoir l’image héroïque parfaite pour ta marque.

Comment créer l’image héroïque parfaite pour ton site Web ?

1. Qu’est-ce qu’une image de héros de site Web ?

Tu en vois tous les jours. Les images héroïques sont les grandes images vedettes que l’on voit sur les pages d’accueil. C’est la première chose que l’on voit sur un site Web, une introduction importante et audacieuse à la marque (même si la marque elle-même n’est pas particulièrement audacieuse).

Voici quelques exemples d’images héroïques de sites Web :

Les images héroïques sont positionnées pour être la première chose que tu vois lorsque tu visites un site Web, elles sont donc conçues pour t’accrocher et t’inciter à faire défiler le site. Les images héroïques sont souvent utilisées pour promouvoir des offres ou des contenus spécifiques, mais ce n’est pas toujours le cas. Ce qui est toujours le cas, c’est qu’une image héroïque bien conçue met clairement en valeur la marque de son site Web.

Une image héroïque est souvent la plus grande image de la page d’accueil et, sur certains sites, c’est la seule image. Elle peut être cliquable, mais ce n’est pas obligatoire. De même, elles peuvent contenir du texte, mais ce n’est pas obligatoire. L’objectif est de concevoir une image héroïque de site Web qui crée un lien avec les visiteurs et les retient sur ton site suffisamment longtemps pour qu’ils fassent ce que tu veux qu’ils fassent, qu’il s’agisse d’acheter un produit, de lire ou de regarder ton contenu, de télécharger quelque chose ou d’interagir avec d’autres personnes sur le site.

2. Qu’est-ce qui fait une bonne image de héros ?

Une bonne image de héros montre plutôt qu’elle ne raconte.

Elle montre ta marque dans une image, mais pas comme le fait un logo. Un logo résume ta marque de manière symbolique, tandis qu’une image de héros est un instantané de l’expérience qu’un visiteur du site Web peut attendre de ta marque.

Une image de héros bien conçue contient plusieurs éléments. Bien que les images de héros soient aussi uniques que les sites Web sur lesquels elles se trouvent, elles contiennent toutes les mêmes choix de conception délibérés, conçus pour attirer et maintenir l’attention des visiteurs. Ces choix de conception sont les suivants :

– une image qui fonctionne avec le titre

– une image en rapport avec la marque et l’objectif du site Web

– un appel à l’action clair

– des images de haute qualité

– une réactivité

Une image de marque claire qui s’harmonise avec le reste du design de ton site Web.

Cela peut sembler beaucoup, mais croie-nous, la conception d’une image de héros efficace suit les mêmes principes que la conception d’autres parties d’un site Web. Poursuis ta lecture pour en savoir plus sur tous les éléments qui entrent dans la composition d’une image de héros de site Web bien conçue.

3. Travailler avec le titre

Une bonne image de héros doit fonctionner avec son titre. Même le texte le plus intelligent ne peut pas, à lui seul, attirer l’attention des visiteurs et les captiver, pas plus que la meilleure image. Mais ensemble, un titre puissant et une image parfaite forment un duo dynamique parfait pour l’image héroïque de ton site.

Regarde comment l’image et le texte du titre fonctionnent ensemble dans la conception par DSKY. Avant même que le visiteur ne lise le paragraphe expliquant que Stillwater Investing est une société d’investissement du Maine, l’image héros lui en dit long sur la marque. Elle montre qu’elle est basée en Nouvelle-Angleterre, qu’elle promet de t’aider à atteindre l’indépendance financière et qu’en lui confiant ton argent, tu peux avoir le style de vie décrit dans l’image : passer du temps avec tes proches, pratiquer ses loisirs dans un cadre pittoresque, tout cela parce que tu as la sécurité financière nécessaire.

Le design de l’image héroïque de MNoriega fait la même chose : il rend l’objectif et les promesses du site Web parfaitement clairs pour les visiteurs dès la fin du chargement du site. L’illustration visualise le sujet complexe d’une manière attrayante et facile à saisir.

4. Des images pertinentes

Cela semble évident, mais cela vaut la peine d’en parler : l’imagerie que tu choisis pour ton image héroïque doit être pertinente pour ton site Web et ta marque.

Cela ne signifie pas que l’imagerie abstraite ne peut pas fonctionner. C’est tout à fait possible, à condition qu’elle s’intègre au reste du design. Il peut s’agir d’un motif géométrique qui crée une texture visuelle intrigante ou d’une mer de swooshes dans la palette de couleurs de ta marque.

Les meilleures images à utiliser ne sont pas seulement pertinentes, elles sont aussi de haute qualité.  Ne lésines pas sur les images de qualité inférieure à la haute définition : les gens le remarqueront, et cela aura un impact sur la façon dont ils perçoivent ta marque (et pas dans le bon sens).

L’image de ton héros ne doit pas nécessairement être statique. De nombreuses marques, comme fivefootsix, présentent des images héroïques animées sur leurs pages d’accueil.

Une image de héros animée pourrait être le bon choix pour toi si ta marque est dynamique, fantaisiste ou amusante. Si tu es un animateur ou une agence de création qui propose ou se spécialise dans l’animation, ce type d’image de héros est très probablement une évidence pour toi. De même, si tu es vidéaste ou si la vidéo est un élément clé de ton offre, une vidéo en direct pourrait être l’image héroïque parfaite pour captiver les visiteurs de ton site Web.

Mais voici ce qui peut rendre difficile une image héroïque animée : les animations peuvent ralentir le temps de chargement des sites Web. Un site Web qui se charge lentement est un site Web dont le taux de rebond est plus élevé et qui est moins bien classé dans les moteurs de recherche. Mais la mesure dans laquelle une animation ralentit ton site Web dépend de quelques facteurs. Si tu parviens à réduire ce ralentissement au minimum, les avantages d’une image héroïque animée peuvent l’emporter sur ses inconvénients.

Une façon d’éviter qu’une animation ne ralentisse ta page est de la créer avec CSS au lieu de Javascript. Tu peux également accélérer la page en éliminant toute animation simultanée et/ou en retardant l’animation d’une fraction de seconde. Avec cette deuxième stratégie, te donnes au reste de la page suffisamment de temps pour utiliser la puissance du navigateur pour se charger sans faire attendre tes spectateurs.

Si ton animation est un gif, tu peux également compresser le fichier pour l’optimiser et optimiser le temps de chargement de ta page.

5. Un CTA clair

Un appel à l’action (CTA) est un bout de texte, souvent placé sur un bouton ou juste à côté, qui invite le visiteur à effectuer une action spécifique. Ton image héros accueille les visiteurs sur ton site Web et marque le début de leur voyage avec toi, mais le voyage ne s’arrête pas là. Ton image de héros doit rendre la prochaine étape du visiteur évidente, et le moyen d’y parvenir est un appel à l’action clair.

Lorsque tu conçois ton image de héros, penses à la hiérarchie et à l’équilibre du design. L’équilibre consiste simplement à disposer les images et le texte de manière à ce qu’ils soient équilibrés. Ils ne peuvent être ni trop rapprochés ni trop éloignés les uns des autres; ils ne sont pas regroupés d’un côté tandis que l’autre est dépouillé, ils ne sont pas légèrement à gauche (ou à droite) ou au-dessus (ou en dessous) du centre de l’image au point de donner l’impression que l’image est désalignée.

La hiérarchie signifie qu’il y a une progression claire que l’œil du spectateur suit et que, dans cette progression, les informations sont présentées de manière logique. L’internaute doit d’abord lire le titre, puis le sous-titre, le texte complémentaire et enfin l’appel à l’action, et les images que tu choisis doivent faciliter cette progression.

Lorsque ta hiérarchie n’est pas claire, les lecteurs sont désorientés et se détournent de ton message parce qu’ils traitent les informations que tu as présentées dans le mauvais ordre. Il peut s’agir de voir l’appel à l’action avant de savoir ce qu’on lui demande de faire, de lire l’accroche avant de connaître le nom de ta marque ou même de manquer complètement le titre.

6. Taille de l’image du héros adaptée aux besoins

Aujourd’hui, plus de la moitié du trafic web est généré par les téléphones mobiles. Cela signifie qu’un site Web réactif – et une image héroïque réactive – n’est pas négociable si tu veux atteindre ton public cible. La conception réactive est une conception qui répond à l’utilisateur et, en général, cette expression fait référence à des conceptions Web qui s’adaptent aux appareils sur lesquels elles sont affichées.

Lorsque tu choisis l’image du héros d’un site Web, assures-toi de tester son aspect sur différents écrans. Des parties cruciales de l’image sont-elles coupées ? Certains détails ou textes sont-ils difficiles à voir/lire ? Ton image héroïque doit conserver son efficacité et communiquer le même message quel que soit l’appareil utilisé par ton visiteur.

Lorsque tu travailles avec un concepteur d’images de héros, faites appel à quelqu’un qui a l’expérience de la création d’images réactives et qui peut créer des images de héros pour différentes tailles d’écran.

Donner le ton pour le reste du site web

En moyenne, un visiteur passe moins de 15 secondes sur un site Web avant de le quitter, ou de “rebondir”, comme on dit dans le jargon des analystes. Ces 15 secondes sont rarement suffisantes pour interagir de manière significative avec ton site. C’est pourquoi il est si important que ton image héroïque capte l’attention des visiteurs et leur communique, instantanément, que ton site Web et ta marque dans son ensemble sont exactement ce qu’ils recherchent.

Il s’agit de la première étape du parcours de tes visiteurs sur ton site Web. La conception liée à ce parcours est connue sous le nom de conception de l’expérience utilisateur (UX). Une conception UX efficace prend le visiteur du site Web par la main et le guide jusqu’à une conclusion logique, en lui donnant l’impression que chaque étape du parcours est logique et suit une progression naturelle. Lorsque tu travailles avec un concepteur UX pour créer ton site Web, le placement de l’image héroïque fait partie du plan de conception.

7. Concevoir l’image héroïque du site Web pour ta marque

Comme nous l’avons mentionné plus haut, l’image du héros de ton site Web joue un rôle important : elle permet de lancer la conversation entre ton site Web et son visiteur. Considère-la comme un phare pour ta marque. Si elle ne correspond pas à l’esthétique de ta marque, ne dépeint pas fidèlement sa personnalité ou ne fait pas de promesses que le reste du site peut tenir, les visiteurs n’accorderont pas une grande confiance à ta marque.

Commence à concevoir l’image de ton héros en te référant à l’identité de ta marque. Pourquoi as-tu choisi les couleurs, les formes, les polices de caractères et le style esthétique général que tu as choisis à l’origine ? Inspires-toi de ces choix de conception pour créer ton image de héros. Lorsque tu travailles avec ton identité de marque pour déterminer la bonne direction pour ton image de héros, effectue également une étude de marché.

L’étude de marché consiste également à tester différentes images de héros. Un moyen courant de tester les images de héros, ainsi que d’autres aspects de la conception de sites Web, consiste à effectuer des tests A/B. Avec le test A/B, tu fais en sorte que la moitié des visiteurs de ton site Web voient une version de ta page d’accueil et l’autre moitié une autre. Tu peux ensuite analyser les taux de rebond, les taux de clic et d’autres statistiques pour chaque version et déterminer laquelle résonne le mieux avec ton public.

8. Sauve la journée avec une image héroïque étonnante

Si tu optes pour autre chose que la meilleure image de héros possible, tu risques de réduire le nombre de visites, de clics, d’engagements et de conversions. N’entrave pas le succès de ta marque en utilisant une image héroïque de mauvaise qualité ou de mauvaise marque sur ton site Web. Travaille avec un concepteur web expérimenté pour créer l’image héroïque parfaite pour ta marque.

Partage cet article !

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur pinterest

Tu aimeras aussi :