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

      作者:木魚貓
      2010-03-05
      4556
      擺放位置

      只有表單E在測試中的表現(xiàn)最差。有6位用戶在使用這個表單并試圖完成任務(wù)時錯誤的按下了“Cancel”按鈕,并且有其他更多的用戶在這個按鈕上徘徊數(shù)次,直到他們意識到自己即將犯下一個錯誤。從整體上來看,完成表單E的時候用戶會比使用表單B之時慢大約整整6秒鐘(值得考慮的一點是這兩個表單之間的差別僅僅是按鈕擺放位置的不同而已)。同時,與視覺焦點數(shù)據(jù)的平均值相比,完成表單E需要的這個數(shù)值更高(以視覺焦點移動距離總和與平均視覺焦點移動距離進行比較)。

      一舉我們收集的數(shù)據(jù),表單A,B和C是最有效率的三個設(shè)計。這些設(shè)計原型擁有一個共同特征:所有的“Submit”與“Cancel”選項都是出現(xiàn)在頁面的最左側(cè)。這說明將這兩個選項進行左對齊是最好的設(shè)計選擇,尤其是當(dāng)其他表單控件也是左對齊的時候。將“Submit”與“Cancel”按鈕放置于左側(cè)意味著用戶的視覺焦點只需要更少的距離就能到達。

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

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

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

      總結(jié)

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

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

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

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

      0
      7
      分享到:

      0

      喜歡他,就推薦他上首頁吧^_^

      推薦閱讀

      ×

      賽事服務(wù)聯(lián)系方式

      0371-86068866

      4008887269

      cndesign@163.com

      好的,我知道了

      官方微信

      聯(lián)系我們

      • QQ:33143335 QQ:1904200230
      • 電話:18569912460
      • 投稿:cndesign@163.com
      • 地址:鄭州市國家大學(xué)科技園東區(qū)9號樓2層

      版權(quán)信息

        移動 Android 版 豫 ICP 備16038122號-2 豫公網(wǎng)安備 41019702002261號

      主站蜘蛛池模板: 黑人大战亚洲人精品一区| 国产丝袜视频一区二区三区| 亚洲一区二区三区偷拍女厕 | 日韩一区二区超清视频| 一区二区不卡视频在线观看| 国产欧美一区二区精品仙草咪| 国产AV午夜精品一区二区三| 国产成人AV区一区二区三| 久久精品一区二区三区不卡| 国产精品无码一区二区三区不卡 | 最美女人体内射精一区二区| 一区国产传媒国产精品| 国产精品乱码一区二区三区 | 无码精品人妻一区二区三区免费 | 日本不卡一区二区视频a| 一区二区三区免费在线观看| 国产视频一区在线播放| 精品国产一区二区三区在线| 99久久无码一区人妻a黑| 一区二区三区国产| 日韩精品无码一区二区三区AV | 一区二区三区免费视频网站| 国产一区二区三区播放心情潘金莲 | 午夜福利无码一区二区| 无码人妻一区二区三区在线视频 | 爆乳熟妇一区二区三区霸乳 | 精品视频一区二区三区四区| 国产成人无码一区二区在线观看| 国产伦一区二区三区高清| 亚洲国产精品成人一区| 国产精品成人国产乱一区| 国产一区二区精品| 蜜臀Av午夜一区二区三区| 精品国产一区二区三区不卡| 亚洲香蕉久久一区二区三区四区| 一区二区不卡在线| 日韩一区二区三区精品| 日本亚洲国产一区二区三区| 无码AV天堂一区二区三区| 亚洲精品精华液一区二区| 国产一区二区三区电影|