デザイン

【フィッツの法則】押しやすい、クリックしやすいボタンの公式

  • このエントリーをはてなブックマークに追加
フィッツの法則

押しやすいボタンの条件とは?

押しやすいボタン、クリックされやすいボタンには理由があります。

ボタンの色や形、フォント、大きさ、位置など、さまざまな条件がありますが、
今回は数学公式に基づいて、押しやすいボタンを研究してみます!!

まずは押しやすいボタンの公式が数十年も前からあるのですが、
(実際にはボタン用ではありませんが。)
フィッツの法則を学ぶところから。

フィッツの法則

フィッツの法則

ここで、
「T」は動作完了までの時間、つまり、ボタンをクリックしようとしてマウスを動かしてクリック完了までの時間です。
「a」はマウスの開始・停止位置です。今のところは便宜上これは考えなくてOK。
「b」は速度。マウスの速度です。
「D」はマウスの位置からボタンまでの距離を表します。
「W」は動きの方向に測ったボタンの幅、もしくは奥行きです。

もちろんlogは大丈夫ですよね?
logは( )内が大きければ、その値も大きくなります。
ここで底の2は考えなくてOK。

もう少し分かりやすく言うと

ボタンをクリックするまでにかかる時間は、
1. 今いるマウスの位置からボタンが離れているほど時間がかかる
2. マウスの動かし方が速いほど時間がかかる
3. ボタンの幅(奥行き)が大きいほど時間が短くなる

例として、こんな場合


仮に
1. 下から上に向かって
2. 右から左に向かって
ボタンをクリックしようとすると、

上に向けた方の場合、目的のボタンの奥行きがせまく、
横向きの場合、目的のボタンの奥行きが広いことがわかります。

つまり、目的のボタン上でぴったりマウスを止めるには、このボタンの場合、
横にマウスを動かしたほうが、クリックまでにかかる時間が短いことがわかります。

ボタンがテキストリンクだったら

テキストリンクの場合、ボタンリンクよりもさらに奥行きがせまくなり、
クリックまでに時間がかかることがわかります。

さらに文字の小さなテキストリンクなら、さらにクリックが難しくなり、
ユーザーがイラッとする原因にもなり、ページ離脱へとつながることも。

数学的に押しやすいボタンのまとめ

(ユーザーがマウスを動かすスピードはコントロールできないものとして、)
目的のボタンの大きさはほどよい大きさで、
細長すぎるボタンもNG。

そしてボタンまでの距離(Webでは余白ですね)もあけすぎず。

  • このエントリーをはてなブックマークに追加

Leave a Reply