Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Form Design 讀書會 Ch12-14

605 views

Published on

  • Be the first to comment

  • Be the first to like this

Web Form Design 讀書會 Ch12-14

  1. 1. Web表單設計讀書會<br />基於選擇的輸入 Ch12/循序漸進 Ch13 / 表單的未來 Ch14<br />2011.3.14<br />鄒心瑜Hsinyu Chou<br />hsinyu.chou@isobar.com#3530<br />
  2. 2. Ch12 基於選擇的輸入<br />
  3. 3. Ch12 基於選擇的輸入<br />彈性輸入允許人們按照希望的方式回答問題額外輸入允許人們補充想回答的問題基於選擇的輸入根據對初始問題的回答,決定後續回答的問題<br />
  4. 4. Ch12 基於選擇的輸入<br />八大解決方案<br />頁面級選項(換頁)<br />水平選項卡<br />垂直選項卡<br />下拉列表<br />單選按鈕(radio button)下方顯示<br />單選按鈕內顯示<br />顯示未啟動選項<br />分組顯示<br />
  5. 5. Ch12 基於選擇的輸入<br />頁面級選項(Page Level Selection)<br />把過程明確分為兩步,第一頁選完再換第二頁<br />Pros<br /><ul><li>很明確,錯誤少
  6. 6. 眼動儀測試結果與體驗滿意度表現平均
  7. 7. 不爭取時間的表單適用</li></ul>Cons<br /><ul><li>換頁可能丟失第一頁的情境
  8. 8. 速度較慢</li></ul>P.1<br />P.2<br />
  9. 9. Ch12 基於選擇的輸入<br />水平選項卡(Horizontal Tabs)<br />Pros<br /><ul><li>易瀏覽
  10. 10. Tab有暗示全部選項的作用</li></ul>Cons<br /><ul><li>填表路徑多為由上而下,水平選項易被忽略
  11. 11. *水平選項間的關係不明:是只要填一個?還是全部要填?或是互斥?
  12. 12. 如果submit,是submit哪一個Tab下的內容?
  13. 13. 眼球需左右移動</li></ul>*本方案使用性測試與眼動儀結果似有矛盾,使用性測試user滿意度高,且對tab間的關係疑惑不大,但眼動儀顯示視線偏離了填表常見的直線掃描。<br />
  14. 14. Ch12 基於選擇的輸入<br />一般的填表路徑<br />
  15. 15. Ch12 基於選擇的輸入<br />垂直選項卡(Vertical Tabs)<br />Pros<br /><ul><li>直接由上而下掃描,具有順暢的瀏覽線
  16. 16. 費時最短
  17. 17. 體驗滿意度高,眼球無需大幅移動
  18. 18. 隱藏當下無關的表單元件,對舒適度和完成度至關重要</li></ul>Cons<br /><ul><li>少數user對tab間是全部要填還是互斥有疑惑</li></li></ul><li>Ch12 基於選擇的輸入<br />垂直選項卡(Vertical Tabs)<br />Pros<br /><ul><li>直接由上而下掃描,具有順暢的瀏覽線
  19. 19. 費時最短
  20. 20. 體驗滿意度高,眼球無需大幅移動
  21. 21. 隱藏當下無關的表單元件,對舒適度和完成度至關重要</li></ul>Cons<br /><ul><li>少數user對tab間是全部要填還是互斥有疑惑</li></li></ul><li>Ch12 基於選擇的輸入<br />垂直選項卡(Vertical Tabs)<br />
  22. 22. Ch12 基於選擇的輸入<br />下拉選單<br />Pros<br /><ul><li>隱藏無關的元件,需要時才顯示
  23. 23. 比垂直選項卡省空間</li></ul>Cons<br /><ul><li>缺點少</li></li></ul><li>Ch12 基於選擇的輸入<br />單選按鈕(組)下方顯示 6.單選按鈕內顯示 <br />
  24. 24. Ch12 基於選擇的輸入<br />單選按鈕(組)下方顯示 6.單選按鈕內顯示 <br />Pros<br /><ul><li>有助於揭示選項與後續內容的連動
  25. 25. 類似垂直選項卡
  26. 26. 按鈕內顯示是速度最快的解決方案</li></ul>Cons<br /><ul><li>頁面較長
  27. 27. 跳動時引起混淆,這一點在使用性測試時得到證實
  28. 28. 若後續內容直接顯示在單一選項下方,頁面跳動會阻隔其他選項
  29. 29. 若後續內容置於整組選項下方,關連性又不夠(兩難)
  30. 30. 題目數量多時更突顯以上問題,show/hide使user不確定自己觸動了哪個選項</li></li></ul><li>Ch12 基於選擇的輸入<br />顯示未啟動選項<br /><ul><li>所有選項均可見,但只有一組可操作,其他顯示灰白色</li></ul>Pros<br /><ul><li>保留所有初始選項的情境</li></ul>Cons<br /><ul><li>可見元件太多,嚇跑user
  31. 31. 如果子選項很多,數個初始選項之間的關係就消失
  32. 32. 滿意度最低,費時最長
  33. 33. 不建議使用</li></li></ul><li>Ch12 基於選擇的輸入<br />分組顯示(未啟動選項可見)<br /><ul><li>用視覺綁定初始選項及子選項</li></ul>Pros<br /><ul><li>保留所有初始選項的情境</li></ul>Cons<br /><ul><li>成功率最低,錯誤最多
  34. 34. 眼球固定時間最長(最難理解)
  35. 35. 不建議使用</li></li></ul><li>
  36. 36. Ch13 循序漸進 /Ch14 表單的未來<br />
  37. 37. Ch13 循序漸進 /Ch14 表單的未來<br />擺脫枯燥註冊<br />2007<br />Google Video<br />
  38. 38. Ch13 循序漸進 /Ch14 表單的未來<br />Jumpcut - 線上video編輯<br />
  39. 39. Ch13 循序漸進 /Ch14 表單的未來<br />Jumpcut - 線上video編輯<br />先體驗,再註冊。<br />
  40. 40. Ch13 循序漸進 /Ch14 表單的未來<br />Geni - 線上創建家族族譜<br />當填入e-mail 的同時,Geni系統會發送e-mail 給user,以便日後返回取出前次的資料<br />確保user回訪時能夠取用帳戶訊息。<br />
  41. 41. Ch13 循序漸進 /Ch14 表單的未來<br />Geni - 線上創建家族族譜<br />當填入e-mail 的同時,Geni系統會發送e-mail 給user,以便日後返回取出前次的資料<br />確保user回訪時能夠取用帳戶訊息。<br />
  42. 42. Ch13 循序漸進 /Ch14 表單的未來<br />http://4fidelity.wwwins.com.tw/investment/myplan.shtml<br />
  43. 43. Ch13 循序漸進 /Ch14 表單的未來<br />表單的未來 - 表單逐漸消失!<br />由外而內的思考<br />遊戲般的互動<br />Open ID – 減少重複註冊<br />個人化默認<br />
  44. 44. Ch13 循序漸進 /Ch14 表單的未來<br />http://www.themindcanvas.com/demos/<br />
  45. 45. 問題與討論<br />http://www.flickr.com/photos/streetfly_jz/2786919875/in/photostream/<br />

×