最近幾個(gè)月以來(lái)，我一直忙于在我的新書中通過(guò)實(shí)際測(cè)試數(shù)據(jù)來(lái)重寫設(shè)計(jì)建議，這本書名叫《網(wǎng)頁(yè)表單設(shè)計(jì)最佳練習(xí)》(Web Form Design Best Practices)。為完成這件事，我很榮幸的和倫敦的可用性專家Etre一起合作，并進(jìn)行了大量的專門針對(duì)網(wǎng)頁(yè)表單設(shè)計(jì)的眼動(dòng)實(shí)驗(yàn)和可用性研究。其中的一項(xiàng)測(cè)試便是研究主要行為與次要行為之間的差異化。

主要行為與次要行為

一個(gè)典型網(wǎng)頁(yè)表單通常包含數(shù)個(gè)“決定性”行為。例如“提交”“保存”或者“繼續(xù)”等行為，他們都是被用來(lái)“完成表單”，而“完成表單”則是任何用戶開始填寫表單之后的主要目標(biāo)。因?yàn)槟軌虮挥脕?lái)觸發(fā)表單中最重要的行為(完成表單)，所以他們常被歸為主要行為。

另一方便，次要行為的使用趨勢(shì)越來(lái)越少，同時(shí)大多數(shù)通常允許用戶撤銷已經(jīng)輸入的數(shù)據(jù)。例如“取消”“重置”或“返回”之類的選項(xiàng)，他們代表了與用戶填寫表單時(shí)的首要目標(biāo)剛好相反的次要行為。

由于次要行為包括否定結(jié)果，我過(guò)去常常和人們爭(zhēng)論說(shuō)他們應(yīng)該不應(yīng)該出現(xiàn)在表單中，尤其是他們常被用戶無(wú)意中使用。相像一下這樣的情景，你在填寫一個(gè)冗長(zhǎng)的在線表單的時(shí)候不小心點(diǎn)了“重置”按鈕，于是你輸入的所有數(shù)據(jù)都被抹掉了。

當(dāng)然某些情況下次要按鈕時(shí)也是有意義的，例如“暫存”“導(dǎo)出”等等。在這些條件下，我主張最好的方式是通過(guò)視覺樣式來(lái)區(qū)別主要和次要行為，這樣才能確保用戶可以找到一條清晰的路徑來(lái)完成自己的首要目標(biāo)：完成表單。

降低次要行為的視覺影響可以最小化出現(xiàn)潛在錯(cuò)誤的幾率，同時(shí)也能指引用戶更靠近成功的結(jié)果。但是如何才是實(shí)現(xiàn)這種目標(biāo)的最好方法?主要行為與次要行為應(yīng)該被放置于何處?他們之間到底需要有多大的差別?為了回答這些問題，Etre和我一起進(jìn)行了一些測(cè)試。

為了評(píng)估主要和次要行為的哪種表現(xiàn)方式的使用效果更好，我們共邀請(qǐng)了23位用戶，通過(guò)使用眼動(dòng)儀和可用性標(biāo)準(zhǔn)測(cè)試了6種不同的設(shè)計(jì)。我們按照隨機(jī)順序給參與者介紹了這6種不同的設(shè)計(jì)(隨機(jī)是為了最小化因相似性而引起的偏差)，同時(shí)告訴他們“請(qǐng)準(zhǔn)確并完整的完成這個(gè)表單”。

視覺差異

用戶使用其中五種設(shè)計(jì)的時(shí)候都完美的完成了任務(wù)。表單A,B,C,D和F的成功率都是100%，他們并未導(dǎo)致用戶出現(xiàn)任何錯(cuò)誤。這五個(gè)表達(dá)的完成時(shí)間相差都不大，同時(shí)也都收到了類似的較高滿意度評(píng)價(jià)。

表單B完成的最好。 使用這個(gè)表單時(shí)用戶的視覺焦點(diǎn)移動(dòng)距離較短并且停留次數(shù)較少。同時(shí)相對(duì)于其他表單，用戶使用表單B能更快更有效率的完成任務(wù)。

不過(guò)也有意外，一些用戶評(píng)論表單A時(shí)認(rèn)為將“Cancel”選項(xiàng)設(shè)計(jì)為鏈接的樣式挺有用。其中一位用戶提到說(shuō)，這個(gè)隱性的表現(xiàn)形式讓這個(gè)選項(xiàng)較難發(fā)現(xiàn)，同時(shí)也避免了意外性(和災(zāi)難性)取消的發(fā)生。另外一些用戶覺得“Submit”更重要一些，這是因?yàn)樗麄冋J(rèn)為在界面表現(xiàn)上“Cancel”沒有被給予平等的地位。

針對(duì)表單C中的灰色“Cancel”按鈕，一些用戶表達(dá)了積極的看法。一個(gè)測(cè)試者說(shuō)它的顏色讓人更容易識(shí)別出那些“正確的按鈕”(例如“Submit”)，然而另一部分用戶則認(rèn)為不同顏色的按鈕“減慢了你的速度(同時(shí))讓你核對(duì)自己是否正在點(diǎn)擊正確的按鈕”

有趣的是相對(duì)于完成表單B，同樣的用戶須要額外大約8次的視覺焦點(diǎn)停留來(lái)完成表單C;而表單B中的設(shè)計(jì)中，兩個(gè)選項(xiàng)都使用了顏色接近完全相同的綠色并且左對(duì)齊的按鈕。看起來(lái)是這樣，灰色讓表單C中的“Cancel”更容易識(shí)別，但卻導(dǎo)致用戶在使用這種設(shè)計(jì)的時(shí)候完成速度更慢一些。這表明，使用表單B之時(shí)，一些用戶表現(xiàn)出他們關(guān)心自己“可能很容易就點(diǎn)到錯(cuò)誤的按鈕”。

總的來(lái)說(shuō)，看起來(lái)用戶針對(duì)這種將“Cancel”以某種方式突出的設(shè)計(jì)的反饋還不錯(cuò)，即使這些設(shè)計(jì)在一定程度上減慢了他們的速度。這說(shuō)明相對(duì)于提交表單的速度，用戶更關(guān)注避免丟失自己輸入的數(shù)據(jù)。

擺放位置

只有表單E在測(cè)試中的表現(xiàn)最差。有6位用戶在使用這個(gè)表單并試圖完成任務(wù)時(shí)錯(cuò)誤的按下了“Cancel”按鈕，并且有其他更多的用戶在這個(gè)按鈕上徘徊數(shù)次，直到他們意識(shí)到自己即將犯下一個(gè)錯(cuò)誤。從整體上來(lái)看，完成表單E的時(shí)候用戶會(huì)比使用表單B之時(shí)慢大約整整6秒鐘(值得考慮的一點(diǎn)是這兩個(gè)表單之間的差別僅僅是按鈕擺放位置的不同而已)。同時(shí)，與視覺焦點(diǎn)數(shù)據(jù)的平均值相比，完成表單E需要的這個(gè)數(shù)值更高(以視覺焦點(diǎn)移動(dòng)距離總和與平均視覺焦點(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è)意味著用戶的視覺焦點(diǎn)只需要更少的距離就能到達(dá)。

就視覺焦點(diǎn)移動(dòng)來(lái)說(shuō)，用戶使用表單F時(shí)的效率是最低的。但所有的用戶使用這個(gè)表單卻都成功的完成了任務(wù)，我們的眼動(dòng)實(shí)驗(yàn)視覺表明用戶使用其他表單的時(shí)候比使用表單F更有效率。相比與其他表單，使用表單F時(shí)用戶的視覺焦點(diǎn)移動(dòng)距離最長(zhǎng)，同時(shí)用戶視覺焦點(diǎn)停留次數(shù)也最多。我們相信這是因?yàn)橛脩羝谕�這兩個(gè)按鈕應(yīng)該是左對(duì)齊的(例如直接出現(xiàn)在頁(yè)面最后一個(gè)表單的后邊)但卻發(fā)現(xiàn)此時(shí)并不是這樣，只能在周圍來(lái)搜尋他們。

這個(gè)查找路線圖很好的說(shuō)明了一個(gè)存在已久的表達(dá)設(shè)計(jì)原則：指示一條清晰的完成任務(wù)的路徑。以常見的垂直軸線對(duì)齊輸入控件和行為控件(這里指按鈕動(dòng)作等)可以很清晰的讓用戶看懂如何才能夠完成這個(gè)表單。這個(gè)原則可以通過(guò)下方的視覺熱區(qū)圖中以垂直軸線排列的用戶注視路徑發(fā)現(xiàn)。

(注釋：在這里以及其他測(cè)試中，有一個(gè)重要的方位前提條件就是“Submit”按鈕總處于“Cancel”按鈕的左側(cè))

總結(jié)

盡管大多數(shù)網(wǎng)頁(yè)表單設(shè)計(jì)的主要目標(biāo)是保證用戶能盡量快速并毫不費(fèi)力地完成表單，但在一些情況下減慢用戶的速度是明智的。當(dāng)用戶從主要行為與次要行為之間進(jìn)行選擇時(shí)，視覺差異化是個(gè)有助于用戶做出正確選擇的方法。

相比與表單C中按鈕的不同顏色，表單A中的按鈕與鏈接間的差異是否更明顯?就表單A在測(cè)試中的表現(xiàn)來(lái)說(shuō)，完成時(shí)間與視覺焦點(diǎn)停留數(shù)平均值更好一些，但視覺焦點(diǎn)總體移動(dòng)距離的平均值表明用戶完成表單時(shí)僅快了一點(diǎn)而已。

當(dāng)然，次要行為不存在的時(shí)候這些關(guān)于差異化的要求就變得毫無(wú)意義。確保你的表單上真的需要這個(gè)次要行為并且不要不加思考地隨意添加他們。

相反地，行為控件與表單輸入控件的對(duì)齊可以提供一個(gè)清晰的路徑來(lái)幫助用戶更快的完成表單。你必須了解將表單行為作為主要行為，并直接地與輸入控件對(duì)齊能夠提高表單的完成率同時(shí)也能減少用戶在你的表單上停留的時(shí)間，只有這樣用戶才會(huì)更高興。