UX的定律第一集-Fitts法則

KW
AAPD — As A Product Designer
8 min readJan 24, 2018

說到UX,我該從哪裡開始學呢?

UX所包含的東西真的很廣,從使用者的心理、資訊架構設計、產品易用性、到美學甚至文案,都是UX的範疇。而其中又跨足了許多專業,或許聽起來很遙遠,但很多時候我們平常在想的東西就已經是UX的範疇了,有時候把UX兩個字特別拿出來說,或許會害我們更不了解UX。

而對於UI設計介面的角度,也包含了很多UX的思考,例如該選用哪些顏色?按鈕大小該如何設計?該如何擺放位置?除了經驗使然外,其中很大一部分與心理學有關,色彩心理學、Fitt法則、Gestalt法則等一些概念,如果稍微去了解的話會,會發現能更以自己的觀點去判斷這些資訊為什麼這樣放、ios guideline為什麼這樣定,甚至能做出更好的決定。

而我在查詢相關資訊時意外發現了這個有可愛海報的網站~上面結集了許多心理學法則且可以應用在UI/UX上,所以就想說也認真的來了解一下這些法則的原理與應用、也當作是自己的練習筆記。

希望能每天一篇來當作自己認真寫文章的挑戰(希望拉),廢話不多說就開始第一集吧:

Fitts’s Law

The time to acquire a target is a function of the distance to and size of the target.

1954年,心理學家保羅·費茨(Paul Fitts)研究人體運動系統,發現移動到目標所需的時間取決於距離,且與其大小成反比。根據他的研究,快速移動和小目標會產生速度精確的折衷,導致更大的錯誤率。該法則較適用於指向性的運動,例如物理上手指(或其他部位)觸摸物體、視線的注視、或是輸入設備ex.滑鼠指向目標…等。

原始模型以及定義

Paul Fitts在最初的1954年的論文提出了一個量化目標選擇任務難度的度量,其中與D是與任務目標的距離,W則是目標的容限或寬度,ID指的是是難度指數:

Fitts還提出了一個性能指標IP(以每秒位數為單位),來衡量人的表現。該度量標準將任務的難度ID指標與選擇目標時的移動時間MT相結合:

Fitts之後的研究人員開始建立線性回歸方程的實踐,該等式表示MT也就是選擇目標的移動時間,與D和W任務參數之間的關係:

MT:完成移動的平均時間。

a和b:取決於輸入設備選擇的常數,並且通常通過回歸分析經驗地確定。

ID:難度指標。

D:從起點到目標中心的距離。

W:沿著運動軸測量的目標的寬度,也可認為是在最終位置的誤差容限度。

這就是大概的原型了,雖然後來還許多變形,但大概的意思就是可以透過與目標之間的距離和目標寬度來量化這個任務的困難度。

注:由於ID術語僅取決於比值距離與寬度,有些其他因素還是會去影響完成目標的難度,儘管存在缺陷,但這個原則確實在計算機界面和運動任務中具有顯著的預測能力,並且提供了許多界面設計原理的見解。

雖然Fitts定理直到1978年由Card, English, and Burr申請後,才開始應用在一些輸入設備(滑鼠或鍵盤等)的性能指標上。但現在,Fitts定理已經在人機交互(HCI)領域的一個重要組成部分,已成為行業內最為公認的指導方針之一。

而該法則特別應用在視覺介面設計或是任何指示(滑鼠或是手指)動作上,根據上下文或重要程度來用來評估元件合適的大小,並提出潛在的可用性問題。

設計的應用

然而我們要怎麼把Fitts定理應用在介面設計思考呢?

除了思考元件大小的配置外、我把在網頁上的目標任務,當作是從A按鈕到B按鈕的這個過程。而當這個流程使用的時間越少、代表這個任務的困難度越低,效率越高,使用者體驗當然也會大幅增加。

而要怎麼去減少使用者按按鈕的時間呢?簡單來說就是試著清楚的告訴他們:

『對!下一步就是按那裡!按下去!』

當我們在網頁上想要引導使用者時,有個概念是先找出所謂的Prime Pixel,什麼是Prime Pixel呢?他是一個可以得知游標當前所在的參考點。

例如在桌面是我們就經常利用這個概念:在桌面中點擊滑鼠右鍵,會彈出一個選單,其起點位置就是所謂的Prime Pixel。

讓你看看我可愛的桌面

但問題是,我們要怎麼知道使用者在瀏覽每個網頁時的Prime Pixel在哪裡呢?當然我們不能去控制使用者的滑鼠位置,所以這時候,我們就可以來考慮這個網站的目的性,或是去用視覺引導的方式,來預測使用者第一個會點擊的地方在哪裡。

以Google首頁來說:

google將搜尋框放置在螢幕正的中間

螢幕的中間會是個很好的選擇,因為使用者在進入頁面時最會注意到的位置就是正中央(若沒有其他視覺干擾的狀況下)。所以Google將搜尋框放置在螢幕正中間,Prime Pixel就會是在中間的位置。

或是以Dropbox Business的Landing Page進入畫面來說:

清楚而明顯的Call to Action Button“免費使用30天”

運用文字以及視覺的引導下,清楚的讓使用者知道這個網站主要希望使用者做的目標為何,所以當使用者點擊第一個按鈕時,我們就能在之後連續的頁面中去預測使用者的游標會在哪裡,進而去做下一個步驟的按鈕配置,來減少使用者的移動時間。

而這樣的概念也常常應用在表單提交或是連續流程上,只要把下一步驟的按鈕放置在使用者游標位置附近,就能減少使用者的尋找點擊時間,進而達到提高完成任務的效率。

另外一個比較特別的概念,是所謂的Magic Pixel(別問我,我也不懂為什麼叫這個名字),他指的是在螢幕的四個角落,照理說,螢幕角落是離使用者視線最遠的地方,所以通常不會在我們擺放按鈕的考慮中。

但是基於螢幕的限制,我們的滑鼠移到邊緣後便會被固定住不能再繼續移動,而這產生了極大的價值:”使用者可以更精確的點到角落的按鈕!!”

一個簡單的例子:你會發現點擊關閉的動作是如此的簡單快速。而利用這個特性,或許在使用者想要關閉該網頁前,你還能做一個最後的掙扎(?),顯示一些使用者可能會需要的資訊或按鈕來阻止他們關閉網頁,進而降低網頁的跳出率,所以角落的價值是不應該被低估的!

而在按鈕上的群組分類與Fitts也是稍微有關係,相關的任務按鈕應該擺放在相鄰的區域,而較為不相關的任務應該要擺放在更遠的地方,這樣就可以去有效控制使用者在此頁面的操作進行有效的時間預測與優化控制,提高可用性。

結論

最後,Fitts法則也不應該被單獨使用。如果認識更多設計法則,例如Hick’s法則、Jakob’s法則或一些視覺層級法則一起使用,就可以創造更大的效果。對於設計師來說,懂這些法則可以提高設計意識,並改善決策。在規劃網站或重新設計時,向別人解釋時使用Fitts法則來捍衛你的一些決策、或者提出建議來重新定位某些界面元素是非常有效的。

『根據心理學家Fitts提出的法則,所以我做出了這個設計….』

看!聽起來多麼有說服力啊!而且相信看到這些改變是有效且有數據上的回饋後,客戶或是上司就會更相信你。GOGOGO~

討論區

在思考網頁如何設計的同時,現在的移動裝置使用率也越來越高,有些網頁甚至只做了手機版。而當手機螢幕並沒有游標,所以在Fitts法則慨念應用上可能會有些不一樣?哪裡會不一樣?如手機右上角或是左上角的關閉按鈕或是反回,是源於網頁上的使用習慣,還是有其他原因?

而且屏幕方向、持握方式,也是移動設備的用戶體驗必須仔細研究的地方。我相信Fitts法則在移動設備中依然有效,但是要受到這兩點或更多其他的限制,情況更加複雜,哪些是需要再探討的元素呢?

謝謝你的閱讀!如果你對這個議題也有興趣的話,歡迎找我一起來討論~如果發現我寫的內容有錯誤或是需要更正的地方,也歡迎告訴我、給我更好的意見噢。下集見:)

--

--