Web表單設計讀書會

幫助文字 Ch7/ 錯誤與成功 Ch8

2011.2.21

鄒心瑜 Hsinyu Chou

hsinyu.chou@isobar.com #3530

Ch7 幫助(提示)文字

Ch7 幫助文字

• 幫助(提示)文字

– 除了標籤及輸入框，幫助文字可告訴user如何回答問題

– 如果需要太多幫助文字來解釋，表示

• 問題wording不當

• 問題太複雜

• 沒必要的問題太多

應重新檢視整張表單的問題

Ch7 幫助文字

Wroblewski, Luke. 2008. Web Form Design:

Filling In the Blanks.New York: Rosenfeld Media.

Ch7 幫助文字

• 何時該加上幫助文字？

– (眼動儀研究)人們通常不讀說明，直接跳到第一個輸入框

– 哪些時候需要幫助文字？

• User不熟悉表單要求的資料(例:ISBN, 註冊碼)

• User對輸入資料有疑慮(為什麼要填生日？)(不刷卡也要填信用卡號嗎？)

• 系統建議填寫特定格式(請用逗號分開多個搜尋字串)

• 是必填還是可以不填？

Ch7 幫助文字

• 如果不得不放許多幫助文字，表示必須解釋的項目很多，

應考慮由系統自動即時提示

Ch7 幫助文字

• 自動即時提示

– 類型一：以點擊(click)輸入框觸發提示文字

Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.

隱藏的提示文字

需要固定的一塊空間顯示

不需要固定空間

(但會蓋住其他元件)

Ch7 幫助文字

Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.

整組輸入框一起解釋

– 需要有視覺提示，表達輸入框與提示之間的關聯

Ch7 幫助文字

– 可稍微揭露隱藏版說明的方法：輸入框內提示

– 在還未按下輸入框前，就能看到提示

– 內容最好是『填寫範例』

– 互動上需注意的事項：

• User按下輸入框時(focus)，提示文字應消失

• 應保證提示文字和user真正的答案是可以分辨的

• 需要複雜說明時不宜放在框內

Ch7 幫助文字

– 類型二：以一致的icon或文字暗示user觸發提示

Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.

下一項往下跳了，

妨礙user對問題位置

的感知

Ch7 幫助文字

Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.

– 懸浮式：滑鼠移到感應區(mouseover)才出現提示

– 優點：允許user依熟悉的程度來顯示/隱藏提示

懸浮區域做大一點，

以便user輕易觸發

Ch7 幫助文字

Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.

– 類型三：複雜型提示(含圖表)，通常劃定區塊來顯示

優點：需要多次保留和返回的表單，可藉此喚醒user記憶

右欄說明隨左方

填表狀況而更新

Ch7 幫助文字

Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.

右欄說明逐步更新，

且能關閉

Ch8 錯誤與成功

Ch8 錯誤與成功

– 與幫助文字的原則類似

– 再周到的表單，都會有user誤解

– 錯誤訊息的首要目標是讓人們知道發生錯誤了，

一旦出錯時，這是網頁上最重要的元素

• 錯誤訊息該具備的條件：

1. 視覺表現要與其重要性相當

2. 盡量把錯誤訊息放在相關問題旁邊

3. 提供解決錯誤的途徑

4. 保持所有錯誤訊息的風格一致，以利辨認

Ch8 錯誤與成功

Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.

提供解決錯誤的方法

Ch8 錯誤與成功

– 雙重視覺強調：

圖案 + 文字，(錯誤項目 + 進一步說明)可幫助視障、色盲者，也對一般user有用

– 確保風格與主要錯誤訊息匹配

Ch8 錯誤與成功

• 處理同時發生的多個錯誤

– 雙重視覺強調發生更顯著的作用

– 同時指出錯誤發生的地方，和解決錯誤的方法

Ch8 錯誤與成功

Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.

Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.

只有一兩處錯誤，但因此不能填完表單

更需清晰指出

Ch8 錯誤與成功

– 錯誤訊息是唯一沒有疑問，適合用紅色的表單元件。

Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.

Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.

第一屏的可能界線

– 對於超過一屏的長表單，把所有錯誤合併在表單開頭

可能不是個好主意；把錯誤訊息放在每題旁邊較好。

Ch8 錯誤與成功

• 系統訊息的規劃

– 有多少種訊息類型？

1. 錯誤訊息

出現錯誤訊息只有兩個原因：

– User輸入了系統無法接受的內容，因而中斷流程

– 系統發生嚴重錯誤，應提供user替代處理方案

2. 成功訊息

感謝並讚揚user完成表單，應當簡短貼心

3. 其他訊息(教育、變相推銷、模稜兩可的訊息)

不建議使用，若一定要使用，必須注意不增加表單的複

雜度，並在視覺上與其他訊息類型有所區別

Ch8 錯誤與成功

• 系統訊息的規劃

– 如何建立優秀的訊息？

• 為所有訊息類型建立樣本(template)，包括視覺和措辭，

有時還包括動態

• 確保所有消息像是同一家族，但互相又小有區別

• 訊息通常包含圖示、文字和外框

Ch8 錯誤與成功

It only works to geeks.

Ch8 錯誤與成功

• 成功訊息

– 恭喜。表揚一下user他們完成的哪些事情

– 不得阻礙人們繼續前進，可以鼓勵他們做些其他的

– 或是把成果顯示給user看

邀請朋友

http://www.rositacortez.com/social-media-101/facebook-friend-invite-the-ultimate-guide/

Ch8 錯誤與成功

成功feedback：把user新建的訊息立即顯示在列表頁

Wroblewski, Luke. 2008. Web Form Design:Filling In the Blanks.New York: Rosenfeld Media.

問題與討論

http://www.flickr.com/photos/streetfly_jz/2786919875/in/photostream/