2023-8-16 ui設(shè)計分享達人
我們很多時候會在選擇設(shè)計方案上搖擺不定。自己覺得好的方案,看到別人是另外一種形式,又會覺得自己的是不是不太好。其實沒必要,每一種方案都有好與壞,很難做到100%完美,只能說在當前這個階段里接近完美。
就像小孩有了蟲牙,去醫(yī)院治療,醫(yī)生也會說有很多種方案。具體用哪一種會根據(jù)年齡、性別、牙齒生長情況來決定。比如:一個6歲的女孩,在不嚴重的情況下,醫(yī)生可能就建議清理后補一下;如果是一個5歲的男孩,當前牙齒還不錯,距離換牙還有比較長的一段時間,可能會給你放個普通點的牙套保護起來。
即使在這種情況下,也會有家長事后說放牙套感覺像是過渡治療。那如果不放,后面嚴重了,需要根管治療的時候,家長又會說為什么當初不放牙套。
其實,表單幫助系統(tǒng)也是如此
雖然表單標簽和輸入框的表現(xiàn)(展現(xiàn))方式,為填寫提供了有用線索。但有時只有這些元素還不夠。常見的方法是在標簽或者輸入框旁增加幫助文字“告訴”人們應(yīng)該如何回答問題。
例如:下圖中標簽與輸入框旁,都有幫助圖標引導(dǎo)用戶進行填寫。
它和校驗提示類似,都是幫助人們順利完成填寫任務(wù)。
因此,有很多實踐方法可以通用,如下:
1、提供幫助的場景
幫助文字只是告知人們應(yīng)該如何填寫,但并不是完成Web表單的關(guān)鍵。
由于人們往往不會去閱讀屏幕上的提示,這也會導(dǎo)致幫助文字產(chǎn)生問題。
眼動跟蹤研究表明,很多人看到表單時會直接跳到第一個輸入框。這是一種自然傾向,人們就想填完表單,能繼續(xù)到下一步!
但在以下場景中需要幫助文字:
1、人們不熟悉表單要求填入的內(nèi)容。例如:什么是數(shù)據(jù)分析?
2、人們質(zhì)疑為何要填入特定數(shù)據(jù)。例如:為什么要知道我的出生日期?
3、人們可能會關(guān)心數(shù)據(jù)安全或者隱私。例如:填寫信用卡號碼安全嗎?
4、系統(tǒng)推薦的數(shù)據(jù)填寫方式。例如:在填寫標簽時請用“逗號”隔開。
2、自動即時幫助
自動即時幫助系統(tǒng):指在幫助信息最合適的時間和位置顯示。
例如:下圖中點擊或者用 Tab鍵激活輸入框,相關(guān)幫助文字就出現(xiàn)在輸入框的右邊。 為了能讓幫助文字出現(xiàn)在人們預(yù)期的位置,自動即時幫助需要網(wǎng)頁上有一塊專門的區(qū)域來顯示動態(tài)幫助文字。
另外一種方法不需要屏幕上有專門的區(qū)域來顯示幫助文字,而是把幫助文字直接顯示在相關(guān)輸入框的下方。
例如:下圖校驗提示框(注:因沒找到對應(yīng)的幫助提示效果,所以就拿校驗提示舉例,要表達的效果是一樣)
其優(yōu)點是幫助文字與問題相鄰,很容易產(chǎn)生聯(lián)系,而缺點是幫助文字會遮住其他輸入框。
如果幫助文字更適用于一組相關(guān)輸入框、而不是單個輸入框,自動即時幫助同樣有用。 例如:觸發(fā)“數(shù)量”“型號”這一行,會自動高亮顯示每組信息的相關(guān)幫助信息。
以上這幾種自動幫助系統(tǒng)也有一個潛在缺點,即只有開始填表時,人們才知道是否有幫助文字。
有種辦法或許能彌補這個缺點,即在輸入框中顯示幫助文字。
這種方法和自動即時幫助文字相反,幫助文字出現(xiàn)在訪問輸入框之前,輸入內(nèi)容后就不再出現(xiàn)。由于能立刻看到幫助文字,所以人們一看到表單就可以得到幫助提示。
但這種方式適用于概括回答。例如:下圖中App Store URL輸入框中解釋了為什么需要填。
總結(jié): 由于自動即時幫助系統(tǒng)不會預(yù)先顯示幫助文字,因此最適合用于人們能回答但不清楚如何回答的問題。
3、用戶激活的即時幫助
用戶激活的即時幫助:是指在人們需要時提供幫助。這種方式通常采用一致的圖標、按鈕或文本鏈接,便于人們知道有幫助可供使用。
需要時,人們可以通過點擊或觸發(fā)的方式,來顯示相關(guān)幫助文字。
例如:下圖中觸發(fā)“問號”小圖標會顯示對應(yīng)的說明。
但這種方式也有一個缺點,即幫助符號靠近輸入框,而不是靠近標簽。之前表單相關(guān)文章中有說過,必填輸入框標志、符號和標簽聯(lián)系在一起有助于人們更容易地瀏覽到所需信息。
例如:在阿里云、騰訊云中很多提示都在標簽旁邊,但我不確定是不是所有頁面都是采用這種形式。通過頁面發(fā)現(xiàn)他們標簽都是采用的左對齊,如果是右對齊是不是也是在標簽后面?或者是根據(jù)相關(guān)度來規(guī)定,如果和標簽相關(guān)放在標簽旁,和輸入相關(guān)放輸入框旁。大家有興趣可以留意觀察一下。
雖然“問號”是最常用于顯示幫助內(nèi)容的符號,但也有其他符號能達到同樣目的(例如騰訊云中的“i”符合)。無論使用圖標、按鈕、文字,都是為了通過某種視覺線索來表明幫助的存在。
總結(jié): 如果表單所含問題復(fù)雜,或者表單會被相同的人重復(fù)使用,這類表單適合采用用戶激活的即時幫助。因為新用戶使用時可以訪問所有需要的幫助,而高級用戶只觸發(fā)一些幫助來喚醒記憶或者快速回答問題。
4、用戶激活的區(qū)域幫助
用戶激活的幫助文字還可以顯示在頁面固定(統(tǒng)一)位置,而不顯示在相關(guān)輸入框的毗鄰區(qū)域。顯示幫助文字的位置固定可以利用更大顯示面積,提供廣泛的幫助文字和內(nèi)容。
例如:幫助中需要展示圖形和圖表,同時人們可在固定位置顯示找到幫助文字。下圖是阿里云的幫助文檔浮層窗口。
有些產(chǎn)品也會采用瀏覽器新窗口打開的方式,來顯示大量的幫助信息。
另一種替代方法是利用毗鄰表單的統(tǒng)一區(qū)域來顯示相關(guān)幫助內(nèi)容。
例如:下圖表單右側(cè)有一欄專門顯示相關(guān)幫助文字,觸發(fā)與點擊表單會顯示對應(yīng)的幫助信息。
另外一種方式是通過點擊幫助,右側(cè)彈出提示信息,與上面不同之處是可以關(guān)閉,這樣更適合新用戶與老用的兼容。
總結(jié): 與即時幫助類似,用戶激活的區(qū)域幫助,更適合用于需要多次提供幫助的表單,尤其是復(fù)雜問題的表單。
5、最佳實踐
1、不要依賴幫助文字來彌補表單缺點。盡量減少表單中的幫助文字,以促成更好的設(shè)計方案;
2、幫助文字最適合解釋人們不熟悉的數(shù)據(jù),例如,為什么要問這些問題、安全和隱私、建議回答問題的方式及說明可填項;
3、簡潔的幫助文字靠近問題區(qū)域是最清晰的展示方式;
4、輸入框內(nèi)的幫助文字只能用于提供回答問題的方式;
5、如果人們知道表單問題答案,但不確定如何回答或者為什么回答,可以考慮使用自動即時幫助系統(tǒng);
6、如果表單問題人們不熟悉或者復(fù)雜,而且可能同樣的人會多次使用,可以考慮采用用戶激活的幫助系統(tǒng);
7、如果幫助內(nèi)容很多,可以使用區(qū)域幫助,不要使用即時幫助;
8、圖標、鏈接或按鈕用于用戶激活的幫助文字觸發(fā)器應(yīng)放在標簽旁,盡量不要放在輸入框旁;
9、如果要求用戶填入敏感資料,考慮使用有操作含義的幫助文字,允許人們確認資料安全。
作者:夜鶯YEAH
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
藍藍設(shè)計的小編 http://www.88yangsc.com