Gute Formulare bauen

Teilen Sie ein Formular in zwei oder drei Schritte auf. Das erleichtert das Ausfüllen fast immer. Dafür gibt es drei Gründe:

• Ein mehrstufiges Formular wirkt auf den ersten Blick weniger einschüchternd als ein langes Formular mit vielen Feldern.
• Sensible Angaben wie E-Mail oder Telefon können Sie bis zum letzten Schritt aufheben. Dann füllen Nutzer*innen diese Felder eher aus, weil sie den Fortschritt aus den vorherigen Schritten nicht verlieren wollen. Diese kognitive Verzerrung ist als „Sunk Cost Fallacy“ bekannt.
• Ein Fortschrittsbalken motiviert Nutzer*innen, das Formular bis zum Ende auszufüllen. Auch dahinter steht eine bekannte kognitive Verzerrung: Was halb erledigt ist, bringt man gern zu Ende.

Jedes zusätzliche Feld in Ihrem Formular kostet Sie Anfragen. Prüfen Sie deshalb bei jeder Frage, ob sie diesen Verlust wert ist.

Bei der bedingten Logik, auch Verzweigungslogik genannt, erscheint eine Frage nur dann, wenn eine vorherige Frage auf eine bestimmte Weise beantwortet wurde. Fragen, die für manche Nutzer*innen keine Rolle spielen, tauchen für sie gar nicht erst auf. So wird Ihr Formular im Schnitt kürzer, und weniger Menschen brechen ab.

UX-Forscher*innen haben herausgefunden, dass ein Formular schneller ausgefüllt ist, wenn die Beschriftungen linksbündig über den Feldern stehen. Das Auge braucht dann weniger „visuelle Fixierungen“, also weniger Haltepunkte. Eine brauchbare Alternative zu Feldnamen über dem Feld beschreibe ich unter Punkt 16.

Eye-Tracking-Studien haben gezeigt, dass einfache einspaltige Layouts besser funktionieren als mehrspaltige mit Fragen nebeneinander. Das gilt auch für Datum und Uhrzeit: Ein einziges Feld mit klar vorgegebenem Format ist besser als Tag, Monat und Jahr nebeneinander (siehe Nr. 12).

Stellen Sie sich ein Formular vor, für das man eine Stunde braucht. Niemand würde es ausfüllen, es sei denn, Sie schenken allen dafür eine Reise auf die Bahamas. Diese Aussicht wäre Grund genug, sich trotz der langen und mühsamen Erfahrung durchzuringen. Das Beispiel ist übertrieben, aber es zeigt, wie viel die Motivation bei einem Formular ausmacht.

Hat Ihr Formular mehr als sechs Felder, fassen Sie die Fragen zu sinnvollen Abschnitten oder Schritten zusammen.

Jeder zusätzliche Klick kostet Mühe, und an jedem kann jemand aufhören. Wählen Sie deshalb Feldtypen, die mit möglichst wenigen Klicks auskommen.

Fragt Ihr Formular nach „Telefonnummer“ oder „Land“, schlagen Sie eine Vorwahl oder ein Land vor, das zur IP-Adresse der Nutzer*innen passt.

Untereinander angeordnete Radio Buttons und Checkboxen sind schneller zu erfassen als nebeneinander angeordnete.

Unterteilte Felder zwingen Nutzer*innen zu unnötigen Klicks, um ins nächste Feld zu kommen. Besser ist ein einziges Feld, dessen Platzhalter das Format klar vorgibt. Selbst wenn der Cursor automatisch ins nächste Feld springt, bleibt ein Nachteil: Unterteilte Felder verlangen eine strengere Validierung, und die kann nach hinten losgehen.

Menschen sorgen sich zunehmend um den Schutz ihrer Daten. Müssen Sie vertrauliche Angaben abfragen, erklären Sie deshalb deutlich, wozu Sie sie brauchen, am besten in einem Hilfetext direkt unter dem Feld.

Sollen Nutzer*innen ihre Adresse angeben, fragen Sie am besten nur nach Hausnummer und Postleitzahl. Ein Dienst schlägt dann die vollständige Adresse vor.

Ein Platzhalter ist der blasse Text, der in einem leeren Formularfeld steht. Er soll helfen, wenn unklar ist, was in das Feld gehört. Ein Feld wie „Vorname“ braucht also wahrscheinlich keinen.

Ein Feldbezeichner ist der Fragetext über dem Feld. Er sollte immer zu sehen sein und nicht durch einen Platzhalter ersetzt werden, denn der Platzhalter verschwindet, sobald jemand zu tippen beginnt. Dann müssen sich Nutzer*innen merken, wonach gefragt wurde. Ohne Feldbezeichner über dem Feld kommen Sie nur mit Inline-Labels aus. Diese Mischform bleibt immer sichtbar, braucht aber weniger Höhe als eine Beschriftung über dem Feld.

Sollen Nutzer*innen ihr Land, ihren Beruf oder etwas anderes aus vielen vorgegebenen Möglichkeiten wählen, bieten Sie am besten eine vorausschauende Suche an. Das spart Tipparbeit und strengt weniger an.

Müssen Sie eine optionale Frage stellen, kennzeichnen Sie sie deutlich als optional. Ich empfehle aber, optionale Fragen zu streichen oder erst zu stellen, nachdem Nutzer*innen ihre Daten abgeschickt haben. Wird trotzdem verlangt, sie vorher abzufragen, machen Sie im Platzhalter deutlich, dass sie optional sind.

Auswählbare Bilder gehören zu den ansprechendsten Fragetypen.

Fragen Sie nur mit Bedacht nach der Telefonnummer. Menschen geben ihre Nummer immer seltener heraus, und wenn Sie trotzdem danach fragen, steigt die Abbruchrate sehr wahrscheinlich deutlich.

Die Größe eines Feldes sollte zeigen, wie viel Text Nutzer*innen voraussichtlich eingeben. Ein Feld für Postleitzahl oder Hausnummer ist daher kürzer als das Feld für den Straßennamen.

Vermeiden Sie Captchas, denn sie schieben den Nutzer*innen die Arbeit der Spam-Abwehr zu, stören den Ablauf und schrecken am Ende ab. Besser sind ein automatischer Spam-Filter wie Akismet, eine sehr einfache Rechenfrage (etwa 1 plus 3) oder ein „Honeypot“ mit versteckten Feldern. Ein Captcha sollte der letzte Ausweg sein.

Verlassen Sie sich nicht allein auf Farben, um etwas mitzuteilen. Nach Angaben von Colour Blind Awareness sieht einer von zwölf Männern Farben eingeschränkt, bei Frauen ist es eine von zweihundert. Markieren Sie ein Feld bei einem Validierungsfehler oder einer Erfolgsmeldung deshalb nicht nur rot oder grün. Ergänzen Sie Farbe immer um Text oder Symbole, damit die Nachricht bei allen Nutzer*innen ankommt.

Viele Nutzer*innen springen mit der Tabulatortaste durch Formulare. Für Menschen mit Behinderungen ist das besonders wichtig, denn sie verlassen sich auf Software, die mit der Tabulatorfunktion von einer Frage zur nächsten wechselt.

Erklären Sie eine Frage, die Nutzer*innen womöglich nicht verstehen, und führen Sie sie so zur richtigen Antwort. Das gelingt zum Beispiel mit einem Hinweis, der erscheint, wenn man mit der Maus über ein Fragezeichen fährt.

Es klingt selbstverständlich, und doch lohnt sich die Prüfung: Funktionieren Ihre Formulare in allen gängigen Browsern und auf allen gängigen Geräten, und sind sie dort einfach zu bedienen? Im Zweifel hilft ein Dienst wie BrowserStack.

Nutzen Menschen Ihre Formulare voraussichtlich draußen auf dem Smartphone, müssen sich die Felder deutlich vom Hintergrund abheben. Sonst erkennen Nutzer*innen womöglich nicht, wohin sie tippen sollen.

Planen Sie blinkende Cursor, animierte Fortschrittsbalken, GIFs oder andere blinkende Elemente, dann darf nichts davon öfter als dreimal pro Sekunde blinken. So verlangt es das Erfolgskriterium 2.3.1 der WCAG. Schnelleres Blinken kann bei manchen Menschen Anfälle auslösen.

Browser wie Google Chrome und Firefox können Formulare automatisch ausfüllen. So erledigen Nutzer*innen Standardfelder mit einem Klick. Welche Angabe ein Feld erwartet, erkennen die Browser an Name, Label und Platzhalter. Benennen Sie Ihre Felder deshalb mit Begriffen, die ein Browser versteht, etwa „E-Mail“, „Vorname“ oder „Stadt“.

Wie halten Sie ein Formular kurz genug, um niemanden abzuschrecken, und bekommen trotzdem mehr Angaben von denen, die gern mehr erzählen? Eine Möglichkeit sind Schritt-für-Schritt-Formulare. Nutzer*innen können sie absenden, sobald sie einen bestimmten Schritt erreicht haben, und wer möchte, macht danach weitere Angaben.

Nutzer*innen erwarten, dass Websites und Formulare schnell laden. Wollen Sie, dass mehr Menschen Ihr Formular abschicken, machen Sie es so schnell wie möglich.

Vermeiden Sie das automatische Weiterschalten, also den selbsttätigen Sprung zur nächsten Frage. Damit rechnet in der Regel niemand, und es verwirrt.

Das Gehirn verarbeitet Bilder deutlich schneller als Text. Visuelle Hinweise können deshalb gut zeigen, wie ein Feld auszufüllen ist.

Eine strenge Validierung macht es der Programmierung leicht und den Nutzer*innen schwer. Lässt sich ein Feld auf viele Arten ausfüllen, etwa eine Telefonnummer als +12345678912, +44 12345678912 oder 012345678912, sollten Ihre Entwickler*innen eine Regel schreiben, die alle Varianten in ein einheitliches Format umwandelt. Zusätzlich hilft ein Platzhalter, der das gewünschte Format deutlich zeigt.

Lassen Sie E-Mail-Adresse und Passwort nur einmal eingeben. Zur Kontrolle eignet sich besser ein Symbol oder ein Kontrollkästchen, das das Passwort beim Anklicken sichtbar macht.

Prüfen Sie Eingaben direkt am Feld, rechts daneben, und melden Sie Fehler früh, nicht erst, wenn Nutzer*innen auf „Senden“ klicken. Diese Inline-Validierung sollte aber nicht in Echtzeit laufen, sonst meldet sie Fehler, bevor das Feld fertig ausgefüllt ist. Ideal ist eine Meldung etwa 500 Millisekunden, nachdem die Eingabe beendet ist.

Es hat sich gezeigt, dass Menschen „schön“ gestalteten Formularen und Websites mehr vertrauen als weniger ästhetischen.

Es gibt eine Reihe möglicher Gründe, warum sich Menschen mit Ihrem Formular unwohl fühlen. Typische Fragen sind: „Wie lange dauert es, das Formular auszufüllen?“, „Muss ich meine Kreditkartendaten eingeben?“ oder „Werde ich lästige Anrufe von einem Verkäufer bekommen?“ Beantworten Sie solche Fragen schon vorab, dann vertrauen Ihnen die Nutzer*innen eher.

Angaben wie „von 100.000 Menschen verwendet“ und Erfahrungsberichte von Menschen in einer ähnlichen Lage sind starke Hinweise. Durch sie fassen Nutzer*innen eher Vertrauen und füllen Ihr Formular aus.

Menschen verbinden Datenschutz- und Sicherheitssiegel mit einer Zahlung. Ein zusätzliches Siegel kann deshalb die Zahl der Abschlüsse sogar senken, weil Besucher*innen glauben, sie kämen auf eine Seite, auf der sie etwas bezahlen müssen.

Bei komplexeren Formularen, zu denen Nutzer*innen Fragen haben könnten, wirkt das sehr gut. Interessent*innen können dann alles klären, was sie noch vom Ausfüllen abhält.

Ein Fortschrittsbalken hilft, ein Formular bis zum Ende auszufüllen. Er nimmt Ihren Nutzer*innen die Unsicherheit, weil er deutlich zeigt, wie weit es noch ist. Beginnt der Balken nicht bei null, sondern zeigt schon ein Stück des Weges als erledigt, füllen sogar noch mehr Menschen das Formular aus.

Ist der Übergang zwischen zwei Schritten zu schnell, bemerken Nutzer*innen womöglich gar nicht, dass sich der Inhalt geändert hat. Sie klicken auf „Weiter“, sehen scheinbar dasselbe und geben auf. Ein etwas langsamerer Übergang macht den neuen Schritt sichtbar. Oft heißt es, schneller sei besser, doch bei Übergängen gilt das nicht.

Ein Fortschrittsbalken allein genügt nicht. Zeigen Sie auch, wie viele Schritte es insgesamt gibt und in welchem sich Nutzer*innen gerade befinden. Dann bleibt nichts unklar.

Viele Formulare tragen langweilige Schaltflächen wie „Senden“ oder „Absenden“. Ersetzen Sie diese durch eine Aufforderung, die beschreibt, was Nutzer*innen mit dem Formular erreichen wollen. Eine gute Faustregel: Die Beschriftung vervollständigt aus Sicht der Nutzer*innen den Satz „Ich will …“. Bei einem Anfrageformular für eine kostenlose Beratung könnte die Schaltfläche also „Meine kostenlose Beratung anfordern“ heißen.

Vielleicht kennen Sie die berüchtigten Studien, nach denen eine andere Farbe für eine Schaltfläche mehr Abschlüsse brachte. Wörtlich genommen führen solche Studien in die Irre, denn meist entscheidet nicht die Farbe, sondern der Kontrast.

Eine große Schaltfläche in voller Breite, die sich stark vom Hintergrund abhebt, ist leicht zu finden. Ist die Schaltfläche so breit wie die Felder, sieht man sofort, wo sie ist.

Manche Formulare bieten neben „Weiter“ oder „Absenden“ eine Schaltfläche an, die alle Felder leert. Das Risiko, versehentlich alle Eingaben zu löschen, wiegt schwerer als der kleine Komfort, neu anfangen zu können. Die meisten Nutzer*innen wissen ohnehin, dass sie dafür die Seite neu laden oder ihre Eingaben überschreiben können. Verzichten Sie deshalb auf Abbruch- oder Reset-Schaltflächen.

Fragen Sie zum Beispiel nach Kreditkartendaten, dann in der Reihenfolge, in der sie auf der Karte stehen: Kreditkartennummer, Verfallsdatum, Sicherheitscode.

Müssen Ihre Nutzer*innen vielen komplizierten Haftungsausschlüssen zustimmen, bündeln Sie diese an möglichst wenigen Stellen. Halten Sie juristische Hinweise so knapp wie möglich.

Fragen Sie, bevor Sie jemanden in Ihre Mailingliste aufnehmen. Eine automatische Aufnahme täuscht die Nutzer*innen und wirkt manipulativ, und die meisten müssen sich dann mit einem zusätzlichen Klick wieder abmelden. Außerdem verstößt sie gegen die DS-GVO.

Wer Ihr Formular ausfüllt, fragt sich vielleicht: Wie lange muss ich warten? Muss ich etwas vorbereiten? Was passiert jetzt? Leiten Sie Nutzer*innen deshalb am besten auf eine Seite weiter, die klar sagt, was als Nächstes geschieht und was sie erwarten können.

Deaktivieren Sie die Schaltfläche „Senden“, sobald sie geklickt wurde. Das verhindert, dass ein Formular doppelt ankommt, und zeigt Nutzer*innen zugleich, dass das Absenden geklappt hat.

Ihr Call-to-Action und die Landingpage insgesamt sollten klar sagen, was Nutzer*innen erwartet, sobald sie Ihr Formular ausgefüllt haben.

Nutzen Sie die eingebauten Funktionen des mobilen Geräts wie Kamera, Standortbestimmung oder Datumsauswahl, um Aufgaben zu vereinfachen.

Eine Fingerkuppe ist bei Erwachsenen im Schnitt etwa 10 mm breit, im Web entspricht das etwa 48 Pixeln. Werden Ihre Formulare auf mobilen Geräten genutzt, machen Sie Ihre Felder deshalb mindestens 48 Pixel hoch.

Kleinere Schrift ist auf dem Smartphone mühsam zu lesen. Gestalten Sie Formulare für ältere Nutzer*innen, gilt das erst recht.

Ist Ihnen schon aufgefallen, dass ein Smartphone je nach Frage eine andere Tastatur zeigt, mal mit einer Taste „.com“, mal mit einer Datumsauswahl? Dahinter stecken die HTML-Eingabetypen. Wählen Sie für jedes Feld den passenden Typ, dann erscheint die richtige Tastatur. Gerade für mobile Formulare ist das sehr nützlich. Für die Formulargestaltung sind acht Eingabetypen wichtig:

• input type="text" zeigt die normale Tastatur des mobilen Geräts.
• input type="email" zeigt die normale Tastatur plus „@“ und „.com“.
• input type="tel" zeigt den Ziffernblock 0 bis 9.
• input type="number" zeigt eine Tastatur mit Zahlen und Symbolen.
• input type="password" verbirgt die Zeichen bei der Eingabe.
• input type="date" zeigt die Datumsauswahl des Smartphones.
• input type="datetime-local" zeigt die Datums- und Zeitauswahl des Smartphones.
• input type="month" zeigt die Monats- und Jahresauswahl des Smartphones.

Webdesign | Tools & Ressourcen

Hier finden Sie Werkzeuge für die Entwicklung von Websites, etwa Tutorials auf Codrops und Codepen. Für HTML gibt es einen Validator, ein Cheatsheet und eine Referenz der Elemente und ihrer Eigenschaften […]

100 Tipps für eine bessere User Experience

User Experience Design soll Nutzer*innen zufriedenstellen. Dafür macht es Websites leichter bedienbar, zugänglicher und effizienter im Gebrauch […]