Usability für Formulare dank HTML5

2014-10-12 15:00 (Kommentare: 0)

Usability für Formulare
© giomatmicro - Fotolia.com

Wir zeigen euch, wie euch HTML5 hilft, Formulare nutzerfreundlich zu gestaltet. Für Besucher wird das Ausfüllen leichter und unkomplizierter. Und der Aufwand lohnt, denn schlecht gemachte Formularseiten sind auf Webseiten wahre Flaschenhälse, die Nutzer reihenweise abspringen lassen.

Schlechte Formulare killen die Conversion

Egal ob Online-Shop, Blog oder Business Website – Formulare gehören auf vielen Webseiten zum Standard zur Nutzerinteraktion. So weit, so gut: Doch bereits kleine Fehler in Konzept und Design sorgen dafür, dass die Usability kippt. Das hat oft Folgen, der Nutzer springt ab und der Kontakt geht verloren. Auf Unternehmens- und E-Commerce-Seiten bedeutet dies meist einen satten Umsatzverlust. Tests und Studien weisen dabei Abbruchquoten aus, die für ein komplettes Formular im mittleren bis oberen zweistelligen Prozentbereich liegen können. Gut umgesetzte Formularseiten kommen jedoch in der Regel deutlich besser weg. Das neue HTML5 ist dabei ein Schlüssel, solche Seiten zu schaffen.

Viele neue Usability-Features für Formulare in HTML5

Formulare sind in HTML5 ein großes Thema. Gegenüber der Vorgängerversion hat sich einiges getan. Und das betrifft nicht nur den Support mobiler Endgeräte wie Tablet und Smartphone. Auch bei Laptop und PC steigern HTML5 Formulare die Usability. Das liegt neben Features wie Prefill auch noch an der Real-Time-Validation ohne JavaScript, die das neue HTML unterstützt.

Neue Input-Types ermöglichen Autofill und Validation

Unter HTML4 gab es nur wenige Typen für Inputfelder. Neben Text waren dies beispielsweise noch Checkbox oder Password. Unter HTML5 ist das anders. Das neue HTML kennt unter anderem die Typen email, date, number, tel und url sowie Felder für die Adresse. Die neuen Felder machen dabei nicht nur den Seitenbetreibern das Leben leichter. Auch die Nutzer profitieren von den neuen Input-Typen. Moderne Browser wie Google Chrome unterstützen ein Feature, das je nach Browser Autofill oder Autocomplete genannt wird.

Das ist jedoch erst die Hälfte: Die Browser sind durch die neuen Formulare in der Lage eine Real-Time- oder auch Inline-(Basis-)Validierung der Eingabe durchzuführen. Und das, ohne dass wie bisher auf JavaScript zurückgegriffen wird.

Ergänzt der Webdesigner das Input-Tag noch um ein „required“ weiß der Browser, dass die Eingabe dieses Feldes zwingend notwendig ist und zeigt dies dem Nutzer bei fehlender Eingabe auch an. Änderungen an der Darstellung der Validierungsinformationen ist durch CSS möglich.

Die so mögliche Real-Time-Validerung ist ein weiteres Ass im Ärmel von HTML5 Formularen. Das neue Attribut Pattern erweitert den Handlungsspielraum für die Validierung noch. Durch reguläre Ausdrücke können Vorgaben für die Validierung gegeben werden. Wer sich dabei mit regulären Ausdrücken nicht auskennt, kann auf die Website HTML5Pattern zurückgreifen. Dort finden sich zahlreiche fertige Ausdrücke für unterschiedliche Anwendungsbereiche.

Beispiel für ein Input-Feld für deutsche Postleitzahlen:

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


Beispiel-Tag für die Abfrage einer E-Mail-Adresse unter HTML5:

<input type="email" name="email">

Mit Placeholder dem Nutzer mitteilen, was gefragt ist

Im obigen Beispiel ist auch das Attribut Placeholder zu finden. Dieses Attribut bietet die Möglichkeit, einen Text als Platzhalter in den Feldern zu schreiben. Der Nutzer erkennt bei passender Textwahl durch ein Beispiel leicht, welche Information in diesem Feld gefordert ist. In der Praxis sorgt der Einsatz meist schnell – genauso wie auch die Inline-Validierung - beim Senken der Absprungquote im Formular.

Linktipp: Eine Reihe von funktionierenden Beispielen für Pre-/Autofill und Inline-Validation findet ihr auf http://www.the-art-of-web.com/html/html5-form-validation/

Datepicker – Kalender ohne Plug-in

HTML5 bietet mit dem Input-Type Date die unkomplizierte Möglichkeit, einen Kalender zur Auswahl eines Datums einzubinden. Dieser wird auch als Datepicker bezeichnet und ist bei Websitebesuchern sehr beliebt. Bisher war es nur möglich, eine solche Funktionalität durch zusätzliche JavaScript Plug-ins zu implementieren. Unter HTML5 reicht:

<input type="date">


Und schon wird ein nativer Datepicker eingebunden – sofern der Browser dies unterstützt. Wer auch ältere Browser unterstützen möchte und gleichzeitig vergleichbaren Komfort bieten will, sollte sich mit Polyfillern auseinandersetzen.

Neben den bereits genannten Tipps zu HTML5 sollte bei Formularen für eine gute Usability noch auf folgende Punkte geachtet werden:

Logische Gruppierung der Abfragefelder (zum Beispiel Vorname, Nachname, Straße, Postleitzahl, Ort) Zur gewünschten Eingabe passende Länge der Eingabefelder (Feld zur Eingabe einer Postleitzahl mit der Länge 5) Verständliche und selbsterklärende Labels nutzen (Abkürzungen, Fremdwörter und Fachbegriffe vermeiden) Sende-Button gut sichtbar positionieren und verständlich beschriften.

Zurück

 
domainssaubillig © 2007-2022 Alle Rechte vorbehalten. | Support | AGB | Datenschutzerklärung | Impressum