Kuratierte Linksammlung für Webdesigner und -entwickler.

Formulare: Die Krux auf mobilen Endgeräten

Egal ob Online-Shop oder Vergleichsportal: Ohne mobilem Layout geht kaum noch etwas. Die Zugriffe mittels Smartphones wachsen stetig an und überholten bereits 2015 die Zugriffszahlen der Desktop-Geräte. Dass es aber nicht nur mit der Anpassung des Designs getan ist, scheinen die Wenigsten zu wissen.

Es gibt kaum etwas Schlimmeres als eine Website, die durch störende Elemente zum Absprung beziehungsweise Abbruch führt. Vor allem Formulare können auf kleinen Displays in den Wahnsinn treiben, egal ob zum Anlegen eines Nutzerprofils oder zur Angabe von Kundeninformationen. Dabei lässt sich durch die Optimierung von Formularen die Conversion steigern, egal ob auf Desktop oder Mobile.

Anzeige

Durch die Usability-Verbesserung der Formulare, konnten wir beispielsweise bei unserem Portal sachversicherung24 eine Steigerung der Conversion um 81% (Desktop) beziehungsweise 121% (Mobile) erreichen.

Die Analytics haben es schon lange verraten: mobile Zugriffe wachsen stetig an

Fünf Punkte, welche die Usability verbessern

Damit Nutzer eine spürbar bessere User Experience bei der Nutzung von Formularen erleben, sollten die folgenden fünf Punkte beachtet werden:

1. Sinnvoller Einsatz der Autovervollständigung

Durch gezielten Einsatz der Autovervollständigung kann die Ausfülldauer eines Formulars und die Fehlerhäufigkeit reduziert werden. Jedoch sollte diese Funktion nur bei Feldern eingesetzt werden bei denen es Sinn ergibt, zum Beispiel bei der Eingabe der Postleitzahl werden basierend der Eingabe passende Orte vorgeschlagen.

Aber auch das Smartphone bietet von Haus aus, eine Funktion zur Autovervollständigung an. Die Funktion „Autocomplete“ hilft dabei, die einhändige Eingabe über die mobile Tastatur zu vereinfachen und ist unter dem Namen „T9“ noch aus der Pre-Smartphone-Ära bekannt. Bei Formularen kann dies jedoch an manchen Stellen hinderlich sein. Über den Parameter „autocomplete“ lässt sich diese Eingabehilfe für jedes Feld im Formular einzeln de- beziehungsweise aktivieren.

2. Nur so viele Daten wie notwendig

Es ist verständlich, dass man als Shopbesitzer oder als Dienstleister so viel wie möglich über seinen Kunden erfahren möchte. Schließlich lassen sich anhand der Informationen Angebote auf den Kunden zuschneiden. Mit einer Tastatur und Maus sind viele Felder schnell ausgefüllt.

Hangelt man sich jedoch mobil durch das Felder-Meer kann dies schnell überfordern und zum Absprung führen. Daher sollte vor allem auf mobilen Geräten nur die nötigsten Felder angezeigt werden. Wer weitere Nutzerdaten möchte, um beispielsweise Angebote besser auszuspielen, sollte seine Nutzer durch eventuelle Mailing-Aktionen zum Vervollständigen der Daten motivieren.

3. Feldtypen sinnvoll einsetzen

Jedes Feld in einem HTML-Formular sollte den passenden Typen besitzen. Beispielsweise sollten Felder für die Eingabe von E-Mailadressen vom Typ email sein oder Felder, die nur numerische Eingaben benötigen, dem Typ number zu geordnet werden.

Davon profitieren vor allem mobile Nutzer. Diese bekommen in dem jeweiligen Feld die passende Tastatur angezeigt. Somit lassen sich Postleitzahlen ohne umschalten der Tastatur schnell eingeben oder das Suchen nach dem @-Zeichen bleibt erspart.

Je nach Feldtyp wird das passende Tastaturlayout angezeigt.

Zudem gibt es noch zahlreiche Attribute, die das Leben der Nutzer bei der Verwendung von Formularen erleichtern.

4. Genügend Abstand zwischen den Feldern

Der Wurstfinger-Effekt tritt nicht nur bei Online-Werbung auf. Auch bei zu eng positionierten Feldern kann es passieren, dass man das falsche Feld antippt. Dies lässt sich durch einen breiteren Innen- und Außenabstand der einzelnen Felder verbessern. Basierend auf der Daumspitze eines Erwachsenen werden 72 Pixel als Mindestbreite für tippbare Elemente, wie zum Beispiel Buttons empfohlen.

Durch gezielte Maßnahmen kann die Fehleranfälligkeit verringert und der Nutzer somit bei Laune gehalten werden.

5. Aktive Fehlererkennung

Nichts ist nerviger, als kurz vor dem Ziel zu stehen und dann die Meldung zu bekommen, dass ein Feld falsch ausgefüllt wurde. Daher sollten Fehler direkt beim Auftreten kommuniziert werden beispielsweise fehlende @-Zeichen und Punkte oder Leerzeichen in Telefonnummern. Durch die entsprechenden Feldtypen informiert der Browser teilweise über automatisch über Fehleingaben. Wer jedoch komplett auf Nummer sicher gehen möchte, kann unterstützende Javascript-Bibliotheken nutzen.

Fazit

Egal ob Desktop oder Mobile: Der Aufbau eines Formulars kann darüber entscheiden, ob ein Nutzer abschließt oder abspringt. Deswegen sollte bewusst Zeit in die Optimierung gesteckt werden. Die Experten von Konversionkraft haben noch weitere Fakten zur Formular-Optimierung zusammengesammelt, auf die man ein Blick werfen sollte.

Frischer Input für Designer. Jeder Abonnent erhält das kostenlose Bundle aus 50 Photoshop Device-Mockups und 40 Responsive WordPress-Themes.

1x pro Woche. Kein Spam. Jederzeit kündbar.
Dennie Liemen
Dennie Liemen

Als Vorstand der Beratungswerk24 AG entwickelt Dennie Liemen zusammen mit seinem Team Strategien für das E-Marketing von Web-Portalen für die Versicherungsbranche, u.a. sachversicherung24.
Eine Antwort auf "Formulare: Die Krux auf mobilen Endgeräten"
  • Avatar

    Ich finde das die Autovervollständigung eines der besten Möglichkeiten ist um schneller mit seiner Arbeit voran zu kommen. Natürlich erfordert es ein wenig Übung aber dann funktioniert es aauch problemlos.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Verpasse keine News!

Du erhältst ein kostenloses Bundle aus 50+ WordPress-Themes und PSD Device-Mockups.

1x pro Woche. Jederzeit kündbar.
Anzeige