生年月日を入力するのに最適なUIは何ですか？
生年月日セレクタの最良の方法は何ですか？
- 3つのテキスト入力（月/日/年）または1つのマスク入力。ユーザーはキーボードを使用する必要があります
- 3つの選択ボックス。ユーザーはキーボードまたはマウスを使用できます。
- ワンニース datepicker 。
最も使いやすく、問題のないソリューションを知りたいので、ユーザーはまったく混乱しません。
上級ユーザー向けのテキスト入力が最適です。ユーザーが日付形式を知っている場合、それは非常に高速です。それほど高度ではないユーザーには、datepickerの使用をお勧めします。通常、上級ユーザーと非上級ユーザーもいるため、テキスト入力と日付ピッカーの組み合わせをお勧めします。
「ユーザーをまったく混乱させない」ことを確認することが目標であれば、これが最善の選択肢だと思います。
生年月日の日付ピッカーはお勧めしません。最初に年を参照し（クリック、クリック、クリック…）、次に月を参照し（さらにクリック）、次にグリッド上の小さな数字を見つけてクリックする必要があります。
日付ピッカーは、頭の上の正確な日付がわからない場合に役立ちます。 2月の第2週の旅行を計画しています。
これは非常に古い質問ですが、特に登録フォームでは、生年月日を正しく入力するために非常に重要です。
Googleアカウントにサインアップするよりも、これをうまくやった人はいないと思います。
最初に選択ボックスから月を選択し、日付と年を手動で入力します。シンプル。
検証が簡単。ユーザーが簡単に正しく取得できるようにします。 1900年から現在の年までの選択ボックスで、年を遡ってスクロールすることはできません。月の入力に基づいて「日」選択ボックスを更新する必要はありません。ウェブ上で素晴らしい作品。モバイルで最適に動作します。 2014年10月1日など、すべてのロケールで機能します-10月1日ですか、それとも1月10日ですか？今後、この誕生日ピッカー形式がさらに多く登場することを期待しています。
日付ピッカーは、すべての点で不十分なソリューションです。非常に多くのクリック！私の意見では、日付ピッカーは、チケットの予約など、曜日を知ることが重要な場合にのみ役立ちます。
pdate 2/6/2016：私は英国出身なので、月/日/年ではなく、日/月/年の形式に精通しています。ただし、カーソルを使用して月を選択するユーザーは、「入力」>「選択ボックス」>「入力」と入力するよりも、最初に選択ボックスを使用する方がはるかに簡単だと思います。コメントの日付は2月6日ではなく、6月2日です。
このJakob Nielsenの記事 で述べたように、ユーザーによく知られているデータのドロップダウンリストは避けるべきです：
ユーザーの生年月日など、ユーザーによく知られているデータのメニュー。このような情報はユーザーの指に組み込まれていることが多く、メニューからそのようなオプションを選択する必要があると、情報を入力するための標準的なパラダイムが崩れ、さらにユーザーの作業が増えます。
理想的な解決策は次のようなsomethingです。
- 日、月、年に3つの個別のテキストボックスを提供します（適切にラベル付けされています）
- ユーザーのカルチャに従ってテキストボックスを並べ替えます。
- 日と月のテキストボックスは、2桁の入力が想定されるサイズにする必要があります。
- 年のテキストボックスは、4桁の年が想定されるようなサイズにする必要があります。
- ユーザーが2桁または4桁の年を入力できるようにします。 2桁の年を1900と仮定し、このonBlur（または次の確認ステップ）を反映するようにテキストボックスを更新します。
- ユーザーが月番号を入力できるようにしますOR月名。
編集：DOBピッカーの実装方法は次のとおりです。iOSデバイスで数値キーボードを強制するためにHTML5正規表現でマスクされたテキスト入力フィールド。
生年月日は、特定の生年月日を入力するのによく使用されるため、他の日とは異なります。
A 例のあるテキストボックスは、明確で迅速かつ簡単に入力できます。
_______
|_______| (example: 31/3/1970)
これにより、1/1/1970や20/07/70などの柔軟なフォーマットがサポートされます。
日付の慣習が異なるさまざまな文化（米国と英国など）をサポートする必要がある場合、この例に注意を払わない人にとっては、エラーが発生しやすくなります。これを回避するには、使用することができます
月のリストを選択し、日付と年のテキストボックスを選択。
_________ __ ____
|March |V| |__| |____|
これにより、日と月の順序のあいまいさがなくなりますが、使用するには少し不格好です。
Datejs をご覧ください。
Datejsは、オープンソースのJavaScript日付ライブラリです。
包括的でありながら、シンプルでステルスかつ高速。 Datejsはすべてのトライアルに合格し、ストライキの準備ができています。 Datejsは文字列を解析するだけでなく、文字列を2つにきれいにスライスします。
設計するのではなく、解決策が優勢であることに悩んでいます。 OPは、「最も使いやすく、問題のないソリューションを知りたいので、ユーザーが混乱することはありません。」と言いました。そのため、jQueryでもJavaScriptでも、C＃でもFORTRANでも、デザインは重要です。ここで重要なのはUIデザインではなく、UXデザインです。 （誤った非論理的な構成「UX/UI」を避けるための別の嘆願）。
テキスト入力を使用します。日、月、年（または月、日、年）というラベルの付いた3つの個別のボックスを使用します。ユーザーに日付を入力させます。同じインタラクションでテキストとリストを混在させるのは悪いことです（たとえば、年にテキスト入力を使用するのではなく、日付ピッカーまたは月と日にリストを使用する）。
フィールド内形式のヒントを使用する単一のテキストフィールドを使用します。たとえば、[日/月/年]形式を厳密に要求しないでください。ユーザーが月が予想される場所でJUNと入力した場合は、バックエンドで6月を使用します。ユーザーが月を予想する場所で6を入力した場合、バックエンドで6月を使用します。ユーザーが月を予想する場所で06と入力した場合、バックエンドで6月を使用します。
OccamのRazorをガイドとして使用します（実際には、ほとんどの場合、データは十分に正確です）。認知摩擦を減らす（ユーザーに考えさせないでください）。
DatePickerとフィールドの組み合わせもお勧めします
このデモ を参照してください。日付ピッカーは、ユーザーがフィールドに入力した日付を反映します。
ただし、 PrototypeとScriptaculousを使用したDatePicker に基づいています。説明のために言及します。
私はユーザーと一緒にdatePickerを試しましたが、それはユーザーにとって悪いUIであることが判明しました。私は彼らの要求に基づいて最終的には、[日] [月] [年]をすばやく入力できる3つのテキストボックスを用意することです
両方を入れて、それぞれを他方に更新します。ユーザーが日付ピッカーから日付を選択すると、テキストフィールドでの小さなミスクリックを修正したり、日付ピッカーでテキストフィールドに入力した選択肢を簡単に視覚化したりできます。
3つすべてをテストして、パフォーマンスが最も良いものを選択してみませんか？これは Google Website Optimizer をテストするのに適した候補のようです。
使用しているユーザーのタイプ、または実行しているサイトのタイプによって、ソリューションを「標準」とは異なるものにする必要がある場合があります。
私は通常両方を使用します-正しい形式でテキストフィールドに入力する日付ピッカー。上級ユーザーはテキストフィールドを直接編集でき、マウスが好きなユーザーは日付ピッカーを使用して選択できます。
スペースが心配な場合は、通常、テキストフィールドの横に小さなカレンダーアイコンがあります。カレンダーアイコンをクリックすると、日付ピッカーがポップアップとして表示されます。
また、正しい形式を示すテキスト（つまり、「DD/MM/YYYY」）をテキストフィールドに事前入力することをお勧めします。ユーザーがテキストフィールドにフォーカスすると、テキストが消えて独自のテキストを入力できるようになります。
おそらくここの高齢者の一人であり、今月下旬に生まれた私は、生年月日のドロップダウンメニューがイライラすることを発見しました。通常、2つのドロップダウンメニューを下にスクロールする必要がありますが、それは厄介です。むしろ入力したいです。
ドロップダウンメニューを受け入れるか入力できるようにコントロールを設計し、両方の機能を明確にすることができる場合、それは素晴らしいことです。
日付ピッカーを使用するかどうかは、日付がどれくらい前かによって異なります。それらが通常現在の月であり、数か月以上経ったことがほとんどなく、Javascriptが存在することがわかっている場合は、datepickerが適しています。日付が最近ではない場合（生年月日など）、これが最良の選択肢だと思います。
http://img411.imageshack.us/img411/6328/mockupg.png
これは、Patrick McElhaneyの回答とは異なります。年はドロップダウンではなくテキストボックスです。数百要素の長さのドロップダウンボックスから数字を選択することは、ユーザーにとって非常に迷惑です。
日付ピッカーは、生年月日を入力するために移動をより複雑にするだけだと思います。
既に述べたように、日と月のドロップリストとその年のテキストボックスの組み合わせは、ユーザーにとって最も効率的です。この方法で生年月日を入力するのに10秒もかかりません。これは、日付ピッカーよりもはるかに高速です。タブキー（すべてのユーザーがフォームの入力に使用することを学ぶ必要があります）のおかげで、1つのフォームからすばやく移動できます次の要素。
少なくともMacintosh（Windowsについては知りません）では、キーボードを使用して選択ボックス内の日付にアクセスすることもできます。タブキーのおかげで、フォーム要素にフォーカスを移動し、矢印キーを押してドロップダウンします。リスト、次に1967のように入力すると、瞬く間にそこに到達します…
DatePickerを使用します。エキスパートユーザーが手動で入力できる唯一のコンポーネントであり、初心者が非常に簡単に日付を入力できるようにガイドします。
タブを押してボタンを押して入力した場合、カレンダーはポップアップしません。そのため、熟練したユーザーはいらいらしません。
国際的なサイトには、日付ピッカー（およびフォールバックとして文書化された形式の入力ボックス）を好むでしょう。
日付の形式はさまざまであり、慣れている場合は読みにくい場合があります。残念なことに、多くの人はISO 8601に慣れていません。:-(
各フィールドにドロップダウンメニューを使用して、それぞれに日、月、年のラベルを付けることをお勧めします。日付ピッカーも役立つ場合がありますが、ユーザーがJavaScriptを有効にしていない場合は機能しません。
JQuery UI DatePickerを使用しませんか？
ほぼすべてのニーズに合わせて構成できます。唯一の欠点は、jQuery UIに含めると、フットプリントがやや大きいことです。
更新
一部のファイルサイズは変更されているように見えるため、以下で更新されます。これらの数値は、最後に更新された時間についてのみ正しいことに注意してください。それ以降、物事は変化した可能性があります。
- CSSテーマ-23kb
- jQuery UI-71kb縮小
- DatePicker-38kb
- プラスいくつかの画像（来月/前月、私はかなり気分が良いと確信しています）
しかし、それはそれほど悪くありません...
プラグイン birthdaypicker を試すことができると思います
JSFiddleでプラグインを発見しました。 2つの可能な選択肢：1つの入力OR 3つの入力ですが、1つの入力のように見えます...（Tabキーを使用して次の入力に移動します）
[リンク] http://jsfiddle.net/davidelrizzo/c8ASE/おもしろそう！
プラグイン cxcalendar を使用できます。他の日付ピッカーのように見えます。年月のタイトルをクリックした後、選択で年と月を選択できます。
JQueryUI日時ピッカーは、プロユーザーがテキストボックスに独自の値を入力できるようにするか、ピッカーから選択できるため、最適なオプションです。
誕生日や将来の日付を簡単に入力できるようにピッカーを設定するのも簡単です。
$（ '＃datepicker'）。datepicker（{
changeMonth：true、
changeYear：true、
yearRange： '-100：+50'
}）;
これは次のようなものを示しています（私は新しいユーザーとして写真を投稿できません： http://klalex.com/wp-content/uploads/2009/07/picture-1.png ）
yearRangeはDateTime.Now.Year-100からDateTime.Now.Year + 50までの日付を表示します
これを見つけました： http://klalex.com/2009/07/jquery-ui-datepicker-for-birth-date-input/