Wie man Webformulare richtig macht

Die grundlegendsten Elemente des Formular-Designs sind die Bezeichnungen und Arten von Feldern, die du verwendest, zusammen mit der Art und Weise, wie du diese auf der Seite anordnest und wie du den Nutzern Feedback gibst. Schauen wir uns diese Faktoren genauer an.

Klare und prägnante Formularbezeichnungen

Eine Formularbeschriftung sollte so kurz wie möglich sein und genau beschreiben, was vom Benutzer erwartet wird. Stefanie Braun rät: „Beschriftungen sollten auf den ersten Blick erklären, welche Informationen benötigt werden. Wenn Fachbegriffe unvermeidbar sind, füge immer einen erklärenden Text hinzu.“

Beachte, dass Beschriftungen selbst nicht als Erklär- oder Hilfetexte dienen. Sie sollten immer kurz und prägnant sein und nur ein oder zwei Wörter enthalten, damit das Formular schnell verstanden wird.

Genauso sollten Buttons mit einer Handlungsaufforderung klar sein. Vermeide unklare Aufforderungen wie „Absenden“ oder „Anfordern“. Die Beschriftung eines Buttons sollte immer erklären, was der Button macht oder was die Nutzer erreichen, wenn sie das Formular ausfüllen. Eine Möglichkeit, die Aktion zu beschreiben, ist, den Satz mit „Ich möchte …“ zu beginnen. Wenn Nutzer zum Beispiel ein Kundenkonto erstellen wollen, könnte die Handlungsaufforderung lauten: „Mein Kundenkonto erstellen“.

Genauso wie deine Beschriftungen klar sein sollten, sollten auch deine Eingabefelder klar sein. Kreative oder innovative Ideen beim Design von Eingabefeldern können zu einer schlechten Benutzererfahrung führen, wenn die Benutzer nicht mehr wissen oder verstehen, dass sie mit dem Feld interagieren können. Deshalb sollten Eingabefelder als solche erkennbar sein und so aussehen, wie die Benutzer es erwarten.

Du solltest auch immer das aktive Eingabefeld markieren. Das erste Feld eines Formulars sollte automatisch markiert werden, wenn jemand das Formular ausfüllen will. Das zeigt nicht nur, wo man anfangen soll, sondern spart auch Tipp- oder Klickarbeit. Das markierte Feld sollte optisch hervorgehoben sein, damit man sofort sieht, wo man ist.

Die meisten Leute überfliegen eine Website, anstatt sie zu lesen. Das gilt auch fürs Ausfüllen von Formularen. Deshalb sollten Formulare so einfach wie möglich aufgebaut sein. So lassen sie sich schneller ausfüllen.

Hier sind die wichtigsten Tipps für die Anordnung der Felder:

1. Ordne die Eingabefelder im Formular immer von einfach nach schwierig. Frag komplexe oder persönliche Fragen erst am Ende. Wenn Nutzer gleich am Anfang auf eine Frage stoßen, die sie nicht beantworten können (z. B. weil sie ihre Kreditkartendaten nicht haben), brechen sie den Vorgang eher ab, als wenn sie die Frage später beantworten müssen, weil sie schon Zeit investiert haben und das Gefühl haben, das Formular ausfüllen zu müssen.
2. Frag nur relevante Infos ab und minimier die Anzahl der zugehörigen Eingabefelder, indem du sie entweder in semantische Gruppen strukturierst, in mehrere Schritte aufteilst (mehrstufiges Formular) oder nach und nach weitere Eingabefelder einblendest.
3. Einspaltenformulare sind aus kognitiver Sicht einfacher zu verarbeiten, da mehrere Spalten den vertikalen Fluss der Abwärtsbewegung des Formulars unterbrechen. Bei mehreren Spalten springt der Blick hin und her, was den Prozess und die Wahrnehmung erheblich verlangsamt. Ausnahmen bilden hier kurze und logisch zusammenhängende Eingabefelder wie Stadt, Bundesland und Postleitzahl oder Datum und Uhrzeit, die in derselben Zeile angezeigt werden können.
    

Strukturier ein kompliziertes Formular nach semantischen Gruppen. Das Gestaltungsprinzip der Nähe besagt, dass zusammengehörige Elemente nah beieinander platziert werden sollten. Vor allem komplexere Formulare sollten eine visuelle Trennung oder Überschriften haben, die Eingabefelder in sinnvolle Gruppen aufteilen.

Feedback-Mechanismen sind wichtig, damit Nutzer deine Formulare erfolgreich ausfüllen können. Das heißt, du musst den Nutzern zeigen, wenn alles gut geklappt hat und wenn es Probleme gibt. Mehrstufige Formulare sind eine aufwändigere Möglichkeit, Feedback zu geben.

Hier sind ein paar wichtige Grundsätze, die du beachten solltest:

1. Benutzer über den Erfolg informieren. Es reicht nicht aus, das Formular einfach zu senden und die Ansicht bei Bedarf neu zu laden. Es ist wichtig, dass Benutzer darüber informiert werden, dass sie das Formular erfolgreich ausgefüllt haben. Die Benachrichtigung kann durch ein einfaches Häkchen erfolgen. Noch besser ist eine Meldung, die zusätzliche Informationen enthält. Zum Beispiel, wann Benutzer mit einer Antwort auf eine Kontaktanfrage rechnen können.
2. Schaltflächen nach dem Absenden deaktivieren. Die Bearbeitung eines Formulars dauert in der Regel einige Zeit. Es ist wichtig, nicht nur nach Abschluss der Aktion Feedback zu geben, sondern auch nach dem Klicken auf eine Schaltfläche. Durch das Deaktivieren der Schaltfläche wird nicht nur eine versehentliche erneute Übermittlung verhindert, sondern der Nutzer auch darüber informiert, dass das System seine Eingabe erhalten hat.
3. Echtzeit-Feedback zu Schaltflächen für den nächsten Schritt. Die Schaltfläche für den nächsten Schritt sollte erst aktiviert werden, wenn der Nutzer alle erforderlichen Eingabefelder im aktuellen Schritt ausgefüllt hat. Durch die visuelle Aktivierung der Schaltfläche kann sich der Nutzer zum richtigen Zeitpunkt auf die richtige Stelle konzentrieren. Es ist wichtig, dass der Unterschied zwischen deaktiviertem und aktiviertem Zustand klar erkennbar ist.
4. Fehlermeldungen. Ein digitales Produkt sollte immer so gestaltet und entwickelt werden, dass es fehlerfreundlich ist. Durchdachte Fehlermeldungen können den Nutzer durch das Formular führen und so zu einer besseren Nutzerinteraktion und höheren Konversionsraten beitragen. Mehr Infos zum Umgang mit Fehlern findest du in unserem Artikel über Best Practices und Usability für Fehlermeldungen und Feedback-Systeme.
5. Mehrstufige Formulare sollten einen deutlichen Fortschrittsindikator verwenden. Bei mehrstufigen Formularen sollten die Nutzer immer klar darüber informiert werden, wie viele Schritte das Formular insgesamt umfasst, in welchem Schritt sie sich gerade befinden, welche Schritte noch vor ihnen liegen und welche Schritte bereits abgeschlossen sind. Insbesondere bei komplexeren Formularen kann die Ungewissheit über den Status des Prozesses dazu führen, dass Nutzer den Prozess vorzeitig abbrechen.

Wenn du die Grundlagen verstanden hast, gibt es noch ein paar zusätzliche Techniken zum Formular-Design, mit denen du deine Designs noch effektiver gestalten kannst. In diesem Abschnitt gehen wir auf einige davon ein, darunter die Verwendung von Eingabemasken, Hinweistexten, die richtige Größe und Anordnung von Feldern sowie die richtige Verwendung von Dropdown-Elementen.

Die Verwendung von Eingabemasken im Formular-Design

Eingabemasken sind ein mächtiges Werkzeug im Formular-Design, das den Benutzern hilft, Daten im richtigen Format einzugeben.

Eingabemasken sind nicht nur Platzhalter, sondern formatieren die vom Benutzer eingegebenen Daten so, wie es dein Backend-System erfordert. Bei der Eingabe einer Telefonnummer werden beispielsweise automatisch Klammern, Leerzeichen und Bindestriche im Eingabefeld angezeigt. Maskierte Eingaben verhindern nicht nur Fehler durch falsche Formatierung, sondern erleichtern den Benutzern auch die Überprüfung der eingegebenen Daten.

Beachte jedoch, dass die erforderlichen Formate je nach Land und Region unterschiedlich sein können.

Hinweistexte können Klarheit schaffen, Fehler vermeiden und dem Benutzer helfen, Infos richtig einzugeben. Ein Hinweistext sollte, genau wie die Beschriftung, in der Nähe des entsprechenden Eingabefeldes stehen. Dieser Text erklärt bestimmte Begriffe oder warum bestimmte Infos gebraucht werden. Außerdem kann die erwartete Formatierung für ein Eingabefeld angezeigt oder genauer erklärt werden.

Platzhalter sollten nie anstelle von Beschriftungen oder Hinweisen verwendet werden, weil sonst der Kontext für den Benutzer beim Ausfüllen des Eingabefeldes verloren geht. Platzhalter können manchmal hilfreich sein, um weitere Erklärungen oder Hinweise zu geben. Diese zusätzliche Hilfe verschwindet aber, sobald die Daten eingegeben werden. Wenn der Nutzer den Hinweis während der Eingabe vergisst, muss er den Eintrag löschen, um die Info wieder zu sehen. Die Nielsen Norman Group erklärt das genauer in ihrem Artikel „Placeholders in Form Fields Are Harmful„ (Platzhalter in Formularfeldern sind schädlich).

Die Größe und Anordnung der Felder sind super wichtig beim Design von Formularen. Das Prinzip der Nähe besagt, dass ähnliche Elemente nah beieinander platziert werden sollten. In diesem Artikel der Nielsen Norman Group über Formular-Design und Leerraum wird erklärt, dass das Auge leichter erkennen kann, welche Beschriftung zu welchem Eingabefeld gehört, wenn die Beschriftung nah am entsprechenden Feld steht.

Die Beschriftung sollte immer außerhalb eines Eingabefeldes stehen, damit die Benutzer beim Ausfüllen eines Eingabefeldes den Kontext nicht verlieren. Bei mobilen und kleineren Formularen sollte die Beschriftung über dem Eingabefeld stehen, bei langen Desktop-Formularen neben dem Eingabefeld.

Schließlich sollte die Größe der Eingabefelder dem erwarteten Inhalt entsprechen. Während ein Eingabefeld für eine E-Mail-Adresse beispielsweise 40 Zeichen enthalten kann, sind für eine Postleitzahl nur fünf Zeichen erforderlich. Nutzer nehmen die Größe eines Eingabefeldes als Hinweis auf die Menge des erforderlichen Textes wahr.

Auch wenn es vielleicht logisch erscheint, Daten in kleinere Eingabefelder aufzuteilen, um die Eingabe zu vereinfachen, kann das die Nutzer verlangsamen. Eingabefelder wie Name, Telefonnummer oder Geburtsdatum sollten nicht in mehrere Eingabefelder aufgeteilt werden. Durch die Unterteilung müssen die Nutzer mehrmals tippen oder klicken, um zum nächsten Feld zu gelangen, und es kann auch eine genauere Überprüfung nötig sein, was sich negativ auf den Formularprozess auswirken kann. Besser ist es, die Formatierungsrichtlinien mit Platzhaltern, Hilfetexten oder Masken anzuzeigen.

Für mobile Nutzer sollten passende Tastaturen zur Verfügung stehen oder die Eingabefelder mit dem richtigen Eingabetyp versehen sein. So müssen sie keine zusätzlichen Schritte machen. Zeig zum Beispiel die Zifferntastatur für Telefonnummernfelder an.

Dropdown-Elemente können in bestimmten Situationen nützlich sein, zum Beispiel wenn die Nutzer nicht alle verfügbaren Optionen kennen. Du solltest Dropdown-Elemente aber möglichst vermeiden. Ein Dropdown-Menü versteckt die Auswahlmöglichkeiten und erfordert zwei Klicks, um die gewünschte Option auszuwählen. Verwende ein Dropdown-Element nur, wenn die Auswahl mehr als fünf Optionen umfasst oder wenn der Platz zu begrenzt ist, und füge eine Suchoption hinzu, wenn die Auswahl deutlich mehr als 20 Elemente umfasst. Andernfalls stelle die Optionen als Radiobuttons oder Kontrollkästchen bereit, sodass nur ein einziger Fingertipp oder Klick erforderlich ist.

Beim Design von Formularen für Handys muss man ein paar Dinge beachten. Nutzer interagieren mit Handys anders als mit Computern, vor allem wegen der Touchscreen-Bedienung und dem kleineren Bildschirm. Deshalb muss das Formular-Design diesen Einschränkungen gerecht werden, damit die Nutzer sich wohlfühlen.

Überlegungen zum responsiven Design

Responsives Design ist in der heutigen Zeit mit unterschiedlichen Bildschirmgrößen ein Muss. Ein Formular, das unter Berücksichtigung der Responsivität gestaltet wurde, passt sich an die Bildschirmgröße des Geräts an, auf dem es angezeigt wird. Das heißt, dass sich das Formular unabhängig davon, ob ein Benutzer von einem kleinen Smartphone, einem größeren Tablet oder einem Desktop-Computer darauf zugreift, perfekt an den Bildschirm anpasst.

Touch-freundliche Eingabefelder und Schaltflächen

Bei mobilen Geräten interagieren die Benutzer direkt mit dem Bildschirm. Daher müssen Eingabefelder und Schaltflächen groß genug sein, damit sie leicht angetippt werden können, ohne versehentlich das falsche Element auszuwählen. Der für die Berührung auszuwählende Bereich sollte mindestens 48 x 48 Pixel und für Klicks 46 x 46 Pixel betragen. Außerdem sollten Klick- und Berührungsbereiche einen Abstand von mindestens 8 Pixel voneinander haben.