よく知られているように、人間の行動は予測がつかないものです。重力、電気、摩擦とは違い、毎回いつも同じように振舞うわけではないようです。
そしてこのことが、フィッツの法則を興味深いものにしています。フィッツの法則とは、人間の振る舞いについての非常によくできた予測モデルです。
デザイン時にフィッツの法則を活用することで、標準的な人間の振る舞いを用いて、使いやすいインターフェイスを作れるようになります。あなたのWebサイトにも、ソフトウェアのプログラムにも、ゲームにも、これを用いることができます。食料品店のセルフレジから金融系のWebサイトまで、人間の行動は変わらずに同じままなのです。
どんなインターフェイスも、フィッツの法則から得られる教訓を用いることで、ユーザーが起こすエラーを減らして、彼らがタスクをより素早く達成するようにできます。
フィッツの法則とは何か
フィッツの法則は、人間の行動をモデル化する方程式です。「対象の大きさ」と「対象までの距離」と「対象の選択しづらさ」との相関関係を説明するものです。
もともとこの方程式は、片手を使って木のブロックを選ぶ実験に基づいて考案されました。具体的には、１つのブロックに触ってから別のブロックに触るまでの時間を計測するといったものです。
ブロックの厚さを変えたり、２つのブロック同士の距離を変えたりしてかかる時間の変化を調べました。
この実験に基づいてFitts氏は、１次元の対象を選ぶことがどれだけ難しいかを説明するモデルを思いつきました。その後の研究者たちが、このモデルに改良を加えることで２次元、３次元の物体でも使えることを実証しました。
幸いなことに、このモデルから得られる教訓を用いるために、方程式の中身を深く理解する必要はありません。
フィッツの法則から何を学べるのか
フィッツの法則の方程式に基づくと、私たちは以下の２つを考える必要があります
対象との距離
- 遠い ⇒ 選びにくい
- 近い ⇒ 選びやすい
対象のサイズ
- 小さい ⇒ 選びにくい
- 大きい ⇒ 選びやすい
これらの関係性についての知識に基づいて、システムのレイアウトを考え直すことができます。
距離に基づく教訓
一緒に使われそうなボタンはまとめてグループ化することで、ユーザーがより簡単にタスクを進められるようになります。次に操作するボタンを探す必要が無くなり、次のボタンにたどり着くために遠回りする必要が無くなるのです。
たとえば再生・停止ボタンのように、ボタンを押した時に別のボタンに変える形で、次に操作するボタンとの距離の近さを実現することもあります。音声が歪んでしまいその内容を調べるときに、人々は再生と停止を素早く切り替えたいと考えます。すでに選択されたボタンを別のボタンに置き変えることで、次の選択が可能な限り簡単にできるようになります。
iTunesのインターフェイスはその一例です
デザインするときには、個々のページよりもタスク単位のインタラクションに注目することが重要です。ユーザーが次のステップに進むために、あとどれだけの手順が必要かが分かるように、特定のタスクの中で互いに関連している一連のページは、隣のページと見比べられるようにするのがよいでしょう。
Amazonの会計フローの一部
Amazonの会計フローを見ると、配送と支払、オーダー確定の画面の間に、次のステップに進むためのボタンが右上に置かれており、ユーザーは素早くオーダー確定に進むことができるようになっています。
この関係性は他の方向性でも使うことができます。実行する前にユーザーによく考えてほしいのであれば、彼らが目的を達成するまでの道のりを長くすることで、落ち着いて考えて貰えるようになります。こうすることで、うっかりダブルクリックして全てのファイルを削除してしまうようなことを防ぎます。
LinkedInのアカウントをクローズするときは、まず右側のボタンを押し、スクロールして下の方に進み、それから左側のボタンを押す必要があります。これが不注意によるダブルクリックで意図しない結果を招くことを防いでいるのです。LinkedInは処理を完了する直前のページでパスワードを要求することで、ユーザーの決定について再確認しています。
サイズに基づく教訓
それぞれの要素間の距離を調整するのとは別に、サイズを変えることでも対象を選択する難易度は変わります。
どのようなインターフェイスであれ、全ての要素の最小サイズが選択するのに苦がない程度のサイズとなっているようにしたいものです。モバイルではカーソルではなく指で選択する必要があるため、最小サイズに関してはより注意を払う必要があります。
このレシピサイトを初めて訪れた時に必ず表示されるポップアップメッセージ（デスクトップ、モバイル共通）
モバイルバージョンの右肩の隅に表示されている、小さな「x」が見えるでしょうか。ポップアップを閉じるには、これをクリックするしかありません。この対象のサイズは指で選択するには小さすぎます。この種のインタラクションは、マウスを使っている時にだけ有効です。対象であるアイコンのサイズが小さくてモバイルでの作業が難しく、最終的にポップアップを閉じるまでに数回の試行が必要になります。
マウスを使う場合は、スクリーンの端が特別な意味を持ちます。端に到達すればマウスはそこで止まるからです。これはつまり、端に配置されている要素はその方向に無限大のサイズを持つことを意味します。そのためスクリーンの端にある要素の選択は、ユーザーにとって非常に簡単になります。
私のコンピューターのツールバー
画面の端にある要素はユーザーにとって選択しやすくなるので、そこにある各要素の間隔は少し狭く設定できます。上の例では、カーソルの幅ほどしかボタンの間隔を空けていませんが、画面の端に位置しているため、これらを扱うのはユーザーにとって非常に簡単です。
他には、より多くの一般的なタスクを効果的に完了できるように、頻繁に使う重要なボタンのサイズを大きくするといった考えもあるでしょう。
結論
フィッツの法則は、ユーザーのタスクをサポートするインターフェイスをデザインするために使える、基礎的なコンセプトの１つです。各要素の距離やサイズと、ユーザーにとっての扱いにくさの関係を考慮することで、プロダクトでのユーザー体験に影響を与えるような、より確かな判断ができるようになります。
フィッツの法則があれば、共通タスクをより簡単にし、深刻な結果につながるタスクは落ち着いて考えられるようにする、といったような戦略的な判断でデザインすることができます。
