Kalender- und Datumsauswahlsystem

Was macht Kalender- und Datumsauswahlsystem?

Zweck

Das Kalender- und Datumsauswahlsystem bietet eine Methodik zur Gestaltung von Schnittstellen, mit denen Benutzer einzelne Daten, Datumsbereiche oder bestimmte Zeitslots auswählen können. Das Auswählen von Daten ist eine aufwändige Aufgabe, die komplexe mentale Modelle erfordert (z. B. "nächster Dienstag", "das letzte Wochenende des Monats"). Dieses System stellt sicher, dass Datumsauswahlen visuell klar, einfach per Tastatur und Touch zu navigieren sind und sofortiges Feedback zu Gültigkeit und Verfügbarkeit bieten.

Anwendungsfälle

• Buchung & Reservierungen: Auswahl von Check-in/Check-out-Daten für Hotels oder Flugabflüge.
• Terminplanung: Auswahl eines Zeitslots für ein Meeting, einen Termin oder eine Lieferung.
• Analytik & Reporting: Definition eines benutzerdefinierten Datumsbereichs (Startdatum bis Enddatum) für die Datenfilterung.
• Geburtstags-Eingabe: Erfassen des Geburtsdatums für Altersverifikation oder Profileinrichtung.
• Event-Planung: Verwaltung von Fristen oder Meilensteinen in einem Projektmanagement-Tool.

Wann NICHT zu verwenden

• Einfache Daten: Wenn Sie nur ein einzelnes, bekanntes Datum benötigen (wie "Heute" oder "Gestern"), verwenden Sie einen einfachen Button oder Link.
• Einprägsame Daten: Für Daten, die Benutzer auswendig kennen (wie Geburtstage oder Kreditkartenablaufdaten), verwenden Sie Standard-Textfelder mit type="number" oder type="tel" anstelle eines Kalendergitters, da das Tippen schneller ist als die Navigation in einem Gitter.
• Relative Zeit: Wenn der Benutzer nur "Letzte 7 Tage" oder "Diesen Monat" auswählen muss, verwenden Sie ein Dropdown oder eine Button-Gruppe anstelle eines vollständigen Kalenders.

Eingaben

1. Auswahlmodus: Einzelnes Datum, Datumsbereich oder Zeitslot.
2. Einschränkungen: Minimal-/Maximaldaten, deaktivierte Daten (z. B. vergangene Daten, vollständig gebuchte Slots).
3. Kontext: Ist es ein eigenständiges Seitenelement oder ein Popover/Modal-Trigger?
4. Lokalisierung: Regionale Datumsformate (MM/DD/YYYY vs. DD/MM/YYYY) und erster Wochentag (Sonntag vs. Montag).

Ausgaben

1. Grid-Anatomie-Spezifikation: Visuelle Definition der Monatsüberschrift, Wochentagsbeschriftungen und Tageszellen.
2. Zustandsmatrix: Visuelle Darstellungen für Heute, Ausgewählt, Bereichsanfang, Bereichsende, Im Bereich, Hover und Deaktiviert.
3. Eingabe-Verbindungs-Spezifikation: Wie der Kalender mit dem Texteingabefeld zusammenhängt (Trigger-Symbol, Formatierung und Unterstützung für manuelle Eingabe).
4. Barrierefreiheitsplan: Tastaturkürzel (Pfeile, Enter, Escape) und ARIA-Live-Regionen für Statusaktualisierungen.

Arbeitsablauf

1. Wählen Sie das Eingabemuster

Wählen Sie, wie der Benutzer das Datum eingibt:

• Direkteingabe: Maskierte Texteingabe. Am besten für schnelle, bekannte Datumseingaben.
• Picker-Trigger: Ein Eingabefeld mit einem Kalendersymbol, das ein Overlay öffnet. Standard für die meisten Anwendungsfälle.
• Inline/Persistent: Der Kalender ist immer auf der Seite sichtbar. Am besten für planungsintensive Aufgaben.

2. Gestalten Sie das Kalendergitter

Stellen Sie einen konsistenten räumlichen Rhythmus für die Monatsansicht her:

• Kopfzeile: Monat und Jahr mit "Vorherige"- und "Nächste"-Navigationsschaltflächen.
• Wochentagszeile: Einbuchstabige oder kurze Bezeichnungen (S, M, D...) zur schnellen Orientierung.
• Das 7-Spalten-Gitter: Stellen Sie sicher, dass jede Tageszelle genügend Platz für das Datum und potenzielle Statusindikatoren (z. B. einen Punkt für ein Ereignis) bietet.

3. Definieren Sie die Bereichslogik (falls zutreffend)

Bei der Auswahl eines Bereichs muss die Schnittstelle drei Zustände verfolgen:

• Startauswahl: Das erste angeklickte Datum.
• Die "Spanne": Die visuelle Verbindung zwischen dem Start und der aktuellen Hover-Position.
• Endauswahl: Das zweite angeklickte Datum, das den Bereich abschließt.
• Visuelles Feedback: Verwenden Sie eine subtile Hintergrundfüllung für "Im Bereich"-Daten, mit unterschiedlichen Formen oder höherem Kontrast für die "Start"- und "Ende"-Kappen.

4. Gestalten Sie für Barrierefreiheit

• Tastaturnavigation: Benutzer müssen mit Pfeiltasten zwischen Tagen wechseln, mit BildAuf/ BildAb Monate wechseln und mit Enter auswählen können.
• Fokus-Management: Wenn der Picker geöffnet wird, sollte der Fokus auf das aktuell ausgewählte Datum oder "Heute" gesetzt werden.
• ARIA-Rollen: Verwenden Sie role="grid" für den Kalender, role="columnheader" für Wochentage und role="gridcell" für Tage. Verwenden Sie aria-selected="true" für die aktive Auswahl.

5. Planen Sie responsive Anpassungen

• Mobile Ansicht: Auf kleinen Bildschirmen ist eine Ein-Monats-Ansicht oft am besten. Für die Bereichsauswahl sollten Sie zwei Monate vertikal stapeln oder ein Vollbild-Overlay in Betracht ziehen.
• Touch-Ziele: Stellen Sie sicher, dass jede Tageszelle mindestens 44x44px groß ist oder ausreichend Abstand aufweist, um versehentliche Klicks zu vermeiden.

Entscheidungsregeln

• Die "Erst Tippen"-Regel: Erlauben Sie Benutzern immer, das Datum manuell in das Eingabefeld zu tippen. Zwingen Sie sie nicht, den Kalender zu verwenden.
• Monatsgrenzen: Wenn Sie ein Datum weit in der Vergangenheit oder Zukunft auswählen (z. B. 5+ Jahre), stellen Sie einen Jahres-/Monats-Dropdown-Selektor bereit, anstatt den Benutzer zu zwingen, Dutzende Male auf "Weiter" zu klicken.
• Sofortiges Feedback: Wenn ein Benutzer ein ungültiges Datum auswählt (z. B. einen Sonntag für eine Lieferung nur an Werktagen), zeigen Sie sofort eine kontextbezogene Fehlermeldung an, anstatt auf die Formularübermittlung zu warten.
• Wochenanfang: Standardmäßig die Locale des Benutzers verwenden (normalerweise Sonntag in den USA, Montag in UK/EU).

Einschränkungen

• Barrierefreiheit: Muss WCAG-AA-Kontrast (4,5:1) für alle Datumszustände erfüllen. Ausgewählte Daten müssen durch mehr als nur Farbe unterscheidbar sein (z. B. ein voller Hintergrund im Vergleich zu keinem Hintergrund).
• Responsivität: Kalender dürfen niemals den Viewport überlaufen. Popover-Picker sollten "Flip"-Logik verwenden, um sichtbar zu bleiben, wenn unterhalb des Eingabefelds kein Platz ist.
• Lokalisierung: Unterstützen Sie unterschiedliche Datumsformate und Übersetzungen für Monats- und Tagesnamen.

Häufige Fehlermuster

• Der "Endlose Klicker": Benutzer dazu zwingen, sich durch 12 Monate zu klicken, um ein Datum zu finden, anstatt einen Jahresauswähler bereitzustellen.
• Versteckte Eingabe: Benutzern das Tippen des Datums verbieten, was leistungsstarke Benutzer und Benutzer mit motorischen Beeinträchtigungen frustriert.
• Winzige Ziele: Gestaltung eines Gitters mit 20px Zellen, das auf einem mobilen Gerät unmöglich zu bedienen ist.
• Fehlender "Heute"-Kontext: Versäumnis, das aktuelle Datum hervorzuheben, was die Orientierung für Benutzer erschwert.
• Verwirrende Bereiche: Nicht eindeutige Unterscheidung zwischen "Start" und "Ende" eines Bereichs oder fehlende Darstellung der "Im Bereich"-Spanne.

Validierungskriterien

• Benutzer können den Kalender navigieren und ein Datum nur mit der Tastatur auswählen.
• Manuelle Texteingabe wird unterstützt und im Eingabefeld validiert.
• Das heutige Datum ist visuell unterscheidbar, konkurriert aber nicht mit der Auswahl.
• Bereichsauswahlen haben eine klare visuelle Darstellung von "Start", "Ende" und "Spanne".
• Touch-Ziele für Tageszellen erfüllen die 44x44px-Empfehlung (oder mindestens 24x24px mit Abstand).
• Kontrastverhältnisse für alle Zustände (Hover, Ausgewählt, Deaktiviert) erfüllen WCAG AA.
• Der Kalender passt sein Layout an (oder wechselt in den Vollbildmodus) auf mobilen Geräten.