Pages

2011年5月3日 星期二

如何讓表單更友善

如何讓表單更友善


當用戶按下送出表單卻出現錯誤時,表示你的表單設計出問題了。



構成表單的三個主要元件:

  • 標籤:欄位名稱,姓名,密碼,電子郵件等
  • 欄位:一個輸入框應標示為必填或非必填,通常以星號(*)為提示符號。
  • 提示:幫助提示功能,給用戶更多的提示關於如何格式化他們的信息。 例如,一個幫助提示會告訴用戶什麼密碼要求是:(如下圖所示)。


1.明確標示必填欄位



2.提供明確的錯誤訊息

Yahoo

Gowalla

常用驗證用戶輸入資料方式:

  • Server-side Validation :資料送出後於伺服器端驗證用戶輸入資料是否正確,如錯誤返回錯誤訊息。
  • Client-side Validation :資料送出後於客戶(用戶)端驗證用戶輸入資料是否正確,如錯誤返回錯誤訊息。
  • Real-time Validation :資料透過AJAX直接對伺服器端做驗證,用戶不需送出資料才確認資料的正確性,即時查詢可減少用戶錯誤發生次數,提供更好的用戶體驗。

3.使用客戶端(JavaScript)的資料格式驗證

live validation

4.聚焦表單域視覺風格,讓使用者知道他們在哪裡(底色,加粗框)

wufoo


5.明確顯示完成進度(多頁表單)


如需完成表單分成多個頁面,須明確告知用戶表單頁數及目前完成進度。

ex:Groupon : 有趣的註冊流程


6.記憶/暫存表單資料

用戶在完成表單送出後如有錯誤會將用戶帶回未完成表單,不要讓用戶重新填寫已完成欄位,須將原有已完成資料自動填入。


7.明確定義送出按鈕


讓用戶清楚的知道點擊按鈕後代表的意義,而不是所有按鈕都叫完成或送出。


8.提供取消按鈕前要想清楚

提供用戶取消按鈕須是先確認需求,就購物結帳流程來看,當用戶完成每個結帳步驟表示已確認購物,提供一個讓用戶反悔的按鈕是不是個正確的選擇?


9.顯示用戶正確的資料輸入格式(2011/04/28 0938-123456)

csskarma
Apple : 用戶點擊輸入框提示字元不會消失,如果用戶填表過程暫時離開,回來後還是可以繼續完成未完成表單。


10.確認表單動線


表單動線須一致,這樣可降低用戶填寫表單的困擾,也可讓用戶更專注於完成表單,能有效減少填表錯誤。

沒有留言: