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

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

昨年公開した「生年月日の入力UIについて考える」は反響をいただいていまして、継続的にアクセス頂いている記事です。
生年月日の入力UIについては、一定の方々が課題感や悩ましさを感じているところなのかなと実感しています。

同様の生年月日の入力UIにの問題について、SMASHING MAGAZINE で最近取り上げられていた ので記事の内容も踏まえつつ、さらに深めて考えてみたいと思います。

1つの入力ボックス…なのか？

前回の記事では「1つの入力ボックスパターン」が私の考えたベスト、という答えを出しました。

ただ、この「1つの入力ボックスのパターン」は、マスクで表示の処理をされることを前提にしている点があります。

バリデーションのヘルパーが必要？

プレースホルダーの表示や文字列の補完やマスク表示などのテクニカルの工夫により可能です、と書いていたのですが、テクニカルの工夫から起こ処理による動作の低下が気になります。

処理による動作の低下だけでなく正しく表記形式がユーザーに伝わっていない場合、入力自体が難しくなる点がユーザビリティに問題になりそうです。
特に月や日が数字一桁になるパターンでは、数字の頭に 0（ゼロ）が必要になるルールに気づかなければ、思った数字を入力できずに入力が止まってしまったりする可能性あります。

マスクの動きの参考は、入力のマスクでポピュラーだと思われる imaskjs を参考にしました。 クレジットカードや電話番号の入力時にはマスクで補助する動きもありかも知れませんが、日付の場合は厳しそうに感じます。

年月日で入力ボックス

そうなると、テックの処理なしに入力ルールを簡潔に伝わりすくしたいとなると、年月日で入力ボックスを分けるパターンなのかなと思います。

幸いにも？日本語での年月日表記では「年」「月」「日」をラベルをつけると数字を入力することが伝わりやすいフォーマットになりそうです。

さらに月日の数字の頭にゼロルールは必須にせずに許容する。データの送信時にカバーする（必要ならばシステムで0をつける）とより優しくなりそうに思います。

我らが one more thing … 和暦

令和の改元でお役所や公のものも西暦の表記になっているところはありますが、誕生日は和暦で入力する仕様にしたい要望もあります。
（私は過去に中年〜中高年向けのサービスに携わった際にそのような要件がありました）

この場合の年について「平成1年, 平成2年, 平成3年…」とドロップダウンにしてしまうと、ドロップダウンの煩わしさ復活になってしまうので、年をドロップダウンにするのは避ける方向が良いのではないかと思います。

元号は明治・大正・昭和・平成・令和の4つなので、数的にもドロップダウンが使用できます。元号のドロップダウン＋年の入力ボックスで和暦の年を入力するパターンにしていくのがよさそうです。
元号と年の組み合わせになるため、年の数字のバリデーションが少々面倒かもしれませんが。 （細かく言えば、1989年は日にちによって昭和64年と平成1年が2種類あるなど・・）

ちなみに暦の書き方にはイスラーム暦やユダヤ暦もあり、当地の誕生日入力についてもフォームでどう工夫しているんだろうと思ったんですが、あちらは元号がつかないので西暦のパターン・同じ方向でよさそうですね。

まとめ

現状のより現実的な生年月日の入力UIチョイスは「年と月と日の入力ボックスを分けるパターン」かなと考えます。

こうして、誕生日の入力のパターンを考えると、紙の入力フォームに近づいてきているように感じます。必要な生年月日の数字を書き込む形式。 特定のスペシフィックな数字を入力することという点では同じことで、Webやアプリでもペンがキーボードに変わっても現実と同じような動きになるのが自然かもしれません。

クリック/タップ・スクロールの操作が増えるドロップダウンは誕生日の日付入力で避ける（例外は元号のみ）のは変わらずです。 データとしてのエラーは減らせるかも知れませんが、遠く離れた項目へスクロールするの煩わしさと選択したデータ自体のズレによる間違いはユーザーにとっては入力のストレスになります

余談ですが、前回の記事のあとに私自身の「選択したデータ自体のズレによる入力間違い」のトラブルが判明しました。
ユーザー登録時にドロップダウンタイプの誕生日入力だったために、誕生年を間違えていたのです。パスワードの再発行をしようとした時に誕生日の情報のマッチができず、しかも誕生日はあとから変更不可なので、手続きに難儀しました。
ドロップダウンで年入力は悩ましいので避けたいと思う実体験でした。。

• 参考リンク
  • https://www.smashingmagazine.com/2021/05/frustrating-design-patterns-birthday-picker/
  • https://adamsilver.io/blog/form-design-multiple-inputs-versus-one-input/