フォームをデザインするときのポイント
前提
- 自分が嫌だと思う項目を作らない。
- 曖昧を許容できるようにする。
- なぜその項目が必要なのかを説明する、もしくは予想できるようにする。
- 倫理的に、そして法的に問題ないものか確認する。
- HTMLの仕様とブラウザの挙動を活用する。
- システムの都合が優先される場合があるが、なるべくそれに引っ張られないように工夫したい。
分割しない
姓名、郵便番号、電話番号、年月日、時分など、入力フィールドが分かれていることがあるが、なるべくこれを避ける。フォーカスの移動が、面倒だからだ。なるべくユーザーの手間を減らしたい。
フォーム送信後のデータベースの都合や、事務処理、または運用にて必要不可欠である場合を除いて、分割しないようにしよう。
年月日や時分などは <input type="date"> <input type="time"> <input type="datetime-local"> のように標準仕様で実装すれば、ブラウザが適した入力補助をしてくれるので積極的に活用したい（対応していないブラウザにはPolyfillや代替できるコンポーネントライブラリを使うことは言うまでもなく）。
バックエンド側のシステムが分割している値しか受け取らない場合は、 <input type="hidden"> に分割させた値を持たせて送信すればよい。
type="date"を使って年月日の分割送信する実装例
姓名の分割は不可能だが、郵便番号や電話番号はルールが決まっているのでプログラムで分割可能だ。バックエンドでも実装可能なはずなのでデータベースに格納する前に分割するというプロセスを挟むのも検討できると良いだろう。
正確でないといけないのか、およそでいいのか
イベントや集客の予約などでの参加人数を聞く場合、単位に要注意。「〇〇人」としてしまうと、正確な人数を入れる必要があるのか、または不確定でもおよその人数でいいのかユーザーはわからない。入力する時点では正確な情報が本当にわからない場合もある。
そういう場合、「〇〇人程度」と「程度」という言葉を追加するだけで印象が変わる。なるべく許容してあげられる表現に変えよう。
オートコンプリート機能を利用してもらう
フォームコントール要素のautocomplete属性を利用すると、ブラウザに保存された情報を自動で埋めてくれて入力の手間が省ける。またタイピング音の盗聴も防ぐことができるのでよりセキュアなフォームになる。
メールアドレスを2度も聞かない
間違い防止策かもしれないがコピペしてしまえば同じことなので意味がないからやめた方がいい。たまにペーストを禁止しているフォームが存在するが、あれは逆に正しい場所からコピーしてきたアドレスをペーストできずに、わざわざ手動入力させて間違いの機会を与えている。何を施しても間違えるユーザーは間違える。無駄は省こう。
年齢や性別は必要な情報なのか
これは倫理の問題だ。年齢や性別、それを聞いてどうする？伝えた場合に何が変わる？万が一に何かが変わるのだとしたら、それは差別にあたる可能性はないだろうか？
マーケティングリサーチのためのデモグラフィックだとしても、本当に年齢や性別が有効なデータとなり得るのか、それも改めて考えてほしい。
法律に基づいた事務手続きに影響がないのであれば、その項目は外すように検討しよう。
性別に関しては「システムで「性別」の情報を扱う前に知っておくべきこと」という記事により詳しい情報がある。
必須項目は必須な理由を添える
明らかに連絡手段として必要ないのに必須になっている電話番号が聞かれることがある。電話で連絡を取りたくないからネットのフォームを利用している場合もあるだろうに。もし今後電話でも連絡をとる運用となっているなら、それを明記したほうが親切だし安心するだろう。利用されない個人情報を握られるのは気持ち良いものではないはずだし、怪しまれる可能性を考えたほうがいいかもしれない。
制限は予め記載する
気合を込めて長文を入力、送信したがシステムの文字数超過でエラーになりやり直し。という最悪なエピソードを避けるためにも、そういった制限がある場合は予め注釈に書いておこう。後から言うな。
フォーマットを制限しない
ひらがな、カタカナ、全角、半角、誤って挿入されてしまったスペースやメタ文字、これらはすべてプログラムで変換や除去ができる。JavaScriptで送信直前に加工してからシステムに送信すればいいし、システムが受け取ってから加工してもいい。
フォーマットの制限は、ユーザーをむやみに緊張させたり注意を強要することになる。一番ストレスフリーなのは、何を入力しても受け付けてくれることだ。「ああ、大丈夫です。後は我々の方で変えておきますんで」って言われたほうが安心だろう。
郵便番号や電話番号のハイフンも、あれもあってもなくても良い。加工できる。「ハイフンなし」のような注釈も不要だ。加工すればよい。
他にも注意するべき点は沢山ある。ラベルを横並びにしないだったり、プレースホルダーを使わないだったり。そのあたりのノウハウはよく共有されているし良書「Form Design Patterns─シンプルでインクルーシブな フォーム制作実践ガイド」もある。今回はそうではない別の視点でまとめてみた。結論的には前提で書かれていることが守られていれば、ほとんどのフォームはストレスなく利用してもらえると思っている。
現実問題、Web制作者がクライアントから受け取った項目をそのまま実装しているだけの場合もあるので、バリデーションやEFOのテクニックも大事だが、ちゃんと項目ひとつひとつに向きあって、適切な表現や適切なインターフェイスを採用してほしい。
他にも「こんなことをすると良いよ」「こういうのは困るよね」「ここはこうじゃないかなあ」という意見があればどんどん教えて欲しい。議論しましょう。
Discussion
最近減ってきましたが、チェックボックスのラベルが付いてない（チェックボックスそのものしか押せない）のが昔から気になってます。