1. Web表單設計讀書會 幫助文字 Ch7/錯誤與成功 Ch8 2011.2.21 鄒心瑜Hsinyu Chou hsinyu.chou@isobar.com#3530

2. Ch7 幫助(提示)文字

3. Ch7 幫助文字 幫助(提示)文字 除了標籤及輸入框，幫助文字可告訴user如何回答問題 如果需要太多幫助文字來解釋，表示 問題wording不當 問題太複雜 沒必要的問題太多 應重新檢視整張表單的問題

4. Ch7 幫助文字 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.

5. Ch7 幫助文字 何時該加上幫助文字？ (眼動儀研究)人們通常不讀說明，直接跳到第一個輸入框 哪些時候需要幫助文字？ User不熟悉表單要求的資料(例:ISBN, 註冊碼) User對輸入資料有疑慮(為什麼要填生日？)(不刷卡也要填信用卡號嗎？) 系統建議填寫特定格式(請用逗號分開多個搜尋字串) 是必填還是可以不填？

6. Ch7 幫助文字 如果不得不放許多幫助文字，表示必須解釋的項目很多，應考慮由系統自動即時提示

7. Ch7 幫助文字 自動即時提示 類型一：以點擊(click)輸入框觸發提示文字 隱藏的提示文字 需要固定的一塊空間顯示 不需要固定空間 (但會蓋住其他元件) Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.

9. Ch7 幫助文字 如果問題獨立而零散，選擇逐題或框內提示 如果每個問題都需要提示，或是輸入框組，選擇劃一個區塊來顯示提示文字

10. Ch7 幫助文字 下一項往下跳了， 妨礙user對問題位置 的感知 類型二：以一致的icon或文字暗示user觸發提示 Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.

13. Ch7 幫助文字 右欄說明逐步更新，且能關閉 Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.

14. Ch8 錯誤與成功

15. Ch8 錯誤與成功 與幫助文字的原則類似 再周到的表單，都會有user誤解 錯誤訊息的首要目標是讓人們知道發生錯誤了，一旦出錯時，這是網頁上最重要的元素 錯誤訊息該具備的條件： 視覺表現要與其重要性相當 盡量把錯誤訊息放在相關問題旁邊 提供解決錯誤的途徑 保持所有錯誤訊息的風格一致，以利辨認

16. Ch8 錯誤與成功 提供解決錯誤的方法 Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.

17. Ch8 錯誤與成功 雙重視覺強調：圖案 + 文字，(錯誤項目 + 進一步說明)可幫助視障、色盲者，也對一般user有用 確保風格與主要錯誤訊息匹配

18. Ch8 錯誤與成功 處理同時發生的多個錯誤 雙重視覺強調發生更顯著的作用 同時指出錯誤發生的地方，和解決錯誤的方法

19. Ch8 錯誤與成功 Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.

20. 只有一兩處錯誤，但因此不能填完表單 更需清晰指出 Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.

23. Ch8 錯誤與成功 系統訊息的規劃 有多少種訊息類型？ 錯誤訊息出現錯誤訊息只有兩個原因： User輸入了系統無法接受的內容，因而中斷流程 系統發生嚴重錯誤，應提供user替代處理方案 成功訊息感謝並讚揚user完成表單，應當簡短貼心 其他訊息(教育、變相推銷、模稜兩可的訊息)不建議使用，若一定要使用，必須注意不增加表單的複雜度，並在視覺上與其他訊息類型有所區別

24. Ch8 錯誤與成功 系統訊息的規劃 如何建立優秀的訊息？ 為所有訊息類型建立樣本(template)，包括視覺和措辭，有時還包括動態 確保所有消息像是同一家族，但互相又小有區別 訊息通常包含圖示、文字和外框

25. Ch8 錯誤與成功 It only works to geeks.

26. Ch8 錯誤與成功 邀請朋友 成功訊息 恭喜。表揚一下user他們完成的哪些事情 不得阻礙人們繼續前進，可以鼓勵他們做些其他的 或是把成果顯示給user看 http://www.rositacortez.com/social-media-101/facebook-friend-invite-the-ultimate-guide/

27. Ch8 錯誤與成功 成功feedback：把user新建的訊息立即顯示在列表頁 Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.

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