Web Form Design 讀書會 Ch9-11

692 views
584 views

Published on

Published in: Design, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
692
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web Form Design 讀書會 Ch9-11

  1. 1. Web表單設計讀書會<br />即時驗證 Ch9/多餘輸入 Ch10 / 額外輸入 Ch11<br />2011.3.7<br />鄒心瑜Hsinyu Chou<br />hsinyu.chou@isobar.com#3530<br />
  2. 2. Ch9 即時驗證<br />
  3. 3. Ch9 即時驗證<br />功能<br />確認答案是否合適<br />建議有效答案<br />以即時更新幫助人們控制答案在可接受的範圍內<br />使用情境:<br />需要依照user的回答來提供幫助<br />答案範圍太廣,無法做成一般介面來防呆<br />驗證時機:<br />user在輸入框中開始時<br />繼續下一項輸入時<br />停止輸入(放棄或完成)<br />User 不用等到送出表單才知道自己填錯了。<br />
  4. 4. Ch9 即時驗證<br />確認user的答案<br />例:新帳戶的使用者名稱系統無法事先提示,user也無法憑常識判斷,需等使用者輸入後,才能知道此帳號是否已經被使用<br />例:新帳戶的密碼,有多種不同的安全等級(數字、符號、大寫等),需一步步引導user<br />
  5. 5. Submit 後才能得到回應<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.<br />
  6. 6. Ch9 即時驗證<br />設定username, 填寫的同時得到回應<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.<br />
  7. 7. Ch9 即時驗證<br />密碼強度<br />每一項都驗證<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.<br />
  8. 8. Ch9 即時驗證<br />驗證的時機與密集程度 - 是否需要每個欄位都驗證?<br />確定User已完成當下的動作再驗證。<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.<br />
  9. 9. Ch9 即時驗證<br />建議有效的答案<br />當答案太多無法做成下拉選單或單選鈕<br />智慧型輸入、自動完成<br />將輸入轉換成正確格式 例:555-123-1234 ->(555)123-1234<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.<br />
  10. 10. Ch9 即時驗證<br />限制答案範圍例:自動計算尚可填字數的留言框需即時更新<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.<br />
  11. 11. Ch10 多餘輸入<br />
  12. 12. Ch10 多餘輸入<br /><ul><li>讓問題更少
  13. 13. 去除問題
  14. 14. 調整問題順序,在更好的時機提出問題
  15. 15. 自動推斷出答案
  16. 16. 需要和相關團隊協商後決定哪些問題可以達成商業目標,不宜省略?</li></li></ul><li>Ch10 多餘輸入<br /><ul><li>讓問題更少
  17. 17. 自動推斷出答案的實例</li></ul>美國運通卡 – 34或37開頭<br />Master – 51~55開頭<br />Visa – 4開頭<br />
  18. 18. Ch10 多餘輸入<br /><ul><li>自動推斷出答案的實例</li></ul>以郵遞區號推斷程式和州別1.反而需要很多提示2.海外客戶無法使用<br />
  19. 19. Ch10 多餘輸入<br /><ul><li>智慧型默認(default)
  20. 20. 替user回答複雜的問題
  21. 21. 可能考慮商業利益,但儘量為user著想</li></ul>eBay給賣家出貨的表單<br />
  22. 22. Ch10 多餘輸入<br /><ul><li>某些問題不設預設答案,避免壓力和爭議
  23. 23. 或提供”不想回答”的選項,以避免驗証的複雜性
  24. 24. 如果一定要user回答,需解釋理由</li></li></ul><li>Ch10 多餘輸入<br /><ul><li>個人化默認
  25. 25. 例:自動叫出user上次購買的信用卡號、地址、郵寄方式
  26. 26. 可增加user對該網站的『黏性』</li></li></ul><li>Ch11 額外輸入<br />
  27. 27. Ch11 額外輸入<br /><ul><li>即時增加:user自行依需要增加輸入項目
  28. 28. 也必須讓user可以移除,直到剩下原始的一項</li></ul>專案管理網站: Basecamp<br />http://www.104.com.tw<br />
  29. 29. Ch11 額外輸入<br /><ul><li>新增的區塊需有良好標示,減低頁面跳動的衝擊(用動態輔助是不錯的方法)</li></li></ul><li>Ch11 額外輸入<br /><ul><li>層疊顯示:大量的額外選項
  30. 30. 日曆是最常見的例子
  31. 31. 當選項會跨月而非單日時,顯示兩個月以上比單月好
  32. 32. 日曆小圖示可預告即將發生的事
  33. 33. 以click/mouseover/focus啟動皆可
  34. 34. 日曆開放時,其他輸入最好disable</li></li></ul><li>Ch11 額外輸入<br /><ul><li>獨佔user注意力的輸入:燈箱(Modal Overlay Window)
  35. 35. 通常用於進階選項(不常使用的項目)
  36. 36. 因為獨佔畫面,必須可以關閉(cancel)
  37. 37. 最重要的是,燈箱以外的選項禁止輸入</li></li></ul><li>Ch11 額外輸入<br />行事曆通知信設定<br />
  38. 38. Ch11 額外輸入<br />eBay: 賣家可自行增減拍賣品表單的輸入項目<br />
  39. 39. Ch11 額外輸入<br /><ul><li>循序漸進
  40. 40. 太多額外選項時:將選項分子類別</li></ul>YouTube: 選擇影片類別<br />
  41. 41. Ch11 額外輸入<br />Renkoo: 挑選event類型<br />
  42. 42. 問題與討論<br />http://www.flickr.com/photos/streetfly_jz/2786919875/in/photostream/<br />

×