Wenn ein Formular nach einem Datum fragt und deine Besucher aufgeben, statt es auszufüllen, hast du ein Problem mit dem Datumsfeld. Das klingt einfach. Ein Datum wählen. Eine Uhrzeit tippen. Doch kleine Designentscheidungen, wie du nach diesen Angaben fragst, sind für überraschend viele Formularabbrüche verantwortlich.
Datums- und Zeitfelder wirken aus Designersicht unkompliziert. Die Herausforderung: Besucher gehen damit unterschiedlich um, je nachdem, welches Datum sie suchen, welches Gerät sie nutzen und ob sie durch Monate scrollen oder Zahlen tippen müssen. Gestaltest du das Feld richtig, kommen Menschen ohne Reibung durch dein Formular. Gestaltest du es falsch, brechen sie ab, bevor sie es überhaupt versuchen.
Warum Datums- und Zeitfelder für die Abschlussrate deines Formulars wichtig sind
Datumsfelder sind Entscheidungspunkte. Ein Besucher, der ein Buchungsformular ausfüllt, muss ein Termindatum wählen. Wer sich für eine Veranstaltung anmeldet, muss sein Geburtsjahr eingeben. Ein Kunde, der eine wiederkehrende Bestellung einrichtet, muss ein Startdatum wählen. In jedem Fall kann der Aufwand dieses einen Felds entscheiden, ob jemand abschliesst oder geht.
Nimm die Terminbuchung. Untersuchungen zeigen, dass Datumsauswahlen gut funktionieren, wenn Besucher Daten in naher Zukunft wählen. Dieselbe Datumsauswahl wird zur Qual, wenn ein Besucher sein Geburtsdatum eingibt und 40 Jahre zurückscrollen muss. Das Bedienmodell, das sich für nächsten Monat einfach anfühlt, fühlt sich für 1985 kaputt an.
Zeitfelder erzeugen ein ähnliches Problem. Ein Besucher, der einen Termin um 14:30 Uhr setzen will, sollte nicht durch Dropdown-Listen für Stunden, Minuten und AM/PM einzeln tippen müssen. Wie du diese Felder aufbaust, entscheidet direkt darüber, ob jemand den Termin bucht oder den Browser schliesst.
Texteingaben oder Datumsauswahl: die richtige Interaktion wählen
Die Wahl zwischen einem Texteingabefeld und einer Kalenderauswahl gilt nicht für alle Fälle. Sie hängt davon ab, welche Art von Datum du abfragst.
Nutze Texteingabefelder für Daten weit in der Vergangenheit oder Zukunft
Wenn jemand sein Geburtsdatum eingibt, sucht er ein Datum, das 30, 40 oder 50 Jahre zurückliegen kann. Eine Kalenderauswahl zwingt ihn, sich durch Dutzende Monate zu klicken. Drei getrennte Textfelder mit den Labels Tag, Monat und Jahr funktionieren besser. Der Besucher tippt schnell in jedes Feld und springt automatisch zum nächsten. Acht bis zehn Tastenanschläge, und er ist fertig. Eine Datumsauswahl braucht für dieselbe Aktion viel mehr Tipps oder Klicks.
Wenn du ein einzelnes Textfeld statt dreier getrennter nutzt, zeige das erwartete Format klar mit einem Label wie "TT.MM.JJJJ" oder "MM/DD/YYYY", je nach Region. Nutze keinen Platzhalter, der beim Klicken verschwindet. Ein Label bleibt sichtbar und sagt, was du willst.
Nutze Datumsauswahlen für Daten in naher Zukunft
Eine Kalenderauswahl ergibt Sinn, wenn jemand einen Termin für nächste Woche bucht oder ein Reisedatum für nächsten Monat wählt. Die Auswahl zeigt standardmässig den aktuellen Monat, und er klickt oder tippt das gewünschte Datum an. Die Kalender-Metapher passt dazu, wie Menschen ohnehin über Terminplanung denken.
Die wichtigste Regel: Stelle den Kalender bei zukünftigen Daten standardmässig auf den aktuellen Monat. Lass sie nicht durch Monate klicken, um den richtigen zu finden. Und wenn Daten nicht verfügbar sind, zeige direkt in der Auswahl, welche. Ausgegraute oder deaktivierte Daten ersparen den Frust, ein Datum zu wählen und nach dem Absenden einen Fehler "nicht verfügbar" zu sehen.
Best Practices für Datumsauswahlen: So funktionieren sie für deine Besucher
Eine Datumsauswahl ist nur so nützlich, wie Besucher mit ihr umgehen können. Diese Regeln zählen:
Unterstütze die manuelle Texteingabe neben der Auswahl
Nicht jeder will die Kalenderoberfläche nutzen. Manche Besucher tippen das Datum lieber direkt. Erlaube immer die Tastatureingabe. Wenn jemand "15.3.2026" tippt, akzeptiere es, ohne ihn in die Auswahl zu zwingen. Verlange keine Sonderzeichen. Akzeptiere "15-3-2026" oder "15 3 2026" gleichermassen. Flexible Formatierung nimmt Reibung weg.
Nutze HTML5-Eingabetypen auf dem Smartphone
Mobilgeräte haben native Datums- und Zeitauswahlen, die ins Betriebssystem eingebaut sind. Nutze type="date" oder type="time" in deinem HTML-Formularfeld. Auf manchen Geräten erscheint damit ein Datumsrad, auf Android die Datumsauswahl der Plattform. Besucher erwarten diese Interaktion auf ihrem Smartphone, und die native Auswahl ist für die mobile Nutzung optimiert.
Begrenze den Datumsbereich, damit endloses Scrollen entfällt
Wenn du nach einem zukünftigen Datum fragst, begrenze die Auswahl auf Monate der nächsten 2 bis 3 Jahre, nicht der nächsten 50 Jahre. Wenn du nach einem historischen Datum fragst, setze einen vernünftigen Startpunkt. Für das "Geburtsdatum" stelle standardmässig 30 oder 50 Jahre zurück ein, nicht 100 Jahre.
Zeige Kontext für nicht verfügbare Daten
Wenn manche Daten nicht gewählt werden können (weil die Zeiten schon gebucht sind oder das Wetter den Service verhindert), markiere diese Daten in der Auswahl anders. Graue sie aus, deaktiviere sie oder zeige einen visuellen Hinweis. So vermeidest du die Sackgasse, in der jemand ein Datum wählt und dann eine Fehlermeldung sieht, dass es nicht verfügbar ist.
Gestaltung von Zeitfeldern: Besuchern helfen, den richtigen Zeitpunkt zu wählen
Zeitfelder haben ihre eigenen Herausforderungen. Ein Besucher, der eine Terminzeit wählt, sollte Stunden, Minuten und AM/PM nicht in getrennten Dropdowns auswählen müssen. Kombiniere sie klug.
Biete Zeiten in 30-Minuten-Schritten an
Die meisten Terminsysteme brauchen keine minutengenaue Auflösung. 30-Minuten-Schritte decken Termine, Beratungen und Reservierungen ab. Biete Zeiten wie 9:00 AM, 9:30 AM, 10:00 AM und so weiter an. Das verringert die Zahl der Optionen, ohne Funktionalität zu verlieren.
Zeige die Zeit in einem Format, das Besucher schon nutzen
Für ein US-Publikum nutze das 12-Stunden-Format mit AM/PM. Für internationale Kontexte oder Schichtplanung kann das 24-Stunden-Format sinnvoll sein. Bleibe im ganzen Formular einheitlich. Wechsle nie mitten in einem Formular zwischen Formaten.
Wähle eine Standardzeit vor oder zeige die aktuelle Uhrzeit
Ein Zeitfeld sollte nie komplett leer sein. Wähle entweder eine gängige Terminzeit vor (wie 10:00 AM) oder zeige die aktuelle Uhrzeit. Das gibt Besuchern einen Startpunkt und zeigt ihnen, welches Format du erwartest.
Überlegungen zu Mobilgeräten bei Datums- und Zeitfeldern
Mobile Formulare haben andere Einschränkungen als Desktop-Formulare. Der Platz ist begrenzt. Touch-Flächen müssen grösser sein. Tastaturen verdecken den halben Bildschirm.
Nutze wenn möglich native mobile Auswahlen
HTML5-Eingaben für Datum und Zeit lösen auf dem Smartphone die Auswahl des Betriebssystems aus. Das ist schneller und für Nutzer vertrauter als eine eigene Auswahl, die du selbst gestaltest. Die nativen Datumsauswahlen sind bereits für die mobile Interaktion optimiert.
Mach Touch-Flächen gross genug zum Tippen
Wenn du eine eigene Auswahl baust, stelle sicher, dass Buttons und Daten mindestens 44 mal 44 Pixel gross sind. Kleine Kalenderfelder, die am Desktop gut funktionieren, lassen sich auf dem Smartphone nicht mehr antippen.
Vermeide automatisches Absenden
Sende das Formular nicht automatisch ab und springe nicht zum nächsten Feld, sobald ein Datum gewählt ist. Lass Besucher ihre Wahl bestätigen und selbst weitergehen. Automatisches Absenden kann Nutzer im falschen Datum oder in der falschen Uhrzeit festsetzen und frustrieren.
Fehlermeldungen und Validierung: Nutzer zum richtigen Datum führen
Selbst bei gutem Design wählen Besucher manchmal ungültige Daten. Sie geben ein Rückreisedatum vor dem Abreisedatum ein. Sie wählen ein Datum, das schon gebucht ist. Sie tippen aus Versehen "13/45". Deine Fehlerbehandlung entscheidet, ob sie das Problem beheben oder das Formular abbrechen.
In Echtzeit validieren
Warte nicht bis zum Absenden des Formulars, um Besuchern zu sagen, dass ihr Datum falsch ist. Validiere beim Tippen oder Auswählen. Wählt jemand ein Rückreisedatum vor dem Abreisedatum, sag es ihm sofort. Ist ein Datum nicht verfügbar, lass es ihn gleich wissen, damit er ein anderes wählen kann.
Fehlermeldungen schreiben, die erklären, was schiefgelaufen ist
Ein schlechter Fehler sagt "Ungültiges Datum". Ein hilfreicher Fehler sagt "Bitte gib ein Datum im Format TT.MM.JJJJ ein" oder "Dieses Datum ist nicht verfügbar. Bitte wähle ein anderes."
Nenne das konkrete Problem und schlage die Lösung vor. Deine Fehlermeldung ist keine Strafe. Sie ist hilfreiche Orientierung.
Logisch unmögliche Auswahlen verhindern
Wenn du nach Abreise- und Rückreisedatum fragst, deaktiviere Rückreisedaten, die vor dem gewählten Abreisedatum liegen. Wenn du nach einem Termin fragst, deaktiviere Daten, die schon ausgebucht sind. Mach unmögliche Auswahlen nicht verfügbar, statt Besucher wählen zu lassen und sie dann abzulehnen.
Muster aus der Praxis: Was bei verschiedenen Anwendungsfällen funktioniert
Das beste Design für ein Datumsfeld hängt von deinem konkreten Formulartyp ab. Hier sind gängige Muster.
Buchungs- und Terminformulare
Nutze eine Kalenderauswahl. Stelle sie standardmässig auf den aktuellen oder den nächsten verfügbaren Monat. Zeige nicht verfügbare Daten. Akzeptiere die manuelle Datumseingabe als Alternative.
Felder für das Geburtsdatum
Nutze drei Texteingabefelder (Tag, Monat, Jahr) oder ein einzelnes Textfeld mit flexibler Formatierung. Vermeide Datumsauswahlen, weil das Datum so weit in der Vergangenheit liegt, dass die Auswahl unhandlich wird.
Startdatum für wiederkehrende Bestellungen oder Abonnements
Nutze eine einfache Datumsauswahl, die standardmässig auf das nächste verfügbare Datum gestellt ist. Die meisten Besucher übernehmen den Standard oder wählen ein Datum innerhalb des nächsten Monats.
Zeitauswahl bei Veranstaltungen
Wenn deine Veranstaltung ein festes Datum hat, Besucher aber einen Zeitslot wählen, nutze eine einfache Zeitauswahl mit 30-Minuten- oder Ein-Stunden-Schritten. Zeige, welche Slots verfügbar und welche voll sind.