Die Auswahl der Daten (im Folgenden werde ich der Einfachheit halber das Wort Kalender verwenden) wird häufig auf Websites verwendet. Buchung von Hotels, Flügen, Autos, Kauf von Tickets. Es ist ein so abgedroschenes Thema, dass es keinen Sinn zu machen scheint, darüber zu schreiben.

Aber ... vor nicht allzu langer Zeit stand ich vor der Aufgabe, einen Kalender für die Auswahl von Zeiträumen zu entwerfen. Der Datumsauswahlbereich reichte von 2 Tagen bis zu mehreren Monaten.

Die Zielgruppe ist eher heterogen: Alter von 35 bis 60 Jahren, Computerkenntnisse vom Anfänger bis zum selbstbewussten Benutzer.

Ziel: Das bequemste Datumsauswahlformat zu erstellen, das für die Zielgruppe verständlich ist.
Vor dem Entwerfen wurden Wettbewerber untersucht und getestet, mehrere Artikel zu einem bestimmten Thema wurden gelesen.

Ich möchte die Schlussfolgerungen und Beispiele teilen, die sich aus der Arbeit ergeben. Es wird keine Entdeckungen für jemanden geben, aber ich hoffe, jemand wird etwas Neues und Nützliches für sich finden.

Das Vorhandensein der Schaltfläche „Fertig stellen“ (Bestätigen, Auswählen, OK ...) im Kalenderkörper

Menschen kommen nicht immer mit eindeutigen Daten im Kopf auf die Website.

Sie können einen Zeitraum angeben, reflektieren, Daten ändern (Beginn, Ende, gesamte Periode). Die meisten Websites verbergen den Kalender unmittelbar nach Auswahl eines Datums. www.booking.com , www.aeroflot.ru als Beispiel. Dieses Verhalten des Systems störte Benutzer in einer Situation, in der versehentlich das falsche Datum gewählt wurde oder eine endgültige Entscheidung noch nicht getroffen wurde. "Falsch geklickt" gilt insbesondere für ältere Menschen mit schlechtem Sehvermögen, die es eilig haben oder sich nicht konzentrieren können. Die Gründe für dieses Design sind verständlich - weniger Klicks, weniger Last.

Wir wissen jedoch nicht immer, wer und wie mit der Benutzeroberfläche interagieren wird. Unter welchen Bedingungen wird es sich befinden.

Die Google Flights- Lösung ist für diese Situation geeignet. Gehen Sie die Daten in Gedanken, wie Sie möchten. Der Kalender wird angezeigt, bis Sie auf die Schaltfläche „Fertig stellen“ klicken. Praktischerweise gibt es ein Gefühl der Kontrolle und des Verständnisses der Schnittstelle.

Zeigen Sie Suchergebnisse ohne zusätzliche Klicks an

Eine solche Funktion ist auf der Website www.trivago.ru gut implementiert. Ich gebe die notwendigen Parameter ein und die Ergebnisse sind bereits geladen.

Visuelle Hervorhebung der Start- und Enddaten

Die Nutzer haben gute Bewertungen zur Verfügbarkeit solcher Tipps abgegeben. Der visuelle Unterschied zwischen Start- und Enddatum diente als Originalanker und erleichterte die Arbeit mit dem Kalender.

Auf einigen Websites fehlten Indikatoren für aktuelle Daten.

Um nicht zu sagen, dass dieser schwerwiegende Fehler, der die Benutzerfreundlichkeit stark beeinträchtigt, aber 6 von 10 getesteten Personen bemerkten, dass ihnen wirklich ein solcher Indikator als eine Art „Anker“ fehlt, der die Beziehung zwischen dem ausgewählten und dem aktuellen Datum anzeigt.

Beispielzeiten : www.airbnb.ru

Es ist klar, welche Daten ausgewählt werden können und welche nicht. Aktuelles Datum nicht hervorgehoben



Beispiel zwei : www.ozon.travel/flight/

Eine andere Lösung: Unzugängliche Daten werden im Kalender nicht angezeigt. Das aktuelle Datum ist das erste und lässt keinen Zweifel daran, wo die Suche beginnen soll.



Beispiel drei : www.booking.com

Visuell verständliche aktuelle, verfügbare und unzugängliche Daten

Möglichkeit, ausgewählte Daten schnell zurückzusetzen

Nützlich, wenn der Benutzer beschlossen hat, die Anforderung vollständig zu ändern. Zur schnellen Reinigung aktualisieren einige Benutzer die Seite. Und es gibt Situationen, in denen der Benutzer die Daten ausgewählt, die Seite jedoch versehentlich aktualisiert hat.

Wenn der Benutzer versehentlich aktualisiert, ist es unwahrscheinlich, dass er sich über die Notwendigkeit freut, alles erneut auszufüllen. Wenn es absichtlich aktualisiert wurde, werden die gespeicherten Daten angezeigt und neue Daten eingefahren.

Um diese Probleme zu lösen, können Sie neben der Eingabe des Datums einen sichtbaren Link "Zurücksetzen" oder "Neue Suche" platzieren.

Auf diese Weise können Sie bei Bedarf die Suchergebnisse schnell löschen und im Falle einer versehentlichen Aktualisierung Daten speichern.

www.google.com/flights

Vorgefüllte Felder

Auf einigen getesteten Websites wurde das Feld "Datum" bereits ausgefüllt.

In einigen Fällen gab es nur ein Startdatum, in einigen Fällen ein Start- und ein Enddatum. Dieses Verhalten der Schnittstelle verursachte Unzufriedenheit bei den Getesteten und Verwirrten. Natürlich muss jeder Fall einzeln betrachtet werden.

Zum Beispiel beim Kauf von Bahn- oder Flugtickets können Hotelreservierungen sehr früh erfolgen. Dann ist das aktuelle Datum unangemessen.

Bei der Buchung von Eintrittskarten beispielsweise ins Kino kann dieser Ansatz gerechtfertigt sein.

Im Folgenden finden Sie Beispiele für vorab ausgefüllte Felder. Ist es bequem? Denkenswert.

Beispiel eins : www.rzd.ru.



Beispiel zwei : www.trivago.ru



Beispiel drei : www.rentalcars.com

Füllen Sie das Datum "Zurück" automatisch aus.

Ein weiterer gängiger „Chip“ mit Minuszeichen. Bei Eingabe des Datums "Dort" wird das Datum "Zurück" automatisch ersetzt. Dies ist normalerweise am nächsten Tag.

Dieses Verhalten der Schnittstelle verursachte auch Unzufriedenheit mit ihrer Unvorhersehbarkeit und übermäßigen Unabhängigkeit.

Es lohnt sich zu überlegen, in welchen Fällen zu helfen ist und in welchen Fällen die Menschen ihre eigenen Entscheidungen treffen können.

Als Beispiel für Testseiten : www.booking.com , www.trivago.ru

Ideen für eine Notiz:

Schließlich gute Ideen, die nicht für die Entwicklung benötigt wurden, sondern im Sparschwein blieben.

Kostenangabe sofort im Kalender

www.google.com/flights

Bei der Auswahl der Hin- und Rückflugdaten werden die Gesamtkosten des Fluges berechnet. Die günstigsten Flüge werden in einer separaten Farbe hervorgehoben. Es ist praktisch, wenn die Aufgabe darin besteht, die günstigste Option zu finden oder die Preise zu vergleichen.

Optionen zum Anzeigen / Umschalten zwischen Monaten

Wenn Sie mehrere Monate gleichzeitig zeigen müssen, können Sie Ideen ausspionieren und über eine bequeme Lösung nachdenken.

Ideenzeiten : www.rentalcars.com



Idee zwei : www.ozon.travel/flight/



Idee drei : www.swiss.com

Visuelle Trennung von Wochenenden und Wochentagen

Die einfachste Frage: Beginnen Sie die Woche am Montag oder Sonntag? Dies hängt vom angebotenen Service und der Zielgruppe ab. Wenn Kunden Ihre Dienstleistungen an Wochenenden häufiger bestellen, markieren Sie Wochenenden und möglicherweise Feiertage.

www.skyscanner.net

Mini-Schrittzähler für schnelle Übergänge

Für die Planung von Kurztrips usw. muss kein Kalender geöffnet werden. Hier können Sie die Suchergebnisse anzeigen.

Es sollte beachtet werden, dass Mini-Stepper eine gute Verbesserung bei der Auswahl von Daten darstellen, aber Sie sollten sie nicht durch ein vollständiges Popup mit einem Kalender ersetzen.

Was soll ich wählen? Untersuchen Sie zunächst den Zweck der Kalender- und Datumseintragsbereiche. Wenn Daten weit in die Vergangenheit oder in die Zukunft reichen (z. B. für die Buchung eines Urlaubs), ist ein Popup mit einem Kalender eine gute Option.

Wenn der Datumsbereich recht kurz ist (weniger als sechs Wochen - beispielsweise bei der Buchung eines Arzttermins), sollten Sie einen Mini-Stepper hinzufügen, um die Einrichtung zu beschleunigen.

Eins : www.bahn.de



Zwei : www.google.com/flights



Eigentlich alles. Wie immer werden Meinungen akzeptiert, Kritik ist willkommen, für weitere Beispiele guter Dankbarkeitsentscheidungen!