網頁表單設計注意事項

網站要能成功獲得訂單或是客戶資料,從一開始的行銷推廣、著陸頁設計,到產品圖的攝影、文案的設計,好不容易引到用戶到轉換頁,但如果因為設計不良的表單而流失了客戶,前面的心血就完全浪費了,這篇文章整理許多表單設計的要點,雖然標題只有說六個準則,但每一點裡面又延伸更多重點,簡單整理如下,文中有更多的佐證以及為何要這樣的設計的原因。
1、讓 label 放在 input 上面且置左,不要水平排列,會增加視覺移動的距離
2、有相關聯的 input 不要水平排列,可以使用邏輯判斷來顯示,避免表單拖太長
3、input 不要太寬,理想狀態就是跟手機版上面的寬度一樣
4、低於六個以下需要選擇的項目,不要使用 select 用 checkbox 或 radio 讓所有項目可以一次被全部看到
5、所有相關的 input 組織成一份表單,不同類別的組織成另一份表單
6、可以用 tab 鍵切換每一個 input
7、使用 input 遮照,把格式設定好,讓 user 只要填空格就好
8、手機表單可以針對欄位內容需要切換預設輸入鍵盤類型
9、使用邏輯判斷來顯示更多欄位,避免一開始表單拖太長
10、讓正在輸入的 input 有明顯提示
11、在 input 下方說明清楚要求的填寫格式
12、選填或必填用文字說明清楚,避免只用*號
13、輸入密碼欄位時可以選擇顯示或隱藏正在輸入的密碼
14、錯誤訊息在 user 輸入錯的當下就提示,不要等到送出表單時才出現
15、label 的訊息最好一直都在固定位置,placeholder 空白的效果比灰灰的暗示更明確
16、送出表單按鈕可以呼應表單標題或是帶有行動訴求,避免在按鈕附近增加取消或重設按鈕,以及安全驗證的標章來增加用戶的困惑
 

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *