Web Form Design 讀書會 Ch1-2

867 views
789 views

Published on

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

No Downloads
Views
Total views
867
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 讀書會 Ch1-2

  1. 1. Web表單設計讀書會<br />表單的設計 Ch1/表單的組織 Ch2<br />2011.1.17<br />鄒心瑜Hsinyu Chou<br />hsinyu.chou@isobar.com#3530<br />
  2. 2. Ch1 表單的設計<br />表單很討厭!<br />是『由內而外』,而非『由外而內』的過程<br />表單的角色<br />表單代替了店員、朋友、銀行櫃員、政府辦事員<br />付款、分享、註冊<br />表單是網站和使用者的溝通之門,卻也成了雙方的阻礙<br />表單設計的影響<br />經過改善的表單,完成率提高10%~40%<br />這個百分比可能代表新客戶、利潤與KPI<br />–對話<br />
  3. 3. Ch1 表單的設計<br />YouTube 上載表單-每天有70000支影片上載<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.<br />
  4. 4. Ch1 表單的設計<br />成功案例一:2004 eBay UX 團隊 – 註冊表單再設計<br />發現問題與機會<br />該用什麼方法?收集哪些數據?<br /><ul><li>可用性測試:列出錯誤或問題、完成率、花費時間
  5. 5. 實地測試:觀察人們在辦公室和家中與表單互動
  6. 6. 客戶支援:統計OS與browser、問題類型與數量、解決方法
  7. 7. 網站追蹤:完成率、放棄點、已填和未填的資料(tracking & log)
  8. 8. 眼動追蹤:眼球固定的位置與時間長度
  9. 9. Web慣例:從網路上歸納普遍的模式、針對問題的獨特解法</li></li></ul><li>Ch1 表單的設計<br />2004 eBay 註冊表單再設計<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.<br />
  10. 10. Ch1 表單的設計<br />成功案例二:電子商務網站,應該要求User註冊嗎?<br />只有5個元素的表單也能阻礙購買行為!在結帳前出現登錄,75%放棄購買Email, Password, Login, Register, Forget password<br />User只想填付款與收到貨物的必要資訊姓名, 信用卡, 地址, 電話<br />把『註冊(Register)』改為『繼續(Continue)』購買行為增加45%也就是不需立即開帳戶Email, Password, Login, Continue<br />當User成為常客後可再補註冊<br />
  11. 11. Ch1 表單的設計<br />如何設計優秀表單<br />考慮商業目標、用戶需求、表單情境<br />設計原則<br />減少痛苦<br />說明填寫完成路徑 (e.g.步驟1,2,3; 對齊方式)<br />考慮情境<br />確保一致溝通 (e.g.必填/選填 )<br />設計模式(Design Pattern)<br />解決方案因目標、制約因素而變化<br />
  12. 12. Ch2 表單的組織<br />選取問題<br />想謹慎優化表單,應當測試每個問題『還有沒有可以刪掉的問題?』<br />紙本表單電子化時,應刪掉已過時的問題<br />所有有關團隊要共同選取表單上的問題,統一口徑-整合Stakeholder的需求<br />先考慮人,再考慮像素<br />User關心的是,在此情境下,為何要回答這些問題<br />
  13. 13. Ch2 表單的組織<br />形成更好問題的四大策略:『保留、刪減、延遲、解釋』<br />保留好問題 –User想回答,並網站的目標一致<br />刪減不需馬上得到答案,或可用其他方法得到答案的問題<br />延遲發問,直到問題不多餘、沒有侵略性<br />解釋對公司有價值,但User不想回答的問題<br />
  14. 14. Ch2 表單的組織<br />構建對話<br />對話,而不是盤問<br />標籤(label)是表單提出問題的要素,盡量用自然的語言<br />要使用句子或是簡短名詞,端看哪一種比較清晰明瞭<br />
  15. 15. 美國Yahoo註冊表單<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.<br />
  16. 16. Ch2 表單的組織<br />內容的組織<br />群組與頁數<br />可將問題分成有意義的群組<br />可以單頁或多頁<br /><ul><li>如果表單問題不多,且自然分成若干主題 --> 一頁
  17. 17. 如果表單包含大量問題,同時有若干主題 --> 多頁
  18. 18. 如果表單包含大量問題,但只有一個主題 --> 較長的一頁</li></ul>主題之間要有適當的間斷與解釋<br />
  19. 19. Redfin購屋表單這份表單共有8頁,每個段落都有適當的說明與回應。<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.<br />
  20. 20. Ch2 表單的組織<br />內容的組織問題的順序<br />較具侵略性的問題放在最後<br />透過Web慣例調查,來學習特定領域優良網站的設計模式(如電子商務)<br />舉例<br /><ul><li>第一頁:登錄
  21. 21. 第二頁:個人資料
  22. 22. 第三頁:送貨方式偏好</li></ul>不要完全複製<br />
  23. 23. Ch2 表單的組織<br />歸納區別用適量的視覺元素來區別問題群組<br />表單的表現形式,要與內容相符<br />框線 底色 對齊 字體 標註<br />
  24. 24. Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.<br />
  25. 25. Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.<br />
  26. 26. Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.<br />
  27. 27. Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.<br />
  28. 28. eBay Express 付款<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.<br />
  29. 29. 問題與討論<br />http://www.flickr.com/photos/streetfly_jz/2786919875/in/photostream/<br />

×