Anzeige
Anzeige
Ratgeber
Artikel merken

Webdesign: So baust du Formulare für mobile Nutzer

Ohne Formulare geht es nicht. Gleichzeitig sind Formulare aber Elemente, die der Nutzer nur ungern sieht. Wenn du willst, dass er sie dennoch benutzt, musst du sie perfekt umsetzen – besonders mobil.

4 Min. Lesezeit
Anzeige
Anzeige

Gutes Formulardesign ist nicht mal eben nebenbei zu erledigen. (Foto: Pixabay)

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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:

Anzeige
Anzeige

„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

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.

Anzeige
Anzeige

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:

Mehr zu diesem Thema
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

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige