L'ergonomie d'une application : définition et critères

1. Objectifs

   • Définir l'ergonomie d'une application
   • Distinguer ergonomie, utilisabilité et expérience utilisateur
   • Citer et expliquer les huit critères ergonomiques de Bastien et Scapin
   • Reconnaître le critère concerné par un problème observé
   • Inspecter une application avec une grille et noter la gravité des problèmes
   • Proposer des corrections concrètes et justifiées

1. Présentation

   • Un bouton trop petit, un message d'erreur incompréhensible ou un formulaire à remplir plusieurs fois : ces problèmes ne bloquent pas toujours le fonctionnement de l'application, mais ils fatiguent l'utilisateur et le poussent à l'erreur.
   • L'ergonomie permet de repérer et de corriger ces défauts avec méthode. Au lieu de dire « je n'aime pas cet écran », vous pourrez expliquer le problème, nommer le critère concerné et proposer une solution.

• Nous continuons avec BiblioCampus, notre application fictive de réservation de livres. Pour les activités, créez le dossier 05-ergonomie/ dans votre dépôt GitHub ui-ux-design-bts.

1. Qu'est-ce que l'ergonomie ?

   • L'ergonomie consiste à adapter un outil, un environnement ou un système aux personnes qui l'utilisent. Le mot vient du grec ergon (le travail) et nomos (la règle).
   • Une application ergonomique permet à ses utilisateurs d'atteindre leurs objectifs avec efficacité, sans effort inutile et dans de bonnes conditions :

1. Exemple 1 : les objets du quotidien

   • L'ergonomie existe bien avant les écrans. Comparez ces situations :
     • une télécommande où les boutons les plus utilisés (volume, chaînes) sont grands et faciles à trouver, alors que les réglages rares sont regroupés à part ;
     • un distributeur de billets qui rend la carte avant les billets, pour éviter de l'oublier ;
     • une prise USB-C, qui se branche dans les deux sens et évite ainsi une erreur de manipulation.
   • Dans chaque cas, ce n'est pas l'utilisateur qui doit faire plus attention : c'est l'objet qui a été conçu pour lui simplifier la tâche.

1. Trois domaines de l'ergonomie

   • L'ergonomie comprend plusieurs dimensions, qui se complètent :

1. Ergonomie, utilisabilité et UX

   • Ces termes sont proches, mais ne désignent pas exactement la même chose :
     • l'ergonomie est la démarche qui consiste à adapter le produit aux personnes ;
     • l'utilisabilité mesure la facilité avec laquelle un produit permet d'atteindre un objectif ;
     • l'expérience utilisateur couvre tout ce que la personne perçoit et ressent, avant, pendant et après l'usage.
   • La norme ISO 9241-11 décrit l'utilisabilité avec trois mesures :

1. Les huit critères ergonomiques

   • Pour évaluer une interface, nous utiliserons les critères proposés par Bastien et Scapin. Chacun aide à poser une question précise :

1. Critère 1 : le guidage

   • Le guidage oriente l'utilisateur : il indique où il se trouve, ce qu'il peut faire et ce qui vient de se passer. Il repose notamment sur des libellés clairs, un regroupement logique et des messages de retour.

1. Critère 2 : la charge de travail

   • La charge de travail regroupe tout ce que l'utilisateur doit lire, mémoriser et saisir. Il faut éviter les étapes, les informations et les saisies inutiles.

1. Critère 3 : le contrôle explicite

   • Le système doit réaliser ce que l'utilisateur demande, quand il le demande. L'utilisateur doit garder la main : valider, interrompre, annuler ou revenir en arrière.

1. Critère 4 : l'adaptabilité

   • L'adaptabilité permet au système de convenir à différents profils et situations. Un débutant a besoin d'être guidé, un habitué veut aller plus vite, et une personne peut vouloir agrandir le texte.

1. Critère 5 : la gestion des erreurs

   • Il s'agit de prévenir les erreurs, puis de permettre de les comprendre et de les corriger. Un bon message dit ce qui ne va pas et comment y remédier.

1. Critère 6 : l'homogénéité

   • L'homogénéité, ou cohérence, consiste à garder les mêmes choix de conception dans des situations semblables. Ainsi, ce que l'utilisateur apprend à un endroit reste vrai ailleurs.

1. Critère 7 : la signifiance

   • La signifiance évalue le lien entre un mot ou un symbole et ce qu'il représente. L'utilisateur doit comprendre ce qu'il voit sans connaître le fonctionnement interne de l'application.

1. Critère 8 : la compatibilité

   • La compatibilité vérifie que l'application correspond aux habitudes, aux attentes et à la tâche réelle des utilisateurs : langue, formats de date, monnaie, vocabulaire et ordre des étapes.

1. Exemple 2 : l'ergonomie physique sur mobile

   • Une application peut être claire et rester peu pratique sous le doigt. La position et la taille des boutons comptent aussi :

1. Exemple 3 : un problème, plusieurs critères

   • Dans la réalité, un défaut peut toucher plusieurs critères. Prenons cet exemple :
     • problème : un bouton Exécuter envoie immédiatement une réservation, sans confirmation ;
     • signifiance : le mot Exécuter n'est pas clair ;
     • contrôle explicite : l'utilisateur n'a pas de moyen simple d'annuler ;
     • guidage : il ne sait pas ce qui va se passer.
   • On retient alors le critère principal pour classer le problème, sans s'interdire d'en citer d'autres.

1. Inspecter une application

   • L'inspection ergonomique consiste à examiner une interface à partir de critères. Elle permet de repérer vite de nombreux problèmes, mais elle doit être complétée par des tests avec de vrais utilisateurs :

• Commencez toujours par les problèmes de gravité 4 et 3 : un beau bouton n'aide personne si la tâche reste impossible.

1. Activité 1 : reconnaître le critère

   • Associez chaque situation à un critère ergonomique :
     • a) Après l'envoi d'un formulaire, rien ne s'affiche.
     • b) Il faut retaper son nom sur chacune des cinq pages.
     • c) L'application envoie un message sans offrir d'annulation.
     • d) L'application impose le même long parcours aux débutants et aux habitués, sans raccourci.
     • e) Le message indique seulement « Erreur 12 ».
     • f) « Valider » est tantôt à droite, tantôt à gauche.
     • g) Une icône d'engrenage ouvre la liste des livres.
     • h) La date attendue est au format américain sur un site tunisien.
   • Vérifier : a) guidage, b) charge de travail, c) contrôle explicite, d) adaptabilité, e) gestion des erreurs, f) homogénéité, g) signifiance, h) compatibilité.
   • Quelle situation vous semble la plus grave pour un nouvel utilisateur ? Pourquoi ?

1. Activité 2 : l'ergonomie autour de vous

   • Choisissez un objet ou un lieu du quotidien : ascenseur, machine à café, télécommande, panneau de salle de cours…
   • Relevez une bonne idée et un défaut. Associez-les à un critère, puis proposez une amélioration.
   • Vérifier : votre réponse décrit des faits et explique ce que vit l'utilisateur, pas seulement votre goût.

1. Activité 3 : inspecter un formulaire

   • Inspectez cet écran. Relevez au moins six problèmes, associez-les à un critère et notez leur gravité :

• Vérifier : vous pouvez citer le titre « F-07 » (signifiance), le « code du groupe » sans explication (guidage ou charge de travail), le format de date (compatibilité), « Champ invalide » qui ne désigne aucun champ (gestion des erreurs), le gros bouton « Effacer tout » (gestion des erreurs et contrôle) et l'action principale « Exécuter » presque invisible (guidage et signifiance).
• Lequel de ces problèmes faut-il corriger en premier ?

1. Activité 4 : réécrire des messages d'erreur

   • Réécrivez ces messages pour que l'utilisateur comprenne quoi faire :
     • « Erreur 404 : ressource introuvable. »
     • « Échec de l'authentification. »
     • « Format incorrect. »
     • « Opération refusée. »

• Vérifier : chaque message est poli, emploie des mots simples, explique le problème et propose une action.

1. Activité 5 : rendre un écran cohérent

   • Observez cet écran, puis listez les incohérences. Dessinez une version corrigée :

• Vérifier : votre version emploie le même format de date, le même nom de bouton, le même style et le même emplacement pour chaque cours.
• Quel est l'effet de ces corrections sur la charge de travail ?

1. Activité 6 : réduire la charge de travail

   • Pour une inscription à la bibliothèque du campus, ce formulaire demande : nom, prénom, date et lieu de naissance, numéro d'étudiant, e-mail, téléphone, adresse complète, profession des parents, couleur préférée et filière.
   • Indiquez les champs à garder, à préremplir et à supprimer, en justifiant vos choix.
   • Vérifier : si l'école possède déjà les informations, le numéro d'étudiant peut suffire à préremplir le nom, le prénom et la filière. Des champs comme la profession des parents ou la couleur préférée n'ont pas leur place sans raison précise.

1. Activité 7 : placer les boutons sur mobile

   • Dessinez l'écran d'une application de réservation sur un téléphone à la bonne échelle, puis placez : « Réserver », « Rechercher », « Paramètres » et « Supprimer mon compte ».
   • Testez votre maquette à une main avec un camarade.
   • Vérifier : l'action principale est facile à atteindre et l'action dangereuse est éloignée. Comment votre choix changerait-il pour une personne gauchère ?

1. Activité 8 : réaliser une mini-inspection

   • Choisissez une application que vous utilisez et une tâche précise. Remplissez une grille comme celle de la leçon, avec au moins cinq problèmes ou réussites.
   • Classez ensuite les problèmes du plus grave au moins grave.
   • Vérifier : chaque ligne comporte un fait, un critère, une gravité et une correction réaliste.

1. Activité 9 : observer un utilisateur

   • Par deux, demandez à un camarade de réaliser une tâche sur l'application que vous avez inspectée. Observez sans l'aider.
   • Comparez ses difficultés avec votre grille : avez-vous repéré les mêmes problèmes ? En a-t-il rencontré d'autres ?
   • Vérifier : vous notez au moins un écart entre l'inspection et l'observation. Que nous apprend-il sur les limites de l'inspection ?

1. Activité 10 : déposer votre travail sur GitHub

   • Regroupez dans 05-ergonomie/README.md vos réponses et votre grille d'inspection. Ajoutez les photos de vos dessins, puis envoyez le tout :

git add 05-ergonomie
git commit -m "Ajoute la leçon sur l'ergonomie et ses critères"
git push

• Vérifier : le fichier README.md et vos images apparaissent bien sur la page GitHub du dépôt.

1. Erreurs fréquentes

1. À retenir

   • L'ergonomie adapte une application aux personnes, à leurs tâches et à leur contexte.
   • Elle peut être physique, cognitive ou organisationnelle.
   • L'utilisabilité se mesure avec l'efficacité, l'efficience et la satisfaction.
   • Les huit critères sont : guidage, charge de travail, contrôle explicite, adaptabilité, gestion des erreurs, homogénéité, signifiance et compatibilité.
   • Une inspection décrit des faits, les relie à des critères et classe les problèmes par gravité.
   • Elle ne remplace pas l'observation de vrais utilisateurs.

Quand un utilisateur se trompe, ne lui demandez pas d'abord de faire plus attention : demandez-vous ce que l'interface aurait pu faire pour l'aider.