12 règles et 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 web 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 web, 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 design, 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 de sites web 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 règles et principes

1 - Accompagner l’utilisateur

L’utilisateur doit être en mesure de se repérer et de comprendre les tâches nécessaires à sa navigation ou la réalisation d’action (création d’un compte client, édition d’une facture...).

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

1 accompagner

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 doit être présenté de manière à être lu facilement et parfaitement compris.

Il s’agit d’une approche globale incluant la lisibilité de l’interface, des images, des médias des boutons et des textes. Sur ce dernier point, partez du principe que les utilisateurs ne lisent pas vos textes ou ne font que les survoler.

2 lisibilite

Recommandations :

  • Utiliser les espaces et les couleurs à bon escient dans un objectif de clarté.
  • Faire en sorte qu’un bouton (ou un élément cliquable) soit parfaitement identifiable comme tel et possède dont une assez grande taille en pixels.
  • S’assurer que les éléments cliquables sont assez grands pour être cliqués avec un doigt.
  • Disposer les éléments d’un formulaire dans un ordre logique.
  • Proposer une hiérarchie identifiable entre les différentes typologies de titres et de paragraphes.
  • Rendre les textes lisibles en jouant sur les éléments de style (taille, couleur, marges, interlignage...) et réserver le surlignage aux liens.
  • 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...).
  • 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.

3 regrouper

Recommandations :

  • Classer les éléments de manière théorique, sur le papier, avant de les organiser dans une interface web en html/css.
  • 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 doit entraîner 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 immédiatement pourquoi.

4 informer

Recommandations :

  • Assurez-vous que chaque clic sur un élément interactif provoque une réaction du système.
  • 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. L’amélioration de l’expérience utilisateur passe également par la liberté de choisir la couleur de son interface, la taille des polices, le format d’un export de fichier ou l’organisation de son tableau de bord...

5 controle

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.
  • Proposer des options de personnalisation et de paramétrages aux utilisateurs.

6 - Faire preuve de concision

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.

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

6 concision

Recommandations :

  • Limiter les instructions et les éléments de navigation à l’essentiel.
  • Employer 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 sans attendre la validation pour détecter d’éventuelles erreurs de saisie.
  • 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

L’utilisateur ne se trouve pas dans un laboratoire avec un ordinateur récent, un écran bien calibré, une connexion haut débit et du temps devant lui. 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.

Plus largement, le concept de contexte utilisateur englobe toutes les situations de consultation qui ne sont pas toujours liées à des questions d’accessibilité (débit Internet limité, besoin de télécharger beaucoup de documents en peu de temps, écran en mauvais état...).

8 daltonisme

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. Il peut aussi naviguer tout en marchant dans la rue.
  • 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 web ou d’application repose sur sa cohérence d’ensemble. A ce titre, la stabilité rime avec continuité et prédictibilité.

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.

9 stabilite

Voici quelques exemples parlants :

  • Les boutons possèdent 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é.

10 langage

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 leurs connaissances techniques.

11 - S’adapter aux logiques d’utilisation

La logique d’utilisation correspond à toutes les actions qu’un utilisateur pourrait effectuer de manière évidente et instinctive.

D’où l’intérêt des users stories (scénarios d’usages) et de chercher à concevoir une interface la plus en adéquation avec ces utilisations innées dépendantes de sa culture, de son niveau informatique ou encore de sa de sa culture.

11 user stories

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

Le douzième principe repose sur une idée purement subjective : la satisfaction. Le designer UX a pour devoir de rendre agréable l’expérience de l’utilisateur. Un objectif est de faire en sorte que celui-ci ait le sentiment que l’interface l’aide plus qu’elle ne le ralentit.

Ce qui veut dire anticiper, tester, corriger et surtout évaluer la manière dont les utilisateurs apprécient l’usage d’un site ou d’un logiciel.

12 satisfaction

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 projet (qui doivent avoir les moyens de comprendre les choix proposés par l’agence web en dépit parfois des idées reçues).

C’est dans ce processus collaboratif que le concept d’assurance qualité web prend tout son sens.

Connaître ses utilisateurs

Nous avons employé le terme utilisateur plus de 50 fois dans cet article. Mais qui est-il au juste ?

Nous aborderons dans un prochain article les différents outils (persona UX, user story...) permettant de mieux cerner et comprendre cet étrange personnage au coeur de nos préoccupations.

Au quotidien

Nos chargés de projets, designers et développeurs appliquent ces 12 principes d’ergonomie :

  1. Dès l’élaboration d’une stratégie webmarketing (elle aussi User Centric).
  2. A toutes les étapes d’une création de site internert ou d’un développement d’application web.
  3. Dans tous les projets de refonte ou d’audit.