11 Tipps für eine bessere User Experience von Formularen auf Websites

Ob Corporate Website, Landingpage einer Kampagne oder Online-Shop: Fast jeder online Auftritt enthält mindestens ein Formular. Denen wird oft nur wenig Beachtung in der Konzeption geschenkt – und das zu Unrecht. Wie ein Formular aufgebaut ist und welche Informationen dieses an welchen Stellen enthält, kann matchentscheidend für ein erfolgreiches Absenden und somit die Leadgenerierung sein. In diesem Blogpost findet ihr 11 Tipps, wie ihr die Formulare auf eurer Website optimieren und so die User Experience (UX) verbessern könnt.

Dem Formular einen Titel geben

Was für ein Formular füllt man überhaupt aus? Ist es eine Registrierung für einen Account oder doch nur ein Newsletter? Es ist wichtig, diese Fragen gar nicht entstehen zu lassen. Dies erreicht man relativ einfach, in dem man dem Formular einen eindeutigen Titel gibt. So sehen die User direkt, wofür sie ihre Daten angeben. Es kann für die User sehr mühsam sein, wenn man zuerst überhaupt herausfinden muss, worum es geht. Vor allem, wenn man direkt auf das Formular gelangt. Eine hohe Absprungrate kann dann die Folge sein, und dies wollen wir ja vermeiden. Zusätzlich kann auch ein kurzer Introtext hilfreich sein.

Nur relevante Daten abfragen

Es ist glaube ich allen klar, dass man bei einem Formular nicht die Namen der Geschwister oder die Lieblingsblume abgefragt werden. Ausser natürlich, es ist genau das Thema 😉. Grundsätzlich sollen nur die Daten abgefragt werden, die man auch tatsächlich benötigt. «Keep it simple» ist da das Motto, damit die User die Formulare so schnell und einfach wie möglich ausfüllen und absenden können.

Bei Newsletter-Anmeldeformularen genügen beispielsweise Vorname, Nachname und E-Mail. Andere Kontaktformulare benötigen evtl. etwas mehr Daten wie die Adresse. Der nächste Tipp hat auch direkt damit zu tun.

Pflichtfelder kennzeichnen

Die Daten, die für den weiteren Prozess in jedem Fall benötigt werden, sollten mit einem mit Sternchen * (Asterisk) gekennzeichnet sei. Dies hat sich als Symbol für Pflichtfelder etabliert. Somit ist für die User auch klar erkennbar, welche Felder Pflicht sind und welche freiwillig ausgefüllt werden können. Was wiederum Zeit spart für die User. Es ist dennoch wichtig, einen kurzen Hinweis zu machen, dass es sich bei den Feldern mit einem * um Pflichtfelder handeln.

Best Practice und Erwartungen beachten

Bei Formularen muss man das Rad nicht neu erfinden. Es ist kein spezielles Design-Element, sondern ist Conversion-basiert. Da der Mensch ein Gewohnheitstier ist, sind diese Gewohnheiten auch zu beachten. Und ein weiteres Sprichwort «Zeit ist Geld» kommt hier auch zum Zuge. Wenn das Formular zu kompliziert aufgebaut ist und die User sich zuerst damit zurechtfinden müssen, können sie wieder abspringen.

Es sind also die Erwartungen der User zu berücksichtigen. Beispielsweise sollte nicht mit der Abfrage der Adresse begonnen werden, sondern standardmässig mit Anrede, Vorname und Nachname.

Klare Bezeichnungen

Wie viele Papier-Formulare ich schon so ausgefüllt habe mit «Name: Tanja», «Vorname: Ta.» und dann genervt alles wieder durchgestrichen habe.  Online ist das Korrigieren zwar einfacher, aber benötigt auch Zeit. Es sind also klare Bezeichnungen zu wählen, damit solche Verwirrungen gar nicht entstehen. Eindeutige Bezeichnungen wie bspw. «Vorname» und «Nachname»/ «Familienname» sind daher wichtig. Hier sind dann auch kulturelle Gegebenheiten oder Branchen-Eigenheiten zu berücksichtigen.

Bezeichnungen ausserhalb der Felder platzieren

Dieser Tipp knüpft an den vorherigen an. Einerseits sollen die Felder eindeutig beschriftet sein, andererseits sind diese Beschriftungen aber auch an der richtigen Stelle zu positionieren. Oft sind die Bezeichnungen oder Labels der Felder wie bspw. «Vorname» im Feld selbst drin. Wenn man dann in das Feld hinein klickt, verschwindet die Bezeichnung. Was genau musste man nochmals ausfüllen? Nur der Vorname oder der ganze Name? Das Herumklicken kann lästig sein, daher sind die Bezeichnungen ausserhalb der Felder zu positionieren.

Genaue Vorgaben geben

Da ist die Telefonnummer ein Klassiker. Muss man diese mit oder ohne Länderwahl eingeben? Und mit 0041 oder +41? Damit da keine Missverständnisse entstehen, sind genaue Formatvorlagen für die Felder vorzugeben. Dies kann man bspw. mit einem kleinen Informations-Text lösen oder auch als Fragezeichen mit Pop-up für weitere Hinweise. Die zweite Variante eignet sich vor allem, wenn es etwas ausführlichere Hinweise sind.

Direktes Feedback zu den einzelnen Felder

Gerade bei längeren Formularen zum Beispiel in einem Kaufprozess eines Online-Shops hilft es für die User Experience, die einzelnen Felder zu validieren. Die User erhalten dann bei jedem Feld direkt ein Feedback, ob die Angaben korrekt ausgefüllt wurden. Dies lässt sich ideal mit einem grünen Häkchen für «erfolgreich» und einem roten Kreuz für «Fehler bei der Eingabe» darstellen. Bei einem Fehler ist zudem auch zu vermerken, wo der Fehler liegt und was genau anzupassen ist.

Design an Website anpassen

Das Design des Formulars soll zudem an die Website angepasst werden. Ein Standard Formular ohne visuelle Verbindung zur Corporate Identity und des Designs der Website kann die User verwirren. Es kann der Eindruck entstehen, dass es sich um ein externes Formular handelt und die Daten an eine Drittpartei weitergeleitet werden. Auch aus Design und Kommunikations-Sicht sollten Farben, Schriften, etc. der Website aufgegriffen werden.

Mobile beachten

Wie bei allen online Auftritten ist natürlich auch bei Formularen die Ansicht auf Mobile zu berücksichtigen. Die Formulare sind idealerweise responsive zu gestalten und für mobile optimiert zu programmieren. Google indexiert Websites mit dem «mobile first» Ansatz. Ein für Mobile optimiertes Formular ist also auch für die Suchmaschinenoptimierung (SEO) von Vorteil.

Tracking für Formulare einrichten

Formulare wie Kontaktformulare oder auch Newsletter-Anmeldungen haben häufig den Zweck der Leadgenerierung. Diese Interaktion der User mit der Website ist sehr wertvoll. Da ist es interessant, wie die User auf die Landingpage gelangt sind, woher sie kommen und wer sie sind. Für die Formulare ist daher unbedingt ein Tracking zu hinterlegen. Man kann beispielsweise an abgesendetes Formular als eine Conversion tracken. Auch abgebrochene Formulare können getrackt werden. Dies ermöglicht es, Verbesserungen zu prüfen und Conversions zu optimieren.

Fazit

Die Tipps helfen sicher, die Formulare zu optimieren und so den einen oder anderen Lead mehr zu generieren.

Ausserdem ist auch bei der Programmierung zu beachten, dass die Formulare möglichst nutzerfreundlich aufgebaut sind. Bonus Tipp: Drauf achten, dass das Format der Eingabe stimmt und die Felder in der richtigen Reihenfolge durch Sprung mit dem Tab verlinkt sind. So wird bei der Eingabe direkt die Zahlen- oder eben Buchstaben-Tastatur angesprochen.

Jedoch sind – wie so oft – immer auch das Ziel der Seite sowie die Zielgruppe zu berücksichtigen. Die Formulare sollten auf die Bedürfnisse und Gewohnheiten der Zielgruppe abgestimmt sein.

Möchtet ihr eure Formulare und Conversions optimieren? Dann seid ihr bei uns an der richtigen Adresse. Kontaktiert uns doch gerne über unser sehr kurzes und nutzerfreundliches Kontaktformular 😉. Wir freuen uns auf eure unverbindliche Anfrage.