Offrir une bonne expérience à ses visiteurs est tout simplement primordial quand on tient un site, à plus forte raison quand il s'agit d'un site professionnel qui permet d'apporter du business (ventes ou leads) à son entreprise.
Mais comment améliorer l'ergonomie d'un site ? Quelles sont les bonnes pratiques à respecter pour essayer de retenir les visiteurs au maximum ?
Dans cet article
La vitesse de chargement, composante sous-jacente de l'ergonomie
Google l'a répété à de nombreuses reprises : 53% des utilisateurs mobiles abandonnent un site qui met plus de trois secondes à charger... et ces 53%, ce sont autant de lecteurs, d'acheteurs ou de prospects perdus alors qu'ils auraient pu interagir avec vos contenus.
Ainsi, si la vitesse de chargement d'un site ne fait pas partie de son design à proprement parler, c'est néanmoins une préoccupation qui doit être en toile de fond de toutes vos réflexions sur le design.
Pensez aussi à vous renseigner sur les formats innovants comme le format AMP (Accelerated Mobile Pages) qui permet de proposer aux visiteurs sur mobile des pages allégées, qui se chargent rapidement (parfois en moins d'une seconde).
Les PWA (progressive web apps), des sites web qui empruntent certaines fonctionnalités aux applications mobiles, peuvent aussi constituer un vrai choix technologique en offrant la possibilité aux internautes de consulter certains de vos contenus hors-ligne lorsqu'ils sont sur mobile.
Penser à la vitesse de chargement, c'est aussi abandonner des fonctionnalités "gadgets" qui n'ont pas de réelle utilité sur votre site. Par exemple, un slider grand format en page d'accueil a-t-il encore sa place à l'heure où les internautes "zappent" de plus en plus vite ?
Le slider consomme pas mal de ressources et en plus, il est souvent assimilé par l'internaute à une bannière publicitaire... chose que nos yeux avertis ont tendance à ignorer naturellement.
Pensez "clarté" avant tout.
Le contenu, une autre composante essentielle
Ça paraît idiot… mais c'est pourtant un aspect que beaucoup de gens négligent : le contenu lui-même. Parfois, on a un site qui offre une interface très optimisée (les textes sont lisibles, le menu est bien pensé, il y a des boutons bien visibles pour les actions essentielles à effectuer, etc) mais où le contenu que recherche l'internaute est absent.
C'est toute la différence entre UX (user experience = expérience utilisateur) et UI (user interface = interface utilisateur). On peut avoir un site bien conçu (bonne UI) mais une expérience utilisateur (UX) très décevante.
Pour pallier à cet écart qui peut exister entre les deux, il y a à mon sens deux points clés à prendre en considération.
Penser le site pour le visiteur, pas pour vous
Quand No Tuxedo a vu le jour en tant que blog web, j'avais créé mon menu en fonction des catégories que JE jugeais pertinentes. Par exemple, j'avais une vaste catégorie fourre-tout "Conseils blogging", une autre catégorie "Développement personnel" qui abordait plutôt les aspects "psychologiques" liés à la gestion d'un site (la confiance en soi, la peur de se lancer, etc).
C'est en interrogeant mes lecteurs sur leurs problèmes grâce à un sondage que j'ai pris conscience que leurs préoccupations étaient "segmentées" différemment. Il y avait le fait de "gagner du trafic", de "monétiser son site" ou de le professionnaliser, de "créer un blog" à proprement parler… et ce sont ces préoccupations qui m'ont poussée à repenser totalement le menu.
Si j'en retiens une leçon, c'est qu'on a beau connaître (un peu) son sujet, on n'est pas le mieux placé pour penser l'expérience utilisateur sur son site.
C'est d'ailleurs pour ça qu'un UX Designer ne va jamais se limiter à vous dire "Il faut mettre en forme le site comme ceci"... mais va au contraire recourir à une panoplie de méthodes pour analyser le comportement réel de vos visiteurs, ce qu'ils recherchent, comment ils le recherchent et quels sont les points bloquants pour eux.
Communiquer sur l'absence de contenu
Si vous n'avez pas de contenu à proposer sur un sujet, n'hésitez pas à proposer aux visiteurs une action alternative. Par exemple : "Vous ne trouvez pas la réponse à votre question ? Contactez-nous".
C'est ce que j'ai essayé de faire sur mon blog, quand une recherche effectuée par l'internaute ne débouche sur aucun contenu pertinent.
L'essentiel sans avoir à scroller
Votre proposition de valeur, ce que vous avez à offrir aux internautes, doit apparaître très clairement sur la page sans qu'il soit nécessaire de scroller.
Pour améliorer l'ergonomie d'un site amateur, on peut ainsi faire en sorte que l'introduction des articles - qui présente le bénéfice que vous allez apporter aux lecteurs - soit visible assez rapidement.
Pour un site professionnel, vous pouvez mettre en avant très vite vos critères différenciants : par exemple "20€ offerts sur votre première commande. Créez un compte maintenant" ; "5% de réduction réservés aux abonnés de la newsletter. Je m'abonne !"
Si l'objectif de votre page est d'obtenir une action de la part du visiteur, par exemple remplir un devis, s'inscrire sur le site, faire une simulation ou encore acheter un produit, faites aussi en sorte que le call-to-action pour effectuer l'action soit visible sans que le visiteur ait besoin de scroller pour descendre plus bas sur la page. C'est particulièrement stratégique sur mobile.
Valorisez votre contenu sous forme visuelle
Améliorer l'ergonomie d'un site passe aussi par la dimension visuelle, un aspect sur lequel je reconnais être mauvaise élève. C'est d'ailleurs un point qu'il me faudrait clairement améliorer si je devais un jour faire de No Tuxedo une part clé de mon activité professionnelle !
En effet, il faut éviter d'inonder l'internaute d'informations superflues qui noient l'essentiel. Quand on est perfectionniste ou tout simplement passionné par son sujet, on a envie de TOUT dire, on a l'impression que TOUT est important, que TOUT contribue à aider l'internaute. La réalité… bah non, en fait, ce n'est pas le cas.
Sur un article de blog, ce n'est pas très grave d'en dire trop mais sur une page produit par exemple, ne pas savoir structurer une information pour faire ressortir l'essentiel peut clairement détourner l'internaute de l'achat et déboucher sur des performances business catastrophiques.
Idéalement, il faut aujourd'hui abandonner les blocs de texte trop compacts et trop longs et "couper la lecture" en utilisant des éléments visuels pour guider l'internaute dans son cheminement :
- Des gros titres, suivis de petits paragraphes.
- Des icônes.
- Des bullet points, qui facilitent l'accès aux contenus essentiels.
En 1997, déjà, une étude Nielsen Norman Group avait montré que 79% des internautes ne lisaient jamais à proprement parler sur le web, ils se contentaient de survoler les contenus en s'arrêtant sur ce qui retenait leur attention. 16% des gens seulement lisaient scrupuleusement mot-à-mot les articles. Le reste faisant un mélange des deux !
Vous remarquerez d'ailleurs que la tendance actuelle de beaucoup de pages d'accueil, landing pages et pages produit consiste à mettre en exergue 3 atouts majeurs d'un produit, ou 3 priorités...
Voici un exemple sur le site d'Oodrive, qui propose des solutions cloud sécurisées aux entreprises.
Aidez l'internaute à trouver ce qu'il cherche
Améliorer l'ergonomie d'un site consiste aussi à aider l'internaute à accéder facilement au contenu clé dont il a besoin.
Voici des exemples de fonctionnalités qui peuvent être très utiles pour guider ce cheminement :
- Un moteur de recherche bien visible - Hélas, nous ne pouvons pas avoir en tête toute l'étendue de ce que l'internaute peut désirer. Proposer un moteur de recherche permet de l'aider à accéder aux ressources qui ne sont pas à sa portée immédiate.
- Un store locator - Pour un site professionnel, mettre en avant rapidement (2 clics maximum de la page d'accueil) l'adresse de sa/ses boutique(s) et une fonctionnalité de géolocalisation permet de guider l'internaute qui ne souhaite pas convertir en ligne. Pensez à inclure les adresses précises et idéalement, la possibilité de planifier son itinéraire (via Google Maps par exemple). Indiquez également les horaires d'ouverture.
- Des boutons très visibles pour les actions essentielles à effectuer.
- Un numéro de téléphone permettant de parler à un interlocuteur physique, pratique pour les personnes qui ont besoin d'informations complémentaires.
Et, beaucoup plus simplement, ne négligez pas les templates "types" des sites web. Autrement dit, il y a des éléments que l'on s'attend à retrouver à un endroit précis d'un site. Par exemple, le menu en haut de page, les mentions légales tout en bas, le bouton "Rechercher" ou le panier d'achat sur un site e-commerce plutôt en haut à droite…
On pourrait avoir envie de laisser s'exprimer sa créativité en bouleversant complètement ces codes… sauf que dans la réalité, ça risque de dérouter l'internaute de manière non productive ! On peut tout à fait exprimer sa créativité dans les limites d'un "modèle" communément admis sur le web.
Aidez l'internaute à chaque étape de la conversion
Si votre site propose un tunnel de conversion pour conduire l'internaute à faire un devis ou un achat, celui-ci doit comporter des éléments essentiels pour une bonne expérience utilisateur. J'ai pu accéder à une liste de ces éléments établie par Google pour pousser les entreprises à améliorer l'ergonomie d'un site dans une perspective de conversion.
- Afficher une proposition de valeur à chaque étape du tunnel de conversion - Par exemple, rappeler "Obtenez votre devis en moins de 2 minutes".
- Proposer rapidement un bouton d'appel - Il y a toujours des internautes qui ont peur de convertir en ligne ou qui ont besoin de plus d'informations pour mener à bien leur action. Proposer rapidement un numéro de téléphone pour être guidé ou rassuré par un interlocuteur humain peut éviter des abandons.
- Offrir une pagination - Ça permet à l'internaute de savoir à tout moment où il en est dans le processus. On peut choisir de mettre tout le processus de conversion sur une seule page avec des étapes numérotées... ou de le faire sur plusieurs pages avec une barre de navigation qui indique où on en est et combien d'étapes il reste à franchir. La petite astuce en plus que donne Google, c'est de ne pas débuter cette barre à 0 (dans l'esprit "vous avez accompli 0 étape sur 5") mais plutôt de considérer que le fait d'avoir engagé la procédure permet déjà à l'internaute de franchir un premier palier (dans l'esprit "Plus que 4 étapes sur 5 à accomplir !").
- Limiter les opportunités de quitter le processus de conversion - Évitez tout ce qui peut distraire l'internaute et le pousser à renoncer... et limitez le nombre de champs obligatoires (car si l'internaute n'a pas l'information à portée de main, ça va l'obliger à renoncer à son action alors qu'en lui offrant la possibilité de renseigner l'information plus tard, vous évitez de le perdre !).
- Proposer de continuer plus tard/ailleurs - Parfois, on peut être interrompu pendant un processus de conversion et avoir la possibilité de le continuer plus tard ou sur un autre appareil. Imaginez une personne qui commence un devis dans les transports en commun, sur son mobile, et souhaite le finir sur son PC en arrivant au bureau... Il est utile de proposer à la personne d'enregistrer sa demande en cours pour pouvoir y accéder et la finaliser plus tard.
- Valider en temps réel les champs de formulaires - Sur un formulaire, il y a toujours des champs qui doivent avoir un certain format (par exemple, le numéro de téléphone, le mot de passe qui doit répondre à certaines exigences, le code postal). Donnez la possibilité à l'internaute de voir en temps réel si le champ est bien rempli.
- Rendre le résultat du processus évident - A la fin du tunnel de conversion, l'aboutissement doit apparaître de manière claire pour l'internaute. Par exemple, si le processus débouche sur un tarif ou sur plusieurs propositions, n'hésitez pas à les mettre en parallèle pour que la personne voit clairement les bénéfices de chaque option et son prix.
Ici par exemple, lors d'une demande de devis sur le site Les Furets, les choix simples sont visibles immédiatement et faciles à cocher.
Dans le même esprit, il existe aussi des techniques pour simplifier la vie des internautes et rendre la complétion d'un formulaire plus rapide et moins fastidieuse :
- Utiliser l'auto-complétion - Au lieu de renseigner une adresse par exemple, on peut relier son formulaire à l'API de Google Maps pour proposer une auto-complétion et éviter à l'internaute de tout renseigner à la main, un bon moyen d'améliorer l'ergonomie de son site.
- Montrer toutes les options pour les choix simples - Il n'est pas utile de faire des menus déroulants pour tous et n'importe quoi, en particulier si le nombre de choix est réduit (oui/non, etc). Vous pouvez à la place utiliser de simples boutons.
- Afficher le pavé numérique sur mobile quand il faut entrer un nombre dans un champ - Si la donnée attendue est un nombre (code postal, numéro de téléphone), autant proposer directement à l'internaute de l'entrer sur un pavé numérique plutôt que de ramer avec ses (gros) doigts sur les (petites) touches du clavier classique.
J'espère vous avoir donné à travers cet article quelques clés pour engager une vraie réflexion sur l'ergonomie d'un site web. C'est une discipline passionnante et je suis parfois frustrée de n'avoir "qu'un" site amateur sur lequel je ne peux pas m'offrir les services d'un UX designer… car cette discipline mêle une réflexion très globale sur le comportement, la psychologie de l'utilisateur, son expertise, VOTRE expertise en tant que propriétaire du site, les tendances du design, la performance…
C'est un aspect trop souvent négligé lors de la conception d'un site web, au détriment du style. On choisit un design parce qu'il nous plaît, correspond à nos goûts… au lieu de le concevoir parce qu'il va répondre aux attentes précises de nos visiteurs.
Explications pertinentes ( comme d ‘habitude , je sais) et qui amènent à une remise en cause des idées de départ . Donc je vais repenser mon développement . si j’osais j’aimerais une suggestion. Vu la clarté de vos explications ( on se sent moins bête ) pourriez vous aborder le fait de bosser en local , avec wordpress et dreamweaver ou d ‘autres idées. cela serait plus sécurisant ( plutôt que de faire mes bêtises sur le site directement :)
The Real Person!
The Real Person!
Bonjour Frédéric, je ne conseillerais pas du tout Dreamweaver pour faire un site. En revanche, je vais travailler la semaine prochaine sur un article concernant WP Staging, qui permet de créer un site WordPress de « démo » invisible pour les visiteurs, sur lequel on peut tester ses changements. Le plugin est très facile à utiliser, je ne publierai sans doute pas le tutoriel avant l’été mais cette extension vous serait sûrement utile ;)
Merci de votre réponse . il ne me reste plus qu’à attendre l’été . vos explications étant bien plus claire que les autos et explications généralement en ligne . ( la preuve ? je galère avec Wamp et Mamp, mais c’est une autre histoire ….)
:)
Merci pour tes conseils ! :)
J’ai récemment complètement revu le menu de mon blog (et des sujets que j’avais envie d’aborder et de quelle façon, au passage) et je le trouve beaucoup plus simple et opérationnel. ^^
The Real Person!
The Real Person!
C’est parfois utile de se reposer des questions sur son propre site… même si avec le temps je trouve qu’on manque un peu de recul ! J’aimerais parfois profiter d’un regard extérieur :)
Merci Marlène pour tes conseils toujours avisés. Mon blog est un simple blog amateur, donc l’ergonomie est sans doute moins importante que pour un blog pro, mais j’ai tout de même essayé de créer un site intuitif avec des menus que j’espère clairs. J’ai installé (en haut à droite, comme tu le préconises) une fonction « recherche » grâce à une extension (Better search). Toutefois, elle est absolument inefficace : dès que je cherche le nom d’un auteur sur lequel j’ai écrit un billet, ma recherche ne donne rien. Idem pour mes billets d’expat : si je tape « Japon », c’est vain, alors qu’un grand nombre d’articles concernent ce pays. J’envisage de supprimer cette extension que je trouve nulle. Cependant, j’aime bien l’idée de pouvoir rechercher quelque chose sur un site. Connaîtrais-tu une autre extension qui soit efficace ? Merci par avance et bonne soirée !
The Real Person!
The Real Person!
Le moteur de recherche par défaut de WordPress ne te convenait pas pour quelle raison ? As-tu essayé de demander de l’aide sur le forum de support de Better Search ? C’est un bon plugin habituellement donc il y a peut-être un bug chez toi ou une particularité (champs personnalisés, etc).
Sinon, il y a Ivory Search qui est plutôt bien, ainsi que Relevanssi (sachant que celui-ci peut être gourmand en ressources).
Merci pour ta réponse rapide. Le moteur de recherche par défaut n’était vraiment pas top et je crois bien que c’est un de tes articles qui m’a fait changer pour Better Search. Si je me souviens bien, au début ça fonctionnait mais depuis j’ai changé de thème… ceci explique peut-être cela… Je vais aller voir sur le forum si d’autres sont confrontés au même problème que moi et le cas échéant, je testerai un des deux autres que tu cites. Merci comme toujours pour ta réactivité et tes conseils de pro. Bonne soirée !
C’est encore moi ! Je viens de regarder les réglages de Better Search et il semble que plusieurs choses étaient cochées contrairement à avant ; je ne me rappelle pas avoir modifié quoi que ce soit (Alzheimer me guette peut-être) mais j’ai tout remis à plat et ça semble fonctionner comme avant. Mon changement de thème (ou mon passage en https) n’est donc sans doute pas la cause du dysfonctionnement. Je garde néanmoins tes alternatives sous le coude, on ne sait jamais, merci et pardon de t’avoir embêtée, je n’avais pas pensé à revérifier les réglages… puisque je ne me souviens pas les avoir changés !
Article bien détaillé avec de bons supports visuels!
The Real Person!
The Real Person!
Merci à toi !
Article très intéressant (comme d’habitude !). Pour l’instant, je débute avec mon blog personnel. Mais il y a tout de même un aspect sur lequel j’aimerais trouvé des astuces : l’arborescence de la page d’accueil d’un blog. Pour l’heure, mes quelques articles sont publiés pêle-mêle à mesure qu’un article est publié. mais par la suite, lorsque je commencerai a avoir un contenu plus conséquent, quel arborescence privilégier ? As-tu toi-même des conseils en la matière ?
Merci beaucoup pour cet article en tout cas. Je n’en manque plus un seul depuis que j’ai découvert ton site.
The Real Person!
The Real Person!
Hello Magalie, quand tu parles « d’arborescence de la page d’accueil », tu fais référence au contenu de la page d’accueil lui-même (dont j’ai parlé ici) ou à l’arborescence du site (le menu, la structuration des contenus) ?
Je pense pour ma part qu’il n’y a pas de structure « type », il peut y avoir des choix stratégiques différents à partir d’un même contenu. Il y a un exemple que j’aime bien, c’est celui d’un blog qui parlerait à la fois de cuisine et de voyage. On pourrait imaginer deux univers étanches, avec un menu « cuisine » et un menu « voyage » séparés… tout comme on peut imaginer une entrée par zone géographique (où on retrouverait des articles voyage ET cuisine sur une même destination).
Il y a bien sûr de bonnes pratiques, comme le fait d’éviter les contenus trop profonds (qui exigent plus de 3 clics pour y accéder), le fait d’opter pour des intitulés clairs, etc.
Merci beaucoup pour ta réponse. Je pensais avoir lu tous les articles de ton blog, mais je découvre celui qui parle de la page d’accueil ! Merci, je viens d’y jeter un coup d’œil du coup. Je parlais surtout de la façon de hiérarchiser le contenu (les postes) sur la page d’accueil davantage que les menus ou widgets. Mais l’article que tu cites et que tu as écrit en 2018 m’éclaire et me rassure. Je vois que ma configuration actuelle convient tout à fait à mon blog qui n’a pas vocation professionnelle :)
The Real Person!
The Real Person!
J’ai fait deux choix très différents sur mes blogs :
– Sur No Tuxedo, toutes les rubriques sont « interconnectées » car les sujets sont complémentaires les uns par rapport aux autres. Du coup, la page d’accueil est elle aussi très « multi-thématiques » avec un mélange de contenus récents, de liens thématiques et de liens aléatoires.
– Sur mon blog voyage, à l’inverse, je considère qu’une personne qui s’informe sur une destination précise n’a pas forcément envie de voir du contenu sur une autre destination… donc je présente plutôt les destinations mais j’évite d’afficher des articles aléatoires ou de mettre plus d’un seul contenu récent.
Ça reste assez libre en fonction de l’endroit où on veut emmener son blog… et c’est quelque chose que l’on peut faire évoluer dans le temps aussi (typiquement, à mes débuts je ne savais pas du tout où je voulais emmener mon blog ^^).