SPARKFUL

Blog

Insights from the SPARKFUL teams

按鈕要多大?費茲定律告訴你

Wei-Fan Chenuser-interface-design
name

你知道為什麼 Microsoft Windows 的選單列放置在視窗上,而 Apple Mac OS X 的選單列放在螢幕的最上方嗎?你知道為什麼 Mozilla Firefox 瀏覽器左上角的「回到上一頁」和「到下一頁」兩個按鈕的大小不一樣嗎?其實費茲定律(Fitts' Law)都已經在許多使用者介面裡面偷偷運作了!

費茲定律(Fitts' Law)是心理學家 Paul Fitts 所提出的人機介面設計法則,主要定義了游標移動到目標之間的距離、目標物的大小和所花費的時間之間的關係。費茲定律目前廣泛應用在許多使用者介面設計上,以提高介面的使用性、操作度和效能。費茲定律長得就像下面這個公式:

其中 T 代表所花費的時間,a 是系統一定會花費的時間,b 是系統速率,D 代表啟始點到目標之間的距離,而 W 則是目標物平行於運動軌跡的長度。看起來一點都不討喜,對吧?我們可以用下圖來簡化一下費茲定律的意思:

用圖來解釋,就是當 D(啟始點到目標之間的距離)越長,使用者所花費的時間越多,而當 W(目標物平行於運動軌跡的長度)越長,則花費的時間越少,使用效能也比較好。

這跟 Mozilla Firefox 的「回到上一頁」按鈕的大小有什麼關係呢?這要從「回到上一頁」和「到下一頁」兩個按鈕的行為有什麼不同來進行分析。

一般而言,我們在點選回到上一頁按鈕的時候,都是正在瀏覽網站而想要回到剛剛看過的頁面,這時滑鼠位置通常都在瀏覽器的頁面內容上,要把滑鼠從頁面上移動到「回到上一頁」的按鈕的距離很長,而且我們不能確定使用者會從哪個位置開始移動。因此 Firefox 將「回到上一頁」的按鈕加大並設計成圓形,以因應來自不同角度的滑鼠操作。而「到下一頁」的按鈕,通常都是因為點選了「回到上一頁」而感到反悔,希望可以回到上一個頁面,此時滑鼠是從左往右移動一個小段的距離,角度和距離都可以控制,所以 Firefox 就設計了比較寬的按鈕了!

至於 Windows 和 Mac OS X 的選單位置的差別呢?Windows 將選單位置放置在視窗標題的下方,如果滑鼠要從視窗內移動到選單上,這個選單的上下間距是非常狹窄,所以比較不容易點選到正確的按鈕。而 Mac OS X 則將選單放到螢幕的正上方,由於滑鼠移動到螢幕邊界的時候,會被螢幕邊界限制而停下,因此可以將選單的高度(也就是費茲法則中的 W)視為無限大,所以使用者所花費的時間減少,效率也就提昇了。

果然惡魔住在細節裡,對吧!


Image via webtreats, CC License.

Wei-Fan Chen
Wei-Fan Chen
CEO / SPARKFUL and Fourdesire
Entrepreneur in entertainment and play for wellness / Author of Playable Design / Active indie game developer 🎉
divider
Related Posts
name

電影色彩學:這些經典電影如何運用「色彩」引導觀眾情緒

電影裡的弦外之音無論是電影、圖畫或任何形式的創作中,「色彩」都是非常基本且重要的元素。好的色彩運用可以讓人一眼看出創作者想表達的情緒。因此,如何恰當的運用色彩是一項相當重要的課題。平常在看電影的時候,除了關心劇情,也可以...Read more
name

藏於字句間的創作:產品中的在地化翻譯

產品辛苦開發了,但要吸引其他語言使用者的使用,並不是那麼簡單的一件事。即使產品已經在某個國家(例如台灣)有了足夠的使用者數量,也不是翻譯成日文,就會憑空冒出許多日本的使用者。網路是連結的,但社群不是許多人...Read more
name

The Visual Perception Principles of Gestalt Psychology

Special tendency occurs when our eyes and brain observe objects and perceive visual stimuli. The tendency usually helps us to identify objects faster, but sometimes it also causes the “illusion”. The main concept of Gestalt Psychology is “the whole is other than the sum of the parts”. For ex...Read more