Übungsaufgaben zu Usability, User Experience und Barrierefreiheit
https://bildung.social/@oerinformatik/
https://oer-informatik.de/usability-barrierefreiheit-uebungsaufgaben
Usability, User Experience, Barrierefreiheit, DIN EN ISO 9241-110, DIN EN ISO 9241-11, WCAG, Kontrast, Screenreader, Usability-Test, Bedienelemente, Übungsaufgaben, Prüfungsvorbereitung
tl/dr; (Bearbeitungszeit insgesamt 132 min, mehrere Aufgaben): Vier Übungsaufgaben: Das Formular „Aktivität erstellen“ einer Freizeit-App wird anhand von App-Store-Bewertungen untersucht, mit den Interaktionsprinzipien analysiert, neu skizziert und mit passenden Methoden getestet; eine Mitfahr-App eines Berufskollegs wird barrierefrei gemacht – mit der gesetzlichen Definition, den WCAG-Prinzipien, Beobachtungen aus einem Test, Schriftregeln und Kontrastprüfung für Flurmonitore, fehlerhaftem HTML-Code und Prüfverfahren; zwei Prototypen einer Werkstatt-App werden mit Kennzahlen verglichen, wirtschaftlich bewertet und auf passende Bedienelemente geprüft; für das Technikteam eines Barcamps entsteht ein Leitstand auf dem Smartphone mit Informationsauswahl, Skizze und Benachrichtigungskonzept. Alle Lösungen sind ausgeblendet und mit Punkteverteilung versehen [AI-Assisted]. (Zuletzt geändert am 28.10.2026)
Diese Übungsaufgaben gehören zum Artikel Usability, User Experience und Barrierefreiheit.
Hinweise zur Bearbeitung: Als FIA, ISE oder IKD musst Du zur Teil-2-Prüfung Aufgaben auf Kernkompetenz-Ebene lösen können, das sind Aufgabe 2.1 und Aufgabe 2.2. Von IKD wird zusätzlich erwartet, dass ihnen Aufgaben auf Profilkompetenz-Ebene (Aufgabe 3.1 und Aufgabe 3.2) keine Probleme bereiten. Beziehe Deine Antworten immer auf die beschriebene Situation. Achte auf die Operatoren: „Nenne“ verlangt Stichworte, „beschreibe“ ganze Sätze mit Bezug zur Situation, „erläutere“ und „verdeutliche“ zusätzlich eine Begründung, Auswirkung oder ein Beispiel. Skizzen kannst Du auf Papier oder mit einem Wireframe-Werkzeug anfertigen. Die Beispiellösungen zeigen Beispiele; andere fachlich passende Antworten sind ebenfalls richtig.
Du möchtest eigene Aufgaben zum Üben von einem KI-Sprachmodell generieren lassen?
Kopiere den Text in ein KI-Sprachmodell Deiner Wahl und passe Kompetenzstufe, Anzahl, Bearbeitungszeit und Szenario bei Bedarf an. Wie die Aufgaben aufgebaut sind, beschreibt der Artikel Wie sind die Aufgaben aufgebaut?. Prüfe die Ergebnisse mit dem Lehrartikel: KI-Sprachmodelle machen Fehler.
Erstelle neue Übungsaufgaben zum Thema „Usability, User Experience und
Barrierefreiheit“.
Bauplan: Halte Dich an Aufbau, Kompetenzstufen, Operatoren,
Anforderungsbereiche, Punkte und Zeitschätzung, die im Artikel
https://oer-informatik.de/aufgaben-aufbau beschrieben sind.
Fachliche Grundlage:
- https://oer-informatik.de/usability-barrierefreiheit
- https://oer-informatik.de/wireframe-tools
- Stilbeispiel: https://oer-informatik.de/usability-barrierefreiheit-uebungsaufgaben
Die Aufgaben sollen Inhalte zu diesen Schlagwörtern abdecken:
- Usability
- User Experience
- Barrierefreiheit
- DIN EN ISO 9241-110
- DIN EN ISO 9241-11
- WCAG
- Kontrast
- Screenreader
- Usability-Test
- Bedienelemente
Kompetenzstufe: Kernkompetenz (alternativ: Basiskompetenz, Profilkompetenz, Expertise)
Anzahl: 1 Aufgabe mit Teilaufgaben
Bearbeitungszeit in Minuten ca.: <5 bis 30 min>
Szenario: eines der Szenarien aus dem Bauplan
Vorgehen:
1. Lies zuerst die verlinkten Artikel. Kannst Du keine Webseiten
abrufen, sag mir das, statt zu raten.
2. Steht bei einer Angabe noch ein Platzhalter in <…>, frag mich
zuerst danach. Richte Punkte und Zahl der Teilaufgaben nach der
Bearbeitungszeit (ca. 0,9 min je Punkt).
3. Gib je Aufgabe Titel mit Kompetenzstufe, Ausgangssituation und
Teilaufgaben mit Operator und Punktzahl aus, dazu die geschätzte
Bearbeitungszeit.
4. Gib die Beispiellösungen mit Punkteverteilung erst aus, wenn ich
danach frage.
Aufgabe 2.1: Eine Aktivität in der Freizeit-App anlegen (Kernkompetenz)
(ca. 43 min Bearbeitungszeit)
Du bist Auszubildende*r im Entwicklungsteam der Let’s Meet GmbH in Bielefeld. Die App „Let’s Meet“ (Android, iOS, Web) bringt Menschen ab 16 Jahren für gemeinsame Freizeitaktivitäten an öffentlichen Treffpunkten zusammen. Seit dem letzten Update häufen sich schlechte Bewertungen im App-Store, zum Beispiel:
„Wollte eine Laufgruppe vor der Frühschicht anlegen. Dreimal ‚Fehler 0x17‘, danach war alles weg. Hab’s gelassen.“ (Tobias, 2 von 5 Sternen)
„Schrift winzig und grau, ich finde nicht, was ich ausfüllen muss.“ (Rainer, 1 von 5 Sternen)
Die Geschäftsführerin Clara Neumann möchte, dass die Funktion „Aktivität erstellen“ überarbeitet wird. Die UX-Designerin Anh Nguyen leitet die Überarbeitung, Du und Dein Mit-Azubi Jonas Weber arbeiten mit.
- Lies die beiden Bewertungen oben genau. Leite daraus zwei Merkmale guter Usability ab, die „Let’s Meet“ derzeit verfehlt, und ergänze zwei Merkmale einer positiven User Experience, die über die reine Bedienung des Formulars hinausgehen. Begründe jedes Merkmal mit Bezug zur App. (6 Punkte)
4 × 1,5 Punkte (Merkmal 0,5 Punkte, Begründung mit Bezug 1 Punkt), z. B.:
Aus den Bewertungen abgeleitet (Usability):
Robustheit und verständliches Feedback (Tobias): Ein Code wie „Fehler 0x17“ sagt nicht, was falsch ist; dass danach alle Eingaben verschwinden, macht aus einem kleinen Fehler einen Abbruch. Gute Usability heißt: Fehler werden am Feld erklärt, Eingaben bleiben erhalten.
Lesbarkeit und Selbstbeschreibungsfähigkeit (Rainer): Kleine graue Schrift und fehlende Kennzeichnung der Pflichtfelder verhindern, dass er weiß, was zu tun ist. Gute Usability heißt: ausreichende Schriftgröße und Kontraste, dauerhaft sichtbare Beschriftungen, Pflichtfelder markiert.
Effizienz: Tobias will „vor der Frühschicht“ schnell etwas anlegen; dreimaliges Neueingeben kostet ihn die Zeit, die er nicht hat.
Ergänzt (User Experience vor und nach der Nutzung):
Vertrauen und Sicherheit: Treffpunkte sind öffentlich, Profile und Bewertungen sind sichtbar, die Datenschutzhinweise sind verständlich – man traut sich, Fremde zu treffen.
Erleben nach dem Treffen: Erinnerung vor dem Termin, gelungene Aktivität, Möglichkeit zur Bewertung; man empfiehlt die App weiter und kommt wieder.
Erster Eindruck: Store-Eintrag, Bewertungen und Einstieg in die App wecken Erwartungen; eine Reihe Ein-Stern-Bewertungen schreckt neue Nutzende schon vor dem Download ab.
- Jonas meint: „UI und UX ist doch dasselbe, beides ist halt Design.“ In Anh Nguyens Projektplan stehen die folgenden Tätigkeiten. Ordne jede Tätigkeit dem UI-Design oder dem UX-Design zu und beschreibe in einem Satz, wie beide zusammenhängen. (4 Punkte)
- Interviews mit Nutzenden über ihre Freizeitgewohnheiten führen
- Farbschema und Schriftgrößen der Schaltflächen festlegen
- die Personas Tobias und Rainer ausarbeiten
- Symbole für die Kategorien zeichnen
- den Weg vom Fund der App im Store bis zur Erinnerung nach dem Treffen skizzieren (Customer Journey)
- Raster und Abstände des Formulars festlegen
Zuordnung 6 × 0,5 Punkte, Zusammenhang 1 Punkt:
UX-Design: 1, 3, 5 – Analyse der Nutzenden, ihrer Ziele und des gesamten Erlebens vor, während und nach der Nutzung.
UI-Design: 2, 4, 6 – Gestaltung der sichtbaren Oberfläche: Layout, Bedienelemente, Farben, Schriften, Symbole.
Zusammenhang: UI-Design ist ein Teil des UX-Designs; die Oberfläche setzt um, was die UX-Analyse über Nutzende und ihre Ziele herausgefunden hat.
- Anh Nguyen möchte die Benutzbarkeit als nichtfunktionale Anforderung ins Lastenheft aufnehmen. Jonas schlägt vor: „Die Funktion soll benutzerfreundlich sein.“ Erläutere, warum diese Formulierung ungeeignet ist, und formuliere die Anforderung so, dass sie später überprüft werden kann. (4 Punkte)
Erläuterung (2 Punkte): „Benutzerfreundlich“ ist subjektiv und nicht messbar. Bei der Abnahme kann niemand eindeutig entscheiden, ob die Anforderung erfüllt ist; Auftraggeberin und Entwicklungsteam können darunter Verschiedenes verstehen. Usability hängt außerdem vom Nutzungskontext ab (wer, wofür, unter welchen Bedingungen), der in der Formulierung fehlt.
Messbare Formulierung (2 Punkte), z. B.: „Registrierte Nutzende ohne Vorerfahrung mit der Funktion können auf dem Smartphone innerhalb von drei Minuten ohne Hilfe eine Aktivität mit Titel, Kategorie, Datum, Uhrzeit, Treffpunkt, Teilnehmendenzahl und Mindestalter veröffentlichen. In einem Usability-Test mit acht Personen gelingt das mindestens sieben Personen; die durchschnittliche Bewertung im SUS-Fragebogen liegt bei mindestens 70 von 100.“
- Das bisherige Formular „Aktivität erstellen“ sieht so aus:
Finde im Entwurf je eine Ursache für die Beschwerden von Tobias und Rainer. Beschreibe außerdem zwei weitere Schwachstellen, die in den Bewertungen noch nicht vorkommen, und ihre Folgen für die Nutzenden. (7 Punkte)
Ursachen 2 × 1,5 Punkte, weitere Schwachstellen 2 × 2 Punkte (Schwachstelle 1 Punkt, Folge 1 Punkt), z. B.:
Ursachen der Beschwerden:
Tobias („Fehler 0x17“, alles weg): Die Fehlermeldung steht oben ohne Bezug zum Feld und ohne Hinweis zur Behebung; Datum, Uhrzeit und Mindestalter sind Freitextfelder, in denen falsche Formate vorprogrammiert sind.
Rainer (Schrift winzig und grau): Hellgraue, kleine Schrift mit geringem Kontrast; die Felder haben nur Platzhaltertext, Pflichtfelder sind nicht gekennzeichnet.
Weitere Schwachstellen:
Hierarchie der Schaltflächen vertauscht: „Abbrechen“ ist groß und signalrot an der Stelle der Hauptaktion, „Event erzeugen“ klein und blass. Folge: Nutzende brechen versehentlich ab und verlieren ihre Eingaben.
Treffpunkt als freie Adresse: Die App kennt öffentliche Treffpunkte, trotzdem muss man tippen. Folge: Aufwand, Tippfehler und Wohnadressen als Treffpunkt.
Kategorie nur über Farbpunkte: Die Bedeutung ist nicht erkennbar und für Menschen mit Farbsehschwäche nicht unterscheidbar. Folge: falsche Kategorie, Aktivität wird nicht gefunden.
Werbebanner mitten im Formular: unterbricht die Aufgabe und schiebt die Schaltflächen nach unten.
Uneinheitliche Begriffe: „Aktivität anlegen“ im Titel, „Event erzeugen“ auf der Schaltfläche. Folge: Unsicherheit, ob man an der richtigen Stelle ist.
Hilfe-Link öffnet ein PDF in neuem Fenster und führt aus der App heraus; auf dem Smartphone findet man schwer zurück.
- Anh Nguyen hat das bisherige Formular mit Nutzenden getestet. Ergänze die Tabelle: Nenne zu jeder Beobachtung das verletzte Interaktionsprinzip nach DIN EN ISO 9241-110 und beschreibe eine passende Verbesserung. (8 Punkte)
| Beobachtung im Test | verletztes Interaktionsprinzip | Verbesserung |
|---|---|---|
| Nach der Fehlermeldung waren alle bisherigen Eingaben von Tobias Lange gelöscht. | ||
| Rainer Krause fand nicht heraus, welche Felder er ausfüllen muss. | ||
| Tobias Lange tippte auf „Abbrechen“, weil er die Hauptschaltfläche an dieser Stelle erwartet hatte. | ||
| Sabine Hoffmann musste die Adresse des Treffpunkts „Wanderparkplatz Hünenburg“ selbst heraussuchen und abtippen, obwohl die App die öffentlichen Treffpunkte kennt. |
4 × 2 Punkte (Prinzip 1 Punkt, Verbesserung 1 Punkt):
| Beobachtung im Test | verletztes Interaktionsprinzip | Verbesserung |
|---|---|---|
| Eingaben nach Fehlermeldung gelöscht | Robustheit gegen Benutzungsfehler | Eingaben bleiben erhalten, nur das fehlerhafte Feld wird markiert; Fehler werden schon bei der Eingabe vermieden (Datumsauswahl, Auswahllisten) |
| Pflichtfelder nicht erkennbar | Selbstbeschreibungsfähigkeit | Pflichtfelder mit * und Hinweis „* Pflichtfeld“ kennzeichnen, dauerhaft sichtbare Beschriftungen über den Feldern |
| „Abbrechen“ statt Hauptaktion getippt | Erwartungskonformität | Hauptaktion „Aktivität veröffentlichen“ als auffällige Primärschaltfläche an der üblichen Position, „Abbrechen“ zurückhaltend als Textlink; ggf. Rückfrage vor dem Verwerfen (zusätzlich Robustheit) |
| Adresse selbst heraussuchen | Aufgabenangemessenheit | Treffpunkt aus der Liste der öffentlichen Treffpunkte mit Suche und Autovervollständigung wählen, zuletzt genutzte Treffpunkte vorschlagen |
Bei der dritten Zeile ist auch „Steuerbarkeit“ vertretbar, wenn begründet wird, dass Tobias den Ablauf nicht wie beabsichtigt steuern konnte.
- Skizziere einen verbesserten Entwurf der Seite „Aktivität erstellen“, der die in d) und e) gefundenen Mängel behebt. Für eine Aktivität werden Titel, Kategorie, Datum, Beginn, Treffpunkt, Teilnehmendenzahl (mindestens und höchstens) und Mindestalter (16 oder 18) benötigt, eine Beschreibung ist freiwillig. Die Seite soll außerdem erlauben, nur barrierefreie Treffpunkte anzuzeigen. (8 Punkte)
Beispielskizze:
Bewertungsvorschlag (8 Punkte):
Titelzeile mit einheitlichem Begriff und Zurück-Navigation, kein Werbebanner (1 Punkt)
dauerhaft sichtbare Beschriftungen, Pflichtfelder gekennzeichnet (1 Punkt)
geeignete Eingabeelemente: Kategorie als Auswahlliste mit Text, Datumsauswahl, Uhrzeit, Teilnehmende als Bereich oder Zahlenwähler, Mindestalter als Auswahl 16+/18+ (2 Punkte)
Treffpunkt aus öffentlichen Treffpunkten wählen, mit Filter „nur barrierefreie Treffpunkte“ (1 Punkt)
Fehlermeldung verständlich am betroffenen Feld (1 Punkt)
klare Hierarchie: Hauptaktion „Aktivität veröffentlichen“ groß und auffällig, Nebenaktionen („Als Entwurf speichern“, „Abbrechen“) zurückhaltend (1 Punkt)
ausreichend große Schrift und Kontraste, bündige Ausrichtung im Raster (1 Punkt)
- Anh Nguyen will die Benutzerfreundlichkeit in drei Situationen prüfen. Wähle für jede Situation eine passende Methode, beschreibe kurz das Vorgehen und begründe Deine Wahl. Gehe bei Situation 3 auch auf den Datenschutz ein. (7 Punkte)
- Es gibt erst Papierskizzen des neuen Formulars. Das Team will in zwei Tagen wissen, ob Reihenfolge und Beschriftung der Felder verständlich sind.
- Ein klickbarer Prototyp ist fertig. Es soll sich zeigen, an welchen Stellen Personen wie Rainer Krause stocken und warum.
- Das neue Formular ist seit vier Wochen veröffentlicht. Clara Neumann will wissen, ob jetzt weniger Menschen beim Anlegen abbrechen als vorher.
Situation 1 und 2 je 2 Punkte (Methode und Vorgehen 1 Punkt, Begründung 1 Punkt), Situation 3 3 Punkte (Methode und Vorgehen 1 Punkt, Begründung 1 Punkt, Datenschutz 1 Punkt), z. B.:
Papierprototyp-Test oder Cognitive Walkthrough: Zwei, drei Personen aus dem Team oder dem Bekanntenkreis gehen die Skizzen mit einer Aufgabe („Lege eine Laufgruppe für Samstag an“) durch; bei jedem Schritt wird gefragt, ob klar ist, was zu tun ist. Alternativ eine heuristische Evaluation anhand der Interaktionsprinzipien. Begründung: schnell, billig, ohne Programmierung; Änderungen an Skizzen kosten fast nichts.
Usability-Test mit lautem Denken: Fünf bis acht Testpersonen, die zu den Personas passen, erledigen typische Aufgaben am Prototyp und sprechen aus, was sie denken; die Testleitung beobachtet, hilft nicht und notiert Stellen, Dauer und Erfolg. Ergänzend ein SUS-Fragebogen oder kurzes Interview. Begründung: Nur Beobachtung zeigt, wo und warum jemand stockt; Eye-Tracking wäre möglich, ist aber aufwendig.
Auswertung von Nutzungsdaten bzw. A/B-Test: Es wird gezählt, wie viele Personen das Formular öffnen und wie viele es abschließen, und an welchem Feld abgebrochen wird; Vergleich mit den Zahlen vor der Umstellung oder zwei Varianten im Wechsel. Begründung: Nur so lässt sich die Abbruchquote im echten Betrieb mit vielen Nutzenden messen. Datenschutz: Auswertung pseudonymisiert bzw. zusammengefasst, nur die nötigen Ereignisse speichern (Datenminimierung), für nicht notwendige Analyse-Techniken auf dem Endgerät eine Einwilligung einholen (§ 25 TDDDG, DSGVO), die Datenschutzbeauftragte Dr. Marta Kowalczyk einbinden; wegen der 16- und 17-jährigen Nutzenden keine Profilbildung.
- Jonas schlägt vor: „Wir programmieren das Formular erst fertig und machen ganz am Ende einen großen Usability-Test. Vorher lohnt sich das nicht.“ Nimm Stellung zu diesem Vorschlag. (3 Punkte)
Stellungnahme mit Begründung, 3 Punkte, z. B.:
Dem Vorschlag ist nicht zuzustimmen. Usability sollte früh und wiederholt getestet werden (menschzentrierte Gestaltung nach DIN EN ISO 9241-210: verstehen, entwerfen, evaluieren, verbessern). Mängel, die schon im Mockup erkannt werden, lassen sich mit geringem Aufwand beheben; nach der Programmierung sind Änderungen deutlich teurer und verzögern die Veröffentlichung. Ein einziger Test am Ende zeigt zudem nur noch Probleme, aber es bleibt kaum Zeit, sie zu lösen. Sinnvoll sind kleine Tests mit wenigen Personen nach jedem Entwurfsschritt und ein abschließender Test vor der Veröffentlichung.
Summe Aufgabe 2.1: 47 Punkte
Aufgabe 2.2: Eine barrierefreie Mitfahr-App für das Berufskolleg (Kernkompetenz)
(ca. 46 min Bearbeitungszeit)
Du bist Auszubildende*r FIA und arbeitest im Projektteam der Mitfahr-App RatzFahrt des Ratz und Rübe Berufskollegs (RRB) in Bielefeld, einer staatlichen Schule. Die Web-App (PWA) soll zum zweiten Schulhalbjahr am 01.02.2027 starten. Auszubildende bieten darin Fahrten zu den Berufsschultagen an oder suchen eine Mitfahrgelegenheit; vier Flurmonitore zeigen offene Angebote und Gesuche anonym an.
Zu den künftigen Nutzenden gehören Lukas Hofmann (Azubi Kaufmann für IT-System-Management, stark sehbehindert, nutzt einen Screenreader) und Oksana Melnyk (Azubi FIA, Deutsch B2, wünscht die App auch auf Englisch). Projektleiter Thomas Becker meint in einer Besprechung: „Barrierefreiheit klingt gut, aber wir haben doch nur einen sehbehinderten Schüler. Den Aufwand sparen wir uns für die erste Version.“
- Das Behindertengleichstellungsgesetz definiert in § 4 BGG: „Barrierefrei sind […] Systeme der Informationsverarbeitung […], wenn sie für Menschen mit Behinderungen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe auffindbar, zugänglich und nutzbar sind.“ Erkläre die drei Bedingungen der Definition am Beispiel von Lukas und RatzFahrt und nimm anschließend Stellung zur Aussage von Thomas Becker. Berücksichtige dabei rechtliche Vorgaben und weitere Personengruppen, die von einer barrierefreien App profitieren. (8 Punkte)
Bedingungen 3 × 1 Punkt, Stellungnahme 1 Punkt, rechtliche Begründung 2 Punkte, weitere Gruppen 2 Punkte, z. B.:
in der allgemein üblichen Weise: Lukas bucht seine Mitfahrt in derselben App wie alle anderen, nicht über eine Sonderlösung wie eine E-Mail an Thomas Becker oder eine eigene „Blindenversion“.
ohne besondere Erschwernis: Er braucht dafür nicht deutlich mehr Zeit oder Mühe, etwa weil sich jede Schaltfläche erst nach langem Suchen per Screenreader findet.
grundsätzlich ohne fremde Hilfe: Er muss niemanden bitten, für ihn eine Fahrt anzufragen oder ihm vorzulesen, welche Plätze frei sind. Hilfsmittel wie Screenreader und Braillezeile sind dabei erlaubt – sie sind seine übliche Art, Software zu nutzen.
Stellungnahme: Der Aussage ist nicht zuzustimmen; Barrierefreiheit muss von Anfang an eingeplant werden.
Rechtlich: Das RRB ist als staatliche Schule eine öffentliche Stelle. Für ihre Websites und mobilen Anwendungen gelten in NRW das BGG NRW und die BITV NRW; technischer Maßstab ist die EN 301 549 bzw. die WCAG auf Stufe AA. Die Schule muss eine Erklärung zur Barrierefreiheit mit Feedback-Möglichkeit veröffentlichen. Bliebe Lukas ausgeschlossen, würde er benachteiligt.
Weitere Gruppen: künftige Schüler*innen und Lehrkräfte mit Seh-, Hör-, motorischen oder kognitiven Einschränkungen; Menschen mit vorübergehenden Einschränkungen (gebrochener Arm, Augen-OP); situativ Eingeschränkte (Sonnenlicht am Parkplatz, eine Hand frei); Menschen mit Deutsch als Zweitsprache wie Oksana Melnyk; Ältere, z. B. Eltern. Außerdem ist Nachrüsten teurer als barrierefreie Gestaltung von Anfang an, und gute Kontraste, Beschriftungen und Tastaturbedienung verbessern die Usability für alle.
- Das Projektteam hat für die erste Version folgende Maßnahmen ins Backlog geschrieben:
- Alternativtexte für Logo, Fahrzeug- und Kartensymbole
- sichtbarer Fokus und logische Tab-Reihenfolge
- Fehlermeldungen nennen das betroffene Feld und sagen, wie man den Fehler behebt
- semantische HTML-Elemente und ein zugänglicher Name für jedes Bedienelement
- englische Sprachfassung, Sprache per
langausgezeichnet - Haltepunkte zusätzlich zur Karte als Textliste mit Adresse
Ordne jede Maßnahme dem WCAG-Prinzip zu, das sie hauptsächlich unterstützt (wahrnehmbar, bedienbar, verständlich, robust). Nenne außerdem zu zwei Maßnahmen je eine Personengruppe außer Lukas, die davon profitiert. (5 Punkte)
Zuordnung 6 × 0,5 Punkte, Personengruppen 2 × 1 Punkt:
| Nr. | WCAG-Prinzip | weitere Personengruppe (Beispiele) |
|---|---|---|
| 1 | wahrnehmbar | Nutzende mit langsamer Verbindung, wenn Bilder nicht laden |
| 2 | bedienbar | Menschen, die keine Maus oder keinen Touchscreen nutzen können, z. B. mit Tremor oder Lähmung; Power-User mit Tastatur |
| 3 | verständlich | alle, besonders Menschen mit kognitiven Einschränkungen, wenig Technikerfahrung oder Deutsch als Zweitsprache |
| 4 | robust | Nutzende von Sprachsteuerung und anderen Hilfstechnologien; künftige Browser und Geräte |
| 5 | verständlich | Oksana Melnyk und weitere Schüler*innen mit Englisch als besser beherrschter Sprache |
| 6 | wahrnehmbar | Menschen mit Sehschwäche, Personen ohne Ortskenntnis, Nutzende bei schlechtem Kartenladen |
Bei Nr. 4 ist auch „wahrnehmbar“ vertretbar, bei Nr. 6 „bedienbar“, wenn begründet wird, dass die Liste ohne Kartenbedienung auskommt.
- Beim ersten Test bedient eine Testperson mit zittrigen Händen RatzFahrt einhändig auf ihrem Smartphone. Die Testleitung notiert drei Beobachtungen. Beschreibe für jede Beobachtung die Barriere und eine Abhilfe. (6 Punkte)
- Eine Fahrt lässt sich nur durch Wischen nach links auf der Fahrtkarte absagen. Die Testperson findet die Funktion nicht und schafft die Geste auch nach dem Hinweis nicht zuverlässig.
- Die Schaltflächen „–“ und „+“ für die Zahl der freien Plätze sind sehr klein und liegen direkt nebeneinander; sie trifft mehrmals die falsche.
- Beim Anlegen eines Angebots wird sie nach zwei Minuten ohne Vorwarnung abgemeldet; alle Eingaben sind verloren.
So sieht die getestete Ansicht aus:
Je Beobachtung 2 Punkte (Barriere 1 Punkt, Abhilfe 1 Punkt), z. B.:
Barriere: Die Funktion ist nur über eine Geste erreichbar, die unsichtbar ist und feine, gleichmäßige Bewegung verlangt. Abhilfe: sichtbare Schaltfläche „Fahrt absagen“ auf der Karte bzw. in der Detailansicht; die Wischgeste darf zusätzlich bleiben. Vor dem Absagen eine Rückfrage, danach „Rückgängig“.
Barriere: Zu kleine Zielflächen ohne Abstand führen zu Fehlbedienungen. Abhilfe: Zielflächen von mindestens 24 × 24 CSS-Pixeln, besser rund 44 × 44, mit Abstand zueinander; alternativ eine Auswahlliste der möglichen Platzzahlen.
Barriere: Ein festes, kurzes Zeitlimit schließt Menschen aus, die mehr Zeit brauchen, und der Datenverlust zwingt zum Neuanfang. Abhilfe: Zeitlimit deutlich länger oder abschaltbar, Warnung vor Ablauf mit „Sitzung verlängern“, Eingaben als Entwurf zwischenspeichern.
- Jonas Wolff schlägt für die Texte auf den Flurmonitoren vier Gestaltungsregeln vor. Beurteile jede Regel im Hinblick auf inklusives Design und formuliere für jede ungeeignete Regel eine bessere. (6 Punkte)
- „Alle Einträge in Großbuchstaben, dann fallen sie auf.“
- „Wir nehmen dieselbe Schriftgröße wie in der App, dann sieht alles einheitlich aus.“
- „Eine schmale, dünne Schrift, damit möglichst viele Fahrten auf einen Bildschirm passen.“
- „Eine serifenlose Schrift mit großen Kleinbuchstaben und deutlich unterscheidbaren Zeichen wie I, l und 1.“
Je Regel 1,5 Punkte (Beurteilung mit Begründung 1 Punkt, bessere Regel bzw. Bestätigung 0,5 Punkte), z. B.:
ungeeignet: Text in durchgehenden Großbuchstaben ist schwerer zu lesen, weil die Wortform (Ober- und Unterlängen) fehlt; Screenreader buchstabieren manche Großbuchstabenwörter. Besser: normale Groß- und Kleinschreibung; hervorheben über Größe, Schriftstärke oder Position.
ungeeignet: Die App wird aus 30 bis 40 cm gelesen, die Monitore aus einigen Metern im Vorbeigehen. Besser: Schriftgröße nach Leseabstand festlegen und vor Ort aus der größten üblichen Entfernung testen; lieber weniger Einträge, dafür groß.
ungeeignet: Schmale, dünne Schnitte verschwimmen aus der Entfernung und bei Gegenlicht; überfüllte Bildschirme überfordern. Besser: normale bis halbfette Schrift, großzügiger Zeilenabstand, wenige Fahrten je Ansicht und automatisch weiterblättern – mit genug Zeit zum Lesen.
geeignet: Große Kleinbuchstaben (x-Höhe) und eindeutige Zeichen verbessern die Lesbarkeit, besonders für Menschen mit Sehschwäche oder Legasthenie, und vermeiden Verwechslungen bei Uhrzeiten und Raumnummern.
- Für die Flurmonitore liegt folgender Entwurf für das Farbschema vor. Die Kontrastverhältnisse hat Oksana Melnyk bereits mit einem Kontrastprüfer ermittelt. Beurteile für jede Zeile, ob die Anforderungen der WCAG (Stufe AA) erfüllt sind, und beschreibe ein weiteres Problem des Entwurfs, das nicht am Kontrastverhältnis liegt. (7 Punkte)
| Nr. | Element | Vordergrund | Hintergrund | Darstellung | Kontrast |
|---|---|---|---|---|---|
| 1 | Überschrift „Fahrten heute“ | Weiß #FFFFFF |
Schulblau #2B6CB0 |
48 px, fett | 5,42 : 1 |
| 2 | Abfahrtszeit und Haltepunkt | Hellgrau #A0AEC0 |
Weiß #FFFFFF |
32 px, normal | 2,26 : 1 |
| 3 | Statuspunkt „Plätze frei“ | Grün #38A169 |
Weiß #FFFFFF |
Kreis ohne Text | 3,25 : 1 |
| 4 | Statuspunkt „voll“ | Rot #E53E3E |
Weiß #FFFFFF |
Kreis ohne Text | 4,13 : 1 |
| 5 | Hinweis „Mitfahrt nur mit Schulkonto buchbar“ | Rot #E53E3E |
Weiß #FFFFFF |
18 px, normal | 4,13 : 1 |
Je Zeile 1 Punkt (5 Punkte), weiteres Problem 2 Punkte. Grenzwerte (Stufe AA): normaler Text 4,5 : 1, große Schrift (ab 24 px bzw. ab 18,66 px fett) 3 : 1, grafische Elemente und Bedienelemente 3 : 1.
| Nr. | Beurteilung |
|---|---|
| 1 | erfüllt: große, fette Schrift braucht 3 : 1, sogar 4,5 : 1 wird erreicht |
| 2 | nicht erfüllt: auch für große Schrift (3 : 1) ist 2,26 : 1 zu wenig; z. B. Dunkelgrau #4A5568 (7,53 : 1) verwenden |
| 3 | erfüllt: grafisches Element braucht 3 : 1, 3,25 : 1 reicht (knapp) |
| 4 | erfüllt: grafisches Element, 4,13 : 1 über 3 : 1 |
| 5 | nicht erfüllt: normale Schrift mit 18 px ist keine große Schrift, 4,13 : 1 liegt unter 4,5 : 1; z. B. dunkleres Rot #C53030 (5,47 : 1 auf Weiß) oder größere, fette Schrift |
Weiteres Problem (2 Punkte): Der Status wird nur über die Farbe Rot oder Grün vermittelt. Menschen mit Rot-Grün-Sehschwäche (etwa 8 % der Männer) können „frei“ und „voll“ nicht unterscheiden, und aus der Entfernung oder im Gegenlicht ist die Farbe schwer erkennbar. Lösung: Status zusätzlich als Text („2 Plätze frei“, „voll“) bzw. mit unterschiedlichen Symbolen anzeigen.
- Jonas Wolff hat einen ersten Entwurf des Formulars „Mitfahrt anfragen“ geschrieben:
<html>
<body>
<img src="img/ratzfahrt-logo.png">
<h3>Mitfahrt anfragen</h3>
<input type="text" placeholder="Haltepunkt">
<input type="text" placeholder="Datum (TT.MM.JJJJ)">
<span style="color:#E53E3E">*</span>
<div class="knopf" onclick="anfragen()">
<img src="img/pfeil-rechts.png">
</div>
</body>
</html>Lukas Hofmann meldet, dass er das Formular mit seinem Screenreader nicht nutzen kann. Beschreibe vier Barrieren in diesem Code und gib einen verbesserten Code an. (10 Punkte)
Barrieren, 4 × 1,5 Punkte (6 Punkte), z. B.:
Schaltfläche ist ein
divmit Bild: Sie ist mit der Tastatur nicht erreichbar, wird vom Screenreader nicht als Schaltfläche angesagt, und das Pfeilbild hat keinen Text; Lukas weiß nicht, dass und wie er die Anfrage abschicken kann.Eingabefelder ohne Beschriftung: Nur Platzhalter, keine
label; der Screenreader sagt nur „Eingabefeld“ an, der Platzhalter verschwindet zudem beim Tippen.Logo ohne Alternativtext: Der Screenreader liest den Dateinamen vor.
Keine Sprache angegeben (
langfehlt): Die Sprachausgabe kann falsch aussprechen.Pflichtfeld-Kennzeichnung nur als rotes Sternchen ohne Bezug: Es ist nicht erkennbar, welches Feld gemeint ist; für den Screenreader ist das Sternchen bedeutungslos.
Datum als Freitext mit festem Format: fehleranfällig; besser ein Datumsfeld.
Überschriftenhierarchie: Die Seite beginnt mit
h3, es fehlth1; die Navigation per Überschriften ist gestört.
Verbesserter Code, 4 Punkte (je behobener Barriere 1 Punkt), z. B.:
<html lang="de">
<body>
<img src="img/ratzfahrt-logo.png" alt="RatzFahrt">
<main>
<h1>Mitfahrt anfragen</h1>
<p>Felder mit * sind Pflichtfelder.</p>
<form>
<label for="haltepunkt">Haltepunkt *</label>
<input type="text" id="haltepunkt" name="haltepunkt" required autocomplete="off">
<label for="datum">Datum *</label>
<input type="date" id="datum" name="datum" required>
<button type="submit">Mitfahrt anfragen</button>
</form>
</main>
</body>
</html>Statt des Freitextfeldes für den Haltepunkt ist auch eine Auswahlliste (select) der Haltepunkte sinnvoll.
- Beschreibe zwei Möglichkeiten, wie das Projektteam vor dem Start prüfen kann, ob RatzFahrt barrierefrei ist, und erläutere, warum ein automatisches Prüfwerkzeug allein nicht ausreicht. (6 Punkte)
Zwei Möglichkeiten, 2 × 2 Punkte, z. B.:
Automatisierte Prüfung: Ein Prüfwerkzeug (z. B. Lighthouse oder axe in den Browser-Entwicklerwerkzeugen) durchsucht die Seiten nach fehlenden Alternativtexten, Beschriftungen, zu geringen Kontrasten und fehlerhaftem HTML und listet die Fundstellen auf.
Manueller Test nur mit der Tastatur: Eine Person bedient alle Funktionen ohne Maus (Tab, Umschalt+Tab, Enter, Leertaste) und prüft, ob alles erreichbar, der Fokus sichtbar und die Reihenfolge logisch ist.
Test mit Screenreader: Das Team bedient die App mit NVDA bzw. TalkBack und VoiceOver und prüft, ob alle Inhalte und Bedienelemente verständlich angesagt werden.
Usability-Test mit betroffenen Personen: Lukas Hofmann und weitere Nutzende von Hilfstechnologien erledigen typische Aufgaben (Fahrt suchen, Mitfahrt anfragen); Probleme werden beobachtet und dokumentiert.
Prüfung nach einem standardisierten Verfahren (z. B. BITV-Test bzw. Prüfschritte nach EN 301 549/WCAG), ggf. durch eine externe Prüfstelle.
Vergrößerungs- und Farbtest: Darstellung bei 200 % Schrift bzw. 400 % Zoom, Kontrastprüfer, Simulation von Farbsehschwächen.
Erläuterung, 2 Punkte, z. B.: Automatische Werkzeuge erkennen nur technisch prüfbare Fehler und damit nur einen Teil der Barrieren. Ob ein Alternativtext sinnvoll ist, ob die Tab-Reihenfolge logisch ist, ob Fehlermeldungen verständlich sind oder ob ein Ablauf mit Screenreader tatsächlich nutzbar ist, kann nur ein Mensch beurteilen. Ein fehlerfreies Prüfprotokoll bedeutet also nicht, dass die App barrierefrei ist.
- Nenne drei Inhalte, die die Erklärung zur Barrierefreiheit enthalten muss, die das RRB für RatzFahrt veröffentlicht. (3 Punkte)
3 × 1 Punkt, z. B.:
Stand der Vereinbarkeit mit den Anforderungen (vollständig, teilweise oder nicht barrierefrei)
Liste der Inhalte, die (noch) nicht barrierefrei sind, mit Begründung und ggf. barrierefreien Alternativen
Feedback-Mechanismus bzw. Kontaktmöglichkeit, um Barrieren zu melden oder barrierefreie Informationen anzufordern
Hinweis auf die Durchsetzungs- bzw. Schlichtungsstelle
Datum der Erstellung bzw. letzten Überprüfung (mindestens jährlich zu aktualisieren)
Summe Aufgabe 2.2: 51 Punkte
Aufgabe 3.1: Zwei Prototypen der Werkstatt-App vergleichen (Profilkompetenz)
(ca. 24 min Bearbeitungszeit)
Die CSB-Rad GmbH in Bielefeld verkauft Fahrräder und betreibt in Sennestadt eine Werkstatt. Bisher kommen Inspektionstermine fast nur per Telefon zustande; das Telefon klingelt, während Bastian Ludwig (Werkstattleitung) und sein Team an Rädern schrauben. Eine Bielefelder Agentur entwickelt deshalb die App „CSB-Rad Service“, mit der Kund*innen Termine selbst buchen. Für den Schritt „Termin wählen“ hat die Agentur zwei klickbare Prototypen gebaut:
- Variante A: Monatskalender; erst nach dem Tippen auf einen Tag erscheinen die freien Uhrzeiten.
- Variante B: Liste der nächsten freien Termine („Di, 10.11., 8:30 Uhr“), darunter „weitere Termine anzeigen“.
Je zehn Testpersonen, darunter Stammkund*innen wie Hans-Jürgen Kühn (74) und Mira Engel (26, Fahrradkurierin), sollten einen Inspektionstermin in der kommenden Woche buchen. Sophie Bertram (Geschäftsführerin Vertrieb und E-Commerce) hat Dich gebeten, die Ergebnisse auszuwerten.
| Variante | Buchung ohne Hilfe abgeschlossen | Zeiten der erfolgreichen Personen in Sekunden | Zeiten der Personen, die aufgegeben haben | SUS-Wert (Mittel) |
|---|---|---|---|---|
| A (Kalender) | 7 von 10 | 245, 310, 275, 400, 290, 335, 300 | 120, 95, 150 | 64 |
| B (Liste) | 9 von 10 | 260, 240, 285, 230, 300, 255, 270, 245, 280 | 180 | 78 |
- Werte die Tabelle nach den drei Kriterien der Gebrauchstauglichkeit (DIN EN ISO 9241-11) aus: Ordne jedem Kriterium eine passende Kennzahl zu, berechne sie für beide Varianten und gib eine begründete Empfehlung. (7 Punkte)
Kriterium und Kennzahl je 1 Punkt (3 Punkte), Berechnung 2 Punkte, Empfehlung 2 Punkte:
| Kriterium | Kennzahl | Variante A | Variante B |
|---|---|---|---|
| Effektivität (Ziel vollständig erreicht?) | Erfolgsquote | 7 von 10 = 70 % | 9 von 10 = 90 % |
| Effizienz (Aufwand für das Ziel) | mittlere Zeit der erfolgreichen Buchungen | 2155 s / 7 ≈ 308 s (gut 5 min) | 2365 s / 9 ≈ 263 s (knapp 4,4 min) |
| Zufriedenstellung (Erleben der Nutzenden) | SUS-Wert | 64 (unterdurchschnittlich) | 78 (gut) |
Empfehlung: Variante B ist in allen drei Kriterien besser. Mehr Personen kommen ohne Hilfe zum Ziel, sie brauchen im Mittel rund 45 Sekunden weniger und bewerten die Bedienung deutlich besser. Die Liste passt zur eigentlichen Aufgabe („möglichst bald einen Termin“): Wer einen bestimmten Tag braucht, kann über „weitere Termine anzeigen“ trotzdem weiterblättern. Einschränkung: Zehn Personen je Variante sind wenig; die Unterschiede sind aber deutlich und in allen Kriterien gleichgerichtet.
- Die Agentur hält dagegen: „Im Durchschnitt aller zehn Personen ist A sogar schneller: 252 Sekunden gegenüber 254,5 Sekunden.“ Prüfe die Rechnung und bewerte, ob sie Variante A stützt. (4 Punkte)
Rechnung (1 Punkt): Die Rechnung stimmt: A (2155 + 365) s / 10 = 252 s, B (2365 + 180) s / 10 = 254,5 s.
Bewertung (3 Punkte): Die Aussage stützt Variante A nicht. In den Mittelwert gehen die Personen ein, die aufgegeben haben, und ihre Zeiten sind kurz, gerade weil sie gescheitert sind. Je mehr Personen früh abbrechen, desto „schneller“ wirkt eine Variante. Effizienz darf nur für erfolgreich erledigte Aufgaben gemessen werden; Abbrüche gehören zur Effektivität. Bei sauberer Trennung ist B schneller und erfolgreicher.
- Bisher gehen in der Werkstatt pro Woche rund 75 Anrufe wegen Terminen ein; jeder kostet im Mittel 6 Minuten Arbeitszeit. Sophie Bertram erwartet, dass 80 % der Kundschaft die App ausprobieren. Wer dort scheitert, ruft weiterhin an. Variante B kostet in der Entwicklung 2.300 € mehr als Variante A. Berechne, wie viele Anrufe pro Woche Variante B gegenüber A zusätzlich einspart und nach wie vielen Monaten sich die Mehrkosten amortisieren. Rechne mit 46 Arbeitswochen im Jahr, 50 € je Arbeitsstunde und den Erfolgsquoten aus a). Nenne außerdem einen Nutzen der besseren Variante, der in dieser Rechnung nicht vorkommt. (6 Punkte)
Anrufe 2 Punkte, Kosten und Amortisation 3 Punkte, weiterer Nutzen 1 Punkt:
App-Nutzende pro Woche: 75 · 0,8 = 60. Erfolgreich mit A: 60 · 0,7 = 42 (es bleiben 33 Anrufe), mit B: 60 · 0,9 = 54 (es bleiben 21 Anrufe). B spart 12 Anrufe pro Woche zusätzlich.
Zeit: 12 · 6 min = 72 min pro Woche; 72 min · 46 = 3.312 min = 55,2 h im Jahr; 55,2 h · 50 €/h = 2.760 € im Jahr.
Amortisation: 2.300 € / 2.760 € pro Jahr ≈ 0,83 Jahre = 10 Monate.
Nicht eingerechnet, z. B.: zufriedenere Kundschaft und bessere Bewertungen, weniger Unterbrechungen und Fehler in der Werkstatt (Konzentration), Menschen mit wenig Technikerfahrung buchen eher selbst, weniger Fehlbuchungen und Rückfragen.
- Nach der Entscheidung für Variante B zeigt die Agentur den ersten Schritt des Buchungsassistenten:
Folgende Regeln gelten: Wer ein Kundenkonto hat, hat dort seine Räder gespeichert. Je Termin ist genau eine der drei Leistungen möglich. Zusatzleistungen (Ortungs-Set einbauen, Reifen wechseln, Rad waschen) lassen sich beliebig kombinieren und kosten jeweils extra. Bei Reparaturen beschreibt die Kundschaft das Problem oft ausführlich.
Vier der fünf Bedienelemente passen nicht zur Angabe. Finde sie, begründe jeweils, warum das Element ungeeignet ist, und schlage ein besseres vor. Begründe außerdem, warum das fünfte Element passt. (9 Punkte)
Je ungeeignetem Element 2 Punkte (Begründung 1 Punkt, Vorschlag 1 Punkt), passendes Element 1 Punkt:
| Angabe | Problem | besser |
|---|---|---|
| Dein Rad (Textfeld) | Die Räder sind im Kundenkonto bekannt; Freitext erzeugt Tippfehler und doppelte Eingaben, die Werkstatt kann das Rad nicht sicher zuordnen. | Auswahl der gespeicherten Räder (Optionsschaltflächen oder Karten mit Bild), dazu „anderes Rad hinzufügen“ |
| Leistung (Kontrollkästchen) | Kontrollkästchen erlauben Mehrfachauswahl, es ist aber genau eine Leistung möglich; man kann alle drei oder keine ankreuzen. | Optionsschaltflächen, sinnvoll vorbelegt, mit Preis und kurzer Erklärung je Leistung |
| Zusatzleistungen (Auswahlliste) | Eine Auswahlliste erlaubt nur einen Wert und versteckt die Möglichkeiten hinter einem Tipp; Kombinationen und Preise sind nicht sichtbar. | Kontrollkästchen bzw. Schalter je Zusatzleistung mit Preis daneben, Summe anzeigen |
| Was ist kaputt? (einzeilig, 40 Zeichen) | Problembeschreibungen sind oft länger; 40 Zeichen und eine Zeile schneiden wichtige Hinweise ab. | mehrzeiliges Textfeld ohne enge Grenze, ggf. Foto anhängen; Hinweis „z. B. Bremse quietscht vorne“ |
Passend: Abgabe als Optionsschaltflächen – es gibt genau zwei sich ausschließende Möglichkeiten, beide sind ohne weiteren Tipp sichtbar, und eine sinnvolle Vorbelegung ist gesetzt.
Summe Aufgabe 3.1: 26 Punkte
Aufgabe 3.2: Ein Technik-Leitstand für das Barcamp (Profilkompetenz)
(ca. 19 min Bearbeitungszeit)
Beim Barcamp „Lernen.Digital.Leben 2027“ am Samstag, 13.03.2027, betreut das Technikteam der Schüler*innen unter Leitung von Emre Aksoy (Azubi FISY) zwei Check-in-Terminals mit je einem Badge-Drucker, zehn Infomonitore, zwölf E-Ink-Türschilder, den Livestream aus Aula und Mensa und die Access Points in den drei Gebäuden des Ratz und Rübe Berufskollegs (RRB). Alle Geräte melden ihren Zustand an einen Server im Schulnetz. Du entwirfst dafür eine Web-App „Technik-Leitstand“, die die acht Mitglieder des Technikteams auf ihren Smartphones nutzen. Sie sind den ganzen Tag unterwegs, tragen oft Kabel oder Geräte in einer Hand, und in Aula und Foyer ist es laut.
- Emre hat aufgeschrieben, was er „auf jeden Fall sehen“ möchte. Entscheide für jede Angabe, ob sie auf die Startansicht gehört, auf eine Detail- oder Verlaufsseite oder gar nicht in die App. Begründe zwei Deiner Entscheidungen mit einem Interaktionsprinzip nach DIN EN ISO 9241-110. (7 Punkte)
- offene Störungen mit Gerät, Ort und Beginn
- wer sich bereits um eine Störung kümmert
- Akkustand jedes einzelnen Türschilds in Prozent
- IP-Adresse und VLAN jedes Geräts
- Zusammenfassung je Gerätegruppe („10 von 10 Infomonitoren ok“)
- Zeitpunkt der letzten Aktualisierung
- Auslastung des Streaming-Servers als Diagramm über die letzte Stunde
- Wetterbericht für Bielefeld
- Anzahl der bereits eingecheckten Teilnehmenden
- großes Titelbild mit Barcamp-Motto
Zuordnung 10 × 0,5 Punkte (5 Punkte), zwei Begründungen je 1 Punkt. Abweichende Zuordnungen sind richtig, wenn sie begründet sind.
Startansicht: 1, 2, 5, 6 – das braucht das Team in jedem Moment, um zu entscheiden, ob und wohin es gehen muss.
Detail- oder Verlaufsseite: 3, 4, 7 – wichtig für die Fehlersuche an einem bestimmten Gerät, aber nicht für den Überblick. Ein Akkustand gehört auf die Startansicht erst, wenn er zur Störung wird (z. B. unter 20 %).
Nicht in die App: 8, 9, 10 – keine Aufgabe des Technikteams (Check-in-Zahlen interessieren das Orga-Team) bzw. reine Dekoration, die auf dem kleinen Bildschirm die Störungen nach unten schiebt.
Beispielbegründungen:
Aufgabenangemessenheit: Die Startansicht zeigt nur, was zum Erkennen und Übernehmen von Störungen nötig ist; IP-Adressen, Wetter oder Titelbild würden davon ablenken und bei Einhandbedienung zusätzliches Scrollen erzwingen.
Selbstbeschreibungsfähigkeit: Der Zeitpunkt der letzten Aktualisierung zeigt, ob die angezeigten Zustände aktuell sind – sonst hält das Team ein ausgefallenes Gerät für „ok“, weil die Anzeige nur veraltet ist.
Erwartungskonformität: Die Zusammenfassung „x von y ok“ je Gruppe entspricht dem, was das Team aus der Planung kennt (zehn Monitore, zwölf Türschilder), Abweichungen fallen sofort auf.
- Skizziere die Startansicht des Technik-Leitstands für ein Smartphone. Berücksichtige Deine Entscheidungen aus a). Eine Person soll eine Störung mit einem Tipp übernehmen können, damit nicht zwei Leute zum selben Drucker laufen. (8 Punkte)
Bewertungsvorschlag (8 Punkte):
offene Störungen ganz oben, je Störung Gerät, Ort und Beginn (2 Punkte)
Zuständigkeit sichtbar und Schaltfläche zum Übernehmen, groß genug für einen Daumen (2 Punkte)
Zusammenfassung der übrigen Gerätegruppen (1 Punkt)
Zeitpunkt der letzten Aktualisierung (1 Punkt)
Navigation zu Detail- bzw. Verlaufsseiten im Daumenbereich unten (1 Punkt)
Zustände nicht nur über Farbe, sondern mit Text bzw. Symbol („Noch niemand zuständig“, Haken-Symbol) (1 Punkt)
Andere Anordnungen sind richtig, wenn die Störungen Vorrang haben und die Bedienung mit einer Hand möglich bleibt.
- Für die Benachrichtigung bei neuen Störungen liegen drei Vorschläge vor. Bewerte jeden Vorschlag und begründe, welchen Du empfiehlst. (6 Punkte)
- Vorschlag 1: Jede Meldung (auch „Türschild-Akku unter 50 %“) geht als Push-Nachricht mit Signalton an alle acht Teammitglieder.
- Vorschlag 2: Bei einer neuen Störung öffnet sich in der App ein Vollbildfenster mit rotem Blinken und Sirenenton, bis jemand „Ich übernehme“ tippt.
- Vorschlag 3: Eine Störung geht als Push-Nachricht mit Vibration und Ton an die Person, die für das betroffene Gebäude eingeteilt ist. Übernimmt sie nicht innerhalb von fünf Minuten, werden alle benachrichtigt. Niedrige Akkustände sammelt die App nur in der Liste.
Je Vorschlag 1,5 Punkte, Empfehlung 1,5 Punkte, z. B.:
Vorschlag 1: Zu viele, nicht priorisierte Meldungen an alle: Nach kurzer Zeit werden sie weggewischt oder stumm geschaltet, auch die wichtigen. Niemand fühlt sich zuständig, oder mehrere laufen gleichzeitig los. Ein Ton allein geht in der lauten Aula unter.
Vorschlag 2: Das Vollbildfenster unterbricht jede andere Tätigkeit in der App und verdeckt die übrigen Störungen (Steuerbarkeit). Rotes Blinken kann bei Menschen mit Epilepsie Anfälle auslösen (WCAG: höchstens drei Blitze pro Sekunde), und eine Sirene erschreckt Teilnehmende in Sessions.
Vorschlag 3: Die Meldung erreicht gezielt die zuständige Person, über zwei Sinne (Vibration und Ton – auch bei Lärm wahrnehmbar). Die Eskalation nach fünf Minuten sorgt dafür, dass keine Störung liegen bleibt; unwichtige Meldungen stören nicht.
Empfehlung: Vorschlag 3, ggf. ergänzt um einen deutlichen, aber nicht blinkenden Hinweis in der App, solange eine Störung unbearbeitet ist.
Summe Aufgabe 3.2: 21 Punkte
Links und weitere Informationen
zum Nachlesen: Usability, User Experience und Barrierefreiheit
im Zusammenhang: GUI-Seiten mit Wireframes und Mockups entwerfen und Übungsaufgaben zu Mockups
Hinweis zur Nachnutzung als Open Educational Resource (OER)
Dieser Artikel und seine Texte, Bilder, Grafiken, Code und sonstiger Inhalt sind - sofern nicht anders angegeben - lizenziert unter CC BY 4.0. Nennung gemäß TULLU-Regel bitte wie folgt: “Übungsaufgaben zu Usability, User Experience und Barrierefreiheit” von oer-informatik.de (H. Stein), Lizenz: CC BY 4.0. Der Artikel wurde unter https://oer-informatik.de/usability-barrierefreiheit-uebungsaufgaben veröffentlicht, die Quelltexte sind in weiterverarbeitbarer Form verfügbar im Repository unter https://gitlab.com/oer-informatik/software-entwurf/gui-entwurf. Erstellt mit KI-Assistenz; von mir umfassend redaktionell überarbeitet, geprüft und freigegeben. Stand: 28.10.2026.
[Kommentare zum Artikel lesen, schreiben] / [Artikel teilen] / [gitlab-Issue zum Artikel schreiben]
