Simulic
Deutsch

Usability- und Barrierefreiheitstest – simulierte Nutzer und WCAG

InformatikDigitale AnwendungenAlter 17–18

Wird geladen …

Mit meiner Klasse nutzen ✨ Mit KI anpassen Problem melden

Simulierte Nutzer mit unterschiedlichen Bedürfnissen (ein typischer Nutzer, eine ältere Person mit Sehschwäche, eine Person mit Handtremor, eine blinde Person mit Screenreader, eine Person, die nur die Tastatur nutzt, eine gehörlose und eine farbenblinde Person) erledigen dieselbe Aufgabe in zwei Oberflächen, A und B. Die Simulation misst Zeit, Fehler, Aktionen und Erfolgsquote und zeichnet jedes Tippen auf die Schaltflächen. Ändern Sie Schaltflächengröße, Abstand, Schriftgröße, Farben, Beschriftungen, Menütiefe, Alternativtext, Überschriftenfolge, Lesereihenfolge und Untertitel und testen Sie erneut; die Barrierefreiheitsprüfung berechnet Kontrastverhältnisse und prüft Erfolgskriterien der WCAG 2.2.

Lektion: Nutzerzentrierte Gestaltung von Oberflächen: Usability-Tests, Barrierefreiheit und WCAG-Erfolgskriterien

Was sie zeigt

Usability beschreibt, wie schnell und zuverlässig Menschen Aufgaben mit einer Oberfläche erledigen; Barrierefreiheit heißt, dass auch Menschen mit Behinderung sie nutzen können. Gestalter testen mit Nutzern mit unterschiedlichen Bedürfnissen und messen Zeit, Fehler und Erfolg. Die Tippzeit folgt dem Fittsschen Gesetz: kleine, weit entfernte Ziele dauern länger und werden öfter verfehlt. Die Richtlinien für barrierefreie Webinhalte (WCAG 2.2) legen prüfbare Kriterien fest: Textkontrast von mindestens 4,5:1, Alternativtexte für Bilder und Symbolschaltflächen, Überschriften in richtiger Reihenfolge, logische Lesereihenfolge, Untertitel für Videos, Ziele von mindestens 24 px und keine Information allein über Farbe.

So funktioniert es

Wählen Sie eine Aufgabe und eine Nutzergruppe und mit A oder B das zu bearbeitende Design. Ändern Sie Schaltflächengröße, Abstand, Schriftgröße, Menütiefe, die Farben, Beschriftung der Schaltflächen, Überschriften und Lesereihenfolge und kreuzen Sie Alternativtext, Video-Untertitel oder Status nur über Farbe an. Tabelle und Diagramm ändern sich sofort; Test starten animiert eine neue Stichprobe von Nutzern. Vergleichen Sie beide Designs in der Barrierefreiheitsprüfung und lesen Sie die Screenreader-Reihenfolge.

Einstellbare Parameter

  • Aufgabe Überfälliges Buch verlängern, Heutige Öffnungszeiten finden, Hilfevideo ansehen
  • Simulierte Nutzer Alle Gruppen, Typischer Nutzer, Ältere Person mit Sehschwäche, Person mit Handtremor, Blinde Person (Screenreader), Nur Tastatur, Gehörlose Person, Rot-Grün-Sehschwäche
  • Nutzer pro Gruppe 5–40 Nutzer
  • Ausgangsdesigns A schlecht, B verbessert, A und B gleich (B selbst verbessern)
  • Bearbeitetes Design Design A, Design B
  • Barrierefreiheitsprüfung anzeigen

Fragen zum Erkunden

  1. Warum helfen größere Schaltflächen der Person mit Handtremor mehr als dem typischen Nutzer?
  2. Erfüllt grauer Text #9e9e9e auf Weiß die WCAG-Stufe AA, und wie könnten Sie das beheben?
  3. Warum geben Screenreader-Nutzer bei Symbolschaltflächen ohne Alternativtext auf?

Ähnliche Simulationen