Das Ende der Webformulare

Veröffentlicht: 2022-03-11

Webformulare sind lästig, ineffizient und erfüllen Menschen mit Angst. Füllt eigentlich jemand gerne Webformulare aus? Nichtsdestotrotz sind sie ein „notwendiges Übel“, das einige der kritischsten Online-Interaktionen über Erfolg oder Misserfolg entscheiden kann.

Webformulare basieren immer noch hauptsächlich auf alten Papierformularen – Zombie-Überbleibsel systemzentrierter UIs (vs. benutzerzentriert). Es ist 30 Jahre her, und wir geben immer wieder dieselben Informationen in Formulare ein.

Das UX-UI-Design von Webformularen stammt vom papierbasierten Formulardesign
Man kann sehen, wie Webformulare aus Papierformularen wie dieser KFC-Bewerbung entstehen.

Glücklicherweise stehen große Veränderungen bevor. In fünf Jahren werden wir mit Schrecken auf die umständliche, langsame und frustrierende Art und Weise zurückblicken, wie wir früher persönliche Daten beim Ausfüllen von Bewerbungen, Kreditkartenanträgen, Bezahlvorgängen im E-Commerce, Kontoregistrierungen usw. eingegeben haben, bei praktisch jeder Aufgabe, die die Eingabe von Informationen erfordert. Ungeachtet der Bedeutung dieser Interaktionen ist das Design der Formulare, die sie ermöglichen, oft sehr schlecht durchdacht.

Design des DMV-Webformulars
Wer liebt den DMV nicht? Diese Art von Form wird hoffentlich sehr bald zu einem verstaubten Relikt einer verlorenen Vergangenheit.

Die Quintessenz ist, dass die meisten Webformulare heute – ob Desktop oder Mobil – einfach eine schreckliche Benutzererfahrung sind. Trotz unzähliger Bücher, Studien, Artikel und Whitepaper von Gurus der UX-Branche wie The Nielsen Norman Group, Baymard Institute (E-Commerce) und Luke Wroblewski (Mitbegründer der Interaction Design Association), viele Organisationen – sogar solche, deren Lebenselixier davon abhängt – Befolgen Sie nicht die Best Practices für das UX-Design von Webformularen.

Das bedeutet Milliarden und Abermilliarden an entgangenen Einnahmen.

Schockierenderweise wird Amazon – der große milliardenschwere Gigant des E-Commerce – vom Baymard Institute in der „Gesamtleistung der Checkout-UX“ als sehr niedrig eingestuft, wenn es um Benutzerinteraktionen mit Formularen wie Versand und Abholung im Geschäft, Kreditkarteninformationen, Validierungsfehler usw. geht mehr. Wie viel Geschäft geht durch solch schlechte UX verloren?

Heutzutage sind die meisten Webformulare frustrierend, lassen sich nur langsam ausfüllen und setzen die Benutzerfreundlichkeit an letzter Stelle.

Webformular-Design UX UI
Kontoregistrierungsformulare wie diese sind eine geistige Belastung für die Menschen und zeitaufwändig zum Ausfüllen.

Bezüglich Zeitaufwand und kognitiver Belastung sind Online-Formulare meist ein Riesenlästier. Sie sind überwältigend fehleranfällig, es fehlen Standardwerte, automatische Vervollständigung und automatische Formatierung; Sie gehen schlecht mit Eingabefehlern um – und das bezieht sich nicht einmal auf mobile Formulare, die eine ausgeprägte Design-Denkweise erfordern und andere Usability-Probleme haben.

Webformular-Design für Stellenbewerbungen ux
Bewerbungsformulare haben einige der schlechtesten UX. Ein aktiver Arbeitssuchender füllt diese Formulare immer wieder mit den gleichen Informationen aus.

Organisationen versuchen oft, zu viele Informationen von Benutzern zu sammeln, selbst wenn dies nicht erforderlich ist, um die Transaktion abzuschließen. Spendenformulare sind oft die größten Übeltäter, da sie darauf bestehen, Spenderprofildaten für ihre eigenen Statistiken zu sammeln, ohne die Interessen des Spenders zu berücksichtigen. Stellen Sie sich vor, man würde Ihnen sagen, wenn Sie jemandem Ihre hart verdiente Münze geben wollen, dass Sie mit Bargeld in der Hand warten müssen, während er Sie mit Fragen überhäuft, die ausschließlich für seine eigenen statistischen Zwecke bestimmt sind. Nein Danke.

Mobile Formulare – Kontoregistrierungen, Checkouts usw. – sind mit ihren eigenen einzigartigen UX-Problemen und -Herausforderungen behaftet. Die Eingabe ist umständlich, da der Bildschirm klein ist und keine Tastatur in voller Größe vorhanden ist. Benutzer müssen ihre Fingerspitzen verwenden, um UI-Elemente anzutippen und zu streichen. Die Texteingabe ist besonders langsam und mit Tippfehlern übersät, selbst auf Geräten mit dedizierten Mini-Tastaturen.

Kleine Bildschirme bedeuten weniger sichtbare Optionen zu einem bestimmten Zeitpunkt, sodass sich die Benutzer auf ihr Kurzzeitgedächtnis verlassen müssen, um ein mentales Modell des Systems hinter den Kulissen zu erstellen.

UX-Design für mobile Webformulare
Die Schritte zum Erstellen eines Profils von Domino's Pizza sind auf Mobilgeräten mit schlechter Benutzerfreundlichkeit behaftet und erfordern zu viele umständliche Benutzerinteraktionen.

Weiterentwicklung von Webformularen

Webformulare befinden sich mitten in einer Evolutionsphase. Vor der Geburt eines völlig neuen Paradigmas befinden wir uns irgendwo zwischen der schmerzhaften, klobigen, mühsamen und sich wiederholenden frühen Phase des „Eintippens in Formulare“ und der leichtfüßigen, albernen Zukunft, in der Touch ID, Sprachausgabe, Computer Vision, Gesichtserkennung und Iris-Scans entschlüsseln unsere persönlichen Daten und liefern nahtlos und sicher alle erforderlichen Informationen an Systeme, die sie benötigen.

UX-Designer streben ständig danach, das Erlebnis zu verbessern und den Schmerz zu reduzieren, der mit dem Ausfüllen von Webformularen einhergeht, aber in dieser Zwischenphase liefern sie immer noch nur „Vitamine“ – kaum die ultimative „Painkiller“-Lösung.

Um ein benutzerfreundlicheres, nahtloses Benutzererlebnis zu bieten, versuchen einige der neuesten Formulardesigns, einige der Frustrationen zu beseitigen, indem sie eine Schnittstelle implementieren, die keinerlei Ähnlichkeit mit herkömmlichen Formularen aufweist. Sie schaffen es zwar, unser Leben deutlich einfacher zu machen, haben aber noch einen weiten Weg vor sich.

Conversational UI-Webformular-Design von Typeform
Typeform verwendet eine „Conversational UI“ für eine schnelle Benutzererfahrung auf diesem Bewerbungsformular. Tastenkombinationen sind angegeben und in die meisten Schritte und Antworten integriert, was das Ausfüllen eines Formulars sehr effizient macht.

Autofill kommt zur Rettung

Der Chrome-Browser von Google und seine AutoFill-Funktion waren ein lang erwarteter Glücksfall für eine effizientere Formularerfüllung. Es speichert häufig eingegebene persönliche Daten sicher – einschließlich Kreditkarten – zum schnellen Ausfüllen von Webformularen. Eine kürzlich von Google durchgeführte Studie ergab, dass das Deaktivieren der AutoFill-Funktion von Chrome zu 25 % weniger Formularübermittlungen führte. Die Studie hat gezeigt, dass die Erfahrung ohne sie so lästig ist, dass einige Benutzer das Ausfüllen von Formularen ganz aufgeben.

Überraschung! Mühsames Eintippen in Formulare möchte man vermeiden.

Automatisches Ausfüllen von Google Chrome
Die Autofill-Funktion von Google Chrome hilft beim wiederholten Ausfüllen von Webformularen.

Passwort-Manager lindern den Schmerz

Das ständige Abrufen und Eingeben von Passwörtern für Hunderte von Online-Konten ist lästig. Passwort-Manager kamen vor einigen Jahren zu Hilfe und sind heute weit verbreitet. 1Password und Dashlane sind zwei führende Lösungen, die mit wenigen Klicks oder Taps verschlüsselte Passwörter für Websites und Apps sicher speichern und automatisch ausfüllen.

Automatisches Ausfüllen des mobilen Passwort-Managers
Nach dem Entsperren mit einem Master-Passwort oder einer Fingerabdruck-Touch-ID füllt der Passwort-Manager von Dashlane Passwörter automatisch aus.

Social Sign-ins machen der Registrierung ein Ende

Laut einer von WebHostingBuzz zusammengestellten Studie geben 86 % der Benutzer an, dass sie sich darüber ärgern, neue Konten erstellen zu müssen. Ein Social Sign-In macht eine Registrierung überflüssig. Es handelt sich um eine Form der einmaligen Anmeldung, bei der vorhandene Informationen von sozialen Netzwerkdiensten wie Facebook, Google+, LinkedIn und Twitter verwendet werden. Es erhöht die Registrierung und minimiert Eintrittsbarrieren, indem die Notwendigkeit von Benutzernamen und Passwörtern reduziert wird.

Soziale Anmeldung, soziale Anmeldung

Mobile Device Tech erleichtert die Belastung durch Formulare

Es wurden zahlreiche Verbesserungen der Benutzerfreundlichkeit für mobile Formulare vorgenommen, die auch einige der neuen Best Practices auf Desktops vorantreiben – wie das Speichern und Abrufen häufig verwendeter Werte, die Verwendung von Telefonfunktionen (Kamera, GPS, Sprache, Kontaktliste) zum Vorbefüllen von Formularen und Daten automatisch formatieren (basierend auf einer Postleitzahl wählen Sie den US-Bundesstaat vor).

Außerdem kann je nach Art der erforderlichen Eingabe die Tastatur geändert werden; Vorschläge/Autovervollständigung basierend auf den eingegebenen Anfangsbuchstaben können verwendet werden, und Telefonnummern und Kreditkartennummern können automatisch formatiert werden.

Apple Pay, Computervision
Die Apple Pay App verwendet die Kamera und Computer Vision des iPhones, um einfach ein Foto von einer Karte zu machen, um sie zu registrieren, ohne dass eine langwierige Tastatureingabe erforderlich ist.

Webformular-Trends

Wie bereits erwähnt, folgt das traditionelle Design von Webformularen dem alten papierbasierten Modell; deshalb sehen sie sich so ähnlich. Früher war die Technologie zum Sammeln personenbezogener Daten auf andere Weise nicht verfügbar, aber heute ist sie verfügbar. In dem Bestreben, herkömmliche Webformulare vollständig hinter sich zu lassen, präsentieren Designer den Benutzern eine saubere Benutzeroberfläche und unterstrichene Bereiche, um anzuzeigen, wohin Texteingaben gehen. Auf diese Weise fühlt sich das Ausfüllen eines Formulars natürlicher und weniger wie eine Dateneingabe an.

Design von mobilen Webformularen
Um vom „Dateneingabe“-Look mit Eingabefeldern und Dropdowns wegzukommen, entwickeln Designer sauberere Designs für mobile Formulare.


Desktop-Webformular-Design
Ein Desktop-Google-Formular.

Ein weiterer Trend besteht darin, das Ersuchen um Benutzereingaben dialogorientierter zu gestalten, wodurch eine menschlichere Interaktion entsteht. Als Vorläufer einer anspruchsvolleren Welt von Chatbots und anderen Eingabemethoden der Zukunft beinhaltet es das Verweben von Benutzereingabefeldern in natürlich fließende Sätze und Fragen.

Conversational UI-Webformular-Design
Ein einfaches, dialogorientiertes Kontaktformular. (Nelu Cebotari)


Konversationelles mobiles Webformular-Design für den Handel
Mobile Formulare werden minimalistisch und dialogorientiert. (Entwürfe von Alex Cristache und Fabio Basile auf Dribbble)

Maschinen sprechen zurück: Chatbots und der Aufstieg automatisierter Agenten

Typischerweise sind Bots Plattformen für künstliche Intelligenz, die Instant Messaging als Anwendungsschnittstelle verwenden. Anstatt die Benutzer zu belasten, indem sie sie bitten, Formulare auszufüllen, entlasten Chatbots diese Last, indem sie die Interaktion natürlicher und dialogorientierter gestalten – einige Bots sind keine KI, sondern echte Menschen, die per Chat interagieren, um ein großartiges Benutzererlebnis zu bieten.

Auch wenn der Zeitaufwand gleich sein kann – zum Beispiel um eine einfache Reisebuchung abzuschließen –, weil die Interaktion dialogorientiert und in Blöcke aufgeteilt ist, wird die kognitive Belastung reduziert und das Erlebnis verbessert.

Konversations-UI-Chatbot GoVoteBot
R/GA und das Ad Council haben einen Voting-Bot entwickelt, um Millennials zu den Wahlen zu bringen. Einfach GoVoteBot genannt, interagiert es mit Benutzern in Echtzeit auf Facebook Messenger.

Reisende können jetzt mit der Facebook Messenger-App Reservierungen bei Hyatt Hotels vornehmen oder einfach an einem Live-Chat mit dem Hyatt-Team teilnehmen, um formlose Fragen zu stellen – etwa, ob es an bestimmten Feiertagen Verfügbarkeiten gibt.

Conversational UI Konversations-Commerce-Chatbot Hyatt
Mit Facebook Messenger nutzt Hyatt Hotels seine Kundenbetreuer, um Gästen bei Reservierungen und Verfügbarkeitsprüfungen zu helfen.

Das Versicherungswesen ist eine weitere Branche, die bereit ist, durch den Aufstieg automatisierter Agenten gestört zu werden. Facebook, das seine Messenger-Plattform für jedermann zur Verfügung stellt, um Chatbots zu entwickeln und einzusetzen, öffnete auch die Tür für den automatisierten Versicherungsagenten.

Jack Insurance in Großbritannien macht genau das. Es wurde entwickelt, um freiberuflichen Kreativen und Webprofis wie Webdesignern, Entwicklern und Illustratoren eine einfache Geschäftsversicherung anzubieten.

Konversations-UI-Chatbot von Jack Insurance
Jack ist ein einfacher Chatbot, der Fachleute durch den Versicherungsprozess führt – keine Formulare.

Das Ausfüllen von Formularen mit Chatbots und dergleichen zu unterstützen, ist jedoch nur die halbe Maßnahme. Das wird auf Dauer nicht funktionieren, weil Menschen auch weiterhin viele persönliche Daten immer wieder preisgeben müssen.

Wir können Probleme nicht lösen, indem wir die gleiche Denkweise anwenden, mit der wir sie geschaffen haben. - Albert Einstein

Um von der „Vitamin“-Phase zu einem echten Schmerzmittel zu gelangen, müssen wir umdenken und einen großen Sprung in das neue Paradigma machen.

Der Aufstieg der KI: Benutzerfreundliche Datenerfassung von morgen

Wer hat nicht den mühsamen und sich wiederholenden Prozess durchlaufen, einen Sommerurlaub zu buchen? Als ich kürzlich einen plante, füllte ich unzählige Formulare mit drei Fluggesellschaften, einem Dutzend Hotels, zwei Autovermietungen, Flughafentransfers … immer und immer wieder mit denselben Namen, Adressen, Kreditkartennummern, Vielfliegerclubnummern, Telefonnummern, E-Mail-Adressen aus Adressen … der Prozess ist absolut seelentötend und völlig lächerlich.

Google berichtet, dass der Stress ungebremst ist: 69 % der Urlaubsreisenden befürchten, dass sie bei der Buchung einer Reise nicht den besten Preis finden oder die beste Entscheidung treffen. Hinzu kommt die schlechte Benutzererfahrung beim Ausfüllen endloser Formulare mit den gleichen Informationen in 90 % der Fälle, und wir sprechen von einem Prozess, der unglaublich frustrierend und stressig ist. Selbst mit der Autofill-Funktion von Chrome und den anderen zuvor erwähnten Annehmlichkeiten ist die Erfahrung immer noch erschütternd und voller Langeweile.

Die langfristige UX-Vision besteht nicht darin, Webformulare weiter zu perfektionieren, sondern sie vollständig zu töten.

Wie bereits erwähnt, ist aufgrund der Vielzahl von Technologien, die auf Mobilgeräten verfügbar sind: GPS, Fingerabdruck (Touch ID), Stimmabdruck und -erkennung, Iris-Scans, Gesichtserkennung, Computer Vision, KI-Assistenten und Chatbots, die unvermeidliche Erfassung personenbezogener Daten erforderlich die für eine erfolgreiche Online-Transaktion auftreten, wird zuerst auf Mobilgeräten revolutioniert. Dementsprechend könnten Desktop-Sites die technischen Fähigkeiten mobiler Geräte für eine ausgeklügelte ID-Verifizierung nutzen, indem sie mit ihnen verknüpft werden.

Gesprächsbasierte Reisebuchung statt Webformulare
Können wir der herkömmlichen Suche, dem Filtern von Ergebnissen und Webformularen ein Ende setzen und eine einfachere, radikal angenehmere Interaktion beim Versuch, Reisen zu buchen, schaffen?

Stellen wir uns eine ideale Zukunft mit einem persönlichen Datentresor vor, der alles über eine Person supersicher speichert: Name, Privatadresse, Arbeitsadresse, Telefonnummern, Vielfliegermeilen, Geburtsdatum usw. Dieser persönliche Datentresor könnte durch a entsperrt werden Kombination aus biometrischen Überprüfungen, Sicherheitsfragen und einem Master-Passwort. Nach dem Entsperren und Gewähren des Zugriffs kann die Website oder App auf alle erforderlichen Informationen zugreifen, ohne dass der Benutzer Informationen eingeben muss.

Biometrische Identifizierung und Sicherheit personenbezogener Daten, Webformulare

Je nach Plattform und Gerät können unterschiedliche Methoden und Fallbacks verwendet werden, um den Tresor zu entsperren. Um zu vermeiden, dass Benutzer Daten eingeben müssen, würde das System dann mithilfe eines Chatbots oder einer anderen Konversations-UI mit optionaler Spracherkennung und Verarbeitung natürlicher Sprache einfache Fragen stellen. Wenn eine Spracheingabe nicht praktikabel ist, wäre eine Tastatureingabe verfügbar.

Um noch einen Schritt weiter zu gehen, könnte dieser Tresor für persönliche Daten mit anderen Tresoren (z. B. dem eines Partners oder Ehepartners) verknüpft werden, die mit Zustimmung des Eigentümers vorübergehend entsperrt würden, um auf relevante Informationen zuzugreifen (der Zugriff wäre kurz und nur die angeforderten Informationen wären). zur Verfügung gestellt). Eine Reise-App oder -Website könnte dann sicher auf alle erforderlichen Daten zugreifen und mühelos Reisevorbereitungen treffen.

Webformulare werden bald zur alten Schule – interessante Artefakte einer vergangenen Ära, für die es keinen Bedarf mehr geben wird. In dem oben beschriebenen Szenario werden UX-Designer damit konfrontiert, bessere Erlebnisse ohne Formulare zu entwerfen. Alle herkömmlichen Interaktionen, einschließlich der Eingabe von Informationen in Webformulare, würden in den Hintergrund treten.

Die Art der Benutzereingabe ändert sich

Die Internet- und Smartphone-Nutzung haben eine überwältigende, allgegenwärtige Fülle an Daten geschaffen. „Zukunftstechnologien“ wie Computer Vision, IoT, künstliche Intelligenz und maschinelles Lernen sind bereits da und verändern die Art der Interaktionen und die UX-Landschaft.

Herkömmliche UIs verschwinden, und Webformulare sind ein Teil dieser Verschiebung. Sicherlich wird ein gewisser Bedarf an Benutzereingabeformularen nie verschwinden, aber unsichtbare Schnittstellen – bei denen immer weniger Benutzerinteraktionen erforderlich sein werden, um Eingaben zu machen – werden weit verbreitet sein.

KI-Techniken wie maschinelles Lernen können aus dem Zugriff auf personenbezogene Daten einen Mehrwert ziehen, und intelligente Algorithmen können vorhersagen, welche Daten benötigt werden, um das Ausfüllen von Bewerbungen, Reisebuchungen und Online-Einkäufen für Benutzer zu erleichtern.

Während wir uns für hoffnungsvolle Bestrebungen einsetzen und diese erhabenen UX-Ideale verfolgen, bleibt eine Kluft zwischen erfinderischen Methoden zur vollständigen Eliminierung von Webformularen und Sicherheitsbedenken in Bezug auf personenbezogene Daten. Robuste und sichere Systeme können entworfen werden, aber wir müssen uns mit diesen Bedenken auseinandersetzen. Studien haben gezeigt, dass Menschen bereit sind, persönliche Daten zu teilen und ein Tracking zuzulassen, wenn sie daraus einen signifikanten Wert und eine Zeitersparnis ziehen.

Um dem Spiel immer einen Schritt voraus zu sein, sollten UX-Designer anfangen, über Zukunftsszenarien voller Chatbots und Konversations-UIs nachzudenken. Wir müssen die Erfahrung optimieren und die Anwendungsszenarien herausfinden. Sind die Interaktionsschritte so reibungslos und effizient wie möglich? Wie ist der Ton des Chatbots? Verringern wir die Zeit, die benötigt wird, um Dinge zu erledigen, oder erhöhen wir sie? Wie wird diese Interaktion angesichts der kommenden biometrischen ID-Überprüfungen aussehen? Wie können wir unsere Benutzer besser bedienen und erstaunliche Erfahrungen liefern, die das Leben einfacher machen?

Die Technologie und die Art der Interaktionen werden sich ändern, aber die Summe und Substanz der Best Practices des UX-Designs – der benutzerzentrierte Designprozess – wird sich weiterentwickeln und letztendlich durchsetzen.

• • •

Weiterführende Literatur im Toptal Design Blog:

  • eCommerce UX – Best Practices im Überblick (mit Infografik)
  • Die Bedeutung von Human-Centered Design im Produktdesign
  • Die besten UX-Designer-Portfolios – inspirierende Fallstudien und Beispiele
  • Heuristische Prinzipien für mobile Schnittstellen
  • Antizipatorisches Design: Wie man magische Benutzererlebnisse schafft