Web Form Design 讀書會 Ch5-6

1,116 views

Published on

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

No Downloads
Views
Total views
1,116
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
25
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web Form Design 讀書會 Ch5-6

  1. 1. Web表單設計讀書會<br />輸入框 Ch5/動作 Ch6<br />2011.2.14<br />鄒心瑜Hsinyu Chou<br />hsinyu.chou@isobar.com#3530<br />
  2. 2. Ch5 輸入框<br />
  3. 3. Ch5 輸入框<br />輸入元件的類型<br />不同的問題,需要不同的回答方式<br />文字框 <br />單選鈕<br />下拉選單<br />列表框<br />勾選框<br />按鈕<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.<br />
  4. 4. Ch5 輸入框<br />各種輸入元件的特性<br />
  5. 5. Ch5 輸入框<br />各種輸入元件的特性<br />
  6. 6. Ch5 輸入框<br />《提醒》單選鈕和複選框的感應區,最好包含標籤<br />感應區<br />感應區<br />Female<br />Include me into the survey<br />
  7. 7. Ch5 輸入框<br />案例:訂購電影票表單<br />條件:<br /><ul><li>三種不同類型/票價的票(成人票、兒童票、老人票)
  8. 8. 每種票最多買6張
  9. 9. 每位user約一年造訪一次,所以應以簡單易學為主</li></li></ul><li>Ch5 輸入框<br />Solution 1<br /><ul><li>輸入框未限制格式,若輸入非數字會跳出javascript錯誤訊息
  10. 10. 打數字用鍵盤,移動到另一輸入框需換成滑鼠,很少user知道可用tab鍵切換</li></li></ul><li>Ch5 輸入框<br />Solution 2<br /><ul><li>頁面佈局佳(省空間),可限定輸入格式,防止錯誤
  11. 11. 用下拉選單有利有弊:user可能忽略其他數量</li></li></ul><li>Ch5 輸入框<br />Solution 3<br /><ul><li>可限定輸入格式,防止錯誤
  12. 12. User可看見所有數量選項
  13. 13. 但因而增加了很多元件</li></li></ul><li>Ch5 輸入框<br />郵遞區號及電話號碼<br />都有做長度暗示<br />輸入框的長度<br />是一種暗示(像門把),提示回答方式<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.<br />
  14. 14. Ch5 輸入框<br />(這不是美觀問題!)<br /><ul><li>所有輸入框一樣長,無法提供任何暗示</li></ul>Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.<br />
  15. 15. Ch5 輸入框<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.<br /><ul><li>每個輸入框都有不同的長度無標準長度的輸入無須暗示,user反而因此疑惑</li></li></ul><li>Ch5 輸入框<br />必填項目<br />星號(*)是必填?還是可填可不填?<br />理論上,數量較少的一方需做標示<br />(台灣可能標示必填項較受歡迎)<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.<br />
  16. 16. Ch5 輸入框<br />Wal-Mart<br />(圖例)<br />不論標示必填或選填,都必須有配套的說明<br />整份表單要有一致性<br />Macy’s<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.<br />
  17. 17. Ch5 輸入框<br />注意必/選填標示(*)的位置<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.<br />
  18. 18. Ch5 輸入框<br />(要標在標籤上!)<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.<br />
  19. 19. Ch5 輸入框<br />表單的結構基礎<br />可幫助規劃表單的內容,也可作為視覺風格的參考<br />名稱 資料 動作<br />(Title) (Data) (Action)<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.<br />
  20. 20. Ch5 輸入框<br />輸入組<br />必須同時存在才能提供完整資料的數個輸入框<br />有因果關係的輸入框<br />可提供user回答問題的線索<br />eBay的發貨表單<br />選擇地址<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.<br />
  21. 21. Ch5 輸入框<br />輸入框組的關係<br />(組合輸入框)<br />A +B<br />(相關輸入框)<br />A xB<br />(從屬輸入框)<br />A包含B<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.<br />
  22. 22. Ch5 輸入框<br />彈性輸入框<br />讓user以喜歡的格式填寫答案<br />需要額外的script做判定或轉換<br />
  23. 23. Ch5 輸入框<br />最強的彈性輸入框!<br />
  24. 24. Ch6 動作(Action)<br />
  25. 25. Ch6 動作(Action)<br />主動作和次動作<br />主動作(primary action):完成填表目標的最終動作如submit, 儲存, 繼續<br />次動作(secondaryaction):較少使用,如取消, reset, 返回若不慎使用可能造成負面結果<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.<br />
  26. 26. Ch6 動作(Action)<br />修改前<br />修改後<br />解決:<br />不要次動作<br />次動作的視覺表現要能與主動作區別<br />次動作改成其他能幫助user前進的行為,或幫user離開表單<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.<br />
  27. 27. Ch6 動作(Action)<br />例:主動作與次動作的區別<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.<br />
  28. 28. Ch6 動作(Action)<br />主動作和次動作的位置<br />眼動儀測試結果:<br />除了E以外,成功率均為100%<br />方案B表現最好(快)<br />方案A與C,體驗滿意度最高<br />方案F比方案B多費時6秒Action item對齊的位置?<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.<br />
  29. 29. Ch6 動作(Action)<br />動作處理中的feedback<br />系統處理表單需要時間。User:我送出成功了嗎?<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.<br />
  30. 30. Ch6 動作(Action)<br />動作處理中的feedback<br />User:我送出成功了嗎?<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.<br />
  31. 31. Ch6 動作(Action)<br />同意與提交<br />表單結尾不得不問的問題:促銷訊息、服務條款<br />網站常預設寄送促銷訊息,但user也通常會取消<br />User必須同意網站條款,但其實只想買東西<br />->那就兩步合成一步吧<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.<br />
  32. 32. 問題與討論<br />http://www.flickr.com/photos/streetfly_jz/2786919875/in/photostream/<br />

×