フォームは基本的には、縦方向の流れで項目が並びますが、時には横方向に、複数列のレイアウトを利用して項目を並べる場合があります。
本日は、そんなフォームにおける複数カラム(=列)表示について考えてみます。

スペースの有効活用ができる2カラムレイアウト

2カラムや横方向に入力欄を配置することで、フォームで生まれがちな左右の余白を有効活用することができます。
フォームにおいて複数カラム表示や横方向の配置を行うのは、主に下記のようなパターンで用いられることが多いかと思います。

項目の意味合いから横方向に配置する場合

よく見かけるのは姓と名、住所、電話番号、生年月日などのように連続する情報を横方向に配置する方法。

姓と名という連続する情報を横方向に配置
姓と名という連続する情報を横方向に配置

基本的には縦方向の並びで、上記のように部分的に横並びを取り入れるのは、一般的な手法といっても良いでしょう。

なるべくスクロールを少なくするために用いる場合

項目の意味合いとは関係なく、横並びの配置を行うことがあります。冒頭でも述べた通り、2カラムにすることで左右の余白を活かすことで、結果縦方向のスペースを節約することができるためです。
ページの縦幅(高さ)を小さくできれば、ファーストビューにフォームを収めたり、なるべく少ないスクロールでフォームの最下部を見せることができ、フォームの全体像をユーザーが把握しやすくなり入力への心理的ハードルが下がります。このことがフォームの送信完了率アップに効果的に働く可能性は高いでしょう。
昨日の「勝手に比較」で取り上げたデジハリ様の資料請求フォームでは、メールアドレス欄の箇所を部分的に2カラムに配置し、縦方向のサイズダウンを図っていました。

メールアドレス欄を電話番号の右横に配置した2カラム
メールアドレス欄を電話番号の右横に配置した2カラム

並列を表現する場合

また、2種類の並列のフォームを複数カラムで表現するような場合もあるでしょう。
多いのは、会員登録の有無によって、会員ログインと新規登録の2種類の導線を同一ページ内に用意している場合などです。

Apple Storeのサインインページ。
Apple Storeのサインインページ。厳密には複数カラムのフォームではありませんが…

複数カラムの視線移動は、人それぞれ

下記は、デンマークのBaymard社による、ひとつのマルチカラムのフォームを、5つの視線移動について示した図です。

参照元:http://baymard.com/blog/avoid-multi-column-forms
参照元:http://baymard.com/blog/avoid-multi-column-forms

同社は、複数カラムのフォームは、ユーザーによる入力項目の解釈にばらつきがあるため、複数カラムは使用すべきでないと述べています。
単一カラムのフォームであれば、視線の移動もシンプルに上から下へ降りていくのみです。しかし複数カラムとなると、どのように視線が動くかは予想することができません。
もちろん認識する順番が異なれば、解釈も人それぞれとなるでしょう。
では、ユーザーにより解釈にばらつきがあると、どのようなリスクが生まれるのでしょうか。

リスク1: 単純に見落とすリスク

上記の視線移動の2,3,4のようにユーザーの視線が移動した場合、単純に項目を見落とすという可能性が考えられます。
見落とした項目が入力必須であれば、当然送信時にエラーが発生し、ユーザーのストレスを生む結果となるでしょう。

リスク2: 意味合いの解釈

さらにBaymard社が行ったユーザーテストは、複数カラムの配置とその解釈の違いは、フォームの入力行動にも影響を与えることを示しています。
下記の動画では、同社が実施した2人の被験者によるユーザ-テストの様子を観察することができます。

最初の被験者は、複数カラムの入力項目のうち、左または右の列のいずれかの入力欄に記入しなければならないと考えているようでした。
それに対し2番目の被験者は、2つの列の間に「OR(または)」という表示ががあったのにもかかわらず、両方の列の項目に入力を行ってしまっています。
このように複数カラムに対しての意味合いの解釈は人それぞれ異なり、そのことでたとえ項目を見落としていなくとも、入力するべき箇所に入力しない、あるいはその逆の行動をユーザーが起こしてしまう可能性があるのではないでしょうか。

意味合いのための横配置は問題なし

ちなみに同社の調査によると、被験者は、姓名や住所などの内容の関連が深い項目同士の横並びについては、ユーザーの解釈に問題が起きることはなかったようです。

まとめ

いかがだったでしょうか。本日はフォームにおける複数カラムや横方向の項目配置について考えてみました。
一見、ページの余白を活かせ、スペースを有効活用できるように思える複数カラムのレイアウトですが、項目の見落としや解釈間違いのリスクがある、いわば諸刃の剣。
基本的には単一カラムのままにしておくのが吉です。
どうしても複数カラムを採用したい、という場合は、くれぐれもご慎重に。