Analyse d’une page d’accueil : Aventure Moderne

Tu veux créer une page d'accueil qui converti ? Et si, d'abord, nous analysions ensemble la page d'accueil super efficace d'Aventure Moderne ?
Page d'accueil hero Aventure Moderne

Tu veux te lancer dans la création d’une page d’accueil ?

Ce n’est pas aussi simple que ça en a l’air… Et si nous analysions ensemble, d’abord, une page d’accueil efficace ?

La page d’accueil doit “résumer” notre activité et donner envie au visiteur d’aller plus loin.

Pour cela, différents éléments s’offrent à nous :

  • produit / description de la mission d’entreprise
  • bénéfices pour le client / le lecteur
  • appels à l’action (prendre RDV, commencer une période d’essai, s’inscrire à la newsletter…)

Et ces différents items sont à assembler en suivant les règles du graphisme mais aussi de l’expérience utilisateur (UX).

Aujourd’hui, nous analyserons ensemble la page d’accueil d’Aventure Moderne ! 😀

Comment est faite l’analyse de la page d’accueil

Pourquoi Aventure Moderne ?

J’ai choisi d’analyse la page d’Aventure Moderne parce qu’il s’agit d’un studio de graphiste / développeur à taille humaine.

Je m’adresse principalement à des porteurs de projets solopreneurs, des freelance. Donc la taille de l’entreprise de l’exemple est essentielle : nous n’avons pas les mêmes besoins, ni les mêmes moyens.

Graphiste pour être sûre de ne pas avoir de mauvaise surprise et pour te montrer un design soigné qui pourrait t’inspirer.

Parce qu’il y a de nombreux appels à l’action plutôt judicieusement placés et que c’est un excellent exemple.

Méthodologie

  • premier survol
  • identification des différents éléments principaux
  • analyse du hero (l’essentiel)
  • analyse de la page d’accueil en entier
  • analyse fine côté UX
  • redesign

Aperçu et emplacement des éléments sur le hero header

Mais qu’est-ce donc que le hero header ?

Le hero header est la partie visible directement lorsqu’on arrive sur une page d’accueil ou une landing page (… principalement), tout en haut.

Il contient habituellement un visuel, un titre, un sous titre et un appel à l’action.

Traditionnellement, on retrouvera aussi, au dessus à gauche le logo du site et les éléments de menu / connexion à droite.

Pour en savoir plus je te conseille de lire cet article du site Graphiste.com.

Pourquoi avoir un hero header soigné est … vital ?

Oui oui, n’ayons pas peur des mots.

You never get a second chance to make a good first impression.

Will Rogers

Et c’est bien le hero (héro) de cette page d’accueil qui donne la première impression au visiteur qui a entendu le nom de la marque ou de l’entreprise et qui cherche à en savoir plus.

Il ne tient qu’à ton hero de convertir ce visiteur en client 😉

Bon, et à ta proposition de valeur évidemment… Pas sûre que de vendre des bijou pour anus de chat convertisse beaucoup… quoi que.

Non allez, ne me dis pas que tu es arrivé(e) sur cette page pour cette vidéo !??

Bon, puisque tu la demandes je te fais ce cadeau :

Allez, j’espère que ton cerveau est suffisamment réveillé maintenant, on attaque l’analyse 😉

Analyse du hero header d’Aventure Moderne

Hero header de la page d’accueil Aventure Moderne (clique !)

Je t’invite à cliquer sur l’image pour l’agrandir et voir en détail les textes et les annotations (en vert) que j’y ai apporté.

Nous retrouvons donc, de haut en bas :

  • Logo + menu + appel à l’action
  • Titre : offre de valeur et bénéfices pour le client
  • Sous-titre : description et bénéfices pour le client
  • Illustration
  • Appel à l’action
  • Bénéfices pour le client
  • Preuve sociale
  • Incitation à poursuivre l’aventure (ou la lecture de la page :p)

Voici un héro qui fait fort ! Tout y est, sur une si petite zone !

Le design est sobre et efficace, j’ai envie de rester et d’en savoir plus. Et toi ?


Bon, petit détail tout de même : la couleur du bouton n’est pas la même que le rose de l’illustration. Et le texte bleu en dessous du bouton n’est pas suffisamment contrasté sur le fond blanc.

Pour vérifier la lisibilité d’un texte, lorsque tu es sur Chrome tu fais un clic droit > Inspecter puis clique sur le bouton “Select an element in the page to inspect it”. Enfin, passe la souris sur ce que tu veux contrôler et regarde ce qui est affiché.

Page d'accueil d'Aventure Moderne : problème de contraste
Page d’accueil d’Aventure Moderne : problème de contraste

Ici, le contraste est à 4.2, un peu en dessous des 4.6 recommandés pour garder une accessibilité maximale.

Analyse de la page d’accueil

Maintenant, nous allons regarder en détail toute la page d’accueil. Tu peux aller la voir par toi-même ici.

Si tu n’as pas envie, je t’ai remis des captures d’écran et à droite de chacune mon interprétation simplifiée des blocs et de leurs utilités. N’hésite pas à cliquer dessus pour zoomer 😉

Description du process et bénéfices : 2ème section visible sur la page d’accueil

2ème partie de la page d'accueil d'Aventure Moderne
2ème section de la page d’accueil d’Aventure Moderne

Après le hero header, nous trouvons la description du processus de création, comme si nous étions.

On sait même quoi faire pour débuter : observer le portfolio et décrire nos besoins.

En plus les chiffres-monstres sont trop mignons 😀

A côté de ça, nous avons la description des bénéfices pour le client :

  • à votre service
  • illimité
  • infallible

Les craintes du potentiel client vis à vis de cette offre sont bien attaquées ici, mais elles seront véritablement éradiquées plus bas 😉


Juste un petit détail, l’effet parallaxe est too much pour moi. Qu’en penses-tu ?

Produit et relation client : 3ème section visible sur la page d’accueil

3ème partie de la page d'accueil d'Aventure Moderne
3ème section de la page d’accueil d’Aventure Moderne

Si le visiteur pressé n’a pas pris la peine de lire les petits textes du dessus, ici il devrait se faire harponner par les cartes attrayantes qui n’ont que quelques mots de description.


Et hmm, puisque ce sont des cartes, je pensais pouvoir interagir avec mais ce n’est pas le cas. Elles auraient pu se retourner pour expliquer plus en détail chaque compétence !


L’appel à l’action (CTA) reste discret, je ne suis pas sûre que le client pressé s’en rende compte… sauf s’il est toujours bien accroché aux dessins des cartes :p

Pour appuyer le bénéfice “relation client”, on a même droit à une photo de l’un des deux co-fondateurs, Neil. Pas de sourire, mais une main tendue peut-être ?


Le petit bloc “Titre + description” au dessus des cartes ne m’a pas convaincu par contre, j’ai l’impression de me trouver sur un CV oldschool. Mais ce n’est que mon avis de débutante ! Quel est ton avis sur la question ?

J’aurais préféré juste une petite expression dans le même genre que “Du design sur mesure” de la section précédente.

Prix et description : 4ème section visible sur la page d’accueil

4ème partie de la page d'accueil d'Aventure Moderne
4ème section de la page d’accueil d’Aventure Moderne

Après avoir fait l’apanage des compétences de l’équipe, nous arrivons sur la table des prix.

Deux options :

  • Découverte : un graphiste attitré
  • Aventure : une équipe attitrée

Le prix et bien visible et ne porte pas à confusion, et le petit texte de description remet une couche sur les bénéfices qu’auront les clients à souscrire.

Les appels à l’action sont bien visibles aussi, avec une prédominance (il me semble) pour la période d’essai de la formule Découverte.

Le tableau est idéal pour pouvoir comparer les deux formules.


Mais

  • certaines caractéristiques sont répétées avec une très légère variation qui risque de troubler
  • les émoticônes ne sont pas toujours pertinents (même s’ils dynamisent beaucoup le contenu) et ils ne sont pas aux couleurs du site (sauf les trois petites étoiles quand on regarde depuis Windows)
  • l’Aventure n’est pas sans engagement ? Vous me mettez le doute !

J’aurais aussi peut-être rajouté le public cible / les besoins de chacune des deux formules. Non ? (c’est une vraie question de débutante qui cherche à faire au mieux ;))

Bénéfices & preuve sociale : 5ème section visible sur la page d’accueil

5ème partie de la page d'accueil d'Aventure Moderne
5ème section de la page d’accueil d’Aventure Moderne

Maintenant, ils mettent le paquet avec une longue section dédiée à nous convaincre avec un comparatif avec et sans Aventure Moderne.

Voici ce que ça donne en une phrase : “votre vie sera un enfer sans nous, alors faites nous rejoindre votre équipe”.

Le code couleur, bien que très efficace (rouge et vert), me chagrine un peu sur cette page d’accueil cependant.

Juste en dessous, au cas où nos doutes résisteraient, un client témoigne de sa superbe aventure. Et on a sa photo en plus, pour bien nous faire comprendre que ce n’est pas un avis en l’air : il y a bien une personne qui a testé et approuvé ce service !

Portfolio : 6ème section visible sur la page d’accueil

6ème partie de la page d'accueil d'Aventure Moderne
6ème section de la page d’accueil d’Aventure Moderne

Tu te souviens ? On nous avait demandé de regarder le travail de cette équipe puis de leur transmettre nos besoins.

Eh bien il est à présent temps de regarder le portfolio !

Jolis projets n’est-ce pas ? 😀

Petit effet au passage de la souris mais….


NOOOON !

Quand on clique, il ne se passe rien !??

Quel dommage, nous étions pourtant très curieux d’en voir plus !

Le pieds de page : 7ème section visible sur la page d’accueil

7ème partie de la page d'accueil d'Aventure Moderne
7ème section de la page d’accueil d’Aventure Moderne

Et pour finir, la touche finale :

  • tous les bénéfices de rejoindre l’Aventure
  • preuve sociale avec tous les clients qui ont déjà fait confiance au studio
  • l’appel à l’action pour nous rappeler quoi faire maintenant que nous sommes convaincus

Avec ça les craintes du client …

Oui oui, voilà ce qu’elles deviennent ! 😀

Bon en pieds de page (le vrai pieds de page, en noir) nous retrouvons toutes les mentions légales, conditions de ventes, d’utilisation, et la politique de confidentialité.

C’est vraiment quelque chose d’essentiel pour Google et pour le référencement de ton site donc.

Bon, et aussi pour te couvrir toi et tes clients. Mais ça n’est pas dans mon domaine de compétence donc je ne t’en dirai pas plus pour le moment.

Analyse de la fluidité de la page d’accueil

On a vu en détail chaque éléments de la page, mais maintenant nous allons vérifier l’enchaînement des éléments et la pertinence de chacun.

Sur une page d’accueil, comme tout contenu, il est recommandé de faire s’enchaîner les éléments de façon logique.

De raconter une histoire quoi ! Tu l’as sans doute déjà lu 😉

Par exemple ici, alors que dès la deuxième section on nous demandait de regarder le portfolio, il a fallu attendre la 6ème section avant d’y arriver. Ou alors il aurait fallu remonter et cliquer sur “porfolio”.

Ainsi, placer quelques exemples du porfolio à la suite de la 2ème section aurait peut-être été judicieux.

La page d’accueil n’est pas une landing page

Tous les éléments présents sur la page d’Aventure Moderne ne sont peut-être pas essentiels.

  • la table de prix pourrait être remplacée par une mention “A partir de XXX€” qui renvoie vers la page “tarif”. Cela ferait également diminuer le taux de rebond, sans aller à l’encontre de l’argument “Pas de surprise, prix fixe mensuel”
  • la section de “pourquoi votre survie dépend de nous” (en gros :p) est- déjà présente sur la page “tarif”. Sur la page d’accueil elle n’est pas très utile et la surcharge au contraire.
  • Tout est dans le hero (ou presque), le reste c’est du bonus. Plus on descend sur la page moins on a de visiteurs restants. C’est triste mais c’est comme ça. Du coup, le portfolio tout en bas a de grandes chances de ne jamais être vu !

Redesign rapide

Je te présente maintenant un redesign express où nous avons supprimé des éléments et déplacés d’autres, pour essayer de rendre cette page d’accueil encore plus efficace.

Nous avons aussi revu légèrement certains aspects graphiques, notamment supprimé les cartes et gardé seulement le visuel pour supprimer cette envie de cliquer frustrante.

Il faudrait aussi revoir le pied de page pour que tous les liens soient bien placés dans une grille, alignés horizontalement et verticalement (mais nous ne l’avons pas fait dans le redesign).

Je te laisse le télécharger si tu veux (sous forme de pdf) car il était trop grand pour le mettre en image ici. Tu aura aussi sur ce document l’analyse de la page actuelle par type d’éléments, en un seul morceau.

Ce qu’il faut retenir de cette analyse

Eh bien il faudra retenir que … Youhou ! J’ai fait ma première analyse ! J’ai bien transpiré mais je pense que ça en valait la peine.

A part ça, tu peux télécharger le PDF récapitulatif juste au dessus si tu veux.

Et voici quelques points que nous aurons appris avec cette analyse :

  • faire court ! Tes clients et visiteurs courent après le temps, comme tout le monde ! *
  • de nombreux appels à l’action, notamment dans la barre du menu !
  • un héro ( 🙂 ) header qui contient tous les éléments essentiels : produit, bénéfices, appels à l’action, preuve sociale.

*Note : tu aura remarqué que l’équipe d’Aventure Moderne s’est très certainement concentrée sur les toutes premières sections (avec leur super héro) et a moins soigné la seconde moitié de leur page d’accueil. C’est une réflexion à avoir : est-ce que ça vaut la peine que j’investisse du temps et de l’énergie à faire une longue page d’accueil parfaite… qui ne sera jamais lue jusqu’au bout ? Tout dépend de ton domaine, de ta cible… A réfléchir 😉

Merci d’avoir lu cet article, j’espère qu’il te sera utile ! Comme toujours, n’hésite pas à me faire part de tes remarques ou problèmes rencontrés dans les commentaires 😉

A très vite !

Et si tu penses que ça peut intéresser tes amis ou ta famille, n'hésite pas à partager !

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur email
Partager sur whatsapp

7 réponses

  1. Merci pour cette analyse ! Je n’en croyais pas mes oreilles quand j’avais appris que la page d’accueil était la page la plus vue d’un blog ! Raison de plus pour bien la travailler. Merci pour cette analyse ! J’aime bien cet exercice c’est super instructif.

    1. Merci pour ton commentaire 😀
      Chez moi ça ne se vérifie pas, ce sont plutôt mes articles qui sont les plus vus (et de loin). Mais si quelqu’un a entendu parler de toi et cherche le nom de ton site sur google, c’est très probablement sur ta page d’accueil qu’il va tomber. Et comme il a à priori un intérêt pour ton travail (sinon il ne t’aurai pas cherché); autant lui en mettre plein la vue ;p
      J’espère que cet article sera aussi instructif pour toi qu’il l’a été pour moi 😉

  2. Wouhou!!!! Bien détaillé tout ça! J’hésite à te remercier ou a partir en courant tant il me reste de travail sur ma page d’accueil!lol
    Sérieusement c’est cool de détailler tout ça aussi efficacement. Ça permet de voir concrètement ce qu’il y a à faire. Et personnel ment je ne soupçonnais pas qu’il puisse y avoir autant de chose à faire.

    1. Ahah ! Oui il n’y a pas à dire, c’est vraiment en prenant le temps de se poser des questions qu’on apprend le plus 😉 encore deux analyses et je fais un guide (à ma sauce) pour créer une page d’accueil sur Elementor 😀
      Merci pour ton retour enthousiaste en tout cas 😀

  3. Superbe analyse, très instructif pour moi :p. Je suis d’accord sur les plusieurs points que tu as abordé, puis en voyant ton redesign cela confirme tes arguments, et effectivement ça m’a l’air plus structuré ainsi.

    1. Merci Fanny <3
      Oui tant qu'à faire, j'ai essayé de faire un redesign qui corrige les points qui m'avaient chiffonnée :p

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Hello !

Savais-tu que je t’avais préparé un guide-questionnaire pour t’aider à réaliser ton logo ? Et c’est évidemment gratuit ;)

Ne tarde pas à t’inscrire si tu le veux !