Mobile Formulare – so werden sie kundenfreundlich

von Michael Feike
| Lesedauer 5 Minuten |

Nicht nur die mobile Internetnutzung zur Infosuche findet immer mehr Anhänger weltweit, sondern auch das Onlineshopping via Smartphone. Umso wichtiger ist es, dass die Usability in Deinem Onlineshop absolut übersichtlich und kundenfreundlich gestaltet wird. Denn erfahrungsgemäß brechen viele Kunden Ihren Kauf via Smartphone sofort ab, wenn sie das Gefühl haben, den Überblick zu verlieren. Eine große Bedeutung haben dabei die Formulare in Deinem Onlineshop. Wie Du sie so optimierst, dass Dein Kunde den Kauf möglichst nicht abbricht, erklären wir Dir in diesem Artikel.

Wie schlechte Formulare Deine Conversions ruinieren

Kennst Du das? Du willst etwas in einem Onlineshop bestellen, befindest Dich bereits im Checkout-Bereich und kapierst plötzlich nicht mehr, was der Shop da von Dir will? Oder Du wirst durch eine nervtötend lange Checkout-Phase geführt und musst auf der winzigen Tastatur unzählige Eingabefelder ausfüllen? Es wäre kein Wunder, wenn Du den Einkauf in diesem Moment abbrichst. Denn gerade, wenn man etwas zahlungspflichtig bestellen will oder gar seine Bezahldate eingeben muss, kriecht uns leicht eine Unsicherheit den Nacken hinauf. Geht das den Kunden in Deinem Onlineshop vielleicht genauso? Da hat Dein potenzieller Kunde Deinen Shop schon angeklickt und das Sortiment durchstöbert, es wurde seine Aufmerksamkeit geweckt, er hat ein Produkt in den Warenkorb getan und sich zum Kauf entschlossen – und dann wird er auf den letzten Metern von undurchsichtigen Formularen abgeschreckt. Schade, aber vermeidbar! Schauen wir uns doch einfach mal an, warum Nutzer im Formularbereich den Kauf oft abbrechen – und wie Du Deine Formulare so optimieren kannst, damit das nicht mehr so oft passiert.

Problem 1: Was soll ich hier noch mal eingeben?

Um dem Nutzer das Ausfüllen der Formularfelder zu erleichtern, werden oft sogenannte Labels verwendet. Bei mobilen Apps und Websites werden diese Labels meistens als sogenannte Inline-Labels in den Formularfeldern platziert, um Platz zu sparen. Denn Platz ist auf den kleinen Smartphone-Bildschirmen Mangelware. Inline-Labels verschwinden aber just in dem Moment, wenn der Nutzer beginnt, etwas in die Zeile zu tippen. Das kann frustrierend sein, wenn man als Nutzer jetzt vergessen hat, was man in die betreffende Zeile gerade eingeben sollte. Um das Label wieder sichtbar zu machen, müssen die getippten Buchstaben wieder gelöscht werden und der „Spaß“ beginnt von vorn.

Eine mögliche Lösung des Problems sind sogenannte Floating Labels. Bei dieser Label-Version bewegt sich das Label während der Eingabe im Formularfeld nach oben, bleibt aber weiterhin sichtbar, sodass der Nutzer jederzeit nachsehen kann, welche Information hier von ihm erwartet wird.

Problem 2: Wo finde ich das @-Zeichen auf der Tastatur?

Wenn Dich das Formular auffordert, eine E-Mail-Adresse einzugeben, brauchst Du zwingend das @-Symbol. Je nach Tastaturansicht ist aber genau das auf einem Smartphone nicht immer gleich zu finden und muss durch Umschalten erst sichtbar gemacht werden.

Für das Formularfeld zur Eingabe der E-Mail-Adresse sollte in Deinem Onlineshop eine entsprechende Tastaturansicht eingestellt werden, die das @-Symbol sofort mit anzeigt.

Problem 3: Warum muss ich so viel tippen?

Je kleiner das Smartphone-Modell und je dicker die eigenen Finger, umso größer ist das Problem, die richtigen Tasten auf der Smartphone-Tastatur auch genau zu treffen. So sind längere Texteingaben an mobilen Endgeräten mühsamer als am Desktop-PC mit großer Tastatur. Deshalb solltest Du gerade in mobilen Formularen so wenig Text abfragen wie möglich, um den Aufwand für den Nutzer in Grenzen zu halten.

Entlasten kannst Du Deine potenziellen Kunden, indem Du verschiedene Hilfen einbaust:

  • Vorausgefüllte Suchfelder, die häufige Suchabfragen bereits anzeigen
  • Vorausgefülltes Standortfeld, das das Land des Nutzers automatisch auswählt
  • Autocomplete-Funktion, die beim Tippen die gängigsten Suchvorschläge anzeigt
  • Merkfunktion, die frühere Suchbegriffe als Suchoption anbietet

Problem 4: Wann bin ich hier endlich fertig?

Wie bereits erwähnt, ist das Tippen auf dem Smartphone anstrengender als auf einem großen Bildschirm. Zudem werden Bestellungen auf Smartphones oft unterwegs getätigt, wo eine schnelle Eingabe besonders wünschenswert ist. Deshalb gilt: Mache es den Kunden so leicht wie möglich und lege für mobile Formulare so wenig Formularfelder wie möglich an. Zusätzliche Angaben, die nur selten gefragt sind, können in einem Drop-down-Menü verborgen werden, die der Nutzer bei Bedarf aufklappen kann.

Sinnvoll sind auch alternative Anmelde- oder Registriermöglichkeiten, zum Beispiel über Facebook, Twitter oder Google, oder die Zahlung via PayPal oder AmazonPay, die eine Eingabe der Zahlungsinformationen überflüssig macht und so für ein gutes Gefühl sorgt.

Problem 5: Hätten die das nicht gleich sagen können?

Um ein Kundenkonto anzulegen, muss der Kunde in einem Onlineshop oft ein Passwort eingeben. Da überlegt er lange, denkt sich mühsam ein Passwort aus, das sicher ist und das er sich gut merken kann, gibt es ein … und bekommt dann folgenden Text angezeigt: „Das Passwort muss zwischen 5 und 8 Zeichen lang sein, darf keine Umlaute enthalten, muss ein Sonderzeichen enthalten und mindestens einen Großbuchstaben.“ Ätsch, bätsch! Kein Wunder, dass sich der Kunde dann fragt, warum das nicht gleich dazugeschrieben wurde. Denn jetzt muss er sich erneut anstrengen und ein passendes Passwort finden. Da ist es doch viel leichter, die Registrierung abzubrechen und später vielleicht … Besser ist es also, dem Nutzer noch vor dem ersten Eingabeversuch mitzuteilen, welche Anforderungen das Passwort erfüllen muss.

Problem 6: Warum habe ich keinen Gutscheincode?

Stell Dir vor, Dein Kunde ist bereits im Checkout-Bereich und entdeckt plötzlich das Eingabefeld für einen Gutschein-Code. Vielleicht fragt er sich enttäuscht: „Warum habe ich keinen Gutscheincode? Wenn man hier einen Gutscheincode eingeben kann, werden andere einen Gutscheincode haben und die haben dann entsprechend einen Vorteil gegenüber mir. Vielleicht finde ich ja auch irgendwo einen Gutscheincode im Internet. Am besten suche ich erstmal danach, bevor ich zu teuer kaufe und mich über den Tisch ziehen lasse.“ Und schon verlässt der Kunde auf der Suche nach einem Preisvorteil Deinen Onlineshop, ohne den Kauf abgeschlossen zu haben, und kommt, wenn Du Pech hast, auch nicht wieder.

Frage Dich also, wie Du das Eingabefeld für Promocodes möglichst unauffällig gestalten kann. So kannst Du zum Beispiel das Gutscheincode-Eingabefeld unterhalb des sichtbaren Bereichs „verstecken“ oder es erst dann anzeigen lassen, wenn der Nutzer auf einen unauffälligen Gutscheincode-Link klickt. Wer einen Code hat, wird das Feld finden, wer keinen hat, wird nicht mit der Nase drauf gestoßen, dass andere vielleicht einen Vorteil ihm gegenüber haben könnten.

Fazit: Mache es Deinen Kunden so einfach wie möglich!

Der Trend geht inzwischen klar dahin, auch auf mobilen Endgeräten online shoppen zu gehen. Deshalb sollte Dein Onlineshop unbedingt auch mobil optimiert sein. Das gilt vor allem auch für Deine Formulare im Rahmen des Checkouts. Denn findet der potenzielle Käufer zu viele Stolpersteine in den Formularen vor, ist die Wahrscheinlichkeit groß, dass er den Kaufprozess kurz vor dem Ziel trotzdem noch abbricht. Als Hilfe für Deine Onlineshop-Kunden solltest Du deshalb auf folgende Tipps zurückgreifen:

  1. Nutze Floating Labels für Deine Eingabefelder, damit der Kunde während seiner Eingabe noch lesen kann, was in dem Feld gerade abgefragt wird.
  2. Stelle die Tastaturansicht für die Abfrage der E-Mail-Adresse so ein, dass das @-Zeichen für den Kunden sofort sichtbar ist.
  3. Sorge mit vorausgefüllten Suchfeldern und Standortfeldern, Autocomplete-Funktion und Merkfunktion dafür, dass der Kunde möglichst wenig selbst eingeben muss.
  4. Frage zur Entlastung des Kunden in mobilen Formularen so wenig Daten wie möglich ab und nutze Anmelde- oder Zahlmöglichkeiten über Facebook, PayPal & Co.
  5. Lasse den Kunden beim Anlegen des Kundenkontos vor Eingabe eines Passworts wissen, welche Anforderungen bezüglich Länge und Sonderzeichen es erfüllen muss.
  6. Gestalte und platziere den Hinweis auf die Einlösung von Gutscheincodes möglichst unauffällig, damit der Kunde ohne Code den Onlineshop nicht enttäuscht verlässt.

Weitere Artikel zum Thema