フィッツの法則

判断過程

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

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

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

公式 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

    [10月8日]東京DAY1|直感的でわかりやすいUIデザインが作れる!

  2. 2

    サイモン効果(刺激反応適合性効果)

  3. 3

    認知科学で考える「ローカルナビゲーション」のデザイン表現

  4. 4

    2つの思考モード(二重過程理論)

  5. 5

    アンダードッグ効果(判官贔屓〈ほうがんびいき〉)

  6. 6

    05:ユーザー視点で作る高い説得力を持つUI設計&提案書

  7. 7

    UIデザイン・認知科学講座:01|UIデザインが必ずわかりやすくなる心理テクニック

  8. 8

    認知科学で考える「入力フォーム」のデザイン表現

  9. 9

    マイナス要素を無くすことが、ユーザビリティの要

  10. 10

    3-4:ユーザーの利用目的にヒットするニーズとウォンツ(オンライン講座)

香西 睦

香西 睦

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

UIデザインがよくわかる本

香西睦の執筆デザイン書籍・電子書籍

TOP