Ein gutes Webformular kann über den Erfolg oder Misserfolg Deiner Website entscheiden. Doch viele Formulare sind überladen, nicht barrierefrei oder verwirrend gestaltet. In diesem Blogartikel lernst Du, wie Du mit einfachen Gestaltungsprinzipien, klaren Strukturen und durchdachter Nutzerführung bessere Formulare entwickelst – für alle Menschen. Mit konkreten Beispielen aus der Praxis und Tipps für mehr Conversion, Usability und Inklusion.
Formulare gehören längst zum Standard auf jeder Website. Sie sind der direkte Draht zwischen Dir und Deinen Nutzer:innen. Umso wichtiger ist es, dass Du auf erprobte UX-Prinzipien zurückgreifst und bewährte Entwurfsmuster kennst. In diesem Artikel zeigen wir Dir die Grundlagen aus unserer langjährigen Arbeit mit Fokus auf UX-Design und Barrierefreiheit – ergänzt um unsere wichtigsten Learnings.
Diese Prinzipien solltest Du bei der Gestaltung jedes Formulars im Hinterkopf behalten:
Halte den physischen und kognitiven Aufwand für Deine Nutzer:innen so gering wie möglich.
Gestalte Dein Formular so barrierefrei wie möglich.
Sorge für einen klaren visuellen Pfad, der das Auge durch das Formular führt.
Kommuniziere durchdacht: mit hilfreichen Hinweisen, klaren Fehlermeldungen und Erfolgsfeedback.
Ein erfolgreiches Formular ist nicht nur technisch korrekt – es fühlt sich intuitiv an, funktioniert für alle Endgeräte und lässt keine Fragen offen. Dafür brauchst Du keinen Mehraufwand, sondern nur gute Planung.
Ein gutes Eingabefeld vermittelt auf den ersten Blick, was erwartet wird. Zum Beispiel braucht das Feld für eine Hausnummer deutlich weniger Platz als das für eine Straße. Aber: Achte auf ein harmonisches Gesamtbild. Zu stark abweichende Feldgrößen wirken schnell unruhig und stören den visuellen Rhythmus.
Verwende idealerweise ein einspaltiges Layout – das schafft einen klaren Pfad und erleichtert die Orientierung.
Je vorhersehbarer der Aufbau, desto weniger Zeit verlieren Deine Nutzer:innen mit Suchen oder Interpretieren. Du führst sie damit sanft, aber zielsicher zum Ziel.
Reduziere die kognitive Last, indem Du verwandte Felder gruppierst. Klassische Beispiele: Kreditkartennummer mit Ablaufdatum oder Straße mit Hausnummer.
Trenne Gruppen am besten durch großzügige Abstände statt durch Linien oder Rahmen. Das sieht nicht nur besser aus – es hilft auch, den Fokus auf die Inhalte zu lenken.
Visuelle Leichtigkeit erzeugst Du durch Weißraum, nicht durch dekorative Elemente. Je weniger visuelle Ablenkung, desto klarer der Fokus auf das Wesentliche.
Setze klare visuelle Hierarchien: Die primäre Aktion (z. B. „Absenden“) sollte deutlich stärker hervorgehoben sein als sekundäre Optionen („Abbrechen“, „Zurück“). Das führt die Aufmerksamkeit gezielt und reduziert Abbrüche.
Platziere den Haupt-Button möglichst nah am letzten Eingabefeld – so bleibt der rote Faden erhalten.
Die Farbwahl ist dabei entscheidend: Nutze zum Beispiel eine kontrastreiche Farbe für die Hauptaktion und eine neutrale (z. B. Grau) für Nebenaktionen.
Formulare müssen für alle nutzbar sein – auch für Menschen mit eingeschränktem Sehen, motorischen Einschränkungen oder Screenreader-Nutzung.
Nutze semantisch korrekten HTML-Code, verwende das richtige Input-Element für jede Art der Eingabe (z. B. Checkbox für Ja/Nein), und achte auf logische Tab-Reihenfolgen bei Tastaturnutzung.
Teste Dein Formular selbst mit einem Screenreader wie NVDA – Du wirst überrascht sein, wie viele Details plötzlich auffallen, die barriereärmer gestaltet werden könnten.
Achte zudem auf einen sichtbaren Fokuszustand (Focus-Style), der anzeigt, welches Feld gerade aktiv ist. Besonders bei Tastatur-Navigation ist das essenziell.
Und: Halte Dich an die Kontrastvorgaben der WCAG (mindestens 4.5:1). Nutze zur Überprüfung einen Kontrast-Checker wie webaim.org/contrastchecker.
Je weniger Hilfetexte Deine Nutzer:innen benötigen, desto besser ist Dein Formular gestaltet. Wenn Erklärungen notwendig sind, platziere sie direkt am Feld – nicht irgendwo am Rand.
Gib, wo sinnvoll, Standardwerte vor. Wenn der Großteil Deiner Nutzer:innen zum Beispiel dieselbe Versandart wählt – warum sie dann jedes Mal manuell auswählen lassen?
Nutze Autocomplete-Attribute wie autocomplete="name" oder autocomplete="email", um Browsern die automatische Ausfüllung zu ermöglichen. Das spart Zeit und reduziert Fehler.
Wenn bestimmte Eingaben nur in Abhängigkeit einer Auswahl notwendig sind – z. B. bei Versand vs. Abholung – dann zeige diese Felder erst, wenn sie gebraucht werden.
Nutze dafür Tabs oder logische Auswahlfelder, die ganze Formularabschnitte aktivieren oder ausblenden.
Das Prinzip dahinter nennt sich Progressive Disclosure: Nutzer:innen sehen immer nur das, was sie wirklich brauchen – nicht mehr und nicht weniger. Das macht Dein Formular schlanker, verständlicher und weniger abschreckend.
Niemand mag Fehlermeldungen – aber noch schlimmer ist es, wenn sie nicht verständlich sind. Gib Deinen Nutzer:innen daher klare, lösungsorientierte Hinweise direkt beim Ausfüllen, nicht erst nach dem Absenden.
Nutze visuelles Feedback wie Häkchen oder Farbänderungen für Erfolg – das motiviert.
Vermeide generische Hinweise wie „Ein Fehler ist aufgetreten“. Formuliere konkret, z. B. „Bitte gib eine gültige E-Mail-Adresse ein“.
Kennzeichne Felder klar als „erforderlich“ oder „optional“ – aber nur die Ausnahme, nicht die Regel. Wenn 90 % der Felder erforderlich sind, dann markiere die wenigen optionalen.
Bei längeren Formularen solltest Du den Fortschritt sichtbar machen – z. B. durch eine Fortschrittsleiste oder Seitennummerierung („Schritt 2 von 5“). So fühlen sich Nutzer:innen nicht verloren.
Die besten Ergebnisse erzielst Du, wenn Du Beschriftungen links oberhalb der Eingabefelder platzierst. Das hat Matteo Penzo mit Eye-Tracking nachgewiesen. Nutzer:innen können so Label und Feld mit einem Blick erfassen.
Verzichte auf fette Schrift bei Labels – sie lenken ab und verlängern die Lesedauer unnötig. Normale Schrift reicht völlig aus und wirkt eleganter.
Platzhaltertexte innerhalb von Feldern („Vorname“, „E-Mail“) verschwinden, sobald man ins Feld klickt. Dadurch geht der Bezug verloren – vor allem bei Fehlern oder nachträglicher Korrektur.
Nutzer:innen überfliegen Formulare auf der Suche nach leeren Feldern. Wenn dort bereits ein Platzhalter steht, wird das Feld oft übersehen – ein vermeidbarer Usability-Fehler.
Nutze stattdessen echte Labels. Eine elegante Lösung findest Du z. B. in Googles Material Design mit animierten Labels, die bei Klick nach oben „springen“.
Führe Deine Nutzer:innen mit einem klaren visuellen Pfad durch ein einspaltiges Layout.
Gruppiere zusammengehörige Inhalte durch Abstände statt durch Trennlinien.
Setze visuelle Hierarchien bei Aktionen.
Platziere Hilfetexte nahe am Feld.
Nutze Progressive Disclosure für eine aufgeräumte Oberfläche.
Kommuniziere verständlich, kontextbezogen und direkt.
Platziere Labels über den Feldern – nicht daneben, nicht im Feld.
Verwende keine Platzhalter als Beschriftung.
Achte auf sauberen Code und barrierefreie Umsetzung.
Testest Du Dein Formular regelmäßig mit echten Nutzer:innen? Kleine UX-Tests mit 3–5 Personen zeigen oft mehr als tausend interne Korrekturschleifen.