どんな生年月日の入力フォームがわかりやすいのか

Anthony

UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。

この記事はUX Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。

Bad Practices on Birthdate Form Fields

生年月日の表記方法は国によって異なります。さらに、生年月日のフォームは年、月、日という3つのデータで構成されているためわかりにくくなりがちです。生年月日の入力フォーマットがわかりにくい場合、ユーザーを苛立たせることになります。

わかりにくいフォーマット

ユーザーは、誕生月が最初に来るフォーマット(月/日/年)か、誕生日が最初に来るフォーマット(日/月/年)のどちらかに慣れています。そのため、フォームがいつものフォーマットと異なると混乱してしまいます。

生年月日でユーザーがよく見るフォームは、「月/日/年」か「日/月/年」です。「MM」が「月」、「DD」が「日」を表していることを知っているユーザーもいますが、混乱したり無視するユーザーもいます。

また、ユーザーは月や日の数字を入力するときにゼロを入力すべきか迷うでしょう(たとえば、09と入力するのか)。これによりフォーマットに記入に時間がかかってしまいます。

ほかにもユーザーにフォーマットを示しても、習慣的に自分の慣れている形で生年月日を入力してしまう問題があります。このようなユーザーエラーは、誤った登録情報に繋がります。

操作が大変なフォーマット

生年月日の入力フォームには、月、日、年のラベルが付いているものもあります。ユーザーにとってわかりやすいですが、3つの異なるセレクトメニューをスクロールしなければならない場合は操作が大変です。

ユーザーがスクロールしなければならない選択肢の数は非常に多いです。それぞれ12ヶ月、31日、118年の選択肢(1900年〜2018年)があります。膨大な選択肢をスクロールするのは、大変で時間がかかります。

そのうえデスクトップユーザーは、これらのフォームで生年月日を入力するときにキーボードからマウスに切り替える必要があります。デスクトップユーザーの手間が多くなり、入力完了が遅くなります。キーボードを使って入力することも可能ですが、そうしたユーザーはほとんどいません。

操作が複雑なフォーマット

珍しいケースですが、生年月日の選択にカレンダーウィジェットが使われているものもあります。

このタイプの入力では、小さな矢印ボタンで年と月を選ばなくてはならず、ユーザーにとって複雑な操作になります。多くの人の生年月日は現在の年とは離れているため、ユーザーは何度もクリックしなければいけません。

年と月を選択し終えた後、ユーザーは31個の数字から誕生日を選択しなければいけません。これらの数字はたいてい小さく見えづらいものです。

簡単でわかりやすいフォーマット

生年月日の年、年、月、日のラベルを書き出し、1つではなく3つの記入欄に分けるとわかりやすいフォーマットになります。ユーザーは記入欄を移動するためにタブキーを押す必要がありますが、正しいユーザーデータの入手が重要な場合はフォーマットがわかりやすいことが一番大切です。

生年月日入力の良い例:

・日付の文字列が明確にラベリングされている
・文字列が3つ別々のフィールドに分かれている
・入力される文字の長さと同じサイズに調整されたテキストフィールド
・キーボードからマウスに持ち帰る必要がない
・メニューのスクロールが不要
・ユーザーエラー率が低い

フォーマットをわかりやすくするためには、入力欄のサイズを調整することも重要です。各入力欄を生年月日で入力するテキストの長さに合わせておくと、ユーザーに視覚的な手がかりを与えることができます。上記の図でいうと、月の入力欄の大きさは月の名前ではなく月の番号を入力することを示唆します。また年の記入欄が広いため、誕生年は省略形ではなく全文で入力することもわかります(たとえば80ではなく1980と入力するなど)。

デスクトップユーザーがキーボードからマウスへ持ち変える必要がないため、テキストフィールドの生年月日入力フォームは、選択式やカレンダーウィジェットのものよりも使いやすくなっています。モバイルユーザーにとっても、小さな選択肢をスワイプやタップする必要ががありません。

生年月日のフォームデザインには選択肢が多い

選ぶことのできる多くのフォーマットがあるため、生年月日入力フォームのデザインは大変です。最近のものはわかりにくかったり、操作が難しく複雑だったりします。簡単でわかりやすいフォーマットを選び、他の選択肢を選ばないようにしましょう。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて