12 principes
pour comprendre l’ergonomie web

Soyons clair d’entrée de jeu : l’ergonomie web est un domaine où il n’existe pas de règles figées dans le marbre.

Chaque projet est unique et réclame une réponse personnalisée. Dans ces conditions, comment s’assurer qu’un site internet, une application web ou un logiciel est vraiment ergonomique ?

Pas d’ergonomie sans utilisateurs

L’ergonomie, par définition, est la recherche de la meilleure adaptation possible entre une fonction, un matériel et son utilisateur.

En l’occurrence, nous parlons ici d’un utilisateur de site, d’application, de logiciel ou de système interactif au sens large (borne interactive, jeu vidéo...).

Comment définir la bonne ergonomie d’une interface ?

Juger la qualité d’une ergonomie consiste avant tout à évaluer la capacité d’un utilisateur à réaliser une action ou une série d’actions :

  • Est-ce que le système permet de réaliser les tâches attendues ?
  • Le process est-il efficace et efficient pour l’ensemble des utilisateurs ?
  • La procédure mise en place correspond-elle à la réalité du métier ou de l’usage ?
  • L’utilisateur est-il satisfait ?

Ergonomie web, IHM ou design UX ?

Ces trois termes englobent l’ensemble des usages des utilisateurs et de leurs interactions avec un service. Il est aujourd’hui d’usage de parler d’UX (User Experience) à la place d’IHM (Interface Homme-Machine).

La finalité d’une démarche UX, derrière son apparence technique, consiste à offrir les meilleures conditions d’utilisation aux humains. C’est ici qu’interviennent des critères de jugement subjectifs basés sur la perception de l’utilisateur.

Comment faire preuve d’objectivité ?

Dans notre contexte de travail d’agence de communication digitale, nous devons au contraire faire preuve d’objectivité. Nos créations d’interfaces et nos développements ne peuvent pas souffrir d’approximations.

Pour accomplir cette mission délicate, nous disposons de 12 grands principes de conception :

  1. Accompagner
  2. Expliquer
  3. Regrouper
  4. Informer
  5. Faciliter
  6. Simplifier
  7. Prévenir
  8. Anticiper
  9. Cadrer
  10. Communiquer
  11. S’adapter
  12. Satisfaire

Chacun de ces principes pose un cadre de réflexion à appliquer selon le contexte et le résultat attendu. Vous verrez par la suite que nous sommes loin d’une liste de règles prêtes-à-l’emploi.

D’ailleurs, nous n’avons pas inventé ces critères de jugement. Ces notions sont définies dans la norme ISO 9241-210.

1 utilisateur, 12 principes

1 - Accompagner l’utilisateur

L’utilisateur doit être en mesure de se repérer et de comprendre les tâches qu’on lui demande de réaliser.

Les éléments d’interface doivent le renseigner, l’orienter et l’inciter à l’action.

Recommandations :

  • Indiquer clairement la nature du contenu dans le titre de la page.
  • Soigner les éléments de navigation (menus, sous-menus, fil d’ariane...).
  • Indiquer les étapes d’un process (formulaire à plusieurs étapes).
  • Limiter le nombre de boutons et de liens à l’essentiel.
  • Appliquer ces recommandations de manière visuelle.

2 - Rendre les informations lisibles et compréhensibles

Le contenu texte doit être présenté de manière à être lu facilement et parfaitement compris.

Partez du principe que les utilisateurs ne lisent pas vos textes ou ne font que les survoler.

Recommandations :

  • Rendre les textes lisibles en jouant sur les éléments de style (taille, couleur, marges, interlignage...).
  • Veiller à ce que le contraste soit suffisant pour bien distinguer le texte du fond.
  • Utiliser des polices sans empattement adaptées à la lecture sur écran (ex : Lato, Open Sans, Roboto...).
  • Proposer une hiérarchie identifiable entre les titres et les textes de lecture.
  • Disposer les éléments d’un formulaire dans un ordre logique.
  • Utiliser les espaces à bon escient dans la mise en forme afin d’éviter la saturation visuelle.
  • Réserver le surlignage aux liens.
  • Faire en sorte qu’un bouton (ou un élément cliquable) soit parfaitement identifiable comme tel.
  • S’assurer que les éléments cliquables sont assez grands pour être cliqués avec un doigt.
  • Ne pas justifier les textes et éviter les largeurs de paragraphe trop longues, car cela complique la lecture à l’écran.

Pour compléter ce dernier point, les règles de l’édition papier sont complètement remises en cause dans un contexte de lecture sur écran d’ordinateur, tablette ou smartphone.

3 - Regrouper les éléments de même famille

Dans la composition d’une interface-utilisateur, les éléments de même nature ou aux fonctions similaires gagnent à être regroupés.

Nous parlons d’éléments liés à la navigation, aux contenus, aux produits, à la connexion... Le principe du regroupement consiste à organiser ces éléments dans des groupes distincts de manière à rendre leur sens et leur fonction reconnaissables par tous les utilisateurs.

Recommandations :

  • Classer les éléments de manière théorique, sur le papier, avant de les organiser dans l’interface.
  • Isoler les groupes d’éléments dans des zones et emplacement identifiables.
  • Utiliser toutes les subtilités du design graphique pour appuyer le sens des regroupements (choix de polices, couleurs de blocs, placement...).
  • N’oubliez pas de prendre en compte les impératifs techniques (consultation mobile/ordinateur) et les codes implicites de navigation.

4 - Informer l’utilisateur en direct

Chaque action de l’utilisateur entraîne une réponse du système. Cette réponse peut prendre la forme d’une pop-up de confirmation, d’un message d’erreur ou l’affichage d’une barre de progression.

L’utilisateur peut accepter que cela ne "marche pas" ou qu’une action prenne du temps, à condition qu’on lui explique pourquoi.

Recommandations :

  • Lister l’ensemble des actions demandées et envisager un message ou une indication pour chaque occurrence.
  • Afficher l’information le plus tôt possible, en cas de réussite comme d’erreur.
  • Indiquer la progression d’un process (ex : étapes) ou d’un traitement (ex : téléchargement).
  • Soigner la mise en forme du message de feedback qui ne doit pas être confondu avec un autre élément de contenu.
  • Différenciez les messages de confirmation, d’information et d’erreur par des codes couleurs explicites.

5 - Faciliter la prise de contrôle

De nombreux systèmes proposent aux utilisateurs de renseigner des informations ou de personnaliser leur interface.

L’action demandée ou proposée à l’utilisateur impose d’anticiper les scénarios alternatifs, comme le fait d’interrompre une saisie en cours de route.

Recommandations :

  • Donner la possibilité d’interrompre une tâche en cours et de sauvegarder son état d’avancement.
  • Permettre le retour en arrière ou le retour au tableau de bord.
  • Disposer d’une fonction de remise à zéro des paramètres si nécessaire.

6 - Faire preuve de concision

Ce principe de concision s’applique autant aux process qu’aux contenus : faites court, simple et efficace.

L’objectif consiste à limiter la charge de travail de l’utilisateur sans pour autant rogner sur les informations importantes. Ce travail d’équilibriste demande de s’interroger sur le sens et la fonction de chaque élément d’interface.

Recommandations :

  • Limiter les instructions et les éléments de navigation à l’essentiel.
  • Utiliser des libellés clairs et courts.
  • Limiter le nombre de champs dans un formulaire de prise de contact d’une page web.
  • Simplifier les saisies en trouvant le bon compromis entre le nombre d’étapes et les informations affichées à chaque étape. A ce niveau, le principe de regroupement peut vous aider.

7 - Protéger l’utilisateur des erreurs

Le designer UX veille à ce que l’utilisateur ne fasse pas d’erreur... ou le moins possible.

Dans cette démarche préventive, il faut réfléchir à des mécanismes de guidage et faire preuve de pédagogie, quelle que soit la complexité de la tâche à réaliser.

Recommandations :

  • Mettre en place toutes les techniques qui peuvent prémunir l’utilisateur d’une erreur de saisie ou d’une incompréhension.
  • Rendre tous les libellés explicites, sans laisser de marge à une interprétation biaisée.
  • Vérifier les formulaires en direct.
  • Lister, dès la première étape d’un formulaire complexe, toutes les pièces jointes ou informations importantes demandées lors de la saisie.
  • Ne jamais laisser l’utilisateur dans une impasse. A la fin d’un process ou en cas d’erreur, afficher un élément de navigation permettant de rebondir.

Comme l’erreur est toujours possible, il est indispensable d’indiquer les raisons d’un rejet.

8 - Adapter l’interface aux contextes utilisateurs

Un contexte utilisateur ne se limite pas à la machine de consultation. Cet aspect de l’ergonomie prend en considération l’humain dans sa globalité.

L’utilisateur ne se trouve pas dans un laboratoire avec un ordinateur récent, un écran bien calibré et une connexion haut débit. Il n’est pas toujours une personne en bonne santé et doté des mêmes codes culturels que l’équipe de designers.

Aussi, il peut avoir des difficultés avec l’outil informatique, avec la langue française ou se trouver dans une situation de handicap. A l’inverse, un geek pourra avoir un très fort niveau d’attente sur la technicité.

Voici des contextes concrets :

  • 4% de la population française est daltonienne (8% chez les hommes, 0.5% chez les femmes) *.
  • 7% des adultes français sont en situation d’illettrisme **.
  • Plus de 8% du territoire français n’est pas couvert par le réseau 4G ***.
  • 62% seulement des logements français sont éligibles à la fibre ***.
  • Un nombre non-négligeable d’internautes naviguent au moyen de loupes d’écrans, de lecteurs vocaux ou de navigateurs web d’ancienne génération.
  • La consultation mobile ne s’arrête pas à la mise en place d’une mise en page responsive. L’internaute peut être gênée par le soleil qui se reflète sur l’écran.
  • Dans de nombreux cas de figure, la situation empêche de mettre le son d’une vidéo.

Sources :

9 - Définir un cadre stable

Une bonne structure de site ou d’application repose sur sa cohérence d’ensemble. Un parti-pris s’assume à tous les niveaux, que l’on parle de composition graphique ou d’actions à réaliser.

Obtenir cette harmonie impose la création d’un cadre de référence (guidelines, maquettes...) auquel les intégrateurs et les développeurs peuvent se référer tout au long du projet.

Voici quelques exemples parlants :

  • Les boutons ont toujours le même style, la même forme et la même position.
  • Un libellé de bouton reste le même d’un écran à l’autre si l’action est identique.
  • Il en va de même pour les messages d’erreur, les liens, les titres, les champs de formulaire...
  • L’ensemble des textes sont cohérents dans leurs libellés (forme des verbes, formulation, ton).
  • Le style des icônes et des images d’illustrations est homogène.
  • Bien entendu, ces recommandations s’appliquent à la construction générale. Il va de soi qu’une section ne change pas de place, de forme ou de couleur au long de la navigation (sauf justification expresse).

L’idée est de se tenir à un choix tout au long de l’usage. Sur ces bases, l’utilisateur n’est pas censé souffrir d’incohérence et sa navigation est la plus prévisible possible.

10 - Parler le même langage

Appliquer ce principe nécessite de trouver le vocabulaire approprié, l’iconographie juste, mais également les couleurs à la signification indiscutable.

Les éditeurs de site de service public, de logiciel métier ou d’application pour ados ne se poseront pas les mêmes questions. En revanche, ils devront s’assurer d’utiliser les mêmes codes linguistiques et culturels que le public visé.

Atteindre un objectif de compréhension commune paraît simple sur le papier. Il demande tout de même de prendre en considération des types d’éléments variés :

  • La reconnaissance des icones et des items de navigation.
  • L’explication des abréviations (et éventuellement l’intégration d’un glossaire).
  • Le sens des titres et des libellés.
  • La lisibilité du texte en fonction du niveau de scolarité des utilisateurs ou de leur vocabulaire technique.

11 - S’adapter aux logiques d’utilisation

La logique d’utilisation se focalise sur toutes les choses qui vont de soi pour les utilisateurs.

Les parcours utilisateurs sont multiples, mais notre recommandation est unique : créer des user stories, c’est-à-dire des scénarios qui anticipent et simulent les principaux usages d’un système.

Appliquer ce principe engage les concepteurs à adopter le maximum de points de vue possibles et de prendre en considération un certain nombre de logiques :

  • Logique d’habitudes : emplacement d’un menu ou d’une information, forme d’un bouton d’ajout au panier, affichage des résultats d’un moteur de recherche, format de fichier à téléchargement...
  • Logique métier : une tâche s’exécute dans un certain ordre.
  • Logique d’usage : une partie d’un logiciel peut être utilisée sur PC (gestion) et sur mobile (action).
  • Logique de contenu : l’on s’attend à retrouver certaines typologies de contenu selon le domaine d’application.
  • Logique de hiérarchie : le contenu d’une page obéit à un classement objectif de l’information.
  • Logique de compatibilité : le système doit fonctionner avec les principaux navigateurs et OS du marché.

12 - Viser la satisfaction

A vrai dire, il n’existe pas vraiment d’interface intuitive. Il n’existe que des systèmes qui ont été réfléchis pour accompagner l’utilisateur dans les meilleures conditions et ne pas lui faire vivre d’expérience désagréable.

En l’absence de règles strictes, les designers doivent être capables de se remettre en cause et d’accepter le fait de devoir revoir leur copie.

Ce qui veut dire anticiper, tester, contrôler et corriger... tout au long de la durée de vie d’un site ou d’un logiciel.

Des outils permettent de mener à bien cette tâche :

  • Tests et questionnaires utilisateurs.
  • Questionnaires de satisfaction.
  • Outils de feedback en ligne (fenêtre pour envoyer un commentaire).
  • Outils de contrôle des dead clics (clics dans le vide) et des rage clics (clics à répétition en l’attente d’un résultat).
  • Suivi des statistiques analytics sur des parcours (ex : suivi de conversion, tunnel de vente...) et heatmaps.

L’utilisateur, encore et toujours

Finalement, s’il n’y avait qu’une seule chose à retenir : s’adapter à l’utilisateur et adopter son point de vue, pas l’inverse.

Les risques d’une ergonomie mal pensée sont variés :

  • Un utilisateur ne peut pas lire ni voir certaines informations.
  • Un prospect quitte le site et part voir la concurrence.
  • Un client abandonne une commande en cours de route sur un site e-commerce.
  • Une application mobile n’est pas utilisée, car trop compliquée ou pas adaptée à son public.
  • Un logiciel devient inopérant à cause de données mal remplies ou non saisies.

La clé d’une démarche UX efficace

Une démarche UX n’est véritablement opérante que si elle se base sur des critères objectifs. Les 12 principes énumérés plus haut forment justement un socle de références communes à tous les acteurs d’un projet web :

  • Le designer UX (qui doit se créer des outils de travail, de contrôle et d’audit afin de rendre une copie cohérente, logique, argumentée et évolutive dans le temps).
  • Le développeur (qui ne doit pas se replier derrière les aspects purement techniques).
  • Le webdesigner (qui ne doit pas contenter de proposer de beaux visuels).
  • Le chef de projet digital (qui doit faire communiquer tous les acteurs et être capable de défendre les choix de son équipe).
  • Pour finir, les porteurs du projets (qui doivent avoir les moyens de comprendre les choix proposées par l’agence web en dépit parfois des idées reçues).

L’UX design comme outil marketing

Proposer une interface ergonomique donne à vos clients un avant-goût de la qualité de vos services ou de vos produits...

Dans une optique de vente en ligne ou d’acquisition de prospects, la démarche UX est aussi importante que la publicité en ligne ou le référencement naturel.