月/年入力のベストプラクティス

Question

テキストフィールドまたはドロップダウンとテキストフィールドの組み合わせを月年にするのがベストプラクティスですか？月が01対1月と表示されている場合、変更はありますか？ （^はドロップダウンを示します）

注：ユーザーは、速度が最も重要なメトリックである場合にフォームを頻繁に使用します。

オプション1-自由形式とプレースホルダーテキストの両方：

[MM] [YYYY]

オプション2-ドロップダウンとしての月：

[01 ^] [YYYY]

オプション3-ドロップダウンとしての月、年をプレースホルダーとして：

[01 ^] [年]

オプション4-ドロップダウンとして名前がリストされた月（Googleメソッド）：

[1月^] [年]

Answer 1

データ形式の選択に関連するもの：ユーザーの入力のソース：

ユーザーの入力からのソースが何らかの方法でフォーマットされていることがわかっている場合は、そのフォーマットを維持する必要があります。ユーザーに不必要なメンタル変換を行わせたくないためです。この例は、クレジットカードまたは請求書の有効期限です（少なくとも私の国では）。

ソースについての手掛かりがないがある場合、質問：最も選択された年は...？：

• 頻繁に最初のオプションには表示されませんドロップダウンの== 年のテキスト入力

• 主に最近の年 => dropdownを使用します。ここでは、テキスト入力内の不要なタイプミスを回避できるという利点があります。

月については、私はドロップダウンを好みます既知で短いリストであり、それで問題が多すぎることはないためです。また、数値としての月には認知的負荷があり、エラーが増える可能性があります（Rushでは、number-monthNameの関連付けで誰もが間違っている可能性が高くなります。ソースが同じフォーマット）。

Answer 2

速度が最も重要なメトリックである場合、おそらくオプション1です。ドロップリストを使用しないことで失う精度を改善するために実行できるインライン編集とチェックがあります。

1. MMとYYYYの文字は、ユーザーが入力するときに置き換えられるのが理想的です。プレースホルダーテキストは、入力するテキストと明確に区​​別する必要があります。たとえば、2014年1月を書いている最中であれば、「0120YY」のようになります。YYは薄い灰色で、0120は黒になります。

2. スペースと特殊文字の自動挿入と削除。ユーザーが012014と入力した場合、読みやすくするために01 2014と読み取れるようにスペースが自動的に挿入されます。彼らが01 2014 /と入力した場合、余分なスペースと過剰な文字が削除されます。読みやすさを向上させる方法はいくつかありますが、これはほんの一例です。

3. 焦点を合わせると、ミニカレンダーセレクターが表示され、入力した月と年を変更できるようになります。また、必要に応じてセレクターを使用することもできます。明らかに、これはビルドの面で少し余分な労力を追加します。

Answer 3

一般的な使用法：

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

コンテキストがない場合、ドロップダウンで月（1月または1月）を入力すると、ドロップダウンまたはフリーフォームの数字入力ボックスの "01"と比べて、混乱が少なくなります。

私は北米からのユーザーとして話していますが、クレジットカードの有効期限を参照している場合を除いて、日なしで月や年を入力することはほとんどありません。 「2015年1月」ではなく「2015年1月」と大声で言います。したがって、Wordを使用すると、精神的な翻訳が削除されます。リストには12か月しかありません。したがって、ユーザーがドロップダウンを入力せずに手動で月をクリックして正しい月にアクセスする場合でも、これは妥当な数の選択肢です。

年に関しては、選択肢がかなり多いため、テキスト入力の方が理にかなっています。 1年間に書ける方法は（数で）たった1つしかないので、精神的な翻訳は必要ありません。

クレジットカードの使用：

^{bmmlソースをダウンロード}

私が取り上げたいもう1つの一般的な例外ケースは、クレジットカードです。数字がカードの裏に「MM/YY」の形式で印刷されているためです。カードに印刷されているとおりに入力できるように、まったく同じ形式でユーザーにテキスト入力を提供する方が理にかなっています。

Answer 4

あなたの質問はフォームの使用を指定していませんでした。現在、営業担当者がカレンダーを選択して日付を入力できるフォームに取り組んでいます。彼らは、販売日、キャンセル日、支払期日、配達日、および返品を要求する最終日を含む、各販売で実行する数十のアクションを持っています。

彼らは一度に多くのそのような販売フォームを通過します。私は、カレンダーで日を選択することで月の日を選択するカレンダーを使用することで、この問題を解決しました。月数には限りがあります（当日から180日以内）。

例：

+---------------+  +---------------+
|      JAN      |  |      FEB      |
| 1 2 3 4 5 6 7 |  | 1 2 3 4 5 6 7 |
| 8 9 ..........|  | 8 9 ......... |

現在、このソリューションはすべてのユースケースで機能するわけではありませんが、この場合、営業担当者が必要な情報を入力するための非常に高速な方法を提供します。