Bedienelemente haben mehrere Zustände, die zeigen, was gerade möglich ist: den Normalzustand, den Hover-Zustand beim Überfahren, den Aktiv-Zustand im Moment des Klicks und den deaktivierten Zustand, wenn eine Aktion nicht zur Verfügung steht. Dazu kommen Fokus und Ladezustand.
- Zustände von Bedienelementen
Die verschiedenen Darstellungen, die ein Button, ein Formularfeld oder ein Link je nach Situation annimmt, um seinen Status erkennbar zu machen.
Beispiel: „Der Button fehlt im deaktivierten Zustand, deshalb klickt jeder zweimal.“Auf Englisch: interface states oder component states. Die einzelnen Zustände heißen default, hover, focus, active, disabled und loading.
Die einzelnen Zustände
Zustand | Wann er auftritt | Was er zeigen muss |
|---|---|---|
Default | Der Normalfall ohne Einwirkung | Dass das Element bedienbar ist |
Hover | Der Mauszeiger steht darauf | Dass ein Klick etwas auslöst |
Focus | Das Element ist per Tastatur angesteuert | Wo man sich gerade befindet |
Active | Der Moment des Klicks oder Tipps | Dass die Eingabe angekommen ist |
Disabled | Die Aktion steht nicht zur Verfügung | Dass ein Klick nichts bewirkt, und möglichst warum |
Loading | Nach dem Klick, während gearbeitet wird | Dass etwas passiert und man warten soll |
Nicht jedes Element braucht alle sechs. Ein einfacher Textlink kommt mit Default, Hover und Focus aus. Ein Button, der eine Bestellung auslöst, braucht dagegen auch Active und Loading, weil sonst niemand weiß, ob der Klick angekommen ist.
Warum der Fokus-Zustand nicht wegfallen darf
Wer eine Website mit der Tastatur bedient, sieht nur am Fokus, wo er sich befindet. Fehlt die Markierung, ist die Seite blind bedienbar und damit nicht barrierefrei. Der Browser bringt eine Standardmarkierung mit, die in vielen Projekten aus gestalterischen Gründen entfernt wird, ohne dass ein Ersatz kommt.
Nötig ist eine sichtbare Markierung mit ausreichendem Kontrast, die auch auf farbigen Flächen erkennbar bleibt. Seit dem Barrierefreiheitsstärkungsgesetz ist das für viele Anbieter außerdem eine rechtliche Anforderung und keine Frage des Geschmacks mehr.
Wo die Zustände festgehalten werden
Zustände gehören ins Design System, wo sie einmal für alle Seiten festgelegt werden. Ein Button wird einmal mit allen seinen Zuständen angelegt, danach greift jede Seite darauf zu. Genau an dieser Stelle scheitern viele Projekte: Im Entwurf existiert nur der Normalzustand, alles Weitere entsteht während der Entwicklung nach Gefühl und fällt danach je Seite unterschiedlich aus.