Benutzerfreundliche Websites (1): So optimiert ihr eure Web-Formulare

Im Online-Shop bestellen, über die Website Kontakt aufnehmen oder einen Newsletter abonnieren: Wer möchte, dass seine Besucher Daten eingeben und abschicken, muss seine Web-Formulare benutzerfreundlich gestalten. Wie das gelingt, lest ihr hier.

(Monitor / Pixabay-Lizenz)

Web-Formulare: 7 typische Bestandteile

1. Einzeilige Texteingabefelder (z. B. Name, Adressdaten) ↓

------

2. Mehrzeiliges Texteingabefeld (z. B. Kommentare, Anfragen) ↓

------

3. Passwort-Feld (maskierte Eingabe) ↓

------

4. Aufklappbare Auswahllisten (Dropdown-Menüs) ↓

------

5. Radio-Buttons (z. B. für die Auswahl des Geschlechts, hier Zalando) ↓

[Namensherkunft: Diese Online-Buttons erinnern funktional an Knöpfe alter Radiogeräte. Drückte man einen, rastete dieser ein, während der zuvor gedrückte Knopf ausrastete und somit deaktiviert wurde.]

------

6. Checkboxen (z. B. um die AGB zu bestätigen) ↓

------

7. Auswahlfelder, um Dateien hochzuladen ↓

Web-Formulare benutzerfreundlich gestalten

9 goldene Regeln:

1. Formulare so kurz wie möglich halten.

2. Keine unnötigen Daten abfragen.

3. Jedes Feld hinsichtlich des Mehrwerts für den User hinterfragen.

4. Formularfelder untereinander platzieren, nicht nebeneinander.

5. Zeilenlänge der Eingabefelder einheitlich gestalten.

6. Länge/Höhe der Felder so ausrichten, dass der User komplett sehen kann, was er eingegeben hat.

7. Dropdown-Menüs nur, wenn es mindestens vier Auswahlmöglichkeiten gibt.

8. Pflichtfelder als solche kennzeichnen (z. B. mit einem Sternchen-Symbol *).

9. Klar veranschaulichen, was der User eingeben muss: Soll er zum Beispiel ein Datum in das Feld eintippen, hilft der Formatierungshinweis "TT.MM.JJJJ".

Stichwort Mobiloptimierung: All diese Punkte gelten sowohl für die Eingabe am großen Bildschirm als auch auf dem Smartphone.

Echtzeit-Validierung: Hilfreich ist es, vom User eingegebene Daten direkt zu prüfen.

twitter.com: Beispiel Echtzeit-Validierung E-Mail-Adresse

Formular-Daten absenden: Der optimale Button

Funktional gibt es zwei Arten von Call-to-Action-Buttons (= klickbare Handlungsaufforderungen auf Webseiten):

• Primärfunktion: Der Klick auf den Button führt die vorrangig gewünschte User-Handlung aus (z. B. "Jetzt kaufen").
• Sekundärfunktion: Der Klick auf den Button führt eine zusätzlich angebotene, aber in der jeweiligen Situation nicht vorrangig gewünschte User-Handlung aus (z. B. "Abbrechen, "Felder leeren").  

Beste Position des Call-to-Action-Buttons für die Primärfunktion laut Fachliteratur: links und bündig zu den Eingabefeldern. Er sollte stets farblich hervorstechen.

Wenn möglich, solltet ihr Buttons mit Sekundärfunktionen vermeiden: Mitunter verwirren sie eher als dass sie helfen. Muss es dennoch einen Button für eine Sekundärfunktion geben, sollte er laut Fachliteratur stets rechts von dem Primärfunktions-Button erscheinen.

Bei bekannten Online-Shops begegnen euch jedoch auch die Varianten

• Primärfunktion oben, Sekundärfunktion unten
• sowie Sekundärfunktion links, Primärfunktion rechts. 

Es gilt jedoch immer: Der Button für die Primärfunktion ist farblich deutlich hervorgehoben.

otto.de: Die Primärfunktion ist farblich deutlich hervorgehoben.

amazon.de: Die Primärfunktion ist farblich deutlich hervorgehoben.

Beschriftet die Buttons eindeutig: Etwas wie "Ok" wirft Fragen auf, "Anfrage senden" oder "Kostenpflichtig bestellen" dagegen sind eindeutig.

Mehrseitige Web-Formulare

Hier ist die Conversion-Optimierung besonders herausfordernd: Der User soll mehrere Web-Formulare hintereinander ausfüllen und abschließend den Call-to-Action-Button klicken.

Hilfreich ist ein Fortschrittsbalken wie oben dargestellt (otto.de): Er führt den User und motiviert ihn, den ganzen Weg zu gehen.

Testet eure Web-Formulare

Was für den gesamten Usability- und User-Experience-Bereich ratsam ist, gilt auch für Web-Formulare: testen, testen, testen.

Empfehlenswerte Methoden: A/B-Tests, Befragungen und Eye-Tracking.

Im zweiten Teil schauen wir uns an, wie sich Fehlermeldungen auf Webseiten benutzerfreundlich gestalten lassen.

Link-Tipps:

• Benutzerfreundliche Websites (Teil 2): Fehlermeldungen hilfreich gestalten
• Benutzerfreundliche Websites (Teil 3): Aufklapp-Elemente optimal gestalten
• Benutzerfreundliche Websites (Teil 4/a): Diagramme optimal einsetzen
• Benutzerfreundliche Websites (Teil 4/b): Diagramme optimal einsetzen
• Benutzerfreundliche Websites (Teil 5): So optimiert ihr die Suchfunktion
• Usability & UX: Die Checkliste für benutzerfreundliche Online-Auftritte [Teil 1]
• Usability & UX: Die Checkliste für benutzerfreundliche Online-Auftritte [Teil 2]