費(fèi)茲定律Fitts’ Law與使用者界面設(shè)計(jì)

4 評(píng)論 6534 瀏覽 3 收藏 14 分鐘

之前在[HCI] 談人機(jī)介面設(shè)計(jì)與Usability 一文中提到了usability的概念,並用了Windows的開(kāi)始鈕說(shuō)明了在設(shè)計(jì)UI上容易忽略的陷阱。這篇文章我會(huì)繼續(xù)探討介面設(shè)計(jì)與usability,並以效率(Efficiency)與UI設(shè)計(jì)時(shí)最重要的定律之一費(fèi)茲定律(Fitts’-Law)為重點(diǎn)。

設(shè)計(jì)軟體的操作介面並不難,但很多時(shí)候直覺(jué)的設(shè)計(jì)並不一定能達(dá)成想像中的目的。這就是usability的研究想要了解的,到底什麼樣的設(shè)計(jì)才是「更好」的設(shè)計(jì)?什麼樣的設(shè)計(jì)其實(shí)只會(huì)讓usability變得更糟?

以menu bar為例,menu是圖形介面(GUI)的最基本元素之一,現(xiàn)代軟體功能越來(lái)越強(qiáng)大,包山包海的結(jié)果就是menu變得越來(lái)越多、越來(lái)越深,每一個(gè) menu展開(kāi)後幾乎都有sub-menu,甚至還有sub-sub-menu等等複雜的選單。我每次教我爸媽用電腦時(shí),都覺(jué)得Windows的menu根 本是設(shè)計(jì)來(lái)折磨使用者的,奇妙的是竟然很少聽(tīng)人在抱怨這介面很難用,而是紛紛強(qiáng)迫自己「學(xué)會(huì)」這種操作模式。

我想會(huì)看到這篇文章的讀者,早就很習(xí)慣於操作GUI了,也沒(méi)想過(guò)選單能有什麼好用或難用之別。所以先讓我們來(lái)想想要開(kāi)啟一個(gè)埋藏在sub-menu 裡的功能是多困難的工作(就假設(shè)是檔案/最近開(kāi)啟/某檔案.txt好了)。第一,把游標(biāo)移到menu bar的「檔案」上,並停住不動(dòng);第二,按下滑鼠左鍵打開(kāi)檔案選單,把游標(biāo)「垂直往下」移到「最近開(kāi)啟」上停住;第三,等sub-menu打開(kāi),把游標(biāo) 「水平往右」移進(jìn)sub-menu裡;第四,再度「垂直往下」找到某檔案.txt,在上面停住並按下左鍵。好,想像完畢後你可以試著用你的非慣用手操作滑 鼠做一次看看。

如果是已經(jīng)很熟悉GUI的使用者,想必都不覺(jué)得操作選單有什麼困難的,但當(dāng)你被迫用非慣用手操作時(shí),一定會(huì)感覺(jué)到操作速度大大的降低,甚至沒(méi)辦法精 準(zhǔn)控制游標(biāo)進(jìn)入sub-menu,這時(shí)我們才有機(jī)會(huì)體認(rèn)到操作滑鼠其實(shí)並不容易。除此之外,如果仔細(xì)觀察,還可以發(fā)現(xiàn)進(jìn)入sub-menu又比平常把游標(biāo) 移到任意地方還困難,因?yàn)楸仨毎延螛?biāo)保持在一條狹長(zhǎng)的「隧道」裡水平移動(dòng),如果在移動(dòng)時(shí)不小心移出了這條隧道,sub-menu就會(huì)關(guān)閉。

有個(gè)有趣的案例發(fā)生在一個(gè)著名的open source影像處理軟體GIMP上(可以說(shuō)是免費(fèi)版的photoshop)。當(dāng)初開(kāi)發(fā)GIMP的團(tuán)隊(duì)曾做過(guò)一個(gè)有趣的決定,他們決定拿掉固定在視窗頂端 的menu bar,並用可以在任何地方按右鍵打開(kāi)的context menu取代。因?yàn)閏ontext menu可以在任何地方打開(kāi),GIMP的開(kāi)發(fā)團(tuán)隊(duì)認(rèn)為這樣可以加快存取menu的速度。這個(gè)想法很直覺(jué),但真的對(duì)efficiency有幫助嗎?

既然我都說(shuō)了這麼多,答案當(dāng)然不會(huì)是yes。

context menu對(duì)efficiency並沒(méi)有幫助,反而使之變得更差。為什麼呢?

gimp2

如上圖,從第一層的選單要進(jìn)入第二層時(shí),必須先經(jīng)過(guò)第一層狹窄的隧道(紅色區(qū)域),才能進(jìn)入第二層選單。如果直接走直線路徑到想要按的目標(biāo),就會(huì)先 經(jīng)過(guò)第一層的其他項(xiàng)目,導(dǎo)致不同的sub-menu被打開(kāi)。傳統(tǒng)的menu bar也是有sub-menu,所以直覺(jué)上可能不會(huì)覺(jué)得多一層的sub-menu會(huì)有多大影響,但事實(shí)上是這種把游標(biāo)限制在一條隧道裡的設(shè)計(jì)大大的降低了 操作游標(biāo)的速度,和一般可以經(jīng)由任意路徑指到目標(biāo)的操作有指數(shù)級(jí)的速度差異。

Fitt在1954年提出了Fitt’s Law,可以說(shuō)是人機(jī)互動(dòng)領(lǐng)域的第一條「定律」,對(duì)人類指向任一目標(biāo)的動(dòng)作建立了一個(gè)數(shù)學(xué)模型?;镜母拍钍?,移到目標(biāo)上的時(shí)間(T)可以表示為目標(biāo)距離(D)與目標(biāo)大小(W)的函數(shù)。具體來(lái)說(shuō),T = a +b log2 (D/W+1),a和b都是一個(gè)常數(shù)。

Fitt’s Law告訴我們,移到任意目標(biāo)上的時(shí)間大約跟目標(biāo)距離除以目標(biāo)大小的對(duì)數(shù)成正比。也就是說(shuō),目標(biāo)越遠(yuǎn)移動(dòng)時(shí)間就越長(zhǎng),目標(biāo)越小時(shí)間也會(huì)越長(zhǎng);反之,目標(biāo)越 近或目標(biāo)越大的話,所需時(shí)間就越短。有趣的是,距離和目標(biāo)大小的影響並不算大,經(jīng)過(guò)log讓這兩個(gè)變數(shù)的影響降低了一個(gè)指數(shù)等級(jí)。例如距離變長(zhǎng)1000 倍,並不會(huì)讓時(shí)間也變成1000倍,而是變成log2 (1000),大約是10倍而已。

在軟體介面上,F(xiàn)itt’s Law有個(gè)特例值得討論一番。在電腦裡的滑鼠游標(biāo),有個(gè)基本特性是其活動(dòng)範(fàn)圍被限制在螢?zāi)谎e,只要游標(biāo)到了螢?zāi)贿吘?,無(wú)論再怎麼繼續(xù)往同一個(gè)方向移動(dòng)滑 鼠,游標(biāo)還是只能停留在邊緣上。這個(gè)特性讓UI設(shè)計(jì)有了戲劇性的變化,一個(gè)最有趣的例子是Windows和Mac OS X的menu bar設(shè)計(jì)。

Microsoft的Windows自古以來(lái)的UI設(shè)計(jì)都是把menu bar放在視窗的title bar下面,而Mac OS採(cǎi)取完全不同的設(shè)計(jì):把menu bar固定在螢?zāi)蛔铐敹恕R话闳舜蠖嘤X(jué)得這兩種設(shè)計(jì)只是習(xí)慣問(wèn)題,沒(méi)有什麼客觀差別,但如果你已經(jīng)學(xué)會(huì)了Fitt’s Law,你覺(jué)得哪一種設(shè)計(jì)比較好呢?

Mac OS X menu bar

Windows menu bar

如果直接套用Fitt’s Law,第一個(gè)得到的答案很可能會(huì)是Windows的設(shè)計(jì)比較好,因?yàn)楫?dāng)滑鼠從視窗內(nèi)移往menu bar時(shí),距離會(huì)比移到螢?zāi)豁敹诉€近。可是,別忘了考慮螢?zāi)贿吘壦斐傻挠绊?。Mac把menu bar放在螢?zāi)豁敹?,雖然距離變長(zhǎng)了,但目標(biāo)的大小也跟著變成了「無(wú)限大」。因?yàn)槲災(zāi)坏倪吘墪?huì)阻擋住游標(biāo)的行動(dòng),於是使用者可以盡情的把用力滑鼠往上一 甩,不用停下來(lái)「對(duì)準(zhǔn)」目標(biāo),也就等同於目標(biāo)的大小變成了無(wú)窮大。在Fitt’s Law中,當(dāng)W是無(wú)限大時(shí),整個(gè)log函數(shù)得到的結(jié)果會(huì)變成0,也就是說(shuō)T就會(huì)變成一個(gè)簡(jiǎn)單的常數(shù)值a,跟距離或大小都沒(méi)有關(guān)係了。

如此比較之下,我們就可以發(fā)現(xiàn)Mac把menu bar放到螢?zāi)豁敹耸怯衅溆靡庠诘?,因?yàn)樗蟠鬁p少了把滑鼠放進(jìn)menu bar並對(duì)準(zhǔn)目標(biāo)的時(shí)間,使用者只要把滑鼠用力往前一移,自然就會(huì)進(jìn)入menu bar裡面了。我在[HCI] 談人機(jī)介面設(shè)計(jì)與Usability 一文中也提過(guò)Windows開(kāi)始鈕的例子,跟menu bar的例子也是相同的道理。

到目前為止,我們已經(jīng)看過(guò)了三種形式的menu。對(duì)於efficiency而言,我們知道Mac的設(shè)計(jì)比Windows的設(shè)計(jì)還好,那如果和 GIMP的context menu比起來(lái)呢? 從Fitt’s Law可以得知,Mac的設(shè)計(jì)已經(jīng)達(dá)到極限了,無(wú)論如何也沒(méi)辦法捨去那個(gè)常數(shù)a,所以我們可以直接來(lái)比Windows的設(shè)計(jì)和GIMP的設(shè)計(jì)哪個(gè)比較差 XD。

前面提過(guò),sub-menu是一種很難的指向操作,除了要把游標(biāo)移到目標(biāo)上,還限制了中間經(jīng)過(guò)的路徑在一個(gè)隧道裡。在Fitt’s Law之後,Accot and Zhai提出了 Steering law 。 其結(jié)論非常簡(jiǎn)單,讓游標(biāo)經(jīng)過(guò)一個(gè)寬度W的隧道移動(dòng)距離D的時(shí)間 T = a + b * D / W。換句話說(shuō),把移動(dòng)路徑限制住的話,其移動(dòng)到目標(biāo)的時(shí)間和一般性移動(dòng)(Fitt’s Law)所需的時(shí)間是指數(shù)級(jí)的差距,這也就是為什麼電流急急棒可以變成一個(gè)有百萬(wàn)獎(jiǎng)金的挑戰(zhàn),而隨意動(dòng)動(dòng)滑鼠則簡(jiǎn)單的多。

了解了Steering law之後,再回來(lái)看sub-menu的設(shè)計(jì),你就會(huì)發(fā)現(xiàn)sub-menu是一個(gè)多不人道的設(shè)計(jì)。每一層的menu其實(shí)都是一個(gè)steering操作:垂 直的menu移動(dòng)比較簡(jiǎn)單,因?yàn)閙enu寬度通常都蠻寬的;但每當(dāng)要水平移動(dòng)進(jìn)入下一層sub-menu時(shí),就是一個(gè)困難的挑戰(zhàn),因?yàn)檫@時(shí)的寬度變成了 menu item的高度,通常也就是一個(gè)字母高而已。和Fitt’s Law不同的是,寬度(W)變小n倍,對(duì)時(shí)間的影響不再是對(duì)數(shù),而真的就是讓時(shí)間變長(zhǎng)n倍。所以說(shuō)呢,如果可以迅速又準(zhǔn)確進(jìn)入多層sub-menu的滑鼠 高手,其實(shí)也有參加電流急急棒比賽的能力呢!

回過(guò)頭來(lái)看Windows和GIMP的menu設(shè)計(jì),這時(shí)就可以明顯比較出來(lái)。GIMP把所有的選單操作全都變成了steering操 作,Windows雖然也有sub-menu的問(wèn)題,但至少第一層還是任意的指向操作,所以就efficiency來(lái)說(shuō),GIMP的設(shè)計(jì)其實(shí)是一大失 策..。

最後,再順便提兩個(gè)Windows和Mac OS X對(duì)於sub-menu造成的問(wèn)題所提供的解決方法。微軟和Apple都知道sub-menu很難操作,所以他們其實(shí)都有偷偷的在介面上做了一點(diǎn)貼心的設(shè) 計(jì)。微軟的方法是,在游標(biāo)要進(jìn)入sub-menu時(shí),如果不小心移出隧道外,只要在一定的時(shí)間內(nèi)移回來(lái),sub-menu就不會(huì)消失。這個(gè)方法其實(shí)有些風(fēng) 險(xiǎn),主要是因?yàn)檫@個(gè)「時(shí)間」很難掌控。如果這個(gè)設(shè)定的時(shí)間太短,那就沒(méi)多大效果;但如果設(shè)定太長(zhǎng),使用者如果是真的想要移到別的menu item打開(kāi)另一個(gè)sub-menu,就會(huì)覺(jué)得系統(tǒng)反應(yīng)太慢(就是那種頓頓的感覺(jué))。所以,微軟的這個(gè)方法其實(shí)並不是很有效的解決這問(wèn)題。

而Apple雖然也是用同樣的方法來(lái)sub-menu不要馬上消失,但他們又加上了一個(gè)聰明的設(shè)計(jì):sub-menu的延遲消失只有在游標(biāo)到 sub-menu的頂端和底端形成的三角形內(nèi)有效。換句話說(shuō),如果使用者是想進(jìn)入sub-menu中,他甚至可以直線移動(dòng)滑鼠進(jìn)入其中而不會(huì)意外打開(kāi)另一 個(gè)不同的sub-menu(只要在設(shè)定的延遲時(shí)間內(nèi)移動(dòng)完成)。而假如使用者是想打開(kāi)另一個(gè)sub menu,那直覺(jué)的把滑鼠往下移動(dòng)就會(huì)自然的避開(kāi)這個(gè)三角形區(qū)域而避免了「頓頓的」感覺(jué)。

Apple's solution for sub-menus

在UI設(shè)計(jì)上,Apple一向是比其他公司用心許多。這種聰明的設(shè)計(jì)雖然很小(甚至沒(méi)什麼人會(huì)注意到),但在每天反覆的使用中就能自然減少使用者的 挫折感和提昇操作的流暢度,這也是為什麼我常說(shuō)Mac有許多貼心的設(shè)計(jì),用起來(lái)會(huì)自然讓人感覺(jué)很愉快,而其他系統(tǒng)在UI設(shè)計(jì)上所下的功夫就明顯不足了。

源地址:http://blog.csdn.net/Like……/4660796.aspx

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 深入簡(jiǎn)出,很棒

    來(lái)自北京 回復(fù)
  2. 就是我想要的,終于找到了

    來(lái)自北京 回復(fù)
  3. 感謝博主分享,寫的真不錯(cuò)

    來(lái)自北京 回復(fù)
  4. 感謝博主分享

    來(lái)自北京 回復(fù)