Lab de test d’utilisabilité : auditer une boutique difficile à utiliser et lire un test dans le navigateur

Ce lab donne à chaque élève un JupyterLab à lui avec une petite boutique volontairement difficile à utiliser : un texte gris difficile à lire, des liens qui disent seulement « click here », des champs sans étiquette, des images sans texte alternatif, un contour de focus supprimé, une erreur qui dit seulement « Error 7 » et un bouton trop petit pour être pressé sur un téléphone. À côté, le résultat d’un test d’utilisabilité de cette boutique avec douze personnes, quatre tâches et un questionnaire de dix questions, et de petits scripts qui auditent la page et lisent les chiffres.

Ce n’est pas un lab d’attaque. Chaque copie n’a aucun accès à internet ni à aucun autre élève : rien ne peut y être téléchargé et rien n’y peut atteindre quelqu’un d’autre. La boutique est inventée : c’est une page à réparer, pas une vraie boutique.

Ce que les élèves apprennent

Regarder une page comme le fait un utilisateur : le rapport de contraste du texte sur son fond, le texte alternatif des images, les étiquettes des champs, les mots des liens, le contour du focus et la taille d’un bouton. Puis lire un test d’utilisabilité : le taux de réussite et la durée médiane de chaque tâche avec pandas, les erreurs causées par chaque tâche, et le score que donne à chaque personne et au groupe un questionnaire de dix questions. Enfin corriger une page, vérifier le changement dans l’aperçu en direct et le prouver en relançant l’audit. Il convient aux introductions à l’utilisabilité, à l’expérience utilisateur et à l’accessibilité ; vérifiez la formulation exacte dans l’unité de votre propre organisme certificateur, aucune n’est citée ici.

Le lancer dans votre navigateur

Le lab démarre un seul service, jupyter, qui écrit la boutique, les données du test, les notes, un notebook et les petits scripts dans son dossier de travail, et sert la boutique depuis son propre dossier. Deux liens s’ouvrent depuis la page du lab : JupyterLab, l’atelier où l’élève modifie les fichiers de la boutique et lance les scripts, et l’Aperçu (Preview), la boutique elle-même, que l’élève actualise après avoir enregistré un changement. JupyterLab ne demande aucun jeton, car la porte de la plateforme sait déjà qui l’ouvre. Le terminal à côté du lab n’a pas de Python à lui : il atteint celui du lab avec docker exec jupyter, suivi de la commande à lancer à l’intérieur.

  1. Ouvrir la page Conteneur. Ouvrez « Créer » dans la barre et choisissez « Lancer un conteneur ». Tout le monde peut ouvrir la page, et le lab Git et le lab SQL se lancent sans compte. Tous les autres labs demandent un compte gratuit : créez-en un, connectez-vous, puis appuyez sur « Démarrer ».
  2. Trouver le lab. La carte « Laboratoires d’exemple » liste tous les exemples. Trouvez Test d’utilisabilité : auditer une boutique.
  3. Appuyer sur Démarrer. « Démarrer » le lance tel quel, en un clic. « Modifier le fichier d’abord » ouvre le fichier compose pour que vous puissiez le changer avant de démarrer.
  4. L’ouvrir. Sur la page du lab, la barre du lab a deux liens. Appuyez sur JupyterLab pour ouvrir l’atelier et sur Preview pour voir la boutique dans un autre onglet. Appuyez ensuite sur « Ouvrir le terminal » et tapez docker exec jupyter python3 steps/audit.py pour voir le nombre de problèmes sur les deux pages.

Que demander aux élèves de rendre

Les trois fichiers de la boutique qu’ils ont modifiés (index.html, checkout.html et style.css), téléchargés depuis JupyterLab avec File, Download. Avec eux, la sortie de l’audit et du contrôle du contraste avant et après, et un court paragraphe, de leurs propres mots, sur le problème trouvé par le test qu’ils ont corrigé en premier et pourquoi. Rien n’est noté automatiquement : le paragraphe montre si les chiffres ont été compris. Pour un travail plus poussé, demandez de relier chaque correction à une note d’observateur ou à une tâche au faible taux de réussite, et de dire ce que le test ne peut pas montrer avec seulement douze personnes.

Une leçon de base sur ce lab

Usability Testing Basics est une petite leçon qui se fait dans ce lab. L’élève y liste le dossier de travail et lit les notes des observateurs, vérifie le contraste des couleurs de la boutique, audite les pages, lit le taux de réussite, la durée médiane et le score du questionnaire du test, compte les erreurs, puis relance l’audit après un changement de sa part.

Un compte personnel gratuit la reçoit dans le module Basics, qui se trouve sur « Accueil », et chaque établissement peut la copier depuis le dossier Basics de la Bibliothèque. Elle est volontairement petite : elle montre à un enseignant ce qu’est une leçon qui se fait dans un lab, et le lab fait le reste. Copiez-la dans un module à vous pour la modifier.

Le code sur GitHub

Le fichier compose n’a pas de Dockerfile : il lance une seule image publique, scipy-notebook des Jupyter Docker Stacks, figée sur une étiquette datée, avec son propre compte sans privilèges et 512 Mo de mémoire. L’image est sous licence BSD-3-Clause et n’est pas distribuée par nous. Le fichier écrit la boutique, les données du test et les scripts à partir d’une graine fixe au démarrage : chaque copie a les mêmes nombres et rien n’est téléchargé, et il sert la boutique avec le petit serveur web de Python en arrière-plan. Les limites sont honnêtes : la boutique tient en trois petits fichiers, le test est inventé et petit, l’audit vérifie quelques problèmes courants et pas tous, il n’y a pas de navigateur dans le lab en dehors du vôtre, et rien ne peut être installé depuis internet. Rien n’est conservé quand le lab s’arrête : l’élève télécharge ses fichiers avant.

En faire un travail

Indiquez dans la tâche ce qu’il faut rendre.

  1. Créer le lab. Dans votre module, ajoutez une tâche et choisissez la carte « Lab de conteneurs », puis « Dans un dépôt GitHub ». Indiquez https://github.com/mitsurutech/lab-usability avec la branche main. Le fichier compose par défaut est compose.yaml. Faites d’abord un fork du dépôt si vous voulez le modifier, par exemple pour écrire une autre boutique ou d’autres résultats de test.
  2. Publier et l’essayer. « Publier » fige le commit qui vous a été montré : un changement ultérieur dans le dépôt ne modifie donc pas un lab que vous avez déjà proposé. Démarrez d’abord votre propre copie.
  3. Le distribuer. Attribuez-le comme n’importe quelle tâche, avec une échéance si vous le souhaitez, et indiquez dans la tâche ce qu’il faut faire et ce qu’il faut rendre.
  4. Noter ce qui est rendu. Ouvrez la copie d’un élève et le travail rendu, notez-le et renvoyez-le avec un motif s’il demande un complément.

Essayer ce lab, et ce qu’il coûte

Un compte personnel gratuit permet de suivre les leçons de base de ce lab, avec chaque mois assez de crédit gratuit pour suivre la plupart des leçons, sans carte. Pour une classe, un établissement a ses 365 premiers jours gratuits pour 50 élèves au plus, puis paie par élève et par an, tous les labs compris et les enseignants gratuits.

Questions fréquentes

Pourquoi n’y a-t-il ni jeton ni mot de passe à taper ?
La page web d’un lab ne s’atteint que par la porte de la plateforme, qui sait déjà qui vous êtes et ne laisse entrer que vous et les enseignants de votre module. JupyterLab démarre donc sans jeton. Ne le lancez pas ainsi sur une machine que d’autres peuvent atteindre.
Pourquoi le terminal utilise-t-il docker exec jupyter ?
Le terminal du lab contient curl, psql et quelques autres clients, mais pas Python. docker exec jupyter lance une commande dans le conteneur du lab, qui a Python et toutes les bibliothèques. JupyterLab a aussi son propre terminal, sous File, New, Terminal.
Pourquoi l’aperçu ne change-t-il pas quand j’enregistre un fichier ?
L’aperçu est un serveur statique sur le dossier de la boutique : il montre le fichier tel qu’il est sur le disque. Enregistrez dans JupyterLab, puis actualisez l’onglet de l’aperçu ; si l’ancienne page s’affiche encore, actualisez de nouveau en ignorant le cache.
Les élèves peuvent-ils changer les données du test ou ajouter une page ?
Ils peuvent modifier tout ce qui est dans le dossier de travail, mais pas depuis internet, qu’une copie ne peut pas atteindre. Pour donner à chaque élève une autre boutique ou un autre test, faites un fork du dépôt, changez ce qu’écrit le fichier compose, et proposez le fork comme lab.