フォーム入力時の視線移動を極力少ないように設計することが、ユーザーのスムーズな入力を実現するためには欠かせません。
本日は、フォーム内の視線移動を減らすためのEFOテクニックを紹介したいと思います。
ご紹介するのは下記の6点です。
では順番に見て行きましょう。
入力例、入力形式、注意書きは入力欄のそはに配置
以前、Web担当者Forumの記事でも紹介した内容です。
ユーザーの視線をあっちこっちに移動させる入力フォームはNG！ 離脱を減らすコツ /15か条の4【連載】
https://f-tra.jp/blog/web-tan/3397
ユーザーが視線をあちこちに移動させずに済むよう、「入力例」「入力形式」「注意書き」のような入力中に必要な情報は、該当項目の近くに配置するべきです。
Web担記事でも紹介した事例。説明は右側にレイアウトするよりも、項目の直下や真横に配置すると視線移動は少なく済む
プレースホルダーを使う
プレースホルダーで入力例を表示することで、さらに視線移動を少なくすることができます。
下記は入力例を項目の右横とプレースホルダーに配置したときの比較ですが、細かい視線移動がかなり減っていることがお分かりいただけると思います。
プレースホルダーなし
プレースホルダーあり
※参照
EFOで大切な＜入力例＞の存在と、＜プレースホルダー＞活用のススメ【後編】
https://f-tra.jp/blog/column/2719
横並びの項目は縦に並べる
入力項目やラベルを縦方向に配置すると、その分視線の移動を小さくすることができます。
とはいえ、すべてを縦方向に配置するとページは長くなりますし、左右のスペースが余りすぎることにもなります。
項目数やページ内の他のコンテンツとの兼ね合いを見ながら、うまく採り入れると良いでしょう。
Googleのアカウント作成フォームは、オファーとフォームの２カラム構成にすることで、視線移動の少ない入力フォームを実現
複数項目を統一する
横並びとなっている複数項目は、１つの入力欄に統合することでも視線移動回数を減らすことが可能です。
複数項目を統一
ラベルを右揃えにする
これまで視線移動回数を減らすテクニックについてお伝えしてきましたが、移動距離を小さくするというのもストレスの軽減に効果的です。
例えば項目のラベルを右揃えに配置すると、視線移動の距離を短くすることが可能です。
ラベルを右に寄せた改善例。視線移動はあるものの、その距離が短くなる
ボタンの位置に注意する
ボタンの位置は意外と盲点です。
送信ボタンを左右寄せに配置しているフォームが多いですが、ボタンは最後の項目の真下にあるのがもっともスムーズです。
ボタンの位置による視線移動の改善
最後に
いかがだったでしょうか。
本日はフォーム入力中の視線移動を極力少なくするためのテクニックについてお伝えしました。
あなたのフォームは、ユーザーの視線をあちこち移動させていないでしょうか？
ぜひ、テクニックを採り入れてフォーム改善を行ってみてください。
