こんにちは。転職ドラフトでWebアプリケーションエンジニアをやっている@iwtnです。
転職ドラフトでは自社開発企業に特化したエージェントサービスを始めました。
そこでサービスの申し込みフォームを作ったのですが、その中に生年月日の入力がありました。
生年月日ということは日付の入力。
ブラウザの実装もリッチになってきて、デフォルトでinputタグの type="date"
を使うだけでカレンダーまで表示されます。素晴らしいですね!
しかしこの実装の問題は多くの人が指摘しています。実際あまりよいUIとは言えません。
動作はバラバラ、特にスマホでは入力しにくい
実装はブラウザに依存します。なので統一したUIをユーザーに提供できません。
もちろん普段使っているブラウザで慣れていればそれがその人にとってのベストのUIにはなりえます。
しかしスマートフォンのブラウザでは、デフォルトのUI自体が相当悪いのです。
Androidの問題は、年を選択しにくいことです。
この画面でどこをタップすると年を選択できるかと言うと……
この画面で年を選択するためにクリックすべきは上部の小さい箇所です。 初見の人はほとんどわかりません。 生年月日という年を入力することが重要な場合、このUIはとても良いものであるとは言えません。
iOSの問題は、年月を選択して「完了」を押してしまうと日付の選択が完了したことになってしまうことです。
これもAndroidよりは良いかもしれませんが、ボタンの配置がよくありません。
一般的には、セレクトボックスで年月日をそれぞれ選択するのが良いでしょう。 月や閏年によって日数が多少変わりますが、ライブラリなどを使えばそのあたりは特に実装する必要はありません。
しかし、スマホ上で
- セレクトボックスを選択
- スクロールして選択
- 1〜2を年月日で3回繰り返す
という操作は、UIの切り替えも多くなかなか手間がかかります。
入れる前に入っているのが最速!?自動入力を検討する
モダンなブラウザでは、autocomplete属性を適切に設定しておくことで、様々な値の自動入力ができます。
実は生年月日も、WHATWGの仕様上は自動入力するためのオプションが存在します。
しかし、Chromeでチェックしてみると、生年月日を保持していないようです。
自動入力によって「入力しようと思ったときには、既に入力されていた」 そんなフォームは確かに最速かもしれませんが、実際誰も使えないのであれば仕方ありません。 別の手段を探すことにします。
スマホ特化の最速生年月日入力フォームはこれだ
YYYYMMDD形式の8桁の数字をテンキーによって入力するフォームです。
なぜこれが最速になりえるのか
スマートフォンのUIの大きな特徴は、あたりまえですがタッチパネルによるキーボードの切り替えです。 メールアドレス向けや数字入力に特化するなど、様々なキーボードが表示され入力をしやすくしてくれます。
そして生年月日はスケジュールなどの予定入力とは違って年の選択が重要になります。 自分の年齢を忘れても生年月日はよく入力するので覚えている人が多いでしょう。
こういった要因により、西暦と月日の数字8桁で表現できる生年月日は、セレクトボックスを使って選択するよりもテンキー入力のほうが速いと考えました。 入力中のUIの切り替えもありません。 一般的な日付を選択するDatePickerとは違った生年月日という特別な日付だからこそできるUIだと思います。
JavaScript の invalid date に注意
ただ、DatePickerであれば確実に日付を指定して入力してくれますが、8桁の数字だとうまく行かない場合もあります。 例えば、閏年以外の2月29日や、31日までない月で31日を指定されてしまう場合です。
そのためバリデーションに一工夫必要です。
// YYYY-MM-DD形式に変更 const dateString = eightDigits.slice(0, 4) + "-" + eightDigits.slice(4, 6) + "-" + eightDigits.slice(6, 8) // 不正な日付か判定 const day = new Date(dateString) if (Number.isNaN(day.getTime())) { // trueの場合不正な日付 }
上記のようにYYYY-MM-DD
形式にした後、new Date
で初期化することで、正しい日付であれば Date
インスタンスが生成されます。
しかし、不正な日付だった場合は invalid date
になってしまうのです。
これは少し厄介で、7行目のifの条件式のように特殊な判定が必要です。
まとめ
生年月日のフォームという、個々のユーザーにとっては特別な日ですが全ての日付を入力できなくてはいけない、という中々面白い問題に向き合えたと思います。 そして最速というのは更新されていくものです。更に良いUIがありましたら、是非@iwtnまでご連絡ください。
そしてキャリア選択のプロセスに伴走する転職ドラフトエージェントも是非是非お使いください。 agent.job-draft.jp
また、転職ドラフトでは、エージェントサービスのユーザーだけでなく、こんな感じで色々なことを考えながら働いてくれる人も募集しています。 興味がありましたら是非ご応募ください。 recruit.livesense.co.jp