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

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

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

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

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

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

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

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

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

Nasi Briyani Lounge 

 

Scrapblog

JOYMAX.COM 

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

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

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

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

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

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

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

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

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

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

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

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