Chapitre 114 minDébutant
C'est quoi l'ergonomie d'une interface ? IHM, UX et UI
Par Josselyn C., prof de BTS SIO. Mis à jour le .
À la fin de ce chapitre, tu sauras
- définir l'ergonomie, l'utilisabilité, l'UX et l'UI sans les confondre ;
- mesurer l'utilisabilité par l'efficacité, l'efficience et la satisfaction ;
- décrire le cycle de la conception centrée sur l'utilisateur ;
- situer l'ergonomie dans le référentiel du BTS SIO et à l'E6.
4 exercices corrigés1 schéma
L'ergonomie d'une interface est sa capacité à être utilisée facilement, efficacement et sans erreur par les personnes à qui elle est destinée, dans leur situation réelle de travail. Ce chapitre définit l'interface homme-machine (IHM) et les mots qui tournent autour, utilisabilité, expérience utilisateur (UX), interface utilisateur (UI) et accessibilité, montre comment mesurer l'utilisabilité, puis présente la démarche de conception centrée sur l'utilisateur que suit tout le cours.
L'interface homme-machine
Une interface homme-machine (IHM) est l'ensemble des moyens matériels et logiciels qui permettent à une personne d'utiliser un système informatique : ce qu'elle voit et entend (écrans, messages, sons), ce qu'elle manipule (clavier, souris, écran tactile, voix) et la façon dont le système réagit. Le sigle désigne aussi la discipline qui étudie ces échanges, l'interaction homme-machine, à la croisée de l'informatique, de la psychologie cognitive, de l'ergonomie et du design.
Les interfaces ont beaucoup changé, mais les anciennes n'ont pas disparu : un développeur du BTS les croise toutes.
| Type d'interface | Comment on l'utilise | Où tu la croises |
|---|---|---|
| Ligne de commande | On tape des commandes, le système répond en texte | Terminal Linux, PowerShell, Git |
| Graphique de bureau | Fenêtres, menus, boutons, souris et clavier | Application WinForms, logiciel de gestion |
| Web | Pages dans un navigateur, liens et formulaires | Intranet, application métier en React ou PHP |
| Tactile (mobile) | Gestes du doigt sur un petit écran | Application React Native, site responsive |
| Vocale | La voix, en entrée et en sortie | Assistants vocaux, serveurs vocaux téléphoniques |
| Conversationnelle | Un échange en langage naturel | Agent conversationnel, assistant d'IA |
Ce cours parle surtout des trois interfaces que tu programmes en SLAM : web, mobile et bureau. Les principes, eux, valent partout : une commande Git au message d'erreur incompréhensible pose exactement le même problème qu'un formulaire web mal conçu.
Ergonomie, utilisabilité, UX, UI et accessibilité
Cinq mots reviennent sans cesse, et les sujets comme les jurys aiment vérifier que tu ne les mélanges pas.
L'ergonomie (du grec ergon, le travail, et nomos, la règle) est la discipline qui adapte le travail, les outils et l'environnement aux personnes. Elle a une branche physique (posture, siège, hauteur d'écran, gestes répétitifs) et une branche cognitive (perception, mémoire, attention, raisonnement). L'ergonomie des logiciels relève surtout de la seconde : elle cherche à réduire l'effort mental et le risque d'erreur.
L'utilisabilité est la mesure de cette qualité. La norme ISO 9241-11 (édition 2018) la définit comme le degré selon lequel un système, un produit ou un service peut être utilisé par des utilisateurs identifiés pour atteindre des buts définis avec efficacité, efficience et satisfaction, dans un contexte d'utilisation donné. Retiens les trois critères et les deux précisions : des utilisateurs identifiés (pas « tout le monde ») et un contexte (au bureau ou debout dans un entrepôt, ce n'est pas la même application).
L'expérience utilisateur (UX, user experience) va plus loin : la norme ISO 9241-210 la décrit comme les perceptions et les réactions d'une personne qui résultent de l'utilisation, ou de l'utilisation anticipée, d'un produit ou d'un service. Elle commence avant l'écran (ce qu'on en a entendu dire) et continue après (le rappel reçu, la facilité à rendre le matériel). L'utilisabilité en est une composante centrale, mais pas la seule : la confiance, le plaisir, l'image de l'organisation en font partie.
L'interface utilisateur (UI, user interface) est la partie visible et manipulable : la disposition, les couleurs, la typographie, les icônes, les composants. Le métier d'UI designer s'occupe de leur apparence et de leur cohérence ; celui d'UX designer de la démarche qui part des besoins et vérifie le résultat avec les utilisateurs.
L'accessibilité est la possibilité, pour toute personne, quel que soit son handicap, d'utiliser le service : avec un lecteur d'écran, au clavier seul, avec un zoom, sans le son. Une interface peut être jolie et utilisable par la majorité, et pourtant inutilisable par une personne aveugle. Le chapitre 7 lui est consacré.
| Notion | La question qu'elle pose | Exemple sur Prêt'Matos |
|---|---|---|
| Ergonomie | L'outil est-il adapté aux personnes et à leur travail ? | La logistique enregistre un retour debout au comptoir du stock, une tablette à la main |
| Utilisabilité | Les utilisateurs atteignent-ils leur but, vite et sans erreur, et en sont-ils satisfaits ? | Une réservation prend moins de deux minutes, sans aide |
| UX | Que vit la personne, avant, pendant et après ? | Le rappel arrive la veille, au bon moment, et la restitution se passe sans attente |
| UI | À quoi ressemble l'écran, comment est-il organisé ? | Le bouton « Réserver » est vert, en bas du formulaire, toujours au même endroit |
| Accessibilité | Une personne en situation de handicap peut-elle s'en servir ? | Un salarié malvoyant réserve au clavier avec son lecteur d'écran |
Mesurer l'utilisabilité : efficacité, efficience, satisfaction
L'intérêt de la définition ISO est qu'elle se mesure. Pour une tâche précise, chaque critère se traduit en indicateurs que tu peux relever pendant un test (chapitre 8).
| Critère | Ce qu'il mesure | Indicateurs pour « réserver un matériel » |
|---|---|---|
| Efficacité | L'utilisateur atteint-il son but, complètement et sans erreur ? | Taux de réussite de la tâche ; nombre de réservations erronées (mauvaises dates, mauvais matériel) |
| Efficience | Combien de ressources a-t-il dépensées pour y arriver ? | Temps passé ; nombre d'écrans, de clics ou de retours en arrière ; nombre de fois où il a demandé de l'aide |
| Satisfaction | Comment a-t-il vécu l'utilisation ? | Score au questionnaire SUS ; commentaires ; envie de réutiliser l'application plutôt que d'écrire un courriel |
Un exemple chiffré : cinq salariés essaient le premier prototype de Prêt'Matos. Quatre réussissent à réserver le vidéoprojecteur (efficacité : 4 sur 5, soit 80 %), en 3 min 10 en moyenne avec deux allers-retours entre le catalogue et le calendrier (efficience médiocre) ; le score SUS moyen est de 62 sur 100 (satisfaction sous la moyenne de référence, qui est de 68). L'équipe sait exactement quoi améliorer : le chemin entre le catalogue et les dates.
C'est aussi ce qui rend une exigence d'ergonomie vérifiable. Le cahier des charges de Prêt'Matos ne dit pas « l'application doit être intuitive », il dit : « un salarié qui n'a jamais utilisé l'application réserve un matériel en moins de 2 minutes, sans aide » (cahier des charges de Prêt'Matos). À la recette, on chronomètre, et la discussion est close.
Pourquoi l'ergonomie compte pour un développeur
Tu pourrais penser que l'ergonomie est l'affaire des designers. Dans une PME comme Sorbier Logistique, il n'y en a pas : c'est toi qui décides où va le bouton, ce que dit le message d'erreur et ce qui se passe quand la liste est vide. Une interface mal conçue coûte de quatre façons.
- Des erreurs : une date de retour mal saisie bloque un portable dix jours de trop ; dans une application de santé ou de paie, une erreur de saisie peut coûter beaucoup plus cher.
- Du temps : trente secondes perdues par réservation, multipliées par des centaines de réservations par an, finissent en jours de travail.
- Du support : chaque écran incompris devient un appel ou un ticket à la logistique ou au service informatique.
- Le rejet : si réserver dans Prêt'Matos est plus pénible qu'écrire un courriel à la logistique, les salariés continueront à écrire des courriels, et le projet aura échoué alors que le code fonctionne.
Corriger l'ergonomie coûte d'autant plus cher qu'on s'y prend tard. Déplacer un champ sur une maquette prend une minute ; le déplacer dans une application en production demande de modifier le code, les tests, la documentation et de former à nouveau les utilisateurs. C'est pourquoi on dessine et on teste les écrans avant de les programmer.
La conception centrée sur l'utilisateur
La norme ISO 9241-210 (édition 2019) décrit une démarche, la conception centrée sur l'opérateur humain, plus souvent appelée conception centrée sur l'utilisateur. Elle repose sur quelques principes simples : partir d'une compréhension explicite des utilisateurs, de leurs tâches et de leur environnement ; les impliquer pendant la conception ; affiner la solution par des évaluations faites avec eux ; itérer jusqu'à ce que la solution réponde aux exigences.
Concrètement, après une étape de planification, on enchaîne quatre activités et on recommence tant que l'évaluation n'est pas satisfaisante.
| Activité | Ce que l'on produit | Pour Prêt'Matos |
|---|---|---|
| Comprendre le contexte d'utilisation | Description des utilisateurs, des tâches, de l'environnement ; personas | Entretiens avec la logistique, lecture de 50 courriels de demande, observation du comptoir du stock |
| Spécifier les exigences | Exigences vérifiables, user stories et critères d'acceptation | « Réserver en moins de 2 minutes sans aide » ; « utilisable sur téléphone » |
| Produire des solutions | Croquis, wireframes, maquettes, prototypes, puis l'application | Maquettes du catalogue et du formulaire de réservation, montrées à quatre salariés |
| Évaluer | Résultats d'inspection et de tests, problèmes classés | Test du prototype avec cinq salariés, score SUS, liste des corrections |
Cette démarche s'emboîte naturellement avec Scrum (méthode agile) : chaque sprint produit un incrément que les utilisateurs essaient à la Sprint Review, ce qui est une forme d'évaluation. Elle ne demande pas un laboratoire : quatre salariés devant une maquette papier, c'est déjà de la conception centrée sur l'utilisateur.
L'ergonomie dans le référentiel du BTS SIO
Le référentiel du BTS SIO (arrêté du 29 avril 2019 modifié) place les interfaces dans le bloc 2 de l'option SLAM, « Conception et développement d'applications ». Pour la compétence « Concevoir et développer une solution applicative », il attend que la proposition réponde au besoin exprimé dans le cahier des charges, et notamment que :
- « la maquette des éléments applicatifs de la solution respecte les fonctionnalités exprimées » ;
- « les spécifications de l'interface utilisateur répondent aux contraintes ergonomiques ».
Pour la maintenance, il demande que « l'interface utilisateur est mise à jour en respectant les contraintes ergonomiques ». Et parmi les savoirs associés figurent les « interfaces homme-machine : principes ergonomiques, techniques de conception, d'évaluation et de validation ». Ce cours suit ces quatre mots : principes (chapitres 2, 3, 6 et 7), conception (4, 5, 10 et 11), évaluation (8) et validation (9). Le chapitre 12 montre comment la commission de l'E6 vérifie tout cela.
Exercices
Exercice 1 sur 4 Efficacité, efficience ou satisfaction ? Réussi À revoir
Pendant le test de Prêt'Matos, l'équipe relève les observations suivantes. Pour chacune, dis quel critère de l'utilisabilité elle mesure.
- Un participant sur 5 a réservé le casque au lieu du vidéoprojecteur demandé.
- La réservation prend en moyenne 3 min 10.
- Une participante déclare : « Franchement, je continuerai à envoyer un mail, c'est plus simple. »
- Un participant est revenu trois fois en arrière avant de trouver le calendrier.
- Le score SUS moyen est de 62.
Voir la réponseMasquer la réponse de l'exercice 1
- Efficacité : le but n'est pas atteint correctement (mauvais matériel).
- Efficience : c'est le temps dépensé pour atteindre le but.
- Satisfaction : c'est l'attitude envers le produit. Elle annonce un rejet : ce commentaire vaut une alerte.
- Efficience : des actions inutiles, donc de l'effort supplémentaire. Ce n'est pas un échec de la tâche, puisqu'il a fini par trouver.
- Satisfaction : le SUS est un questionnaire de satisfaction perçue, sous la moyenne de référence de 68.
Tu avais trouvé ?
Exercice 2 sur 4 UX ou UI ? Réussi À revoir
Range chaque décision de l'équipe Prêt'Matos du côté de l'UX ou de l'UI, et justifie en une phrase.
- Choisir la police et la taille du texte des cartes du catalogue.
- Envoyer le rappel la veille du retour, et le dernier jour ouvré quand le retour tombe un lundi.
- Afficher les horaires d'ouverture du stock sur la confirmation de réservation.
- Donner le même style à tous les boutons principaux.
- Interroger quatre commerciaux pour savoir quand ils ont besoin d'un vidéoprojecteur.
Voir la réponseMasquer la réponse de l'exercice 2
- UI : c'est l'apparence de l'écran.
- UX : la décision porte sur le moment et le contexte de l'expérience, hors de l'écran de réservation.
- UX : elle évite un déplacement inutile au stock, une étape du parcours qui se passe après l'écran. Son placement sur la page, en revanche, est une question d'UI.
- UI : c'est la cohérence visuelle des composants (elle sert aussi l'UX, puisque l'utilisateur reconnaît l'action principale partout).
- UX : c'est la recherche utilisateur, le point de départ de la démarche.
Les deux se recouvrent souvent : retiens que l'UI est une partie de l'UX, celle qu'on voit.
Tu avais trouvé ?
Exercice 3 sur 4 Rendre une exigence vérifiable Réussi À revoir
Réécris chaque exigence pour qu'on puisse dire, à la recette, « conforme » ou « non conforme » sans discussion.
- « L'application doit être facile à utiliser. »
- « Les messages doivent être clairs. »
- « L'appli doit marcher sur mobile. »
Voir la réponseMasquer la réponse de l'exercice 3
Plusieurs réponses sont possibles ; l'important est qu'elles se mesurent.
- « Lors d'un test avec cinq salariés qui ne connaissent pas l'application, au moins quatre réservent un matériel en moins de 2 minutes, sans aide. »
- « Chaque message d'erreur indique le champ concerné et la façon de corriger ; la liste des messages est validée par la Product Owner avant la recette. »
- « Toutes les fonctions du salarié sont utilisables sur un écran de 360 pixels de large, sans défilement horizontal, avec des zones tactiles d'au moins 44 × 44 pixels. »
Tu avais trouvé ?
Exercice 4 sur 4 Quelle activité du cycle ? Réussi À revoir
Associe chaque action à l'une des quatre activités de la conception centrée sur l'utilisateur.
- Yanis passe une matinée au comptoir du stock à regarder comment se font les sorties de matériel.
- Lina dessine trois versions du formulaire de réservation sur papier.
- Nadia Faure et l'équipe écrivent : « un prêt dure 15 jours au maximum, premier et dernier jour compris ».
- Cinq salariés essaient le prototype pendant que Yanis note où ils hésitent.
- Après le test, Lina redessine le calendrier.
Voir la réponseMasquer la réponse de l'exercice 4
- Comprendre le contexte d'utilisation (observation).
- Produire des solutions de conception.
- Spécifier les exigences (une règle vérifiable).
- Évaluer (test utilisateur).
- Produire des solutions, à nouveau : c'est l'itération que déclenche l'évaluation.
Tu avais trouvé ?