こんにちは、uni-browserの財前航介です。
以前、「ヒックの法則」という法則について、以下のような記事を書きました。
ヒックの法則って何？ 選択肢はカテゴリ分けをしよう >>
上記の記事では、ヒックの法則という法則についてご説明をした後、Webサイトを作成する際のカテゴリ分けの重要性についてお話ししましたね。
そのヒックの法則と似たような数式を用いる法則に、「フィッツの法則」というものがあります。
ヒックやらフィッツやら、紛らわしいですね。
この記事では、以前ご説明したヒックの法則と絡めながら、フィッツの法則について学び、Webサイトのデザインを考える上で気を付けたい項目について、確認をしていきましょう。
ヒックの法則のおさらい
ヒックの法則とはどんな法則だったかと言うと、
「選択肢が多いと、ユーザーは選ぶのに時間がかかる」
という法則でした。
選ぶのに時間がかかり過ぎた場合、ユーザーは選ぶこと自体を放棄してしまうということも、以前の記事で確認しましたね。
この法則は、Webデザインにも広く応用されています。
Webサイトを利用するのに時間がかかるということは、その分、ユーザーにストレスを与えるということです。
それは、ユーザーがWebサイトを使うことをやめてしまうこととも大きく関係してきます。
ですから、Webサイトで表示する選択肢は過剰に多くすることなく、ユーザーに気持ちよくWebサイトを使ってもらえるようにする必要があります。
また、このヒックの法則と似たような法則に、フィッツの法則というものがあります。
フィッツの法則とは
フィッツの法則は、ユーザーがクリックするボタンのサイズや、形に関わってくる法則です。
逆に、下の図のように、縦方向にマウスを動かしてボタンをクリックする場合、ボタンは縦長の方がクリックしやすいです。
もちろん縦長とか、横長とか、そういう特殊な形にしなくても、ボタンをやたらデカくしておけば、クリックはしやすいです。
でも、ボタンをそんなに大きくできるかどうかは、サイトのデザインなど、状況によりけりですね。
そういうことを言っているのが、フィッツの法則です。
数式で書くと以下のようなものになります。
フィッツの法則の数式
フィッツの法則を具体的に表した数式は、以下のようなものです。
T = a + b × log2 (1+D/W)
T = ボタンなどのターゲットまでの時間
a = オーバーヘッド（マウスの移動開始の時間と、停止の時間）
b = マウスの速度
D = 開始位置とターゲットと中心位置との距離
W = ターゲットの大きさ（移動方向と同じ向きの長さ）
W = ターゲットの大きさ（移動方向と同じ向きの長さ）
この数式を見ただけでは、分かりにくいですよね。
ただ、この数式は、ヒックの法則の数式と非常によく似ています。
ここで大事なのは、以下の2点です。
マウスをボタンの位置まで動かすのにかかる時間（T）は、
- 開始位置からターゲットまでの距離（D）が長いと、長くなる。
- ボタンの長さ（W）が移動方向と同じ向きに長いほど、短くなる。
一つ目の法則は、当たり前と言っていいと思います。
マウスを動かし始める位置から、ボタンまでの距離が長ければ、ボタンをクリックするまでに時間がかかります。
ただ、二つ目は少し興味深いですね。
ボタンがマウスの進行方向に対して長いほど、クリックするまでにかかる時間は短くなるのです。
マウスの移動時間が短くなるということは、ユーザーはスムーズにそのWebサイトを使用できるわけですから、より好ましいWebサイトであると言うことができます。
ヒックの法則の時とは少しアプローチが異なりますが、このフィッツの法則もヒックの法則と同様に、ユーザーがボタンなどを選択し、クリックすることにかかる時間を少しでも減らし、使いやすいWebサイトを構築する上でのヒントを与えてくれている法則ですね。
フィッツの法則の例外
例外というよりも、特別な場合のルールなのですが、画面の端っこギリギリにあるボタンは、クリックしやすいです。
少しぐらい距離が遠くても、勢いよくマウスを動かして、クリックすることができます。
これはどういうことかと言うと、
「ボタンの長さが無限大である」
という風に解釈することができます。
たとえばPCの画面の右端ギリギリにあるボタンであれば、マウスはそれ以上右に行くことはできません。
そのため、いくらマウスを右に動かし続けても、ずっとマウスがボタンの上に存在し続けることができます。
つまり、右側に無限にボタンが伸びているような状態とみなすことができるのです。
その為、画面の端っこにボタンを配置することは、ユーザーが素早くクリックすることを可能にしていると言えます。
ヒックの法則とフィッツの法則を総合すると
ヒックの法則とフィッツの法則の両方を総合して、ユーザーにとってより良い選択肢の提示の仕方を考えてみましょう。
ヒックの法則は、
「選択肢が多すぎると、ユーザーの選択に時間がかかってしまう」
という法則ですが、具体的には５つ～９つ程度の選択肢が、望ましい選択肢の数であると言われています。
また、フィッツの法則からは、
「進行方向に対して長いボタンが、クリックしやすい」
ということを読み取ることができます。
この２つの法則を総合すると、
「ユーザーに何かを選択させるときには、５つ～９つの選択肢を、マウスの進行方向に対して長めのボタンを用いて提示する」
という方針が立ちます。
たとえば、メニューバーであれば、一般的に用いられる以下のような形式は、理にかなっているのかもしれません。
マウスの進行方向を横向きだとすれば、フィッツの法則を満たしていますし、選択肢の数も一般的には５個～９個程度であり、ヒックの法則にも違反していないことが多いでしょう。
メニューバーに関しては、メニューバーより下部にある本文からマウスが移動してくることも考えられますので、「横長のボタンが最適か」という点に関しては議論の余地があるでしょう。
また、上記メニューバーは、文字をクリックしたときだけでなく、ボタン内の余白をクリックしても画面遷移が発生します。
必ず文字をクリックしなければいけない場合に比べて、文字を含むボタン領域全体がクリックの対象になっていることによって、クリック可能な高さも２倍程度になっています。
これは、フィッツの法則に従えば、ユーザーがボタンを押すための時間を短縮できている、ひいては、Webサイトの使いやすさの向上に繋がっていると言えます。
したがって、ユーザーに何かを選択してもらうときには、単に文字のみをクリック対象にするのではなく、ボタンの領域全体をクリック対象にすると、使いやすいWebサイトの構築ができるでしょう。
まとめ
（ヒックの法則とフィッツの法則で、より良いWebサイトを作ろう！）
如何でしたでしょうか。
ヒックの法則とフィッツの法則、
どちらも、ユーザーが選択肢をクリックするまでにかかる時間を短縮するために役立つ法則です。
ヒックの法則に従って、選択肢は少なくし、
フィッツの法則に従って、クリックしやすいボタンを配置する。
上記の２点に気を付ければ、あなたのWebサイトがより良いものになるかもしれません！
この記事が、少しでも皆様のWebサイト作成の助けになれば幸いです。
最後まで読んで下さり、ありがとうございました。
0 件のコメント:
コメントを投稿