Webdesign: So baust du Formulare für mobile Nutzer

23 Dec

Von KAB

• Lesezeit: 4 Min. Webdesign: So baust du Formulare für mobile Nutzer

Pocket Facebook Twitter WhatsApp E-Mail

Für mobile Geräte bauen Designer mittlerweile seit zehn Jahren Formulare. Glücklicherweise hat der Siegeszug der Smartphones direkt den Siegeszug von HTML5 nach sich gezogen, sodass Designer heute wesentlich elegantere Formulare erstellen können als zu Beginn der Smartphone-Zeitrechnung 2007.

Dabei haben sich die spezifischen Probleme, die sich rund um mobile Formulare ergeben, nicht wesentlich verändert, sondern teilweise sogar verschärft. Immer noch ist der Platz auf einem Smartphone deutlich begrenzt. Natürlich bietet die heutzutage übliche Bildschirmdiagonale um 5,5 Zoll und Auflösungen im UHD-Bereich bessere Grundvoraussetzungen als die 3,5 Zoll und 320 mal 240 Pixel der Smartphone-Urzeit.

Selbst in Zeiten von LTE können wir uns außerdem immer noch nicht darauf verlassen, dass Datenverbindungen stabil bleiben. Daraus können sich sowohl Verarbeitungsprobleme im Frontend, also auf dem Mobilgerät, wie auch Verarbeitungs- und/oder Speicherprobleme im Backend ergeben. Du musst stets mit dem Fall der Fälle rechnen und das nicht zuletzt im Formulardesign berücksichtigen.

Wahrlich keine Situation, die zum Ausfüllen eines Formulars einlädt. (Foto: Pexels)

Das größte Problem allerdings dürfte die zunehmende Eingabeverweigerung mobiler Nutzer sein. Die Eingabe von Daten auf einem Mobilgerät ist, trotz aller Verbesserungen an Tastaturen und steigender Touch-Genauigkeit, ein Thema, das man nicht mit Spaß assoziiert. Wann immer es sich vermeiden lässt, Formulare mobil auszufüllen, wird der Durchschnittsnutzer es tun.

Nix verpassen: Abonniere den t3n Newsletter! 💌

Bitte gib eine gültige E-Mail-Adresse ein.

Es gab leider ein Problem beim Absenden des Formulars. Bitte versuche es erneut.

Bitte gib eine gültige E-Mail-Adresse ein.

Hinweis zum Newsletter & Datenschutz

Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Deshalb müssen Designer dem potenziellen Kunden das Ausfüllen der Formulare so einfach und so angenehm wie möglich machen. Dafür gibt es ein paar einfache Methoden, mit denen sich Formulare bereits deutlich verbessern lassen.

Nutze so wenig Formularfelder wie möglich

Es gibt separate Felder für Nachname und Vorname. Es gibt separate Felder für Straße und Hausnummer, ebenso für Postleitzahl, Ort, Vorwahl, Rufnummer. Das sind acht Felder, die auf dem Mobilgerät fummelig auszufüllen wären.

Deutlich einfacher für den Nutzer ist es, die Zahl der Felder auf vier zu reduzieren, indem du Zusammengehöriges zusammenfasst, also Vorname und Name in einem Feld, ebenso Straße und Hausnummer und so weiter.

Ganz generell solltest du gerade für mobile Formulare eine strenge Diät ansetzen. Viele Fragen, die per Formular beantwortet werden sollen, sind im ersten Schritt nicht wichtig. Baust du etwa ein User-Onboarding-Formular, musst du dabei nicht gleich die Schuhgröße abfragen. Gesetzt den Fall, dass diese Informationen tatsächlich einmal von Bedeutung sind, kannst du den User auch später noch auffordern, sein Profil diesbezüglich zu komplettieren. Mobil fragen wir nur das ab, was absolut unvermeidlich ist.

Zu diesem Thema gehört auch der Verzicht auf mobil eher ungünstige Designelemente, vor allem Drop-Downs. Weder Drop-Down-Menüs noch -Listen sollten in mobilen Formularen zum Einsatz kommen. Finger sind keine Mauszeiger, und genormte Finger gibt es schon gleich gar nicht. Fehlbedienungen sind bei diesen Eingabeelementen schon vorprogrammiert.

Orientiere dich am modernen Bot-Stil

Die Abfrage im Konversationsstil haben wir Messengern wie Whatsapp zu verdanken. Die Methode birgt aber tatsächlich einige Vorteile. Bei einer Formulareingabe im Stile eines Gesprächs finden sich Nutzer quasi in vertrauter Umgebung wieder. Man sollte allerdings bedenken, dass gute Gespräche nicht wie ein Verhör ablaufen. Du stellst also eine Frage, bekommst eine Antwort, gibst eventuell selbst eine Information und stellst die nächste Frage. So arbeitest du dich durchs Formular.

Hierbei ist natürlich darauf zu achten, den Nutzern jederzeit zu signalisieren, an welcher Stelle im Prozess sie sich gerade befinden. Für die Formulargestaltung empfiehlt sich daher stets ein seitenorientiertes Design anstelle eines Long Scrolling.

Der Konversationsstil eignet sich ebenso für den Umgang mit Benutzerfehlern. Anstatt eines rüden „Passwort falsch” reagiert man darauf besser mit einer Meldung in einem ganzen Satz, verknüpft mit einer Hilfestellung, zum Beispiel:

„Tut uns leid, aber dieses Passwort scheint falsch zu sein. Wenn Sie Ihr Passwort vergessen haben, können Sie es sich hier erneut zusenden lassen.”

Belege Formularfelder immer da mit Wertvorgaben, wo es möglich ist Webdesign: So baust du Formulare für mobile Nutzer

Dieser Tipp hat zwei Dimensionen. Zum einen bedeutet er, einmal eingegebene Daten stets erneut automatisch einzusetzen, wo es möglich ist. Der Kunde hat möglicherweise seinen Namen bereits für das Abo des Newsletters eingegeben und beschäftigt sich jetzt mit dem Kauf eines E-Books. Komfortabel wäre es, wenn er er an dieser Stelle nicht erneut eintippen müsste, wie er heißt.

Zum anderen kann das Vorausfüllen von Formularfeldern auch über die Sensoren der Mobilgeräte erfolgen. So lässt sich etwa der Standort ganz bequem bestimmen. Wenn ich Services erstelle, die eine Umfeldsuche einbeziehen, etwa DHL-Shops in der Nähe, platziere ich den Suchenden per GPS direkt auf einer Map, die das nähere Umfeld repräsentiert, anstatt ihn mit einer PLZ-Eingabe zu quälen.

Ortsbestimmung ist ein Klacks. (Quelle: Shutterstock | Erstellt von: SydaProductions)

Bei vorausgefüllten Werten solltest du allerdings stets die Möglichkeit vorsehen, diese Werte manuell zu überschreiben. Denn natürlich ist es denkbar, dass der DHL-Shop-Sucher für seinen Bekannten aus der Nachbarstadt sucht und gar nicht sein unmittelbares Umfeld erkunden will.

Fazit: Diese Tipps machen deine Formulare besser

Die hier aufgezählten Tipps verbessern deine mobilen Formulare schon sehr ordentlich. Frei nach dem Pareto-Prinzip dürftest du damit 80 Prozent der häufigsten Formularprobleme beseitigen. Natürlich gibt es weitere Ratschläge, deren Umsetzung für noch bessere Mobilformulare sorgen, etwa der, generell den W3C-Empfehlungen zu „Mobile Accessibility” zu folgen. Das allerdings sprengt den Rahmen dieses Beitrags.

Quellen zum Weiterlesen:

8 Best Practices for Mobile Form Design | UX Matters

Mobile Accessibility | W3C Web Accessibility Initiative

10 Methods for Optimizing Your Forms for Mobile Devices | Speckyboy Design Magazine

Better Mobile Form Design | Luke Wroblewski