如何讓表單更友善

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

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

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

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.確認表單動線

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