費茲定律fitts’ law之意涵與設計實務運用

Chun-Chuan Lin
Apr 23, 2016 · 5 min read

為什麼windows工作列會在下方(或是自訂為上方、左右其他桌面邊界)?為什麼開始按鈕和顯示桌面按鈕會放在角落?

你是否曾想過我們習以為常的軟體,功能位置編排或尺寸大小為何如此設計?其實這一切都與費茲定律(Fitts' Law)有關。

費茲定律(Fitts' Law)是介面設計中常用的概念,以增加介面使用性與操作效率。其概念為起始點(滑鼠游標)與目標物(按鈕或其他操控物件)之間的距離和目標物的大小,決定了從起始點移動到目標所花費的時間。公式如下:

圖片來源:維基百科

設計師只要知道游標與目標物距離D,及目標物與游標的垂直寬度W與操作速率有關即可。而座落在螢幕邊端的目標,因為滑鼠移動至低時,會停在邊界,可視為目標物的寬度無限大,亦即操作速率最快。

圖片來源:維基百科

簡言之,費茲定律三個重要意涵分別為:

  1. 目標物要有合適的大小
  2. 游標最容易到達螢幕的邊緣和角落, 所以適合放重要的按鈕和選單
  3. 游標旁的彈跳選單比螢幕上方的下拉式選單能更快開啟

Windows/Mac OS系統設計

Win7開始,顯示桌面鍵放在最右下角,另外縮小、還原、關閉視窗的按鍵在右上角,都是因為這些按鈕經常使用,也相當重要,
為了使用者方便,滑鼠一移,就很容易對準到目標。另外從Office 2007開始,也將重要的Office操作按鈕放在最左上角,此外還有儲存鍵、復原和取消復原鍵,有別以往最左上角只會是視窗title bar,讓使用者更快對準點選。不過所有的微軟視窗就是有這樣的缺點,視窗最上面會是title bar,要下面一點才是功能列,不像Mac系統,最上方就是功能列,所以使用者可以很方便快速的操作。另外,微軟和Mac的工具列皆放在最下方,也是因為讓使用者能快速選取。

最上方為windows Photoshop CS2版本,一般windows最上方為title bar接下來則是工具列。第二張為Windows Photoshop CC 功能列移至最上方。最後一張為Mac版本,Mac無論任何軟體,視窗最大化或一般大小,工具列一律在最上方。

Windows 浮動選單

滑鼠右鍵選單也是費茲定律的體現。另外,從Office Word 2007開始,也有其它依循費茲定律所做的改善,像是當反白字體時,滑鼠移到反白字體上,就會在上面浮現字體工具列,使用者可以很快速地改變字體顏色、字級、字體等。而Office Word 2007的功能按鈕加上圖示之後,也跟著變大,讓使用者更好瞄準選。

Win10 Start Menu

筆者之前因為工作的關係,參與到Windows 10的usability review,preview版本一開始的start menu最上方的資訊為使用者資訊,在右側緊接著關機/重啟/登出的功能。從費茲定律的角度看這樣的設計,其實是不建議的,關機是使用者常使用的功能,當使用者將游標滑至左下角,按下開始,開始功能選單出現後,需上移許多距離才能瞄準到關機,比起Windows7關機為選單最底的選項,滑動距離增加許多,也降低使用效率。

Windows 10一開始會如此設計,其實跟資訊分類有關,本來登出等相關功能會放在使用者資訊附近是正常的,再加上windows 10能跨平台運行,以觸控的觀點來看,關機/登出放在使用者資訊旁是合理的。不過筆者相信,Windows系統的使用者,多數應該以productivity為主的桌電筆電,會接滑鼠使用,所以權衡之下,直接放在開始上方,是較佳的設計。

左圖為Windows 10 Technical Preview版,關機在Username右邊。右圖為正式版,電源在開始上方不遠處,滑鼠移動距離近。

Chrome browser

為什麼chrome比IE用起來順手?其實也和費茲定律有關,chrome視窗最大化後,其各分頁tab是在營幕邊界,滑鼠游標可以迅速上移頂到螢幕邊界停下,使用效率增高。而IE上方為視窗的Title Bar,往下一層才是tab,所以滑鼠去瞄準,較為花費心力。

Firefox和Chrome分頁Tab皆在螢幕邊界,僅有IE往下退一排置標題列於下方

結論

費茲定律的意涵,按鈕等操作控件需依功能重要性與使用頻率,應有適當的大小,並配置在適當畫面位置上:角落放最重要的功能,其次為邊界,而在滑鼠附近popup的選單也能幫助使用者可快速完成任務。讀者下次使用電腦軟體時,可以再多多觀察哪些地方運用的費茲定律,想必會有不同體悟,理解設計的用心。

Chun-Chuan Lin

Written by

Interaction designer. Be.net/designlcc designlcc@gmail.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade