負担を減らし手応えを返す

フィッツの法則

ボタンまでの距離が遠いほど、ボタンが小さいほど、押すまでに時間がかかる。

多くの研究が支持複数の研究やメタ分析で、同じ向きの結果が出ています。

たとえば

画面の端にある小さな閉じるボタンは押しにくく、親指の近くの大きなボタンは押しやすい。

なぜ効くか

目標までの移動時間は、距離と目標の大きさの比で予測できる。マウスでも指でも同じ傾向が確かめられている。

Webでの使い方

主なCTAは大きく、直前の操作の近くに置く。スマホでは親指が届く下側に置く。このサイトでは主操作を48px以上にしている。

逆効果になる条件

解約や拒否のボタンだけを小さく遠くする設計は、ダークパターンとみなされる。

根拠

  1. 目標を指す動作の時間が、距離と目標の幅の比で決まることを示した。

    Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6), 381-391. 資料を開く

  2. 操作の対象を、原則として24×24 CSSピクセル以上にするよう求めている。

    W3C (2023). Web Content Accessibility Guidelines (WCAG) 2.2, 2.5.8 Target Size (Minimum). 資料を開く

この理論を使うパターン

2件

注意を引く

押すと沈むCTA

押すとすぐにボタンが沈み、指を離すと少し弾んで戻る。押せることと押したことが、同時に分かる。

始めてもらう

親指の届くCTA

スマホの画面の下に、押しやすい大きさのボタンが固定されている。