Auf fast jeder Website sind Formulare zu finden: Kontaktformulare, Anfrage-Formulare, Reklamations-Formulare, Login-Formulare, Registrierungs-Formulare… Formulare können äußerst praktisch für Besucher und für uns als Website-Betreiber sein. Sie können aber auch sehr frustrierend sein, wenn sie Nutzer überfordern.
Wozu ein Formular auf der Website?
Die meisten Website-Betreiber bieten ein Formular als bequeme Möglichkeit zur Kontaktaufnahme an. Wer nicht anrufen will, kann den digitalen Weg nutzen. Ein Formular ist hier eine bequeme Lösung, denn es gibt dem Nutzer klar vor, was er/sie eingeben kann. Es kann so einfach sein… wenn es intuitiv gestaltet ist.
Denn oft sehe ich auf Websites Formulare, die beim Nutzen Frust erzeugen. Diese negative Emotion kann dann schnell dazu führen, dass der Interessent das Ausfüllen abbricht (oder gar nicht erst anfängt). Füllt ein Interessent das Formular nicht aus, geht dir eine Anfrage verloren. Daher:
Beachte diese 10 Dos and Don’ts bei Formularen und Deine Nutzer werden sie mit Leichtigkeit ausfüllen können und dich dafür lieben.
1. Ein Formular soll als solches sofort begriffen werden können
Zunächst gilt natürlich der Grundsatz, dass das Formular als solches begriffen werden kann. Und es sollte auf den ersten Blick klar sein, wofür es gut ist. Was passiert, wenn ich das Formular ausgefüllt habe? Kaufe ich dann was? Stelle ich eine Anfrage? Bekomme ich eine Mail? Etc…
Beschreibe also kurz, wofür das Formular da ist und was danach passiert. So hat bein Besucher Klarheit darüber und muss nicht erst nachdenken.
2. So viel wie nötig, so wenig wie möglich
Nicht erst seit der DSGVO gilt der Grundsatz, unnötiges Datensammeln besser bleiben zu lassen. Wer gibt schon gerne Daten her, die für eine Anfrage gar nicht notwendig sind? Brauchst du wirklich die Telefonnummer, wenn du ein eBook verschickst?
Unnötige Abfragen blähen das Formular nur unnötig auf, es wird unübersichtlich, die Leichtigkeit geht verloren und der Frust steigt.
3. Keine Unklarheiten aufkommen lassen
Wenn du doch zwingend die Telefonnummer brauchst, obwohl es für den Nutzer unlogisch sein könnte, erkläre es mit einem kleinen Info-Text. Oder wenn du auf einem Reklamations-Formular eine Seriennummer benötigst, erkläre in einem kurzen Infotext, wo diese zu finden ist.
4. Pflichtfelder kennzeichnen
Kennzeichne die Felder, die du als Pflichtfelder definierst eindeutig, so dass Deine Nutzer bereits bei der Eingabe wissen, welche Felder ausgefüllt werden müssen und welche ausgefüllt werden können.
Und bitte bitte: Definiere nur die Felder als Pflichtfelder, die wirklich sein MÜSSEN. Auch hier gilt wieder: Nicht erst seit der DSGVO ein Thema: Datensparsamkeit.
Brauchst du wirklich die komplette Adresse bei einer ersten Kontaktaufnahme? Wenn ja, unbedingt, begründe es auch. Nicht nur aus rechtlichen Gründen, sondern auch, damit dein Interessent es versteht.
5. Beschriftungen
Gib jedem Feld eine eindeutige Beschriftung, was dort reingetippt werden soll. Platziere die Beschriftungen so, dass sie auch noch nach einer Eingabe sichtbar sind und nicht verschwinden. Denn deine Nutzer sollten immer nachvollziehen können, ob die eingegebene 0815 die Postleitzahl oder die Kundennummer ist.
6. Kontrast
Sorge dafür, dass nicht nur die Beschriftungen, sondern auch die Eingaben, die dein Website-Besucher gemacht hat, kontrastreich und gut lesbar sind.
Sprich: Der Text sollte zum Hintergrund einen hohen Kontrast aufweisen. (z.B. schwarzer Text auf weißem Grund). Das gilt übrigens nicht nur für Formulare, sondern für alle Texte, die jemand lesen soll. Das aber nur nebenbei…
7. Größe
Denke auch an die Barrierefreiheit Deiner Formulare und nutze ausreichend große Schriftgrößen. Sowohl für die Beschriftung, als auch für den Eingabe-Text. Dementsprechend ergibt sich auch die Größe bzw. Länge der Felder.
Die Länge der Eingabefelder sollte logisch und ausreichend sein. Lange Nachnamen oder Ortsnamen sollten problemlos und sichtbar eingetragen werden können. Wenn du unterschiedliche Feldlängen nutzt, sollte das logisch sein. Z.B. das Feld für eine Postleitzahl sollte kürzer sein, als das für den Ortsnamen.
8. Sinnvolle Reihenfolge
Viele Menschen bedienen Formulare mit der Tabulator-Taste, die den Cursor jeweils ins nächste Feld springen lässt. Achte daher unbedingt auf die logische Reihenfolge. Also, z.B. wenn du eine ganze Adresse abfrägst, wäre eine logische Reihenfolge: Vorname, Nachname, Straße, Hausnummer, PLZ, Wohnort. Das ist eine Reihenfolge, die jeder kennt und gewohnt ist.
9. Gib Feedback
Hast du Felder, die ein vorgegebenes Format erfüllen (z.B. für E-Mail-Adressen), gib deinen Nutzern direkt nach der Eingabe – also sobald sie zum nächsten Feld springen – eine Rückmeldung, ob die Daten im richtigen Format eingegeben wurden oder nicht.
Super nervig ist es, wenn das schon während des Eintippens passiert und super nervig ist das auch, wenn ich erst auf „Absenden“ klicken muss und dann erst die Prüfung durchläuft.
Sollten deine Nutzer nach dem Klick auf „Absenden“ vergessen haben, ein Pflichtfeld auszufüllen, weise mit einer kurzen Meldung darauf hin und kennzeichne, WO das vergessene Feld ist.
10. Nerviges Captcha
Du kennst diese tollen Captchas von Google, bei denen Du ein Bilderrätsel lösen musst, oder bei denen eine Matheaufgabe zu lösen ist. Das ist zwar gut, damit Du nicht so viel Spam bekommst, für Deine Nutzer ist es aber unglaublich nervig. Und viele dieser Captchas sind auch nicht barrierefrei. Installiere lieber einen Honey Pot und vermeide möglichst sichtbare Captchas.
11. Was passiert danach?
Was passiert nach Absenden des Formulars? Sag es deinen Nutzern vorher in kurzen Worten. Z.B. „Nach Absenden des Formulars melden wir uns innerhalb eines Werktages bei Ihnen“.
Nach Absenden des Formulars solltest du genau das auch nochmals als kurzen Bestätigungs-Text ausgeben (doppelt hält besser ;-)). Oftmals sehe ich Formulare, die nach Absenden einfach geleert werden und ich weiß nicht, ob das Formular jetzt gesendet wurde oder nicht und wie es jetzt weitergeht.
Pro-Tipp: Leite deine Nutzer nach Absenden auf eine eigens dafür angelegte „Danke“-Seite mit einer Bestätigung, dass alles geklappt hat und wie es nun weitergeht. Hier kannst du auch noch weitere interessante Infos oder Tipps aufnehmen oder ein Video, das dem Nutzer die Wartezeit so angenehm wie möglich machen soll oder weiteren Content von dir (Blog, Social Media Profile etc)
12. Feldtypen: Was für was? Sei fehlertolerant
Online-Formulare lassen viele Feldtypen zu: Einzeilige Textfelder, Buttons, Checkboxen, Mehrzeilige Textfelder, DropDowns usw… Gerade bei einzeiligen Textfeldern
Achte darauf, was für Nutzer logisch ist und was bereits bekannt.
So nutzt du die unterschiedlichen Feldtypen:
Einzeilige Textfelder: Namen, Straße, Wohnort, etc.
Mehrzeilige Textfelder: Infos, Anmerkungen, Nachrichten
Checkbox: Mehrfachauswahl möglich
Radio-Buttons: Nur 1 Auswahl möglich (bitte nutze maximal 7 Punkte)
Drop-Down: Meist nur 1 Auswahl möglich (Liste für z.B. Länderauswahl)
Dank HTML5 gibt es Feldtypen für E-Mail-Adressen, Telefonnummern, Kalenderdaten etc. Am Desktop-Rechner sehen diese meist aus wie ein einzeiliges Textfeld. Am Smartphone öffnet sich eine entsprechend angenehme Eingabe.
Machs aber nicht zu kompliziert und sei möglichst fehlertolerant.
13. Intelligente Felder
Gibst du z.B. mittels Dropdown-Feldern, Schiebereglern oder Zählern Antworten vor, sollten sie logisch und sinnvoll sein. Geht es z.B. um ein Geburtsdatum, mit dem sich Menschen über 18 identifizieren sollen, muss das aktuelle Jahr nicht aufgeführt sein. Und übrigens muss das Jahr 1900 auch nicht drin sein 😉
Denke für deine Nutzer vor. Auch z.B. ein Schieberegler für eine Wohnfläche muss nicht bei 0 anfangen, sondern du kannst einen mittleren Wert bereits voreinstellen. Und wenn die meisten deiner Kunden aus Deutschland sind, nimm nicht Afghanistan als ersten Treffer in die Länder-Auswahlliste (auch wenn es alphabetisch ganz vorne steht)
14. Denke auch an Smartphone-Nutzer
Schau Dir Deine Formulare immer auch auf mobilen Endgeräten an. ist alles logisch? Sind die Eingaben möglich? Ist das Formular übersichtlich und leicht zu bedienen?
