1. Web表單設計讀書會 表單的設計 Ch1/表單的組織 Ch2 2011.1.17 鄒心瑜Hsinyu Chou hsinyu.chou@isobar.com#3530

2. Ch1 表單的設計 表單很討厭！ 是『由內而外』，而非『由外而內』的過程 表單的角色 表單代替了店員、朋友、銀行櫃員、政府辦事員 付款、分享、註冊 表單是網站和使用者的溝通之門，卻也成了雙方的阻礙 表單設計的影響 經過改善的表單，完成率提高10%~40% 這個百分比可能代表新客戶、利潤與KPI –對話

3. Ch1 表單的設計 YouTube 上載表單-每天有70000支影片上載 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.

5. 實地測試：觀察人們在辦公室和家中與表單互動

6. 客戶支援：統計OS與browser、問題類型與數量、解決方法

7. 網站追蹤：完成率、放棄點、已填和未填的資料(tracking & log)

8. 眼動追蹤：眼球固定的位置與時間長度

10. Ch1 表單的設計 成功案例二：電子商務網站，應該要求User註冊嗎？ 只有5個元素的表單也能阻礙購買行為！在結帳前出現登錄，75%放棄購買Email, Password, Login, Register, Forget password User只想填付款與收到貨物的必要資訊姓名, 信用卡, 地址, 電話 把『註冊(Register)』改為『繼續(Continue)』購買行為增加45%也就是不需立即開帳戶Email, Password, Login, Continue 當User成為常客後可再補註冊

11. Ch1 表單的設計 如何設計優秀表單 考慮商業目標、用戶需求、表單情境 設計原則 減少痛苦 說明填寫完成路徑 (e.g.步驟1,2,3; 對齊方式) 考慮情境 確保一致溝通 (e.g.必填/選填 ) 設計模式(Design Pattern) 解決方案因目標、制約因素而變化

12. Ch2 表單的組織 選取問題 想謹慎優化表單，應當測試每個問題『還有沒有可以刪掉的問題？』 紙本表單電子化時，應刪掉已過時的問題 所有有關團隊要共同選取表單上的問題，統一口徑-整合Stakeholder的需求 先考慮人，再考慮像素 User關心的是，在此情境下，為何要回答這些問題

13. Ch2 表單的組織 形成更好問題的四大策略：『保留、刪減、延遲、解釋』 保留好問題 –User想回答，並網站的目標一致 刪減不需馬上得到答案，或可用其他方法得到答案的問題 延遲發問，直到問題不多餘、沒有侵略性 解釋對公司有價值，但User不想回答的問題

14. Ch2 表單的組織 構建對話 對話，而不是盤問 標籤(label)是表單提出問題的要素，盡量用自然的語言 要使用句子或是簡短名詞，端看哪一種比較清晰明瞭

15. 美國Yahoo註冊表單 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.

17. 如果表單包含大量問題，同時有若干主題 --> 多頁

18. 如果表單包含大量問題，但只有一個主題 --> 較長的一頁主題之間要有適當的間斷與解釋

19. Redfin購屋表單這份表單共有8頁，每個段落都有適當的說明與回應。 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.

21. 第二頁：個人資料

22. 第三頁：送貨方式偏好不要完全複製

23. Ch2 表單的組織 歸納區別用適量的視覺元素來區別問題群組 表單的表現形式，要與內容相符 框線 底色 對齊 字體 標註

24. Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.

25. Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.

26. Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.

27. Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.

28. eBay Express 付款 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.

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