《設計的法則》費茨法則 (Fitts’ Law)

瞭解設計的法則是基礎

我曾經介紹過《設計的法則》這本書,其中已經談過〈需要的等級 (Hierarchy of Needs)〉和〈席克法則 (Hick’s Law)〉。

在〈需要的等級 (Hierarchy of Needs)〉提到,除了基本的 功能性需要 (Functionality)、可靠性需要 (Reliability)、使用性需要 (Usability) 之外,使用者還需要更多的 熟練度需要 (Proficiency)。

在〈席克法則 (Hick’s Law)〉則說道,當選項增加時,人們下決定的時間就會增加。

費茨法則

所以為了提高熟練度以縮短達成目的的時間,這裡還可以再加入一條設計法則:費茨法則 (Fitts’ Law)。

根據 費茨法則 說:

The smaller and more distant a target, the longer it will take to move to a resting position over the target.
目標越小、距離越遠,要達到目標定位點的時間就越長。

另外,

The faster the required movement and the smaller the target, the greater error rate due to a speed-accuracy tradeoff.
在速度與準確度的權衡下,移動速度越快 和 目標尺寸越小,則所引發的錯誤率越高。

費茨法則的例子

以下我舉兩個例子來說明。

首先,用 PC 版的網頁瀏覽器 IE-9 和 Firefox-12 作為範例。回顧感受一下你移動著滑鼠,要去關閉瀏覽器的這個動作,姑且稱之為「指向性動作 (Pointing Movement)」。

指向性動作 大概可以分成三大步驟:

一、彈道移動 (ballistic movements):快速地前往某特定目標的大動作。

二、瞄準動作 (homing movements):仔細調整的動作;

三、取得 (acquiring):到達目標定位點。

其中,花最多時間的是第二步驟 — 瞄準動作,因為使用者要「提高準確度以避免誤觸」。

下面 2 張圖是瀏覽器的右上角,左方是 IE-9,右方是 Firefox-12,三個控制鍵的排列一模一樣,由左至右:_ □ ╳。而 ╳ 緊貼著螢幕邊緣,目的是讓使用者在 瞄準 (homing) 的時候,可以因為邊緣阻擋了滑鼠移動而縮短瞄準時間。

ie-9-02      firefox-12-02

再舉一個例子。在 Windows 裡面的文件夾,大尺寸的比小尺寸的容易選取,這很容易理解。但換一種方式,以下圖自由排列的文件夾來看,就 費茨法則 來說,取得較小尺寸但距離較近的文件夾所必須的時間,等於取得較大尺寸但距離較遠的文件的時間。

fitts'-law-filesize

在設計上的應用

瞭解了 費茨法則 之後,作者最後提醒:

Make sure that controls are near or large, particular when rapid movements are required and accuracy is important.
在需要快速移動、準確性高的設計中,要確定把控制鍵放近一點或變大一點。

我正在研究中文手寫的 Mobile App 幾個控制鍵的位置與順序,例如:換筆觸、換顏色、回覆、切換鍵盤、完成… 等等,費茨法則 提供了部分的解答。

接下來還有其他的設計法則會陸續推出。這些法則對我有用,希望對你也有用。

 

發表迴響