Die benutzerfreundlichsten Formularfelder zur Eingabe von Datum / Uhrzeit?

Ich stimme Rahul definitiv zu, dass es vom Kontext abhängt. Ein Kalender-Widget ist sehr nützlich, um ein paar Monate vorwärts oder rückwärts zu gehen, aber nicht so gut, um Ihr Geburtsdatum auszuwählen - das wäre ein klickender Albtraum!

Ich persönlich hasse diese Datums-Pulldowns, um auch Ihr Geburtsdatum auszuwählen, da sie dazu neigen, Ihre Zielauswahl zu treffen, aber ich habe kürzlich im Anmeldefluss bei Kontain.com einen raffinierten gesehen. Wie Sie unten sehen können, haben sie die Optionen in einer Tabelle anstelle einer Liste angeordnet (und das Gleiche für Tag und Jahr getan), und ich fand, dass dies eine großartige Verbesserung ist. Yay!

Denken Sie daran, dass Benutzerfreundlichkeit ein Produkt Ihres Publikums und der Domain Ihrer App ist. Wenn Sie beispielsweise einen Dienst wie Kayak erstellen, konzentrieren Sie sich auf technisch versierte Benutzer, die während ihrer Erfahrung mit Ihrer App häufig Datumssteuerungen verwenden. Auf der anderen Seite haben Google und Amazon ein breiteres Publikum und weniger Interaktionen, sodass sie unterschiedliche Prioritäten haben.

In diesem Sinne sind hier einige Überlegungen:

• Kalendersteuerung. Diese können sehr nützlich sein, wenn Sie bei der Auswahl eines Datums zusätzliche Metadaten zu Datum, Uhrzeit oder Zeiträumen übermitteln möchten. Beispielsweise kann ein Benutzer auf einer Reiseseite ein Datum auswählen, um ein Hotel zu buchen. Mit dem Kalendersteuerelement können Sie angeben, welche Daten ausgebucht sind. Da die Kalendersteuerung am ehesten mit der realen Cousine, dem Kalender, vergleichbar ist, tun Sie den Benutzern einen Gefallen, indem Sie Interaktionen mit Datums- und Uhrzeitangaben in ihr mentales Modell einbeziehen. Es gibt jedoch Anwendungsfälle, in denen Kalendersteuerelemente umständlich werden. Da das Steuerelement so modelliert ist, dass jeweils ein Monat angezeigt wird, verschieben Sie die Steuerung über das Überspringen zwischen Monaten in (häufig) Pfeile oder Dropdowns. Dies kann einschränkend sein, wenn Sie dem Benutzer mehr Freiheit bei der Auswahl eines Datums geben möchten.

• Dropdown-Menüs. Oft sehen Sie drei in einer Reihe: [Tag] [Monat] [Jahr]. Diese funktionieren gut, wenn ein Benutzer nur ein Datum auswählt, das er bereits im Voraus kennt, z. B. sein Geburtsdatum. Sie funktionieren nicht so gut, wenn Sie den Benutzer bitten, eine Aufgabe mit Datumsangaben zu wiederholen, da die meisten Benutzer die Maus verwenden und daher einmal auf jedes Dropdown-Menü klicken müssen, um es zu öffnen, einmal auf jedes Element, um es auszuwählen, und Scrollen Sie möglicherweise in einer langen Liste nach oben und unten (für Geburtsdaten ist es nicht ungewöhnlich, dass das Jahr-Menü bei 1920 beginnt und bei 2009 endet). Stellen Sie sicher, dass Sie dies berücksichtigen, wenn Sie Dropdown-Menüs auswählen.

• Nur-Text-Eingabefelder. Wie andere geantwortet haben, ist das Schöne an Eingabefeldern, dass Sie praktisch alles akzeptieren können. Denken Sie in diesen Fällen an die Prinzipien des Formularentwurfs: Erzwingen Sie dem Endbenutzer keine Datenbank-/Backend-Formatierung. Versuchen Sie, so großzügig wie möglich zu sein und so viele Formate wie möglich zu akzeptieren. Verwenden Sie die clientseitige Validierung, um den Benutzer auf Probleme hinzuweisen, bevor er das Formular abschickt (Datumsangaben können in Javascript sehr einfach überprüft werden, indem die vom Benutzer eingegebene Zeichenfolge in die neue Funktion Date () eingegeben wird und geprüft wird, ob Sie ein Datum zurückerhalten).

Berücksichtigen Sie beim Umgang mit Daten einige vernünftige Grundsätze, die über die Kontrolle hinausgehen:

• Überprüfen Sie, ob der Benutzer keinen Fehler gemacht hat. Wenn Sie eine Website für Jugendliche entwerfen und jemand sagt, dass sie 1934 geboren wurden, überlegen Sie, ob dies eine Option sein sollte und ob Sie dies bei ihnen überprüfen sollten, um festzustellen, ob sie tatsächlich 76 Jahre alt sind. Nicht für Zwecke der Altersüberprüfung. aber als Dienstleistung für den Benutzer. Wenn Sie eine Reiseseite entwerfen, sollten Sie auch prüfen, ob der Benutzer wirklich beabsichtigt hat, im Oktober 2011 einen Urlaub auf Hawaii zu buchen, nicht in diesem Oktober.

• In den meisten Fällen sind bestimmte Zeitauswahlen nicht erforderlich und werden wahrscheinlich nicht dem mentalen Modell des Benutzers zugeordnet. Bei der Planung eines Ereignisses ist die maximale Granularität, die Sie wahrscheinlich benötigen, in Intervallen von 5 Minuten. Bieten Sie ein Steuerelement an, mit dem Benutzer 12:00, 12:05, 12:10 usw. anstelle von 60 Optionen pro Minute auswählen können. Die Granularität, für die Sie sich entscheiden, kann einen großen Einfluss auf die Benutzerfreundlichkeit des von Ihnen ausgewählten Steuerelements haben (z. B. Dropdown-Menüs).

• Schauen Sie immer über Standardsteuerelemente hinaus und optional in den Bereich der Informationsgrafiken. Normalerweise ist die Implementierung kompliziert und teuer, aber sie können sich lohnen, wenn die Auswahl von Datum und Uhrzeit ein zentrales Merkmal ist. Zum Beispiel hat hipmunk.com eine fantastische visuelle Darstellung von Flugplänen (gelesen, nicht als Eingabe), die noch besser sein könnten, wenn sie interaktiv wären. Denken Sie in diesen Fällen daran, die Erwartungen Ihres Publikums zu berücksichtigen.

Halten Sie die Dateneingabe möglichst frei

Programmierer sind faul! Lassen Sie den Computer ein wenig arbeiten und denken Sie daran, nicht einmal ein bestimmtes Datumsfeld für die Eingabe des ersten Datums zu haben. In Google Kalender können Sie beim Erstellen eines neuen Ereignisses einfach Folgendes sagen:

• 4. Juli: Abendessen bei Joe

GC findet dann alles für Sie heraus (einschließlich wo) und wird basierend auf Ihrem Benutzerprofil-Gebietsschema intelligent darüber sein, was 4/7: Abendessen bei Joe bedeutet. Für die spätere Bearbeitung ist das GC-Kalendersteuerelement nett und einfach zu bedienen. Beachten Sie Folgendes und wie einfach dies für Benutzer wäre:

1. nächsten Do
2. in 4 Stunden
3. in 2 Wochen

Und ... SHOCK HORROR was passiert, wenn der Benutzer es nicht weiß? Ich habe nicht so viel gesehen, aber warum ist dies unter bestimmten Umständen kein akzeptabler Datumseintrag:

• In ca. 3 Tagen

Ich weiß, dass dies beängstigend ist :) Aber Tog On Software Design , Bruce Tognazzini (Originalautor von Apple Human Interface Guidelines) beschreibt, dass die Implementierung der Benutzererfahrung ein bisschen wie eine Magie ist Trick: 'eine Illusion': sieht einfach aus, aber darunter geht jede Art von Wahnsinn vor sich.

Ich würde die Software dazu bringen, eine automatische Erinnerung 1d zu erstellen, bevor ich sage: "Hey, ungefähr jetzt wollten Sie etwas tun."

Verwenden Sie den Kontext so oft wie möglich:

• vor Joes Geburtstag

... wenn Sie Kontakte oder ein soziales Diagramm haben, sollte dies leicht herauszufinden sein; Wenn nicht, fragen Sie.

Betrachten Sie mehr als einen Monat

Berücksichtigen Sie bei Datumsbereichen, dass Monatsgrenzen für Kalenderansichten, in denen nur ein Monat angezeigt wird, ein echtes Problem darstellen. iCal auf dem Mac ist auf diese Weise ordentlich, da Sie eine beliebige Anzahl von Monaten anzeigen können, sodass Sie leicht überprüfen können, was die genauen Daten von "zwischen 2 und 3 Wochen ab jetzt" bedeuten.

Normalerweise verwende ich nur ein normales Textfeld und füge den Jquery UI Datepicker hinzu.

Wenn der Benutzer durch Klicken oder Klicken oder so weiter den Fokus auf das Textfeld legt, wird das Kalendersteuerelement vorübergehend darunter angezeigt - ohne die Texteingabe zu stören:

Der Benutzer kann dann entweder einfach ein Datum in einem beliebigen Analyseformat eingeben oder die Maus mit dem Kalender-Popup verwenden. Wenn Sie ein Datum mit der Maus auswählen, geben Sie es einfach in das für den Benutzer bevorzugte Format der Site in das Textfeld ein und schließen das Popup.

Für die Zeiteingabe habe ich etwas Ähnliches gefunden, das von jemandem gemacht wurde, den ich vergessen habe, aber mit den (12 oder 24) Stunden, die in einem tabellarischen Widget auftauchen, eine Stunde auswählen und dann einige ausgewählte Minutenoptionen wie 0, 15, 30 und 45 anzeigen vorher nur die Zeit eingeben funktioniert gut, das Popup wird ignoriert.

Außerdem kann ein Kalendersteuerelement so eingestellt werden, dass mehr als ein Monat gleichzeitig angezeigt wird. Normalerweise werden 2-3 Monate nebeneinander angezeigt - abhängig vom Kontext des Datums. In meinem Fall dreht sich die Datumsangabe im Allgemeinen jedoch um das aktuelle Quartal. Ein Eintrag zum Geburtsdatum würde nicht so gut funktionieren, wie jemand bereits darauf hingewiesen hat ^^

Eine häufige Alternative zu mehreren Dropdown-Listen oder Widgets ist der Hilfetext zur Standardformatierung. Manchmal wird es im Textfeld als Standardwert und manchmal rechts/unter dem Feld angezeigt. Der Standardtext würde so etwas wie "MM/TT/JJJJ" oder "TT-MM-JJJJ" sagen. Hier ist ein Beispiel aus dem Anmeldeformular von Google:

Dies gibt dem Benutzer die vollständige Kontrolle über die Eingabe und verwendet nur ein Textfeld. Ein Nachteil dieses Ansatzes ist die Notwendigkeit einer zusätzlichen clientseitigen Validierung, um sicherzustellen, dass die richtige Datumskonvention eingehalten wurde.

Die erste Frage ist, wie viele Datumsfelder Sie in der Anwendung haben und wie oft sie verwendet werden.

Wenn Sie Ihren Geburtstag bei der Anmeldung eingeben müssen und das war's, sollte es für Sie wahrscheinlich keine hohe Priorität haben.

Wenn Sie jedoch viele Daten haben, sollten Sie einige Punkte berücksichtigen, über die noch niemand gesprochen hat:

1. Sie müssen sich um das bevorzugte Datumsformat des Benutzers kümmern (ich bin nicht in den USA, ich möchte, dass meine Daten im Format TT/MM/JJJJ vorliegen, diese US-Daten mit dem Monat am Anfang sind für mich schwer zu lesen und Art).

2. Berücksichtigen Sie auch die anderen Steuerelemente rund um das Datumsfeld. Wenn es sich um eine Seite handelt, die so erstellt wurde, dass der Benutzer mit der Maus mit ihr interagiert, sollten Sie eine Datumsauswahl haben, die nur mit der Maus verwendet werden kann. Wenn Sie jedoch Textfelder haben Ungefähr zu dem Zeitpunkt, an dem sich der Benutzer wahrscheinlich im "Tippmodus" befindet und das Erzwingen einer Interaktion, die die Maus erfordert (wie mehrere Dropdown-Listen), kann ärgerlich sein.

Und schließlich sind Ihre Benutzer nicht meine Benutzer. Sie sollten es testen, der Hälfte der Benutzer ein Textfeld und die Hälfte ein grafisches Kalendersteuerelement geben, messen, wie viele Benutzer jedes Formular ausfüllen und wie viel Zeit jede Gruppe durchschnittlich benötigt, um das Formular auszufüllen .

Wenn es wichtig genug ist, um hier davon besessen zu sein, ist es wichtig genug, um es zu testen.

Meine zwei Cent: Ich bin blind und ich denke, das Beste ist: 3 Combo Box! Eine Alternative könnten 2 Kombinationsfelder für Monate und Tage und ein Eingabetext für das Jahr sein, aber Sie sollten eine Steuerung in diesem Feld durchführen ... Wenn ich als Programmierer denken sollte, habe ich einen einzelnen Eingabetext bevorzugt, aber wenn Sie das auf Ihrer Site denken könnte ein "noob user" sein Ich denke, dass das Beste die erste Option ist :)

In Bezug auf Geschwindigkeit und Benutzerfreundlichkeit geht nichts über die einfache numerische Eingabe, z. 21.09.201. Verwenden Sie ein einzelnes Textfeld, aber (abgesehen von den allgemeinen "/" und "-") akzeptieren Sie auch Registerkarten, um von einem Feld zum nächsten zu wechseln einer. Wenn Sie auf "[Tab]" klicken, wird ein Trennzeichen eingefügt. Als Trennzeichen bevorzuge ich den Bindestrich, weil er die Felder klarer trennt.

Zwingen Sie die Leute nicht, führende Nullen einzugeben.

Ich würde keine Texteingabe wie abgekürzte Monate verwenden, wie Bevan vorgeschlagen hat, da die Eingabe länger dauert. Wie kürzen Sie ab? Drei Buchstaben? Vier? Wie ich in meiner Antwort an Bevan sagte, ist es besonders eine schlechte Idee, wenn Sie mit einem internationalen Publikum arbeiten. "September" ist möglicherweise nicht "Sept" in der Sprache Ihres Benutzers.

Apropos internationales Publikum: Nicht jeder verwendet die Reihenfolge MM-TT-JJJJ (tatsächlich tut dies außerhalb der USA fast niemand). Sie können die gewünschte Reihenfolge unter dem Textfeld angeben. Eine Möglichkeit, die Mehrdeutigkeit von Daten wie 5-06-201 zu vermeiden, besteht darin, das ISO 8601-Format JJJJ-MM-TT zu verwenden.

Geben Sie eine Texteingabe ein, in die der Benutzer das Datum eingeben kann, zusammen mit einem Hinweis darauf, welches Format er verwenden kann, und akzeptieren Sie dann jedes eindeutige Format, unabhängig von Trennzeichen oder Anzahl der Ziffern. Wenn der Benutzer etwas anderes als das Standardformat eingibt, aktualisieren Sie es sofort auf das Standardformat, damit der Benutzer genau sieht, wie Sie das Datum eindeutig interpretieren. Das Hinzufügen eines Kalendersymbols, um Benutzern die Möglichkeit zu geben, aus einem Kalender auszuwählen, ist ebenfalls sinnvoll. Benutzer, die ein Datum eingeben möchten, müssen es nicht verwenden.

Ich habe nur ein paar Nachforschungen angestellt. Kalender-Apps sind ein guter Anfang. Mein Lieblingslayout ist das Datum mit der Uhrzeit rechts. Ich mag das Google Kalender-Format "Datum - Uhrzeit - Uhrzeit - Datum" nicht, aber die Datumsauswahl und das Dropdown-Menü werden ziemlich klar ausgeführt.

(Ich konnte das Bild nicht posten, aber ich möchte Sie ermutigen, es sich anzusehen.)