Komponenten und ihre Zustände

Im vorigen Modul ging es um die Zustände einer ganzen Ansicht – leer, lädt, Fehler, Erfolg. Hier geht es eine Ebene tiefer: um die Zustände einzelner Bedienelemente. Sie werden noch häufiger vergessen, und ihr Fehlen ist der Hauptgrund, warum sich Oberflächen „billig“ anfühlen, obwohl sie ordentlich aussehen.

1. Sechs Zustände

Probieren Sie besonders den dritten. Der Tastaturfokus wird in vielen Projekten entfernt, weil der Rahmen als störend empfunden wird – und macht die Seite damit für alle unbenutzbar, die keine Maus verwenden können. Das betrifft Menschen mit motorischen Einschränkungen, Menschen mit Screenreader und jeden, der sich schnell durch ein Formular bewegt.

2. Warum Zustände entscheiden

Eine Oberfläche wirkt hochwertig, wenn sie antwortet. Jeder Zustand ist eine Antwort: Das hier kannst du bedienen. Ich habe deinen Klick bemerkt. Ich arbeite. Ich bin fertig. Fehlen diese Antworten, entsteht Unsicherheit, und Unsicherheit äußert sich als doppelter Klick, als Abbruch oder als Anruf.

Der Aufwand ist gering, weil die Zustände meist aus denselben Tokens entstehen: eine dunklere Abstufung der Akzentfarbe, ein Ring in derselben Farbe, eine reduzierte Deckkraft. Wer die Tokens hat, entwirft alle sechs Zustände in einer halben Stunde.

3. Deaktiviert ist fast immer die schlechtere Wahl

Ein ausgegrauter Knopf beantwortet die wichtigste Frage nicht: Was muss ich tun, damit er funktioniert? Besser ist, den Knopf aktiv zu lassen und beim Klick zu erklären, was fehlt – dann springt der Fokus zum unvollständigen Feld und die Person weiß, woran es liegt. Deaktivierte Elemente sind zudem für Screenreader oft gar nicht erreichbar, sodass die Ursache unsichtbar bleibt.

Berechtigt ist der deaktivierte Zustand, wenn die Bedingung offensichtlich und sichtbar ist – etwa ein Knopf „Weiter“, der erst nach dem Abhaken eines Kästchens direkt darüber aktiv wird.

4. Komponenten dokumentieren

Diese sechs Zeilen je Komponente sind die gesamte Dokumentation, die eine mittelständische Website braucht. Sie passen auf eine Seite und beantworten die Rückfragen, die sonst während der Umsetzung einzeln gestellt werden.

5. Trefferflächen

Ein oft übersehener Punkt: Bedienelemente brauchen eine Mindestgröße, damit sie mit dem Finger sicher getroffen werden. Als Richtwert gelten 44 mal 44 Pixel. Das betrifft nicht nur Knöpfe, sondern auch Symbole, Kästchen und Links in Listen. Die sichtbare Fläche darf kleiner sein, solange der klickbare Bereich groß genug ist – das ist ein häufiger und einfacher Fehler in ansonsten sauberen Oberflächen.

6. Häufige Fragen

Muss jede Komponente alle Zustände haben? Jede bedienbare. Eine reine Textkarte ohne Klickfunktion braucht keine – sobald sie anklickbar wird, schon.

Wie gestaltet man den Fokus, ohne dass es stört? Ein Ring in der Akzentfarbe mit etwas Abstand zum Element wirkt sauber und bleibt deutlich. Wichtig ist, dass er auf jedem Hintergrund erkennbar bleibt – ein zweiter heller Ring innen löst das zuverlässig.

Wer entwirft die Zustände? Wer die Komponente entwirft. Werden sie der Umsetzung überlassen, entstehen sie aus den Standardwerten des jeweiligen Systems – und sehen auf jeder Seite anders aus.

7. Übung zum Selbermachen

Öffnen Sie eine Website und bedienen Sie sie ausschließlich mit der Tabulatortaste. Notieren Sie jede Stelle, an der Sie nicht sehen, wo Sie gerade sind. Prüfen Sie danach den Hauptknopf: Verändert er sich beim Überfahren, beim Klicken, beim Absenden? Jeder fehlende Zustand ist eine Antwort, die der Besucher nicht bekommt – und meist in zehn Minuten nachgerüstet.

Stand: September 2026. Kursmaterial der Klarwerk Akademie. Methoden und Werkzeuge der Konzeption entwickeln sich weiter – die Grundprinzipien nutzerzentrierter Gestaltung bleiben.