フィッツの法則を Web サイトに応用する

ユーザーインターフェイス設計は、スパイラルモデルで繰り返し試行錯誤を行うことで、利用者に満足の得られるものに近づいていきます。その際に、フィッツの法則を考慮しておくと、今までよりもスムーズに設計が行えるでしょう。

フィッツの法則とは、人とマウスなどのデバイスの関係性を扱っているものです。すでに多くのソフトウェアでは取り入れられている概念ですが、Web サイトにおいても取り入れる価値の高い概念です。

インタラクションデザイナーに向けたフィッツの法則についてのクイズがあります。「あなたなら、すぐにちゃんと答えられるよね？」というコメントがついたものが全部で10問。よろしければご挑戦ください。

[参照元]
AskTog：A Quiz Designed to Give You Fitts

Q1 マイクロソフトの各アイコンの下にラベルがあるのはなぜか。

Q2 16×16ピクセルのアイコンが2×8列に左端から並んでいる。アイコンを左端から動かさず、アイコンの大きさを変えずに、クリックしやすくせよ。

Q3 右利きのユーザーがアクセスしやすいスクリーンの場所を順番に挙げよ。

Q4 タスクバーを自動的に隠すように設定することが非効率な理由を述べよ。

Q5 マッキントッシュのプルダウンメニューはウィンドウズのプルダウンメニューよりも5倍くらいはやくアクセスできます。それはなぜか。

Q6 階層メニューでボトルネックになっているのは何か。マックではどんな技術を使ってその欠点を補おうとしているか。

Q7 ポップアップメニューで、循環型が線形型より便利なところはどこか。

Q8 すべてのアイテムに対してアクセスタイムのより良いバランスをとるために、線形ポップアップメニューをどうすればよいのか。

Q9 マウスやキーボードの形を丸めたことは、なぜよくなかったのか。

Q10 上記の質問に対して共通する主要な解決策は何か。

以下に、回答の簡単な意訳も載せておきます。厳密に理解したい方は、上記に掲載した原本をお読みいただければと思います。

Q1
A ラベルもアイコンの一部。ターゲットが大きくなり、クリックしやすい。
B　ラベルがなければ、アイコン同士の距離が近くなりすぎる。

Q2
A　1×16列に変更する。そしてスクリーンの端から端まで並べる。
B　すると端から端までどこもクリック可能になる。

Q3
1. 現在のポインターの場所　2. 右下 3. 左上 4. 右上 5. 左下
※左利きの場合は逆になる

Q4
A　常に表示させることで、そのスペースをムダにしているわけではない。
B　何かの拍子に、そのつもりはないのにタスクバーを表示させてしまうことがある。
C　ポインターを角に動かした時、タスクバーを表示されるようにすると間違いが減る。

Q5
マッキントッシュはディスプレイの一番上のところにプルダウンメニューを置いてある。そのため、細かい操作が必要ないので早くアクセスできる。一方、ウィンドウズではウィンドウの一番上にある。ウィンドウズはウィンドウの一番上にプルダウンメニューを置いてあるから、細かい操作をしなければならないため、結果として遅れるのである。

Q6
ひとつ目の階層メニューとふたつ目の階層メニューの間がボトルネックである。ウィンドウズではしっかり右に動かさなければ、ひとつ下のメニューを開いてしまう。マックでは、V字効果を用いているが上手くはいっていない。ウィンドウズが、その欠点を直さずにマックの方法を真似したためにボトルネックはいまだに存在している。

Q7
マウスをあまり動かさないで済む。運動記憶によって方向情報を利用できる。

Q8
1. メニューを開く際、ポインターに動き対するマウスの動作量を増やす。
2. ローカル重力を用いると、ポインターが目標に近づけば引き付けられる。

Q9
キーボードを鋭角に上方へと曲げることで僅かながら指を持ち上げて、数値キーやファンクションキーにアクセスしやすくなる。そして、タッチの正確さとスピードが上がる。

Q10
1. OK ボタンで終了する時、一方で OK を表示するために他のスペースを見えなくする。
2. スケージュールのマネジメントの際には画面の端にピンで留めておくと、ユーザーは目的のツールにアクセスできるようになる。
3. アイコンやボタンより、画面の一番上にあるメニューバーが使いやすい。
（ファンサイド AG　ユーザビリティチーム　板倉誠）

Twitter	iPhoneアプリ / iPadアプリ		Androidアプリ
Facebook	RSS	ニュースメール