擺放位置
只有表單E在測(cè)試中的表現(xiàn)最差。有6位用戶在使用這個(gè)表單并試圖完成任務(wù)時(shí)錯(cuò)誤的按下了“Cancel”按鈕，并且有其他更多的用戶在這個(gè)按鈕上徘徊數(shù)次，直到他們意識(shí)到自己即將犯下一個(gè)錯(cuò)誤。從整體上來看，完成表單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è)。這說明將這兩個(gè)選項(xiàng)進(jìn)行左對(duì)齊是最好的設(shè)計(jì)選擇，尤其是當(dāng)其他表單控件也是左對(duì)齊的時(shí)候。將“Submit”與“Cancel”按鈕放置于左側(cè)意味著用戶的視覺焦點(diǎn)只需要更少的距離就能到達(dá)。
就視覺焦點(diǎn)移動(dòng)來說，用戶使用表單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í)并不是這樣，只能在周圍來搜尋他們。
這個(gè)查找路線圖很好的說明了一個(gè)存在已久的表達(dá)設(shè)計(jì)原則：指示一條清晰的完成任務(wù)的路徑。以常見的垂直軸線對(duì)齊輸入控件和行為控件（這里指按鈕動(dòng)作等）可以很清晰的讓用戶看懂如何才能夠完成這個(gè)表單。這個(gè)原則可以通過下方的視覺熱區(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)來說，完成時(shí)間與視覺焦點(diǎn)停留數(shù)平均值更好一些，但視覺焦點(diǎn)總體移動(dòng)距離的平均值表明用戶完成表單時(shí)僅快了一點(diǎn)而已。
當(dāng)然，次要行為不存在的時(shí)候這些關(guān)于差異化的要求就變得毫無意義。確保你的表單上真的需要這個(gè)次要行為并且不要不加思考地隨意添加他們。
相反地，行為控件與表單輸入控件的對(duì)齊可以提供一個(gè)清晰的路徑來幫助用戶更快的完成表單。你必須了解將表單行為作為主要行為，并直接地與輸入控件對(duì)齊能夠提高表單的完成率同時(shí)也能減少用戶在你的表單上停留的時(shí)間，只有這樣用戶才會(huì)更高興。
譯文原文：網(wǎng)頁(yè)表單中的行為也分主次
本文鏈接：http://www.95time.cn/design/doc/2010/7409.asp 
出處：阿斯貓的兵工廠
責(zé)任編輯：bluehearts
上一頁(yè) 網(wǎng)頁(yè)表單中的行為也分主次 [2] 下一頁(yè)
|
第 1 頁(yè) 
第 3 頁(yè) 網(wǎng)頁(yè)表單中的行為也分主次 [3]
