web-dev-qa-db-ja.com

生年月日フォームフィールドを提示する最良の方法は何ですか?

ユーザーがDOBに入力する必要があるフォームを作成しています。このためのベストプラクティスは何ですか?私は3つの基本的なオプションを識別しました:

  • フリーテキストフィールドユーザーは、フリーテキストフィールドに日、月、年を入力できます。 UTの期間中、ユーザーが「1981」ではなく「81」を入力すると、いくつかのマイナーな問題が発生することに気づきました。または、ユーザーがデータを入力するときにキーボードを見る傾向があり、画面ではなくすべてのフィールドに入力する傾向があり、それを調べて、日フィールドのみが入力されています。

  • ドロップダウンメニューユーザーは一連のドロップダウンメニューから日、月、年を選択できます。したがって、ドロップダウン1は1〜31のリストで、ドロップダウン2は1月から12月までです。最終的なドロップダウンの年数は非常に長いですが、これは簡単に思えます-1920年から1994年

  • 日付ピッカー実際のオプションではありませんが、ユーザーが月と年をスクロールして生年月日を選択できるカレンダーアイコンを日付ピッカーに表示できます。

では、どちらが最善のアプローチですか、それとも他のアイデアですか?

35
Oliver Gitsham

Bennettが示唆するように、サンプルの説明を含むシンプルな単一のテキストフィールドを使用します。

Date of birth |________| (example: 31/5/1970)

ただし、ページに別の要素も追加します。これをフィールド反射パターンと呼びます。フォームは、フィールドに入力されたものをすべて受け取り、次に動的に解析して解釈し、情報を少し異なる形式で反映します。日付の場合、これは「70/5/31」を取得し、「1970年5月31日日曜日」を表示することを意味します。

曜日を計算することは、楽しみのためにそこに追加する小さな喜びです。曜日を指定すると、表示に注意を向ける人が多くなり、エラーが頻繁に発生することがわかりました。

36
Erics

例のあるフリーテキストフィールドは明確で、すばやく簡単に使用できます。

 ________ 
生年月日| ________ | (例:1970年1月31日)

ドロップダウンは、日と月では問題なく、年では問題ありません。 1950年までスクロールするよりも、4桁の年を入力する方が簡単です。ドロップダウンの唯一の真の利点は、日と月の順序を強制することです。しかし、それらはタイピングと比較して使用するのが少し不格好です。

13
Bennett McElwee

もう1つの方法は、さまざまな形式を理解するのに十分にスマートなテキストフィールドです。ユーザーは「1981年4月21日」、「1981年4月21日」、「21.04.81」、またはその他の文字列を入力できます。通常、解析はそれほど難しくありません。例として WolframAlpha はこれらすべてを正しく理解します。もちろん、あいまいな状況に直面することもあります(1981年2月1日など、2月1日か1月2日か)。この場合、ユーザーに選択肢を与えるか、自動的に選択して警告を表示することができます。

そして、日付の選択について他のいくつかの質問を検討することをお勧めします。

7
Kostya

私が最も正確であると考えているもの(つまり、ユーザーの間違いはないが、それでも簡単に入力できる)は次のとおりです。-日付のないテキスト-月のドロップダウン(1月、2月...)

さて、これは「マウスとキーボードを混ぜないでください」に直面していることに気づきましたが、正直なところ、何年にもわたってユーザーとWebフォームをテストした結果、これが最も効果的に機能します。そして、その古いルールは、人々がマウスから離れるにつれて、とにかく関連性が低くなります。日付ピッカーは、今日に近い日付に最適です。完全なドロップダウンは醜い妥協です。完全なフリーテキストでは、ユーザーエラーが発生しやすくなります。

5
Rose Matthews

日付ピッカーを使用する場合、ユーザーに基づいて少し調整できます。サイトで18歳以上が必要な場合は、日付ピッカーに[currentyear-18]を開始させることができます。これにより、適切なパーセンテージで適切な年を選択しやすくなります。

単一のテキストフィールドを使用する場合(日付ピッカーと組み合わせる場合があります)、ユーザーが適切なフォーマットを入力できるようにマスクを適用できます。マスクされた入力プラグインのようなもの: http://digitalbush.com/projects/masked-input-plugin/

4
Jörn Zaefferer

フリーテキストフィールドの問題は、ユーザーがミスを犯しやすいことです。あなたが言うように、彼らは1981の代わりに81を入力するかもしれません。あなたのサイトが異なる国で使用されている場合、一部のユーザーは最初に日を書き、他のユーザーは最初に月などを書きます。

私は、日付ピッカーがユーザーがドブを見つけるためにあまりにも多くのナビゲーションを必要とし、時間がかかりすぎる(最もイライラする)と思います。日付ピッカーは、最近の日付を見つけるのに最適です。

ドロップダウンメニューは、Web登録フォームで最も頻繁に表示されるメニューです。ユーザーはドロップダウンリストの使用可能なオプションによって制限されるため、一般的にエラーが発生しにくくなります。フリーテキストフィールドよりも完了するまでに少し時間がかかりますが、エラーが増えるのを防ぎます。このオプションを使用する場合は、各フィールド内に「日」、「月」、「年」などを記述するのが最善であることを覚えておいてください。

4
usabilitygal

実際にはつの有効なオプションがあり、簡単なAB/Cテストで対象者に適したオプションを選択できます。 (それは本当にユーザーにのみ依存します)

結果が以下の3つのオプションのいずれかを指している多くのテストを確認しましたが、dd/yyyy as simple input fieldsを維持することを覚えている限り、他のソリューションでは課題と問題が発生しますあなたのユーザー)あなたは間違って行くことはできません。

Date of Birth Chooser

この例は、一部の国のみのフィールドの正しい順序を示しています*

4
Ciprian Pălici

www.rememberthemilk.com サイトの日付入力フィールドにはいつも感心しています。これは単一のフィールドであり、考えられるほとんどすべての方法で日付を入力でき、それを翻訳します。 (2011年12月15日、「2011年12月15日」、2011年12月15日、「次の金曜日」、「12月15日金」...)そして入力すると、入力した内容が読み取り可能な形式「金」に変換されます。 16 Dec 11 "なので、正しいことを確認できます。

入力した日付が有効でない場合(12月15日金曜日を入力する場合など)、日付が変更され(この場合は「Thur 15 Dec 11」に設定されます)、簡単に修正できます。

また、明らかな米国形式(12/15/11)で入力したかどうかを検出し、2011年12月15日という正しい日付を選択します。

これは非常に印象的なコーディングです。実際には、間違った日付を選択するために邪魔をする必要があります。

2
JonW

このトピックに従って問題を敏感にするための回答として、次の回答を参照してください。しかし、トピックが一般的な意味である場合、答えはあなたが思っているよりも関連性が高いかもしれません。

これはフリーテキスト入力フィールドの唯一の適切な解決策だと思います。誕生日を(完全に)知らない人が入力できる誕生日フォームを見たことがないからです。

ドイツのパスポート法(正確には 行政規則 と言われています)は、不明な場合、日と月(過去1年でさえ)はXXと書くことができると述べています。

つまり、これは、ドイツの一部のパスポートでは、所有者の誕生がXX.07.2000XX.XX.2000 あるいは XX.XX.XXXX(DD.MM.YYYY)。数年前、xの代わりにゼロが使用されていたため、00.00.0000は有効な誕生日として。

誰もが彼の誕生日を知っていると言うかもしれませんが、孤児や(かなり実際の)難民、特に小さな子供たちについて考えてください。

正直に言うと、特に「デジタル時代」以降、人々は推定年の01.01(ほぼ正しいかもしれません)のような、ある種の「デフォルトの誕生日」を使用すると言われている状況があります。しかし、これは他の問題をもたらします。なぜなら、その人が本当に01.01に生まれたのか、またはその人がその誕生日を知らないのかは言えないからです。

正しい日付を処理する方がはるかに簡単であり、任意の日付またはデフォルトの日付を選択するとほとんどのソフトウェアのニーズに合うので、これは大きな問題ではありません。しかし、「パスポートの誕生日」が本当に必要な場合(ユーザーが入力する場合)、このことを考慮し、「誕生日がわからない場合は、任意の年齢の01.01を選択する」などのアドバイスを追加するか、 「不明な誕生日」チェックボックス。他の国が表示された問題をどのように処理するかはわかりませんが、彼らが(部分的に)未知の誕生日を持っているか、デフォルトの誕生日を使用していることも想像できます。

1
bish

私が経験したことから、それはプロジェクトに依存します。 1年の長さにもかかわらず、3つのドロップダウンリストを使用してテストしたプロジェクトがある一方で、ヒントや例を含む標準のテキストボックスでユーザーに問題がないプロジェクトがありました。

最終的には、できるかどうかをテストします。

それを超えて、私は以下の開始ルールを手に入れました:

  1. データの正確さがシステムにとって重要である場合-ドロップダウンボックスは、長いオプションリストによる使いやすさを犠牲にして、正確さを向上させます。

  2. ユーザーが生年月日を提供することに警戒している場合-ぼかしをマスクするアクセス可能なヒントを備えた単一のテキストボックスを使用してください。または、月と日が本当に必要かどうかを確認するための要件を質問します。

  3. その他すべて-アクセス可能なヒントを備えた単一のテキストボックス。

1
JamesEggers

単純なテキスト入力が最適です。入力はデータを解析し、最も適切な日付を考え出すことができるはずです。私が使用しているそのようなものの1つはSlickDate( http://www.mountonetech.com/slickdate )です。

1
tonnier

Nielsen Norman氏によると、上記の貢献者の多くが言っているように、オープンテキストフィールドを使用するのが最善の方法です。ここにリンクがあります:

https://www.nngroup.com/articles/date-input/

0
John H

私たちのアプリケーションでは、このソリューションを採用しています:

日付ウィジェットは通常の自由形式の行編集ウィジェットです。何でも入力できます。入力した内容が何らかの形で日付として認識されるとすぐに、見つかったデータの解釈がウィジェットの下のドロップダウンのようなリストに表示されます。これらの解釈は、年と月の完全名を使用して表示され、可能性の高い順に並べられています。ウィジェットは、特定の日付範囲のみを提案するように制限できます。このように、誕生日の年として31を入力すると、2031ではなく1931が提案されます。ユーザーは提案のいずれかをクリックして、その解釈を選択できます。逆に、将来の予定を計画するために使用されるウィジェットでは、当面の日付が解釈の可能性が高くなります。

もちろん、システムロケールは、入力された日付の最も可能性の高い解釈が何であるか、どの月の名前と省略形が使用されているか、解釈された日付を表示するための許容可能な形式が何であるかを決定するために使用されます。

フォーカスが日付ウィジェットから離れると、ユーザーが入力したものは、解釈された可能性が最も高い日付、または「日付が選択されていません」や「無効な日付」などの筆記体メッセージに置き換えられます。フォーカスがウィジェットに戻ると、テキストは最初にユーザーがそこに入力したものになります。

もちろん、日付を解釈するためのルールはかなり緩いです。セパレータをまったく使用しないだけでなく、さまざまなセパレータを使用できます。どのフィールドへの手がかりは、それらが利用可能な場合に使用されるものです(日付を2桁に短縮するなど)が、世紀の部分に 'を使用すると、その部分が年であること、または' th '' st '' nd 'または数字の後ろの「rd」は、その部分がおそらく日数であることを示唆します)。月は、数値または名前として指定できます。オプションで、その月の一意の省略形に省略できます。

全体として、これは、ユーザーの観点から非常に柔軟で、高速に使用できる日付入力ウィジェットになります。

0
André

カレンダーUIウィジェットでインライン入力またはドロップダウン日付範囲を使用します。

アイトラッキングUXセッションは、ユーザーが日付ピッカーと対話する方法を知らない方法をすばやく特定しました。

0
soulglider