UX#01 - Conception d'une page d'accueil
La page d’accueil d’un site Internet donne le ton à tout ce qui suit. C’est un condensé de votre site, aux objectifs et design variés.
Toute la problématique dans la conception d’une page d’accueil est de trouver le bon dosage pour la rendre attractive, sans pour autant être too much.
C’est un excellent exercice de design car l’essentiel de vos visiteurs vont passer par là et doivent comprendre où ils sont dès cette étape. Ca sera notre discussion de cette semaine !
Objectifs & Enjeux
Selon votre activité, votre page d’accueil aura différents objectifs. Majoritairement, elle servira d’introduction pour amener vos utilisateurs sur les autres sections du site.
Sur un site corporate, vous présenterez les derniers travaux ou actualités de l’entreprise, sur un blog, ça sera les derniers articles, ou encore sur un site ecommerce, ça sera les derniers produits ou les promotions.
Les objectifs doivent être évidents pour l’utilisateur. Il faut qu’il comprenne ce que la page d’accueil veut lui montrer et où elle veut l’emmener. Vous pouvez être sûr qu’un utilisateur qui ne sait pas où il est va juste repartir.
Point commun à toutes les pages web : on ne doit jamais être “perdu” dans un site. Une page web bien designée doit avoir une directive principale et des éventuels embranchements cohérents.
Chaque page doit faire partie d’un story-board, un scénario de navigation prévu à l’avance. Limitez-vous à une information importante par page, et vos utilisateurs ne se poseront pas de questions.
C'est un des défauts que - je trouve - CDiscount illustre depuis toujours. C'est tellement le foutoir qu'on ne sait pas où chercher quand on arrive.
Afin de suivre si vos objectifs sont accomplis, vous pouvez utiliser un outil comme Google Analytics ou Matomo/Piwik, ou même développer vos propres outils de suivi. On appelle ça des évènements, c’est à dire, des actions déclenchées par les utilisateurs.
Cela peut-être un clic sur un bouton, un scroll, une saisie de formulaire, ou même la position du curseur. Chaque élément essentiel devrait avoir son suivi, pour s’assurer de son utilité.
Contenus & Fonctionnalités
Ne surchargez pas votre page d’accueil ! C’est une des principales erreurs que l’on retrouve, on veut tout mettre parce que tout est important, et on se retrouve avec une page qui déborde que personne ne lit ou ne comprend.
Soyez sélectif. Vos textes devraient se limiter à une phrase courte introductive, ou à une accroche de quelques lignes pour les blogs ou produits.
De même, à moins d’avoir un site n’ayant qu’une seule page, vous ne devriez pas avoir de grosse fonctionnalité sur votre page d’accueil pour des raisons de performances principalement.
En effet, si votre première page met du temps à charger, il est probable que vos visiteurs partent. La patience n’est pas une vertu répandue sur Internet. De plus, les robots prennent en compte ce temps de chargement et cela influence votre position dans les moteurs de recherche !
Lorsqu’un utilisateur charge une page et s’en va, il créé un évènement appelé “rebond”. Le taux de rebond est une statistique intéressante car elle permet d’étudier l’impact de votre page d’accueil (et de vos pages en général).
Ses deux screens montrent des stats drastiquement différents, mais néanmoins normaux. Le site à 40% est un site corporate, qui dispose d’un très grand nombre de pages et de connexions internes. Le faible taux de rebond veut dire que les personnes visitant ce site ne s'arrêtent pas à la page d'accueil, ce qui est bon signe !
Le site à 90% est le nôtre, dont la majorité du trafic provient de Facebook pour le blog ou de Google pour les gens cherchant une agence web. Il est logique qu’une personne qui lit un article partagé sur Facebook reparte ensuite. Cependant, il serait intéressant de retravailler notre page d’accueil pour diminuer le taux de rebond sur cette dernière.
Nota : On considère un taux de rebond faible quand il est en dessous de 50%. En effet, il y a beaucoup de stats qui ne sont pas à prendre en compte : les erreurs, les fermetures d'onglet, les gens qui travaillent sur le site etc...
Design
Comme on l’a dit plus en introduction, la page d’accueil se doit d’être attractive. C’est un peu comme un CV, pour quelle raison votre internaute devrait s’attarder dessus plutôt que sur celui de votre concurrent ?
Normalement, vous avez déjà établi une charte graphique. L’idéal est de créer un squelette différent de celui des autres pages en la respectant. Cela vous donnera une plus grande liberté pour présenter les aspects les plus importants de votre site et lui donnera une certaine unicité.
Quand on parle de squelettes, on parle de structures de pages, ou de layouts. Ce sont des schémas simplifiés que l’on découpe pendant le développement d’un site.
Voilà un condensé des principaux squelettes sur le web :
Dans la colonne centrale, on retrouve généralement les contenus que vous pouvez administrer via votre back-office. Ouvrir cette partie implique de standardiser la structure du site et fait que tous les sites se ressemblent plus ou moins. Et donc différencier la page d’accueil permet de casser cette ressemblance entre deux sites.
Pour concevoir la structure de cette page, pas besoin d’être designer ! Il existe aujourd’hui des tas d’outils permettant de créer des esquisses de pages web.
Bootstrap Studio, Atomic, Macaw, Adobe XD, Pixlr, Wix sont des concepteurs web plus ou moins gratuits permettant de concevoir des pages web sans connaissance de développeur.
Ils nécessitent toutefois de savoir où vous allez, et donc d’avoir des notions de designer. A savoir également qu’il est improbable d’arriver exactement à ce que vous voulez. Même si on a fait d’énormes progrès, il reste difficile pour un concepteur d’atteindre la précision d’un développeur.
Si vous n’avez pas de notions de design, mais que vous travaillez avec un prestataire UX ou un développeur, vous pouvez utiliser des wireframes comme Wireframe.cc.
On en a listé quelques autres là : https://www.webexmachina.fr/article/2017/11/rediger-un-cahier-des-charges/6-conclusion-ressources-utiles.html
Enfin, rien ne vaut un exemple donc n’hésitez pas à communiquer des pages d’accueil que vous appréciez et pourquoi vous les appréciez, ainsi que la réflexion opposée à vos prestataires. Cela les aidera à vous comprendre et à créer quelque chose d’adapté à votre besoin.
Cas concrets
On l’a dit, rien ne vaut un exemple ! Donc voilà quelques pages d’accueil, extraites de sites Internet ou de templates existants, avec notre avis sur leur structure.
Cas 1 : AirBNB - https://www.airbnb.fr/
Le service n’est plus à présenter, Airbnb est connu et utilisé dans le monde entier. S’il s’est aussi bien démocratisé, c’est avant tout grâce à son interface ultra simple à comprendre !
Page d’accueil très simple, on retrouve uniquement le formulaire de recherche en avant, ainsi qu’un menu pour aiguiller les autres types d’utilisateurs. Une fois que l’on descend dans la page, le site nous fait explorer des offres aléatoires, donnant ainsi un aperçu clair et concis de ce que l’on va trouver en recherchant une destination.
Cas 2 : StéréoSuper - https://frenchies.stereosuper.fr
La force de cette page d’accueil, c’est l’efficacité et l’originalité. Elle ne dit pas grand chose pourtant ! Mais le détail de votre curseur qui se change en mouche et se fait gober par la grenouille donne un caractère unique à cette page.
La navigation qui dévoile aussi les contenus est un parti-pris intéressant, un peu bugué sur certains navigateurs mais le multi-support (compatibilité tous navigateurs) n’est pas l’objectif recherché ici.
Cas 3 : ASOS - https://www.asos.fr/
Et un exemple e-commerce pour finir avec le site ASOS. Page d’accueil découpée en 3 parties, avec la page portail, et deux pages d’accueil dédiées aux produits féminins et masculins.
Cela permet déjà de réduire l’immense catalogue de la boutique mais pourrait aussi leur permettre d’ajuster les éléments du site en fonction du genre. Ce n’est pas le cas ici, mais ils pourraient.
La construction d’une page d’accueil doit être traitée avec une attention particulière. C’est la page qui présente l’essentiel de votre activité et qui vous différencie de vos concurrents sur Internet.
Pour ce qui est du timing, cela peut paraître illogique mais il est recommandé de faire cette page à la fin de votre site Internet.
Une fois la totalité du design et des contenus validés, vous êtes alors plus à même d’extraire l’essentiel du projet et de les mettre en avant sur votre page d’accueil !
Ne cherchez de toutes façons pas à faire la parfaite page d’accueil. Votre design, ainsi que votre cible et votre expérience vont évoluer, donc votre site Internet évoluera en conséquence.
Et surtout, testez-là ! Auprès de clients, collègues ou amis, analysez leur comportement en direct et demandez-le pourquoi ils naviguent comme ils le font. Si la réponse vous satisfait, vous êtes bons pour une mise en ligne !
Dans la même catégorie
