Die Eingabe des Geburtsdatums ist eine häufig auftretende Komponente, da sie in fast allen Registrierungsvorgängen Relevanz hat und zusätzlich meist ein Pflichtfeld darstellt. Da es für diese Eingabe jedoch verschiedenste Designvariationen gibt, soll diese Mini-Fallstudie einen ersten Einblick in die Optimierung eines solchen Problems geben.
Unterschiedliche Eingabeformate für ein exaktes Datum bieten Vor- und Nachteile, nicht nur in Bezug auf ihre grundlegende Funktion, sondern auch in der Anwendung in responsiven Umgebungen (Desktop, Tablet, Mobile). Diese sollen in Kurzform betrachtet und getestet werden. Im folgenden Abschnitt sollen jedoch zunächst die gängigsten Eingabeformate veranschaulicht werden.
Da es sich hier um eine Ministudie handelt, sind einige Aspekte ggf. noch nicht wissenschaftlich korrekt ausgearbeitet. Hier geht es vorrangig um eine simple Betrachtung der gängigen Formate auf Basis der eigenen Wahrnehmung von Vor- und Nachteilen.
Anhand einiger Screenshots sollen im Folgenden die gängigen Varianten einer Datumseingabe präsentiert werden, um eine Übersicht über die Versuchsobjekte dieser Case Study zu erstellen. Es gilt jedoch anzumerken, dass bei Weitem nicht alle Variationen und Designalternativen dargestellt werden können. Deshalb beruht dieses Vorhaben hauptsächlich auf wenigen Versionen, die jedoch oftmals den Standard in Eingabemasken bilden.
Die erste Variante ist der Scrolling Date Picker. Wie der Name bereits vermuten lässt, tippt man hier das Eingabefeld an und wählt die jeweiligen Daten (Monat, Tag, Jahr) mit entsprechenden Wischbewegungen als Scroll aus. Es gibt hier keine Möglichkeit für manuelle Zahleneingabe.
Beim Dropdown-Menü werden die einzelnen Eingabefelder jeweils angetippt und dann in einem sich öffnenden Menü ausgewählt. Es handelt sich im Grunde um eine leicht angepasste Version des Scrolling Date Pickers, denn auch bei dieser Version muss man durch die Menge der Auswahlmöglichkeiten im geöffneten Menü scrollen.
Bei der angepassten Version des Dropdown-Menüs werden nicht alle Einträge per Scrolling ausgewählt, sondern lediglich der Monat. Alle numerischen Eingaben erfolgen über eigene Nummernfelder, in denen die entsprechende Zahl einfach per Tastenfeld manuell eingegeben wird.
Diese Version der Eingabe beruht erstmal komplett auf manuelle Zahleneingabe, wodurch entsprechend auch der Monat mit seiner jeweiligen Monatszahl angegeben werden muss. Bei dieser Variante geschieht all das hintereinanderweg in einem einzelnen Nummernfeld. Ein kleiner Hinweis unter dem Feld gibt dabei an, in welcher Form das Datum eingegeben werden soll.
Im Gegensatz zur vorherigen Variante verwendet diese Version einzelne Nummernfelder für jede Eingabe, um das Feld übersichtlicher und verständlicher zu machen. Trotz der einzelnen Eingabefelder besteht hier die Chance der Verwendung von Auto-Advance, also dem automatischen skippen zur nächsten Eingabe, wenn ein Feld erfolgreich ausgefüllt wurde. Dies erspart dem Nutzer das vereinzelte Antippen der Felder.
Die Kalenderform ist ein völlig anderer Ansatz als die bisherigen Variationen. Diese Eingabemethode macht sich das typische Layout eines Kalenders zu Nutze und lässt den Nutzer auf ein exaktes Datum tippen, wie wenn man sich in einem Hängekalender etwas einträgt. Da es von der Kalenderform jedoch unendlich viele Designvariationen gibt, sollen hier lediglich zwei dieser Form als Beispiele gezeigt werden. In der Regel wählt der Nutzer am oberen Rand das Jahr und den Monat aus und tippt dann auf den entsprechenden Tag im Monat, welcher zumeist zusätzlich mit Wochentag und optional der Kalenderwoche betitelt ist.
Die Anzahl der Interaktionen wird insofern gemessen, dass jeder Klick bzw. jede Berührung des Bildschirms als eine Interaktion gewertet wird. Das Scrollen wird dabei der Einfachheit halber bei den betroffenen Varianten als zwei Interaktion gewertet, weil im Normalfall mehr als nur eine Scrollbewegung notwendig ist. Die Notwendigkeit mehrfach zu scrollen, wird jedoch vermerkt und später diskutiert.
Bei der Fehleranfälligkeit geht es vorrangig darum, wie schnell bei der jeweiligen Eingabe Fehler gemacht und auch wieder behoben werden können. Ebenso relevant ist hier die Nachvollziehbarkeit der Eingabe (Ist verständlich, welche Zahl was aussagt?).
Schließlich soll die responsive Übertragbarkeit analysiert werden. Da manche Variationen beispielsweise speziell für die Nutzung auf Smartphones konzipiert wurden, ist fraglich, ob diese Variante ebenso auf einem Desktop mit Maus und Tastatur funktioniert. Ist dies nicht der Fall, würde hier ein erneutes Designproblem auftreten.
Geht man von den reinen Interaktionen aus, dann wäre der Scrolling Date Picker oder die Variante mit Dropdown Menüs bei jeder Eingabe die optimale Option. Da Scrolling-Interaktionen jedoch auch viel mehr Interaktion benötigen können (bspw., wenn das Jahr weit zurückliegt) und zudem für eine responsive Desktopumsetzung ungeeignet sind, gilt es andere Varianten in Betracht zu ziehen.
Die Eingabe eines Datums in einzelne Zahlenfelder zeigt sich als effektivste und nutzerfreundlichste Variante: Sie benötigt zwar mehr Taps/Interaktion, lässt sich durch Labels des jeweiligen Feldes jedoch klar definieren, bietet die Möglichkeit einzelne Fehler zu korrigieren und ist auf jedes Gerät responsiv übertragbar. Zudem automatisieren Funktionen wie das Auto-Advance den Eingabeprozess und machen zusätzliche Taps oder das Bewegen der Maus zum nächsten Feld überflüssig.
Problematisch ist bei dieser Variante jedoch die Umwandlung von Monatsnamen in Zahlen. Durch Formatunterschiede in manchen Ländern kann es dabei passieren, dass der Tag und der Monat miteinander verwechselt werden und dadurch mehr Korrektur notwendig ist. Auch das allgemeine Umwandeln von Monat zu Zahl könnte für einige Menschen ein kognitives Problem sein, wenn dieser Vorgang nicht im Kopf verankert ist.
Lösen könnte man dieses Problem zweiermaßen: Ein Tooltip, welcher den Monat und die zugehörige Zahl als Tipp anzeigt, wenn das Zahlenfeld aktiviert wird, oder ein Dropdown-Menü mit den 12 Monaten statt einer Zahleneingabe. Ersteres könnte das Overlay überfluten und neue Verwirrung stiften, weshalb Lösung 2 besser und auch responsiv funktioniert. Dadurch, dass es nur exakt 12 Monate gibt und sich diese nicht ändern, funktioniert an dieser Stelle auch ein Dropdown Menü mit 12 Einträgen, welches im Normalfall auch kein Scrolling benötigen sollte. Alle 12 Monate direkt auswählbar anzuzeigen (per Tap oder per Maus) nimmt normalerweise nicht zu viel Platz weg.
Das allgemein sinnvollste Design ist auf Basis dieser kurzen Fallstudie eine Kombination aus Dropdown (für den Monat) und mehrere Eingabefelder für Tag und Jahr, welche durch ein Label klar definiert werden. Dazu sollte Auto-Advance direkt zum nächsten Feld führen, um eine flüssige Nutzerinteraktion zu ermöglichen. Ist die Komponente ausschließlich für eine App konzipiert, die keine Desktop-Variante benötigt, dann wäre zwar noch immer die eben genannte Variante optimal, jedoch wäre auch eine Kalenderform denkbar. Diese muss jedoch so klar gestaltet sein, dass das Jahr, der Monat und der Tag auf den ersten Blick klar auswählbar sind. Der Vorteil eines solchen Kalenders sind die erweiterten Designmöglichkeiten, die besser an die Brand Identity angepasst werden können als ein simples Zahlenfeld. Auch hier ist jedoch zu beachten, dass die Nutzbarkeit und Einfachheit für den Nutzer Vorrang haben sollten, nicht die reine Gestaltung.
