UX & UI Design
Wie heisst das eigentlich?
Interfaces entstehen im Team: Gestaltung, Entwicklung, Text und Kundschaft reden über dieselben Bausteine. Wer «das Ding, das unten kurz aufpoppt» sagt, verliert Zeit und riskiert Missverständnisse. Gemeinsame Namen machen Feedback, Briefings und Übergaben genau.
Lernziel: Du benennst die gängigen Elemente, Zustände und Verhaltensweisen von Interfaces richtig, unterscheidest ähnliche Elemente und kannst die Begriffe hinter guter Gestaltung erklären. Jede Karte hat ein Beispiel zum Ausprobieren, am Schluss wartet ein Quiz.
Wer es benennen kann, kann es besprechen.
Wo bin ich, wohin kann ich?
Navigationselemente zeigen die Struktur eines Produkts: welche Bereiche es gibt, wo man gerade ist und wie man zurückkommt. Auf grossen Bildschirmen liegt die Navigation meist oben, in Apps oft unten in Daumenreichweite.
Viele Begriffe werden im Alltag vermischt. Tabs und Tab Bar klingen ähnlich, lösen aber verschiedene Aufgaben: Die Tab Bar wechselt Bereiche, Tabs wechseln Ansichten innerhalb einer Seite.
Navigation beantwortet drei Fragen: Wo bin ich, wo war ich, wohin kann ich?
Womit gebe ich etwas ein?
Bedienelemente, im Englischen Controls, nehmen Eingaben entgegen: wählen, schalten, tippen, schieben. Jedes hat eine eigene Logik. Eine Checkbox erlaubt mehrere Antworten, ein Radio Button genau eine, ein Toggle wirkt sofort.
Wer das passende Element wählt, spart Erklärtext. Die Form verrät schon, was erlaubt ist.
Die Form eines Elements ist schon eine Anleitung.
Was erscheint über der Seite?
Manche Elemente legen sich über den Inhalt, um eine Entscheidung zu verlangen, Optionen anzubieten oder etwas zu melden. Entscheidend ist, wie stark sie unterbrechen: Ein Modal blockiert alles, ein Toast meldet sich nur kurz.
Faustregel: Je wichtiger und unumkehrbarer die Entscheidung, desto stärker darf die Unterbrechung sein. Für Bestätigungen reicht meist ein Toast mit Rückgängig.
Unterbrich nur so stark, wie es die Sache verlangt.
Wie sieht das Element gerade aus?
Ein Element hat nicht nur ein Aussehen, sondern mehrere Zustände (States): normal, beim Darüberfahren, fokussiert, gedrückt, deaktiviert. Dazu kommen Zustände ganzer Ansichten: lädt, leer, fehlerhaft, erfolgreich.
Im Entwurf werden gern nur die schönen Zustände gestaltet. Die anderen entstehen dann zufällig in der Entwicklung. Eine gute Übergabe zeigt alle Zustände.
Ein Element ist erst fertig, wenn alle seine Zustände gestaltet sind.
Was passiert, wenn ich etwas tue?
Verhalten beschreibt, wie ein Interface auf Bewegung reagiert: wischen, ziehen, scrollen, antippen. Diese Muster haben Namen, damit man sie im Team genau beschreiben kann, etwa «Pull to Refresh» statt «nach unten ziehen, dann lädt es neu».
Gesten sind unsichtbar. Was man nicht sieht, muss man kennen. Darum braucht jede Geste eine sichtbare Alternative.
Jede Geste braucht einen sichtbaren Zwilling.
Warum funktioniert das?
Einige Begriffe beschreiben keine Elemente, sondern Prinzipien: wie Menschen erkennen, was sie tun können, wie viel sie gleichzeitig verarbeiten und was sie erwarten. Viele stammen aus der Psychologie und wurden von Don Norman, Jakob Nielsen und anderen ins Design übertragen.
Mit diesen Begriffen lässt sich Feedback begründen statt nur bewerten: «Der Button hat zu wenig Affordanz» hilft mehr als «gefällt mir nicht».
Gute Begriffe machen aus Geschmack ein Argument.
Alle Begriffe von A bis Z
Hier stehen alle Begriffe in einer Liste. Such nach dem deutschen oder dem englischen Namen.
Im Zweifel nachschlagen statt umschreiben.
Ein Interface benennen
Aufgabe: Nimm eine App, die du täglich brauchst, etwa deine Banking- oder ÖV-App, und beschreibe einen Ablauf nur mit den Begriffen aus diesem Kurs.
SCHRITT 1
Mach drei bis fünf Screenshots eines Ablaufs, zum Beispiel ein Ticket kaufen.
SCHRITT 2
Beschrifte jedes Element mit seinem Namen: Tab Bar, Segmented Control, Bottom Sheet, Toast.
SCHRITT 3
Notiere zu jedem Element den Zustand, den du siehst, und was passiert, wenn du es bedienst.
SCHRITT 4
Such ein Element, das unpassend eingesetzt ist, und begründe mit einem Begriff aus Kapitel 1.6, was du ändern würdest.
Auswertung: Lass jemanden nur anhand deiner Beschriftungen den Ablauf nacherzählen. Wo es hakt, war ein Begriff ungenau.
Zum Weiterlesen
Norman, Don: The Design of Everyday Things. Revised and Expanded Edition. Basic Books, 2013.
Tidwell, Jenifer; Brewer, Charles; Valencia, Aynne: Designing Interfaces. 3. Auflage. O’Reilly, 2020.
Saffer, Dan: Microinteractions. Designing with Details. O’Reilly, 2013.
Yablonski, Jon: Laws of UX. O’Reilly, 2020.
Nielsen, Jakob: 10 Usability Heuristics for User Interface Design. Nielsen Norman Group.
Brignull, Harry: Deceptive Patterns. Exposing the Tricks Tech Companies Use to Control You. Testimonium, 2023.