Frustrierende Designmuster, die repariert werden müssen: Geburtstagsauswahl

Sie haben sie schon einmal gesehen. Verwirrende und frustrierende Designmuster, die Sie scheinbar überall hin verfolgen, von einer Website zur anderen. Vielleicht ist es eine deaktivierte Senden-Schaltfläche, die nie mitteilt, was tatsächlich falsch ist, oder Tooltips, die – einmal geöffnet – das Eingabefeld abdecken , wenn Sie einen Fehler korrigieren müssen. Sie sind überall, und sie sind nervig und werfen uns oft von einer Sackgasse in die andere, in etwas, das wie eine gut orchestrierte und schlecht gestaltete Mausefalle erscheint.

Diese Muster sind weder bösartig noch böse. Mit irreführenden Cookie-Eingabeaufforderungen oder mysteriösen CAPTCHAs in Verkleidung von Hydranten und Zebrastreifen haben sie nicht viel gemeinsam. Sie sind auch nicht mit schlechten Absichten oder Schaden im Hinterkopf konzipiert: Niemand wacht morgens auf und hofft, die Absprungraten zu erhöhen oder die Konversion zu verringern.

Es ist nur so, dass im Laufe der Jahre einige mehr oder weniger zufällige Designentscheidungen weithin akzeptiert und übernommen wurden und daher immer wieder wiederholt werden – oft ohne in Frage gestellt oder durch Daten- oder Usability-Tests validiert zu werden. Sie sind zu etablierten Designmustern geworden. Und oft ganz arme . Immer wieder unter Benutzerbeschwerden beim Testen auftauchend.

In dieser neuen Artikelserie werfen wir einen genaueren Blick auf einige dieser frustrierenden Entwurfsmuster und erkunden bessere Alternativen , zusammen mit vielen Beispielen und Fragen, die Sie beim Erstellen oder Entwerfen berücksichtigen sollten. Diese Erkenntnisse stammen aus Benutzerforschung und Usability-Tests, die von Ihnen und Kollegen in der Community durchgeführt wurden, und natürlich wird auf sie alle in jedem der kommenden Posts verwiesen.

Wir beginnen mit einem bescheidenen und scheinbar harmlosen Muster, das wir alle schon einmal erlebt haben – die berüchtigte Geburtstagsauswahl , die allzu oft unzugänglich, langsam und umständlich zu bedienen ist. Wir haben bereits ausführlich über perfekte Datums- und Zeitauswahl geschrieben, aber Geburtstagsauswahl verdient ein separates Gespräch.

Frustrierende UX: Geburtstags-Dropdown/Widgets ab 2021

Jedes Mal, wenn Sie sich bewerben, ein Bankkonto eröffnen oder einen Flug buchen, müssen Sie wahrscheinlich Ihr Geburtsdatum eingeben . Offensichtlich ist die Eingabe ein date , und daher sollte es nicht sehr überraschend sein, Schnittstellen zu sehen, die ein gut angenommenes Datumsauswahl-Kalender-ähnliches Widget (nativ oder benutzerdefiniert) oder ein Dropdown-Menü verwenden, um nach dieser bestimmten Eingabe zu fragen .

Wir können wahrscheinlich die Gründe erkennen, warum diese Optionen oft bevorzugt werden. Aus technischer Sicht wollen wir sicherstellen, dass die Eingabe korrekt ist, und Fehler frühzeitig abfangen . Unsere Validierung muss kugelsicher genug sein, um die Eingabe zu validieren, eine klare Fehlermeldung bereitzustellen und zu erklären, was genau der Kunde tun muss, um das Problem zu beheben. Wir haben einfach nicht all diese Probleme mit einem Dropdown- oder einem Kalender-Widget. Außerdem können wir Gebietsschema- oder Formatierungsunterschiede leicht verhindern, indem wir nur die Optionen anbieten, die der Rechnung entsprechen.

Es scheint, dass der beste Weg, um Fehler zu vermeiden, darin besteht, eine Benutzeroberfläche so zu gestalten, dass Fehler nur schwer gemacht werden können. Das könnte bedeuten, beim Formulardesign streng und explizit zu sein – im Grunde nur wohlgeformte Eingaben zuzulassen. Schließlich ist es unmöglich, eine falsch formulierte Eingabe bereitzustellen, wenn alle verfügbaren Auswahlmöglichkeiten wohlgeformt sind. Aber während die Eingabe in der Tat wohlgeformt ist, muss sie nicht genau sein, insbesondere wenn das Bereitstellen dieser Eingabe ermüdend und frustrierend ist.

In der Praxis machen wir tatsächlich ähnliche Fehler mit überkomplizierten und strengen Passwortanforderungen. Es ist nicht ungewöhnlich, dass sich Menschen über diese Anforderungen so ärgern, dass sie Passwörter auf eine Haftnotiz auf ihrem Bildschirm schreiben oder sie in einer personal.txt -Datei auf ihrem Desktop verstecken, nur um sie bei Bedarf erneut eingeben zu können. Firmen-WLAN-Passwörter und eine komplexe SuperPIN für das Online-Banking sind gute Beispiele dafür.

Es stellt sich heraus, dass Menschen sehr kreativ darin sind , die Regeln zu ihren Gunsten zu biegen . Wenn also ein System nicht verwendbar ist, ist es nicht sicher; und wenn eine Formulareingabe nicht verwendbar ist, werden die Daten, die wir erhalten, weniger genau sein und zu mehr Fehlern führen. Letztendlich würde dies natürlich zu Situationen führen, in denen Benutzer ausgesperrt werden und gezwungen sind, die Benutzeroberfläche zu verlassen, da sie keine Fortschritte machen können.

Diese Medaille hat auch eine Kehrseite. Wir könnten natürlich jegliche Komplexität eliminieren und immer nur ein einziges Eingabefeld bereitstellen, in das Benutzer eingeben können, was sie bevorzugen. In der Praxis bedeutet dies, dass sie tatsächlich tippen , was sie bevorzugen, oft auf eine schlecht strukturierte und ineffiziente Weise.

Bei einer Geburtstagseingabe geben Kunden in Usability-Tests von Juli bis Juli bis 06 bis 6 alles ein, oft mit zufälligen Trennzeichen und einigen Tippfehlern und mit einer gemischten Reihenfolge von Tagen, Monaten und Jahren. Das Validieren dieser Eingabe nach dem Absenden bringt den Benutzern keine guten Dienste, da sie nicht wissen, welche Eingabeformatierung funktionieren würde. Offensichtlich erfüllt es unsere Bedürfnisse auch nicht gut.

Bei unserem Design müssen wir eine respektvolle, unkomplizierte Anleitung bieten, zusammen mit einer zugänglichen technischen Implementierung. Dies bringt uns zu einigen häufigen Nachteilen von nativen Datumsauswahlen und Dropdowns.

Die Fallstricke nativer Datumsauswahl und Dropdowns

Unglücklicherweise bringen native Datumsauswahlen , die von <input type="date"> aufgefordert werden, jede Menge Alpträume mit sich. Zum Zeitpunkt des Schreibens sind sie, wenn sie sofort verwendet werden, keine sehr zugängliche Wahl für so ziemlich jede Art von Datumseingabe. Es gibt nicht nur viele Screenreader-Probleme, sondern auch Fokus- und Layoutprobleme, verwirrende und allgemeine Fehlermeldungen.

Ich habe eine ganze Reihe von Implementierungen gesehen, die die Tastatureingabe vollständig deaktivieren (siehe oben), sodass Kunden ausschließlich das Kalender-Widget der nativen Datumsauswahl verwenden müssen. Und das ist schmerzhaft, schmerzhaft langsam. Ohne ein Fallback für Tastatureingaben müssen sich Benutzer zwischen Tagen, Monaten und Jahren auf eine langwierige Reise begeben, die Dutzende und Aberdutzende von Taps oder Klicks erfordert .

Während wir das Datum sofort kennen, fordert uns die Benutzeroberfläche auf, zwischen den Daten zu navigieren und unser Datum in der Monatsübersicht zu finden , sobald wir dort angekommen sind. Das ist der Grund, warum diese Erfahrungen frustrierend sind.

In diesem Licht sind Dropdowns viel schneller und einfacher zu navigieren. Sie sind standardmäßig zugänglich, und anstatt zwischen Monaten und Jahren zu navigieren, reicht es aus, die richtigen Zahlen in 3 Listen zu finden – Tage, Monate und Jahre. Aber Dropdowns sind immer noch langsam. Sie haben Zoomprobleme. Scrollbare Optionen zu kneifen ist ermüdend. Sie nehmen viel Platz ein. Die Liste der Jahre ist lang. Und wenn wir die Eingabe spezifizieren, müssen wir auf das Steuerelement tippen, dann scrollen (normalerweise mehr als einmal), das Ziel finden und auswählen und mit dem nächsten Dropdown fortfahren. Es ist auch nicht berauschend.

Daher ist es nicht ungewöhnlich, dass Dropdown-Menüs als Ultima Ratio für die Benutzeroberfläche betrachtet und normalerweise durch Schaltflächen (z. B. für Filter), Umschalter, segmentierte Steuerelemente oder Felder für die automatische Vervollständigung ersetzt werden, die die Flexibilität eines Textfelds mit der Gewissheit eines <select> kombinieren - Kasten. Dropdowns sind per se nicht schlecht; Es ist nur so, dass Benutzer viel mehr Zeit als nötig damit verbringen, die Daten in sie einzugeben.

Und dann gibt es noch eine Frage zu den Standardwerten . Während wir bei Dropdowns oft standardmäßig keinerlei Eingabe vornehmen ( mm/dd/yyyy ), müssen wir bei einer Datumsauswahl einen Ausgangspunkt für die Kalenderansicht bereitstellen. Im letzteren Fall liegt das „Start“-Datum ironischerweise normalerweise genau um das Datum herum, an dem das Formular ausgefüllt wird, z. B. der 15. Mai 2021 . Das erscheint natürlich nicht optimal, aber was sollte das richtige Datum sein? Irgendwo müssen wir anfangen, oder?

Nun, es gibt wirklich kein richtiges Datum . Wir könnten früh oder spät anfangen, vor 3 Monaten oder morgen, aber im Falle eines Geburtstagspflückers sind all diese Optionen reine Vermutungen. Und als solche sind sie etwas frustrierend: Ohne jegliche Eingabe müssen Kunden möglicherweise den ganzen Weg von 1901 bis in die späten 1980er Jahre scrollen, und mit einigen Eingaben müssen sie sie korrigieren, wobei sie oft Jahrzehnte hin und her springen. Diese Interaktion erfordert tadellose Präzision beim Scrollen.

Egal, welche Wahl wir treffen, wir werden fast immer falsch liegen. Dies ist wahrscheinlich anders für eine Hotelbuchungswebsite oder einen Essenslieferdienst und viele andere Anwendungsfälle – nur nicht für Geburtstagseingaben. Dies bringt uns zu dem Gespräch darüber, wie man objektiv bewertet, wie gut eine Formulareingabe gestaltet ist.

Bewertung der Qualität des Formularentwurfs

Design kann als sehr subjektive Angelegenheit angesehen werden. Schließlich scheint jeder seine eigene Meinung und Präferenzen über die richtige Herangehensweise für ein bestimmtes Problem zu haben. Aber im Gegensatz zu jeder Art von Selbstdarstellung oder Kunst soll Design ein Problem lösen. Die Frage ist also, wie gut ein bestimmtes Design ein bestimmtes Problem löst. Je eindeutiger die Absicht des Designers wiedergegeben wird, je weniger Fehler Kunden machen, je weniger sie unterbrochen werden, desto besser ist das Design. Diese Attribute sind messbar und objektiv .

Nach meiner eigenen Erfahrung sind Formulare der schwierigste Aspekt der Benutzererfahrung. Es gibt so viele schwierige Facetten von Mikrokopie und Formularlayout bis hin zu Inline-Validierung und Fehlermeldungen. Um Formulare richtig zu machen, müssen häufig Back-End-Fehler und Fehler von Drittanbietern ordnungsgemäß an das Front-End weitergegeben und eine komplexe zugrunde liegende Struktur in eine Reihe von vorhersehbaren und vernünftigen Formularfeldern vereinfacht werden. Dies kann bei komplexen Legacy-Anwendungen und Integrationen von Drittanbietern leicht zu einem frustrierenden Albtraum werden.

Wenn es also um das Formulardesign geht, versuchen wir in unseren Projekten immer, die Qualität einer bestimmten Lösung anhand der folgenden 9 Attribute zu messen:

• Mentales Modell
  Wie gut passt unser Formulardesign in das mentale Modell des Kunden? Wenn wir nach persönlichen Daten fragen, müssen wir genau das Minimum von dem verlangen, was für uns erforderlich ist, um unseren Kunden den Einstieg zu erleichtern. Wir sollten nicht nach sensiblen oder persönlichen Daten (Geschlecht, Geburtstag, Telefonnummer) fragen, es sei denn, wir haben einen guten Grund dafür, und dies in der Benutzeroberfläche erklären.
• Komplexität
  Wie viele Eingabeelemente zeigen wir pro Seite, auf dem Handy und auf dem Desktop an? Wenn ein Formular 70–80 Eingabefelder enthält, anstatt sie alle auf einer Seite anzuzeigen oder ein mehrspaltiges Layout zu verwenden, kann es eine gute Idee sein, ein Aufgabenlistenmuster zu verwenden, um die Komplexität in kleinere, überschaubare Teile zu zerlegen.
• Eingabegeschwindigkeit
  Wie viel Zeit und Aufwand braucht der Kunde, um Daten korrekt auszufüllen? Wie viele Klicks/Tastenanschläge/Operationen sind für eine bestimmte Eingabe erforderlich, um das Formular mit den angegebenen Daten genau auszufüllen, vorausgesetzt, dass dabei keine Fehler gemacht werden.
• Barrierefreiheit
  Wenn wir über die Eingabegeschwindigkeit sprechen, müssen wir sicherstellen, dass wir verschiedene Interaktionsmodi unterstützen, in erster Linie Screenreader-Benutzer und Tastaturbenutzer. Das bedeutet unter anderem richtig gesetzte Beschriftungen, große Schaltflächen, über dem Eingabefeld platzierte Beschriftungen und korrekt kommunizierte Fehler.
• Skalierbarkeit
  Wenn wir jemals die Benutzeroberfläche in eine andere Sprache übersetzen oder für einen anderen Formfaktor anpassen müssten, wie einfach wäre das und wie viele Probleme würde es verursachen? (Ein typisches Beispiel für eine problematische Lösung ist ein Floating-Label-Muster, und wir werden darüber in einem separaten Beitrag sprechen.)
• Schweregrad der Unterbrechungen
  Wie oft unterbrechen wir Kunden, sei es beim Laden von Spinnern, früher oder später Inline-Validierung, Einfrieren von Teilen der Benutzeroberfläche, um die Benutzeroberfläche basierend auf der bereitgestellten Benutzeroberfläche anzupassen (z. B. sobald ein Land ausgewählt wurde), die Häufigkeit falsch vorausgefüllter Daten, oder falsch autokorrigierte Daten?
• Erfolgsquote bilden
  Wie viele Kunden füllen ein Formular ohne einen einzigen Fehler erfolgreich aus? Wenn ein Formular gut gestaltet ist, sollte eine große Mehrheit der Kunden überhaupt keine Fehler sehen. Dies erfordert beispielsweise, dass wir auf das automatische Ausfüllen des Browsers zugreifen, die Tab-Reihenfolge logisch ist und Änderungen konventionell und offensichtlich sind.
• Geschwindigkeit der Genesung
  Wie hoch ist der Anteil der Kunden, denen es gelingt, den Fehler zu entdecken, zu beheben und zum nächsten Schritt des Formulars überzugehen? Wir müssen nachverfolgen, wie oft Fehlermeldungen angezeigt werden und welche Fehlermeldungen am häufigsten vorkommen. Deshalb ist es auch oft eine gute Idee, beim Kundendienst vorbeizuschauen und zuerst mit ihm zu klären, worüber sich Kunden häufig beschweren.
• Formularfehlerrate
  Wie viele Kunden verlassen das Formular? Dies geschieht in der Regel nicht nur aufgrund der Komplexität des Formulars, sondern auch, weil Kunden aufgrund von aggressiven Validatoren oder deaktivierten „Senden“-Schaltflächen keine Möglichkeit finden, einen Fehler zu beheben. Es kommt auch vor, weil das Formular ohne guten Grund zu viele sensible und persönliche Informationen abfragt.

Um zu verstehen, wie gut ein Formular funktioniert, führen wir Usability-Studien mit Kunden durch, die auf die Benutzeroberfläche auf ihrem eigenen Computer zugreifen – sei es ein Mobilgerät, ein Tablet, ein Laptop oder ein Desktop – auf ihrem eigenen Betriebssystem und in ihrem eigenen Browser. Wir bitten darum, den Bildschirm nach Möglichkeit aufzuzeichnen und ein lautes Denkprotokoll zu verwenden, um zu verfolgen, wo und wie und warum Fehler passieren. Wir untersuchen auch, wie schnell der Kunde von einem Formularfeld zum anderen wechselt, wann er innehält und nachdenkt und wann die meisten Fehler passieren.

Offensichtlich lässt die schiere Anzahl an Taps oder Klicks nicht immer darauf schließen, dass die Eingabe einfach oder umständlich war. Aber einige Eingabemodi könnten eher Fehler erzeugen oder Verwirrung stiften, und andere könnten Ausreißer sein und im Vergleich zu anderen Optionen einfach viel mehr Zeit in Anspruch nehmen. Das suchen wir in Tests.

Sehen wir uns nun an, wie wir es auf das Geburtstagseingabeproblem anwenden können.

Entwerfen eines besseren Geburtstagseingangs

Wenn Sie jemand nach Ihrem Geburtstag fragt, haben Sie wahrscheinlich eine bestimmte Ziffernfolge im Sinn. Es könnte in dd/mm/yyyy oder MM/TT mm/dd/yyyy , aber es wird eine Zeichenfolge mit 8 Ziffern sein, die Sie seit einem sehr jungen Alter in allen Arten von Dokumenten wiederholen.

Wir können dieses einfache Modell einer Geburtstagseingabe mit einem einfachen Einzeleingabefeld nutzen, das alle drei Eingaben kombiniert – Tag, Monat und Jahr. Das würde bedeuten, dass der Benutzer einfach eine Reihe von 8 Zahlen eingeben und die ganze Zeit auf der Tastatur bleiben würde.

Dieser Ansatz wirft jedoch einige Probleme auf:

• wir müssen die automatische Formatierung und Maskierung unterstützen,
• wir müssen die Position der Tag/Monat-Eingabe erklären,
• wir müssen das Verhalten der Backspace -Taste über die Eingabe hinweg unterstützen,
• wir müssen die Maskierung nachverfolgen und ausblenden/anzeigen/permanent anzeigen,
• Wir müssen Sprünge in einen bestimmten Wert (z. B. Monat) unterstützen.
• Wir müssen Wutklicks und Navigation innerhalb der Eingabe minimieren, um einen bestimmten Wert auf Mobilgeräten zu ändern.
• Wenn die automatische Erstellung nicht verwendet wird, müssen wir eine Reihe von Bereinigungs- und Validierungsregeln entwickeln, um jede Art von Trennzeichen zu unterstützen.

In seinem Buch über Form Design Patterns argumentiert Adam Silver, dass die Verwendung mehrerer Eingaben anstelle einer Eingabe selten eine gute Idee ist, aber eine gute Option für date . Wir können klar kommunizieren, was jede Eingabe darstellt, und wir können die spezifische Eingabe mit Fokusstilen hervorheben. Außerdem ist die Validierung viel einfacher, und wir können leicht mitteilen, welcher bestimmte Teil der Eingabe ungültig zu sein scheint und wie er behoben werden kann.

Wir könnten den Benutzer entweder automatisch von einer Eingabe zur nächsten wechseln, wenn die Eingabe abgeschlossen ist, oder Benutzern erlauben, selbst zwischen den Feldern zu wechseln. Ersteres scheint auf den ersten Blick besser zu sein, da die Eingabe nur 8 Ziffern erfordern würde, die hintereinander getippt werden. Wenn Benutzer jedoch Fehler beheben, benötigen sie häufig Eingabepuffer – Platz innerhalb des Eingabefelds, um vorhandene Eingaben zu korrigieren.

Zum Beispiel ist es üblich, Leute zu sehen, die 01 eingeben, erkennen, dass sie einen Fehler gemacht haben, dann die Eingabe auf 010 ändern und dann die erste 0 entfernen, nur um am Ende eine umgekehrte (und korrekte) Zeichenfolge zu erhalten – 10. Durch Vermeiden Durch einen automatischen Übergang von einem Feld zum nächsten verursachen wir möglicherweise weniger Probleme und machen die einfache Benutzeroberfläche etwas vorhersehbarer und einfacher zu handhaben.

Um die Eingabe zu erklären, müssten wir Beschriftungen für Tag, Monat und Jahr bereitstellen und vielleicht auch ein Beispiel für die korrekte Eingabe zeigen. Die Beschriftungen sollten keine schwebenden Beschriftungen sein, sondern könnten sich bequem über dem Eingabefeld befinden, zusammen mit allen Hinweisen oder Beispielen, die wir möglicherweise anzeigen möchten. Außerdem kann jede Eingabe auch im Fokus hervorgehoben werden.

Im Laufe der Jahre konnte ich in jahrelangen Tests kein einziges Problem mit dieser Lösung erkennen, und es ist nicht verwunderlich, dass das Muster auch auf Gov.uk verwendet wird.

Wenn Sie doch eine Datumsauswahl brauchen

Während die obige Lösung wahrscheinlich mehr als genug für eine Geburtstagseingabe ist, ist sie möglicherweise nicht gut genug für allgemeinere Situationen. Möglicherweise benötigen wir eine Datumseingabe, die weniger wörtlich ist als ein Geburtsdatum, an dem Kunden einen Tag auswählen müssen, anstatt ihn anzugeben (z. B. „ erster Samstag im Juli“ ). Für diesen Fall könnten wir die drei Eingabefelder um ein Kalender-Widget erweitern, das die Benutzer ebenfalls verwenden könnten. Eine Standardeingabe würde entweder vom aktuellen Datum oder einem Datum in der Zukunft abhängen, das die meisten Kunden wählen.

Adam stellt ein einfaches Codebeispiel für das einprägsame Datumsmuster in seinem NoStyle Design System bereit. Es löst viel Entwicklungsarbeit und vermeidet viele Barrierefreiheitsprobleme, und das alles, indem es das Tippen auf Kalender-Widgets oder das unnötige Scrollen durch Dropdown-Räder vermeidet.

Einpacken

Natürlich hängt eine gute Formularsteuerung von der Art der Datumseingabe ab, die wir erwarten. Für Reiseplaner, bei denen wir erwarten, dass Kunden ein Ankunftsdatum auswählen, könnte eine flexible Eingabe mit einer Kalendersuche nützlich sein.

Wenn wir unsere Kunden jedoch nach ihrem Geburtsdatum fragen, fragen wir nach einem ganz bestimmten Datum – einer ganz bestimmten Zeichenfolge, die sich auf einen genauen Tag, Monat und Jahr bezieht. In diesem Fall ist ein Dropdown nicht erforderlich. Auch keine Kalendersuche, die standardmäßig einen mehr oder weniger zufälligen Wert verwendet. Wenn Sie eine benötigen, vermeiden Sie nach Möglichkeit native Datumsauswahlen und native Dropdowns und verwenden Sie stattdessen eine barrierefreie benutzerdefinierte Lösung. Und verlassen Sie sich auf drei einfache Eingabefelder, wobei Beschriftungen und Erklärungen über dem Eingabefeld platziert sind.

Wir haben auch ein umfangreiches Werk über das Entwerfen einer perfekten Datums- und Uhrzeitauswahl veröffentlicht, zusammen mit Checklisten, die Sie möglicherweise zum Entwerfen oder Erstellen einer solchen verwenden möchten.

Zum Thema passende Artikel

Wenn Sie diesen Artikel nützlich finden, finden Sie hier eine Übersicht ähnlicher Artikel, die wir im Laufe der Jahre veröffentlicht haben – und es werden noch einige mehr auf Sie zukommen.

• Perfekter responsiver Konfigurator
• Perfekter Funktionsvergleich
• Perfekter Slider
• Perfektes Akkordeon
• Form Design Patterns Book von Adam Silver, veröffentlicht auf SmashingMag
• Abonnieren Sie unseren E-Mail-Newsletter, um die nächsten nicht zu verpassen.