Don't make users abandon in the first step!——談談網頁中的表單設計
電子商務網站都會遇到用戶常常在付款的最後一步放棄購買商品(abandon in the last step),也就是常說的“購物車丟棄(shopping cart abandonment)”。其實面對網絡上越來越多的註冊、登錄信息的輸入,用戶常常因為“Forms suck(厭煩填表)”而放棄使用該網站。
我想目前大概沒有幾家網站不需要用戶註冊或是確認信息的吧。表單設計雖然看似簡單,卻是“見證”用戶體驗“功力”的地方。 “HTML權威指南”對錶單有如下描述:“輸入要素應該被有邏輯地組織,這樣大腦才能根據表格的佈局理解和處理相關領域的信息。”這麼說來,看似沒有技術含量的表單,如何能夠引導用戶,如何使大腦快速捕捉理解處理信息……..裡面的學問很值得研究。
表格佈局
《Web Form Design:Filling In the Blanks》一書中寫到:研究發現:眼球跟踪儀成像熱點地圖主要位於左側。
填表的時間需要盡量壓縮,收集所需的信息也是用戶熟悉的時候(例如:名字,地址,結賬流程中的支付信息),垂直佈局的標籤和輸入框效果最好(如下圖) 。每個標籤和輸入框連接緊密,佈局的連貫性也減少視覺移動和處理時間。用戶僅需要朝一個方向移動,那就是——向下。
標籤(label)放在上面的優勢在標籤與輸入框相鄰,用戶快速進行填表。缺點在於增加垂直空間。
在佈局上,最好標籤採用粗體。這增加了用戶的視覺重量,並讓標籤更醒目。如果不加粗,標籤還要和輸入框PK,在用戶看來他們的視覺重量差不多。
如果表單裡面有用戶不熟悉的信息,或者不容易處理的類型(比如地址所包含的各類信息),放在輸入框左側,左對齊的標籤欄讓用戶掃視信息更容易。用戶僅需要上下掃視至於左側的標籤欄就可以了,不會被輸入框打斷。然而,標籤和輸入框之間的距離也會延長用戶找尋時間。用戶不得不在輸入框和標籤間“跳來跳去”來找尋其中的聯繫。
標籤(label)放在左側的優勢在標籤與輸入框相鄰,減小垂直空間。劣勢在於表格可讀性降低。
右對齊的標籤欄和輸入框的關係相對清晰些(如下圖)。然而,降低了掃描表格相關信息的效率。我們的習慣是從左至右閱讀,眼睛喜歡左對齊的閱讀。
使用視覺要素
由於左對齊水平標籤有很多優勢(容易掃描輸入標籤,減少縱向屏幕空間)。盡量修正它的缺陷:輸入框和相關標籤看上去不連貫。
一種方法是增添背景色和線條(如下圖所示):
不同的背景色區分標籤和輸入框;水平線將相關標籤和輸入框聯繫在一起。雖然這些看起來很不錯,但是它也會產生很多問題。
無論是中線,背景還是水平線都會分散用戶的視線,使他們不容易專注重要的信息:標籤和輸入框。正如視覺大師Edward Tufte所說:“信息表達出的差異產生理解差異。”也就是說,無助於佈局的視覺要素是無意義的。可以想像(如下圖所示),當你掃視左側一欄的時候,眼睛要不斷被水平線和背景色所打斷。
誠然,也不是說背景色和線條永遠不會用在表單設計中。當指出對用戶有用的相關信息的時候,細線和淡淡的背景色可以有效地區分相關信息。無論是線條還是背景色都可以強調重要性並引導用戶產生交互行為。
首要&次要行為
首要行為按鈕,比如“提交”,“保存”需要採用較重的視覺元素表示(比如高亮的顏色,加粗的字體,加入背景色等等)。來啟發引導用戶完成表單。
當表單含有多種交互行為的時候,比如“繼續”和“返回”,最好減少視覺重量,讓這些要素處於次要地位。這樣減少用戶發生潛在操作錯誤的風險,也可以更好地導航用戶完成操作。
儘管以上原則有助於設計表單,但真正表單內容設計的好壞,最好還要通過用戶測試或是數據分析(完成率,出錯率等等)。
那麼標籤的位置,可以得出以下結論:
1.為了縮短時間或2.用戶對所需內容輸入比較熟悉的時候,採用標籤頂部對齊的形式
當垂直空間有限制時,採用標籤右側對齊方式
對不不熟悉的內容輸入或者需要強化的進入信息的時候,採用標籤左側對齊方式
參考文獻:http://www.lukew.com/resources/articles/web_forms.html
來源:http:// www.zhangyq.com/don-t-make-users-abandon-in-the-first-step-page-form-design/
特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy