Vorheriger Artikel Nächster Artikel

HTML5-Formulare: So verbesserst du die User-Experience

Aus dem
t3n Magazin Nr. 32

06/2013 - 08/2013

Jetzt kaufen

Die Anforderungen an Websites wachsen ständig, Nutzereingaben werden immer komplexer. Dank neuer HTML5-Elemente und -Attribute können Webentwickler heute mit wenig Aufwand nutzerfreundlichere Eingabemasken bauen, ohne auf alte Browser Rücksicht nehmen zu müssen.

HTML5-Formulare: So verbesserst du die User-Experience
Mit HTML5-Formularen die User-Experience verbessern. (Grafik: Illustra_tarras/iStock)

Formulare sind die Schnittstelle zwischen Browser und Server, Website-Besucher und -Betreiber, Kunde und Händler. Gerade für Betreiber von Online-Shops ist es deshalb notwendig, Formulare gewissenhaft zu testen und zu optimieren. Ansonsten wird ein Bestellformular schnell zum „Conversion Killer” und führt zum Kaufabbruch. Häufige Störfaktoren für den Nutzer sind zum Beispiel irreführende Feldbezeichungen, nichtssagende Fehlermeldungen und das Abfragen zu vieler irrelevanter Informationen.

Der Umfang eines Web-Formulars ist entscheidend. Website-Betreiber und Händler streben natürlich nach möglichst umfangreichen Kunden-Datensätzen. Dennoch zeigen Studien eindrucksvoll, dass bei Formularen weniger häufig mehr ist. Oft steigern bereits kleine Handgriffe die Nutzbarkeit und Zugänglichkeit von Web-Formularen deutlich. So steigerte zum Beispiel das Lerninstitut Universal Technical Institute die Conversion Rate einer Website um 300 Prozent, indem ein 15 Eingabefelder umfassendes Formular auf mehrere Unterseiten aufgeteilt und mit Fortschrittsbalken sowie Informations-Video versehen wurde.

Abwärtskompatibel dank Graceful Degradation

Vor allem bei Online-Shops ist es essenziell wichtig, dass Bestellmasken auch in älteren Browsern wie dem Internet Explorer 7 funktional sind. Dank „Graceful Degradation” ist der Einsatz von HTML5-Formularen bereits heute möglich und beeinträchtigt nicht die Funktionalität in alten Browsern – auch wenn diese noch keine Implementierung von HTML5-Technologien vorweisen.

Rein praktisch bedeutet das, ein HTML5-Eingabefeld <input type=”email”> wird in älteren Browsern wie dem Internet Explorer 6 verarbeitet und dargestellt wie ein <input type=”text”>-Element. Nicht bekannte Input-Typen werden also als normales Textfeld ausgeliefert. Dies bedeutet, Nutzer mit modernen Browsern erhalten ein Plus an Usability, während Nutzer mit älteren Browsern keine Änderung an der Funktionalität des Formulars feststellen werden. Je nach Zielgruppe der Website oder des Online-Shops wäre es im zweiten Schritt natürlich noch problemlos möglich, die durch die HTML5-Elemente hinzugewonnene Funktionalität in älteren Browsern per JavaScript nachzubauen.

Neue Eingabefelder im Detail: email, url, search und Co.

Die wichtigste Neuerung der HTML5-Formulare besteht wohl in den neu hinzugekommenen Input-Typen. Unter XHTML und HTML4 existierten gerade mal eine gute Handvoll Feldtypen, wie zum Beispiel text, hidden, password, radio, checkbox, file oder submit. Diese Typen sind natürlich auch unter HTML5 erhalten geblieben.

Neu hinzugekommen sind laut W3C-Spezifikationen rund 15 weitere, die im Folgenden detailliert betrachtet werden:

<input type=”email”>

Bei mehr als 50 Prozent aller Web-Formulare gibt es ein Feld zur Eingabe der eigenen E-Mail-Adresse. Vor HTML5 war die clientseitige Validierung von E-Mail-Adressen relativ komplex. Dank des neuen HTML5-Input-Typ email übernimmt der Browser nun die lästige Aufgabe der Validierung. Falls keine korrekte E-Mail-Adresse eingetragen wird, präsentiert der Google-Chrome-Browser zum Beispiel schon beim Verlassen des Eingabefelds eine entsprechende Fehlermeldung und der Nutzer kann seine Eingabe direkt korrigieren.

<input type=”url”>

Mit dem Input-Typ url sehen die W3C-Spezifikationen auch ein neues Formularfeld zur Eingabe von Web-Adressen vor. Der Browser überprüft automatisch, ob es sich beim eingegebenen Wert tatsächlich um eine korrekte URL handelt. Webentwickler sollten beachten, dass dabei wirklich äußerst streng und explizit geprüft wird:

  • nicht valide: t3n.de
  • nicht valide: www.t3n.de
  • valide: http://t3n.de

Man sollte also je nach Zielgruppe der Website das Protokoll (“http://”) bereits vorausfüllen lassen oder ein Platzhalter-Attribut bereitstellen. Weniger affine Nutzer sind ansonsten mit der Browser-Fehlermeldung „Geben Sie eine korrekte URL ein” überfordert.

<input type=”tel”>

Der neue Input-Typ tel bietet aufgrund der länderspezifischen Komplexität von Telefonnummern in noch keinem Browser eine automatische Validierung an. Ein wichtiger Usability-Bonus ist jedoch, dass auf Smartphones beim Fokussieren des Eingabefeldes statt der normalen Bildschirmtastatur direkt der Ziffernblock eingeblendet wird. Gerade auf mobilen Geräten sind Web-Formulare nicht gern gesehen, jede Verbesserung der Nutzerfreundlichkeit kann hierbei einer hohen Abbruch-Rate entgegenwirken.

<input type=”search”>

Auch für die Integration von Suchmasken auf einer Website stellt HTML5 ein neues Eingabefeld zur Verfügung. Im Prinzip macht der Input-Typ search nichts anderes, als das Suchfeld optisch zu formatieren, indem es beispielsweise einen kleinen Button zum Löschen der aktuellen Suchphrase einblendet. Das neue Eingabefeld geht in vielen Browsern sogar so weit, dass es zugewiesene CSS-Formatierungen gezielt ignoriert und nur über eine Art Hack (appearance: none;) zulässt.

<input type=”number”>

Auch bei diesem Input-Typ erfolgt eine automatische Validierung seitens des Browsers. Im Falle einer nicht numerischen Eingabe wird aber keine Fehlermeldung ausgegeben. Stattdessen verschwinden die nicht zulässigen Zeichen einfach aus dem Eingabefeld. Außerdem werden in Browsern, die das Formularelement unterstützen, im rechten Bereich des Feldes zwei kleine Buttons integriert, mit denen sich der aktuelle Wert erhöhen oder verringern lässt. Zusätzliche neue Attribute runden den Input-Typ number ab. So lässt sich über min der Minimalwert des Feldes definieren. Das Äquivalent dazu stellt das max-Attribut dar. Über step lässt sich festlegen, um welchen Wert die aktuelle Eingabe bei Klick auf die rechten Buttons erhöht oder veringert werden soll. Ein Eingabefeld zur Abfrage des Alkohol-Pegels könnte beispielsweise wie folgt aussehen:

HTML

<input type=”number” min=”0” max=”5” step=”0.1” />

Listing 1

Praxistipp: Die Abfrage der Postleitzahl sollte weiterhin per Input-Typ text erfolgen, da manche Postleitzahlen in Deutschland mit „0” beginnen. Die Eingabe der Postleitzahl „01067” für Dresden würde bei Verwendung von number auf „1067” gekürzt werden.

<input type=”date”>

Der Input-Typ date steht hier stellvertretend für mehrere neue Eingabefelder, die allesamt die Eingabe eines Zeitwerts erwarten:

HTML

<input type="date" />    <!-- Datum -->
<input type="time" />    <!-- Uhrzeit -->
<input type="datetime" />   <!-- Datum und Uhrzeit (mit Zeitzone) -->
<input type="datetime-local" />  <!-- Datum und Uhrzeit (ohne Zeitzone) -->
<input type="month" />   <!-- Monat -->
<input type="week" />   <!-- Kalenderwoche -->

Listing 2

Das Besondere an diesen neuen Input-Typen ist, dass moderne Browser, falls nötig, einen Kalender anzeigen, auf dem man den gewünschten Zeitpunkt per Klick in das Eingabefeld übernehmen kann. Eine ähnliche Implementierung geschieht in der Praxis häufig mithilfe des JavaScript-Frameworks jQuery UI.

Nativer Datepicker im Google Chrome.
Nativer Datepicker im Google Chrome.

Leider werden diese Input-Typen bislang nur unzureichend von den Browsern unterstützt. Chrome und vor allem Opera sind hier Vorreiter. Sobald sich dieser Zustand verbessert hat, ist es jedoch sinnvoll, auf den Einsatz übergewichtiger JavaScript-Bibliotheken zu verzichten und stattdessen ausschließlich auf die HTML5-Implementierung zu setzen. Bis dahin ist ein Fallback jedoch unumgänglich, denn gerade Datumseingaben sind bei Web-Formularen für viele Nutzer nervenaufreibend.

<input type=”range”>

Ähnlich wie der Input-Typ number ist auch range dafür prädestiniert, numerische Werte zu erfassen. Dieser neue Input-Typ durchbricht das Layout des bekannten Textfeldes komplett und verwandelt sich in einen vollwertigen Schieberegler. Genau wie bei number stehen auch bei range wieder die zusätzlichen Attribute min, max und step zur Verfügung. Aufgrund der Tatsache, dass der Input-Typ range in älteren Browsern in der gewünschten Form nicht nutzbar ist und lediglich als reines Textfeld angezeigt wird, sollte man auch hier über die Implementierung eines JavaScript-Fallbacks nachdenken. Ein weiterer Wermutstropfen ist, dass das neue Eingabefeld nur einen Wert akzeptiert. Die Auswahl einer Preisspanne (von/bis) wäre dementsprechend nicht möglich.

Abonniere jetzt t3n-News über WhatsApp und bleib mobil auf dem Laufenden!
t3n-News via WhatsApp!
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von René am 15.11.2013 (16:53 Uhr)

    Hey Torben,

    schöner Artikel zur Verwendung von HTML 5 Elementen, wird Zeit das sich in Zukunft mehr Personen solchen Kenntnissen annehmen.

    VG

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?