Évaluer l'utilisabilité des composants de l'interface

1. Objectifs

   • Définir ce qu'est un composant d'interface utilisable
   • Vérifier les six qualités d'un composant : compréhensible, atteignable, réactif, cohérent, tolérant, accessible
   • Distinguer les états d'un composant et vérifier qu'ils se reconnaissent
   • Tenir compte de la zone du pouce et de la taille des cibles sur téléphone
   • Relever les problèmes composant par composant dans une grille d'analyse
   • Compléter les observations par la facilité perçue (questionnaire SUS)

1. Présentation

   • Une interface est faite de composants: boutons, champs, listes, filtres, onglets, menus, messages. Chacun peut, à lui seul, faire échouer une tâche : un bouton qui semble désactivé, une case trop petite, un message qui disparaît avant d'être lu.
   • Cette leçon montre comment observer et évaluer chaque composant pendant les tests, et comment transformer ces observations en problèmes précis et corrigeables.

• Nous continuons avec BiblioCampus. Pour les activités, créez le dossier 09-5-composants/ dans votre dépôt GitHub ui-ux-design-bts.

1. Qu'est-ce qu'un composant utilisable ?

   • Un composant est utilisable quand il répond à six qualités. Chacune correspond à une question que l'on se pose en regardant un participant s'en servir :

• Ces qualités prolongent les critères ergonomiques vus au début du cours : un composant « compréhensible » respecte la signifiance, un composant « réactif » le guidage, un composant « tolérant » la gestion des erreurs.

1. Les états d'un composant

   • Un même composant change d'état : normal, survolé ou sélectionné au clavier, appuyé, en cours de traitement, désactivé, en erreur. Chaque état doit se reconnaître, et pas seulement par la couleur :

• Pendant le test, observez les participants qui touchent deux fois le même bouton : c'est souvent qu'aucun état « en cours » ne leur a montré que leur action était prise en compte.

1. La zone du pouce et la taille des cibles

   • Sur téléphone, l'usager tient souvent l'appareil d'une main. Les composants importants doivent se trouver là où le pouce arrive facilement, et être assez grands pour être touchés du premier coup :

1. La grille d'analyse des composants

   • Après les sessions, on relève chaque problème dans une grille : le composant, la qualité en défaut, le constat observé, le nombre de participants concernés et la correction envisagée :

• Le nombre de participants concernés deviendra la fréquence du problème dans la leçon suivante.
• Complétez avec le questionnaire SUS, rempli par chaque participant en fin de session : il mesure la facilité perçue, sur 100 (68 = moyenne habituelle, au-dessus de 80 = bon). Un score bas avec des tâches réussies signale une interface qui fatigue ou inquiète.

1. Exemple 1 : le bouton qui semblait désactivé

   • Sur la fiche d'un livre, le bouton « Réserver » était gris clair, pour rester « discret ». Trois participants sur cinq l'ont cru désactivé et ont cherché une autre façon de réserver.
   • Qualité en défaut : compréhensible. L'équipe a rendu le bouton plein et contrasté, et réservé le gris aux boutons réellement désactivés, accompagnés de la raison (« Aucun exemplaire libre »).
   • Au test suivant, plus aucun participant n'a hésité ; le temps moyen pour réserver est passé de 71 à 34 secondes.

1. Exemple 2 : le message qui disparaissait

   • Après une réservation, un petit message « Réservation enregistrée » s'affichait 1,5 seconde en bas de l'écran. Quatre participants sur cinq ne l'ont pas vu, et deux ont réservé une seconde fois.
   • Qualité en défaut : réactif. Le message a été remplacé par un écran de confirmation, avec le titre du livre, la date limite de retrait et un lien vers « Mes prêts ».
   • Le double appui sur le bouton a aussi été rendu impossible : le bouton passe à l'état « en cours », puis mène à la confirmation.

1. Activité 1 : quelle qualité en défaut ?

   • Pour chaque constat, indiquez la qualité en défaut :
     • a) « Le bouton “Ajouter au panier” est gris clair : P2 pense qu'il est désactivé » ;
     • b) « Les créneaux font 22 px de haut : P4 touche le mauvais » ;
     • c) « “Révoquer” annule la commande sans confirmation » ;
     • d) « L'affluence n'est indiquée que par un point rouge » ;
     • e) « Le message “Article ajouté” disparaît en 1,5 s ».
   • Vérifier : a) compréhensible ; b) atteignable ; c) tolérant ; d) accessible ; e) réactif.

1. Activité 2 : inventaire des composants

   • Listez les composants du prototype de CantineCampus du TP 6 (boutons, champs, filtres, créneaux, onglets, menus, messages) et l'écran où chacun apparaît.
   • Vérifier : au moins douze composants, regroupés par type.

1. Activité 3 : vérifier les états

   • Pour trois composants clés (le bouton d'ajout, un créneau, le bouton de paiement), dessinez leurs états : normal, focus, appuyé, en cours, désactivé, erreur.
   • Vérifier : chaque état se distingue autrement que par la couleur seule (texte, icône, contour, forme).

1. Activité 4 : la zone du pouce

   • Sur une capture de trois écrans de votre prototype, tracez la zone du pouce et entourez les actions principales. Mesurez la hauteur des plus petites cibles.
   • Vérifier : les actions principales sont dans la zone facile ; les cibles de moins de 44 px sont signalées.

1. Activité 5 : observer pendant le test

   • Pendant vos sessions du TP 6, notez chaque difficulté liée à un composant : hésitation, erreur de toucher, double appui, message non vu.
   • Vérifier : chaque note cite le composant, l'écran, le participant et ce qui s'est passé.

1. Activité 6 : remplir la grille

   • Reportez vos observations dans la grille d'analyse des composants : composant, qualité en défaut, constat, participants concernés, correction envisagée.
   • Vérifier : au moins huit problèmes, chacun avec une preuve et un nombre de participants.

1. Activité 7 : le score SUS

   • Calculez le score SUS de vos cinq participants et comparez-le aux taux de réussite des tâches. Rédigez cinq lignes d'interprétation.
   • Vérifier : le calcul suit la règle (impaires : réponse − 1 ; paires : 5 − réponse ; somme × 2,5) et l'interprétation relie le score aux composants les plus gênants.

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

   • Regroupez vos réponses dans 09-5-composants/README.md, avec la grille et les états dessinés, puis envoyez le tout :

git add 09-5-composants projet-cantinecampus/05-tester
git commit -m "Ajoute l'analyse des composants de CantineCampus"
git push

• Vérifier : la grille d'analyse et le score SUS apparaissent sur GitHub.

1. Erreurs fréquentes

1. À retenir

   • Un composant utilisable est compréhensible, atteignable, réactif, cohérent, tolérant et accessible.
   • Chaque état d'un composant doit se reconnaître, pas seulement par la couleur.
   • Sur téléphone : actions principales dans la zone du pouce, cibles d'au moins 44 px.
   • Une grille relève chaque problème : composant, qualité, constat, participants, correction.
   • Le SUS mesure la facilité perçue ; il complète les observations, sans les remplacer.

Un composant réussi ne se remarque pas : on le comprend, on le touche, il répond, et l'on passe à la suite.