HTML5-Formulare: Wichtiger als Responsive Design!

Der neue Standard für die Auszeichnungssprache ist derzeit in aller Munde. Bunte Kugeln schwirren nun umher und werden von der Maus angezogen, bei Google konnte man jüngst ein Mini-Browsergame auf Basis von HTML5 spielen und auch neu aufgelegte Design-Elemente wie Countdown-Uhren mit Canvas sind möglich. Zudem bietet HTML5 den Vorteil, dass für die Darstellung von Videos keine Erweiterung wie Flash mehr nötig ist, sofern der Browser HTML5 unterstützt. Da HTML5 abwärtskompatibel ist und somit auch nicht HTML5-fähige Browser Seiten mit HTML5-Elementen darstellen können (wenngleich ggf. nicht in gleicher Qualität und mit uneingeschränkten Funktionen), sind der Weiterentwicklung des seit 2009 bestehenden Standards kaum Grenzen gesetzt.

Insbesondere Formulare, die mit HTML5 erstellt wurden, sind ein bedeutender Fortschritt im Zeitalter des Multi-Screening: Je nachdem, wie ein Formular-Feld definiert ist, erscheint bei der Eingabe in der Desktop-Version ein Auswahlfeld, beispielsweise ein kleiner Kalender, und in der Mobil-Version passt sich die Darstellung der Tastatur beim Antippen des Feldes an. So zeigt die Smartphone-Tastatur beim Antippen eines HTML5-Feldes, das als “E-Mail-Adresse” definiert ist, direkt das Zeichen “@” und den Punkt an, während für diese Eingabe nicht erforderliche Zeichen erst durch Umschalten auf der Tastatur sichtbar werden.

Responsive Design wird zwar derzeit zum Standard für die Darstellung von Webseiten und ist auch durchaus sehr komfortabel: Statt eine eigene Mobil-Version für Smartphones und Tablets erstellen zu müssen, ordnet das Responsive Design die Elemente einer Webseite ganz automatisch so an, dass sie auf dem jeweiligen Endgerät passgenau auf den Display passen. Dadurch werden häufig Elemente unter einander angeordnet, die in der Desktop-Version neben einander zu finden sind, beispielsweise die Sidebar. Für Blogs und kleinere Webseiten ist Responsive Design also eine gute Lösung, um den Zugang zur Webseite für verschiedene Geräte ohne größeren Aufwand zu ermöglichen. Doch die Verschiebung von Elementen unter einander, welche sonst sinnvoller Weise neben einander angeordnet sind, kann auch zu einer Einschränkung der Usability führen: Befindet sich beispielsweise die Sidebar plötzlich unter den Blogbeiträgen, ist sie quasi nutzlos und schränkt die Bewegung des Nutzers auf der Webseite ein. Responsive Design hat also seine Schwächen und ist keineswegs das Allheilmittel für Webmaster, die ihre Conversion Rate gerade auf mobilen Endgeräten erhöhen möchten. Im Gegenteil: Das obige Beispiel zeigt, dass diese durch ein automatisches Responsive Design potentiell sogar sinken kann.

HTML5-Elemente für höhere Conversion

Vor allem bei Formularen ist es also sehr sinnvoll, jetzt auf HTML5 umzustellen. HTML5-basierte Formulare sind wesentlich bedienfreundlicher gerade für Nutzer von mobilen Geräten, da sie einfacher und intuitiver auszufüllen sind direkt bei der Eingabe anzeigen, ob diese richtig ist. So muss kein Nutzer mehr alle Daten mühsam eintippen, dabei mehrmals die Smartphone-Tastatur umschalten, endlich auf “Weiter” klicken und feststellen, dass er noch immer auf der Formular-Seite ist, weil er etwas falsch eingegeben hat. So wenden sich wesentlich weniger Nutzer frustriert vom Formular ab, in welchem sie schließlich ihre persönlichen Daten hinterlassen sollten, die die Basis jedes Marketing sind. Durch die deutlich gesteigerte Bedienfreundlichkeit, die intuitive Dateneingabe und die Einfachheit wie Schnelligkeit dieser, ist die Conversion Rate für Formulare wesentlich höher. Mehr Nutzer füllen Ihre Formulare aus, weil es einfach, unkompliziert, intuitiv und schnell ist, Sie erhalten mehr Daten und können mit diesen arbeiten.
HTML5-Formulare können für bestimmte Daten spezifiziert werden, wodurch sich auch die Art der Eingabe ändert. So erscheint bei einem Datums- oder Wochen-Feld in der Desktop-Version mit Klick auf die entsprechende Schaltfläche ein Auswahlfeld, in welchem man das gewünschte Datum einfach anklicken kann:

HTML5 DatumsfeldHTML5 Datumsfeld Mobi-Version

In der mobil-Version für das iPhone oder iPad erscheint, wenn man das Feld antippt, ein Auswahlfeld mit drei Rädern für Tag, Monat und Jahr bzw. für Monat und Jahr, wenn das Feld die Eingabe der Kalenderwoche erfordert. Für das Feld “Uhrzeit” erscheinen analog zwei Räder für Stunde und Minute. Dies erleichtert deutlich die mobile Eingabe, welche so schneller und einfacher zu händeln ist.

Ebenso passen HTML5 Mail-Feldsich die Auswahlmöglichkeiten bei der E-Mail-Adresse an: In der Desktop-Version wird direkt angezeigt, ob die eingegebene Adresse gültig ist oder nicht, indem eine ungültige Eingabe durch eine rote Umrandung dargestellt wird. In der mobil-Version ist dies ebenso der Fall, zusätzlich passt sich auch hier die Tastatur der benötigten Eingabe an und zeigt ohne umschalten zu müssen das @-Zeichen und den Punkt.

HTML5 Mail-Feld Mobil-Version
In Anlehnung an das E-Mail-Feld zeigt auch das Feld “URL” eine ungültige Eingabe an, wobei hier auch ein fehlendes “http://” als ungültig angezeigt wird. In der mobil-Version erscheinen auf der Tastatur direkt Punkt, Slash und ein Button “.com”. Auch hier ist die Maßgabe eine möglichst komfortable Eingabe, bei der dem Nutzer alle Zeichen direkt angezeigt werden, die er benötigt.
HTML5 URL-Eingabe Mobil-Version

 

HTML5 URL-Feld falsche Eingabe

 

 

 

HTML5 URL-Feld richtige Eingabe

Auch die HTML5-Formular-Felder für Telefon- und andere Nummern sind intelligent: Während auch hier generell eine ungültige Eingabe durch eine rote Umrandung dargestellt wird, erscheint in der mobil-Version direkt die Telefon-Tastatur.

HTML5 Telefon-Feld

HTML5 ist ein Plus für den Nutzer

Gerade die Anpassung der Tastatur ist eine deutliche Erleichterung für den Nutzer mobiler Endgeräte. Es ist mühsam, eine Reihe von Formularen auszufüllen und beispielsweise für das Feld “Telefonnummer” zunächst die Tastatur-Seite umschalten zu müssen, um überhaupt Zahlen eingeben zu müssen – und bei jedem Leerzeichen erneut. Sicherlich kennen Sie dies von Ihrem Messanger, wenn Sie jemandem eine Telefonnummer oder E-Mail-Adresse schreiben möchten.
Hierfür eignen sich die Anpassungen, die mit Hilfe der HTML5-Tags generiert werden, perfekt. Zumal diese nicht nur für iOS-, sondern auch für Android-Geräte optimiert sind.

 

So bedienen Sie mit einem einzigen Formular sowohl Desktop- als auch Mobil-Nutzer, erleichtern ihnen die Eingabe, wodurch sie in wesentlich höherem Maße dazu bereit sind, ihre Daten zu hinterlassen. Dass die Eingabe schnell und einfach geschehen kann, mindert die Gefahr eines Absprunges und frustriert Ihre Nutzer nicht. Im Gegenteil, dadurch, dass dem Nutzer die Eingabe so angenehm wie möglich gemacht wird, ist die Hemmschwelle deutlich geringer. So wird sich Ihre Conversion Rate erhöhen – sowohl bei Desktop- als auch bei Mobil-Nutzern.

Ein Responsive Design kann sehr sinnvoll sein und Ihre Webseite auch für mobile Endgeräte zugänglich machen, wodurch sich die Conversion Rate an sich erhöhen müsste. Doch durch die beschriebenen Schwächen des Responsive Design ist es nicht das ultimative Mittel der Wahl für eine gute Conversion. Viel mehr erreichen Sie, wenn Sie Ihren Nutzern intelligente HTML5-Forumlare anbieten, die sie intuitiv und reibungslos ausfüllen können. So sinkt die Hemmschwelle, die Bedienfreundlichkeit steigt – und Ihre Conversion Rate ebenso.