建站常識(shí)
互聯(lián)網(wǎng)表單設(shè)計(jì)-自動(dòng)即時(shí)幫助
2009-05-06 07:53:00
自動(dòng)即時(shí)幫助
自動(dòng)即時(shí)幫助系統(tǒng)在最合適的時(shí)間、地點(diǎn)顯示信息。例如,點(diǎn)擊或用Tab鍵激活輸入框,相關(guān)幫助文字就出現(xiàn)在輸入框旁邊或下方。圖7.4,Wufoo網(wǎng)站采用了這種行為。
圖7.4
人們填寫(xiě)Wufoo網(wǎng)站輸入框時(shí),幫助文字自動(dòng)出現(xiàn)。
為確保用戶(hù)能預(yù)計(jì)幫助文字的出現(xiàn)位置,這種方法需要有專(zhuān)門(mén)網(wǎng)頁(yè)區(qū)域顯示動(dòng)態(tài)幫助文字。以Wufoo網(wǎng)站為例,表單右側(cè)滿(mǎn)足了這種需要。其優(yōu)點(diǎn)在于幫助文字總是出現(xiàn)在輸入框右側(cè),而缺點(diǎn)是會(huì)與表單左側(cè)輸入框脫離。
圖7.5,F(xiàn)orm Assembly網(wǎng)站采用的自動(dòng)即時(shí)幫助系統(tǒng)不需要屏幕有專(zhuān)門(mén)區(qū)域顯示幫助文字,而是直接顯示在相關(guān)輸入框下方。其優(yōu)點(diǎn)是幫助文字與問(wèn)題相鄰,關(guān)聯(lián)出錯(cuò)機(jī)會(huì)很小,缺點(diǎn)是幫助文字會(huì)遮住其他輸入框,如圖7.5。
圖7.5
Form Assembly網(wǎng)站采用的另一種即時(shí)幫助顯示風(fēng)格。
幫助文字應(yīng)盡可能具體,每個(gè)輸入框通常都需要特定幫助文字。不過(guò)有時(shí)候,最具體的幫助文字就是一組相關(guān)輸入框。
如果幫助文字更適用于一組相關(guān)輸入框、而不是一個(gè)輸入框,自動(dòng)即時(shí)幫助同樣有用。例如,圖7.6,SnapTax網(wǎng)絡(luò)應(yīng)用工具自動(dòng)高亮顯示每組相關(guān)資料:身份證,配偶,地址等等。
圖7.6
SnapTax網(wǎng)站自動(dòng)顯示相關(guān)輸入框組的幫助文字。
值得注意的是,上述所有例子都采用了強(qiáng)大視覺(jué)元素將輸入框和對(duì)應(yīng)幫助文字聯(lián)系在一起。圖7.4,Wufoo網(wǎng)站采用兩個(gè)對(duì)齊矩形。圖7.5,F(xiàn)orm Assembly網(wǎng)站采用粗體黃色和箭頭。圖7.6,SnapTax網(wǎng)站背景顏色相同。
這種自動(dòng)幫助系統(tǒng)有一個(gè)潛在缺點(diǎn),只有開(kāi)始填表時(shí),人們才知道是否有幫助文字。因此,需要幫助的人會(huì)覺(jué)得失望,甚至不愿嘗試。
有種辦法彌補(bǔ)這個(gè)缺點(diǎn),即輸入框內(nèi)顯示幫助文字。這種方法和自動(dòng)即時(shí)幫助文字完全相反,幫助文字出現(xiàn)在訪問(wèn)輸入框之前,離開(kāi)輸入框之后就不再出現(xiàn)。因?yàn)槟芰⒖炭吹綆椭淖郑藗円豢吹奖韱尉椭朗欠裼袔椭淖帧?/p>
但只有一種幫助文字適合輸入框中顯示,即總結(jié)推薦回答方式的幫助文字。解釋問(wèn)題是什么、為什么問(wèn)這些問(wèn)題、是否必須回答的幫助文字不應(yīng)以這種形式出現(xiàn)。圖7.7,郵政編碼填寫(xiě)方式,答案已包含在輸入框中。而對(duì)于為什么要提供郵政編碼的原因出現(xiàn)在鄰近輸入框的地方。
圖7.7
LinkedIn網(wǎng)站采用帶幫助文字的輸入框。
適用于輸入框內(nèi)標(biāo)簽的相同附加說(shuō)明(見(jiàn)第4章)也適用于輸入框內(nèi)幫助文字:
* 填寫(xiě)表單時(shí),確保幫助文字消失,確保幫助文字不會(huì)成為答案的一部分。
* 一旦開(kāi)始填寫(xiě)表單,幫助文字就會(huì)消失,人們失去任何幫助。
* 復(fù)雜輸入要謹(jǐn)慎使用這種辦法,幫助總是可見(jiàn)有助于復(fù)雜輸入。
* 確保人們能區(qū)別要填入輸入框的答案和輸入框中幫助文字。圖7.7,Linkedin網(wǎng)站,幫助文字是灰色,并包括前綴“eg:”。
自動(dòng)即時(shí)幫助系統(tǒng)不會(huì)預(yù)先顯示幫助文字,最適合用于人們可以回答、但不清楚如何回答的問(wèn)題。如果每個(gè)輸入框都需要特定幫助文字,可以考慮采用幫助顯示與輸入框毗鄰區(qū)域的方法。如果說(shuō)明文字用于輸入框組,可以考慮采用在可預(yù)見(jiàn)位置始終顯示幫助文本的辦法。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺(jué)觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁(yè)設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺(tái)管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢(shì)?
延伸閱讀
- [2009-05-31 08:15:00] 有效網(wǎng)頁(yè)表單的八條規(guī)則(譯)
- [2009-06-24 08:10:00] 互聯(lián)網(wǎng)表單設(shè)計(jì) 第十一章 額外輸入(4)循序漸進(jìn)
- [2010-03-03 14:19:00] 網(wǎng)頁(yè)表單中的行為也分主次
- [2007-04-18 09:04:00] Web 表單設(shè)計(jì)原則和實(shí)踐
- [2009-12-18 14:55:00] [譯]以用戶(hù)為中心的WEB表單
- [2006-11-24 09:47:00] 淺議Web網(wǎng)頁(yè)Form表單設(shè)計(jì)技巧
- [2009-07-15 08:03:00] 表單設(shè)計(jì)之基于選擇的輸入(9)
- [2009-08-07 07:45:00] 互聯(lián)網(wǎng)表單設(shè)計(jì)之消失的表單
- [2010-12-03 08:18:00] Web表單設(shè)計(jì):表單結(jié)構(gòu)
- [2007-06-22 12:25:00] 輸入表單的三種布局
- [2010-07-27 16:06:00] Web表單設(shè)計(jì)之注冊(cè)表單
- [2009-04-27 14:49:00] 設(shè)計(jì)表單的標(biāo)簽和輸入?yún)^(qū)
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
網(wǎng)頁(yè)設(shè)計(jì) 互聯(lián)網(wǎng) 網(wǎng)站設(shè)計(jì)趨勢(shì) 青島高端網(wǎng)站建設(shè) 集團(tuán)官網(wǎng) 青島不錯(cuò)的英文網(wǎng)站建設(shè)公司 青島網(wǎng)站制作 網(wǎng)站制作 營(yíng)銷(xiāo)策略 GOOGLE 青島輪胎網(wǎng)站設(shè)計(jì)公司 網(wǎng)站的速度 手機(jī)網(wǎng)站 圖形網(wǎng)格 青島網(wǎng)站優(yōu)化 手機(jī)端的網(wǎng)站 網(wǎng)站改版 青島抖音小程序開(kāi)發(fā) 營(yíng)銷(xiāo)型網(wǎng)站 膠南網(wǎng)站建設(shè)公司 企業(yè)網(wǎng)站為什么要備案 青島網(wǎng)站案例 青島高端網(wǎng)站建設(shè)公司哪家好 輪胎網(wǎng)站設(shè)計(jì) 青島開(kāi)發(fā)區(qū)建站公司 響應(yīng)式設(shè)計(jì) 手機(jī)網(wǎng)站建設(shè) 審美 微信小程序 網(wǎng)站視覺(jué)