Web Form Design 讀書會 Ch7-8

490
-1

Published on

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

No Downloads
Views
Total Views
490
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web Form Design 讀書會 Ch7-8

  1. 1. Web表單設計讀書會<br />幫助文字 Ch7/錯誤與成功 Ch8<br />2011.2.21<br />鄒心瑜Hsinyu Chou<br />hsinyu.chou@isobar.com#3530<br />
  2. 2. Ch7 幫助(提示)文字<br />
  3. 3. Ch7 幫助文字<br />幫助(提示)文字<br />除了標籤及輸入框,幫助文字可告訴user如何回答問題<br />如果需要太多幫助文字來解釋,表示<br />問題wording不當<br />問題太複雜<br />沒必要的問題太多<br />應重新檢視整張表單的問題<br />
  4. 4. Ch7 幫助文字<br />Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.<br />
  5. 5. Ch7 幫助文字<br />何時該加上幫助文字?<br />(眼動儀研究)人們通常不讀說明,直接跳到第一個輸入框<br />哪些時候需要幫助文字?<br />User不熟悉表單要求的資料(例:ISBN, 註冊碼)<br />User對輸入資料有疑慮(為什麼要填生日?)(不刷卡也要填信用卡號嗎?)<br />系統建議填寫特定格式(請用逗號分開多個搜尋字串)<br />是必填還是可以不填?<br />
  6. 6. Ch7 幫助文字<br />如果不得不放許多幫助文字,表示必須解釋的項目很多,應考慮由系統自動即時提示<br />
  7. 7. Ch7 幫助文字<br />自動即時提示<br />類型一:以點擊(click)輸入框觸發提示文字<br />隱藏的提示文字<br />需要固定的一塊空間顯示<br />不需要固定空間<br />(但會蓋住其他元件)<br />Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.<br />
  8. 8. Ch7 幫助文字<br />整組輸入框一起解釋<br />Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.<br /><ul><li> 需要有視覺提示,表達輸入框與提示之間的關聯</li></li></ul><li>Ch7 幫助文字<br />可稍微揭露隱藏版說明的方法:輸入框內提示<br />在還未按下輸入框前,就能看到提示<br />內容最好是『填寫範例』<br />互動上需注意的事項:<br />User按下輸入框時(focus),提示文字應消失<br />應保證提示文字和user真正的答案是可以分辨的<br />需要複雜說明時不宜放在框內<br />
  9. 9. Ch7 幫助文字<br />如果問題獨立而零散,選擇逐題或框內提示<br />如果每個問題都需要提示,或是輸入框組,選擇劃一個區塊來顯示提示文字<br />
  10. 10. Ch7 幫助文字<br />下一項往下跳了,<br />妨礙user對問題位置<br />的感知<br />類型二:以一致的icon或文字暗示user觸發提示<br />Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.<br />
  11. 11. Ch7 幫助文字<br /><ul><li>懸浮式:滑鼠移到感應區(mouseover)才出現提示</li></ul>懸浮區域做大一點,<br />以便user輕易觸發<br /><ul><li>優點:允許user依熟悉的程度來顯示/隱藏提示</li></ul>Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.<br />
  12. 12. Ch7 幫助文字<br /><ul><li>類型三:複雜型提示(含圖表),通常劃定區塊來顯示優點:需要多次保留和返回的表單,可藉此喚醒user記憶</li></ul>右欄說明隨左方填表狀況而更新<br />Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.<br />
  13. 13. Ch7 幫助文字<br />右欄說明逐步更新,且能關閉<br />Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.<br />
  14. 14. Ch8 錯誤與成功<br />
  15. 15. Ch8 錯誤與成功<br />與幫助文字的原則類似<br />再周到的表單,都會有user誤解<br />錯誤訊息的首要目標是讓人們知道發生錯誤了,一旦出錯時,這是網頁上最重要的元素<br />錯誤訊息該具備的條件:<br />視覺表現要與其重要性相當<br />盡量把錯誤訊息放在相關問題旁邊<br />提供解決錯誤的途徑<br />保持所有錯誤訊息的風格一致,以利辨認<br />
  16. 16. Ch8 錯誤與成功<br />提供解決錯誤的方法<br />Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.<br />
  17. 17. Ch8 錯誤與成功<br />雙重視覺強調:圖案 + 文字,(錯誤項目 + 進一步說明)可幫助視障、色盲者,也對一般user有用<br />確保風格與主要錯誤訊息匹配<br />
  18. 18. Ch8 錯誤與成功<br />處理同時發生的多個錯誤<br />雙重視覺強調發生更顯著的作用<br />同時指出錯誤發生的地方,和解決錯誤的方法<br />
  19. 19. Ch8 錯誤與成功<br />Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.<br />
  20. 20. 只有一兩處錯誤,但因此不能填完表單<br />更需清晰指出<br />Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.<br />
  21. 21. Ch8 錯誤與成功<br /><ul><li>錯誤訊息是唯一沒有疑問,適合用紅色的表單元件。</li></ul>Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.<br />
  22. 22. 第一屏的可能界線<br /><ul><li>對於超過一屏的長表單,把所有錯誤合併在表單開頭可能不是個好主意;把錯誤訊息放在每題旁邊較好。</li></ul>Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.<br />
  23. 23. Ch8 錯誤與成功<br />系統訊息的規劃<br />有多少種訊息類型?<br />錯誤訊息出現錯誤訊息只有兩個原因:<br />User輸入了系統無法接受的內容,因而中斷流程<br />系統發生嚴重錯誤,應提供user替代處理方案<br />成功訊息感謝並讚揚user完成表單,應當簡短貼心<br />其他訊息(教育、變相推銷、模稜兩可的訊息)不建議使用,若一定要使用,必須注意不增加表單的複雜度,並在視覺上與其他訊息類型有所區別<br />
  24. 24. Ch8 錯誤與成功<br />系統訊息的規劃<br />如何建立優秀的訊息?<br />為所有訊息類型建立樣本(template),包括視覺和措辭,有時還包括動態<br />確保所有消息像是同一家族,但互相又小有區別<br />訊息通常包含圖示、文字和外框<br />
  25. 25. Ch8 錯誤與成功<br />It only works to geeks.<br />
  26. 26. Ch8 錯誤與成功<br />邀請朋友<br />成功訊息<br />恭喜。表揚一下user他們完成的哪些事情<br />不得阻礙人們繼續前進,可以鼓勵他們做些其他的<br />或是把成果顯示給user看<br />http://www.rositacortez.com/social-media-101/facebook-friend-invite-the-ultimate-guide/<br />
  27. 27. Ch8 錯誤與成功<br />成功feedback:把user新建的訊息立即顯示在列表頁<br />Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.<br />
  28. 28. 問題與討論<br />http://www.flickr.com/photos/streetfly_jz/2786919875/in/photostream/<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×