Grundlagen des Usability-Tests

Ein Laden hat die Teekannen, die Leute wollen, einen fairen Preis und einen guten Namen, und trotzdem gehen sie an der Kasse. Niemand ist unhöflich. Sie wussten nur nicht, was sie drücken sollten. Eine Seite, die schwer zu bedienen ist, verliert Leute leise, und man erfährt es nur, indem man einigen beim Ausprobieren zusieht.

• Usability (Gebrauchstauglichkeit): wie leicht und wie gut Menschen mit einer Seite ihr Ziel erreichen.
• Barrierefreiheit: ob auch Menschen mit schlechtem Sehvermögen, mit Screenreader, nur mit Tastatur oder mit einem kleinen Handy sie nutzen können.
• Kontrastverhältnis: wie stark sich die Textfarbe von der Farbe dahinter unterscheidet, von 1 (gleich) bis 21 (Schwarz auf Weiß).
• Alternativtext (alt): Worte, die ein Bild ersetzen, wenn man es nicht sehen kann.
• Erfolgsquote: der Anteil der Personen, die eine Aufgabe geschafft haben.
• Median: der mittlere Wert, wenn man die Zeiten der Größe nach ordnet.

ls listet den Arbeitsordner: den Laden, die zwei Ergebnistabellen, die Notizen, das Start-Notebook und die Skripte. cat notes.md zeigt, was die Beobachtenden aufschrieben, während zwölf Personen den Laden ausprobierten. Lies sie neben der Vorschau: grauer Text, schwer lesbar, ein Knopf „Buy“, der viermal gedrückt wurde, jemand, der fragt, was „Error 7“ ist. Notizen sind noch keine Zahlen, aber sie zeigen, wo man hinschauen muss.

Das Skript liest die Farben in shop/style.css und berechnet das Kontrastverhältnis jedes Paars aus Text- und Hintergrundfarbe. Die übliche Kontrastempfehlung verlangt mindestens 4,5 für normalen Text. Der Fließtext, grau auf weiß, kommt auf 2,85, das ist zu wenig. Die Überschrift, dunkelgrau auf weiß, kommt auf 15,91, das ist reichlich. Drei weitere Paare fallen durch, darunter die Linkfarbe mit 1,89.

Das Audit liest die zwei Seiten und das Stylesheet und zählt vier häufige Probleme. Auf der Startseite haben 3 von 4 Bildern keinen Alternativtext, und 5 von 6 Links sagen nur Dinge wie „click here“ oder „read more“, sodass jemand, der sich die Links vorlesen lässt, nichts darüber erfährt, wohin sie führen. Auf der Bezahlseite haben 3 von 4 Feldern keine Beschriftung, und die einzige Fehlermeldung ist nur ein Code. Im Stylesheet entfernt eine Regel den Fokusrahmen, die Linie, die Tastaturnutzenden zeigt, wo sie sind.

Zwölf Personen probierten je vier Aufgaben aus. pandas gruppiert die Zeilen nach Aufgabe und liefert die Erfolgsquote und die mittlere Zeit. Eine Teekanne zu finden, klappte bei allen, in einem Median von 27,5 Sekunden. Das Bezahlen war der schwere Teil: Nur 50 Prozent schafften die letzte Aufgabe, in einem Median von 110 Sekunden. Man nimmt den Median, weil eine sehr langsame Person den Mittelwert nach oben ziehen würde.

Nach den Aufgaben beantwortete jede Person zehn Fragen von 1 bis 5. Die übliche Auswertung macht aus den zehn Antworten eine Zahl von 0 bis 100 pro Person. Die zwölf Werte reichen von 32,5 bis 80,0, der Mittelwert ist 55,0, und Werte um 68 gelten üblicherweise als durchschnittlich, die Leute fanden diesen Laden also schwerer als die meisten. Das zweite Skript zählt die Fehler: Die letzte Aufgabe hat 34, mehr als jede andere.

Such dir ein Problem aus, zum Beispiel den Fokusrahmen: Öffne in JupyterLab shop/style.css, ändere es, speichere und lade die Vorschau neu. Führe dann das Skript unten aus. Es behebt selbst nichts: Es startet das Audit und die Kontrastprüfung noch einmal, die Zahlen ändern sich also nur, wenn deine Änderung etwas bewirkt hat. Eine Korrektur, die man weder in den Zahlen noch in der Vorschau sieht, ist eine, deren man sich nicht sicher sein kann.

Öffne JupyterLab über die Leiste und doppelklicke start.ipynb. Es lädt die beiden Tabellen und berechnet dieselben Erfolgsquoten, Zeiten und Fehler, Zelle für Zelle. Klicke auf eine Zelle und drücke Umschalt und Eingabe, um sie auszuführen. In der letzten Zelle ist Platz für deine eigene Frage: Hat die langsamste Person auch den niedrigsten Fragebogenwert?