Daniel Hundt - Erfahrung Technologien im Frontend

zurück zur Technologie-Übersicht

Nutzerführung vs Komplexität - Terminauswahl in WebAnzeigen

Inhalt

Die Auswahl von Terminen war im Projekt/Produkt WebAnzeigen eine einfache Sache: In einem Kalender-Control sind alle möglichen Tage klickbar. Doch nach und nach musste die Auswahl komplexer werden. Der Kalender musste plötzlich mehrere Zustände (auch parallel!) darstellen können.

Initial wurde nur ein Monat angezeigt, der ggf. umgeschaltet werden konnte. Da es dadurch am Monatsende zu Problemen kommen konnte (z.B. scheinbar nur ein Termin wählbar) wurde die Strategie gewechselt und mehrere, nicht durchschaltbare Monate parallel angezeigt.

Die ganzen Abhängigkeiten waren eine Herausforderung an die Nutzerführung, aber nach zahlreichen Iterationen kann sich das Ergebnis sehen lassen.

Darstellbar sind u.a.:

  • aktuelles Datum (z.B. gefettet)
  • Wochenenden (z.B. kursiv oder andere Schriftfarbe)
  • wählbare Termine (Hintergrundfarbe)
  • gewählte Termine (andere Hintergrundfarbe)
  • nicht an- bzw. abwählbare Termine (Schriftfarbe)
  • Termine mit besonderer Bedeutung (z.B. Rabatte in anderer Hintergrundfarbe)

Durch das Überschreiben von Event-Handlern beim An- und Abwählen von Terminen kann auf jede Situation reagiert werden. Ein Termin hält intern die Zustände "frei aus-/abwählbar" (kann angeklickt werden), "potenziell auswählbar" (ggf. in der aktuellen Konstellation nicht anklickbar) und/oder "ausgewählt".

Auswahl

Eingeschränkte Auswahl der Termine
Eingeschränkte Auswahl der Termine

Klickbare Termine werden mit einem entsprechenden Hintergrund eingezeichnet. Auch die Veränderung des Mouse-Cursor beim Mouse-Over zeigt die Klickbarkeit. Je nach Konfiguration sind mehrere Termine auswählbar. Auch das Sperren von Terminen nach der Auswahl ist möglich.

Zwangsdoppel und optionale Auswahl

Automatische Auswahl von Terminen
Automatische Auswahl von Terminen

Im oberen Beispiel wurde der 10. Juli angeklickt. Der 11. und 15. Juli wurde automatisch hinzugefügt ("Zwangstermin"). Durch die Veränderung der Schriftfarbe soll ein "deaktiviert"-Zustand angezeigt werden. Diese Termine können nicht abgewählt werden. Der Wegfall der Hintergrundfarbe bei den zuvor noch wählbaren Terminen macht deutlich, dass kein weiterer Termin gewählt werden kann. Erst durch die Abwahl des gewählten Termins (10. Juli) ist eine erneute Terminwahl möglich.

Außerdem ist es möglich, optionale Termine anzuwählen, wenn ein Termin angeklickt wurde (11. Juli gewählt, 15. Juli optional verfügbar). Dadurch sind z.B. Rabatt-Aktionen abwählbar: "Buchen Sie am Samstag erhalten Sie 50% Rabatt auf den nachfolgenden Mittwoch" (o.ä.)

Pflichttermine und optionale Termine lassen sich beliebig kombinieren (10. Juli gewählt, 11. Juli als Zwangsdoppel, 15. Juli optional).

Sondertermine und Wochenauswahl

Kalender mit großer Auswahl an wählbaren Terminen
Kalender mit großer Auswahl an wählbaren Terminen

Die Übersichtlichkeit der Darstellung bleibt auch bei einer großen Auswahl von Terminen gewährleistet. In dem oberen Beispiel sind die wählbaren Termine entsprechend der "Corporate Identity" in orange gehalten.

So sind optionale Termine nicht nur auf einen bestimmten Termin beschränkt, sondern können auch bestimmte Bereiche umfassen. Auf die gelb-hinterlegten Termine wird z.B. ein gewisser Rabatt gewährt ("Doppeltermin").

Auch die automatische Auswahl einer ganzen Woche ist möglich. Durch die gewählte Darstellung ist Anfang und Ende der Auswahl sofort ersichtlich. Außerdem werden Termine ausgeblendet, die im Konflikt zur bestehenden Auswahl stehen würden.