Meilleures pratiques en matière d'image de héros : 6 éléments à prendre en compte

L'image du héros est la bannière principale du site Web, généralement placée bien en vue, au-dessus du pli - devant et au centre.

L'image du héros est la première image que votre public verra lorsqu'il entrera dans l'univers de votre site Web. Par conséquent, la tâche de rechercher et de sélectionner votre image de héros n'est pas une tâche à prendre à la légère.

Dans cet article, j'ai mis en évidence quelques-uns des aspects les plus cruciaux et des meilleures pratiques à prendre en compte lors du choix d'une image de héros.

1. Utilisez des images pertinentes

Alors que nous passons plus de temps en ligne que jamais auparavant, notre durée d'attention diminue rapidement. Une étude de l'Université technique du Danemark conclut que notre capacité d'attention collective se rétrécit (sciencedaily.com). Alors que le temps moyen passé sur une page en moyenne, tous secteurs confondus, est de 62 secondes, plus de 50 % des visiteurs passent moins de 15 secondes activement sur une page (time.com).

Votre image de héros doit amplifier votre proposition de valeur - ce que vous essayez de communiquer. Posez-vous les questions suivantes :

• Quelles émotions essayez-vous de déclencher ?
• Comment votre image se connecte-t-elle à votre USP/ESP ?
• L'image contextualise-t-elle le contenu du site ?

Nous avons rassemblé quelques exemples ci-dessous pour montrer comment une image de héros peut le faire.

HubSpot : en utilisant une illustration comme arrière-plan du héros, HubSpot illustre à la fois l'aspect de la croissance et le fait qu'il s'adresse à la fois aux PME et aux entreprises.

Save the Children : Utiliser une image d'un enfant dans son arrière-plan de héros pour illustrer l'un des nombreux enfants qu'il essaie de sauver - et ainsi (espérons-le) créer un lien émotionnel avec le public.

Riverford Organic Farmers : un bon exemple de la façon de tirer parti d'une image authentique des légumes biologiques liée aux produits. L'image est étroitement liée aux produits et à l'USP.

2. Le contraste est la clé

Les éléments de conception doivent être séparés pour faire ressortir l'élément le plus important. Par conséquent, au-delà du choix d'une bonne image, vous devez également tenir compte de la manière dont cette image peut fonctionner par rapport à la couleur de police, à l'appel à l'action et au schéma de couleurs de la marque que vous souhaitez.

L'utilisation d'une simple superposition peut généralement faire une énorme différence, en faisant ressortir votre texte. De plus, l'optimisation de la saturation, de la température et du contraste avec un outil d'édition peut donner vie à votre image.

3. Utilisez le bon format

N'utilisez pas d'images de mauvaise qualité. Les images pixélisées ou floues peuvent ruiner la première impression. Cependant, étant donné que le visuel du héros est un élément CX essentiel, vous devez vous assurer que l'image s'affiche aussi rapidement que possible.

Utilisez des images d'une largeur comprise entre 1500 et 2500 pixels et compressez votre image pour réduire la taille du fichier et ainsi augmenter la vitesse de chargement.

Parce que le format PNG produit généralement une taille de fichier importante et nous vous recommandons de n'utiliser ce format que si vous avez des lignes nettes et des zones clairement séparées de couleurs plates et de texte.

Plusieurs outils en ligne peuvent vous aider à compresser votre image :

• Tinyjpg.com : Jusqu'à 20 images, max 5 Mo chacune.
• Compressor.io : Prend en charge les formats jpg, png, gif, svg, webp. 10 Mo maximum
• Imagify.io : limite de téléchargement de la taille du fichier de 2 Mo
• Shortpixel.com : jusqu'à 50 fichiers et 10 Mo maximum.

4. Créer une connexion émotionnelle

Une étude récente publiée dans Frontiers a révélé que les images émotionnelles influencent les gens plus que les mots émotionnels. Ainsi, en choisissant une image avec un haut niveau d'émotivité, vous pouvez déclencher une réaction émotionnelle chez le spectateur.

Lorsque nous observons une expression faciale d'émotion, nous l'imitons souvent. Selon un article publié dans la revue Trends in Cognitive Sciences, ce ne sont pas seulement nos sourires ou nos grimaces, mais toutes nos expressions faciales qui sont contagieuses.

En fait, le cerveau traite les images 60 000 fois plus vite que le texte, et 90 % des informations transmises au cerveau sont visuelles (t-sciences.com). Nous sommes des créatures visuelles et en tirant parti des stimuli émotionnels, notamment des visages émotionnels et des images évocatrices, nous pouvons non seulement déclencher des sentiments et des associations positifs, mais également aider votre public à décoder le message souhaité plus rapidement et plus précisément.

5. Soyez authentique et réaliste

Les consommateurs sont submergés de stimuli, de publicités et de bruit. L'authenticité de la marque peut aider à briser le bruit et à vous démarquer. Des messages authentiques et des images réalistes résonnent plus puissamment auprès des gens et vous aident à créer une connexion plus forte avec votre public.

De plus en plus d'entreprises utilisent de «vraies personnes» pour commercialiser leurs produits. Dove a lancé sa « campagne pour la vraie beauté » en 2004, célébrant les différences physiques naturelles personnifiées par toutes les femmes. En plus de remporter de nombreux prix, la marque a créé une forte connexion émotionnelle avec son public cible, ce qui a entraîné une augmentation significative des ventes.

Des marques comme Dove et plus tard Target ont utilisé avec succès de « vraies personnes » dans leur publicité au cours de l'année écoulée et pour une bonne raison : l'authenticité est payante.

Cela ne signifie pas que vous devez prendre toutes les photos vous-même, ni que vous devez utiliser des images et des vidéos avec une faible résolution. Vous devez cependant utiliser des photos de personnes, de lieux et d'expériences réels et transmettre une histoire de manière réelle plutôt que d'utiliser des images qui semblent mises en scène.

6. Testez et optimisez

Le choix d'une (nouvelle) image de héros ne doit pas être considéré comme l'étape finale mais plutôt comme le début de votre processus d'optimisation. Comme indiqué précédemment, l'image du héros est peut-être l'un des éléments de conception les plus importants du site Web et peut avoir un impact significatif sur vos performances globales.

Pour vous assurer que votre image de héros fonctionne comme prévu, vous devez implémenter un suivi des performances approprié avant de la mettre en ligne. À cette fin, envisagez d'utiliser un outil de test A/B pour tester des variantes alternatives et pour tester votre variante d'origine par rapport à votre nouvelle image.

Dans un test mis en œuvre par Crazyegg, la version gagnante a augmenté les ventes des acheteurs mondiaux de 29,7 %. Dans le passé, j'ai utilisé les outils suivants pour tester les variations d'image :

• Optimiser Google (Gratuit)
• De façon optimale
• Oeuf fou

N'oubliez pas que l'échec est le premier pas vers le succès et ne pas essayer est pire que d'essayer et d'échouer. Vous ne réussirez peut-être pas du premier coup - mais testez, essayez de nouvelles variantes et continuez à optimiser - et vous serez récompensé en conséquence.