Aller au contenu
Réussir mon BTS SIO

Tape une notion, une commande ou le nom d'une épreuve.

Par exemple

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'interfaceComment on l'utiliseOù tu la croises
Ligne de commandeOn tape des commandes, le système répond en texteTerminal Linux, PowerShell, Git
Graphique de bureauFenêtres, menus, boutons, souris et clavierApplication WinForms, logiciel de gestion
WebPages dans un navigateur, liens et formulairesIntranet, application métier en React ou PHP
Tactile (mobile)Gestes du doigt sur un petit écranApplication React Native, site responsive
VocaleLa voix, en entrée et en sortieAssistants vocaux, serveurs vocaux téléphoniques
ConversationnelleUn échange en langage naturelAgent 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é.

NotionLa question qu'elle poseExemple sur Prêt'Matos
ErgonomieL'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
UXQue 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èreCe qu'il mesureIndicateurs 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)
EfficienceCombien 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
SatisfactionComment 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.

Planifier la démarche1. Comprendre le contexted'utilisationutilisateurs, tâches, environnementchapitre 42. Spécifier les exigencesdes utilisateursexigences vérifiables, user storieschapitre 93. Produire des solutionsde conceptionwireframes, maquettes, prototypes, codechapitres 5, 6, 7, 10 et 114. Évaluer les solutionspar rapport aux exigencesinspection, tests utilisateurs, SUSchapitre 8itérer si les exigencesne sont pas atteintesexigences atteintesSolution qui répond aux exigences
La conception centrée sur l'utilisateur : quatre activités, répétées jusqu'à ce que l'évaluation valide la solution
ActivitéCe que l'on produitPour Prêt'Matos
Comprendre le contexte d'utilisationDescription des utilisateurs, des tâches, de l'environnement ; personasEntretiens avec la logistique, lecture de 50 courriels de demande, observation du comptoir du stock
Spécifier les exigencesExigences 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 solutionsCroquis, wireframes, maquettes, prototypes, puis l'applicationMaquettes du catalogue et du formulaire de réservation, montrées à quatre salariés
ÉvaluerRésultats d'inspection et de tests, problèmes classésTest 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.

  1. Un participant sur 5 a réservé le casque au lieu du vidéoprojecteur demandé.
  2. La réservation prend en moyenne 3 min 10.
  3. Une participante déclare : « Franchement, je continuerai à envoyer un mail, c'est plus simple. »
  4. Un participant est revenu trois fois en arrière avant de trouver le calendrier.
  5. Le score SUS moyen est de 62.
Voir la réponseMasquer la réponse de l'exercice 1
  1. Efficacité : le but n'est pas atteint correctement (mauvais matériel).
  2. Efficience : c'est le temps dépensé pour atteindre le but.
  3. Satisfaction : c'est l'attitude envers le produit. Elle annonce un rejet : ce commentaire vaut une alerte.
  4. 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.
  5. 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.

  1. Choisir la police et la taille du texte des cartes du catalogue.
  2. Envoyer le rappel la veille du retour, et le dernier jour ouvré quand le retour tombe un lundi.
  3. Afficher les horaires d'ouverture du stock sur la confirmation de réservation.
  4. Donner le même style à tous les boutons principaux.
  5. Interroger quatre commerciaux pour savoir quand ils ont besoin d'un vidéoprojecteur.
Voir la réponseMasquer la réponse de l'exercice 2
  1. UI : c'est l'apparence de l'écran.
  2. UX : la décision porte sur le moment et le contexte de l'expérience, hors de l'écran de réservation.
  3. 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.
  4. UI : c'est la cohérence visuelle des composants (elle sert aussi l'UX, puisque l'utilisateur reconnaît l'action principale partout).
  5. 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.

  1. « L'application doit être facile à utiliser. »
  2. « Les messages doivent être clairs. »
  3. « 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.

  1. « 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. »
  2. « 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. »
  3. « 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.

  1. Yanis passe une matinée au comptoir du stock à regarder comment se font les sorties de matériel.
  2. Lina dessine trois versions du formulaire de réservation sur papier.
  3. Nadia Faure et l'équipe écrivent : « un prêt dure 15 jours au maximum, premier et dernier jour compris ».
  4. Cinq salariés essaient le prototype pendant que Yanis note où ils hésitent.
  5. Après le test, Lina redessine le calendrier.
Voir la réponseMasquer la réponse de l'exercice 4
  1. Comprendre le contexte d'utilisation (observation).
  2. Produire des solutions de conception.
  3. Spécifier les exigences (une règle vérifiable).
  4. Évaluer (test utilisateur).
  5. Produire des solutions, à nouveau : c'est l'itération que déclenche l'évaluation.

Tu avais trouvé ?

Chapitre terminé !

Fais les 4 exercices avant de passer à la suite : c'est en t'entraînant que tout se fixe.

chapitres
–
de série
–
du cours
–
Chapitre suivant : Les critères ergonomiques de Bastien et ScapinRevoir le sommaire du cours