B端產(chǎn)品的篩選場景調(diào)研與設(shè)計(jì)優(yōu)化實(shí)踐
筆者通過調(diào)研B端后臺(tái)系統(tǒng)的篩選場景應(yīng)用,總結(jié)歸納了幾種基礎(chǔ)篩選、高級(jí)篩選及組合篩選的場景,基于此對(duì)自身產(chǎn)品的篩選場景應(yīng)用進(jìn)行分析、歸納最終輸出優(yōu)化設(shè)計(jì)方案,希望對(duì)你有所啟發(fā)。
一、篩選場景介紹
在B端后臺(tái)系統(tǒng)設(shè)計(jì)中,列表篩選的場景應(yīng)用最為常見,篩選的作用一方面是為了幫助用戶從眾多信息中快速提取、定位,以提高效率為基準(zhǔn);另一方面是為了科學(xué)的概括列表所具備的功能,提供用戶以相同特征的分類信息。
近期在研究B端產(chǎn)品領(lǐng)域后臺(tái)系統(tǒng)的列表篩選場景設(shè)計(jì),故希望通過此次設(shè)計(jì)分析,從產(chǎn)品易操作性角度展開設(shè)計(jì)優(yōu)化實(shí)踐,從而達(dá)到提升用產(chǎn)品滿意度的目的。
二、篩選場景類型
篩選是將一類數(shù)據(jù)展示,同時(shí)一類數(shù)據(jù)隱藏。
常見的篩選形式有:分類篩選、關(guān)鍵字篩選(搜索)、條件篩選、組合篩選等。大體可分為基礎(chǔ)篩選、高級(jí)篩選通常是多個(gè)篩選條件的多維度組合,其實(shí)有別于單一的搜索和導(dǎo)航。
三、競品分析調(diào)研
1. 篩選的組成
圖(1)
舉例:騰訊云
圖(2)騰訊云負(fù)載均衡實(shí)例
- 場景:適用于簡單的查詢搜索場景,用戶快捷篩選,蘊(yùn)含的邏輯是“且”
- 優(yōu)點(diǎn):搜索操作自如
- 缺點(diǎn):不太適合復(fù)雜篩選場景
2. 高級(jí)篩選
圖(3)
- 篩選關(guān)系:有并級(jí)“且”、交級(jí)“或”的關(guān)聯(lián)關(guān)系
- 場景:滿足更多用戶場景,為用戶提供多字段、多層篩選關(guān)系、多個(gè)操作
3. 組合篩選
(1)平鋪型
平鋪就是將所有篩選條件全部列出,B端產(chǎn)品場景應(yīng)用較少,在C端產(chǎn)品中較為常見,便于用戶直接獲取選項(xiàng)內(nèi)容,減少操作步驟等。
舉例:在線購物類平臺(tái)
圖(4)京東在線購物商城
圖(5)當(dāng)當(dāng)在線購物商城
圖(6)騰訊云告警策略
- 應(yīng)用場景:用戶搜索結(jié)果數(shù)據(jù)量大,搜索結(jié)果不能滿足用戶預(yù)期,需要通過篩選對(duì)數(shù)據(jù)進(jìn)行再次過濾,達(dá)到滿足精準(zhǔn)結(jié)果的目的
- 優(yōu)點(diǎn):引導(dǎo)用戶快速理解篩選項(xiàng)目,幫助用戶快速定位結(jié)果
- 缺點(diǎn):控件占據(jù)頁面空間較大,需要占據(jù)大面積展示平鋪效果
通常為避免篩選項(xiàng)太多,會(huì)提供展開、收起操作,對(duì)應(yīng)每個(gè)篩選條件進(jìn)行收折
(2)收折型
舉例:阿里云、騰訊云
圖(7)阿里云云服務(wù)實(shí)例
圖(8)騰訊云數(shù)據(jù)遷移
- 場景:在B端產(chǎn)品中,下拉框展開(高級(jí)篩選)對(duì)于用戶而言認(rèn)知成本較低,操作性強(qiáng),較為簡單
- 優(yōu)點(diǎn):常用使用頻率較高的選項(xiàng)可優(yōu)先快速篩選、減少頁面占用空間
- 缺點(diǎn):信息量大時(shí),頁面顯示冗雜且占頁面比例較大,平臺(tái)通用性較差
4. 表頭篩選型
是一種列表內(nèi)置篩選形式,類似Excel表格的操作。點(diǎn)擊表單進(jìn)行篩選按鈕,可以將篩選字段直接帶入。
舉例:阿里云、華為云、騰訊云等
圖(9)阿里云云盤
圖(10)來源華為云云監(jiān)控
圖(11)騰訊云數(shù)據(jù)庫實(shí)例
- 優(yōu)點(diǎn):通過表頭,用戶更快捷進(jìn)入篩選,一般情況下表單左側(cè)數(shù)據(jù)篩選頻次越高
- 缺點(diǎn):篩選的圖標(biāo)各平臺(tái)不一,對(duì)于首次使用者來說陌生,影響用戶對(duì)表頭的識(shí)別,交互形式需要學(xué)習(xí)成本
四、產(chǎn)品篩選場景設(shè)計(jì)優(yōu)化實(shí)踐
根據(jù)現(xiàn)有平臺(tái)頁面梳理,梳理出涉及篩選場景的頁面,這里通過舉一個(gè)典型場景分析和優(yōu)化。(由于實(shí)際頁面涉密,所以打馬了)
圖(12)模塊原頁面
第一步拆解:
頁面“隱藏“式篩選形式需要經(jīng)過“篩選”按鈕點(diǎn)擊展開,可以發(fā)現(xiàn)默認(rèn)展開時(shí)陳列信息的已選項(xiàng)均為全部。該場景中默認(rèn)全部的數(shù)據(jù)量較大,篩選的作用是用于數(shù)據(jù)過濾,事先通過定義好的過濾值進(jìn)行操作。
第二步分析:
根據(jù)以上過濾項(xiàng)目及過濾值的對(duì)應(yīng)關(guān)系,可根據(jù)列表常見的篩選方式,歸納為列表上方篩選及表頭篩選。
第三步歸納:
表頭篩選
放置于列表表頭上的篩選,受到列表表頭信息的限制,篩選的內(nèi)容僅限于特定、單次列的篩選。
對(duì)「故障告警」過濾項(xiàng)拆解時(shí)發(fā)現(xiàn),有幾項(xiàng)分別能對(duì)應(yīng)表頭信息,可通過放置在列表表頭標(biāo)簽上進(jìn)行單次下拉篩選,這里的場景是下拉多選,如圖(13)
圖(13)表頭篩選優(yōu)化
列表上方篩選
篩選功能位于列表上方,與表頭篩選不同的是,可單次進(jìn)行多列交叉篩選,過濾值不限于列表列的內(nèi)容
搜索
搜索字段可靈活方便進(jìn)行數(shù)據(jù)查詢。當(dāng)數(shù)據(jù)量大時(shí),通過搜索功能提升用戶查看數(shù)據(jù)的效率。對(duì)原頁面過濾項(xiàng)拆解時(shí)發(fā)現(xiàn),其中兩項(xiàng)涉及輸入搜索,對(duì)于用戶記憶要求較低,通過模糊搜索來提升查找數(shù)據(jù)的效率。在使用這兩項(xiàng)搜索時(shí)發(fā)現(xiàn),先通過某一項(xiàng)模糊搜索過濾得到第一版數(shù)據(jù),基于該版數(shù)據(jù),查看列表中的另一項(xiàng)信息,進(jìn)行下一步精確搜索,最終得到用戶想要的數(shù)據(jù)?;蛲瑫r(shí)輸入兩項(xiàng)(以某種分隔符號(hào)分割)進(jìn)行精確查詢,事半功倍提升用戶效率。如圖(14)
圖(14)搜索優(yōu)化
日期時(shí)間
因?yàn)闀r(shí)間篩選一般是對(duì)某個(gè)時(shí)間段的查詢,需要開始時(shí)間和結(jié)束時(shí)間,所以這里對(duì)日期的篩選條件單獨(dú)做處理展示。經(jīng)操作發(fā)現(xiàn)「全部時(shí)間」就是默認(rèn)最開始時(shí)間-最新時(shí)間,其他幾個(gè)選項(xiàng)是設(shè)置的快速時(shí)間段,是平臺(tái)上對(duì)用戶最常用的時(shí)間段進(jìn)行抽離作為選項(xiàng)。
由于日期選擇的條件多于5個(gè),且自定義時(shí)間長度不固定,所以設(shè)計(jì)采用整體下拉框選擇的形式,時(shí)間選項(xiàng)都置于內(nèi)側(cè),選擇結(jié)果反饋與下拉框中。如圖(15)
圖(15)日期選擇器優(yōu)化
按鈕
原按鈕形式過長,變換樣式成純文字或圖標(biāo)加提示的形式,同時(shí)對(duì)主、次按鈕進(jìn)行樣式區(qū)分。如圖(16)
圖(16)按鈕優(yōu)化
最終優(yōu)化方案見圖(17)、圖(18)
圖(17)優(yōu)化方案(一)表頭篩選+平鋪式
圖(18)優(yōu)化方案(二)表頭篩選+收折式
五、小結(jié)
通過調(diào)研產(chǎn)品平臺(tái)的篩選場景應(yīng)用,總結(jié)歸納了幾種基礎(chǔ)篩選、高級(jí)篩選及組合篩選的應(yīng)用場景,基于此對(duì)自身運(yùn)維平臺(tái)的篩選場景進(jìn)行分析、歸納最終輸出優(yōu)化設(shè)計(jì)方案。
其實(shí)在設(shè)計(jì)優(yōu)化過程中,產(chǎn)品的易操作性、信息層級(jí)、可拓展性都會(huì)促使設(shè)計(jì)需要結(jié)合場景思考問題。篩選功能當(dāng)然也要滿足實(shí)際場景需求,需考慮如何設(shè)計(jì)才能是否滿足用戶的實(shí)際操作路徑,是否符合用戶認(rèn)知,能否引導(dǎo)用戶使用該篩選功能等。設(shè)計(jì)之路道阻且長,如有不足之處,歡迎拍磚~
本文由@一時(shí)無兩 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash, 基于CC0協(xié)議
優(yōu)化部門啟發(fā)較大,以前篩選的運(yùn)用比較單一。多重篩選方式的結(jié)合是優(yōu)化用戶體驗(yàn)很好的思路