Seminar Pencil Project – Barrierearme UI-Konzeption und Prüfpfade

Beschreibung

Barrierearme Benutzeroberflächen entstehen bereits in der Konzeptphase. Das Seminar verbindet strukturierte Wireframes mit nachvollziehbaren Prüfpfaden für Tastaturbedienung, Fokusreihenfolge, Kontraste, Beschriftungen, Fehlermeldungen und alternative Darstellungen. Pencil Project dient dabei als dokumentierbare Entwurfsumgebung; automatische Konformitätsprüfungen werden nicht vorausgesetzt.

Inhaltsübersicht

• Lernziele und fachliche Einordnung
• Schrittweise Seminarinhalte
• Praxisübungen
• Zielgruppe und Voraussetzungen
• Didaktik und Arbeitsweise

Lernziele

• Barrierearme Anforderungen bereits in Low- und Mid-Fidelity-Wireframes sichtbar machen.
• Tastatur-, Fokus- und Dialogpfade als Seitenfolge und Annotation modellieren.
• Formularfelder, Hilfetexte, Statusmeldungen und Fehlerzustände eindeutig darstellen.
• Kontrast-, Größen- und Informationskriterien mit manuellen Prüflisten bewerten.
• Review-Ergebnisse nachvollziehbar in Varianten, Kommentarseiten und Freigabeständen dokumentieren.

Schrittweise Seminarinhalte

1. Anforderungen und Prüfkriterien

Schwerpunkt: Nutzungskontexte, Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit, robuste Struktur, Akzeptanzkriterien und prüfbare Entwurfsregeln.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Anforderungen und Prüfkriterien“ anhand von Nutzungskontexte, Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit, robuste Struktur, Akzeptanzkriterien und prüfbare Entwurfsregeln bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

2. Semantische Seiten- und Inhaltsstruktur

Schwerpunkt: Überschriftenhierarchie, Landmarken, Reihenfolge, Gruppierung, Beschriftungen, Hilfetexte und alternative Darstellungen.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Semantische Seiten- und Inhaltsstruktur“ anhand von Überschriftenhierarchie, Landmarken, Reihenfolge, Gruppierung, Beschriftungen, Hilfetexte und alternative Darstellungen bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

3. Tastatur- und Fokuspfade

Schwerpunkt: Tab-Reihenfolge, sichtbarer Fokus, Modaldialoge, Sprungziele, Menüs, Overlays und Rückkehrlogik.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Tastatur- und Fokuspfade“ anhand von Tab-Reihenfolge, sichtbarer Fokus, Modaldialoge, Sprungziele, Menüs, Overlays und Rückkehrlogik bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

4. Formulare und Fehlersituationen

Schwerpunkt: Labels, Pflichtfelder, Eingabehinweise, Validierung, Sammelmeldung, Inline-Fehler, Erfolgsmeldung und Wiederaufnahme.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Formulare und Fehlersituationen“ anhand von Labels, Pflichtfelder, Eingabehinweise, Validierung, Sammelmeldung, Inline-Fehler, Erfolgsmeldung und Wiederaufnahme bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

5. Kontrast, Farbe und visuelle Zustände

Schwerpunkt: Farbunabhängige Information, Kontrastannahmen, Statussymbole, Textgrößen, Abstände und skalierbare Komponenten.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Kontrast, Farbe und visuelle Zustände“ anhand von Farbunabhängige Information, Kontrastannahmen, Statussymbole, Textgrößen, Abstände und skalierbare Komponenten bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

6. Dokumentierte Prüfung und Freigabe

Schwerpunkt: Prüflisten, Annotationen, Variantenvergleich, Review-Protokoll, Restpunkte, Freigabekriterien und Übergabe an Entwicklung.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Dokumentierte Prüfung und Freigabe“ anhand von Prüflisten, Annotationen, Variantenvergleich, Review-Protokoll, Restpunkte, Freigabekriterien und Übergabe an Entwicklung bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

Praxisübungen

• Erstellung eines barrierearmen Formularablaufs mit Normal-, Fehler- und Erfolgszuständen.
• Modellierung eines vollständigen Tastatur- und Fokuspfads über Navigation, Dialog und Rücksprung.
• Review eines vorhandenen Mockups anhand einer strukturierten Prüfliste mit priorisierten Korrekturen.
• Aufbereitung einer kommentierten Übergabeseite für Entwicklung und Qualitätssicherung.

Zielgruppe und Voraussetzungen

Zielgruppe: UX-Designer, Product Owner, Business-Analysten, Entwickler, Qualitätsmanagement und Fachverantwortliche für digitale Angebote.

Voraussetzungen: Grundkenntnisse in Wireframing und Benutzeroberflächen; Vorkenntnisse zu Barrierefreiheit sind hilfreich, aber nicht erforderlich.

Didaktik und Arbeitsweise

Kurze Theorieblöcke, Demonstrationen und aufeinander aufbauende Übungen wechseln sich ab. Ein durchgehendes Beispieldokument wird mehrfach geprüft, korrigiert und in einen nachvollziehbaren Arbeitsstand überführt.