Comment optimiser l'ergonomie de son site web ?

L’ergonomie web : une association des critères d’utilité et d’utilisabilité 

Sous-domaine de l’ergonomie générale, l’ergonomie web vise à analyser les besoins des utilisateurs finaux afin de créer des interfaces adaptées à leurs attentes. Un site web est seulement ergonomique une fois que ses concepteurs ont pris soin de s’attarder sur une somme de détails définissant et simplifiant son usage ainsi que son attractivité. Ce sont ces détails sur lesquels se joueront l’utilité et l’utilisabilité d’un site (critères essentiels en ergonomie) et en définitive une satisfaction ou non de l’expérience client.  

La notion d’utilité

La notion d’utilité renvoie à ce que permet de faire un site web ou service, autrement dit ce à quoi il sert pour l’utilisateur. Il faut donc avoir une idée précise des besoins et envies des visiteurs du site, afin de deviner ce qui peut leur être utile ou non. Ensuite, il sera primordial de penser à la notion d’utilisabilité pour que l’internaute s’attarde sur ledit site et puisse réellement profiter de son utilité.

La notion d’utilisabilité

Fournir aux internautes un site avec une utilité générale est une chose, mais penser et optimiser son utilisabilité à travers de bonnes pratiques en est une autre. La norme ISO 9241 définit notamment l’utilisabilité de la manière suivante : « Un produit est dit utilisable lorsqu’il peut être utilisé avec efficacité, efficience et satisfaction par des utilisateurs donnés, cherchant à atteindre des objectifs donnés, dans un contexte d’utilisation donné. » On retient dans cette définition les notions d’efficacité, d’efficience et de satisfaction : 

• L’efficacité signifie qu’un utilisateur va réussir à réaliser ce qu’il désire faire sur le site. Il doit être à l’aise lorsqu’il le prend en main et disposer de moyens pour faciliter son apprentissage sur ledit site. L’efficacité est le critère principal à satisfaire pour les interfaces grand public, surtout pour celles où les attentes en matière de séduction de nouveaux utilisateurs sont fortes.

• L’efficience désigne la capacité pour un utilisateur donné à accomplir sa tâche rapidement, avec le moins d’erreurs possible. C’est une dimension critique sur les interfaces spécialisées, les applications métier…surtout lorsqu’il s’agit de conserver des clients existants.

• La satisfaction implique que l’utilisateur prenne du plaisir et se détende lorsqu’il vient naviguer sur un site web. 

Concevoir un outil utile mais peu utilisable peut faire fuir les utilisateurs. 

Obtenir un outil très utilisable mais qui ne sert à rien n’est pas non plus une option à privilégier. C’est pourquoi il faut toujours façonner l’ergonomie d’un site en combinant les notions d’utilité et d’utilisabilité, sans en laisser une sur le bas-côté. Les deux sont complémentaires.

Ne pas confondre Ergonomie web avec Expérience utilisateur (UX). L’ergonomie web cherche à rendre un site utile et utilisable. Tandis que l’expérience utilisateur s’intègre dans une réflexion plus globale, allant au-delà de l’ergonomie. Elle vise notamment à rendre les internautes heureux d’utiliser l’interface à travers une UX qui se focalise davantage sur l’émotionnel, le plaisir, l’agréabilité.

Comprendre l’utilisateur avant d’optimiser l’utilisabilité d’un site 

Avant de concevoir des expériences adaptées à l’utilisateur d’un site web, il est d’abord nécessaire de le connaître en prenant en compte ce qui le définit en tant qu’être humain. Pour cela, l’ouvrage Ergonomie Web & UX Design  – Pour une conception centrée utilisateur d’Amélie Boucher nous donne des principes, basés sur des connaissances en psychologie cognitive et en sciences de la perception, sur lesquels s’appuyer. On trouve notamment les théories de Gestalt et à la loi de Fitts.

Les théories de Gestalt

Les théories de Gestalt traitent de la manière dont notre cerveau analyse le monde environnant comme un ensemble de formes. Dans le cadre de notre sujet, elles expliquent comment un internaute voit et intègre mentalement une page web. On distingue 3 principales lois de Gestalt qui sont pertinentes dans le domaine du web : celle de proximité, celle de similarité ainsi que le point focal.

LA LOI DE PROXIMITÉ

La loi de proximité affirme que notre cerveau tend à associer, d’un point de vue de la compréhension, des éléments qui sont proches visuellement, car cela préjugerait d’une proximité conceptuelle. Autrement dit, ces éléments entretiendraient des points communs, un rapport significatif. À l’inverse, notre cerveau considère qu’il y a une différenciation à faire entre deux objets qui sont éloignés visuellement.

De nombreux défauts d’organisation de pages sur le web sont dus à une mauvaise application de la loi de proximité. Des pages sont fréquemment organisées de telle manière qu’elles ne traduisent pas (ou mal) les rapports conceptuels entre leurs différents éléments constitutifs. Un manque d’espace, de respiration par exemple entre les groupes d’informations à l’écran ne va pas permettre de distinguer des ensembles distincts. Or le discernement est essentiel afin que les internautes puissent comprendre rapidement ce qui leur est proposé. Il faut alors privilégier un rapprochement des objets entretenant un rapport fonctionnel et au contraire éloigner ceux qui n’ont rien en commun.

Dans l’exemple ci-dessous, un manque de prise en compte de la loi de proximité vient compliquer la mise en relation mentale des civilités avec les boutons radio correspondants. Un simple travail de rapprochement de ces boutons et de leurs libellés correspondants réduit ce risque d’erreur. 

LA LOI DE SIMILARITÉ

La loi de similarité (ou de similitude) énonce que notre cerveau a tendance à regrouper les choses qui se ressemblent. Une ressemblance ou une différence de taille, couleur, forme, contenu ou comportement sera donc le signe que les objets sont comparables ou opposables d’un point de vue conceptuel. 

LE POINT FOCAL

Le point focal désigne le fait de faciliter la prise visuelle d’informations en concevant des écrans sur lesquels l’utilisateur remarque tout de suite ce qui est important. En partant du principe que notre attention est naturellement dirigée vers des éléments saillants qui se distinguent du reste, il faut faire attention à ce que les call-to-action principaux, par exemple, soient repérables en un clin d’oeil et sans ambiguïté. Leur présentation visuelle (taille, forme, couleur, localisation) doit permettre de les distinguer.

Dans le premier exemple ci-dessous, le bouton lecture de Spotify agit bien comme point focal car il est saillant et se distingue nettement des autres éléments à l’écran. Dans le second exemple, un message de confirmation apparaît pour confirmer que l’utilisateur a bien épinglé un item. Le cartouche dans lequel il est affiché se distingue visuellement du reste de l’écran et agit comme point focal temporaire. 

La Loi de Fitts

Une cible est d’autant plus rapide à atteindre qu’elle est proche et grande. Cette règle est ce que l’on appelle la loi de Fitts. Appliquée en web, plus un élément cliquable est gros avec une distance faible entre cet élément et le point de départ du mouvement (emplacement du pointeur de la souris sur desktop et du doigt sur mobile), plus il sera atteignable facilement et rapidement par l’utilisateur. Différents types d’objets cliquables sont soumis à cette loi : logos, barres de navigation, icônes, images, boutons, liens hypertextes… L’importance accordée à faciliter la cliquabilité de ces éléments découle aussi principalement de leur fréquence supposée d’utilisation. Il est par exemple beaucoup plus important d’optimiser la cliquabilité des éléments de navigation et call-to-action principaux que celle d’un lien hypertexte isolé au sein du contenu.

Sur mobile, pour tenir compte de la distance, il faut considérer l’atteignabilité des zones en fonction du contexte : l’utilisateur atteindra plus ou moins facilement les zones de l’écran selon que l’utilisateur se sert de sa main droite ou gauche, selon la manière dont il tient son téléphone, ou encore selon la taille de ce dernier. 

Vous pouvez retrouver d’autres principes cognitifs et perceptifs dans l’ouvrage d’Amélie Boucher (Ergonomie Web & UX Design  – Pour une conception centrée utilisateur) afin de comprendre l’utilisateur, notamment en termes d’affordance ou encore d’accessibilité visuelle et de lisibilité. 

6 règles fondamentales pour optimiser l’ergonomie de son site web

Après avoir décrypté ce qui définit les habitudes des utilisateurs, à travers les théories de Gestalt ou encore la loi de Fitts, il ne reste plus qu’à appliquer concrètement un certain nombre de règles afin d’optimiser un site d’un point de vue ergonomique. Nous avons retenu 6 règles essentielles issues du livre d’Amélie Boucher.

Le site doit être bien rangé

Il est nécessaire de travailler sur la navigation et l’arborescence du menu principal en : 

• Regroupant les informations à travers la création de rubriques ou de catégories pour la navigation principale.

• Identifiant les contenus ou fonctionnalités les plus utilisés, recherchés et les mettre en avant.

• Travaillant les intitulés du menu : l’utilisateur doit comprendre directement les différents items du menu ;  l’ensemble des items doivent couvrir l’intégralité du contenu du site ; enfin l’internaute doit pouvoir choisir entre deux items précis sans hésiter.

La page doit être bien rangée

L’organisation générale de la page et la hiérarchie visuelle doivent être optimisées. Cela signifie qu’il faut : 

• S’appuyer sur les théories de Gestalt (proximité, similarité) afin de hiérarchiser la page et identifier clairement les différents espaces qui la compose.
• Définir des styles de titres, boutons, blocs…
• Utiliser la verticalité de l’écran pour répartir les contenus et limiter la charge informationnelle à un instant « t ».
• Utiliser l’espace vide pour créer des respirations.
• Réduire la quantité de mots sur les pages navigantes pour aller à l’essentiel.
• Limiter les animations visuelles.

Sur la page d’accueil en exemple ci-dessous, le nombre de commentaires d’un article est affiché. Or, lorsqu’aucun commentaire n’a encore été posté comme c’est le cas ici, cet élément d’affichage charge visuellement la page inutilement. Il faudrait donc le supprimer d’autant plus qu’il n’apporte rien à l’internaute (il n’a d’intérêt que lorsqu’il donne une réelle information en cas de commentaire posté). En se passant de cet élément, cela permettrait aussi de réduire la charge informationnelle du site.

Le site doit respecter les conventions web 

Un site simple et intuitif doit respecter les conventions du web et les habitudes des utilisateurs, c’est-à-dire :  

• La convention de localisation des éléments principaux (le logo en haut, le panier en haut à droite, les mentions légales en bas…)
• La convention de vocabulaire (panier, contact, accueil…)
• La convention dans les symboles / pictogrammes (Caddie ou sac pour le panier)
• La convention dans les interactions (un changement du pointeur de la souris pour un élément cliquable par exemple)

L’internaute ne doit pas perdre de temps

L’internaute doit pouvoir réaliser sa tâche et/ou accéder au contenu qu’il cherche le plus rapidement et facilement possible. Il est donc important de :

• Faciliter la visée des éléments cliquables et actionnables (Loi de Fitts)
• Éviter les actions inutiles (comme pré-remplir les champs si on dispose déjà des informations ou placer un curseur s’il y a un unique champ dans la page)
• Pré-sélectionner ou proposer les données qui sont le plus couramment utilisées (Gmail propose par exemple des réponses rapides aux mails)
• Penser à l’utilisation des touches du clavier afin de réaliser des tâches plus rapidement (comme passer d’un champ à l’autre)

C’est l’internaute qui commande

L’utilisateur doit être maître de l’interface, et non pas le contraire. Cela signifie qu’il ne faut pas : 

• Mettre en place d’auto-play : c’est l’utilisateur qui choisit de lancer ou non une vidéo, une bande-son etc.
• Forcer l’utilisateur à réaliser une action si ce n’est pas réellement nécessaire (comme la création d’un compte).
• Cocher par défaut des cases ou options qui pourraient desservir ou contraindre l’utilisateur.
• Forcer l’internaute à voir un contenu qu’il n’a pas demandé (comme une introduction).
• Utiliser des pop-up intrusifs ou agressifs dès l’entrée sur le site.
• L’internaute doit toujours pouvoir revenir en arrière.

L’utilisateur doit se sentir satisfait 

La satisfaction de l’utilisateur est la règle la plus importante. Dans ce cas-ci, le site doit:

• Être utile et fournir du contenu / service de qualité.
• Être agréable et attractif visuellement.
• Satisfaire l’internaute au niveau émotionnel (c’est-à-dire qu’il doit réussir à lui provoquer une émotion positive) mais aussi vis-à-vis de sa puissance et fiabilité technique (en termes de vitesse de chargement, de moteur de recherche performant, d’absence de liens cassés…).

Si vous désirez aller plus loin, Amélie Boucher détaille dans son ouvrage 6 autres règles fondamentales à appliquer en ergonomie web : la cohérence globale, l’accessibilité pour tous, la gestion des erreurs, l’apport d’informations, le choix minutieux des mots et symboles et l’assistance de l’internaute dans sa navigation.

Au-delà de vouloir satisfaire l’internaute à travers un site simple à utiliser, l’ergonomie web permet aussi d’être en phase avec les exigences d’éco-conception appliquées à un site web, à travers : une architecture de l’information simple et économe en énergie (via la suppression d’éléments d’affichage inutiles et énergivores) ou encore une fluidification du parcours client (grâce à l’optimisation de la cliquabilité des éléments de navigation par exemple) permettant à l’internaute de passer moins de temps sur le site et donc de consommer moins d’énergie.

Co-auteurs de cet article : Marion Laurent, directrice artistique et Julien Toublanc, rédacteur chez OpenStudio.