UX & UI Design

04 / Komponenten & Zustände

Kernfrage

Woraus besteht ein Interface?

Interfaces bestehen aus wiederkehrenden Bausteinen: Buttons, Eingabefelder, Karten, Navigationen. Gestaltet man sie einmal als Komponenten mit allen Zuständen, wird das Produkt einheitlich und lässt sich schneller weiterentwickeln. Eine Sammlung solcher Komponenten mit Regeln heisst Design System.

Lernziel: Du kannst Komponenten mit Varianten und Zuständen planen und eine kleine Komponentenbibliothek aufbauen.

Erst die Bausteine, dann die Seiten.

4.1 / Komponenten und Varianten

Ein Baustein, mehrere Ausprägungen.

Eine gute Komponente ist klar umrissen und lässt sich über wenige Eigenschaften anpassen:

Varianten

Primär, Sekundär, Text: verschiedene Wichtigkeit.

Grössen

Klein, mittel, gross, aus der Abstandsskala.

Inhalt

Text, Icon oder beides, über Eigenschaften steuerbar.

Atomic Design ordnet Komponenten nach Grösse: Atome wie Buttons, Moleküle wie ein Suchfeld mit Button, Organismen wie eine ganze Kopfzeile. Die Begriffe helfen beim Aufräumen, sie sind kein Gesetz.

Weniger Varianten, klarere Rollen.

4.2 / Zustände

Normal ist nur einer von vielen.

Jede interaktive Komponente hat mehrere Zustände: normal, Hover, Fokus, gedrückt, deaktiviert, lädt, Fehler und Erfolg. Im Entwurf werden gern nur die schönen gestaltet. Die anderen entstehen dann im Code zufällig.

Auch Seiten haben Zustände: leer, lädt, teilweise gefüllt, voll und Fehler. Ein guter leerer Zustand erklärt, was hierher gehört, und bietet den ersten Schritt an.

Ein Baustein ist erst fertig, wenn alle Zustände gestaltet sind.

Ausprobieren

Zustände

Probier jeden Zustand aus: mit Maus, Klick und Tab-Taste.

ein Link

Mit der Maus: Farbe wechselt. Auf dem Handy: nichts.

Hover

Darüberfahren · Mouse-over

Der Zustand, wenn der Mauszeiger über einem Element liegt.

Verhalten & EinsatzZeigt: Hier kann ich klicken. Auf Touch-Geräten gibt es ihn nicht, darum muss ein Element auch ohne Hover klickbar aussehen.

Klick ins erste Feld, dann Tab-Taste

Fokus

Focus · Fokusring

Der Zustand des Elements, das gerade Tastatureingaben empfängt.

Verhalten & EinsatzWer mit der Tab-Taste navigiert, braucht einen deutlich sichtbaren Fokusring. Ihn zu entfernen, macht eine Seite für viele unbedienbar.

Gedrückt halten: Er gibt nach.

Pressed

Active · Gedrückt

Der kurze Zustand, während man klickt oder tippt.

Verhalten & EinsatzEin leichtes Eindrücken oder Abdunkeln bestätigt sofort: Der Klick ist angekommen.

Ich habe die AGB gelesenErst AGB bestätigen.

Disabled

Deaktiviert · Inaktiv

Ein Element, das sichtbar ist, aber gerade nicht bedient werden kann.

Verhalten & EinsatzMeist blasser dargestellt. Gut ist, wenn erklärt wird, warum es inaktiv ist und was noch fehlt.

Ladezustand

Spinner · Skeleton Screen · Progress Bar

Zeigt, dass gerade etwas lädt. Drei übliche Formen: Spinner, Skeleton Screen und Fortschrittsbalken.

Verhalten & EinsatzSpinner für kurze Wartezeiten. Der Skeleton Screen zeigt die kommende Struktur und wirkt schneller. Der Fortschrittsbalken passt, wenn die Dauer bekannt ist.

Noch keine Projekte

Empty State

Leerer Zustand

Was erscheint, wenn noch keine Inhalte da sind, etwa eine leere Liste.

Verhalten & EinsatzEin guter Empty State erklärt, was hier hinkommt, und bietet den ersten Schritt direkt an.

E-Mail⚠ Es fehlt ein @. Beispiel: name@domain.ch

Fehlerzustand

Error State · Inline-Validierung

Zeigt direkt am Feld, dass eine Eingabe nicht stimmt und wie man sie korrigiert.

Verhalten & EinsatzErst prüfen, wenn jemand das Feld verlässt, nicht schon beim ersten Buchstaben. Nicht nur mit Farbe, sondern auch mit Text.

4.3 / Design System

Tokens, Bausteine, Regeln, Dokumentation.

Ein Design System verbindet drei Ebenen: Tokens für Farben, Schriften und Abstände, Komponenten, die diese Tokens nutzen, und eine Dokumentation, die erklärt, wann man was einsetzt. Gestaltung und Code greifen auf dieselbe Quelle zu.

Klein anfangen lohnt sich: Farben, Schriftskala, Abstände und fünf Kernkomponenten reichen für viele Projekte. Das System wächst, wenn neue Bedürfnisse auftauchen, nicht auf Vorrat.

Ein System wächst mit dem Produkt, nicht davor.