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

你知道為什麼 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)視為無限大,所以使用者所花費的時間減少,效率也就提昇了。

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

 

 

 

資料來源 : desiring

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s