網頁表單設計注意事項

01/26 | wordpress分享留言(0)

網站要能成功獲得訂單或是客戶資料,從一開始的行銷推廣、著陸頁設計,到產品圖的攝影、文案的設計,好不容易引到用戶到轉換頁,但如果因為設計不良的表單而流失了客戶,前面的心血就完全浪費了,這篇文章整理許多表單設計的要點,雖然標題只有說六個準則,但每一點裡面又延伸更多重點,簡單整理如下,文中有更多的佐證以及為何要這樣的設計的原因。

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、送出表單按鈕可以呼應表單標題或是帶有行動訴求,避免在按鈕附近增加取消或重設按鈕,以及安全驗證的標章來增加用戶的困惑

 

 

 

回覆文章