Web Form Design 讀書會 Ch3-4

787 views
675 views

Published on

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

No Downloads
Views
Total views
787
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 讀書會 Ch3-4

  1. 1. Web表單設計讀書會<br />完成之路 Ch3/標籤 Ch4<br />2011.1.24<br />鄒心瑜Hsinyu Chou<br />hsinyu.chou@isobar.com#3530<br />
  2. 2. Ch3 完成之路<br /><ul><li>表單的命名
  3. 3. 標題很重要,點明希望user採取的行動
  4. 4. 告訴人們正在填什麼表單,填完可以達到什麼目的從開頭就讓user進入預期的情境。</li></ul>較龐大的表單需要起始頁<br />提供一個情境讓user全盤了解:前置準備、問些什麼、要花多久、後續動作<br />
  5. 5. Ch3 完成之路<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.<br />
  6. 6. Ch3 完成之路<br />自始至終提供清晰的瀏覽線<br />容易瀏覽的路徑<br />合適的空間,保持每對標籤/輸入框之間的平衡<br />一般而言,最好以輸入框高度的50%~75%為問題之間的間隔<br />(ps.標籤與輸入框、並排輸入框之間的最適距離,同樣為輸入框高度的50%~75%)<br />First Name<br />LastName<br />First Name<br />Address<br />
  7. 7. Ch3 完成之路<br />PayPal付款表單<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.<br />
  8. 8. Ch3 完成之路<br />減少分散注意力<br />即使全站風格一致,表單頁也必須有不同的配置<br />畫面上與表單無關、會干擾填表的元素最好剔除<br />
  9. 9. Amazon<br />首頁與表單頁<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.<br />
  10. 10. 博客來 首頁與表單頁<br />
  11. 11. Ch3 完成之路<br />過程指示<br />如果整份表單分成多頁,必須顯示『現在進行到哪裡了?』<br />將表單問題分成有意義的群組<br />取個清楚的標題<br />標明範圍:總共有哪些步驟/頁數?標明目前位置:第幾步狀態 - 保存與返回:是否已儲存?上次儲存時間?(ps.保存的方法:cookie? 註冊帳號?)保存與返回是促使人們填完表單的好方法。<br />但, 『告訴人們所處位置』不是一件容易做對的事!會有岔路、會被誤解為頁數<br />
  12. 12. 意外插入了登錄<br />富達開戶表單<br />https://www.fidelity.com/<br />
  13. 13. Half.com結帳步驟<br />Shipping: 如果不想用既有地址收貨,要新增地址,所以有兩步<br />Billing: 選擇線上付款服務商、選擇帳號、驗證等,所以有N步<br />Amazon結帳步驟<br />不要寫1,2,3<br />籠統一點,只要概括這個階段的動作即可<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.<br />
  14. 14. Ch3 完成之路<br />Accessibility 議題<br />Internet accessibility指南 - 參考WCAG或美國採購法508章<br />Alt文字<br />表格摘要<table summary=“Monthly savings for the Flintstones family ”><br />每個元素都要有自己的標籤(label),即使是隱藏的<br />頁面標題(Title)<br />每個link都應有獨特而有意義的名稱,而不是click here<br />不要用顏色作為傳達資訊的唯一方式,需輔以文字<br />配色應保持足夠的對比度<br />字級要夠大或讓user選擇<br />減少無意義的動畫<br />避免使用每秒閃爍3次以上的元素<br />
  15. 15. Ch3 完成之路<br />(續上頁)<br />頁面上所有功能必須用鍵盤就能完成(或做為替代用法)<br />不要用視覺上的方向或顏色來做導覽<br />允許user延長某動作的時間<br />一致性 – 同樣的意義或功能,用相同的圖文表達<br />原始碼的資訊階層要跟視覺layout相符,如縮排<br />應設立快速鍵跳過重複內容,直達主要內容<br />請Target User來做使用性測試<br />
  16. 16. Ch3 完成之路<br />Tab鍵跳轉<br />用”tabindex”屬性來指定輸入順序(如果未設定tabindex屬性,則依照html原始碼順序)<br /><FORM action="..." method="post"><br /><INPUTtabindex="1"type="text" name="field1"><br /><INPUTtabindex="2"type="text" name="field2"><br /> <INPUTtabindex="3"type="submit" name="submit“><br /> </FORM> <br />
  17. 17. 5<br />1<br />2<br />3<br />4<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.<br />
  18. 18. Ch4 標籤<br />表單三要素:標籤、輸入框、Action button<br />標籤的三種主要對齊方式:左對齊、右對齊、頂對齊<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.<br />
  19. 19. Ch4 標籤<br />Pros<br /><ul><li>完成速度最快
  20. 20. 可適應較長標籤(多國語言)
  21. 21. 一行可以並排好幾對標籤/輸入框
  22. 22. 眼球只需向下掃描
  23. 23. 完成率最高</li></ul>Cons<br /><ul><li>需要的垂直空間變長,螢幕高度有限制時慎用
  24. 24. 對人們熟悉的資料項目效果較好,但陌生或需要學習的資料仍有待觀察</li></ul>頂對齊<br />http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php<br />
  25. 25. Ch4 標籤<br />Pros<br /><ul><li>也能讓表單快速填完
  26. 26. 標籤與輸入框連結較佳
  27. 27. 節省螢幕的上下空間
  28. 28. 完成速度為左對齊的兩倍快</li></ul>Cons<br /><ul><li>左側不對齊影響瀏覽速度
  29. 29. 標籤較長(或兩行)時產生延展問題</li></ul>右對齊<br />http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php<br />
  30. 30. http://www.vendorcompete.com/serviceoverview-buyers.php<br />
  31. 31. Ch4 標籤<br />Pros<br /><ul><li>人們需要費心理解標籤的問題時,左對齊比較有幫助
  32. 32. 想使user放慢速度時可用
  33. 33. 節省垂直空間</li></ul>Cons<br /><ul><li>標籤和輸入框距離變長不易聯結左右間有認知壓力
  34. 34. 速度最慢</li></ul>左對齊<br />http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php<br />
  35. 35. http://survey.cvent.com/blog/likert-scale-example<br />http://thedesignspace.net/MT2archives/images/perception/likertScaleWorking.php<br />
  36. 36. Ch4 標籤<br />Pros<br /><ul><li>極端擁擠的情況下之解決方案</li></ul>Cons<br /><ul><li>游標移到輸入框內,標籤上的問題就消失,無法一邊填答一邊參考
  37. 37. 需控制標籤隱藏或顯示的時機
  38. 38. 需清楚表明這是標籤而不是答案</li></ul>輸入框內標籤<br />混合對齊:通常不考慮使用<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.<br />
  39. 39. Ch4 標籤<br />http://ucdchina.com/snap/3233<br />
  40. 40. 問題與討論<br />http://www.flickr.com/photos/streetfly_jz/2786919875/in/photostream/<br />

×