Häufig sehen wir alle Webseiten, die von uns irgendwelche Daten einfordern – sei es das Geburtsdatum, ein Reisezeitraum oder einen Zeitpunkt, wie ein Arzttermin. Dabei stehen meistens nur zwei Optionen zu Wahl: Entweder die Eingabe eines Datums mithilfe diverser Dropdown-Menüs oder eine Eingabe durch ein einfaches Input-Feld, eventuell noch um einen Standard-Datepicker ergänzt.
Doch ist die Nutzung einer dieser Varianten immer richtig? Gibt es Fälle, wo die Nutzung der einen Variante besser oder einfacher für den Nutzer ist als die andere? Und was gibt es sonst noch zu beachten?

Um es kurz zu machen, kann ich mal eines vorweg nehmen: es gibt durchaus verschiedene Anwendungsfälle, wann welches Design Pattern genutzt werden sollte.

Die Nielsen Norman Group drückt es prägnant in zwei Sätzen aus:

Date-entry fields must be unambiguous and support task completion by using the right design pattern. Small design changes can prevent big user errors.

Frei übersetzt bedeutet das in etwa: »Datumsfelder müssen eindeutig sein und die Aufgabenbewältigung unterstützen, indem das richtige Design Pattern genutzt wird. Kleine Designänderungen können große Benutzerfehler verhindern.«

Warum das so ist, versuche ich in den folgenden Kapiteln zu erklären. Außerdem gebe ich Hinweise, wann welches Design Pattern genutzt werden sollte – und wann besser nicht.

Möglichkeiten der Datumseingabe

Die folgenden Szenarien sollen aufzeigen, welche häufig genutzten Möglichkeiten Nutzer haben, um Datumseingaben zu tätigen.

Möglichkeit 1: Dropdowns (<select>)

Die erste Möglichkeit ist die Wahl eines Datums durch ein Dropdown. Diese werden mithilfe des HTML-Tags <select> ausgegeben und mit diversen <option>-Elementen befüllt. Der Nutzer klickt hier auf das Dropdown und eine Vielzahl an möglichen auswählbaren Werten erscheint.

2017-08-07-dropdown-date-selector

Selects sind toll, weil man hier alle nutzbaren Optionen in allen möglichen Kombinationen vordefinieren kann. Besser als alle Möglichkeiten in einem Dropdown unterzubringen (hat man alles schon gesehen), ist es drei verschiedene für Tag, Monat und Jahr zu nutzen. Der Monat wird hierbei gerne ausgeschrieben (z.B. »April« statt »04«), um vor allem in mehrsprachigen Umgebungen Verwechslungen zwischen Tag und Monat vorzubeugen.

Möglichkeit 2: Textfelder (<input>)

Eine weitere Möglichkeit der Datumseingabe ist ein einfaches Textfeld, in HTML als <input>-Element dargestellt. Anstatt dass Nutzer ihre Daten aus einem bestehenden Kontext auswählen, haben sie hier die völlig freie Eingabemöglichkeit. Mittlerweile gibt es sogar einen eigenen Input-Typen, der hierfür genutzt werden soll.

<input type="date" />

Die Nutzung solch eines simplen Input-Feldes kann sich aber als etwas schwierig erweisen, da die Nutzer jetzt verstehen müssen, wie das Datum aufgebaut sein soll bzw. muss, damit das Backend die Eingabe versteht.

Eigentlich sollte jeder geübte Nutzer gelernt haben, wie Daten normalerweise in ein Eingabefeld einzugeben sind – meistens in der Form TT.MM.JJ. Manchmal ist aber auch die Form TT.MM.JJJJ denkbar – oder, auf englischsprachigen Websites noch ganz andere Kombinationen mit Slash (/) oder ähnlichen Zeichen. Und dann muss der Nutzer auch noch darauf achten, Tag und Monat nicht zu vertauschen … es gibt also viele Stolpersteine.

In solchen Fällen ist es ratsam einen Platzhalter (placeholder) zu nutzen, welcher das Datumsformat dauerhaft sichtbar zeigt. Um das Problem mit den verschiedenartigen Trennzeichen zu umgehen, sollte man im Frontend alle möglichen zulassen und erst im Backend das Datum so umformatieren, wie der Code es benötigt. Und natürlich sollte es keinen Unterschied machen, ob der Nutzer 1.1.70 oder 01.01.1970 eingibt. Das sollte aus dem Kontext erschließbar sein.

Fazit: Einfache Textfelder sind für den Nutzer, je nach erwartetem Format, einfacher zu befüllen als die Dropdown-Variante. Leider sind sie dadurch aber auch fehleranfällig und müssen aufwendiger validiert werden. Dropdowns können so gestaltet werden, dass der Nutzer an die Hand genommen wird und das geforderte Datum genauso eingibt, wie das Programm im Hintergrund es benötigt. Das kann aber – je nach Datum – für den Nutzer aufwendiger sein.

Datepicker – das Allheilmittel?

Überall sieht man sie, jedoch ist ihre Nutzung nicht immer sinnvoll – Datepicker. Geschaffen, um dem Nutzer die Datumseingabe bei Freitextfeldern zu erleichtern, hindern sie ihn doch oft daran, effizient Formulare auszufüllen.

Ein gutes Beispiel ist das eigene Geburtsdatum. Dies ist eines der wenigen Daten, welches die meisten von uns blind auf der Tastatur eingeben können. Viele Formulare beinhalten jedoch Datepicker, welche absolut nicht auf die schnelle und unkomplizierte Eingabe des Datums optimiert wurden.

2017-08-07-datepicker-from-jquery-ui Beispiel: jQuery UI Datepicker

Ein populäres, weil u.a. kostenloses Plugin ist der jQuery UI Datepicker. Er ist Teil der häufig genutzten jQuery UI-Bibliothek, welche wiederum eine Erweiterung von jQuery ist.

In der Standardausführung erkennt man jedoch relativ schnell ein Problem dieses Datepickers. Wenn man versucht, schnell mehrere Jahre zurückzuspringen (um beispielsweise das eigene Geburtsdatum einzugeben), bedeutet das viele Klicks. Sehr viele Klicks, da man nur monatsweise nach hinten springen kann.

Datumseingaben – Do’s and Dont’s

Was sagt uns das jetzt? Datepicker sollten nur für Daten genutzt werden, die nah am heutigen Datum liegen – also in einem Zeitraum von etwas weniger als einem Jahr. Ansonsten kann es für die Nutzer zu frustrierend sein ein Datum auszuwählen. Für diese Nutzer (und Nutzung) ist es einfacher, das Jahr einfach einzutippen.

Datepicker sind hingegen sehr nützlich, wenn man die Eingabe eines Datumsbereichs abdecken möchte. In diesem Fall werden häufig zwei Kalender nebeneinander dargestellt.

Möchte man dem Nutzer die Auswahl eines bestimmten Zeitpunkts ermöglichen, so ist es am besten, diese Daten (samt Uhrzeit) fest vorzugeben – entweder in Form von Radiobuttons oder einem Select-Dropdown. Freie Eingaben könnten sonst sehr frustrieren: »Tut uns leid, zu diesem Zeitpunkt ist leider kein freier Termin vorhanden.«

Gibt der Nutzer ein unlogisches, nicht vorhandenes oder fehlerbehaftetes Datum ein, so muss er durch eine entsprechende Fehlermeldung Unterstützung zur Behebung des Problems erfahren. Außerdem sollten im Vorhinein unlogische oder »falsche« Datumsangaben zum Beispiel im Datepicker ausgegraut werden.

Zusammenfassung

Design Pattern für Datumseingaben sollten mit Sorgfalt je nach Einsatzzweck und Kontext gewählt werden. Die Möglichkeit der reinen Texteingabe sollte neben einem optionalen Datepicker immer gegeben sein, damit auch Power-Nutzer eine schnelle Eingabemöglichkeit haben. Mehrdeutige Fälle sollten möglichst vermieden werden, um Nutzer nicht zu verärgern oder zu frustrieren.

Weiterführende Links:

(Bildquelle: Andrew Ridley via unsplash.com)