デザインの為の法則には様々なものがあります。
今回はユーザーの使い勝手にもかかわる、代表的な４つの手法について学んでいきましょう。
デザインの法則を知り、ユーザーにとって使い勝手がよいデザインを追及していきましょう。
ミラーの法則
アメリカの心理学者であるジョージ・ミラー氏は、1956年に「マジカルナンバー」という論文を発表しました。この論文では「人間が一度に短期記憶できる情報数には限りがある。その情報数は５～９個である。」とされています。
この場合の短期記憶とは、１５秒～３０秒間覚えていられるという意味です。
ミラーの法則で言われている情報数とは「情報のかたまり（チャンク）」の中の情報の数を指します。そして、情報はそれぞれ意味を持ちます。このため、チャンクは同じ意味を持つ、もしくは一つの意味を示すための情報の「かたまり」といえます。
たとえば、「0314283567」という10桁の数字で形成された、電話番号があるとします。
この例の場合だと、数字のかたまり(チャンク)が１つあると考えます。一つ一つの数字は、「情報」にあたります。ですので「情報数＝桁数」となります。今回の例だと、電話番号という意味を持つ情報１０個のかたまりが１つある、と捉えます。
ミラーの法則から言えば、この電話番号は情報数10なのでユーザーにとって覚えにくいものとなりますね。
では、法則に沿って表示の仕方を変えてみましょう。
１つのかたまり内の数字(情報)を、更に３つのかたまりに分けています。
たとえば「03」は、電話番号の市外局番にあたる情報ですね。このように１かたまり内の情報数が５～９になるように、細分化する事で情報を認識しやすくなるのです。
また、この３つのかたまりは「電話番号」という１つのかたまり内に存在します。この関係を表すために３つのかたまりを「-」で繋げて表示したとます。
「03-1428-3567」となり、わかりやすいですね。
このようにミラーの法則に従えば、覚えづらいものでも見やすくなるのがお分かりいただけたと思います。
マジカルナンバー「4±1」も
1956年にジョージ・ミラー氏が発表した論文では短期記憶できる数は7±2（５～９）とされていましたが、2001年にネルソン・コーワン氏によって人間の短期記憶は4±1であるとの論文が発表されています。
このため、近年はチャンクを5以内にするべきという考え方も多くなっています。
上記の電話番号「03-1428-3567」もそれぞれ5文字以内に区切られ、チャンクも3つですよね。
これが「03-14283567」だとどうでしょう？ 後半は8＝7±2の範囲内ですが、覚えにくく感じるのではないでしょうか。
内容にもよりますが、情報を並べて表示する場合は9つ以下、できれば5つ以下に整理することで、かなり見やすく分かりやすい表示に変わります。
ヒックの法則
ヒックの法則とは「選択肢が少ない方が決定に至るまで時間がかからない」という法則です。例えば10の選択肢を一度に用意するよりも5つ用意して、その後にまた選択肢を作るほうが「決定」するのに時間がかからないということです。では、Appleサイトの例でみてみましょう。
上記は「グローバルナビゲーション」です。ユーザーは、商品を見たい時にMac、iPad、iPhoneなどから選びます。そうするとサブメニューのような形で商品が出てきます。
ミラーの法則でもそうでしたが、選択肢が多いと一つ一つの選択肢を認識するのに時間がかかります。認識に時間がかかると「決定」までなかなか辿りつけません。そうなるとユーザーは「決定」する事をあきらめサイトから離脱してしまいます。
このAppleのサイトは最初に少ない選択肢を用意しておいて（Mac、iPad、iPhoneなど）、目的の商品を選びやすくしている好例だと言えます。
もし、これがたくさんのメニューで埋め尽くされていたら目的までたどり着くのにとても時間がかかりそうですね。ヒックの法則にしたがってメニューを少なくすることで、目的までたどり着きやすくなっているのがお分かりいただけたと思います。
フィッツの法則
フィッツの法則とは、現在位置から目的へたどり着くまでにかかる時間と、目的の場所の大きさや距離の関係性を示した法則です。この法則は、webサイトで使われるボタンやリンクに対して使われます。以下イメージを見てみましょう。
テキストリンクとボタン（リンク）です。それぞれ、赤線部分がクリック可能範囲となります。この２つがある場合、ユーザーがクリックしやすいのはボタンの方です。これは、クリック可能範囲の大きさが関係しています。
範囲が大きいと、マウスを動かすスピードが多少速くても、クリック可能範囲にポインタが留まるでしょう。しかし、範囲が狭いと目的地に正しくポインタを置くため、マウスの動きが遅くなりますね。
このように、リンクの範囲の大きさにより、ユーザーが容易かつ早くクリック出来るかが決まります。また、ナビゲーション部分等でリンクが並んでいる場合がありますね。
このグローバルナビゲーションの例では、リンク同士の間に区切り部分に線を引いています。
上の例は、テキスト部分のみがリンクとなっています。
しかし、線が引いてあることにより、線内全てがリンクだと勘違いしてしまうかもしれません。勘違いしたまま、テキスト外をクリックすると何も起こらず、ユーザーは分かりにくいと感じるでしょう。範囲が細く狭いのでクリックもしにくいですね。
リンクを置く際は、線内部分全てがリンクとなっている下図のように設計したほうが分かりやすく親切な設計と言えます。
距離と方向
リンク範囲の他にも重要な点があります。
それは、現在地からリンクまでの距離と方向です。
当然ですが、現在地から目的地までの距離が短い方が、早くたどり着けますね。
また、上記イメージ内には２つポインタがあります。
ポインタからリンク範囲までの距離を、それぞれ赤線で示しています。この２つの距離は同一です。
しかし、この２つは横方向の方が早くクリックする事が出来ます。それは、先ほどのリンク範囲の大きさによるものです。ボタンを見ると、縦幅より横幅の方が大きいですね。ですので、横方向から移動とすると、リンク範囲が大きいのでクリックしやすいとなるのです。
下図はyahooトップページです。
ユーザーが頻繁に利用する「検索」はテキスト入力欄から横方向にマウスを動かしたとき、クリックしやすい形のボタンになっていますね。
また、ブラウザの画面設計は大抵右上に「バツ印」の閉じるボタンがあります。
クリック可能範囲は狭いものの、このように、一番端に配置されているボタンは、小さくてもクリックしやすいものです。ポインタが移動しすぎてしまう恐れがないからですね。
三分割法
三分割法とは、レイアウトの方法の１つです。ユーザーの視線が、コンテンツ内の重要ポイントに向きやすくなると言われています。画像作成の際や、サイト全体のレイアウトで役立ちます。
対象に縦横２本づつ、等間隔で線を引きます。対象が９つにブロック分けされていますね。そして、線が交差している部分が４つあります。この交差部分に、注目してほしいものを置きます。
上記は「visa」カードのサイトです。ファーストビュー部分に線を入れると、交差部分に重要コンテンツが配置されていることが分かります。
上記は「felissimo」の商品バナーです。水色の丸が交差部分です。バナーを作る際も三分割法を意識して制作することで、よりユーザーに要点が伝わりやすくなるでしょう。
まとめ
デザインの為の法則には様々なものがあります。今回は以下の法則を学びました。
- ミラーの法則
- ヒックの法則
- フィッツの法則
- 三分割法
デザインの法則を知り、ユーザーにとって使い勝手がよいデザインを追及していきましょう。