UX & UI Design

05 / Formulare, Prototyp & Übergabe

Kernfrage

Wie wird aus dem Entwurf ein Produkt?

Am Schluss muss ein Entwurf funktionieren: Menschen geben Daten ein, klicken sich durch Abläufe, und die Entwicklung setzt alles um. Formulare, klickbare Prototypen und eine saubere Übergabe entscheiden, ob die Gestaltung im fertigen Produkt ankommt.

Lernziel: Du kannst Formulare nutzerfreundlich gestalten, einen klickbaren Prototyp bauen und testen und Entwürfe vollständig an die Entwicklung übergeben.

Fertig ist, was jemand anders umsetzen kann.

5.1 / Formulare

So wenig wie möglich, so klar wie nötig.

Formulare sind oft die Stelle, an der Menschen aufgeben. Drei Regeln helfen:

Nur das Nötige

Jedes Feld kostet Mühe.

Labels oben

Beschriftung über dem Feld, nicht im Feld.

Hilfreiche Fehler

Direkt am Feld, mit Lösung.

Passende Feldtypen helfen am Handy: Für E-Mail, Telefon und Zahlen erscheint automatisch die richtige Tastatur, und das automatische Ausfüllen spart Tipparbeit.

Jedes Feld muss sich seinen Platz verdienen.

5.2 / Bedienelemente wählen

Das richtige Element spart Erklärungen.

Toggle oder Checkbox, Dropdown oder Radio Buttons, Slider oder Zahlenfeld: Jedes Element hat seinen Zweck. Radio Buttons zeigen alle Optionen auf einen Blick, ein Dropdown spart Platz bei vielen. Ein Toggle wirkt sofort, eine Checkbox oft erst beim Speichern.

Im Zweifel gewinnt das Element, das Menschen schon kennen und das am wenigsten Klicks braucht. Für zwei bis fünf Optionen sind Radio Buttons oder ein Segmented Control fast immer besser als ein Dropdown.

Die Form eines Elements ist schon eine Anleitung.

Ausprobieren

Bedienelemente

Probier jedes Element aus und achte darauf, was sofort passiert und was nicht.

Primär

Sekundär

Text

Button

Schaltfläche · Primär, Sekundär, Text

Löst eine Aktion aus. Seine Gestaltung zeigt, wie wichtig die Aktion ist.

Verhalten & EinsatzPrimär: die eine Hauptaktion einer Ansicht. Sekundär: Alternativen. Text-Button: leise Aktionen wie Abbrechen.

Nicht verwechseln: Link: führt woanders hin. Ein Button tut etwas.

WLANan

Toggle

Switch · Schalter

Ein Schalter mit zwei Zuständen: an oder aus.

Verhalten & EinsatzWirkt sofort, ohne Speichern-Knopf. Darum nur für Einstellungen, die direkt gelten.

Nicht verwechseln: Checkbox: wird oft erst mit dem Absenden wirksam.

Interessen (mehrere)PrintWebMotion

Checkbox

Kontrollkästchen

Ein Kästchen zum Ankreuzen. Mehrere Optionen lassen sich gleichzeitig wählen.

Verhalten & EinsatzAuch einzeln für Zustimmungen. Das Label gehört zur Klickfläche.

Nicht verwechseln: Radio Button: genau eine aus mehreren.

Versand (eine)PostExpressAbholen

Radio Button

Optionsfeld

Runde Felder für eine Auswahl, bei der genau eine Option gilt.

Verhalten & EinsatzWählt man eine neue, springt die alte heraus, wie bei den Senderknöpfen alter Radios. Daher der Name.

Land

Dropdown

Select · Auswahlliste

Ein Feld, das beim Antippen eine Liste mit Optionen aufklappt.

Verhalten & EinsatzSpart Platz bei vielen Optionen, versteckt sie aber. Bei wenigen Optionen sind Radio Buttons oft schneller.

Nicht verwechseln: Dropdown-Menü: enthält Befehle statt Werte.

E-Mail ← LabelHilfetext: Wir schicken dir einen Link.

Textfeld

Input · Eingabefeld · Placeholder

Ein Feld für freie Eingaben, mit Label, Platzhalter (Placeholder) und oft einem Hilfetext.

Verhalten & EinsatzDas Label steht immer sichtbar über dem Feld. Der Placeholder verschwindet beim Tippen und ersetzt darum kein Label.

Helligkeit60 %

Slider

Schieberegler · Range

Ein Regler, mit dem man einen Wert auf einer Skala einstellt.

Verhalten & EinsatzGut für ungefähre Werte wie Lautstärke oder Helligkeit, schlecht für exakte Zahlen.

Segmented Control

Segmentierter Schalter

Zwei bis fünf zusammenhängende Optionen in einer Leiste, eine davon aktiv.

Verhalten & EinsatzWechselt meist die Darstellung derselben Daten, etwa Tag, Woche, Monat.

Nicht verwechseln: Tabs: wechseln zwischen verschiedenen Inhalten.

1 Filter aktiv

Chip

Tag · Filter-Chip

Kleine, abgerundete Elemente für Filter, Stichworte oder gewählte Werte.

Verhalten & EinsatzFilter-Chips lassen sich an- und abwählen und zeigen auf einen Blick, was gerade gefiltert ist.

5.3 / Prototyp und Übergabe

Testen, bevor gebaut wird.

Ein klickbarer Prototyp in Figma oder Framer zeigt den Ablauf, bevor eine Zeile Code entsteht. Mit drei bis fünf Personen getestet, findet man die gröbsten Probleme früh und günstig.

Zur Übergabe gehören alle Ansichten in allen Breiten, alle Zustände, Tokens und Komponenten, Abstände und Verhalten, Texte und Fehlermeldungen. Am besten bespricht man den Entwurf gemeinsam, statt nur eine Datei zu schicken.

Eine Übergabe ist ein Gespräch, keine Datei.