Best Practice Website-Formulare: Design und Struktur

Besucher kommen auf eine Website mit einer dedizierten Absicht und einem bestimmten Ziel vor Augen. Sie beabsichtigen dieses so schnell und einfach wie möglich zu erreichen. Wenn Besucher dann zur Erreichung Ihres gewünschten Ziels ein Formular ausfüllen müssen, stellt dies objektiv betrachtet zunächst eine Barriere dar. Formulare sind jedoch nach wie vor eines der wichtigsten Interaktionselemente im Web und werden vielfach als letzter Schritt zur Zielerreichung angesehen.

Für das Design und die Konfiguration von Formularen ist es also essenziell, dass diese durch den Website-Besucher so einfach, schnell und problemlos wie nur möglich auszufüllen sein sollten.

Typischer Aufbau für Online-Formulare

Die meisten Online-Formulare beinhalten typischerweise die folgenden Elemente:

• Struktur: Dies meint den generellen Aufbau des Formulars. In welcher Reihenfolge und Positionierung sind die Eingabefelder angeordnet? Wie stehen diese in Relation zueinander? Welche Pflichtfelder werden verwendet? Wie wird das Formular auf der Website aussehen?
• Eingabefelder: Textfelder, Checkboxen, Radiobuttons, Auswahlmenüs, Passwort-Felder etc.
• Titel der Eingabefelder: Der Titel eines Feldes erklärt dem User, was genau in das jeweilige Feld einzugeben ist und warum sie diese ausfüllen.
• Abschluss-Button: Sobald der Nutzer den Button betätigt wird eine Aktion ausgeführt - in den meisten Fällen ist dies das Absenden der Formulardaten.
• Feedback: Nach dem Versenden des Formulars sollte der User ein Feedback erhalten - „erfolgreich versendet“ oder aber „folgende Felder enthalten Fehler“.

Zusätzliche Features können „Tool Tips“, kleine Hilfetexte zum Ausfüllen des Formulars, oder eine automatische Validierung der Angabe sowie die optische Visualisierung dessen sein.

Struktur und Design des Formulars

Ein Formular dient der Konversation mit dem User und sollte daher logisch aufgebaut und gut verständlich sein. Ein Formular erscheint auf den ersten Blick wie ein eher wenig komplexes Element, dass auf der Website eingesetzt wird. Allerdings gibt es zahlreiche Details, die es zu beachten gilt und Möglichkeiten zur Gestaltung und Strukturierung, die Sie anwenden können.

Bevor Sie sich mit den Details der Formulargestaltung befassen, prüfen Sie stets, ob Sie wirklich nur die nötigsten Informationen und Daten des Users abfragen. Letztlich gefährdet jede zusätzliche Abfrage die erfolgreiche Conversion.

Logische Gruppierungen von Informationsabfragen

Informationen, die miteinander im Zusammenhang stehen, sollten Sie in einen sinnvollen Block zusammenzufassen, da dies beim Ausfüllen einen gewissen „Flow“ entstehen lässt und dies der Struktur einer Konversation folgt. So kann man „Persönliche Informationen“ (Name, Vorname Geburtsdatum), „Kontoinformationen“ (E-Mail, Benutzername, Passwort) und „Kontakt“ (Adresse, Telefonnummer) in Abfrageblöcke gruppieren. Der Nutzer wird so unbewusst und intuitiv durch das Formular geführt und es fällt ihm zudem leichter nachzuvollziehen, welche Information gerade erfragt wird.

Einspaltiger Formularaufbau

In einigen Formularen werden mehrere Spalten nebeneinander verwendet, um das Formular im ganzen kürzer erscheinen zu lassen. Jedoch werden User durch mehrere Spalten oft verwirrt und nehmen das Formular als unstimmig wahr. Wenn zwei Spalten nebeneinander verwendet werden, wird der natürliche Fluss von oben nach unten unterbrochen, denn das Formular muss im Z-Schema gelesen werden. Versuchen Sie daher Ihr Formular in nur einer Spalte zu gestalten, damit der User eine unkomplizierte Bearbeitung von oben nach unten vornehmen kann.

Je weniger Felder, desto besser

Geringer Aufwand beim Ausfüllen des Formulars führt in der Regel auch zu einer verbesserten Conversion Rate. Demnach sollte jedes Eingabefeld kritisch bezüglich der Notwendigkeit hinterfragt werden - das gilt besonders, wenn sehr viele Informationen abgefragt werden. Nach Möglichkeit sollten je Formularschritt nicht mehr als sieben Felder abgefragt werden. Achten Sie also stets darauf dem Website-Besucher so wenig „Arbeit“ wie möglich zu machen, indem Sie alle nötigen Fragen und Informationen in so wenige Felder wie möglich zusammenzufassen. Dadurch erscheint das Formular übersichtlicher, der Nutzer kann es einfacher und schneller ausfüllen und so wird es schlussendlich häufiger versendet.

Sparsame Verwendung von optionalen Angaben

Auch im Hinblick auf die Anzahl der Felder sollten Sie optionale Felder nur dann einsetzen, wenn die verlangte Information einen echten Mehrwert bietet. Wenn Sie freiwillige Angaben abfragen, machen Sie kenntlich, dass es sich um freiwillige Angaben handelt. Es hat sich bewährt Pflichtfelder durch einen Sternchen (*) und eine erklärende Fußnote hervorzuheben und optionale Felder durch den Zusatz „optional“ zu kennzeichnen. So kann der Nutzer leicht erkennen, welche Formulareingaben freiwillig sind.

Eingabe vs. Vorgabe

Dropdown-Listen die Eingabemöglichkeiten vorgeben, führen sehr häufig zu Fehlern. Oft wird beispielsweise das Herkunftsland des Besuchers erfragt und im Formular wird dann eine Liste aller Länder angeboten. Sehr schnell kann es jedoch passieren, dass sich der Benutzer bei der Auswahl verklickt oder dass sie dieses Feld als schon ausgefüllt überfliegen und somit eine falsche Angabe übermitteln. Eine gute Möglichkeit stellt dagegen ein Automatismus dar: Das Formular schlägt automatisch das Land vor, nachdem der User seine Adresse angegeben hat.

Eingabemasken

Eingabemasken können helfen, die Daten im richtigen Format einzugeben. Beim Eingeben einer Telefonnummer wird dann die Vorwahl automatisch in Klammern gesetzt - sprich: Das Formular formatiert Daten selbstständig. Bei Seriennummern kann dann einfach die Ziffern- und Buchstabenfolge eingegeben werden und das Formular ergänzt selbstständig die korrekten Trennzeichen. Das erleichtert dem Benutzer die Eingabe und Flüchtigkeitsfehler können effektiver vermieden werden.

Bearbeitung mit der Tastatur und Fokussierung

Für Online-User die eine Bedienung am Desktop über die Tastatur bevorzugen und auch im Sinne einer barrierefreien Bearbeitung sollten Sie darauf achten, dass Ihr Formular „Tastatur-freundlich“ ist. Das Navigieren durch das Formular, der Wechsel zwischen den Eingabefeldern sowie die Eingabe selbst sollte problemlos über die Tastatur möglich sein, ohne eine Maus oder Trackpad zu verwenden.

Eine Fokussierung des Formularfelds, das aktuell ausgewählt und somit ausgefüllt wird, hilft dem Nutzer darüber hinaus - unabhängig davon, wie das Formular bedient wird - den Überblick zu behalten und direkt zu erkennen, welche Information aktuell gefragt ist. Das Eingabefeld kann farblich markiert, durch Zoom hervorgehoben oder durch ein anderes visuelles Signal besonders gekennzeichnet werden.

Formulare auf dem Mobilgerät

Die mobile Online-Nutzung nimmt weiter zu und Websites oder Webanwendungen müssen inklusive der implementierten Formulare deshalb ebenso mühelos mit einem Tablet oder auch Smartphone zu bedienen sein. Eine einfache aber sehr wirkungsvolle Hilfe, die Sie vermutlich aus eigener Erfahrung bestätigen können, ist je nach geforderter Eingabe die automatische Anzeige der passenden Tastatur. Handelt es sich um ein Formularfeld in das Zahlen eingegeben werden, beispielsweise eine Telefonnummer, dann wird automatisch die Zifferntastatur am Mobilgerät angezeigt, denn die Eingabe von Buchstaben wäre in dem Falle nicht von Nutzen. Bei Textfeldern wird dann die Buchstabentastatur angezeigt. Durch die automatische Anzeige und Umstellung ist ein schnelles Ausfüllen des Formulars möglich.

Auto-Vervollständigung

Aufgrund der steigenden Mobilnutzung gilt es bei der Formulargestaltung insgesamt darauf zu achten, nur dort händisches „Eintippen“ vorzusehen, wo dies notwendig ist. Dabei kann das Feature der Auto-Vervollständigung helfen. In dem Falle tippt der Besucher zum Beispiel nur die ersten Teile einer Adresse ein und bekommt dann mögliche Adressen zur Auto-Vervollständigung angeboten. Das wird Ihnen der mobile User danken, aber auch am Desktop hilft das Feature beim schnellen und einfachen Ausfüllen des Formulars. Zusätzlicher Vorteil: Durch das automatische Vervollständigen entstehen zudem weniger Eingabefehler.

Aussagekräftige Feldtitel

Der Titel eines Feldes gehört mit zu den primären Elementen des Formulars, die eine intuitive Bearbeitung des Formulars erlauben. Denn ein gut gewählter Titel für das Formularfeld, macht dem Nutzer den Zweck des Feldes klar verständlich, sodass die korrekten Daten eingegeben werden können, es bleibt auch während der Eingabe nützlich und vor allem auch nach Beendigung der Eingabe weiterhin sichtbar.

Die Ausrichtung der Feldtitel

Für die Ausrichtung der Titel bestehen drei Möglichkeiten:

• Neben dem Formularfeld, linksbündig
• Neben dem Formularfeld, rechtsbündig
• Oberhalb des Formularfeldes

Untersuchungen haben ergeben, dass Formulare im Schnitt am schnellsten ausgefüllt werden können, wenn die Titel sich oberhalb des Formularfelds befinden. Das Formular kann bei der Positionierung oberhalb durch den Nutzer am einfachsten bearbeitet werden und diese Ausrichtung bietet auch darüber hinaus Vorteile. Unterschiedlich große Formularfelder und auch verschieden lange Titel können auf den diversen Bildschirmgrößen problemlos angezeigt werden, speziell auf dem Mobiltelefon. Auch Übersetzungen der Feldtitel und damit weitere Variationen in der Länge können so leicht vorgenommen werden.

Bei linksbündig ausgerichteten Feldtiteln: Je kürzer der Titel ausfällt, umso weiter vom eigentlichen Formularfeld entfernt, sodass dies das Ausfüllen verlangsamt. Diese Leerräume machen diese Art der Anordnung auch für mobile Endgeräte ungeeignet, da sie auf horizontaler Ebene viel Platz beanspruchen.

Die rechtsbündige Ausrichtung positioniert den Titel unmittelbar links vor dem Feld, auf welches es sich bezieht. Dies lässt Bezeichnung und Feld verbunden erscheinen, da keinerlei Leerraum dazwischen besteht. Das funktioniert gut für kurze Formulare. Jedoch ist diese Art der Positionierung für längere Formulare schwierig, da sie für den User schwerer zu lesen sind, da kein einheitlicher linker Rand zur Orientierung besteht.

Länge der Feldtitel

Hier gilt ganz besonders die Devise „Keep it short and simple“. Verwenden Sie klare, kurze und passend beschreibende Feldbezeichnungen. Sind diese gut formuliert, helfen die kurzen Beschreibungen, dem Besucher dabei sich schnell einen Überblick des Formulars zu verschaffen, sodass die Orientierung beim eigentlichen Ausfüllen leichter fällt. Durch kurze und bündige Titel kann der Benutzer schnell erfassen, welche Daten verlangt sind und wird nicht durch lange Sätze aufgehalten. Wenn Sie eine E-Mail-Adresse verlangen genügt es „E-Mail“ als Label zu verwenden, anstatt beispielsweise zu fragen „Wie lautet Ihre E-Mail-Adresse?“.

Übersichtliche Formatierung

Ein beliebtes, aber nicht immer geeignetes Stilmittel, ist die ausschließliche Verwendung von Großbuchstaben. Dies mag auf den ersten Blick als gute Formatierung für die Formularfeldtitel erscheinen. Die fehlende Variation der Buchstabenhöhe erschwert dem Auge jedoch das Lesen. Der Besucher kann das Formular also weniger gut scannen als bei einer Formatierung in regulären Groß- und Kleinbuchstaben. Dass wiederum verlangsamt die Bearbeitung und führt somit dazu, dass das Ausfüllen des Formulars mehr Zeit in Anspruch nimmt.

Inline-Labels

Das Verwenden von sogenannten Inline-Labels, sprich einem Text, der innerhalb des Formularfeldes steht und dieses beschreibt, können sinnvoll Platz sparen. Beim Klick in das Feld und dem Beginn des Ausfüllens verschwindet die Bezeichnung und wird mit der Eingabe im Feld überschrieben. Besonders für sehr kurze Formulare kann dies sehr gut eingesetzt werden. Beim Erfragen einer E-Mail-Adresse oder anderen „kurzen“ Informationen können Inline-Labels verwendet werden. Wenn es sich jedoch um längere Formulare oder komplexere Informationsabfragen handelt, empfiehlt es sich auf Feldtitel-Positionierungen außerhalb des Formularfelds selbst zurückzugreifen. Auf diese Weise kann der Nutzer jederzeit nachvollziehen, was in einem Feld verlangt wurde und ob er die passende Information eingetragen hat.

Prüfen der Eingaben

Noch während des Ausfüllens sollten Sie die Besucher wissen lassen, ob die gemachten Eingaben gültig sind. Wenn eine Angabe in einem Formularfeld ungültig ist, sollte dies unmittelbar beim Ausfüllen des Feldes schon ersichtlich sein. Der Nutzer kann so direkt sehen, dass er die Daten prüfen muss. Diese “Echtzeit-Validierung“ informiert den User unverzüglich, sodass Fehler direkt korrigiert werden können. Dies empfiehlt sich besonders bei langen Formularen. Denn andernfalls nimmt der Besucher sich die Zeit alles auszufüllen, um dann erst beim Versuch, es zu versenden, festzustellen, dass Korrekturen vorgenommen werden müssen.

Sicherung von Eingaben

Häufig kommt es vor, dass während des Ausfüllens die Website neu geladen werden muss, weshalb es von Vorteil ist, wenn die schon eingetragenen Angaben des Users nicht verloren gehen. Solche Sicherungsmechanismen verhindern Frustration beim Besucher, der nun dank der noch vorhandenen Daten möglichst nahtlos mit der Komplettierung des Formulars fortfahren kann.

Formular-Buttons optisch abgrenzen

Eine Schaltfläche, ein Button, in einem Formular dient dazu eine bestimmte Aktion, nach dem vollständigen Ausfüllen auszulösen. In den allermeisten Fällen wird dies die Übermittlung der Daten sein. Wenn auf einer Formularseite mehrere Aktionen („Weiter“/„Abbruch“) möglich sind, sollten diese deutlich optisch voneinander abgegrenzt werden, sodass der Nutzer einfach die richtige sowie gewollte Aktion ausführen kann und sein gewünschtes Ziel erreicht.

Platzierung der Buttons

Die Position eines Buttons wird oft aus der Gewohnheit heraus mit einer Aktion assoziiert, ohne, dass der Website-Besucher das Label des Buttons gelesen hat. Daher sollten Sie bei der Erstellung des Formulars darauf achten, die Buttons an eine logische und bewährte Position zu setzen. Ein Button der eine bestätigende Aktion, wie „Senden“, „OK“ oder „Weiter“ ausführt, platzieren Sie üblicherweise rechts unten. Dort wird der User ihn auch erwarten und somit kann vermieden werden, dass eine falsche Aktion ausgelöst wird, die die Formularbearbeitung verzögern würde.

Titel der Formular-Buttons

Auch wenn bei einem einfachen Formular mit dem Button-Titel „Senden“ vermutlich klar ist, das bei Klick auf den Button, die Daten gesendet werden, empfiehlt es sich dennoch stets spezifischer zu formulieren. Wählen Sie anstatt dessen einen Titel, der genau das wiedergibt, was der Button auslösen wird: „Formular senden“, „Konto erstellen“ „Zum Newsletter anmelden“. Zudem ist so eine Kommunikation direkter und spricht den Nutzer, wenn auch im Detail, persönlich an.

Chat-Bots anstatt Formulare

Da Menschen immer mehr Zeit online verbringen und immer häufiger über verschiedenste Messenger-Dienste kommunizieren, legen sie größeren Wert darauf, dass auch Online-Formulare stärker einer Konversation ähneln. In diesem Zusammenhang können aktuell schon clevere Chat-Bots über ein Frage-Antwort-Algorithmus ein Formular ersetzen.

Formulare - Details entscheiden

Das Formular wird von den Online-Nutzern oftmals als notwendiges Übel empfunden, das aber natürlich in vielen Fällen benötigt wird und sinnvoll ist. Allgemein gilt es aber in jedem Fall die online verwendeten Formulare für den Nutzer so bequem und unkompliziert wie möglich zu gestalten. Die genannten Details für die einzelnen Formular-Komponenten sind hilfreich und eine nützliche Orientierung. Tiefere Erkenntnisse erzielen Sie zudem auch mit A/B-Test Ihrer Formulare. Manches mal kann es aber auch schon helfen, einfach eine Kollegin oder einen Kollegen zu fragen, ob er Ihr Formular einmal testet. Auch so erhalten Sie bereits wertvolles Feedback.

Viel Erfolg bei der Gestaltung Ihrer Formulare!