日付/時刻を入力するためのほとんどのユーザーフレンドリーなフォームフィールド？
アプリケーションに日付、時刻、またはその両方のフィールドを設定する方法は何ですか？それぞれの長所と短所は何ですか？
最も一般的なのは、2〜3個のドロップダウンの組み合わせ、またはいくつかのフォームカレンダーウィジェットです。他に利用できるオプションはありますか？最も使いやすいのはどれですか？
多くの場合、予想されるフォーマットを示す通常のテキストボックスで十分だと思います。 Kevinが述べたように、日付ピッカーを使用する場合は、直接入力する方法を絶対に提供する必要があります。多くの人は単に日付を入力することを好みます。
しかし、これはTechinsurance.comで行うことです...
もちろん、クライアント側とサーバー側の検証も行っています。私が追加した他の唯一の機能は、12121999または12-12-1999と入力した場合、テキストボックスにフォーカスを失うと、テキストが自動的にスラッシュでフォーマットされることです。 6月にこの手法を採用しましたが、これまでのところかなりうまくいきました。
コンテキストに依存するという点で、私はRahulに同意します。カレンダーウィジェットは、数か月前または数か月先に戻るのに非常に便利ですが、誕生日を選ぶのにはあまり適していません。
個人的には、これらの日付のプルダウンがあなたの生年月日を選ぶのを嫌っています。ターゲットの選択を達成するのが面倒になる傾向があるためですが、Kontain.comのサインアップフローで最近気の利いたものを見つけました。以下に示すように、リストの代わりに表にオプションをレイアウトしました（日と年についても同じでした）が、それが素晴らしい改善であることがわかりました。わーい！
使いやすさは、ユーザーとアプリのドメインの産物であることを忘れないでください。たとえば、カヤックのようなサービスを構築している場合は、アプリの操作中に日付コントロールを頻繁に使用する、テクノロジーに精通したユーザーに焦点を当てます。一方、GoogleとAmazonは対象読者が広く、やり取りも少ないため、優先順位は異なります。
これを念頭に置いて、いくつかの考慮事項を次に示します。
カレンダーコントロール。これらは、日付を選択する際に日付、時刻、または期間に関する追加のメタデータを伝えたい場合に非常に役立ちます。たとえば、旅行サイトで、ユーザーがホテルを予約する日付を選択しているとします。カレンダーコントロールを使用して、完全に予約されている日付を示すことができます。カレンダーコントロールは、実際のいとこであるカレンダーと最もよく似ているため、日付と時刻との相互作用をメンタルモデルに取り入れることで、ユーザーに好意を示しています。ただし、カレンダーコントロールが扱いにくくなるユースケースがあります。コントロールは一度に1か月ずつ表示するようにモデル化されているため、月間をスキップする制御を（多くの場合）矢印またはドロップダウンに押し込みます。ユーザーが日付を選択する際の自由度を高めようとしている場合、これは制限となる可能性があります。
ドロップダウンメニュー。多くの場合、[日] [月] [年]の3つが連続して表示されます。これらは、ユーザーが誕生日など、事前に知っている日付を選択するだけの場合に役立ちます。ほとんどのユーザーはマウスを使用するため、ドロップダウンを1回クリックして開く必要があり、項目ごとに1回クリックして選択する必要があるため、日付を含むタスクを繰り返すようにユーザーに要求する場合、これらはうまく機能しません。長いリストを上下にスクロールすることもできます（誕生日の場合、年メニューを1920で開始して2009で終了することも珍しくありません）。ドロップダウンメニューを選択する場合は、この点を考慮してください。
プレーンテキスト入力フィールド。他の人が答えたように、入力フィールドの良い点は、事実上何でも受け入れることができるということです。このような場合は、フォームデザインの原則を覚えておいてください。エンドユーザーにデータベース/バックエンドのフォーマットを強制しないでください。できるだけ多くの形式を受け入れるように、できる限り寛大になるようにしてください。クライアント側の検証を使用して、フォームを送信する前にユーザーに問題を指摘します（ユーザーが新しいDate（）関数に入力した文字列を与え、日付が返されるかどうかを確認することで、JavaScriptで日付を検証するのは非常に簡単です）。
コントロールを超えて、日付を扱うときはいくつかの常識の原則を考慮してください。
ユーザーが間違えていないか確認してください。 10代の若者向けのサイトを設計していて、誰かが1934年に生まれたと言っている場合は、それが選択肢であるかどうか、またそうする必要があるかどうか、実際に76歳であるかどうかをダブルチェックする必要があるかどうかを検討します。年齢の検証のためではありません。しかし、ユーザーへのサービスとして。同様に、旅行サイトを設計している場合、ユーザーが2011年10月ではなく、2011年10月にハワイへの休暇を予約することを本当に意図していたかどうかを確認することを検討してください。
ほとんどの場合、特定の時間を選択する必要はなく、おそらくユーザーのメンタルモデルに対応していません。イベントを計画する場合、必要になる可能性が最も高い細分度は5分間隔です。ユーザーが毎分60のオプションではなく、12：00、12：05、12：10などを選択できるコントロールを提供します。決定する粒度は、使用することを選択した特定のコントロール（ドロップダウンメニューなど）の使いやすさに大きな影響を与える可能性があります。
常に標準のコントロールを超えて、オプションとして情報グラフィックスの領域を調べます。通常、これらは実装するのが複雑で費用がかかりますが、日付/時刻の選択がコア機能である場合は、価値があります。たとえば、hipmunk.comには、フライトスケジュールの素晴らしい視覚的表現（入力ではなく読み取られます）があり、インタラクティブであるとさらに優れています。このような場合は、視聴者の期待を考慮してください。
可能な場合はデータ入力フォームを自由に保つ
プログラマーは怠惰です！コンピュータを少し動作させ、最初の日付入力用の特定の日付フィールドがないことを考慮してください。 Googleカレンダーでは、新しいイベントを作成するときに、次のように言うことができます。
- 7月4日：ジョーズプレイスでのディナー
次に、GCはそれをすべて（場所を含めて）計算し、ユーザープロファイルのロケールに基づいて、4/7：Dinner at Joe's placeの意味を理解します。その後の編集では、GCカレンダーコントロールは便利で使いやすいです。次の点と、ユーザーにとってこれがいかに簡単かを検討してください。
- 次の木
- 4時間後
- 2週間で
そして...ユーザーが知らない場合、ショックホラーはどうなりますか？私はこれまであまり見たことがありませんが、なぜこれがいくつかの状況で受け入れられる日付エントリではないのですか？
- 約3日で
私はこれが怖いことを知っています:) Tog On Software Design 、Bruce Tognazzini（Appleヒューマンインターフェイスガイドラインの原作者）は、ユーザーエクスペリエンスの実装は魔法のようなものだと説明していますトリック：「錯覚」：簡単に見えますが、その下ではあらゆる種類の狂気が起こっています。
私はソフトウェアに自動リマインダーを1日置いてから「ちょっと、今から何かしたかった」と言う前に
また、可能な限りコンテキストを使用します。
- ジョーの誕生日の前に
...連絡先やソーシャルグラフがある場合、これは簡単に理解できるはずです。そうでない場合は、尋ねます。
1か月以上考慮する
日付範囲がある場合は、月の境界が1か月しか表示されないカレンダービューにとって実際の面倒であると考えてください。 MacのiCalはこのようにすてきです。何ヶ月でも表示できるので、「今から2週間から3週間」の正確な日付を簡単に確認できます。
私は通常、通常のテキストボックスを使用し、それにJquery UI Datepickerを追加します。
ユーザーがタブまたはテキストボックスをクリックしてテキストボックスにフォーカスを移動すると、カレンダーコントロールがその下に一時的にポップアップします。テキスト入力を妨げない：
ユーザーは、解析可能な形式で日付を入力するか、カレンダーポップアップでマウスを使用できます。マウスで日付を選択すると、サイトのユーザーが希望する形式でテキストボックスに日付を入力し、ポップアップを閉じます。
時間を入力するために、私が忘れた人が行った同様の何かを見つけましたが、表形式のウィジェットに（12または24）時間のポップアップが表示され、時間を選択すると、0、15、30、45などのいくつかの選択肢のオプションがポップアップします。以前は時刻を入力するだけで問題ありません、ポップアップは無視されます。
また、カレンダーコントロールは、一度に1か月以上を表示するように調整できます。通常、日付のコンテキストに応じて、2〜3か月を並べて表示します。私の場合、日付の入力は通常、今四半期を中心に展開します。生年月日のエントリは、誰かがすでに指摘したようにうまく機能しません^^
複数のドロップダウンまたはウィジェットの一般的な代替手段は、標準のフォーマットヘルプテキストです。デフォルト値としてテキストフィールド内に表示されることもあれば、フィールドの右/下に表示されることもあります。デフォルトのテキストは「MM/DD/YYYY」または「dd-mm-yyyy」のようなものになります。以下は、Googleの登録フォームの例です。
これにより、ユーザーは何を入力するかを完全に制御でき、1つのテキストフィールドのみを使用します。このアプローチの欠点の1つは、適切な日付の規則に従っていることを確認するために、クライアント側の検証を追加する必要があることです。
最初の質問は、アプリケーションにある日付入力フィールドの数とそれらが使用される頻度です。
サインアップ時に誕生日を入力する必要がある場合、それだけであれば、まあ、それはおそらくあなたにとって高い優先順位であってはなりません。
ただし、日付が多い場合は、他の誰もまだ話し合っていないことを考慮すべきいくつかのポイントがあります。
ユーザーの希望する日付形式に注意する必要があります（私は米国にいないので、日付をDD/MM/YYYY形式にしたいのですが、月が最初にある米国の日付は読みにくく、タイプ）。
また、ユーザーがマウスで操作できるように作成されたページの場合は、日付フィールドの周りの他のコントロールも検討してください。一方、テキストフィールドがある場合は、マウスだけで操作できる日付ピッカーが必要です。ユーザーが「タイピングモード」になっている可能性が高い日付付近で、マウスを必要とする操作（複数のドロップダウンなど）を強制するのは煩わしいかもしれません。
最後に、ユーザーは私のユーザーではありません。テストして、半分のユーザーにテキストフィールドと半分のグラフィカルカレンダーコントロールを与え、各フォームに入力したユーザー数と、各グループがフォームに入力するのにかかる平均時間を測定します。 。
ここにこだわるのに十分重要な場合は、テストするのに十分重要です。
私の2セント：私は盲目で、最良のことは3つのコンボボックスだと思います。代替案は、月と日の2つのコンボボックスと年の入力テキストですが、このフィールドを制御する必要があります...プログラマーとして考える必要がある場合、私は単一の入力テキストを優先しましたが、サイトでそれを考えた場合「noobユーザー」かもしれない私は最良のことは最初のオプションだと思います:)
速度と使いやすさに関しては、単純な数値入力に勝るものはありません。 2010-09-21。 単一のテキストボックスを使用しますが、（一般的な "/"および "-"は別として）1つのフィールドから次のフィールドに移動するためのタブも受け入れます1。 「[tab]」を押すと、セパレータが挿入されます。区切り記号としては、フィールドをより明確に区切るため、ダッシュを好みます。
先行ゼロの入力を強制しないでください。
Bevanのように短縮された月のようなテキスト入力は、入力に時間がかかるため使用しません。また、どのように省略しますか？三文字？四？ Bevanへの返信で述べたように、海外の視聴者と協力している場合は特に悪い考えです。 「9月」は、ユーザーの言語では「9月」ではない場合があります。
国際的な聴衆について話す：すべての人がMM-DD-YYYY順序を使用しているわけではありません（実際、米国以外ではほとんど誰も使用していません）。テキストボックスの下に必要な順序を示すことができます。 5-06-201のような日付のあいまいさを回避する1つの方法は、ISO 8601形式YYYY-MM-DDを使用することです。
ユーザーが日付を入力できるテキスト入力と、使用できる形式のヒントを入力しますが、セパレータや桁数に関係なく、明確な形式を受け入れます。ユーザーが標準形式以外のものを入力したら、すぐに標準形式に更新して、ユーザーが日付をどのように解釈しているかを明確に理解できるようにします。カレンダーアイコンを追加して、カレンダーから選択するオプションが必要なユーザーに提供することもできます。日付を入力する必要があるユーザーは、そのアイコンを使用する必要はありません。
私はこれについていくつかの研究をしていた。カレンダーアプリから始めるのがよいでしょう。私のお気に入りのレイアウトは、右側に時間のある日付です。 Googleカレンダーの日付-時間-時間-日付形式は好きではありませんが、日付ピッカーとドロップダウンはかなり明確に実行されます。
（画像は掲載できませんでしたが、チェックしてみてください）