生年月日の入力UIについて考える

こんにちは、Gaji-Labo UIデザイナーの今西です。

アカウントの新規登録フォームなどにある生年月日の入力UIについて、考えてみます。

生年月日の入力UIのパターン

生年月日の入力でよく見るものの日付入力パターンは下記のようなものではないでしょうか。

1. 年月日でそれぞれ分かれたプルダウン
2. 年のみ数字の入力ボックス ＋ 月と日のプルダウン
3. 年月日でそれぞれ分かれた入力ボックスに数字を手入力
4. 1つの入力ボックスにすべて数字で入力（例：19900625）
5. カレンダーのUIで入力

生年月日のフォームで良く見るものは1の「年月日でそれぞれ分かれたプルダウン」、その次くらいで3の「年月日でそれぞれ分かれたフォームに数字を手入力」だと思います。

年の入力があるのでカレンダーUIタイプは見かけないように感じます。
カレンダーは日にちの入力についてはしやすいのですが年へのアクセスはあまりよくない場合が多く、カレンダーUIは大きく年や月を跨がない比較的に直近の日程の入力向きです。
なので、ホテルやチケットなどの予約の日程入力には使えても、誕生日や生年月日には向かないパターンだと思います。

Webの入力フォームについてでいうと、HTML5のinput[type=date]はOSとブラウザで挙動が違うのは本当に悩ましいですね。カレンダーで入力するものとプルダウン入力になるものとって、体験として違いますし。。

プルダウンと入力ボックス

大雑把にパターンをいうと生年月日入力でユーザーが使うのは、プルダウンと数字の入力ボックスです。

生年月日入力のプルダウンの使い勝手については、私はあまり良くない印象があります。
特に年をプルダウンで指定する際に入力がしづらい。年のデフォルト値によってはカバーする範囲も広いので年の選択肢を一目で見ることができないですし、年を選択するまでの移動が面倒に感じます。年ほどではないですが、選択肢までに距離が発生する、月と日も同様に面倒です。

数字の入力ボックスタイプについては、年月日分かれた入力ボックスパターンと1つの入力ボックスでそれぞれの問題があると思います。
パターンは年月日で分けている場合は分けていることで入力が増える、いちいちボックスをしなければならないという点に面倒さを感じます。入力の手間は少ない方がユーザーにはストレスになりません。
1つの入力ボックスは入力してほしい形が伝わらないとデータがちゃんと入力されづらい点があります。プレースホルダーなどで入力例を示しておく、入力した文字列をマスクする（ 1990 / 06 / 21）で表示するなど補助の工夫が必要になります。

まとめ

私が思うベストな生年月日入力UIは、1つの入力ボックスのパターンです。キーボードだけの入力だけでアクションが一度で済みますし、補完や表示の工夫で入力の補助もできます。

フォームについての最近のユーザビリティの流れでは、裏側で入力を自動で補完・補助し、ユーザーの入力時の負担を減らすようになってきています。
例えば、電話番号は局番等で分けない1つの入力ボックスにする、入力時のキーボードを半角数字に指定する、全角数字で入力しても半角に文字種自動変換するなどの方法があります。
エラーにさせづらい補完や補助は、プレースホルダーの表示や文字列の補完やマスク表示などのテクニカルの工夫により可能です。

時々懸念を感じるのは、今まで世に出てきた生年月日入力に「年月日分かれたプルダウン」が多すぎて、作る側が生年月日はプルダウンで入力するものと考えていないかということです。
選択肢を限定していることによる入力データのエラーの間違いは起こりにくいかもしれませんが、こちら都合でユーザーの使い勝手を損なうことはユーザーの利用体験としてのマイナスになると思います。

よくあるUIでも既にあるものだからと思考停止せずに、ユーザビリティや体験の向上を目指して考えることをやめずに再度検討してみる視点を大事にしたいと思います。

生年月日入力については、さらに検討した記事も書いています。こちらも御覧ください。