フィッツの法則

判断過程

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

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

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

公式 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デザイン講座のご予約はこちら

香西 睦

香西 睦

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

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

おすすめランキング

  1. 1

    フレーミング効果

  2. 2

    03:知りたいことが基準になるユーザー視点で作るUIデザイン

  3. 3

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

  4. 4

    2023年5月24日開催オンラインセミナー

  5. 5

    2023年4月26日開催オンラインセミナー

  6. 6

    認知科学で考える「バナー/おすすめパネル」のデザイン表現

  7. 7

    01:UIデザインを高める必須テクニック「ユーザー視点」

  8. 8

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

  9. 9

    返報性の原理

  10. 10

    ヒックの法則(ヒック・ハイマンの法則)

香西 睦

香西 睦

自分のデザイン技術をもっと高めていきたいデザイナーやディレクターのみなさん、学校や職場だけではなかなか学ぶことができない認知科学で考えるデザイン表現を身に付けて、自分のデザインをランクアップさせましょう! わかりやすく具体的な事例をたくさん用いて、認知科学(認知心理学)からみたデザイン表現や作り方を楽しくわかりやすく紹介します!

TOP