10 Tipps für Webformulare

1. Die richtige Vorbereitung

Welchem Zweck dient das Formular? Hierbei muss man ganz klar zwischen zwei verschiedenen Arten von Formularen unterscheiden: Dem freien Formular und dem eingeschränkten Formular.

• Ein «freies» Formular hat nur einen Zweck: Der Nutzer kann damit seine Rückmeldungen oder Fragen an den Webredaktoren senden. So fliesst die Sicht des Users ein. Das freie Formular ist ein einfaches Instrument, um die Nutzerfreundlichkeit der Webseite zu steigern. Ein «freies» Formular hat dementsprechend wenige Felder, mit denen sehr breite Antworten geliefert werden können. Die Formularfelder sollten idealerweise weder technisch, noch formell für Benutzer eingeschränkt sein.
  Beispielformular: Name / E-Mail / Mitteilung
• Ein «eingeschränktes» Formular gilt der Sammlung von Informationen, die für eine Weiterverarbeitung benötigt werden. So auch bei Anmeldeformularen für Kurse. Diese enthalten viele sehr spezifische Felder. Und die Felder sind meistens eingeschränkt, beispielsweise darf in einem Feld «Anzahl Teilnehmer» nur eine Zahl stehen.
  Beispielfomular: Name / E-Mail / Strasse / Ort, PLZ / Anzahl Teilnehmer / Kursauswahl (Eine Auswahlbox mit verschiedenen Kursen)

Was macht das für einen Unterschied? Ganz klar: die Motivation, das Formular auszufüllen, ist eine andere. Wenn eine Meinung gefragt ist, dann möchte man diese im Normalfall nicht mit Unterschrift, Geburtsdatum und Geschäftsbedingungen quittieren. Wenn das Formular für einen bestimmten Zweck ausgefüllt werden muss, dann erwartet der Benutzer hingegen eine Führung durch die Anmeldeschritte. Wird ein nicht zweckdienliches Formular verwendet, führt das zu Frust beim Benutzer und er füllt das Formular nicht aus.

2. Den Benutzer nicht mit Informationen überfordern

Auch wenn es verlocken mag, den Benutzer nach Geburtsdatum, Geschlecht, sozialem Umfeld, Hobbys oder ähnlichem zu Fragen, lassen Sie es sein, wenn es nicht unbedingt nötig ist.

• So wenig persönliche Informationen wie möglich abfragen.
• Formularfelder nur zu Pflichtfeldern machen, wenn dringend nötig.
• Wenn persönliche Informationen abgefragt werden, diese nicht einschränken. Beispielsweise ein Auswahlfeld für Hobby, in welchem nur «Autos» und «Motorräder» auswählbar sind.
• Keine überlangen Introtexte zu einzelnen Formularfeldern, um zu erklären, für was das Formularfeld ist.

3. Formularfelder sollten selbsterklärend sein

In den meisten Fällen wissen die Benutzer bereits, weshalb sie das Formular ausfüllen. Nichtsdestotrotz sollten verwirrende freistehende Felder wie «Anzahl» nicht einfach so platziert werden. «Anzahl wovon?», fragt sich dann der Benutzer.

• Den Formularfeldern selbsterklärende Namen geben.
• Keine Introtexte verwenden. Und wenn, dann nur sehr kurze.

4. Die korrekten Formularfeld-Typen wählen

Auch wenn man das Lesen der AGB mit einem normalen Texteingabefeld bestätigen kann, ist es mit einer Checkbox einfacher. Das sind die verschiedenen Typen von Formularfeldern:

• Auswahlfeld: Bei einer vordefinierten Liste, in welcher eine oder mehrere Optionen ausgewählt werden sollen, ist die Auswahlbox ideal.
• Checkbox: Für Fragen, die man mit JA/NEIN beantworten kann.
• Einfaches Textfeld: Wenn eine Texteingabe kurz und prägnant sein soll, dann dieses Feld wählen.
• Grosses Textfeld: Für freie Eingaben wie «Bemerkung» geeignet.
• Radiobuttons: Wie eine Checkbox, allerdings kann hier in einem Block von Radiobuttons immer nur eine Antwort ausgewählt werden.
• Upload-Feld: Wenn zum Beispiel ein Lebenslauf oder ein Video beigelegt werden soll.

5. Verbundene Felder

Was sind verbundene Felder? Ein Beispiel hierfür ist das Feld «Kundenart», bei welchem man «Privatkunde» oder «Geschäftskunde» auswählen kann. Diese Antwort entscheidet über die weiteren Formularfelder. Denn je nach Kundenart sollen ganz unterschiedliche Informationen eingeholt werden. Die weiteren Felder kommen also erst nach dem Beantworten dieser Frage zum Vorschein. Wählt ein Nutzer «Geschäftskunde», dann bleiben die spezifischen Felder für die Privatkunden versteckt. Diese Felder sollten nur sehr spärlich verwendet werden. Ein verbundenes Feld ist in Ordnung, zwei machen das Formular meist bereits zu kompliziert.

6. Formularfelder korrekt einschränken und überprüfen

Es ist wichtig, die Eingaben der Benutzer einzuschränken. Ansonsten kann schnell ein Informationschaos herrschen. Im Gegenzug jedoch wollen die Benutzer nicht zu sehr eingeschränkt werden. Es braucht eine gute Balance.

• E-Mail-Felder immer darauf überprüfen, ob es wirklich eine gültige E-Mail-Adresse ist. So merkt der Benutzer sofort, wenn er sich vertippt. Und die korrekte Mail-Adresse ist wichtig, denn sie wird oftmals benötigt, um eine Bestätigungsnachricht zu schicken.
• Grosse Textfelder auf bestimmte Zeichenanzahl beschränken. Denn in den meisten Fällen will man nicht den Benutzer dazu verleiten, seine ganzen Bedürfnisse im Bemerkung-Feld niederzuschreiben, sondern gut überlegte Antworten im Formular kurz einzugeben.
• Felder als Pflichtfelder markieren, die dringend benötigt werden. Das Bemerkung-Feld hingegen muss nicht immer ausgefüllt werden, sollte also kein Pflichtfeld sein.
• Keine Einschränkung, wo es keinen Sinn macht. Ein Namen-Feld sollte also nicht auf zehn Zeichen eingeschränkt sein. Auch bei PLZ-Feldern ist bei der Einschränkung Vorsicht geboten. Denn je nach Land sind Postleitzahlen unterschiedlich lang.

7. Absenden-Button und AGBs gut sichtbar platzieren

Wenn Benutzer AGBs bestätigen müssen, sollten diese auf jeden Fall in der Nähe der Checkbox gut sichtbar verlinkt sein. Zudem benötigt jedes Formular einen Button, mit welchem der Benutzer die Daten absenden kann. Dieser sollte ebenfalls gut sicht- und klickbar sein.

8. Die Eingabe des Benutzers bestätigen

Hat der Benutzer das Formular abgeschickt, erhält er idealerweise eine Bestätigungsmail. Diese sollte die ausgefüllten Felder nochmals aufführen. Somit können Benutzer bei Bedarf die E-Mail als Bestätigung vorweisen und sind abgesichert.

9. Wenn möglich immer dasselbe Formular verwenden

Auf einer Kurs-Anmeldeplattform kann es verlockend sein, unterschiedliche Informationen für unterschiedliche Kurse abzufragen. Das hat allerdings zwei Nachteile:

• Der Benutzer muss sich jedes Mal neu eindenken. Kennt er ein Formular bereits, kann er es beim zweiten Mal schneller und besser ausfüllen.
• Bei jeder Änderung, die für mehrere Formulare gilt, muss das jeweils auch für alle Formulare einzeln nachgeführt werden. Beispielsweise eine Auftrennung des Felds «Name» auf «Vorname» und «Nachname».

10. Die Vorteile von vorhandenen Systemen nutzen

Moderne Webseiten sind meistens mit einem CMS (Content-Management-System) aufgebaut. Diese Systeme haben im Normalfall bereits vorgefertigte Formularfunktionen eingebaut.

• Das CMS TYPO3, welches bei vielen Enterprise-Websites Anwendung findet, hat in der Version 8 ein sehr benutzerfreundliches Modul namens «Forms», mit welchem sich schnell Formulare erstellen lassen. Für Profis im TYPO3 – Bereich gibt es noch die Erweiterung «Powermail», welche mit ihrer grossen Anzahl an Möglichkeiten praktisch alle Bedürfnisse eines Benutzers und Webseiten-Betreibers abdecken kann.
• Für die Anmeldung bei einem Newsletter bietet sich beispielsweise Mailchimp an, ein weit verbreiteter Newsletter-Service. Mailchimp bietet vordefinierte und schöne Formulare mit minimalem Aufwand beim Einrichten an. Diese Formulare können Nahtlos mit bekannten CMS wie TYPO3 verbunden werden.

‍