8 critères ergonomiques essentiels pour un site web

Il ne suffit pas de produire du contenu de qualité et bien optimisé pour attirer du trafic et convertir. L’ergonomie du site est également primordiale pour assurer une navigation suffisamment agréable pour inciter l’internaute à rester sur le site, voire à passer à l’action. C’est sur ce postulat que les chercheurs Bastien & Scapin ont établi une liste de 8 critères ergonomiques essentiels pour l'UX design d'un site web.

Christian Bastien et Dominique Scapin sont deux chercheurs en ergonomie cognitive et psychologie ergonomique. Leurs différentes études leur ont permis de se rendre compte que l’expérience utilisateur était vraiment différente selon les interfaces, et ont cherché à énumérer tous les éléments qui pourraient améliorer l’UX d’un site.

Ils ont alors établi des critères ergonomiques objectifs pour évaluer l’utilisabilité d’une interface web ou mobile, avant, pendant et après la conception, pour faire en sorte qu’il y ait un standard sur toutes les interfaces, et qu’on puisse faire des audits objectifs.

Les chercheurs Bastien et Scapin ont mis en place une liste d’éléments à prendre en compte pour améliorer l’ergonomie d’une interface, qu’ils regroupent en 8 critères, chacun composé de plusieurs sous-critères.

Critère n° 1 : le guidage

Le guidage correspond à l’ensemble des moyens pour conseiller, informer et conduire l’utilisateur lors de ses interactions. Cela lui permet de toujours savoir où il se situe dans le site, mais aussi au niveau de son parcours utilisateur.

On retrouve dans le guidage de nombreux sous-critères, dont :

• L’incitation : ce sous-critère vise à permettre aux internautes de passer à l’action sans entrave. Il faut alors faire attention à ce que les placeholders soient adéquats (que l’on retrouve bien le format Jour/Mois/Année pour un placeholder « date de naissance », par exemple), ou encore être vigilant à proposer une taille du champ adaptée à la demande d’information ;
• Le groupement et la distinction entre items : cela correspond à l’organisation des items les uns par rapport aux autres, en fonction du format et de la topologie. Par exemple, deux éléments ayant un rapport entre eux doivent être placés à proximité l’un de l’autre, et plus éloignés des éléments sans rapport. La surbrillance en violet des liens déjà passés sont un autre exemple de distinction entre items ;
• Le feed-back immédiat : ce sous-critère correspond, par exemple, au message de confirmation que l’on reçoit immédiatement après avoir passé une commande en ligne ;
• La visibilité : on parle ici du ratio d’accessibilité avec les typographies, les couleurs, la taille des zones de texte, la justification des textes…

Critère n° 2 : la charge de travail

La charge de travail correspond à toutes les étapes par lesquelles doit passer un internaute pour avoir la réponse à sa question, ou pour atteindre la page recherchée. Celle-ci doit être la plus légère possible. Parmi les sous-critères de la charge de travail, on retient principalement la brièveté, qui permet de naviguer au plus vite sur une interface, en évitant un chargement lourd et chronophage. Parmi les éléments de brièveté à mettre en place, on peut retenir :

• Le dévoilement progressif, qui permet d’alléger l’interface en ne dévoilant les blocs qu’au fur et à mesure que l’internaute scrolle, sans les précharger dès l’ouverture de la page ;
• L’affichage du clavier adéquat, comme le clavier numérique pour rentrer un numéro de téléphone ;
• La réduction de la taille des liens…

Critère n° 3 : le contrôle explicite

Le contrôle explicite consiste à faire en sorte que l’utilisateur ait le total contrôle sur l’interface, et que le système exécute uniquement les opérations demandées.

Cela peut se traduire par l’intégration d’un retour arrière, par le choix les labels en fonction de l’état d’avancement d’une action, par la demande de validation après chaque entrée de données…

Le sous-critère du contrôle utilisateur est ici essentiel, et permet, entre autres, d’autoriser les interruptions. Prenons l’exemple de Gmail. Quand on supprime un mail par inadvertance, on a quelques secondes pour revenir en arrière et interrompre l’action en cours. Cela fait partie du contrôle utilisateur.

Critère n° 4 : l’adaptabilité

Illustration vectorielle de deux personnages tenant des panneaux interactifs à mettre sur un canva vierge d'un site web

L’adaptabilité est la capacité d’une interface à s’adapter selon le contexte, les besoins et les préférences des utilisateurs. On compte alors plusieurs sous-critères :

• La flexibilité : faire en sorte, par exemple, que les raccourcis claviers puissent être modifiés, de pouvoir remanier certaines actions selon les préférences, de désactiver certaines fonctionnalités, ou encore de permettre la personnalisation de l’interface comme le fil d'ariane (couleur, police…) ;
• L’expérience utilisateur : cela concerne les moyens mis en œuvre pour respecter le niveau d’expérience de l’utilisateur. On peut alors proposer les fonctionnalités de base pour les novices, et ajouter des fonctionnalités plus pointues pour les experts.

Critère n° 5 : l’homogénéité, la cohérence

La cohérence globale de l’interface homme-machine a pour objectif de respecter une logique d’utilisation constante. Par exemple, on peut établir un color system. Ainsi, si vous avez 4 couleurs dans votre charte graphique, vous n’en utilisez qu’une, voire 2 maximum, pour les éléments cliquables, afin que l’utilisateur soit guidé et se repère facilement sur l’interface.

La cohérence passe aussi par l’attention portée au type system. Par exemple, les H1, H2 et autres éléments structurels d’un contenu doivent être dans des tailles bien définies, afin d’offrir une cohérence et que l’internaute se retrouve dans sa navigation grâce à des critères ergonomiques précis.

Critère n° 6 : la gestion des erreurs

La gestion des erreurs consiste à faire en sorte qu’il y ait différents moyens pour protéger l’utilisateur des erreurs, et qu’il puisse les corriger. Cela peut prendre différentes formes :

• Mettre le champ en rouge quand il y a une erreur (pseudo déjà utilisé…) ;
• Préciser les éléments attendus dans la création d’un mot de passe (une majuscule, un chiffre…) ;
• Afficher les éléments manquants ;
• Informer d’un format inadéquat ou d’une syntaxe incorrecte…

Critère n° 7 : la signifiance des codes

On parle de code signifiant lorsqu’il y a une relation sémantique forte entre les codes et les items auxquels ils se réfèrent. Avoir un code signifiant est donc essentiel pour que le rappel et la reconnaissance soient meilleurs. Il faut alors faire attention à utiliser les bonnes conventions.

Il faut être vigilant à ce que l’interface corresponde à la cible, ainsi qu’à leurs vices et coutumes.

Critère n° 8 : la compatibilité

La compatibilité consiste à adapter l’interface aux caractéristiques de l’utilisateur. Si, par exemple, on s’adresse à des personnes qui bougent beaucoup, on pense avant tout au responsive. Si on s’adresse à des personnes âgées, on choisit une interface sobre, aérée, claire et parfaitement guidée.

Le langage de l’utilisateur est aussi à prendre en compte. Si on s’adresse à des personnes expertes dans le domaine, on peut utiliser des termes techniques, mais si on s’adresse à des novices, il faut adapter le contenu.

L’expérience utilisateur ne se résume pas à un contenu de qualité, et l’ergonomie du site est d’une importance majeure. Lemon Interactive vous accompagne dans la création de votre site, afin de répondre à tous les critères ergonomiques de Bastien et Scapin, et d’offrir une expérience utilisateur optimale à vos internautes.