にゃんこ師匠です。サイトの色や第一印象は非常に重要と考えてます。

PC用のフォームは全体を俯瞰できるように1ページに入れた方が良い事や、関連の要素はまとめた方が良い事などは、フォームの直帰率を改善するコツ教えます![Part1]や、項目をシンプルにするだけで問い合わせ率を改善できる!にて説明しています。

今回は、なぜ、そのようなフォームの構成だと数値が上がるのか、心理学的にアプローチしてみましょう。

近接・類同

ユーザインターフェース(UI)の設計や改善に取り組む時によく用いられる考え方としてゲシュタルト心理学というものがあります。
【参考】ゲシュタルト心理学 -Wikipedia

ゲシュタルト心理学の詳細や学術的見地はさておき、コンセプトはとてもシンプルでUIのアプローチに良く用いられます。

なかでもプレグナンツの法則はフォームの設計にもなじみの深い内容です。

類同

異なるもの同士が規則正しく整列すると異種の2つのグループがある事にすぐ気が付きます。

△△△●●●●△△△●●●●△△△●●●●

近接

間隔の長さの違いから、近い、遠いを勝手に連想し、さらに近いものだけをグルーピングする。多くの人は見た瞬間にコレを脳で意識すること無く処理できます。

●● ●● ●● ●● ●● ●● ●●

【実践】レイアウトをこの心理法則に沿って改造する

まず、下記のようなフォームがあったとしましょう。類同も近接も考慮していないフォームです。
2014102801

縦長で区分けがされていません。まず、項目を入力内容の関連毎にまとめます。
横と縦の方向を持たせ、同じ意味、異なる意味の項目を分かりやすくします。
2014102802
視線の移動範囲も狭くなりました。

これに規則性を持たせた空白を作ります。

入力項目間の空白が広ければ異なるグループ、狭ければ同じグループであることを一見して分かるようにするためです。同じグループなのに無駄な空白がある場合は項目間を詰めましょう。
2014102803
空白の付け方にルールを作ることが重要です。

さらに、必須、任意を入力ルールに基づいて色分けします。これにより類同、近接とは異なるルール、「必須と任意」が一見して分かるようになります。
2014102804

このように、フォームの要素に一切手を加えたり、新たな機能の追加をしたりすること無く、見た目の変更だけで、入力のしやすさは大きく変わります。

特に「近接と類同」は、あらゆる場面で使える「UI最適化技術の王道」です。ぜひ、意識してフォームやウェブページの構成を考えてみて下さい。

【続き】心理トリックを使ったフォームの最適化技法 [その2]

イメージ写真はクリエイティブコモンズ・ライセンスに基づき掲載しています。 写真掲載元:Toni