close

互聯網表單設計-自動即時幫助 -網上推廣


自動即時幫助

自動即時幫助系統在最合適的時間、地點顯示信息。例如,點擊或用Tab鍵激活輸入框,相關幫助文字就出現在輸入框旁邊或下方。圖7.4,Wufoo網站采用了這種行為。

 

圖7.4 http://www.flickr.com/photos/rosenfeldmedia/2367268378
人們填寫Wufoo網站輸入框時,幫助文字自動出現。

為確保用戶能預計幫助文字的出現位置,這種方法需要有專門網頁區域顯示動態幫助文字。以Wufoo網站為例,表單右側滿足了這種需要。其優點在于幫助文字總是出現在輸入框右側,而缺點是會與表單左側輸入框脫離。

圖7.5,Form Assembly網站采用的自動即時幫助系統不需要屏幕有專門區域顯示幫助文字,而是直接顯示在相關輸入框下方。其優點是幫助文字與問題相鄰,關聯出錯機會很小,缺點是幫助文字會遮住其他輸入框,如圖7.5。

 

圖7.5 http://www.flickr.com/photos/rosenfeldmedia/2366432243
Form Assembly網站采用的另一種即時幫助顯示風格。

幫助文字應盡可能具體,每個輸入框通常都需要特定幫助文字。不過有時候,最具體的幫助文字就是一組相關輸入框。

如果幫助文字更適用于一組相關輸入框、而不是一個輸入框,自動即時幫助同樣有用。例如,圖7.6,SnapTax網絡應用工具自動高亮顯示每組相關資料:身份證,配偶,地址等等。

 

圖7.6 http://www.flickr.com/photos/rosenfeldmedia/2367268468
SnapTax網站自動顯示相關輸入框組的幫助文字。

值得注意的是,上述所有例子都采用了強大視覺元素將輸入框和對應幫助文字聯系在一起。圖7.4,Wufoo網站采用兩個對齊矩形。圖7.5,Form Assembly網站采用粗體黃色和箭頭。圖7.6,SnapTax網站背景顏色相同。

這種自動幫助系統有一個潛在缺點,只有開始填表時,人們才知道是否有幫助文字。因此,需要幫助的人會覺得失望,甚至不愿嘗試。

有種辦法彌補這個缺點,即輸入框內顯示幫助文字。這種方法和自動即時幫助文字完全相反,幫助文字出現在訪問輸入框之前,離開輸入框之后就不再出現。因為能立刻看到幫助文字,人們一看到表單就知道是否有幫助文字。

但只有一種幫助文字適合輸入框中顯示,即總結推薦回答方式的幫助文字。解釋問題是什么、為什么問這些問題、是否必須回答的幫助文字不應以這種形式出現。圖7.7,郵政編碼填寫方式,答案已包含在輸入框中。而對于為什么要提供郵政編碼的原因出現在鄰近輸入框的地方。

 

圖7.7 http://www.flickr.com/photos/rosenfeldmedia/2367268488
LinkedIn網站采用帶幫助文字的輸入框。

適用于輸入框內標簽的相同附加說明(見第4章)也適用于輸入框內幫助文字:

* 填寫表單時,確保幫助文字消失,確保幫助文字不會成為答案的一部分。
* 一旦開始填寫表單,幫助文字就會消失,人們失去任何幫助。
* 復雜輸入要謹慎使用這種辦法,幫助總是可見有助于復雜輸入。
* 確保人們能區別要填入輸入框的答案和輸入框中幫助文字。圖7.7,Linkedin網站,幫助文字是灰色,并包括前綴“eg:”。

自動即時幫助系統不會預先顯示幫助文字,最適合用于人們可以回答、但不清楚如何回答的問題。如果每個輸入框都需要特定幫助文字,可以考慮采用幫助顯示與輸入框毗鄰區域的方法。如果說明文字用于輸入框組,可以考慮采用在可預見位置始終顯示幫助文本的辦法。

原文:http://www.yummyux.com/?p=412


arrow
arrow
    創作者介紹
    創作者 pagepe 的頭像
    pagepe

    pagepe的部落格

    pagepe 發表在 痞客邦 留言(0) 人氣()