這份實戰案例告訴你大廠設計師如何做改版設計

來源:百度MEUX    時間:2020-12-25    站內收藏

表情面板是百度APP互動場景中非常重要的基礎輸入體驗功能。本文以三個核心設計環節為例,分享在不同設計階段,對表情面板體驗細節的理解和感悟,闡述大體量平臺性產品在進行體驗微創新時,對設計方案的嚴謹論證及思考。

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

表情面板改版背景


在百度APP評論場景中,每天有幾十萬的含有表情的評論生產量,表情對于評論互動氛圍的營造起著至關重要的作用。

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

設計目標


通過優化表情面板交互形式,提升表情使用率,促進互動氛圍提升,有以下3個核心目標:

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

橫滑表情面板現有問題分析


1. 展現屏效低

橫滑分頁提示+表情分類tab占據表情面板1/4的位置,但是現有表情僅有一個分類,且短期內拓展可能性較低,導致一屏只能展示20個表情。

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

2. 操作順暢度弱

橫滑翻頁效率慢:表情2.0升級后表情數量的擴充至180+表情,橫滑翻頁的交互形式需要滑動10頁才能看完。

輸入切換不順暢:表情面板高度低于系統鍵盤高度,切換鍵盤時有面板跳動。

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

3. 運營能力弱

節假日等特殊日期,會設計專屬的活動運營表情,原有表情面板沒有設置運營表情位置,放到最后一頁則觸達率過低,原有邏輯是將首頁最后一行的前3個位置作為運營表情位置,導致了表情順序不穩定,用戶查找習慣被打破。

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

設計過程


百度APP作為平臺性產品,用戶體量大,表情面板涉及發評論、發動態、直播間發彈幕、IM發消息等多個場景。為了降低全量上線的風險,確保最終方案的有效性,分別在設計中、上線前、上線后階段采取方案研究評估、定性測試、定量驗證方式對設計方案進行嚴謹推導及論證,確保設計的合理性,深入理解用戶使用表情面板的行為特點。

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

設計前:表情面板類型的研究與評估


1. 方法:哈里斯圖表比較評估法

方法介紹:哈里斯圖表是一種用于設計概念未經細化的初始階段的比較評估方法,根據預定的設計要求,分析并呈現概念設計方案的優勢與劣勢,通過對比評估選擇更具優勢的設計概念。

表情面板類型發散

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

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

按照3個優化目標細分7個評估指標

7個評估指標優先級:

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

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

方案對比評估

表格中評估指標的重要程度由上至下依次降低,每個指標的評分等級分為4類: -2,-1,+1,+2。然后對3種表情面板類型進行對比打分:明確分數等級后,把相應的方塊涂黑(-2,+2需要涂黑兩塊)

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

方案評估決策

決策階段不是簡單的將所有得分相加,而是觀察哪個方案占正向黑色面積更多,且黑色面積靠上的越多越占優勢?梢钥闯觥割愋2:縱滑滾動」各項指標表現更優。

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

設計方案說明


在類型2:縱滑滾動結構的基礎上,對方案進行細化,主要有以下幾個設計點:

設計點1:提升操作順暢度、展示效率

提高面板高度與鍵盤等高,提升輸入穩定性。

通過布局優化+縱滑滾動,提升瀏覽便捷度,展示數量提升35%-105%

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

設計點2:增加一行常用表情

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

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

設計點3:感官反饋,提升操作趣味性

觸覺反饋:長按表情出現詳情氣泡時,有震動反饋;

聽覺反饋:點擊表情有音效反饋;

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

設計點4:后續新增分類或管理功能的拓展性思考

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

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

上線前:定性測試


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

1. 用戶喜愛度調研

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

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

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

2. 表情搜尋任務可用性測試

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

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

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

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

注:由于實際使用表情面板的場景與搜尋任務不同,且表情順序與使用量有關,越靠前的表情使用量越高,測試結論僅作為參考。

上線后:定量驗證


定量驗證有三個維度:

  • 對比改版前后表情面板核心數據的變化,評估項目收益,對方案的有效性進行定量驗證;

  • 對縱滑表情面板的用戶行為進行打點,深入分析和總結縱滑面板的用戶行為特點。

  • 根據數據分析結論,對縱滑面板的布局提出建議及優化點,為后續表情面板的長期優化打下基礎。

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

1. 數據收益分析

核心指標:含表情評論PV/UV占比、表情面板轉化率

含表情評論PV/UV占比

在總評論量保證穩步提升的基礎上,雙端含有表情占比的PV、UV均上漲明顯,且PV上漲比例>UV上漲比例:

  • PV上漲:同等數量評論中含表情的評論量上漲;

  • UV上漲:同等數量發評論用戶中,發表含表情評論的用戶量上漲;

  • PV上漲比例>UV上漲比例:發含表情評論的用戶中,人均發表量提升;

面板轉化率

面板轉化率提升明顯,說明調起表情面板后,用戶更大概率的使用表情并發表了含有表情的評論。

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

注:

  • 評論含表情PV占比=含表情評論PV/評論發表成功PV

  • 評論含表情UV占比=含表情評論UV/評論發表成功UV

  • 表情面板轉化率=含表情評論PV/表情面板展現PV

收益總結

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

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

行為打點規則細化

方法: GSM模型分析評估指標

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

分析行為數據

‍分析上線后的表情面板打點數據,總結用戶行為特點:

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

根據用戶行為總結建議及優化點

這份實戰案例告訴你大廠<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>師如何做改版<a href=http://www.4882500.com/ target=_blank class=infotextkey>設計</a>

總結

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

感悟


設計不同階段,通過不同的論證和分析對表情面板體驗細節會有更深入的理解和感悟。

前期細致的設計研究能最大程度上保證設計方案的合理性。

上線前的用戶定性測試是一種低成本快速傾聽用戶反饋,規避風險的方法。當然,由于定性測試的受眾較少,會存在一定的局限性,要正確的評估用戶研究結論的可參考價值。

上線后的定量數據驗證是通過對數據的解讀來分析用戶真實使用情況的方法,尤其是對于平臺性的大體量產品而言,通過數據分析更夠幫助設計師更好的了解用戶,客觀的反映設計方案的效果。當然,數據本身雖是客觀的,但對于數據的解讀卻不一定能做到客觀,這是一個需要深入學習、長期堅持并循環驗證的過程。

歡迎關注作者的微信公眾號:「百度MEUX」          

本文來源:百度MEUX

上一篇:返回列表
作者:cdo
相關閱讀
    正在加載...
伊人影院蕉久影院在线,久久婷婷五月综合色,久久精品国产99国产精品,99久久免费国产精品