More Related Content
Similar to [書摘] Web表單設計:點石成金的藝術 (美)Web Form Design Filling in the Blanks
Similar to [書摘] Web表單設計:點石成金的藝術 (美)Web Form Design Filling in the Blanks (20)
[書摘] Web表單設計:點石成金的藝術 (美)Web Form Design Filling in the Blanks
- 3. 漫長旅途的最後一步也是最重要的一步
主宰著電子商務如何達成交易
註冊表單是會員資格的守門人
通過資料輸入, user 可以貢獻或是分享訊息以增
加網站內容
3
- 8. 許多表單經過再設計,完成率往往提高 10~40%
如果表單填寫完成代表著「完成
新銷售」、「獲得新用戶」
→ 改善表單設計 = 提高利潤
8
- 9. 研究方法: 異動:
a. 可用性測試 a. 引導登入註冊文字說明
b. 實地測試
c. 顧客支持
d. 眼動追蹤
e. Web 慣例 (Design Pattern)
效益:
a. 網站年收增加 3 億美元
9
- 10. 結合商業目標、用戶需求、表單情境
評估是否優異:
透過可用性測試、各項網站關鍵指標
10
- 11. • 保持簡單慣性的視覺動向
• 輸入框間距要能呼吸不鬆散
margin: .75em 0
• 有步驟指引是好事,但不要騙人 。
可使用籠統的、沒有明確期待的步驟表示
• 降低干擾與噪音
• 增加填寫用戶體驗
表單順序 tabindex 、點選範圍 包 label
11
- 13. 齊左
優:
缺:時間長 ( 眼動時間 500 毫秒、次數多
完成率低
齊右
優:時間中 ( 眼動時間 170~240 毫秒 )
缺:畫面過長,資料欄位多不適用
齊頂
優:時間短 ( 眼動時間 50 毫秒 )
完成率高 ( 超過 10%)
缺:畫面過長,資料欄位多不適用
13
- 14. 輸入框長度,暗示了人們如何回答問題
ex: 郵遞區號 3 碼、 email 或地址很長
如果無法給予適當暗示,請使用一致的長度
必填項目要使用*標示並且說明,或告知哪個為選填
- 16. 眼動追蹤研究出:人們看到表單時,會直接跳到第
一個輸入框而忽略上方提示文案。
提示方法:
只寫簡短最必要少量的文案
更多輔助提示,用「即時檢核」或是「送出後」再提示訊息表示
- 17. • 建構對話
用自然的、統一的對話,確保溝通一致性,適時適切的給予回饋。
• 內容組織有意義
問題盡量簡潔。
(必填的放主要步驟,選擇性的營銷問題用選填放最後)
• 歸納區別
用最少的視覺訊息,保持焦點在表單內容而不是形式。
• 清晰的視覺動線
• 別的表單 / 流程,不一定適合自己
17