Analyse d’une page d’accueil : 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

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é.

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

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

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

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

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

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

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 !