Was ist die beste Benutzeroberfläche für die Eingabe des Geburtsdatums? [geschlossen]

Was ist die beste Methode zur Auswahl des Geburtsdatums?

• 3 Texteingaben (Monat / Tag / Jahr) oder eine Maskeneingabe. Benutzer MUSS Tastatur verwenden
• 3 Auswahlfelder. Der Benutzer kann Tastatur oder Maus verwenden.
• Ein schöner Datepicker .

Ich möchte wissen, was die benutzerfreundlichste und problemloseste Lösung ist, damit der Benutzer überhaupt nicht verwirrt wird.

Für einen fortgeschrittenen Benutzer ist die Texteingabe die beste, wenn der Benutzer das Datumsformat kennt, ist es sehr schnell. Für einen nicht so fortgeschrittenen Benutzer empfehle ich die Verwendung eines Datepickers. Da Sie normalerweise auch fortgeschrittene und nicht fortgeschrittene Benutzer haben, empfehle ich eine Kombination aus Texteingabe und Datumsauswahl.

Wenn Sie sicherstellen möchten, dass "der Benutzer überhaupt nicht verwirrt wird", ist dies meiner Meinung nach die beste Option.

Ich würde keinen Datepicker für das Geburtsdatum empfehlen . Zuerst müssen Sie zum Jahr navigieren (klicken, klicken, klicken ...), dann zum Monat (klicken Sie auf etwas mehr) und dann die winzige Zahl in einem Raster suchen und darauf klicken.

Datepicker sind nützlich, wenn Sie das genaue Datum nicht genau kennen, z. B. wenn Sie eine Reise für die zweite Februarwoche planen.

Obwohl dies eine sehr alte Frage ist, ist es so wichtig, dass das Geburtsdatum korrekt eingegeben wird, insbesondere in einem Registrierungsformular.

Ich denke, niemand hat dies besser gemacht als die Google-Konten, die sich anmelden:

Wählen Sie den Monat zuerst aus einem Auswahlfeld aus und geben Sie Datum und Jahr manuell ein. Einfach.

Einfach zu validieren. Einfach für Benutzer, um richtig zu machen. Kein Zurückblättern der Jahre in einem Auswahlfeld von 1900 bis zum heutigen Jahr. Es ist nicht erforderlich, ein Auswahlfeld "Tag" basierend auf der Monatseingabe zu aktualisieren. Funktioniert hervorragend im Web. Funktioniert hervorragend auf Mobilgeräten. Funktioniert für alle Länder, z. B. 01/10/2014 - ist das der 1. Oktober oder der 10. Januar? Ich gehe davon aus, dass wir dieses Format für die Geburtstagsauswahl in Zukunft noch viel mehr sehen werden.

Ein Datepicker ist nur eine schlechte Lösung. So viele Klicks! Meiner Meinung nach ist ein Datepicker nur dann nützlich, wenn es wichtig ist, den Wochentag zu kennen, z. B. Tickets zu buchen.

Update 06.02.2016: Ich komme aus Großbritannien und bin daher eher mit den Formaten Tag / Monat / Jahr als mit den Formaten Monat / Tag / Jahr vertraut. Benutzer, die ihren Cursor verwenden, um den Monat auszuwählen, sind meiner Meinung nach viel einfacher, wenn sie zuerst das Auswahlfeld haben, als Eingabe> Auswahlfeld> Eingabe. Das Kommentardatum ist der 2. Juni, nicht der 6. Februar;)

Wie in diesem Artikel von Jakob Nielsen erwähnt , sollten Dropdown-Listen für Daten vermieden werden, die dem Benutzer bekannt sind :

Den Benutzern bekannte Datenmenüs wie Monat und Jahr ihrer Geburt. Solche Informationen sind häufig fest in den Fingern der Benutzer verankert, und die Auswahl solcher Optionen aus einem Menü bricht das Standardparadigma für die Eingabe von Informationen und kann sogar mehr Arbeit für Benutzer schaffen.

Die ideale Lösung ist wahrscheinlich etwas wie folgt:

• Stellen Sie 3 separate Textfelder für Tag, Monat und Jahr bereit (entsprechend gekennzeichnet).
• Sortieren Sie die Textfelder nach der Benutzerkultur.
• Tag- und Monatstextfelder sollten so dimensioniert sein, dass eine zweistellige Eingabe angenommen wird.
• Das Textfeld für das Jahr sollte so dimensioniert sein, dass ein 4-stelliges Jahr angenommen wird.
• Ermöglichen Sie dem Benutzer die Eingabe eines zwei- oder vierstelligen Jahres. Angenommen, ein zweistelliges Jahr ist 1900, und aktualisieren Sie das Textfeld, um dieses onBlur (oder einen folgenden Bestätigungsschritt) wiederzugeben.
• Ermöglichen Sie dem Benutzer, entweder eine Monatsnummer oder einen Monatsnamen einzugeben.

BEARBEITEN: So haben wir unseren DOB-Picker implementiert: Maskiertes Texteingabefeld mit HTML5-Regex, um die numerische Tastatur auf iOS-Geräten zu erzwingen.

http://www.huntercourse.com/usa/texas/

Geburtsdaten unterscheiden sich von anderen Daten, da Personen häufig daran gewöhnt sind, ihr spezifisches Geburtsdatum einzugeben.
Ein Textfeld mit einem Beispiel ist klar, schnell und einfach einzugeben:

 _______
|_______| (example: 31/3/1970)

Dies sollte eine flexible Formatierung wie den 1.1.1970 oder den 20.07.70 unterstützen.

Wenn Sie unterschiedliche Kulturen mit unterschiedlichen Datumskonventionen unterstützen müssen (z. B. USA und Großbritannien), kann dies für Personen, die das Beispiel nicht beachten, fehleranfällig sein. Um dies zu vermeiden, können Sie eine
Auswahlliste für den Monat und Textfelder für Datum und Jahr verwenden .

 _________   __   ____
|March  |V| |__| |____|

Dies beseitigt Unklarheiten zwischen Tages- und Monatsbestellung, ist jedoch etwas umständlicher zu verwenden.

Sie sollten sich Datejs ansehen .

Datejs ist eine Open-Source-JavaScript-Datumsbibliothek.

Umfassend und doch einfach, verstohlen und schnell. Datejs hat alle Prüfungen bestanden und ist bereit zu streiken. Datejs analysiert nicht nur Zeichenfolgen, sondern schneidet sie sauber in zwei Teile.

Ich bin beunruhigt über das Überwiegen von Lösungen anstelle von Entwürfen. Das OP sagte: "Ich möchte wissen, was die benutzerfreundlichste und problemloseste Lösung ist, damit der Benutzer überhaupt nicht verwirrt wird." Egal, ob es sich um jQuery oder JavaScript oder C # oder FORTRAN handelt, das Design ist wichtig - und es ist das UX-Design, nicht das UI-Design, das hier zählt. (Ein weiteres Plädoyer, um das falsche und unlogische Konstrukt "UX / UI" zu vermeiden).

Verwenden Sie die Texteingabe. Verwenden Sie drei separate Felder mit den Bezeichnungen Tag, Monat und Jahr (oder Monat, Tag und Jahr). Lassen Sie Benutzer die Daten eingeben. Das Mischen von Text und Listen in derselben Interaktion ist eine schlechte Sache (verwenden Sie keine Texteingabe für das Jahr, sondern beispielsweise die Datumsauswahl oder Listen für Monat und Tag).

Verwenden Sie ein einzelnes Textfeld, das Formathinweise im Feld verwendet, z. B. [Tag / Monat / Jahr]. Benötigen Sie keine zu strengen Formate. Wenn ein Benutzer JUN an der Stelle eingibt, an der Sie einen Monat erwarten, verwenden Sie June im Backend. Wenn ein Benutzer 6 an der Stelle eingibt, an der Sie einen Monat erwarten, verwenden Sie June im Backend. Wenn ein Benutzer an der Stelle, an der Sie einen Monat erwarten, 06 eingibt, verwenden Sie June im Backend.

Verwenden Sie Occams Rasiermesser als Leitfaden (tatsächlich sind die Daten die meiste Zeit genau genug). Reduzieren Sie die kognitive Reibung (lassen Sie die Benutzer nicht nachdenken).

Ich würde auch die Kombination von DatePicker und Feldern empfehlen

In dieser Demo zeigt die Datumsauswahl das vom Benutzer in die Felder eingegebene Datum.
Es basiert jedoch auf einem DatePicker, der Prototype und Scriptaculous verwendet . Ich erwähne es zur Veranschaulichung.

Ich hatte datePicker mit meinem Benutzer ausprobiert, aber es stellte sich heraus, dass es für ihn eine schlechte Benutzeroberfläche war. Am Ende habe ich 3 Textfelder, in die sie schnell [Tag] [Monat] [Jahr] eingeben können :(

Setzen Sie beide und machen Sie jedes Update das andere. Wenn der Benutzer das Datum aus der Datumsauswahl auswählt, ist es einfach, einen kleinen Fehlklick im Textfeld zu beheben oder die Auswahl zu visualisieren, die Sie in das Textfeld in der Datumsauswahl eingegeben haben.

Warum testest du nicht alle drei und wählst die aus, die am besten abschneidet? Dies scheint ein guter Kandidat für den Test des Google Website Optimizer zu sein.

Es kann sein, dass die Art der Benutzer, die Sie haben, oder die Art der Site, die Sie ausführen, vorschreibt, dass Ihre Lösung von der "Norm" abweichen sollte.

Normalerweise verwende ich beides - einen Datepicker, der ein Textfeld im richtigen Format ausfüllt. Fortgeschrittene Benutzer können das Textfeld direkt bearbeiten, mausfreudige Benutzer können mit dem Datepicker auswählen.

Wenn Sie sich Sorgen um den Platz machen, habe ich normalerweise nur das Textfeld mit einem kleinen Kalendersymbol daneben. Wenn Sie auf das Kalendersymbol klicken, wird die Datumsauswahl als Popup angezeigt.

Ich finde es auch empfehlenswert, das Textfeld mit Text vorzufüllen, der das richtige Format angibt (dh: "TT / MM / JJJJ"). Wenn der Benutzer das Textfeld fokussiert, verschwindet dieser Text, sodass er sein eigenes eingeben kann.

Als vielleicht einer der älteren Menschen hier, die Ende des Monats geboren wurden, finde ich Dropdown-Menüs für Geburtsdaten frustrierend. Normalerweise muss ich in zwei Dropdown-Menüs nach unten scrollen, und das ist umständlich. Ich würde es viel lieber eingeben.

Wenn Sie ein Steuerelement so gestalten können, dass es entweder Dropdown-Menüs akzeptiert oder in diese eingetippt werden kann, und beide Funktionen klarstellen, wäre dies hervorragend.

Ob Sie einen Datepicker verwenden oder nicht, hängt meiner Meinung nach davon ab, wie lange die Daten zurückliegen. Wenn sie normalerweise im aktuellen Monat sind und fast nie älter als ein paar Monate, und Sie wissen, dass es Javascript gibt, ist ein Datepicker gut. Wenn die Daten nicht aktuell sind (z. B. ein Geburtsdatum), ist dies meiner Meinung nach die beste Option:

http://img411.imageshack.us/img411/6328/mockupg.png

Beachten Sie, dass sich dies von der Antwort von Patrick McElhaney darin unterscheidet, dass das Jahr ein Textfeld und kein Dropdown ist . Die Auswahl einer Nummer aus einem Dropdown-Feld mit Hunderten von Elementen ist für den Benutzer sehr ärgerlich.

Ich denke, eine Datumsauswahl macht die Eingabe des Geburtsdatums nur komplizierter.

Wie bereits erwähnt, scheint eine Kombination von Drop-Listen für Tage und Monate mit einem Textfeld für das Jahr für einen Benutzer am effizientesten zu sein. Die Eingabe eines Geburtsdatums auf diese Weise dauert weniger als 10 Sekunden. Dies ist weitaus schneller als bei der Datumsauswahl: Dank der Tabulatortaste (mit der alle Benutzer das Ausfüllen eines Formulars erlernen sollten) können Sie schnell von einem Formular aus wechseln Element zum nächsten.

Zumindest unter Macintosh (ich weiß nichts über Windows) können Sie auch über die Tastatur auf das Datum in Auswahlfeldern zugreifen: Dank der Tabulatortaste erhalten Sie den Fokus auf das Formularelement und drücken dann die Pfeiltaste, um das Dropdown-Menü zu öffnen Geben Sie die Liste ein und geben Sie beispielsweise 1967 ein, und Sie gelangen im Handumdrehen dorthin.

Ich würde einen Datepicker (und ein Eingabefeld mit dokumentiertem Format als Ersatz) für eine internationale Site bevorzugen.

Datumsformate variieren und sind manchmal schwer zu lesen, wenn Sie jetzt daran gewöhnt sind. Schade, dass sich viele Menschen mit ISO 8601 nicht wohl fühlen ::-(

Ich würde vorschlagen, für jedes Feld ein Dropdown-Menü zu verwenden, das jeweils als Tag, Monat und Jahr gekennzeichnet ist. Eine Datumsauswahl kann ebenfalls hilfreich sein, aber wenn der Benutzer kein JavaScript aktiviert hat, funktioniert dies nicht.

Ich würde einen DatePicker nehmen. Es ist die einzige Komponente, mit der erfahrene Benutzer sie manuell eingeben können, und die Anfänger können ganz einfach ein Datum eingeben.

Der Kalender sollte nicht angezeigt werden, wenn Sie über die Tabulatortaste eingeben, sondern auf eine Schaltfläche klicken. Kein erfahrener Benutzer ärgert sich darüber.

Wen verwenden Sie nicht den jQuery UI DatePicker?

Es ist konfigurierbar für nahezu alle Anforderungen. Der einzige Nachteil ist, wenn Sie es in die jQuery-Benutzeroberfläche aufnehmen, hat es einen etwas großen Platzbedarf.

Aktualisieren

Einige der Dateigrößen scheinen sich geändert zu haben, daher werden sie unten aktualisiert. Beachten Sie, dass diese Zahlen nur für die Zeit korrekt sind, zu der sie zuletzt aktualisiert wurden. Möglicherweise haben sich die Dinge seitdem geändert.

• CSS-Thema - 23kb
• jQuery UI - 71 KB minimiert
• DatePicker - 38kb
• Plus ein paar Bilder (nächsten Monat / Vormonat, von denen ich mir ziemlich sicher bin, dass sie Sprites sind)

Aber das ist nicht schlecht ...

Die JQueryUI-Datetime-Auswahl ist die beste Option, da Pro-Benutzer ihren eigenen Wert in das Textfeld eingeben oder ihn aus der Auswahl auswählen können.

Das Einrichten der Auswahl zur einfachen Eingabe von Geburtstagen oder zukünftigen Daten ist ebenfalls recht einfach:

$ ('# datepicker'). datepicker ({
    changeMonth: wahr,
    changeYear: wahr,
    Jahresbereich: '-100: +50'
});

Dies zeigt so etwas (ich kann kein Foto posten, da ich neuer Benutzer bin: http://klalex.com/wp-content/uploads/2009/07/picture-1.png )

und yearRange zeigt Daten von DateTime.Now.Year - 100 bis DateTime.Now.Year + 50 an

fand dies auf: http://klalex.com/2009/07/jquery-ui-datepicker-for-birth-date-input/

Ich habe gerade ein Plugin für JSFiddle entdeckt. Zwei mögliche Alternativen: 1 einzelner Eingang ODER 3 Eingänge, sieht aber wie ein einzelner aus ... (Verwenden Sie die Tabulatortaste, um zum nächsten Eingang zu gelangen.)

[Link] http://jsfiddle.net/davidelrizzo/c8ASE/ Es scheint interessant!

Ich denke, Sie können Plugin Birthdaypicker versuchen ,

Sie können das Plugin cxcalendar verwenden . Es sieht aus wie ein anderer Datepicker. Sie können jedoch Jahr und Monat in der Auswahl auswählen, nachdem Sie auf den Titel Jahr-Monat geklickt haben.

Ich habe drei Dropdowns für die Auswahl des Geburtsdatums und die Anzahl der Tage erstellt, die sich dynamisch basierend auf der Auswahl von Jahr und Monat ändern. http://jsfiddle.net/ravitejagunda/FH4VB/10/

daysInMonth = new Date(year,month,1,-1).getDate();