網(wǎng)頁(yè)表單中的行為也分主次

譯文:
最近幾個(gè)月以來(lái),我一直忙于在我的新書(shū)中通過(guò)實(shí)際測(cè)試數(shù)據(jù)來(lái)重寫(xiě)設(shè)計(jì)建議,這本書(shū)名叫《網(wǎng)頁(yè)表單設(shè)計(jì)最佳練習(xí)》。為完成這件事,我很榮幸的和倫敦的可用性專(zhuān)家Etre一起合作,并進(jìn)行了大量的專(zhuān)門(mén)針對(duì)網(wǎng)頁(yè)表單設(shè)計(jì)的眼動(dòng)實(shí)驗(yàn)和可用性研究。其中的一項(xiàng)測(cè)試便是研究主要行為與次要行為之間的差異化。
主要行為與次要行為
一個(gè)典型網(wǎng)頁(yè)表單通常包含數(shù)個(gè)“決定性”行為。例如“提交”“保存”或者“繼續(xù)”等行為,他們都是被用來(lái)“完成表單”,而“完成表單”則是任何用戶(hù) 開(kāi)始填寫(xiě)表單之后的主要目標(biāo)。因?yàn)槟軌虮挥脕?lái)觸發(fā)表單中最重要的行為(完成表單),所以他們常被歸為主要行為。
另一方便,次要行為的使用趨勢(shì)越來(lái)越少,同時(shí)大多數(shù)通常允許用戶(hù)撤銷(xiāo)已經(jīng)輸入的數(shù)據(jù)。例如“取消”“重置”或“返回”之類(lèi)的選項(xiàng),他們代表了與用戶(hù) 填寫(xiě)表單時(shí)的首要目標(biāo)剛好相反的次要行為。
由于次要行為包括否定結(jié)果,我過(guò)去常常和人們爭(zhēng)論說(shuō)他們應(yīng)該不應(yīng)該出現(xiàn)在表單中,尤其是他們常被用戶(hù)無(wú)意中使用。相像一下這樣的情景,你在填寫(xiě)一個(gè) 冗長(zhǎng)的在線表單的時(shí)候不小心點(diǎn)了“重置”按鈕,于是你輸入的所有數(shù)據(jù)都被抹掉了。
當(dāng)然某些情況下次要按鈕時(shí)也是有意義的,例如“暫存”“導(dǎo)出”等等。在這些條件下,我主張最好的方式是通過(guò)視覺(jué)樣式來(lái)區(qū)別主要和次要行為,這樣才能 確保用戶(hù)可以找到一條清晰的路徑來(lái)完成自己的首要目標(biāo):完成表單。
降低次要行為的視覺(jué)影響可以最小化出現(xiàn)潛在錯(cuò)誤的幾率,同時(shí)也能指引用戶(hù)更靠近成功的結(jié)果。但是如何才是實(shí)現(xiàn)這種目標(biāo)的最好方法?主要行為與次要行 為應(yīng)該被放置于何處?他們之間到底需要有多大的差別?為了回答這些問(wèn)題,Etre和我一起進(jìn)行了一些測(cè)試。
為了評(píng)估主要和次要行為的哪種表現(xiàn)方式的使用效果更好,我們共邀請(qǐng)了23位用戶(hù),通過(guò)使用眼動(dòng)儀和可用性標(biāo)準(zhǔn)測(cè)試了6種不同的設(shè)計(jì)。我們按照隨機(jī)順 序給參與者介紹了這6種不同的設(shè)計(jì)(隨機(jī)是為了最小化因相似性而引起的偏差),同時(shí)告訴他們“請(qǐng)準(zhǔn)確并完整的完成這個(gè)表單”。
視覺(jué)差異
用戶(hù)使用其中五種設(shè)計(jì)的時(shí)候都完美的完成了任務(wù)。表單A,B,C,D和F的成功率都是100%,他們并未導(dǎo)致用戶(hù)出現(xiàn)任何錯(cuò)誤。這五個(gè)表達(dá)的完成時(shí) 間相差都不大,同時(shí)也都收到了類(lèi)似的較高滿意度評(píng)價(jià)。
表單B完成的最好。 使用這個(gè)表單時(shí)用戶(hù)的視覺(jué)焦點(diǎn)移動(dòng)距離較短并且停留次數(shù)較少。同時(shí)相對(duì)于其他表單,用戶(hù)使用表單B能更快更有效率的完成任務(wù)。
不過(guò)也有意外,一些用戶(hù)評(píng)論表單A時(shí)認(rèn)為將“Cancel”選項(xiàng)設(shè)計(jì)為鏈接的樣式挺有用。其中一位用戶(hù)提到說(shuō),這個(gè)隱性的表現(xiàn)形式讓這個(gè)選項(xiàng)較難發(fā) 現(xiàn),同時(shí)也避免了意外性(和災(zāi)難性)取消的發(fā)生。另外一些用戶(hù)覺(jué)得“Submit”更重要一些,這是因?yàn)樗麄冋J(rèn)為在界面表現(xiàn)上“Cancel”沒(méi)有被給予 平等的地位。
針對(duì)表單C中的灰色“Cancel”按鈕,一些用戶(hù)表達(dá)了積極的看法。一個(gè)測(cè)試者說(shuō)它的顏色讓人更容易識(shí)別出那些“正確的按鈕”(例如 “Submit”),然而另一部分用戶(hù)則認(rèn)為不同顏色的按鈕“減慢了你的速度(同時(shí))讓你核對(duì)自己是否正在點(diǎn)擊正確的按鈕”
有趣的是相對(duì)于完成表單B,同樣的用戶(hù)須要額外大約8次的視覺(jué)焦點(diǎn)停留來(lái)完成表單C;而表單B中的設(shè)計(jì)中,兩個(gè)選項(xiàng)都使用了顏色接近完全相同的綠色 并且左對(duì)齊的按鈕??雌饋?lái)是這樣,灰色讓表單C中的“Cancel”更容易識(shí)別,但卻導(dǎo)致用戶(hù)在使用這種設(shè)計(jì)的時(shí)候完成速度更慢一些。這表明,使用表單B 之時(shí),一些用戶(hù)表現(xiàn)出他們關(guān)心自己“可能很容易就點(diǎn)到錯(cuò)誤的按鈕”。
總的來(lái)說(shuō),看起來(lái)用戶(hù)針對(duì)這種將“Cancel”以某種方式突出的設(shè)計(jì)的反饋還不錯(cuò),即使這些設(shè)計(jì)在一定程度上減慢了他們的速度。這說(shuō)明相對(duì)于提交 表單的速度,用戶(hù)更關(guān)注避免丟失自己輸入的數(shù)據(jù)。
擺放位置
只有表單E在測(cè)試中的表現(xiàn)最差。有6位用戶(hù)在使用這個(gè)表單并試圖完成任務(wù)時(shí)錯(cuò)誤的按下了“Cancel”按鈕,并且有其他更多的用戶(hù)在這個(gè)按鈕上徘 徊數(shù)次,直到他們意識(shí)到自己即將犯下一個(gè)錯(cuò)誤。從整體上來(lái)看,完成表單E的時(shí)候用戶(hù)會(huì)比使用表單B之時(shí)慢大約整整6秒鐘(值得考慮的一點(diǎn)是這兩個(gè)表單之間 的差別僅僅是按鈕擺放位置的不同而已)。同時(shí),與視覺(jué)焦點(diǎn)數(shù)據(jù)的平均值相比,完成表單E需要的這個(gè)數(shù)值更高(以視覺(jué)焦點(diǎn)移動(dòng)距離總和與平均視覺(jué)焦點(diǎn)移動(dòng)距 離進(jìn)行比較)。
一舉我們收集的數(shù)據(jù),表單A,B和C是最有效率的三個(gè)設(shè)計(jì)。這些設(shè)計(jì)原型擁有一個(gè)共同特征:所有的“Submit”與“Cancel”選項(xiàng)都是出現(xiàn) 在頁(yè)面的最左側(cè)。這說(shuō)明將這兩個(gè)選項(xiàng)進(jìn)行左對(duì)齊是最好的設(shè)計(jì)選擇,尤其是當(dāng)其他表單控件也是左對(duì)齊的時(shí)候。將“Submit”與“Cancel”按鈕放置 于左側(cè)意味著用戶(hù)的視覺(jué)焦點(diǎn)只需要更少的距離就能到達(dá)。
就視覺(jué)焦點(diǎn)移動(dòng)來(lái)說(shuō),用戶(hù)使用表單F時(shí)的效率是最低的。但所有的用戶(hù)使用這個(gè)表單卻都成功的完成了任務(wù),我們的眼動(dòng)實(shí)驗(yàn)視覺(jué)表明用戶(hù)使用其他表單的 時(shí)候比使用表單F更有效率。相比與其他表單,使用表單F時(shí)用戶(hù)的視覺(jué)焦點(diǎn)移動(dòng)距離最長(zhǎng),同時(shí)用戶(hù)視覺(jué)焦點(diǎn)停留次數(shù)也最多。我們相信這是因?yàn)橛脩?hù)期望這兩個(gè) 按鈕應(yīng)該是左對(duì)齊的(例如直接出現(xiàn)在頁(yè)面最后一個(gè)表單的后邊)但卻發(fā)現(xiàn)此時(shí)并不是這樣,只能在周?chē)鷣?lái)搜尋他們。
這個(gè)查找路線圖很好的說(shuō)明了一個(gè)存在已久的表達(dá)設(shè)計(jì)原則:指示一條清晰的完成任務(wù)的路徑。以常見(jiàn)的垂直軸線對(duì)齊輸入控件和行為控件(這里指按鈕動(dòng)作 等)可以很清晰的讓用戶(hù)看懂如何才能夠完成這個(gè)表單。這個(gè)原則可以通過(guò)下方的視覺(jué)熱區(qū)圖中以垂直軸線排列的用戶(hù)注視路徑發(fā)現(xiàn)。
(注釋?zhuān)涸谶@里以及其他測(cè)試中,有一個(gè)重要的方位前提條件就是“Submit”按鈕總處于“Cancel”按鈕的左側(cè))
總結(jié)
盡管大多數(shù)網(wǎng)頁(yè)表單設(shè)計(jì)的主要目標(biāo)是保證用戶(hù)能盡量快速并毫不費(fèi)力地完成表單,但在一些情況下減慢用戶(hù)的速度是明智的。當(dāng)用戶(hù)從主要行為與次要行為 之間進(jìn)行選擇時(shí),視覺(jué)差異化是個(gè)有助于用戶(hù)做出正確選擇的方法。
相比與表單C中按鈕的不同顏色,表單A中的按鈕與鏈接間的差異是否更明顯?就表單A在測(cè)試中的表現(xiàn)來(lái)說(shuō),完成時(shí)間與視覺(jué)焦點(diǎn)停留數(shù)平均值更好一些, 但視覺(jué)焦點(diǎn)總體移動(dòng)距離的平均值表明用戶(hù)完成表單時(shí)僅快了一點(diǎn)而已。
當(dāng)然,次要行為不存在的時(shí)候這些關(guān)于差異化的要求就變得毫無(wú)意義。確保你的表單上真的需要這個(gè)次要行為并且不要不加思考地隨意添加他們。
相反地,行為控件與表單輸入控件的對(duì)齊可以提供一個(gè)清晰的路徑來(lái)幫助用戶(hù)更快的完成表單。你必須了解將表單行為作為主要行為,并直接地與輸入控件對(duì) 齊能夠提高表單的完成率同時(shí)也能減少用戶(hù)在你的表單上停留的時(shí)間,只有這樣用戶(hù)才會(huì)更高興。
作者介紹:Luke Wroblewski,目前在Yahoo!擔(dān)任首席設(shè)計(jì)師(Chief Design Architect),主要進(jìn)行互聯(lián)網(wǎng)、移動(dòng)設(shè)備、電視等等產(chǎn)品線及前瞻性的客戶(hù)體驗(yàn)整合。在這之前他曾是eBay公司平臺(tái)組的用戶(hù)界面設(shè)計(jì)領(lǐng)導(dǎo)者。他同 時(shí)也是兩本知名網(wǎng)頁(yè)設(shè)計(jì)書(shū)籍的作者(Web Form Design 和?Site-Seeing: A Visual Approach to Web Usability)。
版權(quán)聲明:譯文轉(zhuǎn)載請(qǐng)注明來(lái)自阿 斯貓的兵工廠
原文地址:Primary & Secondary Actions in Web Forms
來(lái)源:http://www.arscat.com/201……in-web-forms/
- 目前還沒(méi)評(píng)論,等你發(fā)揮!