本日はウェブユーザビリティ研究の第一人者であるヤコブ・ニールセン博士のコラムより、「余白」に注目したフォームの入力項目のレイアウト方法についてご紹介させていただきます。
項目数が多いフォームほど入力開始/完了のハードルは高く、ユーザーにいかにフォーム入力を快適に行ってもらうかがEFOのカギとなります。
そのため入力支援機能の導入などでユーザビリティを強化することの重要性はこれまでこのブログでお伝えしてきているとおりですが、
今回紹介の記事で取り上げられているテーマである「余白」も、フォームの入力のしやすさに大きな影響を与える要素のひとつですので注目しておきたいですね。
それでは、具体的にご紹介していきます。
※概要のみの紹介となりますので、詳しくは元記事(英文)をご覧いただければと思います。

ポイント1: ラベルを近くに配置する

下記は、記事の内容を参考に作成したサンプル画像です。どちらのフォームが入力しやすいと感じるでしょうか。
余白の対比
多くの方が、入力項目とラベルを等間隔に配置した「A」よりも、対応するラベルを近づけた「B」のほうが、どこに何を入力すれば良いかが明確で、自信を持って入力できるのではと思います。
このように、関連する項目を近くに配置するべきだと筆者は述べ、
その根拠として、ゲシュタルト心理学の「近接の法則」を挙げています。

ゲシュタルト心理学とは

ゲシュタルト心理学とは、人間はものごとに対し「部分や要素の集合」ではなく「全体性や構造(=ゲシュタルト)」に重点を置いて捉えると考える心理学です。
例えば下記のような例があります。

果物が書かれた絵を見て、それが線や点の集合ではなく「りんご」であるように見える事や、映画を見て複数のコマが映写されているのではなく動いているように見える事は、ゲシュタルトの働きの重要性を考えさせられる例である。
ゲシュタルト心理学 – Wikipedia

このように人間が「構造」を知覚するときの条件のひとつに、「近接」があるようです。

近接しているもの同士はひとまとまりになりやすい。例えば以下の図では、近接している2つの縦線がグループとして知覚される。離れた縦線同士はグループには成りにくい。空間的なものだけでなく、時間的にも近いものは、まとまって認識されやすい。
||    ||    ||
ゲシュタルト心理学 – Wikipedia

心理学的な観点からも、私達は近くにあるものをグループおよび関連性のあるものと捉えるということがわかりましたね。
つまり、フォームにおいてはラベルと関連するフィールドを近接して配置することが望ましいということがわかります。

ポイント2: 関連する項目をグループにする

次に紹介されていたポイントは、関連する入力内容同士をグループとして表示するという点です。
下記の画像をご覧ください。
余白の対比その2
※記事の内容を参考に作成したサンプル画像です
項目数が多いフォーム(A)はユーザーに圧迫感を与えますが、4~6つの項目で構成されたグループに分割する(B)ことで、本来よりも短く見えます。
さらに上記画像でいうところの「お客様情報」というような見出しが、フォームに文脈を与え、入力すべき情報のスムーズな理解に役立つという点も述べられていました。
このように、関連の深い項目同士を近くに配置しグループ同士に余白を作ることで、フォームは縦に長くはなりますが、かえって見やすく入力しやすくなるということがわかりますね。

視線の動き

ちなみに、下記の過去記事では「視線の動き」という着眼点で余白や配置に関するポイントを取り上げていますので、よろしければあわせてご覧ください。
視線の移動を極力なくせ!すぐに使える簡単フォーム改善テクニック6選
https://f-tra.jp/blog/column/4763

最後に

いかがだったででしょうか。今回は「余白」にまつわるフォーム改善ポイントを海外記事よりご紹介しました。
単純な見やすさばかりでなく、「どこに何を入力するか」というフォームの基本中の基本である構造をユーザーが直感的にに理解するために、余白の使い方は大きな役割を担っています。
なおかつどんなフォームでも簡単かつ今すぐ実施できる改善ポイントだと思いますので、すぐに採り入れてみることができるのではないでしょうか。
さらに詳しい情報は、下記よりどうぞ。
参考記事:
Group Form Elements Effectively Using White Space