網⾴表格設計

Yun Huang May, 2016Sources: www.nngroup.com/articles/web-form-design/

問題在哪裡？

使⽤者「⼀次就填妥」⽐率

42%

78%遵循設計原則

違背設計原則

01 保持簡潔

02 標籤和欄位距離緊密

標籤

欄位

ＯＸ

03 同欄位呈現於同⼀⾏

04 使⽤邏輯順序

欄位 選項

信⽤卡號碼⽇期

安全代碼

宅配 / 超商取貨

頻率最⾼ à 頻率最低

05 避免placeholder

視覺混亂：

最糟糕：標籤變成placeholder!

06 適當欄位⼤⼩

07 標⽰出必填/⾮必填欄位

08 解釋欄位要求

09 避免[重設]和[清除全部]

10 錯誤訊息明顯

結論

表格設計的重要性