Formular-UX bezeichnet die nutzerfreundliche Gestaltung aller Textelemente in Formularen – Labels, Hilfetexte, Platzhalter und Fehlermeldungen – mit dem Ziel, korrekte Eingaben zu erleichtern und Abbrüche zu vermeiden.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UX Writing & Content Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Form Copy, Formular-Microcopy, Formular-Beschriftung
Was ist Formulare UX?
Formulare sind in digitalen Produkten allgegenwärtig: Registrierung, Login, Bezahlung, Kontaktanfrage, Einstellungen, Suchmasken. Sie sind auch der häufigste Ort, an dem Nutzer abbrechen – und meistens liegt das an schlechten Texten.
Formulare bestehen aus mehreren Textebenen, die alle zusammenwirken müssen. UX Writer sind für diese Ebenen zuständig und beeinflussen dadurch direkt, ob ein Formular funktioniert oder scheitert.
Erklärung
Die vier Textebenen in Formularen
1. Labels: Labels beschriften die Eingabefelder. Sie sind dauerhaft sichtbar und die wichtigste Textebene im Formular.
Regeln für gute Labels:
- Kurz und präzise: „E-Mail" statt „Gib deine E-Mail-Adresse ein"
- Immer sichtbar (nicht als einzige Beschriftung im Platzhalter versteckt)
- Substantivisch: „Vorname", „Straße", „Telefonnummer"
- Konsistent: Wenn ein Feld „E-Mail" heißt, darf es nicht anderswo „E-Mail-Adresse" heißen
2. Platzhalter (Placeholder Text): Platzhaltertexte erscheinen im leeren Eingabefeld und verschwinden beim Tippen. Sie zeigen ein Beispiel oder Format.
Regeln für Platzhaltertexte:
- Niemals als Ersatz für ein Label verwenden (Accessibility-Problem)
- Beispielwert zeigen: „z. B. max.mustermann@beispiel.de"
- Format erklären: „TT.MM.JJJJ"
- Keine Anweisungen: „Hier eingeben" sagt nichts
3. Hilfetexte (Help Text): Statische Erklärungen unter dem Feld, die immer sichtbar sind (→ Tooltips und Hilfetexte gestalten).
Regeln für Hilfetexte:
- Nur einsetzen, wenn sie echten Mehrwert liefern
- Kontext oder Format erklären
- Kurz halten: maximal 1–2 Sätze
4. Fehlermeldungen: Erscheinen, wenn eine Eingabe nicht korrekt ist (→ Fehlermeldungen nutzerfreundlich schreiben).
Regeln:
- Inline, direkt beim fehlerhaften Feld
- On Blur (nicht schon beim Tippen)
- Erklärend und lösungsorientiert
Pflichtfelder kennzeichnen
Pflichtfelder werden traditionell mit einem Sternchen () markiert. Die Bedeutung sollte am Formularanfang erklärt werden: „ Pflichtfeld".
Alternativ, wenn fast alle Felder Pflicht sind: Optional-Felder mit „(optional)" kennzeichnen und den Sternchen-Hinweis weglassen.
Buttons im Formular
Der Absendebutton eines Formulars ist ein Call-to-Action Texte schreiben-Element. Er sollte beschreiben, was beim Absenden passiert:
- „Konto erstellen" (nicht: „Absenden")
- „Nachricht senden" (nicht: „Submit")
- „Jetzt buchen" (nicht: „Weiter")
Barrierefreiheit in Formularen
Labels müssen programmatisch mit Eingabefeldern verknüpft sein (HTML for/id-Attribute), damit Screenreader sie vorlesen können. Platzhaltertexte reichen dafür nicht aus, da sie beim Tippen verschwinden.
Fehlermeldungen müssen als ARIA-Live-Regionen implementiert sein, damit Screenreader-Nutzer sie sofort hören.
Beispiele
Vollständiges Beispiel: Registrierungsformular
Schlecht:
`` [Textfeld – Placeholder: "Name eingeben"] [Textfeld – Placeholder: "E-Mail"] [Passwort-Feld – Placeholder: "Passwort"] [Button: "Absenden"] ``
Gut:
``` Vorname * [Textfeld – Placeholder: "z. B. Maria"] Hilfstext: Wird auf deinem Profil angezeigt.
E-Mail-Adresse * [Textfeld – Placeholder: "z. B. maria@beispiel.de"]
Passwort * [Passwort-Feld] Hilfstext: Mindestens 8 Zeichen, 1 Großbuchstabe, 1 Zahl.
[Button: "Kostenloses Konto erstellen"] ```
Fehlermeldungen im Formular
Schlechtes Beispiel:
„Fehler bei Feld 3"
Gutes Beispiel (unter dem Passwort-Feld):
„Dein Passwort ist zu kurz. Bitte verwende mindestens 8 Zeichen."
In der Praxis
Formular-UX ist ein Bereich, in dem UX Writer und UX-Designer besonders eng zusammenarbeiten müssen. Textentscheidungen haben direkte Auswirkungen auf die visuelle Struktur: Ein langer Label-Text verändert das Layout; ein Hilfstext braucht Platz.
Gute Praxis ist es, Formulare früh im Designprozess textuell zu bearbeiten – idealerweise bevor das finale visuelle Design steht. Ein Content-First-Ansatz verhindert, dass Texte später in unpassende visuelle Rahmen gequetscht werden.
Formulare sollten regelmäßig durch Nutzertests oder Session Recordings analysiert werden. Typische Signale für Formularproblem: Hohe Abbruchrate auf bestimmten Feldern, gehäufte Fehlermeldungen bei bestimmten Eingaben, Support-Anfragen zu bestimmten Formular-Schritten.
Vergleich & Abgrenzung
Formulare UX vs. [Fehlermeldungen nutzerfreundlich schreiben](/wiki/mediendesign-digitale-medien/ux-writing/error-messages/): Error Messages sind ein Teilbereich der Formular-UX. Formulare UX umfasst darüber hinaus Labels, Hilfetexte und CTAs.
Formulare UX vs. [Microcopy: Kleine Texte, große Wirkung](/wiki/mediendesign-digitale-medien/ux-writing/microcopy/): Formular-Texte sind ein spezifischer Bereich innerhalb der Microcopy – fokussiert auf das Eingabeverhalten von Nutzern.
Formulare UX vs. Form Design: Form Design ist der übergeordnete Begriff, der visuelle Gestaltung und Struktur einschließt. Formulare UX konzentriert sich auf den textlichen Teil.
Häufige Fragen (FAQ)
Darf der Placeholder allein als Label dienen? Nein. Wenn das Feld leer ist, sieht es wie ein ausgefülltes Feld aus; außerdem verschwindet der Placeholder beim Tippen, sodass Nutzer nicht mehr wissen, was sie eingeben sollten. Immer ein separates Label verwenden.
Wie viele Felder sollte ein Formular maximal haben? Es gibt keine universelle Zahl, aber die Faustregel lautet: so wenige wie möglich. Jedes zusätzliche Feld erhöht die Abbruchwahrscheinlichkeit. Felder, die nicht unbedingt nötig sind, streichen.
Was tun bei langen Multi-Step-Formularen? Fortschrittsanzeige einbauen und den Fortschritt in Text benennen: „Schritt 2 von 4: Lieferadresse". Jeder Schritt bekommt einen eigenen sprechenden Titel.
Verwandte Einträge
- Fehlermeldungen nutzerfreundlich schreiben
- Tooltips und Hilfetexte gestalten
- Microcopy: Kleine Texte, große Wirkung
- Call-to-Action Texte schreiben
- Plain Language: Verständlich schreiben
Weiterführend
- Jarrett, Caroline / Gaffney, Gerry (2008): Forms that Work: Designing Web Forms for Usability. Morgan Kaufmann.
- Adam Silver (2019): Form Design Patterns. Smashing Magazine.
- Nielsen Norman Group: „Web Form Design Best Practices". www.nngroup.com (Stand: 2023).
- Baymard Institute: „Form Usability Research". baymard.com (Stand: 2024).
- GOV.UK Design System: „Text input". design-system.service.gov.uk (Stand: 2024).
