アイトラッキングから考えるWebフォームデザインの改善ポイント
デジタルマーケティング
アイトラッキングとは、「人がどこを、どのくらい見ているのか？」を測定する技術である。
マーケティングにおいては、「視覚」という生物学的視点から、人間の“本能”にアプローチし、それを理解する判断材料として用いられる。アイトラッキングによって、ユーザー自身も表現し難い“無意識”の部分が可視化されるからだ。
今回は、このアイトラッキングの実験から得られたデータを生かし、よりコンバージョン率の高いWebフォームデザインにするための改善ポイントをご紹介する。
目次
ユーザーの「ノーストレス」を追求しよう
「コンバージョン率が高い」Webページは、顧客が「お問い合わせ」「注文」など、最終アクションを起こしやすいデザインであることが欠かせない。
その中で、クロージングとも言えるCTA（Call To Action）ボタンに連動しているのが「入力フォーム」だ。コンバージョンに関わる、重要な要素である。
ここには、ユーザーの最大公約数が「全くストレスを感じない」ような、ユーザビリティの高い、緻密な設計であることが求められている。そこで、その「ノーストレス」な入力フォームを作成するための、ガイドラインとなる5項目を挙げてみよう。
なお、入力フォームの実制作では上記の“ユーザーの最大公約数”というのがミソで、ターゲットによってはこの改善ポイントが当てはまらない場合もあるのでご注意いただきたい。
見やすい＆使いやすい入力フォームの作り方
1．アイトラッキング的にベストなレイアウトとは？
Webページ内では、視線は「左→右」に動かすよりも「上→下」に動かすほうが自然であり、ストレスも少ない。
可能である限り、「上→下」方向へ、垂直にレイアウトするデザインを心がけよう。
下図のように、よく見られる2カラム（2列）の入力フォームは、左側にラベル、右側に入力欄が配置された、水平のレイアウトだ。こうすると、目を「左→右」と動かす負担が生じるのに加え、
ラベルのテキストを左寄せにした場合：テキストは読みやすいが、どの入力欄のラベルなのか分りづらい（下図1を参照）。
ラベルのテキストを右寄せにした場合：どの入力欄のラベルなのかはわかりやすいが、ラベルと入力欄を全体的に捉えることが難しい（下図2参照）。
という問題もある。
ということで、下図のようにラベルと入力欄は垂直に並べ、入力欄の上に、左寄せテキストのラベルを配置するデザインが、アイトラッキング的にはベストのようだ。
2．重要な配置は、色の対比を使って目立たせる
たとえば、氏名やE-Mailアドレスなどの必須項目と、職業やサイトを知るきっかけなど、入力が必須ではない項目とをグループごとにまとめ、ヘッダー（タイトルなど）を配置する場合、フォントのサイズアップだけで差別化していないだろうか？
それだけだと、ユーザーの視線は、重要項目であるヘッダーよりもフィールド内（通常テキストなど）に集まる傾向がある。
この場合はもちろん、それ以外でも、重要な配置は色付けし、濃淡を付けよう。周りの色との対比効果を使って、ユーザーの視線を集めるのだ。
3．電話番号や郵便番号は1つの入力欄で
電話番号・郵便番号は、数字の区切りや記号の使用を考えると、その区切りごとに、複数の入力欄を設定しがちな項目である。
だが、最もユーザビリティが良いのは、入力欄は1つにし、ユーザーが入力する、あらゆるフォーマットを受け付けられるように設定することだ。
企業の側の都合で、それができない場合は、明確なエラーメッセージを表示させることが必要である。
4．プレースホルダテキストを、使ってはいけない
プレースホルダテキストとは、入力に必要な補足説明を追加するものだ。
他のフォントよりコントラストの弱いグレー色で、入力欄の中に配置されることが多く、ユーザーが入力を始めると、消えるのが一般的である。
出典：Placeholders in Form Fields Are Harmful
だが、最新のアイトラッキング調査によると、「入力済みの入力欄は、ユーザーの目につきにくい」という結果が出ている。
つまり、入力欄の中にグレー色のプレースフォルダテキストが表示されていると、ユーザーが入れたテキストとの区別が、パッと見たときにわかりにくい。良かれと思って設定したプレースホルダテキストが、逆に、アクセシビリティを阻害することになるというわけだ。
ということで、下図のように、プレースホルダテキストは使用せず、補足説明は入力欄の外に配置するのが望ましいという。
出典：Placeholders in Form Fields Are Harmful
5．ユーザーのタスクは少なく、刺激も少なく
シンプル・イズ・ザ・ベスト。ユーザーに多くのタスクを与えないように注意しよう。目立たせようと思うあまり、余計なものを配置したりしないこと。
また、入力されたデータをリアルタイムでチェックする機能を設定する場合は、設計を十分に検討しよう。アニメーションなどでテキスト表示するものは、ユーザーの視線を惑わせ、ユーザーが大事なメッセージを見逃してしまう原因となる。
科学のチカラを信じてみよう
筆者自身もその傾向が強いのだが、煮詰まって、改善しなければならないときほど、自らの“勘や経験”で乗り切ってしまおうと考えがちだ。
だが、そんなときこそ冷静に、こういった「科学のチカラ」を信じてみてはどうだろうか？ たとえそれが、自分の意見とは180度違ったものであっても、だ。
先入観を捨て、ロジカルにデータと向き合ってみる。数字以外は信用しないというくらい徹底的にやってみるのもいい。
その結果は……。これまで、“勘や経験”に固執していた人ほど、目に見える数字となって、あなたの期待に応えてくれるはずである。
人気記事
