Was ist das beste UI für die Eingabe des Geburtsdatums?

Was ist die beste Methode für das Datum der Geburt selector?

  • 3 text-Eingaben (Monat /Tag /Jahr) oder eine Maske-Eingang. Der Benutzer MUSS die Tastatur benutzen,
  • 3 select-Boxen. Der Benutzer kann über die Tastatur oder Maus.
  • Eine nette datepicker.

Ich will wissen, was ist der am meisten verwendbar und problemlose Lösung, damit der Benutzer nicht verwirrt alle.

Kommentar zu dem Problem
Das jQuery date picker scheint zu funktionieren, im Firefox, aber nicht im IE7. Kommentarautor: Richard Everett
vielleicht ist Ihre Website ein problem haben. Datepicker funktioniert in IE6/7/8, FF, Opera und Safari. Vielleicht auch mehr 🙂 Kommentarautor: Ionuț Staicu
Monat / Tag / Jahr offen gesagt seltsam. Kommentarautor: TRiG
Leider war ich gelehrt Monat/Tag/Jahr in der Schule, wie ein kleines Kind. Es macht keinen Sinn wissenschaftlich. Kommentarautor: Duncan Calvert
ISO 8601 für den Sieg! Jahr / Monat / Tag Kommentarautor: Qqwy

InformationsquelleAutor der Frage Ionuț Staicu | 2008-12-04

  1. 27

    Für eine erweiterte Benutzer-text-Eingabe ist das beste, wenn der Benutzer weiß das Datum-format, es ist sehr schnell. Für einen nicht so fortgeschrittenen Benutzer, schlage ich vor, mit einem datepicker. Da in der Regel Sie haben auch fortgeschrittene und nicht fortgeschrittene Benutzer empfehle ich eine Kombination aus text-input und datepicker.

    InformationsquelleAutor der Antwort asalamon74

  2. 154

    Wenn Ihr Ziel ist es, sicherzustellen, dass "die user werden nicht verwirrt", ich denke, dies ist die beste option.

    Was ist das beste UI für die Eingabe des Geburtsdatums?

    Ich würde nicht empfehlen, ein datepicker für Geburtsdatum. Zuerst müssen Sie auf durchsuchen, um das Jahr (Klick, Klick, Klick...), dann der Monat (auf etwas mehr), und dann finden, und klicken Sie auf die kleine Zahl, die auf einem raster.

    Datepickers sind nützlich, wenn Sie nicht das genaue Datum wissen aus der Spitze von Ihrem Kopf, z.B. Sie planen eine Reise für die zweite Februar-Woche.

    InformationsquelleAutor der Antwort Patrick McElhaney

  3. 112

    Dies ist zwar eine sehr alte Frage, ist es so wichtig, immer das Datum der Geburt Eingabe korrekt ist, insbesondere ein Anmeldeformular.

    Ich denke, niemand hat dies besser als die google-Konten anmelden:

    Was ist das beste UI für die Eingabe des Geburtsdatums?

    Wählen Sie die Monats-ersten aus einem select-Feld und geben Sie manuell das Datum und das Jahr. Einfach.

    Einfach zu überprüfen. Für die Benutzer einfach, um richtig zu machen. Kein scrollen zurück, der Jahre in einer select-box aus dem Jahre 1900-das aktuelle Jahr. Keine Notwendigkeit zu aktualisieren, ein 'Tag' select-box basiert auf Monat-Eingang. Funktioniert Super auf web. Funktioniert Super auf dem Handy. Funktioniert für alle Gebietsschemas zB 01/10/2014 - ist, dass der 1. Oktober oder 10. Jan? Ich erwarte, dass wir sehen werden, diesen Geburtstag picker-format viel mehr in der Zukunft.

    Einen datepicker ist nur eine schlechte Lösung, die alle Runde. So viele Klicks! Meiner Meinung nach, ein datepicker ist nur sinnvoll, wenn die Kenntnis der Tag der Woche ist wichtig, z.B. Buchung von tickets.

    Update 2/6/2016: ich bin aus UK, so bin ich mehr vertraut mit Tag/Monat/Jahr-Formate, anstatt Monat/Tag/Jahr. Jedoch, Benutzer, die mit Ihren cursor, um wählen Sie den Monat, ich glaube, es ist viel einfacher mit der select box den ersten, anstatt input > Feld auswählen > Eingabe. Die Kommentar-Datum ist der 2. Juni, nicht 6. Jan 😉

    InformationsquelleAutor der Antwort Patrick

  4. 25

    Wie bereits in dieser Jakob Nielsen Artikel, drop-down-Listen sollte vermieden werden, für Daten, die bekannt ist der Benutzer:

    Menüs von Daten bekannt, um Benutzer, wie der Monat und das Jahr Ihrer Geburt. Solche Informationen sind oft fest verdrahtet, in der Nutzer die Finger, und wählen Sie diese Optionen aus einem Menü bricht das standard-Paradigma für die Eingabe von Informationen und können sogar mehr Arbeit für die Nutzer.

    Die ideale Lösung ist wahrscheinlich etwas wie folgt:

    • Bieten 3 separate Felder für Tag, Monat und Jahr (entsprechend beschriftet)
    • Sortieren der Textfelder je nach Kultur.
    • Tag und Monat Textfelder sollte so bemessen sein, dass eine 2-stellige Eingabe ist übernommen.
    • Jahr text box sollte so bemessen sein, dass eine 4-stellige Jahr ausgegangen.
    • Ermöglichen den Benutzer zur Eingabe eines 2-oder 4-stelligen Jahr. Übernehmen Sie eine 2-stellige Jahr 1900, und aktualisieren Sie das Textfeld, um diese zu reflektieren onBlur (oder in einem folgenden Schritt der Bestätigung).
    • Erlauben es dem Benutzer, entweder einen Monat Nummer ODER name des Monats.

    EDIT: Hier ist, wie wir implementierten unsere DOB-picker: Formatierte text-Eingabe-Feld mit HTML5 regex zu zwingen, die numerische Tastatur auf iOS-Geräten.

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

    InformationsquelleAutor der Antwort Alex Czarto

  5. 11

    Geburtsdaten unterscheiden sich von anderen Daten, weil Menschen sind oft verwendet, um die Eingabe Ihrer spezifischen Geburtstag.

    Ein Textfeld mit einem Beispiel ist klar, schnell und einfach zu geben:

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

    Sollte dies unterstützen flexible Formatierung wie 1/1/1970 oder 20/07/70.

    Wenn Sie zur Unterstützung von verschiedenen Kulturen mit unterschiedlichen Datums-Konventionen (z.B. US und UK), dann könnte dieses Fehler-anfällig für Leute, die gar nicht auf das Beispiel. Um dies zu vermeiden, könnten Sie ein

    wählen Sie Liste für den Monat und die Textfelder für Datum und Jahr.

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

    Entfernt diese Ambiguität zwischen dem Tag und dem Monat der Bestellung, ist aber ein wenig clunkier zu verwenden.

    InformationsquelleAutor der Antwort Bennett McElwee

  6. 5

    Sollten Sie einen Blick auf Datejs.

    Datejs ist ein open-source JavaScript Date Library.

    Umfassende, aber einfache, verstohlen und schnell. Datejs bestanden hat alle
    Studien und ist bereit zuzuschlagen. Datejs nicht nur strings Parsen, es
    Scheiben Sie sauber in zwei.

    InformationsquelleAutor der Antwort Giovanni Cappellotto

  7. 3

    Ich würde auch empfehlen die Kombination von DatePicker-und Felder

    Sehen diese demo, wo die Datumsauswahl reflektiert das eingegebene Datum in die Felder durch den Benutzer.

    Es basiert jedoch auf einem DatePicker mit Prototype und Scriptaculous obwohl. Ich erwähne es zur illustration Zweck.

    InformationsquelleAutor der Antwort VonC

  8. 3

    Hatte ich versucht datePicker mit meinem Benutzer aber wiederum zu einer schlechten Benutzeroberfläche zu Ihnen.
    Was ich am Ende die Basis, auf deren Anfrage, 3 textbox, wo Sie können schnell geben Sie [ Tag ] [ Monat ] [ Jahr ] 🙁

    InformationsquelleAutor der Antwort c.sokun

  9. 3

    Ich bin beunruhigt durch das überwiegen der solutioning nicht das Design. Der OP sagte, "ich will wissen, was ist der am meisten verwendbar und problemlose Lösung, damit der Benutzer nicht verwirrt werden." Also egal, ob jQuery oder JavaScript oder C# oder FORTRAN, das design ist wichtig-und es ist der UX-design, nicht dem design der Benutzeroberfläche kommt es hier an. (Ein weiteres Plädoyer zu vermeiden, die falsche und unlogische Konstruktion "UX/UI").

    Verwenden der Texteingabe. Verwenden Sie drei separate Felder für Tag, Monat und Jahr (oder Tag, Monat und Jahr). Lassen Sie die Benutzer geben das Datum an. Mischen von text und Listen in der gleichen Interaktion ist eine Schlechte Sache (keine text Eingabe für Jahr, aber die Datumsauswahl oder-Listen für Monat und Tag, zum Beispiel).

    Verwenden Sie ein einzelnes Textfeld, das in-Feld-format-Hinweise, zum Beispiel, den [ Tag /Monat /Jahr ] nicht erforderlich-Formate zu starr. Wenn ein Benutzer Typ-JUN in den Ort, wo Sie erwarten, dass ein Monat, dann verwenden. Juni auf dem back-end. Wenn eine Benutzer-Typen 6 in dem Ort, wo Sie erwarten, dass ein Monat, dann verwenden. Juni auf dem back-end. Wenn eine Benutzer-Typen 06 in den Ort, wo Sie erwarten, dass ein Monat, dann verwenden. Juni auf dem back-end.

    Verwenden Ockhams Rasiermesser als Führer (in der Tat, die meisten der Zeit, werden die Daten genau genug). Verringerung der kognitiven Reibung (nicht machen die Nutzer denken).

    InformationsquelleAutor der Antwort Joe

  10. 2

    Setzen und machen jedes update das andere. Wählt der Benutzer das Datum aus dem datepicker, es ist einfach zu beheben eine kleine misclick in das Textfeld eingeben oder visualisieren Sie in der Wahl Ihrer Eingabe in Textfeld in der datepicker.

    InformationsquelleAutor der Antwort Tuminoid

  11. 2

    Warum nicht testen Sie alle drei und wählen Sie die eine, die funktioniert am besten?
    Dies scheint wie ein guter Kandidat für Das Google Website-Optimierungstool zu testen.

    Kann es sein, dass die Art der Benutzer, die Sie haben, oder die Art von Website, die Sie ausführen können vorschreiben, dass Ihre Lösung sollte anders sein als die "norm".

    InformationsquelleAutor der Antwort Nicolai

  12. 1

    Ich verwende normalerweise beide -- ein datepicker, das füllt ein textfield-Objekt in das richtige format. Fortgeschrittene Benutzer können Bearbeiten Sie die textfield-direkt, Maus-happy Benutzer können wählen Sie mithilfe der Datumsauswahl.

    Wenn Sie sich sorgen über Speicherplatz, normalerweise habe ich nur das Textfeld mit einem kleinen Kalender-icon daneben. Wenn Sie klicken Sie auf das Kalender-Symbol es öffnet sich der datepicker als popup.

    Auch ich finde es eine gute Praxis, vor-füllen Sie das Textfeld mit text, der zeigt das richtige format (z.B.: "DD/MM/YYYY"). Wenn der Benutzer konzentriert sich die textfield, text verschwindet, so dass Sie können geben Sie Ihre eigenen.

    InformationsquelleAutor der Antwort Stewart Johnson

  13. 1

    Als vielleicht eine von den älteren Menschen, die hier geboren und spät im Monat, ich finde drop-down-Menüs für die Geburtsdaten zu frustrierend. Ich in der Regel nach unten scrollen müssen auf zwei drop-down-Menüs, und das ist umständlich. Ich würde viel lieber geben Sie es in.

    Wenn Sie können über eine Steuerung so ausgelegt, dass Sie entweder akzeptieren drop-down-Menüs oder eingegeben werden, und machen Sie deutlich, beide arbeiten, die ausgezeichnet sein würde.

    InformationsquelleAutor der Antwort David Thornley

  14. 1

    Ob es sich um einen datepicker oder nicht, ich denke, dass hängt davon ab, wie lange die Termine sind. Wenn Sie sind in der Regel im aktuellen Monat, und fast nie mehr als ein paar Monate alt, und Sie wissen, dass Javascript um, ein datepicker ist gut. Wenn die Termine nicht aktuell ist (z.B. Geburtsdatum) ich denke, dies ist die beste option:

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

    Beachten Sie, dass dies unterscheidet sich von Patrick McElhaney Antwort, dass Jahr ist ein Textfeld, nicht eine dropdown -. Auswahl einer Zahl aus einem drop-down-box, der Hunderte von Elementen, die lange ist sehr ärgerlich für den Benutzer.

    InformationsquelleAutor der Antwort Kip

  15. 1

    Ich denke, ein Datum-picker-machen einfach die Bewegung komplizierter, geben Sie ein Geburtsdatum.

    Wie bereits erwähnt, eine Kombination aus Dropdown-Listen für Tage und Monate mit einem Textfeld für das Jahr, scheint die effizienteste für einen Benutzer. Es dauert nur weniger als 10 Sekunden, um ein Geburtsdatum, die ist weit schneller, als ein date-picker: Dank der tab-Taste (die alle Benutzer sollten lernen, zu verwenden, um eine vollständige form), es ist schnell, um zu gehen von einem Formularelement zum nächsten.

    Zumindest unter Macintosh (ich weiß nicht über Windows), können Sie auch die Tastatur verwenden, um den Zugriff Datum in select-Boxen: Dank der tab-Taste, erhalten Sie den Fokus auf das Formular-element, und drücken Sie dann die Taste, um drop-down-Liste, dann geben Sie z.B. 1967 und Sie erhalten es in der ein Wimpernschlag...

    InformationsquelleAutor der Antwort Firebush

  16. 0

    Ich würde lieber einen datepicker (und ein Eingabe-Feld mit dokumentierten format als fall-back) für eine internationale Website.

    Datum-Formate variieren und sind manchmal schwer zu Lesen, wenn Sie sich jetzt an Sie gewöhnt haben. Schade, viele Menschen sind nicht komfortabel mit ISO 8601. 🙁

    InformationsquelleAutor der Antwort stesch

  17. 0

    Ich würde vorschlagen, mit einem drop-down-Menü für jedes Feld, und achten Sie auf die label-jeweils als Tag, Monat und Jahr. Ein Datumsauswahl-könnte auch helfen, aber wenn der user kein JavaScript aktiviert hat, funktioniert es nicht.

    InformationsquelleAutor der Antwort Philip Morton

  18. 0

    Ich würde einen DatePicker. Es ist die einzige Komponente ist, können erfahrene Benutzer ihn manuell eingeben und guides Novizen geben Sie ein Datum sehr einfach.

    Der Kalender sollte nicht pop-up, wenn Sie über drücken der tab-Taste, sondern klicken auf eine Schaltfläche. Also keine expert user ist genervt.

    InformationsquelleAutor der Antwort guerda

  19. 0

    Wer Sie nicht verwenden die jQuery-UI-DatePicker?

    Es ist konfigurierbar, um die Farbe so ziemlich alle Bedürfnisse. Der einzige Nachteil ist, wenn Sie einschließlich es mit jQuery UI es hat eine etwas größere Grundfläche..

    Update

    Einige der Datei-Größen angezeigt wird, geändert haben, so dass Sie aktualisiert werden unten. Denken Sie daran, diese zahlen werden nur korrekt für die Zeit, die Sie zuletzt aktualisiert wurden. Dinge haben sich seitdem verändert.

    • CSS-theme - 23kb
    • jQuery-UI - 71kb minified
    • DatePicker - 38kb
    • Plus ein paar Bilder (im nächsten Monat/Vormonat, die ich bin mir ziemlich sicher sprited)

    Aber das ist nicht so schlimm...

    InformationsquelleAutor der Antwort alex

  20. 0

    JQueryUI datetime picker ist die beste option, da es ermöglicht pro-Benutzer geben Sie Ihren eigenen Wert in das Textfeld ein oder wählen Sie es aus picker.

    Einrichten picker ermöglicht eine einfache Eingabe von Geburtstagen oder zukünftigen Terminen ist ziemlich einfach:

    $('#datepicker').datepicker({ 
 changeMonth: true, 
 changeYear: true, 
 yearRange: ‘-100:+50' 
});

    dieser zeigt so etwas wie dies (nicht post ein Foto, wie ich bin neuer Benutzer: http://klalex.com/wp-content/uploads/2009/07/picture-1.png)

    und yearRange zeigt, stammt aus dem DateTime.Nun.Jahr - 100), DateTime.Nun.Jahr + 50

    finden Sie diese auf: http://klalex.com/2009/07/jquery-ui-datepicker-for-birth-date-input/

    InformationsquelleAutor der Antwort pajics

  21. 0

    Habe ich gerade entdeckt, ein plugin auf JSFiddle.
    Zwei mögliche alternativen :
    1 single-input ODER 3 Eingänge, aber sieht aus wie ein einziges... (mit der Tab-Taste gelangen Sie zum nächsten Eingang)

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

    InformationsquelleAutor der Antwort Laurent B

  22. 0

    Ich denke, Sie können versuchen, plugin birthdaypicker,

    Was ist das beste UI für die Eingabe des Geburtsdatums?

    InformationsquelleAutor der Antwort legendJSLC

  23. 0

    können Sie plugin verwenden cxcalendar. Es sieht aus wie andere datepicker. aber Sie können wählen Sie Jahr und Monat wählen Sie nach einem Klick auf Jahr-Monat Titel.

    Was ist das beste UI für die Eingabe des Geburtsdatums?

    InformationsquelleAutor der Antwort legendJSLC

  24. -2

    Erstellte ich drei dropdowns für das Datum der Geburt, die Auswahl und die Anzahl der Tage ändert sich dynamisch, abhängig vom Jahr und Monat Auswahl. http://jsfiddle.net/ravitejagunda/FH4VB/10/ 

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

    InformationsquelleAutor der Antwort user3845825

Schreibe einen Kommentar