12.7    Formulare 

Eine Besonderheit der Interaktion der Anwender mit einer Webseite sind die Formulare. Das Suchfeld haben wir weiter oben ja schon besprochen. Darüber hinaus gibt es Kontaktformulare, Newsletter-Bestellformulare, Registrierungsformulare, Login-Formulare, Bestellformulare in Onlineshops etc. Sie alle haben eines gemeinsam: Der Anwender muss bestimmte Daten eingeben, sie abschicken (einen Button drücken), die Daten werden überprüft, und der Anwender bekommt eine Rückmeldung. Die Gestaltung der Formulare entscheidet hauptsächlich darüber, ob der Anwender überhaupt anfängt, Daten einzugeben, und – wenn ja – ob er die Aktion erfolgreich zu Ende bringen wird.

Der Anwender stellt eine Art »Kosten-Nutzen-Rechnung« auf. Er wägt ab, ob sich der Aufwand lohnt, das Formular auszufüllen. Er überprüft, wie groß der Nutzen ist, den er davon hat. Die Abbruchquoten während des Bestellvorgangs in Onlineshops zeigen, dass das Ausfüllen eines Formulars den Anwender so sehr frustrieren kann, dass er seinen Einkauf nicht zu Ende bringt. Das ist so, als ob Sie im Ladengeschäft schon an der Kasse stehen, und während die Verkäuferin Ihre Sachen einpackt und alle möglichen Daten abfragt, Sie doch lieber abbrechen und den Laden ohne Einkauf verlassen.

 

12.7.1    Die Komponenten eines Formulars 

Ein typisches Formular besteht aus folgenden Elementen: den Labels 1, das sind die Feldbezeichner der folgenden Eingabefelder 2, oft auch Inputfelder genannt. Label und Inputfeld gehören zusammen und sollten auch visuell als zusammengehörig wahrgenommen werden. In die Eingabefelder kann der Anwender Text schreiben. Bei Pflichtfeldern muss er etwas hineinschreiben, wenn es weitergehen soll. Eingabefelder können neben Textfeldern auch Checkboxen oder die sogenannten Radio-Boxen (nur eine darf ausgewählt sein) sein.

Abbildung 12.90    Das Registrierungsformular bei trello.com/signup mit den typischen Formularelementen

Dann gibt es Links 4, meistens in Form von Buttons, die eine Aktion ausführen – meistens das Absenden des Formulars (über den Submit-Button). Manchmal gibt es auch einen Reset-Button, der alle Eingaben wieder zurücksetzt. Umfangreiche Formulare werden auch gerne mal auf mehrere Seiten bzw. Schritte aufgeteilt, dann stehen Weiter- und Zurück-Buttons zur Verfügung.

Je nach Notwendigkeit stehen ergänzende Erklärungstexte bei einzelnen Feldern oder unter dem kompletten Formular. Diese helfen dem Anwender beim Ausfüllen, indem sie beispielsweise erklären, was genau in einzelne Felder geschrieben werden soll oder warum das Unternehmen bestimmte Daten braucht.

Nach der Ausführung einer Aktion (Klick eines Buttons) können Rückmeldungen 3 erfolgen (meistens Fehlermeldungen). Das können nicht oder falsch ausgefüllte Felder sein. Am Ende erfolgt die Überprüfung (Validation) der Daten – wenn diese erfolgreich ist, kann das Formular versandt werden.

Bei der Gestaltung des Formulars, also der Positionierung der einzelnen Elemente und deren Formatierung, geht es immer darum, ob und wie gut der Anwender das Formular ausfüllen kann. Je benutzerfreundlicher die Gestaltung ist, desto eher wird das Formular erfolgreich ausgefüllt. Und das ist ja im Sinne des Webseitenbetreibers.

 

12.7.2    Eingabefelder 

Je weniger der Anwender ausfüllen muss, umso besser. Zum einen wirkt ein umfangreiches Formular abschreckend (»Das soll ich alles ausfüllen?«). Und zum anderen sind Anwender sensibel, was die Preisgabe ihrer persönlichen Daten angeht. Bei Formularen sollte das Motto »So viel wie nötig, so wenig wie möglich« herrschen. Eine Newsletter-Bestellung bräuchte im Grunde nicht mehr als ein einziges Feld (für die E-Mail-Adresse). Label und dazugehöriges Inputfeld sollten nahe beieinanderstehen. Entweder steht das Label direkt oberhalb des Feldes oder links daneben – eine rechtsbündige Ausrichtung hat sich dabei als etwas besser erkennbar als eine linksbündige erwiesen. Das Label sollte markant und deutlich sein, meistens reicht schon ein fetter Schriftschnitt. Die Labels dienen nämlich auch als Sprunganker, wenn das Auge das Formular abscannt.

Abbildung 12.91    Die bahn.de zeigt sehr auffällig die Bedeutung von gut gestalteten Formularfeldern. Im oberen Screenshot sind die Eingabefelder klein und unauffällig. Seit dem Relaunch 2016 steht das Buchungsformular sprichwörtlich im Mittelpunkt. Und die Eingabefelder sind nun groß und gut zu bedienen.

Die Felder und der Eingabetext sollten groß genug sein, damit sie gut erkennbar sind. Ähnlich wie bei den Schriftgrößen für den Fließtext sind 14 bis 16 Pixel inzwischen fast Standard. Die Breiten der Eingabefelder sollten den erwarteten Eingaben entsprechen. Ein Straßenname braucht mehr Platz als eine Postleitzahl.

Abbildung 12.92    Klare, übersichtliche Anordnung der Labels und Eingabefelder bei dawanda.com

Pflichtfelder sollten als solche kenntlich gemacht sein. Meistens wird ein kleines Sternchen (*) hinter das Label gesetzt, und am Ende des Formulars steht (im Kleingedruckten) der Hinweis Pflichtfeld – bitte ausfüllen.

Die Reihenfolge macht’s. Überlegen Sie sich gut, in welcher Reihenfolge einzelne Felder erscheinen sollen. Fragen Sie persönliche und sehr aufwendige Daten besser erst am Ende ab. Je mehr er schon ausgefüllt hat, desto eher wird der Anwender auch bis zum Ende dabeibleiben. Beim Anfrageformular für eine Krankenversicherung etwa sollten Daten über Krankheiten, behandelnde Ärzte und Ähnliches erst zum Ende hin kommen. Werden diese Daten zuerst abgefragt, wird vermutlich kein Anwender weitermachen, weil solche Angaben eher unangenehm sind.

 

12.7.3    Rückmeldungen 

Dank clientseitiger Formularüberprüfungen mithilfe von JavaScript und AJAX lassen sich die Anwenderangaben direkt nach dem Ausfüllen ein erstes Mal überprüfen. Erfüllt die angegebene E-Mail-Adresse alle notwendigen Bedingungen (@-Zeichen etc.)? Ist das Alter mindestens 18 Jahre? Diese und andere Angaben lassen sich schon validieren, bevor der Anwender den Submit-Button drückt. Dadurch wird die Bedienbarkeit enorm verbessert, wenn zeitnah ein Feedback erfolgt und nicht erst dann, wenn der Anwender denkt, er sei eigentlich fertig (beim Absenden).

Abbildung 12.93    Bei twitter.com wird gleich das Passwort bewertet und die E-Mail-Adresse direkt validiert.

Es gibt sogar Formulare, die ein positives Feedback geben. Ein grünes Häkchen (1 und 2) etwa für eine richtige E-Mail-Adresse motiviert doch ganz anders, als wenn man immer nur Negatives liest (Falsche E-Mail-Adresse).

Abbildung 12.94    Gut gemacht: Bei outfittery.de bekommt man nicht nur die Fehlermeldung samt Hinweis direkt am richtigen Eingabefeld, auch richtige Eingaben werden optisch bestätigt.

 

12.7.4    Validierung 

Hat der Anwender alle (Pflicht)felder ausgefüllt und den Submit-Button gedrückt, erfolgt eine serverseitige Überprüfung (z. B. mittels PHP). JavaScript lässt sich vom Anwender im Browser ausschalten, daher sollte dies nur zur ersten Rückmeldung genutzt werden. Wurde alles zur Zufriedenheit ausgefüllt, folgt ein kurzer Dank. Wurden Felder noch nicht korrekt ausgefüllt, erscheint eine Fehlermeldung. Schlecht ist es, wenn diese sich auf einer neuen Seite öffnet und der Anwender per Browser-Zurück-Button wieder zum Formular muss. Und aus Usability-Sicht Selbstmord ist es, wenn dann alle schon eingegebenen Daten verschwunden sind und der Anwender von vorne anfangen darf.

Besser ist es, wenn die Fehlermeldungen innerhalb des Formulars erscheinen – und zwar an den Stellen, an denen Fehler aufgetreten sind, z. B. ein roter Hinweistext, der erklärt, was besser zu machen ist, und dazu das Eingabefeld (rot) umrandet, sodass der Anwender gleich weiß, wo er nachbessern darf, oder ein Fehlertext, der nicht nur lautet: Dies ist ein Pflichtfeld, sondern erklärt, was genau falsch ist. Die E-Mail-Adresse enthält kein @-Zeichen ist da um einiges hilfreicher.

 

12.7.5    Die User Experience bei Formularen 

Das Nutzungserlebnis kann sich stark von Formular zu Formular unterscheiden und nicht zuletzt den Ausschlag geben, ob der Anwender bis zum Ende erfolgreich das Formular ausfüllt.

Eine Ausfüllhilfe kann eine enorme Erleichterung sein. Per AJAX werden die Daten beim Schreiben nachgeladen – ähnlich der Google-Suche, die beim Tippen Vorschläge macht. Dies kann z. B. bei Städtenamen oder beim öffentlichen Nahverkehr mit Haltestellennamen sinnvoll sein. Diese sind oft nicht nur umständlich zu tippen, sondern teilweise auch gar nicht vollständig bekannt.

Abbildung 12.95    Eine intuitive Bedienung: Mit Schiebereglern und Eingabevorschlägen arbeitet das Buchungsformular der bahn.de.

Erklären Sie, warum das Ausfüllen des Formulars für den Anwender sinnvoll sein könnte. Einfach nur zu schreiben: Hier Newsletter bestellen, klingt langweilig und wenig überzeugend. Wenn der Anwender aber erfährt, was in den Newslettern auf ihn wartet und welche Vorteile er davon hat, ist er eher dazu bereit, das Formular auszufüllen.

Abbildung 12.96    Zur Abwehr von Spam haben manche Formulare eine Sicherheitsabfrage (oft auch Captcha genannt). Bei 11freunde.de gibt es nicht die nervigen Buchstabensalate, sondern Abfragen, die Fußballbegeisterte ansprechen.

Eventuell sollte auch erklärt werden, warum bestimmte Daten benötigt werden (wie Check24.de es macht 1). Anwender sind sehr sensibel mit ihren persönlichen Angaben. Wer Konto- oder Kreditkartennummern verlangt, sollte einen Hinweis zur Sicherheit der Daten mitliefern.

Eventuell müssen auch bestimmte Felder erklärt werden. Anwender, die ein bestimmtes Leistungspaket buchen möchten, können in einer Checkbox mit Paket S, Paket M und Paket XL vielleicht wenig anfangen, auch wenn es die Produktnamen sind. Ein kurzes Infofenster oder ein Tooltip kann hier sehr hilfreich sein.

Abbildung 12.97    check24.de erklärt, warum bestimmte Daten bei Versicherungen abgefragt werden und welchen Einfluss die Daten auf den Preis haben.

 

12.7.6    Formulare mit HTML5 

Mit HTML5 wurden einige neue Attribute eingeführt, die die Benutzerfreundlichkeit von Formularen entscheidend verbessern. So können bestimmte Anwendereingaben schon direkt während der Eingabe überprüft werden.

Hier finden Sie einen Überblick über die wichtigsten der neuen Formularattribute:

<input type="text" name="name" required>

<input type="text" name="nachname" 
autocomplete="off">

<select name="land" disabled>

<input type="tel" autofocus>

<input type="text" name="nachname" 
placeholder="Nachname" required>

<input type="text" name="vorname" 
placeholder="Vorname" required 
title="Dies ist ein Pflichtfeld.">

<input name="postcode" type="text" 
pattern="[0-9]{5}">

Tabelle 12.2    Die wichtigsten Formularattribute

Neben den Attributen sind auch noch einige neue HTML-Elemente dazugekommen. Hier die wichtigsten im Überblick:

<input type="search">

<input type="url">

<input type="tel">

<input type="date">

<input type="color">

Tabelle 12.3    HTML-Elemente für Formulare

Im Beispielmaterial zum Buch finden Sie das Beispielformular »formular.html« mit den verschiedenen neuen Attributen und einigen neuen Formularelementen zum Antesten und Ausprobieren.

Abbildung 12.98    Das Beispielformular mit Validierung und Fehlermeldungen