Bedienoberflächen
Teil von Bedienoberflächen gestalten mit Designsystem, Barrierefreiheit und Tests
10 Bedienoberflächen Fehler: So vermeiden Sie sie
Bedienoberflächen Fehler: Zehn konkrete Fälle zu Fokus, Icons, Kontrast, Beschriftung, Touchflächen und Zuständen – mit Prüfschritten und Normbezug.
Das Wichtigste auf einen Blick
- Bedienoberflächen FehlerDie zehn Punkte betreffen Fokus, Icons, Kontraste, Beschriftungen, Touchflächen, Zustände und Rückmeldungen.
- Die BITV verweist auf die europäische Norm EN 301 549 und darin auf die WCAG-Kriterien; die ISO 9241 liefert die Grundsätze der Interaktion.
- Ursachen liegen meist in der Arbeitsteilung und in Prüfungen, die nur den Idealfall abdecken.
- Wer mit Tastatur, Zoom und echten Geräten testet, findet die meisten Fehler in wenigen Durchläufen.
- Designsysteme und Normen ersetzen keine Prüfung am Produkt, sie liefern nur das gemeinsame Vokabular.
Warum dieselben Fehler immer wieder entstehen
Bedienoberflächen entstehen in Arbeitsteilung: Gestaltung liefert Ansichten, Entwicklung ergänzt Verhalten, Produkt steuert den Umfang. An diesen Übergaben entstehen die typischen Fehler.
Statische Entwürfe zeigen den Idealfall, mit kurzen Texten und gefüllten Listen. Zustände wie Laden, Leerlauf oder Fehler bleiben undokumentiert und werden spät ergänzt, ohne Gestaltungsprüfung. Die Fehler verteilen sich selten gleichmäßig, sie bündeln sich in Formularen, Tabellen und Navigation.
Der zweite Grund ist die Prüfroutine. Wer nur mit Maus und großem Bildschirm testet, übersieht Tastaturführung, Zoom und kleine Trefferflächen. Die ISO 9241-110 beschreibt Grundsätze wie Steuerbarkeit und Fehlertoleranz, die sich nur am laufenden System beobachten lassen. Wie Normen entstehen und was sie leisten, beschreibt DIN im Grundlagenwissen zu Normen und Standards.
Fünf Fehler bei Wahrnehmung, Beschriftung und Bedienbarkeit
- Mehrdeutige Icons ohne Beschriftung.Ein alleinstehendes Symbol ist nicht immer eindeutig. Ergänzen Sie mehrdeutige Icons um eine sichtbare Textbeschriftung oder, wo passend, einen zugänglichen Namen.
- Zu geringe Kontraste.Text und Bedienelemente mit geringem Kontrast sind schwer zu erkennen. Prüfen Sie die Kombinationen von Vorder- und Hintergrund mit einem Messwerkzeug statt nur nach Augenmaß.
- Unklare Beschriftungen.Allgemeine Angaben wie „OK“ verraten nicht immer, was eine Aktion bewirkt. Benennen Sie Aktionen konkret und verwenden Sie Begriffe konsequent.
Fünf Fehler bei Wahrnehmung und Beschriftung
- Fehlender FokuszustandTab-Prüfung, Outline nie ohne Ersatz entfernen
- Unklare Iconssichtbares Label ergänzen, Symboltest durchführen
- Zu geringe Kontraste4,5 zu 1 für Text messen
- Zu kleine Touchflächen48 dp Richtwert, Trefferfläche vergrößern
- Text bricht beim VergrößernUmbruch erlauben, 200 Prozent prüfen
- Unsichtbarer Tastaturfokus. Ohne sichtbare Markierung ist nicht erkennbar, welches Element gerade ausgewählt ist. Machen Sie den Fokus deutlich sichtbar und prüfen Sie ihn bei der Bedienung nur mit der Tastatur.
Fünf Fehler bei Zuständen, Abläufen und Rückmeldungen
- Fehlende Zustände.Lade-, Leer- und Fehlerzustände werden selten entworfen, obwohl sie täglich auftreten. Dokumentieren Sie je Komponente Standard, Fokus, Hover, Aktiv, Laden, Fehler und Deaktiviert.
- Fehlermeldungen ohne Bezug.Eine Meldung am Formularende zwingt zum Suchen. Verknüpfen Sie sie mit dem Feld, benennen Sie die Ursache und sagen Sie, was zu tun ist.
- Wechselnde Aktionspositionen.Liegt die Hauptaktion je Ansicht woanders, entstehen Fehlklicks. Fixieren Sie Position, Reihenfolge und Benennung in einer Komponentenbibliothek, wie sie das Fluent 2 Design System von Microsoft beschreibt.
- Dialoge ohne Fokusführung.Modale Fenster, die den Fokus nicht binden und Escape ignorieren, sperren Tastaturnutzende aus. Setzen Sie den Fokus beim Öffnen, halten Sie ihn im Fenster und geben Sie ihn beim Schließen zurück.
- Keine Rückmeldung, kein Abbruch.Lange Vorgänge ohne Fortschritt verletzen Steuerbarkeit und Fehlertoleranz. Zeigen Sie den Fortschritt, erlauben Sie einen Abbruch und bestätigen Sie das Ergebnis.
Prüfraster mit Normbezug
Die Barrierefreie-Informationstechnik-Verordnung verweist auf EN 301 549, die die WCAG-Kriterien in Stufe AA aufgreift. Für Bundesbehörden gilt die BITV, viele Länder haben eigene Verordnungen mit vergleichbaren Anforderungen. Was eine Norm auszeichnet, erklärt der Überblick zu DIN-Normen.
| Anforderung | Fundstelle | Prüfpunkt |
|---|---|---|
| Sichtbarer Fokus | WCAG 2.4.7 | Fokusring bei reiner Tastaturbedienung |
| Kontrast | WCAG 1.4.3 | Text 4,5 zu 1, Bedienelemente 3 zu 1 |
| Zielgröße | WCAG 2.5.8, Material Design | Touchfläche nachmessen, 24 bis 48 dp |
| Interaktionsprinzipien | ISO 9241-110 | Steuerbarkeit, Fehlertoleranz, Erwartungskonformität |
Für den Durchlauf genügen fünf Schritte:
- Alle Ansichten nur mit Tastatur bedienen.
- Auf 200 Prozent zoomen und Textumbruch prüfen.
- Kontraste mit einem Messwerkzeug bestimmen.
- Trefferflächen auf einem kleinen Gerät nachmessen.
- Zustandsliste je Komponente abhaken.
Häufige Fragen
Welche Norm gilt in Deutschland für Bedienoberflächen?
Verbindlich ist die BITV für öffentliche Stellen, die auf EN 301 549 und die WCAG verweist. Die ISO 9241-110 liefert ergänzende Grundsätze, ist aber nicht rechtlich verpflichtend.
Wie groß sollten Touchflächen sein?
Als Untergrenze gelten 24 mal 24 CSS-Pixel, als Richtwert für mobile Anwendungen 44 bis 48 dp. Entscheidend ist die Trefferfläche, nicht die sichtbare Symbolgröße. CSS-Pixel und dp sind unterschiedliche Einheiten und sollten nicht pauschal gleichgesetzt werden.
Reicht ein Designsystem, um die Fehler zu vermeiden?
Nein. Systeme wie Material Design oder Fluent 2 liefern Bausteine, aber Zustände, Beschriftungen und Fokusführung entstehen erst in der konkreten Ansicht.
Wie erkenne ich fehlende Fokuszustände schnell?
Blenden Sie die Maus aus und bedienen Sie die Ansicht nur mit Tab und Enter. Sobald die Position nicht sichtbar ist, fehlt ein Fokuszustand.
