フィッツの法則

判断過程

ボタンへの快適なアクセス性は、
ターゲットへの近さとサイズで決まる。

人が快適にインタラクティブな操作をするために、ボタンへの移動距離は短く、ボタンサイズは大きいほど操作にかかる時間は短くなる現象を、定量的に示した法則。
また、マウスなどのデバイスが移動する際は、初速が早いほど操作に時間を要し、移動方向に対してボタンの幅や高さが大きい方が停止する場所を広く取れるため時間を短縮できる。

フィッツの法則では、インターフェース・デザインにおいて、人がボタンを操作するのに必要な時間を公式を用いて求めることができる。
当初は、マンマシンインタフェースにおける人間の動作をモデル化したものだったが、現在では、ユーザーインターフェース設計において、普遍的な法則とされている。

公式 T = a + b log2 (D/W + 1)


T = 開始位置からターゲットまでの移動に要する時間
D = 開始位置からターゲット中心までの距離
W = ターゲットの大きさ
a = ポインターが移動した開始と停止の時間
b = ポインターの速度
※aとbは、対象者の習熟度や年齢などの要因によって変化

画面のエッヂに設置されたヒットエリアは、マウスポインターなどで操作する場合でも、行き過ぎることもなく、減速も必要ないため、移動時間を短縮できる場所として知られている。

ちなみに、MIT Touch Labの研究によれば、ボタンの最適なサイズは大人の指でもタップできる48ptとされる。

特にスマートフォン環境において、Appleのデザインガイドラインでは、人差し指で快適に操作できる44pt(物理的サイズは7mm)、Googleのデザインガイドラインでは48dp(物理的サイズは9mm)が最小サイズと記載されている。

具体例

  • iPhoneの画面長押し(3Dタッチ)で表示するメニューでは、削除や編集など現状に変化をもたらす選択は、あえて選択しにくい遠い場所に配置し、誤操作を抑制している

  • 横に長いメガドロップナビゲーションで、右上から左下の選択肢まで長距離移動する操作はストレスになる

  • 開いたモーダルなどを閉じるボタンの位置は、右上に「×」アイコンであるため遠くて小さく押しにくい

提唱者・発祥エピソード

アメリカのオハイオ大学の心理学者ポール・M・フィッツ氏が、1954年に、人がコンピュータの画面上においてマウスの移動距離と操作性図るためのモデルとして提唱した。

参考文献・参考サイト

【フィッツの法則】押しやすい、クリックしやすいボタンの公式
https://blog2.creativeflake.com/2017/04/22/【フィッツの法則】押しやすいボタンの公式/

Creative Flake

フィッツの法則
https://uxdaystokyo.com/articles/glossary/fittss-law/

UX TIMES

フィッツの法則と、UXにおけるその応用
https://u-site.jp/alertbox/fitts-law

ニールセン博士のAlertbox

長期記憶・短期記憶のメカニズムを知り、効果的に学習する方法とは?
https://www.katsuiku-academy.org/media/memory/

TechAcademy

フィッツの法則
https://three-philosophers.com/uiux/interface/fitts-law.html

Three Philosophers

フィッツの法則
https://www.sociomedia.co.jp/349

Sociomedia

UXに関わるならば押さえておきたい「10の心理学的法則」
https://www.mongoroid.com/blog/design/ux_psychology/

モンゴロイド

企業内セミナーや社員のUI/UXスキルアップ講座の開催を
ご検討の企業様からのお問い合わせはこちら

香西 睦

香西 睦

論理的で客観的なデザイン理論と、ユーザーの視点に立った情報デザインは、Webサイトの課題を見極め、わかりやすいインタフェースを実現!

同じテーマのおすすめ記事

人気コンテンツ

  1. 1

    非注意性盲目(ミスディレクション)

  2. 2

    短期記憶に関するミラーの法則(マジカルナンバー)

  3. 3

    意味記憶

  4. 4

    画像優位性効果

  5. 5

    フィッツの法則

最近の記事 おすすめ記事 特集記事
  1. フックモデル

  2. シャルパンティエ効果

  3. [11月4日]福岡DAY2セット|直感的で使いやすいUIデザインが作れる!

  4. [11月3日]福岡DAY1セット|直感的でわかりやすいUIデザインが作れる!

  5. 手続き記憶

  1. 近接の法則

  2. 類同の法則(類似性の法則)

  3. シグニファイア(知覚されたアフォーダンス)

  4. 画像優位性効果

  5. 選択的注意(カクテルパーティー効果)

  1. あらゆる人に直感的でなければいけない、エラー表示と使えないヘルプ

  2. わざわざ入力を面倒くさくしているドロップダウンリスト

  3. ユーザーの「知りたい度」によって変わる、「読み方」と「読む範囲」

  4. カッコいいだけなのはデザインとは言わない。

  5. UIデザインはデザインではなく統計だ!

香西 睦

香西 睦

「だから、そのデザインはダメなんだ。(エムディエヌコーポレーション刊) 」の著者。 論理的で客観的なデザイン理論とユーザー視点の構造設計・情報デザインを用いて、Webサイトの課題を見極め、Webサイトの性能をアップさせる利用者の目線に立ったわかりやすいインタフェースの設計で多くの企業様のお手伝いをしてきました!

TOP