Webサービスに会員登録するときにはいろいろな情報を入力することになる。氏名・生年月日・電話番号・住所などなど。
どのサービスも似たような入力項目なのにUIはどれもバラバラだ。電話番号の入力欄が分かれていたり、全角文字しか受け付けなかったり、変なタイミングでエラーが出たりする。最近だとブラウザの自動入力もあるが、全部の欄を正しく入力できることはほとんどない。
けっこう前には「クソ入力フォーム選手権」なるものも開催されたことがあった。
会員登録作業というのはユーザーがサービスに最初に触れる場所なのに、どうしてこんなにいろんなUIがあって、ユーザー体験もバラバラなのだろうか。
まず、会員登録というのはプロダクトのバリューに直結するものではないので、設計時にあんまり深く考えない気がする。
また、会員登録の時に1回しか使わないので、担当者もあまり触らず、バッドなUIも気にならないかもしれない。自分も担当プロダクトの入力フォームがどうなっているか、すぐには思い出せない。
そのうえ、ユーザーからのフィードバックも集めづらい。ちょっと不便さを感じたとしても、使うのは1回だけなので我慢するだろう。もし最悪なUIのせいで登録を断念したとしても、わざわざフィードバックはくれない。
より良い入力フォームのUIを考える
そういった事情で放置されがちな入力フォームのUI。とはいえ、サービスの第一印象を決める重要な機能でもあるので、どんなUIにすべきか少し調べてみた。
まずこちらは入力フォーム全体のデザインに関するポイント。いい例と悪い例の対比がわかりやすい。とりあえずこれを抑えておけばスムーズに入力できそう。
次はもう少しレベルアップした情報。ブラウザの機能を有効活用する方法。
input要素にautocomplete属性を設定することで、フォームへの自動入力を有効にできる。
さらに、type属性もきちんと設定することで、メアド入力用とか数値入力用などの適切なキーボードを表示することができる。iOSのキーボードは7種類もあるらしい。知らなかった。
電話番号の入力欄で英字キーボードが出てくると煩わしく感じるので、ここもちゃんと指定しておきたい。
そもそもの話だけど、会員情報の登録というのはどうしても面倒な作業だから、入力させる項目を最小限にすることもちゃんと考えるようにしたい。
「しずかなインターネット」の場合はGoogleアカウントかメールアドレスを入力するだけで良かったのでとっても簡単だった。