大廠B端實(shí)戰(zhàn)!提效90%的列表是如何設(shè)計(jì)的?
前言
為什么我們要做列表創(chuàng)新提效?
列表是百度商業(yè) B 端平臺(tái)最典型的模塊之一,據(jù)百度商業(yè) B 端平臺(tái)埋點(diǎn)數(shù)據(jù)統(tǒng)計(jì)顯示,列表 PV 占平臺(tái)總 PV 的 40%,列表操作時(shí)長(zhǎng)占平臺(tái) 47%。列表承載了客戶瀏覽數(shù)據(jù)、查找數(shù)據(jù)、管理數(shù)據(jù)的重要功能,是客戶重點(diǎn)使用和關(guān)注的區(qū)域。
然而據(jù)百度商業(yè)平臺(tái)體驗(yàn)監(jiān)測(cè)報(bào)告顯示,平臺(tái)列表模塊滿意度 53.9%,低于平臺(tái)平均滿意度分值(55.6%),不滿意歸因主要集中在性能卡頓、交互操作效率低兩方面。
基于以上兩方面的原因,我們從客戶視角出發(fā),設(shè)定設(shè)計(jì)目標(biāo)為列表體驗(yàn)創(chuàng)新升級(jí), 提升列表核心場(chǎng)景操作效率以及客戶滿意度。針對(duì)「瀏覽數(shù)據(jù)」「查找數(shù)據(jù)」「管理數(shù)據(jù)」三大核心場(chǎng)景分析量化客戶體驗(yàn)痛點(diǎn),通過打造全屏交互框架、創(chuàng)新設(shè)計(jì) 4 個(gè)交互模式、增加智能查詢等舉措,給客戶帶來(lái)「更全面」「更便捷」「更高效」的列表使用體驗(yàn),提升客戶滿意度,助力業(yè)務(wù)達(dá)成目標(biāo)。
一、瀏覽數(shù)據(jù) 更全面
在百度商業(yè)平臺(tái)中,列表在整個(gè)頁(yè)面中占比僅 40%左右。同樣是廣告投放平臺(tái)的競(jìng)品巨量廣告其列表頁(yè)面占比為 70%左右,對(duì)競(jìng)低 30%,可見我們的列表區(qū)域屏效是很低的。屏效低直接影響到客戶瀏覽效率,以百度商業(yè)平臺(tái)優(yōu)化師小王瀏覽推廣計(jì)劃列表的場(chǎng)景為例來(lái)說明:
「某個(gè)大客戶一早就很焦慮的在如流上告訴小王一個(gè)在投的廣告計(jì)劃數(shù)據(jù)表現(xiàn)很差,希望他幫忙查找原因。小王打開 16 寸的筆記本在推廣計(jì)劃列表中搜索定位到該計(jì)劃名稱,橫向掃視了這個(gè)計(jì)劃的所有關(guān)鍵數(shù)據(jù)指標(biāo),心里對(duì)數(shù)據(jù)表現(xiàn)有了數(shù)。這時(shí)他想通過縱向?qū)Ρ绕渌惐憩F(xiàn)優(yōu)異的計(jì)劃來(lái)嘗試定位問題進(jìn)而做出優(yōu)化?!?/p>
上述瀏覽數(shù)據(jù)場(chǎng)景中,客戶橫向查看單行關(guān)鍵數(shù)據(jù)、縱向?qū)Ρ饶承?shù)據(jù)指標(biāo)的行為對(duì)一屏能顯示的行數(shù)有直接訴求,當(dāng)列表頁(yè)面占比低時(shí),顯示的行數(shù)、列數(shù)都有限,進(jìn)而導(dǎo)致瀏覽、對(duì)比的效率非常低。
剛開始,我們嘗試對(duì)列表頁(yè)面布局進(jìn)行全新布局調(diào)整,從而提升列表頁(yè)面占比。然而,考慮到百度商業(yè)平臺(tái)客戶覆蓋量大,在原列表頁(yè)面直接進(jìn)行大幅度布局優(yōu)化,成本高且用戶接受程度不可控。因此設(shè)計(jì)側(cè)探索嘗試全屏沉浸模式,讓用戶「看的更全面」。
1. 打造全屏交互框架,沉浸體驗(yàn)提屏效
用戶在列表頁(yè)面一鍵進(jìn)入到沉浸的全屏交互框架中,列表頁(yè)面占比提升至 90%。同時(shí),我們還針對(duì)全屏沉浸模式給出了全新的緊湊型 UI 方案,通過采用文字按鈕更輕量,縮減列高列寬更緊湊的設(shè)計(jì)手段,在 16 寸屏幕下,縱向?qū)崿F(xiàn)展現(xiàn)行數(shù)從 8 行增加至 19 行,充分提升了空間利用率。
2. 多標(biāo)簽任務(wù)交互模式,無(wú)縫切換效率高
平臺(tái)中大量涉及由某一項(xiàng)觸發(fā)下鉆到其他項(xiàng)的場(chǎng)景,平臺(tái)原本的交互形式是打開新的瀏覽器頁(yè)簽去加載下鉆頁(yè)面。然而在全屏沉浸模式下,如依然保持外跳的交互,那客戶查看數(shù)據(jù)時(shí)需先退出當(dāng)前全屏沉浸模式,然后在外跳鏈接中再打開全屏模式,整體操作路徑長(zhǎng)效率低,因而需給出新的交互模式。我們借鑒瀏覽器頁(yè)標(biāo)簽邏輯,提供全屏模式下的多任務(wù)標(biāo)簽卡,用戶可在沉浸模式下,通過切換標(biāo)簽,完成數(shù)據(jù)管理,高效便捷。
二、查找數(shù)據(jù) 更便捷
讓我們繼續(xù)跟隨上述優(yōu)化師小王的視角:
「小王通過對(duì)比分析以及和客戶深度溝通后,發(fā)現(xiàn)問題在于該計(jì)劃的部分關(guān)鍵詞出價(jià)過低導(dǎo)致廣告曝光不足。于是他打開關(guān)鍵詞列表中,篩選出該計(jì)劃下的出價(jià)低于 12 元的包含“鮮花”字樣的全部關(guān)鍵詞?!?/p>
在上述查找數(shù)據(jù)場(chǎng)景中,小王需要針對(duì)計(jì)劃名稱、出價(jià)、關(guān)鍵詞名稱三項(xiàng)發(fā)起復(fù)合篩選。而目前在百度商業(yè)平臺(tái)中,這種復(fù)合篩選只能通過多次發(fā)起單個(gè)篩選來(lái)完成,而單個(gè)篩選就需 4 步,他需要三次發(fā)起單個(gè)篩選,共 12 步才能完成這次復(fù)合篩選,操作復(fù)雜且效率低下。
1. 組合篩選交互模式,篩選操作減步長(zhǎng)
針對(duì)上述操作效率低下的問題,設(shè)計(jì)側(cè)給出組合篩選交互模式。在組合篩選模式下,同樣的篩選行為僅需點(diǎn)擊篩選按鈕,再操作窗口中 3 項(xiàng)篩選項(xiàng),點(diǎn)擊確定完成篩選,共 5 步即可完成,篩選操作較之前提效 58%。
2. 增加智能查詢,自然語(yǔ)義下達(dá)指令,查詢友好便捷
通過上述描述的場(chǎng)景不難發(fā)現(xiàn),客戶查找其實(shí)是有明確的思路的,這種思路一般是自然語(yǔ)言的表達(dá),優(yōu)化師需將自然語(yǔ)義轉(zhuǎn)換成系統(tǒng)表單表達(dá)。與其讓用戶自己轉(zhuǎn)化,不如直接滿足他自然語(yǔ)義查詢。通過咨詢技術(shù)同學(xué),確認(rèn)了方案的技術(shù)可行性后,給出了智能查詢方案,用戶可通過自然語(yǔ)言自由表達(dá)查找訴求,平臺(tái)智能過濾篩選數(shù)據(jù),整個(gè)查找過程體驗(yàn)更友好便捷。
三、管理數(shù)據(jù) 更高效
百度商業(yè)平臺(tái)的優(yōu)化師人均帶中小客戶 100+,日常管理數(shù)據(jù)壓力巨大,這也對(duì)平臺(tái)操作效率提出了很高的要求。而目前列表行內(nèi)操作以及批量操作都存在效率低下的痛點(diǎn)。我們接著以優(yōu)化師小王為例:
「總算篩選查找到該計(jì)劃全部出價(jià)低的關(guān)鍵詞后,小王在列表中逐一選擇其中數(shù)據(jù)表現(xiàn)不好的關(guān)鍵詞,隨后修改這些關(guān)鍵詞的出價(jià)?!?/p>
小王完成這次修改價(jià)格的批量操作需 3 步:點(diǎn)擊選擇每一個(gè)要改正的關(guān)鍵詞所屬行前方的 checkbox→點(diǎn)擊批量操作下拉按鈕→點(diǎn)擊選擇所需的操作。某些時(shí)候,優(yōu)化師是針對(duì)單行中若干數(shù)據(jù)進(jìn)行編輯,而這些數(shù)據(jù)的行內(nèi)操作分散在各列,鼠標(biāo)橫滾距離長(zhǎng)。
針對(duì)這些痛點(diǎn),我們?cè)谌脸两J较?,?chuàng)新提出「跨行框選」、「右鍵菜單」、「快捷鍵」三交互模式,優(yōu)化師可在頁(yè)面中根據(jù)訴求,隨時(shí)發(fā)起操作,使得原本低效的批量操作和行內(nèi)操作簡(jiǎn)單高效,有效緩解優(yōu)化師帶戶壓力。
1. 跨行框選交互模式,批量操作減步長(zhǎng)
針對(duì)以上痛點(diǎn),設(shè)計(jì)提出跨行框選模式,客戶僅需框選要操作的行即可喚起操作菜單,批量操作由原先的 3 步操作減至 2 步,提效 33%。
2. 右鍵菜單聚類操作項(xiàng),高頻操作快捷鍵,行內(nèi)操作提效
同時(shí),客戶在頁(yè)面中任何單元格內(nèi)可直接點(diǎn)擊喚起右鍵菜單,菜單中按照客戶操作頻率以及功能相關(guān)性進(jìn)行聚類,客戶無(wú)需左右拉動(dòng)滾動(dòng)條,直接選擇所需操作即可,大幅提升行內(nèi)操作效率。
總結(jié)
在以上設(shè)計(jì)主張上線前,設(shè)計(jì)側(cè)聯(lián)合研發(fā)共同確認(rèn)了埋點(diǎn)監(jiān)控?cái)?shù)據(jù)口徑,同時(shí)聯(lián)合 UER 制定了上線后敏捷調(diào)研問卷內(nèi)容,借此定性定量驗(yàn)證設(shè)計(jì)主張是否切實(shí)有效。
沉浸列表在商業(yè) B 端平臺(tái)某模塊小流量試點(diǎn)上線后,統(tǒng)計(jì)數(shù)據(jù)顯示:
屏效提升:可見信息量提升 1.3 倍(16 寸屏幕下,由平均顯示 8 行到 19 行);
操作效率提升:平均完成一次操作的縱向滾動(dòng)距離,從原來(lái)的 550px 下降到 47px,提效約 90%。
在數(shù)據(jù)向好的情況下,我們快速推進(jìn)沉浸式列表全量上線。全量上線一段時(shí)間即用戶熟悉使用后,我們?cè)谄脚_(tái)中上線了敏捷調(diào)研問卷,回收客戶滿意度分值為 82.6%,遠(yuǎn)高于之前的滿意度 53.9%。
此次設(shè)計(jì)項(xiàng)目,讓設(shè)計(jì)團(tuán)隊(duì)看到唯有站在客戶視角,提供針對(duì)痛點(diǎn)的設(shè)計(jì)方案,用經(jīng)營(yíng)的思路服務(wù)好客戶,才能更好的助力業(yè)務(wù)實(shí)現(xiàn)目標(biāo)。最后,感謝一起奮戰(zhàn)的商業(yè)平臺(tái)的小伙伴們,未來(lái)我們還會(huì)持續(xù)探索更多列表提效的設(shè)計(jì)手段,依托列表全屏沉浸模式帶來(lái)的高效便捷,為商業(yè)平臺(tái)的客戶們帶來(lái)更好更高效的體驗(yàn)。
作者:百度MEUX
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問:網(wǎng)站技術(shù)
本文來(lái)源:http://www.sonygallery.com.cn/seodongtai/19669.html