Les bases du test d'utilisabilité

Une boutique a les théières que les gens veulent, un prix correct et une bonne réputation, et pourtant ils partent au moment de payer. Personne n'est désagréable. Ils n'ont simplement pas compris sur quoi appuyer. Une page difficile à utiliser fait perdre des clients sans bruit : le seul moyen de le savoir, c'est d'en regarder quelques-uns essayer.

• Utilisabilité : la facilité et la qualité avec lesquelles on atteint son but grâce à une page.
• Accessibilité : le fait que des personnes qui voient mal, qui utilisent un lecteur d'écran, le clavier seul ou un petit téléphone puissent aussi s'en servir.
• Rapport de contraste : l'écart entre la couleur du texte et celle du fond, de 1 (identiques) à 21 (noir sur blanc).
• Texte alternatif (alt) : des mots qui remplacent une image quand on ne peut pas la voir.
• Taux de réussite : la part des personnes qui ont terminé une tâche.
• Médiane : la valeur du milieu quand on range les durées dans l'ordre.

ls liste le dossier de travail : la boutique, les deux tableaux de résultats, les notes, le notebook de départ et les scripts. cat notes.md affiche ce que les observateurs ont écrit pendant que douze personnes essayaient la boutique. Lis-les en regardant l'aperçu : un texte gris difficile à lire, un bouton « Buy » pressé quatre fois, quelqu'un qui demande ce qu'est « Error 7 ». Ce ne sont pas encore des chiffres, mais ils disent où regarder.

Le script lit les couleurs de shop/style.css et calcule le rapport de contraste de chaque couple texte et fond. La règle de contraste usuelle demande au moins 4,5 pour un texte ordinaire. Le texte principal, gris sur blanc, obtient 2,85 : c'est trop bas. Le titre, gris foncé sur blanc, obtient 15,91 : c'est largement assez. Trois autres couples échouent, dont la couleur des liens, à 1,89.

L'audit lit les deux pages et la feuille de style, et compte quatre défauts courants. Sur la page d'accueil, 3 images sur 4 n'ont pas de texte alternatif et 5 liens sur 6 disent seulement des choses comme « click here » ou « read more » : une personne qui écoute les liens n'apprend rien sur leur destination. Sur la page de paiement, 3 champs sur 4 n'ont pas d'étiquette, et l'unique message d'erreur n'est qu'un code. Dans la feuille de style, une règle supprime le contour du focus, la ligne qui montre à qui utilise le clavier où il se trouve.

Douze personnes ont essayé chacune quatre tâches. pandas regroupe les lignes par tâche et donne le taux de réussite et la durée médiane. Trouver une théière a réussi pour tout le monde, en 27,5 secondes en médiane. Payer, c'était le plus dur : seulement 50 pour cent ont terminé la dernière tâche, en 110 secondes en médiane. On prend la médiane parce qu'une personne très lente ferait monter la moyenne.

Après les tâches, chaque personne a répondu à dix questions, de 1 à 5. La méthode de calcul habituelle transforme les dix réponses en un nombre de 0 à 100 par personne. Les douze scores vont de 32,5 à 80,0, avec une moyenne de 55,0 ; des scores autour de 68 se lisent d'ordinaire comme moyens, donc les gens ont trouvé cette boutique plus difficile que la plupart. Le second script compte les erreurs : la dernière tâche en a 34, plus que toute autre.

Choisis un problème, par exemple le contour du focus : dans JupyterLab, ouvre shop/style.css, modifie-le, enregistre, puis actualise l'aperçu. Lance ensuite le script ci-dessous. Il ne corrige rien lui-même : il relance l'audit et le contrôle du contraste, donc les chiffres ne changent que si ta modification a changé la page. Une correction qu'on ne voit ni dans les chiffres ni dans l'aperçu est une correction dont on ne peut pas être sûr.

Ouvre JupyterLab depuis la barre et double-clique sur start.ipynb. Il charge les deux tableaux et calcule les mêmes taux de réussite, durées et erreurs, une cellule à la fois. Clique sur une cellule et appuie sur Maj et Entrée pour l'exécuter. La dernière cellule attend ta propre question : la personne la plus lente donne-t-elle aussi le score de questionnaire le plus bas ?