Usability-Test-Lab: einen schwer bedienbaren Webshop prüfen und einen Test im Browser lesen

Dieses Lab gibt jeder lernenden Person ein eigenes JupyterLab mit einem kleinen Webshop, der absichtlich schwer zu bedienen ist: grauer Text, der sich schlecht lesen lässt, Links, die nur „click here“ sagen, Felder ohne Beschriftung, Bilder ohne Alternativtext, ein entfernter Fokusrahmen, eine Fehlermeldung, die nur „Error 7“ sagt, und ein Knopf, der für ein Handy zu klein ist. Daneben liegt das Ergebnis eines Usability-Tests dieses Shops mit zwölf Personen, vier Aufgaben und einem Fragebogen mit zehn Fragen sowie kurze Skripte, die die Seite prüfen und die Zahlen lesen.

Es ist kein Angriffs-Lab. Jede Kopie hat keinen Weg ins Internet und keinen zu einer anderen lernenden Person, also kann nichts hineingeladen werden und nichts darin kann jemand anderen erreichen. Der Shop ist erfunden: Er ist eine Seite zum Reparieren, kein echter Laden.

Was die Lernenden lernen

Eine Seite so anzusehen, wie es eine nutzende Person tut: das Kontrastverhältnis von Text zu Hintergrund, Alternativtext bei Bildern, Beschriftungen von Formularfeldern, Linktexte, den Fokusrahmen und die Größe eines Knopfs. Dann einen Usability-Test zu lesen: die Erfolgsquote und die mittlere Zeit jeder Aufgabe mit pandas, die Fehler, die jede Aufgabe verursachte, und den Wert, den ein Fragebogen mit zehn Fragen jeder Person und der Gruppe gibt. Zuletzt eine Seite zu verbessern, die Änderung in der Live-Vorschau zu prüfen und sie zu belegen, indem man das Audit erneut ausführt. Es passt zu Einführungen in Usability, User Experience und Barrierefreiheit; prüfen Sie den genauen Wortlaut in der Einheit Ihrer eigenen Prüfungsstelle, hier wird keiner zitiert.

Im Browser ausführen

Das Lab startet einen Dienst, jupyter, der den Shop, die Testdaten, die Notizen, ein Notebook und die kurzen Skripte in seinen Arbeitsordner schreibt und den Shop aus einem eigenen Ordner ausliefert. Von der Seite des Labs öffnen sich zwei Links: JupyterLab, die Werkbank, in der die lernende Person die Dateien des Shops bearbeitet und die Skripte ausführt, und die Vorschau (Preview), der Shop selbst, den sie nach dem Speichern einer Änderung neu lädt. JupyterLab verlangt kein Token, weil die Tür der Plattform schon weiß, wer es öffnet. Das Terminal neben dem Lab hat kein eigenes Python, es erreicht das des Labs mit docker exec jupyter, gefolgt vom Befehl, der darin ausgeführt wird.

  1. Container-Seite öffnen. Öffnen Sie in der Leiste „Entwickeln“ und wählen Sie „Einen Container ausführen“. Die Seite kann jeder öffnen, und das Git-Lab und das SQL-Lab starten ohne Konto. Alle anderen Labs brauchen ein kostenloses Konto: Erstellen Sie eines, melden Sie sich an und klicken Sie dann auf „Starten“.
  2. Lab suchen. Die Karte „Beispiel-Labs“ listet alle Beispiele auf. Suchen Sie Usability-Test: einen Webshop prüfen.
  3. Auf „Starten“ klicken. „Starten“ führt das Lab unverändert mit einem einzigen Klick aus. „Zuerst die Datei bearbeiten“ öffnet die Compose-Datei, damit Sie sie vor dem Start ändern können.
  4. Öffnen. Auf der Seite des Labs hat die Lab-Leiste zwei Links. Klicken Sie auf JupyterLab, um die Werkbank zu öffnen, und auf Preview, um den Shop in einem anderen Tab zu sehen. Klicken Sie dann auf Terminal öffnen und tippen Sie docker exec jupyter python3 steps/audit.py, um die Zahl der Probleme auf den beiden Seiten zu sehen.

Was die Lernenden abgeben sollen

Die drei Dateien des Shops, die sie geändert haben (index.html, checkout.html und style.css), aus JupyterLab mit File, Download heruntergeladen. Dazu die Ausgabe von Audit und Kontrastprüfung vorher und nachher und einen kurzen Absatz in eigenen Worten dazu, welches vom Test gefundene Problem sie zuerst behoben haben und warum. Nichts wird automatisch bewertet: Der Absatz zeigt, ob die Zahlen verstanden wurden. Für anspruchsvollere Arbeit verlangen Sie, jede Korrektur mit einer Notiz einer beobachtenden Person oder einer Aufgabe mit niedriger Erfolgsquote zu verbinden und zu sagen, was der Test mit nur zwölf Personen nicht zeigen kann.

Eine Grundlagenlektion zu diesem Lab

Usability Testing Basics ist eine kleine Lektion, die in diesem Lab abläuft. Darin listet die lernende Person den Arbeitsordner auf und liest die Notizen der Beobachtenden, prüft den Kontrast der Farben des Shops, prüft die Seiten per Audit, liest Erfolgsquote, mittlere Zeit und Fragebogenwert des Tests, zählt die Fehler und führt das Audit nach einer eigenen Änderung erneut aus.

Kostenlose persönliche Konten haben sie im Modul Basics, das auf der Startseite liegt, und jede Einrichtung kann sie aus dem Ordner Basics der Bibliothek kopieren. Sie ist absichtlich klein: Sie zeigt einer Lehrkraft, was eine in einem Lab ablaufende Lektion ist, und das Lab erledigt den Rest. Kopieren Sie sie in ein eigenes Modul, um sie zu ändern.

Der Code auf GitHub

Die Compose-Datei hat kein Dockerfile: Sie startet ein einziges öffentliches Standard-Image, das scipy-notebook der Jupyter Docker Stacks, auf ein datiertes Tag festgelegt, mit einem eigenen Konto ohne Sonderrechte und 512 MB Speicher. Das Image steht unter der BSD-3-Clause-Lizenz und wird von uns nicht verbreitet. Die Datei schreibt Shop, Testdaten und Skripte beim Start aus einem festen Startwert, jede Kopie hat also dieselben Zahlen und nichts wird heruntergeladen, und sie liefert den Shop mit Pythons einfachem Webserver im Hintergrund aus. Die Grenzen sind ehrlich: Der Shop besteht aus drei kleinen Dateien, der Test ist erfunden und klein, das Audit prüft einige häufige Probleme und nicht alle, im Lab gibt es keinen Browser außer Ihrem eigenen, und aus dem Internet lässt sich nichts installieren. Beim Stoppen des Labs bleibt nichts erhalten, also lädt die lernende Person ihre Dateien vorher herunter.

Als Aufgabe stellen

Schreiben Sie in die Aufgabe, was abzugeben ist.

  1. Lab erstellen. Fügen Sie in Ihrem Modul eine Aufgabe hinzu und wählen Sie die Karte „Container-Lab“, dann „In einem GitHub-Repository“. Geben Sie https://github.com/mitsurutech/lab-usability mit dem Branch main an. Die Compose-Datei ist standardmäßig compose.yaml. Forken Sie das Repository zuerst, wenn Sie es ändern möchten, zum Beispiel um einen anderen Shop oder andere Testergebnisse zu schreiben.
  2. Veröffentlichen und ausprobieren. „Veröffentlichen“ legt den Commit fest, den Sie gesehen haben. Eine spätere Änderung im Repository verändert also kein Lab, das Sie bereits gestellt haben. Starten Sie zuerst Ihre eigene Kopie.
  3. Zuweisen. Weisen Sie es wie jede Aufgabe zu, auf Wunsch mit Fälligkeitsdatum, und schreiben Sie in die Aufgabe, was zu tun ist und was abgegeben werden soll.
  4. Abgaben bewerten. Öffnen Sie die Kopie einer lernenden Person und die abgegebene Arbeit, bewerten Sie sie und geben Sie sie mit einer Begründung zur Überarbeitung zurück, wenn mehr nötig ist.

Dieses Lab ausprobieren, und was es kostet

Mit einem kostenlosen persönlichen Konto können Sie die Grundlagenlektionen in diesem Lab durcharbeiten, mit genug kostenlosem Guthaben pro Monat für die meisten Lektionen und ohne Karte. Für eine Klasse sind die ersten 365 Tage für eine Schule kostenlos, für bis zu 50 Lernende; danach zahlt sie je lernender Person und Jahr, alle Labs inklusive und Lehrkräfte kostenlos.

Häufige Fragen

Warum muss ich kein Token und kein Passwort eingeben?
Die Webseite eines Labs ist nur über die Tür der Plattform erreichbar, die schon weiß, wer Sie sind, und nur Sie und die Lehrkräfte Ihres Moduls einlässt. JupyterLab startet deshalb ohne Token. Starten Sie es nicht so auf einem Rechner, den andere erreichen können.
Warum benutzt das Terminal docker exec jupyter?
Das Terminal des Labs enthält curl, psql und ein paar weitere Clients, aber kein Python. docker exec jupyter führt einen Befehl im Container des Labs aus, der Python und alle Bibliotheken hat. JupyterLab hat auch ein eigenes Terminal unter File, New, Terminal.
Warum ändert sich die Vorschau nicht, wenn ich eine Datei speichere?
Die Vorschau ist ein statischer Server auf dem Shop-Ordner und zeigt die Datei so, wie sie auf der Festplatte liegt. Speichern Sie in JupyterLab und laden Sie dann den Vorschau-Tab neu; zeigt er noch die alte Seite, laden Sie noch einmal neu und umgehen Sie den Cache.
Können die Lernenden die Testdaten ändern oder eine Seite hinzufügen?
Sie können alles im Arbeitsordner bearbeiten, aber nichts aus dem Internet, das eine Kopie nicht erreicht. Um jeder lernenden Person einen anderen Shop oder einen anderen Test zu geben, forken Sie das Repository, ändern Sie, was die Compose-Datei schreibt, und stellen Sie den Fork als Lab ein.