他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

B端表單幫助系統多場景應用

2023-8-16    ui設計分享達人

我們很多時候會在選擇設計方案上搖擺不定。自己覺得好的方案,看到別人是另外一種形式,又會覺得自己的是不是不太好。其實沒必要,每一種方案都有好與壞,很難做到100%完美,只能說在當前這個階段里接近完美。

就像小孩有了蟲牙,去醫院治療,醫生也會說有很多種方案。具體用哪一種會根據年齡、性別、牙齒生長情況來決定。比如:一個6歲的女孩,在不嚴重的情況下,醫生可能就建議清理后補一下;如果是一個5歲的男孩,當前牙齒還不錯,距離換牙還有比較長的一段時間,可能會給你放個普通點的牙套保護起來。

即使在這種情況下,也會有家長事后說放牙套感覺像是過渡治療。那如果不放,后面嚴重了,需要根管治療的時候,家長又會說為什么當初不放牙套。

其實,表單幫助系統也是如此
雖然表單標簽和輸入框的表現(展現)方式,為填寫提供了有用線索。但有時只有這些元素還不夠。常見的方法是在標簽或者輸入框旁增加幫助文字“告訴”人們應該如何回答問題。

例如:下圖中標簽與輸入框旁,都有幫助圖標引導用戶進行填寫。

它和校驗提示類似,都是幫助人們順利完成填寫任務。

因此,有很多實踐方法可以通用,如下:

1、提供幫助的場景

幫助文字只是告知人們應該如何填寫,但并不是完成Web表單的關鍵。

由于人們往往不會去閱讀屏幕上的提示,這也會導致幫助文字產生問題。

眼動跟蹤研究表明,很多人看到表單時會直接跳到第一個輸入框。這是一種自然傾向,人們就想填完表單,能繼續到下一步!

但在以下場景中需要幫助文字:

1、人們不熟悉表單要求填入的內容。例如:什么是數據分析?
2、人們質疑為何要填入特定數據。例如:為什么要知道我的出生日期?
3、人們可能會關心數據安全或者隱私。例如:填寫信用卡號碼安全嗎?
4、系統推薦的數據填寫方式。例如:在填寫標簽時請用“逗號”隔開。

2、自動即時幫助

自動即時幫助系統:指在幫助信息最合適的時間和位置顯示。

例如:下圖中點擊或者用 Tab鍵激活輸入框,相關幫助文字就出現在輸入框的右邊。 為了能讓幫助文字出現在人們預期的位置,自動即時幫助需要網頁上有一塊專門的區域來顯示動態幫助文字。

另外一種方法不需要屏幕上有專門的區域來顯示幫助文字,而是把幫助文字直接顯示在相關輸入框的下方。

例如:下圖校驗提示框(注:因沒找到對應的幫助提示效果,所以就拿校驗提示舉例,要表達的效果是一樣)
其優點是幫助文字與問題相鄰,很容易產生聯系,而缺點是幫助文字會遮住其他輸入框。

如果幫助文字更適用于一組相關輸入框、而不是單個輸入框,自動即時幫助同樣有用。 例如:觸發“數量”“型號”這一行,會自動高亮顯示每組信息的相關幫助信息。

以上這幾種自動幫助系統也有一個潛在缺點,即只有開始填表時,人們才知道是否有幫助文字。

有種辦法或許能彌補這個缺點,即在輸入框中顯示幫助文字。
這種方法和自動即時幫助文字相反,幫助文字出現在訪問輸入框之前,輸入內容后就不再出現。由于能立刻看到幫助文字,所以人們一看到表單就可以得到幫助提示。

但這種方式適用于概括回答。例如:下圖中App Store URL輸入框中解釋了為什么需要填。

總結: 由于自動即時幫助系統不會預先顯示幫助文字,因此最適合用于人們能回答但不清楚如何回答的問題。

3、用戶激活的即時幫助

用戶激活的即時幫助:是指在人們需要時提供幫助。這種方式通常采用一致的圖標、按鈕或文本鏈接,便于人們知道有幫助可供使用。
需要時,人們可以通過點擊或觸發的方式,來顯示相關幫助文字。

例如:下圖中觸發“問號”小圖標會顯示對應的說明。

但這種方式也有一個缺點,即幫助符號靠近輸入框,而不是靠近標簽。之前表單相關文章中有說過,必填輸入框標志、符號和標簽聯系在一起有助于人們更容易地瀏覽到所需信息。
例如:在阿里云、騰訊云中很多提示都在標簽旁邊,但我不確定是不是所有頁面都是采用這種形式。通過頁面發現他們標簽都是采用的左對齊,如果是右對齊是不是也是在標簽后面?或者是根據相關度來規定,如果和標簽相關放在標簽旁,和輸入相關放輸入框旁。大家有興趣可以留意觀察一下。

雖然“問號”是最常用于顯示幫助內容的符號,但也有其他符號能達到同樣目的(例如騰訊云中的“i”符合)。無論使用圖標、按鈕、文字,都是為了通過某種視覺線索來表明幫助的存在。

總結: 如果表單所含問題復雜,或者表單會被相同的人重復使用,這類表單適合采用用戶激活的即時幫助。因為新用戶使用時可以訪問所有需要的幫助,而高級用戶只觸發一些幫助來喚醒記憶或者快速回答問題。

4、用戶激活的區域幫助

用戶激活的幫助文字還可以顯示在頁面固定(統一)位置,而不顯示在相關輸入框的毗鄰區域。顯示幫助文字的位置固定可以利用更大顯示面積,提供廣泛的幫助文字和內容。

例如:幫助中需要展示圖形和圖表,同時人們可在固定位置顯示找到幫助文字。下圖是阿里云的幫助文檔浮層窗口。

有些產品也會采用瀏覽器新窗口打開的方式,來顯示大量的幫助信息。

另一種替代方法是利用毗鄰表單的統一區域來顯示相關幫助內容。

例如:下圖表單右側有一欄專門顯示相關幫助文字,觸發與點擊表單會顯示對應的幫助信息。

另外一種方式是通過點擊幫助,右側彈出提示信息,與上面不同之處是可以關閉,這樣更適合新用戶與老用的兼容。

總結: 與即時幫助類似,用戶激活的區域幫助,更適合用于需要多次提供幫助的表單,尤其是復雜問題的表單。

5、最佳實踐

1、不要依賴幫助文字來彌補表單缺點。盡量減少表單中的幫助文字,以促成更好的設計方案;
2、幫助文字最適合解釋人們不熟悉的數據,例如,為什么要問這些問題、安全和隱私、建議回答問題的方式及說明可填項;
3、簡潔的幫助文字靠近問題區域是最清晰的展示方式;
4、輸入框內的幫助文字只能用于提供回答問題的方式;
5、如果人們知道表單問題答案,但不確定如何回答或者為什么回答,可以考慮使用自動即時幫助系統;
6、如果表單問題人們不熟悉或者復雜,而且可能同樣的人會多次使用,可以考慮采用用戶激活的幫助系統;
7、如果幫助內容很多,可以使用區域幫助,不要使用即時幫助;
8、圖標、鏈接或按鈕用于用戶激活的幫助文字觸發器應放在標簽旁,盡量不要放在輸入框旁;
9、如果要求用戶填入敏感資料,考慮使用有操作含義的幫助文字,允許人們確認資料安全。

作者:夜鶯YEAH
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

日歷

鏈接

個人資料

藍藍設計的小編 http://m.ssll180.com

存檔