it-swarm.com.de

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

Was ist die beste Methode zur Wahl des Geburtsdatums?

  • 3 Texteingaben (Monat/Tag/Jahr) oder eine Maskeneingabe. Benutzer MUSS die Tastatur verwenden
  • 3 Auswahlfelder. Benutzer können Tastatur oder Maus verwenden. 
  • Ein Nizza Datepicker .

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

108
Ionuț Staicu

Für fortgeschrittene 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.

28
asalamon74

Wenn es Ihr Ziel ist, sicherzustellen, dass "der Benutzer überhaupt nicht verwirrt wird", denke ich, ist dies die beste Option.

three dropdowns for month, day, year

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

Datepicker sind nützlich, wenn Sie das genaue Datum nicht über Ihrem Kopf wissen, z. Sie planen eine Reise für die zweite Februarwoche. 

157

Dies ist zwar eine sehr alte Frage, aber es ist sehr wichtig, die Eingabe des Geburtsdatums korrekt vorzunehmen, insbesondere in einem Anmeldeformular.

Ich denke, niemand hat das besser gemacht als die Google-Konten.

Google Account signup

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

Einfach zu bestätigen. Einfach für Benutzer, um Recht zu bekommen. Kein Zurückblättern der Jahre in einer Auswahlbox von 1900 bis zum heutigen Jahr. Es ist nicht erforderlich, ein Auswahlfeld "Tag" basierend auf dem Monatseingang zu aktualisieren. Funktioniert gut im Web. Funktioniert gut auf dem Handy. Funktioniert für alle Sprachumgebungen, z. B. 01/10/2014 - ist das der 1. Oktober oder der 10. Januar? Ich gehe davon aus, dass wir dieses Geburtstag-Picker-Format in Zukunft viel mehr sehen werden.

Ein Datepicker ist eine rundum schlechte Lösung. So viele Klicks! Meines Erachtens ist ein Datepicker nur nützlich, wenn es wichtig ist, den Tag der Woche zu kennen, z. B. die Buchung von Tickets.

Update 06.02.2016: Ich komme aus Großbritannien und kenne die Formate Tag/Monat/Jahr eher als Monat/Tag/Jahr. Benutzer, die den Cursor jedoch zur Auswahl des Monats verwenden werden, sind der Ansicht, dass es viel einfacher ist, die Auswahlbox zuerst zu verwenden, als die Eingabe> Auswahlbox> Eingabe. Das Datum des Kommentars ist der 2. Juni, nicht der 6. Februar;)

124
Patrick

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

Daten, die den Benutzern bekannt sind, z. B. Monat und Jahr ihrer Geburt. Solche Informationen werden häufig in die Finger der Benutzer eingesponnen, und wenn Sie solche Optionen aus einem Menü auswählen müssen, wird das Standardparadigma für die Eingabe von Informationen aufgehoben, was für die Benutzer sogar mehr Arbeit verursacht.

Die ideale Lösung ist wahrscheinlich etwas wie folgt:

  • Geben Sie 3 separate Textfelder für Tag, Monat und Jahr an (entsprechend gekennzeichnet).
  • Sortieren Sie die Textfelder nach der Benutzerkultur.
  • Die Textfelder für Tag und Monat sollten so bemessen sein, dass eine zweistellige Eingabe angenommen wird.
  • Das Textfeld "Jahr" sollte so bemessen sein, dass ein vierstelliges Jahr angenommen wird.
  • Erlauben Sie dem Benutzer die Eingabe einer 2- oder 4-stelligen Jahreszahl. Nehmen Sie an, dass das zweistellige Jahr 1900 ist, und aktualisieren Sie das Textfeld, um dieses onBlur (oder einen nachfolgenden Bestätigungsschritt) wiederzugeben.
  • Erlauben Sie dem Benutzer die Eingabe einer Monatsnummer OR.

BEARBEITEN: So haben wir unseren DOB-Picker implementiert: Maskiertes Texteingabefeld mit HTML5-Regex zum Erzwingen der numerischen Tastatur auf iOS-Geräten.

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

25
Alex Czarto

Geburtsdaten unterscheiden sich von anderen Daten, weil Menschen oft 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 flexible Formatierungen unterstützen, z. B. 1/1/1970 oder 20/07/70.

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
Liste für Monat auswählen und Textfelder für Datum und Jahr .

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

Dadurch werden Mehrdeutigkeiten zwischen der Bestellung von Tag und Monat beseitigt, die Verwendung ist jedoch etwas unübersichtlicher.

11
Bennett McElwee

Sie sollten einen Blick auf Datejs werfen.

Datejs ist eine Open-Source-JavaScript-Datumsbibliothek.

Umfassend und dennoch einfach, stealthy und schnell. Datejs hat alle .__ übergeben. Gerichtsverfahren und ist bereit zu streiken. Datejs analysiert nicht nur Strings, sondern schneidet sie sauber in zwei Teile.

Ich bin beunruhigt über das Überwiegen der Lösung, anstatt zu entwerfen. Das OP sagte: "Ich möchte wissen, welche Lösung am geeignetsten ist und die problemloseste ist, also wird der Benutzer überhaupt nicht verwirrt." 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 Design der Benutzeroberfläche. (Ein weiterer Grund, 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 die 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 Datumsauswahl oder Listen für Monat und Tag).

Verwenden Sie ein einzelnes Textfeld, das In-Field-Formathinweise verwendet, z. B. [Tag/Monat/Jahr]. Benötigen Sie keine Formate zu starr. Wenn ein Benutzer JUN an dem Ort eingibt, an dem Sie einen Monat erwarten, verwenden Sie Juni am hinteren Ende. Wenn ein Benutzer an dem Ort, an dem Sie einen Monat erwarten, 6 eintippt, verwenden Sie June am hinteren Ende. Wenn ein Benutzer an dem Ort, an dem Sie einen Monat erwarten, 06 eintippt, verwenden Sie Juni am hinteren Ende. 

Verwenden Sie das Rasiermesser von Occam als Leitfaden (in der Tat sind die Daten meistens genau genug). Reduzieren Sie die kognitive Reibung (lassen Sie die Benutzer nicht zum Nachdenken anregen).

3
Joe

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

Siehe diese Demo , wobei die Datumsauswahl das vom Benutzer in den Feldern eingegebene Datum angibt.
Es basiert jedoch auf einem DatePicker mit Prototype und Scriptaculous . Ich erwähne es zur Veranschaulichung.

3
VonC

Ich hatte DatePicker mit meinem Benutzer ausprobiert, aber es stellte sich heraus, dass es eine schlechte Benutzeroberfläche für sie war .. Was ich am Ende ihrer Anfrage beende, ist ein Textfeld, in dem sie schnell [Tag] [Monat] [Jahr] eingeben können: (

3
c.sokun

Setzen Sie beide und machen Sie jedes Update das andere. Wenn der Benutzer das Datum aus dem Datepicker auswählt, ist es leicht, einen geringfügigen Fehlklick im Textfeld zu beheben oder die im Textfeld eingegebene Auswahl im Datepicker anzuzeigen.

2
Tuminoid

Warum testen Sie nicht alle drei und wählen denjenigen aus, der am besten abschneidet. Dies scheint ein guter Kandidat für Google Website Optimizer zu sein.

Es kann sein, dass die Art der Benutzer, die Sie verwenden, oder die Art der Site, die Sie ausführen, möglicherweise dazu führen, dass Ihre Lösung sich von der "Norm" unterscheidet.

2
Nicolai

Normalerweise verwende ich beides - eine Datumsauswahl, die ein Textfeld im richtigen Format ausfüllt. Fortgeschrittene Benutzer können das Textfeld direkt bearbeiten. Benutzer, die mit der Maus zufrieden sind, 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 der Datumsaufruf als Popup angezeigt.

Ich finde es auch empfehlenswert, das Textfeld mit Text zu füllen, der das richtige Format angibt (d. H. "DD/MM/YYYY"). Wenn der Benutzer das Textfeld fokussiert, verschwindet dieser Text, sodass er seinen eigenen eingeben kann.

1
Stewart Johnson

Als vielleicht einer der älteren Menschen hier und spät im Monat geboren, finde ich Dropdown-Menüs für Geburtstage frustrierend. Normalerweise muss ich in zwei Dropdown-Menüs nach unten scrollen, und das ist umständlich. Ich würde es viel lieber eintippen.

Wenn Sie ein Steuerelement so gestalten können, dass es entweder Dropdown-Menüs akzeptiert oder Eingaben ausführt und klarstellt, dass beide funktionieren, wäre das hervorragend.

1
David Thornley

Ob ein Datepicker verwendet wird oder nicht, hängt davon ab, wie lange die Daten her sind. Wenn sie normalerweise im aktuellen Monat sind und fast nie älter als ein paar Monate sind und Sie wissen, dass Javascript in der Nähe ist, ist ein Datepicker gut. Wenn die Daten nicht aktuell sind (beispielsweise ein Geburtsdatum), denke ich, ist dies die beste Option:

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

Beachten Sie, dass sich die Antwort von Patrick McElhaney darin unterscheidet, dass das Jahr ein Textfeld ist und kein Dropdown. Die Auswahl einer Zahl aus Hunderten von Elementen aus einer Dropdown-Liste ist für den Benutzer sehr ärgerlich.

1
Kip

Ich denke, eine Datumsauswahl macht den Umzug komplizierter, um das Geburtsdatum einzugeben.

Wie bereits erwähnt, erscheint eine Kombination von Drop-Listen für Tage und Monate mit einem Textfeld für das Jahr für einen Benutzer am effizientesten. Es dauert weniger als 10 Sekunden, um ein Geburtsdatum auf diese Weise einzugeben, was viel schneller ist als eine Datumsauswahl: Dank der Tabulatortaste (die alle Benutzer lernen sollten, um ein Formular auszufüllen), ist es schnell, ein Formular zu verwenden Element zum nächsten. 

Zumindest unter Macintosh (ich kenne mich mit Windows nicht aus) können Sie auch über die Tastatur auf das Datum in Auswahlfeldern zugreifen: Dank der Tabulatortaste erhalten Sie den Fokus auf das Formularelement. Drücken Sie dann die Pfeiltaste, um das Dropdown-Menü aufzurufen die Liste, dann tippe zum Beispiel 1967 ein und du kommst dorthin…

1
Firebush

Ich würde einen DatePicker nehmen. Es ist die einzige Komponente, die erfahrene Benutzer manuell eingeben können, und Neulinge können ganz einfach ein Datum eingeben.

Der Kalender sollte nicht angezeigt werden, wenn Sie über die Tabulatortaste eingeben, aber auf eine Schaltfläche klicken. So ärgert sich kein sachkundiger Benutzer.

0
guerda

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

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

0
stesch

Ich würde vorschlagen, für jedes Feld ein Drop-Down-Menü zu verwenden, um sicherzustellen, dass jedes als Tag, Monat und Jahr bezeichnet wird. Möglicherweise hilft auch eine Datumsauswahl, aber wenn der Benutzer JavaScript nicht aktiviert hat, funktioniert es nicht.

0
Philip Morton

Für wen verwenden Sie nicht den Dateipicker für die jQuery-Benutzeroberfläche?

Es ist konfigurierbar, um so gut wie jeden Bedarf zu erfüllen. Der einzige Nachteil ist, wenn Sie es mit jQuery UI einbinden, es hat einen etwas großen Footprint.

Aktualisieren

Einige der Dateigrößen scheinen sich geändert zu haben. Sie werden daher unten aktualisiert. Beachten Sie, dass diese Zahlen nur für den Zeitpunkt gültig sind, zu dem sie zuletzt aktualisiert wurden. Die Dinge können sich seitdem geändert haben.

  • CSS Theme - 23kb
  • jQuery UI - 71kb minimiert
  • DatePicker - 38 kb
  • Plus ein paar Bilder (nächster Monat/vorheriger Monat, von denen ich ziemlich sicher bin, dass sie begeistert sind)

Aber das ist nicht so schlimm ...

0
alex

Ich denke, Sie können das Plugin birthdaypicker ausprobieren, 

enter image description here

0
legendJSLC

Ich habe gerade ein Plugin in JSFiddle entdeckt. Zwei mögliche Alternativen:. Einzelne Eingabe OR 3 Eingänge, sieht aber wie eine einzige aus ...

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

0
Laurent B

sie können das Plugin cxcalendar verwenden. Es sieht aus wie andere Datepicker. Sie können jedoch nach Auswahl von Jahr-Monat-Titel Jahr und Monat auswählen.

enter image description here

0
legendJSLC

JQueryUI datetime picker ist die beste Option, da Pro-Benutzer ihren eigenen Wert in das Textfeld eingeben können oder sie aus dem picker auswählen können.

Das Einrichten des Kommissionierers für die einfache Eingabe von Geburtstagen oder zukünftigen Daten ist ebenfalls ziemlich einfach:

 $ ('# Datepicker'). Datepicker ({
 ChangeMonth: true, 
 ChangeYear: true, 
 YearRange: '-100: +50' 
});.

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

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

gefunden am: http://klalex.com/2009/07/jquery-ui-datepicker-for-birth-date-input/

0
pajics