forms - 生年月日を入力するための最適なUIは何ですか？

Question

生年月日セレクターの最良の方法は何ですか？

3つのテキスト入力（月/日/年）または1つのマスク入力。ユーザーはキーボードを使用する必要があります
3つの選択ボックス。ユーザーはキーボードまたはマウスを使用できます。
1つの素敵なdatepicker。

最も使いやすく問題のない解決策を知りたいので、ユーザーはまったく混乱しません。

score 162 · Accepted Answer

「ユーザーがまったく混乱しない」ようにすることが目標であれば、これが最良の選択肢だと思います。

月、日、年の 3 つのドロップダウン

生年月日の日付ピッカーはお勧めしません。最初に年を参照し (クリック、クリック、クリック…)、次に月を参照し (さらにクリック)、グリッド上の小さな数字を見つけてクリックします。

日付ピッカーは、2 月の第 2 週に旅行を計画している場合など、頭の中で正確な日付がわからない場合に便利です。

score 146 · Accepted Answer

これは非常に古い質問ですが、特に登録フォームで生年月日を正しく入力するためには非常に重要です。

グーグルアカウントのサインアップほどこれをうまくやった人はいないと思います：

Google アカウントの登録

最初に選択ボックスから月を選択し、日付と年を手動で入力します。単純。

検証が容易。ユーザーが正しく理解するのは簡単です。1900 年から現在の年まで、選択ボックスで年をさかのぼってスクロールする必要はありません。月の入力に基づいて「日」選択ボックスを更新する必要はありません。ウェブ上でうまく機能します。モバイルでうまく機能します。すべてのロケールで機能します。たとえば、2014 年 1 月 10 日 - それは 10 月 1 日ですか、それとも 1 月 10 日ですか? この誕生日ピッカー形式は、今後さらに増えると思います。

日付ピッカーは、全体的に貧弱なソリューションです。クリック数がすごい！私の意見では、日付ピッカーは、チケットの予約など、曜日を知ることが重要な場合にのみ役立ちます。

2016 年 2 月 6 日更新:私は英国出身なので、月/日/年よりも日/月/年の形式に慣れています。ただし、カーソルを使用して月を選択するユーザーは、入力>選択ボックス>入力よりも、最初に選択ボックスを使用する方がはるかに簡単だと思います. コメント日は 2 月 6 日ではなく 6 月 2 日です ;)

score 28 · Accepted Answer

上級ユーザーの場合、テキスト入力が最適です。ユーザーが日付形式を知っている場合は、非常に高速です。それほど上級でないユーザーには、日付ピッカーを使用することをお勧めします。通常、上級ユーザーと非上級ユーザーもいるので、テキスト入力と日付ピッカーの組み合わせをお勧めします。

score 26 · Accepted Answer

この Jakob Nielsen の記事で述べたように、ドロップダウンリストは、ユーザーによく知られているデータには使用しないでください。

生年月日など、ユーザーがよく知っているデータのメニュー。このような情報は多くの場合、ユーザーの指に組み込まれており、メニューからそのようなオプションを選択しなければならないことは、情報を入力するための標準的なパラダイムを壊し、ユーザーにとってより多くの作業を生み出すことさえあります.

理想的な解決策は、おそらく次のようなものです。

日、月、年の 3 つのテキストボックスを用意します (適切なラベルを付けます)。
ユーザーの文化に従ってテキストボックスを並べ替えます。
日と月のテキストボックスは、2 桁の入力が想定されるサイズにする必要があります。
年テキストボックスは、4 桁の年が想定されるようにサイズ設定する必要があります。
ユーザーが 2 桁または 4 桁の年を入力できるようにします。2 桁の年が 1900 であると仮定し、この onBlur (または次の確認ステップ) を反映するようにテキストボックスを更新します。
ユーザーが月番号または月名のいずれかを入力できるようにします。

編集: DOB ピッカーの実装方法は次のとおりです。 iOS デバイスで数値キーボードを強制するための HTML5 正規表現を使用したマスクされたテキスト入力フィールド。

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

score 11 · Accepted Answer

生年月日は、特定の生年月日を入力することに慣れていることが多いため、他の日付とは異なります。
例を含むテキストボックスは、明確で、すばやく簡単に入力できます。

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

これは、1970 年 1 月 1 日や 20/07/70 などの柔軟な書式設定をサポートする必要があります。

異なる日付規則 (たとえば、米国と英国) で異なる文化をサポートする必要がある場合、この例に注意を払わない人にとってはエラーが発生しやすい可能性があります。これを回避するには
、月には選択リストを使用し、日付と年にはテキストボックスを使用できます。

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

これにより、日と月の順序のあいまいさがなくなりますが、少し使いにくくなります。

score 5 · Accepted Answer

Datejsを見てください。

Datejs は、オープンソースの JavaScript 日付ライブラリです。

包括的でありながらシンプルで、ステルスで高速です。Datejs はすべての試験に合格し、攻撃の準備ができています。Datejs は文字列を解析するだけでなく、文字列をきれいに 2 つにスライスします。

score 4 · Accepted Answer

設計ではなく解決策が優勢であることに悩んでいます。OPは、「ユーザーがまったく混乱しないように、最も使いやすく問題のない解決策を知りたい」と述べました。したがって、jQuery であれ、JavaScript であれ、C# であれ、FORTRAN であれ、デザインは重要です。ここで重要なのは UI デザインではなく、UX デザインです。（不正確で非論理的な構造「UX / UI」を避けるための別の嘆願）。

テキスト入力を使用します。日、月、年 (または月、日、年) のラベルが付いた 3 つのボックスを使用します。ユーザーが日付を入力できるようにします。同じインタラクションでテキストとリストを混在させることは悪いことです (たとえば、年にはテキスト入力を使用しませんが、月と日には日付ピッカーまたはリストを使用してください)。

[ 日 / 月 / 年 ] のように、フィールド内の書式ヒントを使用する 1 つのテキストフィールドを使用します。厳密な書式を要求しないでください。ユーザーが月を期待する場所に JUN と入力した場合は、バックエンドで June を使用します。ユーザーが月を期待する場所に 6 を入力した場合は、バックエンドで June を使用します。ユーザーが月を期待する場所に 06 を入力した場合は、バックエンドで June を使用します。

Occam's Razor をガイドとして使用します (事実上、ほとんどの場合、データは十分に正確です)。認知摩擦を減らします (ユーザーに考えさせないでください)。

score 3 · Accepted Answer

DatePickerとフィールドの組み合わせもお勧めします

このデモを参照してください。日付ピッカーは、ユーザーがフィールドに入力した日付を反映しています。
ただし、PrototypeとScriptaculousを使用したDatePickerに基づいています。説明のために言及します。

score 3 · Accepted Answer

ユーザーと一緒に datePicker を試してみましたが、ユーザーにとっては悪い UI であることが判明しました。私が彼らの要求に基づいて最終的に行ったのは、[日] [月] [年] :(

score 2 · Accepted Answer

両方を入れて、それぞれの更新をもう一方にします。ユーザーが日付ピッカーから日付を選択した場合、テキストフィールドの小さなミスクリックを修正したり、日付ピッカーのテキストフィールドに入力した選択を視覚化したりするのは簡単です。

score 2 · Accepted Answer

3つすべてをテストして、最高のパフォーマンスを発揮するものを選んでみませんか? これは、 Google ウェブサイトオプティマイザーでテストするのに適しているようです。

ユーザーのタイプ、または実行しているサイトのタイプによって、ソリューションが「標準」とは異なる必要がある場合があります。

score 1 · Accepted Answer

私は通常、両方を使用します。つまり、テキストフィールドに正しい形式で入力する日付ピッカーです。上級ユーザーはテキストフィールドを直接編集でき、マウスに満足しているユーザーは日付ピッカーを使用して選択できます。

スペースが気になる場合は、通常、テキストフィールドの横に小さなカレンダーアイコンが表示されます。カレンダーアイコンをクリックすると、日付ピッカーがポップアップとして表示されます。

また、正しい形式を示すテキスト（つまり、「DD / MM / YYYY」）をテキストフィールドに事前入力することをお勧めします。ユーザーがテキストフィールドにフォーカスすると、そのテキストは消えて、自分のテキストを入力できるようになります。

score 1 · Accepted Answer

日付ピッカーは、生年月日の入力をより複雑にするだけだと思います。

既に述べたように、日と月のドロップリストと年を表すテキストボックスの組み合わせが、ユーザーにとって最も効率的であるように思われます。この方法で生年月日を入力するのに 10 秒もかからず、これは日付ピッカーよりもはるかに高速です: タブキー (すべてのユーザーがフォームを完了するために使用することを学ぶ必要があります) のおかげで、1 つのフォームからすばやく移動できます。次の要素へ。

少なくとも Macintosh (Windows については知りません) では、キーボードを使用して選択ボックス内の日付にアクセスすることもできます: タブキーのおかげで、フォーム要素にフォーカスが移動し、矢印キーを押してドロップダウンします。リストから、たとえば 1967 と入力すると、瞬く間にそこにたどり着きます…</p>

score 1 · Accepted Answer

おそらくここにいる高齢者の 1 人であり、月の後半に生まれた私は、生年月日のドロップダウンメニューに苛立ちを覚えます。通常、2 つのドロップダウンメニューを下にスクロールする必要がありますが、これは厄介です。入力した方がいいと思います。

ドロップダウンメニューを受け入れるか、入力できるようにコントロールを設計し、両方が機能することを明確にすることができれば、それは素晴らしいことです。

score 0 · Accepted Answer

私はDatePickerを取ります。これは、エキスパートユーザーが手動で入力できる唯一のコンポーネントであり、初心者が日付を非常に簡単に入力できるようにガイドします。

タブを押して入力した場合、カレンダーはポップアップしませんが、ボタンをクリックします。したがって、エキスパートユーザーはそれに悩まされることはありません。

score 0 · Accepted Answer

私は国際的なサイトのために日付ピッカー（そしてフォールバックとして文書化されたフォーマットの入力ボックス）を好みます。

日付の形式はさまざまであり、慣れていると読みにくい場合があります。残念ながら、多くの人がISO8601に慣れていません。:-(

score 0 · Accepted Answer

各フィールドにドロップダウンメニューを使用し、それぞれに日、月、年のラベルを付けることをお勧めします。日付ピッカーも役立つかもしれませんが、ユーザーが JavaScript を有効にしていない場合は機能しません。

score 0 · Accepted Answer

jQuery UI の DatePicker を使わない人はいますか?

ほぼすべてのニーズに合わせて構成可能です。唯一の欠点は、jQuery UI に含める場合、フットプリントがやや大きいことです。

アップデート

一部のファイルサイズが変更されているようですので、以下に更新します。これらの数値は、最後に更新された時点でのみ正しいことに注意してください。それ以来、状況は変わっている可能性があります。

CSS テーマ - 23kb
jQuery UI - 縮小された 71kb
日付ピッカー - 38kb
加えて、いくつかの画像（来月/前月、私はかなりスプライトされていると確信しています）

しかし、それはそれほど悪くはありません...

score 0 · Accepted Answer

プラグインcxcalendarを使用できます。他の日付ピッカーのように見えます。ただし、年月のタイトルをクリックした後、選択で年と月を選択できます。

ここに画像の説明を入力

score 0 · Accepted Answer

JSFiddle でプラグインを発見しました。2 つの可能な選択肢: 1 つの単一入力または 3 つの入力、しかし単一のように見えます... (Tab キーを使用して次の入力に移動します)

[link]http://jsfiddle.net/davidelrizzo/c8ASE/ 面白そうですね！

score -3 · Accepted Answer

生年月日を選択するための 3 つのドロップダウンを作成し、年と月の選択に基づいて動的に日数を変更します。http://jsfiddle.net/ravitejagunda/FH4VB/10/

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

forms - 生年月日を入力するための最適なUIは何ですか？

24 に答える 24

アップデート

Related

Reference