瞭解設計的法則是基礎
我曾經介紹過《設計的法則》這本書，其中已經談過〈需要的等級 (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) 的時候，可以因為邊緣阻擋了滑鼠移動而縮短瞄準時間。
再舉一個例子。在 Windows 裡面的文件夾，大尺寸的比小尺寸的容易選取，這很容易理解。但換一種方式，以下圖自由排列的文件夾來看，就 費茨法則 來說，取得較小尺寸但距離較近的文件夾所必須的時間，等於取得較大尺寸但距離較遠的文件的時間。
在設計上的應用
瞭解了 費茨法則 之後，作者最後提醒：
Make sure that controls are near or large, particular when rapid movements are required and accuracy is important.
在需要快速移動、準確性高的設計中，要確定把控制鍵放近一點或變大一點。
我正在研究中文手寫的 Mobile App 幾個控制鍵的位置與順序，例如：換筆觸、換顏色、回覆、切換鍵盤、完成… 等等，費茨法則 提供了部分的解答。
接下來還有其他的設計法則會陸續推出。這些法則對我有用，希望對你也有用。
