1. Web表單設計讀書會 輸入框 Ch5/動作 Ch6 2011.2.14 鄒心瑜Hsinyu Chou hsinyu.chou@isobar.com#3530

2. Ch5 輸入框

3. Ch5 輸入框 輸入元件的類型 不同的問題，需要不同的回答方式 文字框 單選鈕 下拉選單 列表框 勾選框 按鈕 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.

4. Ch5 輸入框 各種輸入元件的特性

5. Ch5 輸入框 各種輸入元件的特性

6. Ch5 輸入框 《提醒》單選鈕和複選框的感應區，最好包含標籤 感應區 感應區 Female Include me into the survey

8. 每種票最多買6張

12. User可看見所有數量選項

16. Ch5 輸入框 Wal-Mart (圖例) 不論標示必填或選填，都必須有配套的說明 整份表單要有一致性 Macy’s Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.

17. Ch5 輸入框 注意必/選填標示(*)的位置 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.

18. Ch5 輸入框 (要標在標籤上！) Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.

19. Ch5 輸入框 表單的結構基礎 可幫助規劃表單的內容，也可作為視覺風格的參考 名稱 資料 動作 (Title) (Data) (Action) Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.

20. Ch5 輸入框 輸入組 必須同時存在才能提供完整資料的數個輸入框 有因果關係的輸入框 可提供user回答問題的線索 eBay的發貨表單 選擇地址 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.

21. Ch5 輸入框 輸入框組的關係 (組合輸入框) A +B (相關輸入框) A xB (從屬輸入框) A包含B Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.

22. Ch5 輸入框 彈性輸入框 讓user以喜歡的格式填寫答案 需要額外的script做判定或轉換

23. Ch5 輸入框 最強的彈性輸入框！

24. Ch6 動作(Action)

25. Ch6 動作(Action) 主動作和次動作 主動作(primary action)：完成填表目標的最終動作如submit, 儲存, 繼續 次動作(secondaryaction)：較少使用，如取消, reset, 返回若不慎使用可能造成負面結果 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.

26. Ch6 動作(Action) 修改前 修改後 解決： 不要次動作 次動作的視覺表現要能與主動作區別 次動作改成其他能幫助user前進的行為，或幫user離開表單 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.

27. Ch6 動作(Action) 例：主動作與次動作的區別 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.

28. Ch6 動作(Action) 主動作和次動作的位置 眼動儀測試結果： 除了E以外，成功率均為100% 方案B表現最好(快) 方案A與C，體驗滿意度最高 方案F比方案B多費時6秒Action item對齊的位置? Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.

29. Ch6 動作(Action) 動作處理中的feedback 系統處理表單需要時間。User：我送出成功了嗎？ Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.

30. Ch6 動作(Action) 動作處理中的feedback User：我送出成功了嗎？ Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.

31. Ch6 動作(Action) 同意與提交 表單結尾不得不問的問題：促銷訊息、服務條款 網站常預設寄送促銷訊息，但user也通常會取消 User必須同意網站條款，但其實只想買東西 ->那就兩步合成一步吧 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.

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