1. Web表單設計讀書會 完成之路 Ch3/標籤 Ch4 2011.1.24 鄒心瑜Hsinyu Chou hsinyu.chou@isobar.com#3530

3. 標題很重要，點明希望user採取的行動

4. 告訴人們正在填什麼表單，填完可以達到什麼目的從開頭就讓user進入預期的情境。較龐大的表單需要起始頁 提供一個情境讓user全盤了解：前置準備、問些什麼、要花多久、後續動作

5. Ch3 完成之路 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.

6. Ch3 完成之路 自始至終提供清晰的瀏覽線 容易瀏覽的路徑 合適的空間，保持每對標籤/輸入框之間的平衡 一般而言，最好以輸入框高度的50%~75%為問題之間的間隔 (ps.標籤與輸入框、並排輸入框之間的最適距離，同樣為輸入框高度的50%~75%) First Name LastName First Name Address

7. Ch3 完成之路 PayPal付款表單 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.

8. Ch3 完成之路 減少分散注意力 即使全站風格一致，表單頁也必須有不同的配置 畫面上與表單無關、會干擾填表的元素最好剔除

9. Amazon 首頁與表單頁 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.

10. 博客來 首頁與表單頁

11. Ch3 完成之路 過程指示 如果整份表單分成多頁，必須顯示『現在進行到哪裡了？』 將表單問題分成有意義的群組 取個清楚的標題 標明範圍：總共有哪些步驟/頁數？標明目前位置：第幾步狀態 - 保存與返回：是否已儲存？上次儲存時間？(ps.保存的方法:cookie? 註冊帳號？)保存與返回是促使人們填完表單的好方法。 但， 『告訴人們所處位置』不是一件容易做對的事！會有岔路、會被誤解為頁數

12. 意外插入了登錄 富達開戶表單 https://www.fidelity.com/

13. Half.com結帳步驟 Shipping: 如果不想用既有地址收貨，要新增地址，所以有兩步 Billing: 選擇線上付款服務商、選擇帳號、驗證等，所以有N步 Amazon結帳步驟 不要寫1,2,3 籠統一點，只要概括這個階段的動作即可 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.

14. Ch3 完成之路 Accessibility 議題 Internet accessibility指南 - 參考WCAG或美國採購法508章 Alt文字 表格摘要<table summary=“Monthly savings for the Flintstones family ”> 每個元素都要有自己的標籤(label)，即使是隱藏的 頁面標題(Title) 每個link都應有獨特而有意義的名稱，而不是click here 不要用顏色作為傳達資訊的唯一方式，需輔以文字 配色應保持足夠的對比度 字級要夠大或讓user選擇 減少無意義的動畫 避免使用每秒閃爍3次以上的元素

15. Ch3 完成之路 (續上頁) 頁面上所有功能必須用鍵盤就能完成(或做為替代用法) 不要用視覺上的方向或顏色來做導覽 允許user延長某動作的時間 一致性 – 同樣的意義或功能，用相同的圖文表達 原始碼的資訊階層要跟視覺layout相符，如縮排 應設立快速鍵跳過重複內容，直達主要內容 請Target User來做使用性測試

16. Ch3 完成之路 Tab鍵跳轉 用”tabindex”屬性來指定輸入順序(如果未設定tabindex屬性，則依照html原始碼順序) <FORM action="..." method="post"> <INPUTtabindex="1"type="text" name="field1"> <INPUTtabindex="2"type="text" name="field2"> <INPUTtabindex="3"type="submit" name="submit“> </FORM>

17. 5 1 2 3 4 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.

18. Ch4 標籤 表單三要素：標籤、輸入框、Action button 標籤的三種主要對齊方式：左對齊、右對齊、頂對齊 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.

20. 可適應較長標籤(多國語言)

21. 一行可以並排好幾對標籤/輸入框

22. 眼球只需向下掃描

24. 對人們熟悉的資料項目效果較好，但陌生或需要學習的資料仍有待觀察頂對齊 http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

26. 標籤與輸入框連結較佳

27. 節省螢幕的上下空間

29. 標籤較長(或兩行)時產生延展問題右對齊 http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

30. http://www.vendorcompete.com/serviceoverview-buyers.php

32. 想使user放慢速度時可用

34. 速度最慢左對齊 http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

35. http://survey.cvent.com/blog/likert-scale-example http://thedesignspace.net/MT2archives/images/perception/likertScaleWorking.php

37. 需控制標籤隱藏或顯示的時機

38. 需清楚表明這是標籤而不是答案輸入框內標籤 混合對齊：通常不考慮使用 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.

39. Ch4 標籤 http://ucdchina.com/snap/3233

40. 問題與討論 http://www.flickr.com/photos/streetfly_jz/2786919875/in/photostream/