Landing Page Hero Shots : 18 exemples perspicaces pour vous guider [2022]

En 1911, le Syracuse Advertising Men's Club organise un banquet pour discuter de journalisme et de publicité. L'un de ses membres (Arthur Brisbane) a été cité dans le journal en disant: «Utilisez une image. Ça vaut mille mots.

Pas Confusious, le roi Salomon, Einstein ou Aristote, mais un publicitaire. (Dites - le à vos parents.)

Avance rapide de plus de 100 ans et les mots proverbiaux d'Arthur sonnent toujours vrai, surtout en ce qui concerne les pages de destination.

Entrez : le cliché du héros de la page de destination.

Si votre titre et votre sous-titre communiquent votre proposition de valeur, la photo du héros de votre page de destination lui donne vie comme seule une image peut le faire. C'est pourquoi une photo de héros forte est un pilier de la conception de la page de destination.

Faites une erreur et regardez vos taux de conversion chuter.

Faites les choses correctement (comme Arthur le savait par expérience) et regardez vos taux de conversion monter en flèche.

Au nom de la réussite , nous allons rendre Arthur fier en explorant les différents types d'images de héros, les étapes nécessaires pour créer les vôtres et des exemples de bonnes, mauvaises et fausses.

Allons-y.

La photo du héros de votre page de destination fait référence à l'image ou à la vidéo principale utilisée pour communiquer la valeur de votre offre, et c'est la première image que vos visiteurs rencontreront à leur arrivée.

Par exemple, remarquez comment l'image de héros de Divvy présente une carte de crédit et une application mobile, qui ajoutent du contexte à leur titre qui indique : "Le crédit et le logiciel dont votre entreprise a besoin pour prospérer".

Une image de héros va-t-elle inciter quelqu'un à acheter ?

Pas par lui-même.

Mais avec votre titre, votre sous-titre, votre offre et votre appel à l'action (CTA), votre photo de héros peut fournir le contexte, l'émotion et la clarté nécessaires pour pousser vos visiteurs à franchir la ligne d'arrivée.

Cela signifie qu'un cliché de héros de haute qualité ne remplit pas seulement l'espace ; il donne vie à votre offre d'une manière que les mots seuls ne pourraient jamais faire, et il crée une première impression indélébile .

Ne confondez pas une photo de héros avec une section de héros.

La section héros de votre page de destination fait référence à la section "au-dessus de la ligne de flottaison", ou à la section de la page de destination que vos visiteurs rencontrent pour la première fois avant de commencer à défiler vers le bas.

Votre section de héros comprend votre photo de héros, votre titre, votre sous-titre et votre CTA (au minimum), mais la section de photo de héros et de héros fait référence à deux éléments distincts de l'ensemble de votre page de destination.

Qu'il s'agisse d'animations, de photographies personnalisées, d'une vidéo ou d'un autre style, les clichés des héros de la page de destination se répartissent en cinq catégories principales :

1. axé sur le produit
2. métaphore
3. "terre promise"
4. axé sur le processus
5. abstrait

Explorons des exemples de chacun.

Les pages de destination axées sur le produit mettent en lumière le produit en action. Surprise Surprise.

Pour un produit nouveau ou compliqué, une photo de héros axée sur le produit peut aider à démystifier votre offre en rendant l'abstrait concret.

Par exemple, la photo du héros de l'éditeur X présente son interface d'éditeur visuel :

Les photos de héros métaphoriques utilisent des images qui représentent ou symbolisent la valeur de l'offre, mais pas au sens littéral.

Par exemple, le héros photographié sur la page de destination de notre plan marketing gratuit présente les émoticônes de notre marque sous la forme de billets d'un dollar et de cerveaux souriants :

Les clichés des héros de la terre promise dépeignent le résultat souhaité de l'utilisation de votre produit ou service, soit en mettant en lumière un client prospère, soit un état futur souhaitable.

Par exemple, Keeps subscription hair loss medicine présente un client satisfait et souriant, vraisemblablement après avoir utilisé son médicament contre la chute des cheveux :

Vous voyez généralement des photos de héros axées sur les processus pour des services ou des logiciels où l'illustration du produit peut ne pas être possible. Au lieu de cela, vous visualisez le processus responsable de la valeur ou de l'efficacité du service.

Par exemple, GatherContent utilise un graphique personnalisé pour illustrer le processus de gestion de contenu de son logiciel :

Notre photo de héros la moins préférée : les images de héros abstraites (ou les images de héros composées d'éléments visuels comme des formes ou des motifs).

Pourquoi sont-ils nos moins préférés ? Parce qu'ils ne font que remplir l'espace. Pas grand-chose d'autre.

Par exemple, Semrush présente deux formes abstraites comme élément visuel principal, rien d'autre. Occasion manquée.

Une photo de héros de haute qualité ne remplit pas seulement l'espace ; il ajoute du contexte, communique la pertinence, évoque l'émotion et enrichit l'expérience utilisateur. Et il le fait en utilisant une combinaison de

• le concret
• pertinence
• le contexte
• émotion
• personnalisation
• alignement

Explorons chacun.

Les clichés de héros abstraits font bien deux choses : 1) absolument rien, et 2) augmentent la charge cognitive (le temps qu'il faut aux visiteurs pour comprendre votre offre).

C'est ça.

Les clichés de héros de page de destination de haute qualité doivent représenter votre produit, service, résultat souhaité ou proposition de valeur en action, dans le monde réel ou aussi proche que possible de la réalité. Simple.

Ne faites pas trop réfléchir vos visiteurs. Évitez l'art pour l'art. Et gardez vos visuels concrets.

Par exemple, Dollar Shave Club utilise son image de héros pour illustrer les produits inclus dans son ensemble de démarrage Razor à 5 $. Simple mais efficace.

Une photo de héros de page de destination de haute qualité devrait résonner immédiatement auprès de votre public cible tout en signalant simultanément "Ce n'est pas pour moi" à quelqu'un d'autre.

Vos visiteurs prennent des décisions en une fraction de seconde principalement influencées par leur inconscient. Si votre photo de héros n'apporte pas immédiatement de clarté à qui elle est destinée et à qui elle n'est pas destinée, réessayez.

Cela signifie également faire correspondre le héros de votre page de destination avec le message et la création qui y ont envoyé les gens (c'est-à-dire, la correspondance du message).

Par exemple, lorsque vous regardez la photo du héros de Beauty Box d'Allure, y a-t-il une question que ce soit pour les personnes spécifiquement intéressées par la beauté?

Le héros de votre page de destination a été photographié pour soutenir votre titre et votre sous-titre. Période.

Mieux encore, considérez-le comme la représentation visuelle de votre proposition de valeur.

Cela signifie que votre photo de héros doit donner vie à la promesse que vous faites dans votre titre, et non à une promesse que vous faites ailleurs sur la page.

Par exemple, Canva ajoute du contexte à son titre « créativité et productivité » avec une photo de héros axée sur le produit qui illustre la collaboration, les modèles et la conception en déplacement (application mobile) :

Quand nous disons émotionnel, nous ne voulons pas dire émouvoir quelqu'un aux larmes ; nous voulons dire créer un sentiment positif sur votre marque et votre offre.

Cela dépend en grande partie de la qualité de votre conception graphique - une conception Web de qualité renforce la confiance et établit la crédibilité.

Mais vous pouvez évoquer des sentiments positifs comme la confiance, la sécurité, le bonheur et la confiance directement à partir de votre héros en utilisant des images de choix.

Par exemple, Namogoo propose une variété d '«acheteurs» insouciants, comme pour dire: «Voici ce que vos clients ressentiront une fois que vous aurez commencé à utiliser Namogoo.»

En reflétant les émotions positives associées à la « terre promise » de leur proposition de valeur, Namogoo suscite des émotions positives chez ses clients potentiels.

Ou vous pouvez présenter des preuves sociales, comme des témoignages de clients, des classements par étoiles ou des récompenses, directement dans votre photo de héros pour évoquer des sentiments de confiance et de confiance.

Pas de stock. La photographie.

Gardez vos photos de héros de page de destination personnalisées pour votre marque.

Si vous avez besoin d'aide de la photographie de stock en raison de ressources, à tout le moins, travaillez la photographie de stock dans un graphique personnalisé afin qu'il corresponde au style et à l'ambiance de votre marque.

Par exemple, Monday.com utilise diverses photographies d'archives de personnes, mais ils les éditent dans leur héros de page de destination d'une manière originale et unique.

Enfin, les meilleures images de héros de page de destination ne détournent pas l'attention de la copie ; ils s'alignent avec goût autour des titres et des CTA d'une manière qui attire l'attention sur eux (et non loin d'eux).

Par exemple, remarquez comment Apostrophe présente un dermatologue regardant vers le titre et le CTA ?

Diriger son corps et son regard vers la droite crée un repère visuel subtil qui attire l'attention du visiteur dans la même direction, directement vers le titre et le CTA.

Maintenant, juxtaposez cela avec la photo du héros de la page de destination de VanMoof. Cela ne fait pas ressortir le titre et le CTA ; ça les enterre.

Passons maintenant à la partie amusante : exemples de clichés de héros de page de destination.

Nous avons divisé cette section en trois catégories distinctes :

1. Le Bon (10 exemples)
2. Le Mauvais (4 exemples)
3. Le Faux (4 exemples)

Pourquoi?

Parce que tous les clichés de héros ne sont pas des super-héros, et apprendre ce qu'il ne faut pas faire est tout aussi important que d'apprendre quoi faire.

Ajoutez-les à vos favoris. Ajoutez-les à votre fichier swipe. Dites-le à tous vos amis.

1. CanvaPro
2. Doo
3. Public
4. Adobe Creative Cloud
5. ClientBoost
6. Espace carré
7. Spline
8. SnapCall
9. Forme de caractères
10. Tatou

Ce que nous aimons : une photo de héros axée sur le produit qui ajoute du contexte au titre, ne détourne pas l'attention du CTA et évoque des émotions positives.

Ce que nous aimons : Doo montre de vraies captures d'écran de leur application de rappel. Simple, concret, contextuel, personnalisé, efficace.

Ce que nous aimons : Public propose une vidéo en boucle qui présente des captures d'écran de leur application ainsi que des utilisateurs réels et authentiques. Cette vidéo associe l'accent mis sur le produit à la terre promise pour capturer astucieusement sa facilité d'utilisation, son marché cible et sa convivialité mobile.

Ce que nous aimons : Il n'y a pas de meilleur moyen de démontrer la puissance de votre logiciel de conception qu'en présentant les conceptions réelles qu'il a facilitées. Eh bien, peut-être une façon : en faisant de votre logo le sujet du design. Bravo Adobe.

Ce que nous aimons : nous ADORONS les clichés métaphoriques des héros de la page de destination de KlientBoost. Principalement parce que nous avons développé toute une famille de mascottes de marque qui ont besoin de leurs 15 minutes de gloire, mais aussi parce qu'elles illustrent nos propositions de valeur de manière distincte et amusante. Qui n'aime pas les pages de destination souriantes et l'argent qui pleut ?

Ce que nous aimons : Squarespace donne toujours la priorité au design. Il n'est donc pas surprenant que les images de leurs héros de page de destination ressemblent davantage à de l'art moderne qu'à la plupart des œuvres d'art modernes. Mais comme nous l'avons mentionné plus tôt, l'art pour l'art ne suffit pas lorsqu'il s'agit de photos de héros de page de destination. Pas à moins que vous n'ayez capturé votre produit dans la vie réelle dans cet art. Et c'est exactement ce que fait Squarespace ici.

Ce que nous aimons : C'est un peu difficile à dire à partir de cette image (je vous suggère de visiter leur page Web), mais la photo du héros 3D de Spline bouge lorsque vous cliquez et faites glisser votre souris dessus. Plutôt chouette, étant donné qu'ils vendent des outils de conception 3D collaboratifs.

Ce que nous aimons : SnapCall utilise sa photo de héros pour illustrer un cas d'utilisation courant (ou un problème) que son marché cible pourrait trouver utile (comme interagir avec vos clients à distance). Cela a du sens, compte tenu de la promesse de leur sous-titre de "offrir une expérience client révolutionnaire avec des appels vidéo en un clic".

Ce que nous aimons : parler de produits axés sur les produits. Typeform utilise un formulaire Typeform intégré réel comme image principale. Les visiteurs peuvent en fait cliquer sur le bouton "Essayez-moi" et découvrir le formulaire par eux-mêmes. Génial.

Ce que nous aimons : Alerte métaphore. Un tatou enroulant son corps autour d'une maison comme s'il la protégeait comme si c'était son propre bébé. Est-il même possible de mieux communiquer leur promesse de marque et leur proposition de valeur ? Aucune chance.

Nous avons vu pire, mais ces clichés de héros de page de destination ne font toujours pas la coupe.

1. Semrush
2. InVision
3. MURAL
4. PocketGuard

Ce que nous n'aimons pas : Voici ce qui se passe lorsque les métaphores échouent. Semrush utilise une boîte à outils, vraisemblablement pour mettre en évidence sa proposition de valeur "Outils pour tout défi SEO". Seule la boîte à outils est remplie d'une règle, d'une loupe et d'un rouage. Vous vendez des outils de plomberie ? Ou des outils de référencement ?

Ce que nous n'aimons pas : Et c'est ce qui arrive quand l' abstrait échoue. Nous l'obtenons, cependant, puisque cette page de destination fait la promotion du nouveau logiciel "Freehand" d'InVision. Mais pourquoi se contenter de montrer une femme « à main levée » sur un mur ? Ouais non. Occasion manquée. Les gens veulent voir le logiciel dans la vraie vie, surtout lorsqu'il s'agit d'un nouveau type de logiciel.

Ce qu'on n'aime pas : C'est surchargé. Sur quoi nous concentrons-nous même ? MURAL tente d'utiliser une photo de héros axée sur le produit, mais ils en ont trop pressé, ce qui rend difficile de discerner ce que fait chaque fonctionnalité. Je peux le voir maintenant : trop de gens veulent que trop de fonctionnalités soient représentées, alors le concepteur a dit : « Effectivement, nous allons toutes les mettre là-dedans. »

Ce que nous n'aimons pas : Ce qui est le plus dérangeant dans ce dessin abstrait, c'est qu'il ressemble à une sorte d'onde sonore. Mais PocketGuard est une application de finances personnelles. La leçon? Assurez-vous que votre photo de héros ne ressemble pas à un service différent à première vue, même par accident.

Oui, nous ne pouvons pas oublier le faux. Ces photos de héros gaspillent directement la pièce la plus précieuse de l'immobilier de la page de destination.

1. Interphone
2. SurveyMonkey
3. Agir sur
4. ZoomInfo

Ce qu'on déteste : Une femme qui gonfle un ballon ? C'est ainsi que vous allez illustrer votre proposition de valeur « Convertir plus de visiteurs de votre site Web en clients payants » ? Swing et raté.

Ce que nous détestons : les pages de destination n'ont pas toujours besoin de photos de héros pour être converties. Alors ne les pressez pas simplement parce que vous « avez besoin de quelque chose de visuel ». Dites non aux remplisseurs d'espace (ahem, SurveyMonkey).

Ce que nous détestons : C'est un entonnoir, je suppose. Mais ça ressemble plus à une ampoule. Dans une page de destination contenant beaucoup de texte qui pourrait bénéficier d'un visuel fort, Act-On passe à côté de l'essentiel. Sans oublier qu'ils n'incluent même pas leur logo sur cette page de destination.

Ce que nous détestons : est-ce un drone Amazon qui livre ma nouvelle rallonge ? Ouais. Sans oublier que le placement (en haut à droite) détourne votre attention du CTA en bas, pas vers lui.

En bout de ligne ?

Bien que les clichés de héros de page de destination soient de toutes formes et de tous types, les meilleurs intègrent une combinaison de

• le concret
• pertinence
• le contexte
• émotion
• personnalisation
• alignement

Que vous soyez une petite entreprise ou une organisation mondiale, donnez la priorité à ces éléments pour réussir le cliché de votre page de destination.

Vous voulez savoir si votre coup de héros fait mouche ?

Essayez le test de tir du héros.

Trouvez un ami ou un collègue (de préférence quelqu'un qui n'a jamais rencontré le produit promu par votre page de destination), chargez la page de destination et donnez-lui cinq à dix secondes pour revoir la photo du héros.

S'ils ne peuvent pas décrire avec précision votre proposition de valeur et le héros qui l'accompagne en deux phrases, il est temps de commencer à tester A/B différentes variantes.

Maintenant, allez de l'avant et rendez Arthur (et nous) fiers.

N'oubliez pas de maîtriser les titres de votre page de destination pendant que vous y êtes. Lisez tout sur la façon de le faire dans notre prochain blog ici.