這份實(shí)戰(zhàn)案例告訴你大廠設(shè)計(jì)師如何做改版設(shè)計(jì)

資訊頻道 - 設(shè)計(jì)技 來源:百度MEUX 作者:cdo 2020-12-25

表情面板是百度APP互動(dòng)場景中非常重要的基礎(chǔ)輸入體驗(yàn)功能。本文以三個(gè)核心設(shè)計(jì)環(huán)節(jié)為例,分享在不同設(shè)計(jì)階段,對表情面板體驗(yàn)細(xì)節(jié)的理解和感悟,闡述大體量平臺(tái)性產(chǎn)品在進(jìn)行體驗(yàn)微創(chuàng)新時(shí),對設(shè)計(jì)方案的嚴(yán)謹(jǐn)論證及思考。

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

表情面板改版背景

在百度APP評(píng)論場景中,每天有幾十萬的含有表情的評(píng)論生產(chǎn)量,表情對于評(píng)論互動(dòng)氛圍的營造起著至關(guān)重要的作用。

百度APP emoji 2.0升級(jí),除了樣式升級(jí)外,表情數(shù)量由原來的77個(gè)增加為180+,原有的橫滑翻頁交互形式更受限制。

設(shè)計(jì)目標(biāo)

通過優(yōu)化表情面板交互形式,提升表情使用率,促進(jìn)互動(dòng)氛圍提升,有以下3個(gè)核心目標(biāo):

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

橫滑表情面板現(xiàn)有問題分析

1. 展現(xiàn)屏效低

橫滑分頁提示+表情分類tab占據(jù)表情面板1/4的位置,但是現(xiàn)有表情僅有一個(gè)分類,且短期內(nèi)拓展可能性較低,導(dǎo)致一屏只能展示20個(gè)表情。

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

2. 操作順暢度弱

橫滑翻頁效率慢:表情2.0升級(jí)后表情數(shù)量的擴(kuò)充至180+表情,橫滑翻頁的交互形式需要滑動(dòng)10頁才能看完。

輸入切換不順暢:表情面板高度低于系統(tǒng)鍵盤高度,切換鍵盤時(shí)有面板跳動(dòng)。

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

3. 運(yùn)營能力弱

節(jié)假日等特殊日期,會(huì)設(shè)計(jì)專屬的活動(dòng)運(yùn)營表情,原有表情面板沒有設(shè)置運(yùn)營表情位置,放到最后一頁則觸達(dá)率過低,原有邏輯是將首頁最后一行的前3個(gè)位置作為運(yùn)營表情位置,導(dǎo)致了表情順序不穩(wěn)定,用戶查找習(xí)慣被打破。

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

設(shè)計(jì)過程

百度APP作為平臺(tái)性產(chǎn)品,用戶體量大,表情面板涉及發(fā)評(píng)論、發(fā)動(dòng)態(tài)、直播間發(fā)彈幕、IM發(fā)消息等多個(gè)場景。為了降低全量上線的風(fēng)險(xiǎn),確保最終方案的有效性,分別在設(shè)計(jì)中、上線前、上線后階段采取方案研究評(píng)估、定性測試、定量驗(yàn)證方式對設(shè)計(jì)方案進(jìn)行嚴(yán)謹(jǐn)推導(dǎo)及論證,確保設(shè)計(jì)的合理性,深入理解用戶使用表情面板的行為特點(diǎn)。

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

設(shè)計(jì)前:表情面板類型的研究與評(píng)估

1. 方法:哈里斯圖表比較評(píng)估法

方法介紹:哈里斯圖表是一種用于設(shè)計(jì)概念未經(jīng)細(xì)化的初始階段的比較評(píng)估方法,根據(jù)預(yù)定的設(shè)計(jì)要求,分析并呈現(xiàn)概念設(shè)計(jì)方案的優(yōu)勢與劣勢,通過對比評(píng)估選擇更具優(yōu)勢的設(shè)計(jì)概念。

表情面板類型發(fā)散

發(fā)散方式:基于原有的橫滑翻頁面板,從翻頁方向和翻頁方式兩個(gè)維度發(fā)散出了縱滑滾動(dòng)、橫滑滾動(dòng)共3種面板類型。

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

按照3個(gè)優(yōu)化目標(biāo)細(xì)分7個(gè)評(píng)估指標(biāo)

7個(gè)評(píng)估指標(biāo)優(yōu)先級(jí):

首屏展示效率>瀏覽便捷度>匹配運(yùn)營能力>二屏曝光難度>單屏展示數(shù)量>定位查找難度>功能拓展性

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

方案對比評(píng)估

表格中評(píng)估指標(biāo)的重要程度由上至下依次降低,每個(gè)指標(biāo)的評(píng)分等級(jí)分為4類: -2,-1,+1,+2。然后對3種表情面板類型進(jìn)行對比打分:明確分?jǐn)?shù)等級(jí)后,把相應(yīng)的方塊涂黑(-2,+2需要涂黑兩塊)

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

方案評(píng)估決策

決策階段不是簡單的將所有得分相加,而是觀察哪個(gè)方案占正向黑色面積更多,且黑色面積靠上的越多越占優(yōu)勢?梢钥闯觥割愋2:縱滑滾動(dòng)」各項(xiàng)指標(biāo)表現(xiàn)更優(yōu)。

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

設(shè)計(jì)方案說明

在類型2:縱滑滾動(dòng)結(jié)構(gòu)的基礎(chǔ)上,對方案進(jìn)行細(xì)化,主要有以下幾個(gè)設(shè)計(jì)點(diǎn):

設(shè)計(jì)點(diǎn)1:提升操作順暢度、展示效率

提高面板高度與鍵盤等高,提升輸入穩(wěn)定性。

通過布局優(yōu)化+縱滑滾動(dòng),提升瀏覽便捷度,展示數(shù)量提升35%-105%

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

設(shè)計(jì)點(diǎn)2:增加一行常用表情

前面5個(gè)為歷史表情位,使用更便捷;后面兩個(gè)為推薦表情,更好的匹配表情運(yùn)營能力

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

設(shè)計(jì)點(diǎn)3:感官反饋,提升操作趣味性

觸覺反饋:長按表情出現(xiàn)詳情氣泡時(shí),有震動(dòng)反饋;

聽覺反饋:點(diǎn)擊表情有音效反饋;

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

設(shè)計(jì)點(diǎn)4:后續(xù)新增分類或管理功能的拓展性思考

后續(xù)增加表情分類或是設(shè)置功能后,可以在面板底部增加一行固定功能入口放置拓展功能;同時(shí),縱滑面板釋放了橫滑手勢,可以通過橫滑切換表情分類。

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

上線前:定性測試

全量上線前為保證體驗(yàn)符合預(yù)期,開展了新表情面板的定性用戶測試。通過用戶喜愛度研究及表情搜尋任務(wù)的分析,對比改版前后兩種方案的差異。

1. 用戶喜愛度調(diào)研

喜歡新方案「縱滑表情面板」的用戶更多。

喜歡的主觀原因主要包括:更方便、更順暢,好查找,順手,展示內(nèi)容更多…

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

2. 表情搜尋任務(wù)可用性測試

搜尋實(shí)驗(yàn)說明:針對橫滑翻頁方案和縱滑滾動(dòng)方案兩種交互形式,使用同樣的表情,在每一行表情中隨意挑選2個(gè),打亂順序后,讓用戶在表情面板中查找,觀察對比用戶找到表情所需時(shí)間。

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

測試結(jié)論顯示:在前6行表情中縱滑方案表情搜尋任務(wù)的使用時(shí)間明顯短于橫滑方案;7-16行表情中縱滑方案差于橫滑方案;

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

注:由于實(shí)際使用表情面板的場景與搜尋任務(wù)不同,且表情順序與使用量有關(guān),越靠前的表情使用量越高,測試結(jié)論僅作為參考。

上線后:定量驗(yàn)證

定量驗(yàn)證有三個(gè)維度:

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

1. 數(shù)據(jù)收益分析

核心指標(biāo):含表情評(píng)論P(yáng)V/UV占比、表情面板轉(zhuǎn)化率

含表情評(píng)論P(yáng)V/UV占比

在總評(píng)論量保證穩(wěn)步提升的基礎(chǔ)上,雙端含有表情占比的PV、UV均上漲明顯,且PV上漲比例>UV上漲比例:

面板轉(zhuǎn)化率

面板轉(zhuǎn)化率提升明顯,說明調(diào)起表情面板后,用戶更大概率的使用表情并發(fā)表了含有表情的評(píng)論。

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

注:

收益總結(jié)

以上核心數(shù)據(jù)雙端均上漲明顯且上漲趨勢一致,數(shù)據(jù)收益呈正向,本次改版提升了表情的使用率,對互動(dòng)氛圍提升起到了非常正向的作用。

縱滑表情面板的使用行為分析

行為打點(diǎn)規(guī)則細(xì)化

方法: GSM模型分析評(píng)估指標(biāo)

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

分析行為數(shù)據(jù)

分析上線后的表情面板打點(diǎn)數(shù)據(jù),總結(jié)用戶行為特點(diǎn):

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

根據(jù)用戶行為總結(jié)建議及優(yōu)化點(diǎn)

這份實(shí)戰(zhàn)案例告訴你大廠<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>師如何做改版<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)</a>

總結(jié)

通過分析打點(diǎn)數(shù)據(jù)理解縱滑面板的用戶行為特點(diǎn),讓設(shè)計(jì)師更貼近真實(shí)用戶,理解用戶在體驗(yàn)新的表情面板時(shí)有怎樣的反饋,哪些設(shè)計(jì)點(diǎn)是符合設(shè)計(jì)預(yù)期的,哪些是超出預(yù)期或者不符合預(yù)期的,從而為后續(xù)表情面板的持續(xù)迭代優(yōu)化提供理論參考。

感悟

設(shè)計(jì)不同階段,通過不同的論證和分析對表情面板體驗(yàn)細(xì)節(jié)會(huì)有更深入的理解和感悟。

前期細(xì)致的設(shè)計(jì)研究能最大程度上保證設(shè)計(jì)方案的合理性。

上線前的用戶定性測試是一種低成本快速傾聽用戶反饋,規(guī)避風(fēng)險(xiǎn)的方法。當(dāng)然,由于定性測試的受眾較少,會(huì)存在一定的局限性,要正確的評(píng)估用戶研究結(jié)論的可參考價(jià)值。

上線后的定量數(shù)據(jù)驗(yàn)證是通過對數(shù)據(jù)的解讀來分析用戶真實(shí)使用情況的方法,尤其是對于平臺(tái)性的大體量產(chǎn)品而言,通過數(shù)據(jù)分析更夠幫助設(shè)計(jì)師更好的了解用戶,客觀的反映設(shè)計(jì)方案的效果。當(dāng)然,數(shù)據(jù)本身雖是客觀的,但對于數(shù)據(jù)的解讀卻不一定能做到客觀,這是一個(gè)需要深入學(xué)習(xí)、長期堅(jiān)持并循環(huán)驗(yàn)證的過程。


歡迎關(guān)注作者的微信公眾號(hào):「百度MEUX」            

聲明:站內(nèi)網(wǎng)友所發(fā)表的所有內(nèi)容及言論僅代表其本人,并不反映任何網(wǎng)站意見及觀點(diǎn)。

全部評(píng)論

暫無相關(guān)推薦