Formular: Herausforderung auf mobilen Endgeräten

Im April 2015 sorgt Google mit dem „Mobilegeddon“ für Schweißperlen auf Unternehmerstirnen. Als Reaktion darauf wirkte der viel propagierte Ansatz „Mobile First“ in 2016 fast schon wie ein Schlachtruf. Dabei überstiegen die Zugriffe mittels Smartphones bereits 2015 die der Desktop-Geräte. Egal ob Online-Shop, Vergleichsportal oder einfache Firmenwebseite: Ohne mobilem Design lockt man keinen Kunden mehr vom Sofa runter.

Nicht jede Webseite benötigt eine eigene App. In der Regel ist ein responsives Design die geeignete Lösung. Webseiten werden auf jedem Bildschirm entsprechend angepasst dargestellt. Für Nutzer gibt es kaum etwas Schlimmeres als mobil eine Webseite aufzurufen und dabei von unnötigen Elementen oder undurchdachtem Design gestört zu werden. Im schlimmsten Fall verlassen die Besucher die Webseite und gehen direkt zur Konkurrenz. 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.

So konnten wir durch die nutzerzentrierten Verbesserungen eine Conversion-Steigerung um 81 Prozent (Desktop) beziehungsweise 121 Prozent (Mobile) erreichen.

Seit 2015 zeigen viele Analyticsbalken, dass mobile Endgeräte vermehrt zum Einsatz kommen.

Unsere fünf Keylearnings

Bei diesen Anpassungen haben wir fünf Punkte für uns ausgemacht, die für den Einsatz von Formularen, vor allem auf mobilen Endgeräten besonders wichtig sind:

1. Durchdachter Einsatz von Autocomplete

Beim Ausfüllen von Formularen, kann die Autovervollständigung Nerven und Zeit sparen. Die Ausfülldauer und die Fehlerhäufigkeit werden reduziert. Smartphones und Tablets bringen diese Funktion von Haus aus mit und unterstützen somit die einhändige Eingabe. 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. Weniger ist mehr

Umso mehr Sie über Ihren Kunden weiß, umso besser können Sie diesen auf spannende Produkte aufmerksam machen. Schließlich lassen sich anhand der Informationen Angebote auf den Kunden zuschneiden. An einem Desktop- oder Laptop lassen sich Formulare mit unzähligen Feldern, dank Maus und Tastatur schnell ausfüllen.

Mobil entwickelt sich so ein Felder-Meer jedoch zu einer Odyssee, die schnell überfordern und zum Absprung bzw. Abbruch führen kann. Daher sollte vor allem auf mobilen Geräten nur die nötigsten Felder angezeigt werden. Für weitere Nutzerdaten sollte in diesem Fall dann auf gezielte Mailing-Aktionen zurückgegriffen werden.

3. Einsatz von Feldtypen

Vor allem für mobile Endgeräte ist dieser Punkt wichtig. Schließlich entscheidet das Formularfeld, welche Tastatur dem Nutzer angezeigt wird. Daher sollte jedes Feld in einem HTML-Formular den passenden Typen besitzen.

Je nach Feldtyp wird das passende Tastaturlayout angezeigt. Links das Feld vom Typ number und rechts für den Typ email.

Beispielsweise sollten Felder für die Eingabe von E-Mailadressen vom Typ email sein. Damit fällt für viele Nutzer das mühselige Suchen nach dem @-Zeichen erspart. Felder, die nur numerische Eingaben benötigen sollten dem Typ number zugeordnet werden. Somit lassen sich Postleitzahlen ohne umschalten der Tastatur eingeben, da automatisch ein numerisches Zahlenfeld angezeigt wird.

4. Wurstfinger-Effekt bedenken

Der Wurstfinger-Effekt stammt zwar aus dem Bereich der Online-Werbung trifft hier aber genauso zu. Zu eng positionierte Felder versuchen so manchen Feldklick. Mit einem breiten Innen- und Außenabstand lässt sich das ungewollte Antippen von falschen Feldern vorbeugen. Als Mindestbreite haben sich 72 Pixel bewährt. Dieser Wert basiert auf der Daumenspitze eines Erwachsenen.

Aber nicht nur Formularfelder sollten unter diesem Aspekt erstellt werden. Auch Buttons und andere tippbare Elemente sollten diese Mindestbreite erhalten. Durch solche gezielten Maßnahmen wird die Fehleranfälligkeit verringert.

5. Aktive Fehlererkennung

Nichts ist ärgerlicher, als kurz vor dem Absenden des Formulars eine Meldung zu bekommen, dass ein Feld falsch ausgefüllt wurde. Diese Fehler sollten direkt beim Auftreten kommuniziert werden zum Beispiel bei einem fehlenden @-Zeichen oder einem Punkt in der Telefonnummer. Setzt man auf die richtigen Feldtypen übernimmt dies bereits der Browser des Nutzers. Wer auf Nummer sicher gehen möchte, kann auf eine viel Zahl an unterstützenden Javascript-Bibliotheken zurückgreifen.

Fazit

Der Aufbau eines Formulars kann darüber entscheiden, ob ein Nutzer abschließt oder abspringt. Daher sollte egal ob für Desktop oder Mobile bewusst Zeit für die Formular-Optimierung eingeplant werden.