最もユーザビリティが高いログインフォーム（その3：ラベルの位置）

フォームは、テキストボックスやラジオボタンといった「コントロール」と、アカウント名や性別といった「ラベル」がセットになっている。このコントロールとラベルの位置というニッチな部分においても、ユーザビリティの世界では議論の的となっている。今回は、ユーザビリティが最も高いラベルの位置を導き出す。

ラベルの位置は、大きく2通り考えられる。

コントロールの左（水平）
コントロールの上（垂直）

さらに文字の揃え方として

左寄せ
右寄せ

の2つの方法がある。一般的にはこれらを組み合わせて、3パターンのレイアウトがされている。

1.水平左寄せ

2.水平右寄せ

3.垂直

この3つのうち、どれが一番ユーザビリティが高いのだろうか。まず、これら3パターンがどれくらいの割合で用いられているかを調べたところ、信用できるデータではないが、

水平左寄せ：29％
水平右寄せ：41％
垂直：30％

だと分かった。ほぼ均等に分かれていて、Webのデファクトスタンダードはないようだ。（参考：Web Form Design Patterns: Sign-Up Forms）

つづいて、それぞれの特徴としては以下のことが挙げられる。

水平左寄せ：

ラベルが読みやすい。
ラベルの文字数にばらつきがあると、コントロールとラベルの関係性が分かりづらくなる。
横長のレイアウトになる。

水平右寄せ：

ラベルが読みにくい。
水平左寄せに比べてコントロールとラベルの関係性が分かりやすく、デザイン的にもすっきり見える
横長のレイアウトになる

垂直：

ラベルが読みやすい。
右寄せ、左寄せについて悩む必要がない。
ラベル文字数の大小、ばらつきに関して問題が起こらない。
コントロールが多くなるとごちゃごちゃしていて複雑に感じる。
縦長のレイアウトになる。
「入力フォームは操作を上から下に行うようなレイアウトになっているべき」という考えに一致する

これらを踏まえると、なんとなく垂直レイアウトが良いように思える。他、いろいろな人が唱えているフォームのガイドラインを読んでみても、右寄せのラベルは読みづらいからやめるべきだという意見が多い。垂直レイアウトが、人間の視線の動きに合っていて、ラベルとコントロールの関係を理解するまでの時間的も短いというデータがあるようだ。また、私の個人的な経験では、ラベルの文字数が長くなりすぎて2行のラベルになってデザイン的によろしくないものになることもある。汎用性の観点からしても、垂直レイアウトは優れていると考えられる。

しかし、何かがひっかからないだろうか？

それは、「コントロールが多くなるとごちゃごちゃしていて複雑に感じる。」という点だと私は思う。しかし、その原因はログインフォームでは説明できない。

この一点だけ課題を残すが、「コントロールの上に左寄せでラベルを配置」というのが、ログインフォームのラベルの位置の解とする。

参考リンク

2009年11月1日日曜日