如何提升表單設計的微指引?
在To B的應用程式中,表單是最常見的元素之一,因此要想提升使用者體驗,應該高度重視使用者體驗設計技巧,精心的表單設計可以對使用者體驗和互動效率提升產生很大的積極的影響。
我們在做表單設計的時候,一方面希望我們的表單可以對使用者有引導,可以針對使用者的操作作出適當的迴應,防止他們放棄表單填寫;另一方面我們不希望一開始載入大量表單,一下子就把使用者嚇到,下面是我在專案中做表單設計的一些考慮。
針對如何提升表單設計的引導性主要會考慮以下幾個問題:
如何排列體驗是最優的?
額外的提示怎麼做到恰到好處?
如何減少使用者輸入次數?
如何鼓勵使用者繼續填寫資訊?
1、如何排列體驗是最優的?
使用者在填寫表單的時候經常會猶豫不決,所以要儘可能簡化表單填寫過程,表單設計要遵循內在系統邏輯,符合使用者的使用習慣,減少視覺負荷,建立良好的資訊層次。
a. 國外的設計研究員mattero penzo做了眼動實驗,如果將label放置在input框上面,眼睛掃描表單速度會更快。

圖片1來源於Uxmatters
b. 按照邏輯順序聚合排列表單,便於使用者理解。

圖片2 UX Planet的註冊頁面
圖片2 UX Planet的註冊頁面把birthday表單填寫聚合在一起,方便使用者理解。
c. 將input框與將要輸入的長度匹配,尤其是可能會輸入很多資訊的輸入框大小一定要留夠,讓使用者對將要輸入的內容有所預期。

圖片3 Salesforce Object介面
圖片3 Salesforce Object 表單裡面description input框比較大,提醒使用者可能會輸入比較多的內容。
2、額外的提示怎麼做到恰到好處?
為什麼需要提示?
Sting TV的數字負責人Yakir Reznik做了A/B測試,在A版本只給使用者提供姓名和電話號碼錶單讓使用者填寫,在B版本中除了給使用者提供姓名和電話號碼錶單,還添加了一個解釋,即如果使用者需要找回密碼,則需要此資訊,雖然提示比較長,甚至在移動裝置上面還需要額外滾動,但是轉換率卻提高了11%。 所以好的提示對使用者的引導性和防止使用者放棄有很重要的作用。
在做專案的過程中一般會遇到以下幾種提示,每種提示都各有優缺點,大家可以根據自己的實際情況使用提示。
a. 靜態提示,在介面上固定顯示,不會消失。
優點: 始終在介面呈現提示,使用者不會錯過它,對指導使用者操作有重要作用。
缺點: 佔地方,會讓介面不整潔。
建議: 如果是特別重要的資訊或者是不容易理解的資訊,建議採用靜態提示。

圖片4 Salesforce Object 介面
圖片4 Salesforce表單填寫有大量靜態提示,幫助使用者理解自己需要做的任務。
b. 按需顯示,當滑鼠點選或者懸停在圖示“?”、“!”、“i”或者連結上出現提示。
優點: 不佔用很大區域,還可以指導使用者。
缺點: 對於不熟悉的使用者會錯過重要資訊。
建議: 如果是對使用者填寫前作指導,且表單資訊容易理解,避免資訊過載最好隱藏提示,如果是對使用者操作作出反饋,建議預留提示訊息空間,且要立即提示最好。

圖片5 WIX Login 介面
圖片5 針對使用者操作作出反饋,提示使用者輸入錯誤。
c. 自動出現,當label或者input框獲得焦點時,提示自動出現,隨著焦點變化而改變。
優點: 在需要的時候出現不會有負擔,也不會被忽略。
缺點: 資訊填寫完即使不在需要它也會出現。

圖片6 Zeplin Login介面
圖片6 Usernameinput框獲得焦點時,提示自動出現,當焦點在password時提示在password右側出現,username右側的提示消失。
d. 自動消失(一般指佔位符),輸入框提示用佔位符,一旦使用者焦點在該框,佔位符消失。
優點: 不佔用很大區域,還可以指導使用者。
缺點: 顯示提示資訊空間有限;當用戶輸入一半資訊想要看提示的時候是無法顯示提示的。
建議: 如果提示資訊不多建議用佔位符。

圖片7 Invison 註冊介面
3、如何減少使用者輸入次數?
好的表單設計可以減少使用者輸入次數,提升工作效率,目前主要從下面幾個方面去考慮。
a. 打字互動成本高,儘量用單選或者多選代替,讓使用者做選擇題,減少使用者輸入。
b. 區分可選和必選欄位,必選可以加 * 號,讓使用者可以集中於必填欄位。

圖片8
圖片8 用 * 號標識出必填欄位,但是如果大多數是必填且有大量表單,建議只標識出非必填,如下圖9。

圖片9
4、如何鼓勵使用者繼續填寫資訊?
給使用者持續的激勵, 會刺激多巴胺的產生,多巴胺是一種化學獎賞的神經遞質,會產生神經系統的興奮性,所以為讓使用者可以愉快的完成表單,不中途放棄,要有一些激勵設計。
a. 完成過程中提醒使用者工作程序,鼓勵使用者繼續填寫表單。

圖片10
b. 表單完成之後給使用者一些稱號激勵,給使用者設定青銅、白銀、黃金、鉑金等等級,給使用者升級刺激。

圖片11 WIX 介面
後面我會講當 表單數量很多時,如何做設計?
以上是自己在做專案的一些個人總結,歡迎大家加我公眾號或者知乎專欄交流:西西設計客棧