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

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

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

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

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

1. 左寄せ
2. 右寄せ

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


1.水平左寄せ

2.水平右寄せ

3.垂直

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

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

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

つづいて、それぞれの特徴としては以下のことが挙げられる。
 
水平左寄せ：

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

水平右寄せ：

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

垂直：

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

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

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

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

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

参考リンク

• Web Form Design Patterns: Sign-Up Forms
• Web form design guidelines: an eyetracking study 
• 実用的なユーザビリティの10のポイント：ガイドライン編
  

最もユーザビリティが高いログインフォーム（その2：操作の流れ）

ログインフォームの最適解を求めると言っても、ログインフォームなんて適当に作っても、ユーザビリティの問題はそうそう起こらない。そのため、様々なログインフォームを例に挙げて、そのユーザビリティを検証しても、ユーザビリティに問題があるものはまずないだろう。

ログインフォームの最適解を求める上で重要なことは、「解そのもの」よりも「解の理由」が大切だということ。ログインフォームの解を導くための考え方、UI設計の仕方はすべての入力フォームに適用できる。いわば、ログインフォームは入力フォームの雛形になるのである。

前置きは置いといて本題に。

デザイナーの直感で、適当な位置に、適当なサイズのUIを配置すればほとんどの人が同じようなレイアウトになるだろう。世界中のUIデザイナー100人に作ってもらうと、ほぼ全員が、

1. アカウント名入力
2. パスワード入力
3. ログインボタン押下

の順で操作が上から下に流れるものを作る。一部、左から右の流れになるように作る人もいるだろう。例えば、最後のログインボタンだけ右に操作が流れるものなど。また、使用する言語によっては、右から左もあるかもしれない。

まさか、下から上に操作が流れるものは誰も作らないだろう。 
しかし、なぜ、「最後のログインボタンだけ右に操作が流れるもの」を作るのか？

例えば以下のようなUIである。

Nasi Briyani Lounge 

 

Scrapblog

JOYMAX.COM 

なぜわざわざ、視線の流れ、操作の流れ、マウスの軌跡をずらす必要があるのだろうか。

これらをデザインした人に、こんな質問をしてみたら何と答えるだろうか。

「最後にボタンを右に置いた理由はなんですか？」

私が想定できる回答を挙げてみる。

• ビジュアル的にカッコいいから
• 全体の形が四角形になってまとまって見え、シンプルに見えるから
  
• ログインフォームの全体の大きさ、特に高さに制限があったため
• 「次へ」「進む」「確定（Enter）」の意味を持つボタンは右にあるというイメージがあるため  

これらはどれも否定はできないが、この理論は他の入力フォームに適応できるのだろうか。ログインフォームにはテキストボックスが基本的には2つ（アカウント名、パスワード）しかないが、テキストボックスがもっと多い入力フォームはどうだろう。極端な話、以下のような会員登録フォームの場合、最後の「会員登録」ボタンをフォームの右に配置するなんてありえないのでは？

もし最後のボタンを右に配置すると下の図のようになる。

何か違和感を感じるのは私だけだろうか。
多くの場合、最後のボタンはテキストボックスの下に配置されている。

ではもう一度ログインフォームに戻ってみるが、ログインボタンがテキストボックスの右に配置される理由として納得できるものがあるとは私には思えない。テキストボックスの数が何個以下になったら最後のボタンを右に配置するのか？テキストボックスの数が少ないからといって、最後のボタンが右に配置される理由はないのではないか？

つまり、操作の流れは、人間の視線の動きから考えて上から下に流れるべきであり、途中で右に移動する合理的な理由なんてないのである。具体的に言えば、マウスカーソルは上から下に移動すべきである。

よって、「操作を上から下に行うようなレイアウト」こそが、もっとも使いやすいログインフォームの一要素であり、これはすべての入力フォームに当てはめることができるルールである。

参考リンク
・ログインフォームのデザイン集１００種

最もユーザビリティが高いログインフォーム（その1：解の予想）

とりあえずログインフォームから初めてみるとする。
私の予想ではたぶんこのようなもの。
仮にAタイプとする。

最適解を求める方法としてこれから行うのは、Aタイプと他のタイプを比べて、「やっぱりAタイプがいいね」という、相対比較である。

100メートル走が最も速い人を決定付けるには、それ以上足が速い人がいいか大会でも開いて調べればいいように、ユーザビリティの高さを測るのに、Aタイプだけを見て、「ここがいいんだ！あれがいいんだ！」なんて言っても、結局のところ最適解かどうかは言えない。

だからといって、世界中のログインフォームとしらみつぶしに比較するわけではない。そのあたりは理論と共に考察していくとする。

ログインフォームの構成要素

ログインフォームに必要不可欠なUIパーツを挙げてみる。

絶対に必要なのは次の3つである。

• アカウント名のテキストボックス
• パスワードのテキストボックス
• 送信ボタン 

現実的には次の3つも必要である。

• アカウント名のラベル
• パスワードのラベル
• アカウント名やパスワードを忘れたときのリンク 

今回はさらに、次のUIも含んでみる。

• 次回からログインするためのボタン 

以上の7点のUIパーツでログインフォームの最適解の説明を次回からする。