從“免費(fèi)試用”模塊設(shè)計(jì),反思UI的設(shè)計(jì)思路

2 評(píng)論 9538 瀏覽 34 收藏 9 分鐘

在App大版本的迭代中,免費(fèi)試用作為小模塊,交互邏輯不變,僅做視覺層面的優(yōu)化。然而在視覺優(yōu)化過程中,免費(fèi)試用的體驗(yàn)問題浮出水面,此時(shí)對(duì)免費(fèi)試用的設(shè)計(jì)從表層進(jìn)入相對(duì)深的層面。設(shè)計(jì)的過程也引發(fā)Jenny對(duì)于視覺設(shè)計(jì)師職能的一點(diǎn)思考,拋磚引玉。

文章大綱:?

  1. 背景
  2. 設(shè)計(jì)后的再思考
  3. 競品分析,尋找普適的解決方案
  4. 輸出新的設(shè)計(jì)方案
  5. 小結(jié)與反思?

1. 背景?

美啦5.0的風(fēng)格確定后,App其他頁面的視覺設(shè)計(jì)也需要跟進(jìn),免費(fèi)試用的優(yōu)化也由此展開。因美啦5.0版本改動(dòng)大工作量大,所以免費(fèi)試用的交互邏輯與舊版本保持一致,通過狀態(tài)區(qū)分,依次是進(jìn)行中、預(yù)熱中、已結(jié)束,用戶進(jìn)入活動(dòng)詳情頁可以進(jìn)行分享報(bào)名,查看試用名單及試用報(bào)告。?

免費(fèi)試用交互邏輯

因此免費(fèi)試用主要是視覺層面的優(yōu)化,包括導(dǎo)航的統(tǒng)一,icon等的調(diào)整,使之視覺上輕盈。視覺的優(yōu)化極快完成了,但原本的邏輯真的有結(jié)合免費(fèi)試用本身的作用與功能嗎?于是我們停下來做了一些思考。?

快速更新視覺層面的設(shè)計(jì)圖

2. 設(shè)計(jì)后的再思考

首先分析免費(fèi)試用的作用,因?yàn)槊赓M(fèi),所以對(duì)用戶也有比較大的吸引力。吸引用戶流量,增加活躍度,給做試用活動(dòng)的產(chǎn)品更多的曝光,引導(dǎo)用戶種草。吸引來的流量就應(yīng)當(dāng)物盡其用盡量增加產(chǎn)品曝光。

再分析用戶來到免費(fèi)試用的目的:一是看看有什么喜歡的產(chǎn)品在做試用活動(dòng),參加該活動(dòng);其次如果沒有喜歡的產(chǎn)品,那就看看以前的試用活動(dòng),而以前的試用活動(dòng)里比較吸引用戶的內(nèi)容便是優(yōu)質(zhì)試用報(bào)告。

分析完免費(fèi)試用本身的作用及用戶的目的后,我們發(fā)現(xiàn)了兩個(gè)問題:

(1)免費(fèi)試用的tab欄分別是進(jìn)行中、預(yù)熱中、已結(jié)束,進(jìn)入免費(fèi)試用后默認(rèn)是進(jìn)行中。在極端情況下,會(huì)出現(xiàn)內(nèi)容較少或沒有內(nèi)容的空狀態(tài),破滅了用戶來免費(fèi)試用的目的,也浪費(fèi)了免費(fèi)試用重要的曝光位置。已結(jié)束的文案及banner圖的已結(jié)束標(biāo)簽,降低了用戶的點(diǎn)擊欲。這些細(xì)微的體驗(yàn)問題都會(huì)間接減少用戶在免費(fèi)試用的留存。

(2)經(jīng)過對(duì)免費(fèi)試用的使用挖掘,沉淀在已結(jié)束頁面內(nèi)的部分優(yōu)質(zhì)試用報(bào)告,即關(guān)于產(chǎn)品的使用結(jié)果反饋,是除了試用活動(dòng),對(duì)用戶比較有價(jià)值,同時(shí)可以引導(dǎo)用戶種草的內(nèi)容。但目前查看試用報(bào)告的路徑比較長:點(diǎn)開免費(fèi)試用、點(diǎn)擊已結(jié)束、點(diǎn)擊某個(gè)活動(dòng)、下拉2屏左右的距離,點(diǎn)擊查看試用名單和報(bào)告按鈕,點(diǎn)擊試用報(bào)告,進(jìn)入試用報(bào)告feed頁,查看某條試用報(bào)告。需要操作8個(gè)步驟才能看到,路徑比較深,用戶在其中任何一個(gè)環(huán)節(jié)都可能離開免費(fèi)試用。

查看試用報(bào)告的路徑

?3. 競品分析,尋找普適的解決方案

由于有免費(fèi)試用的競品較少,因此選擇了網(wǎng)易嚴(yán)選樣品試用、京東試用、淘寶阿里試用、天貓美妝試用。這幾個(gè)平臺(tái)的免費(fèi)試用雖然是web端,但是對(duì)于美啦免費(fèi)試用的設(shè)計(jì)參考是相通的。

我們對(duì)4個(gè)平臺(tái)的免費(fèi)試用使用后,得出如下分析:

(1)四個(gè)平臺(tái)里,網(wǎng)易嚴(yán)選樣品試用、天貓美妝試用的試用產(chǎn)品比較少,網(wǎng)易嚴(yán)選樣品試用將所有的試用活動(dòng)放置于一個(gè)頁面就沒有頁面冷清的感受,天貓美妝試用就會(huì)覺得內(nèi)容冷清。京東試用、淘寶阿里試用的試用活動(dòng)很多,沒有上述問題。?

競品的免費(fèi)試用頁面

?(2)京東試用、淘寶阿里試用、網(wǎng)易嚴(yán)選樣品試用給予了試用報(bào)告比較高的優(yōu)先級(jí)。展示優(yōu)質(zhì)試用報(bào)告,對(duì)于電商平臺(tái)的轉(zhuǎn)化理論上有一定的幫助。

試用報(bào)告的優(yōu)先級(jí)

(3)網(wǎng)易嚴(yán)選樣品試用及天貓美妝試用在已結(jié)束的活動(dòng)頁面,都提供了查看報(bào)告的按鈕,引導(dǎo)用戶查看試用報(bào)告,這對(duì)于電商平臺(tái)而言,可以間接提高用戶轉(zhuǎn)化。京東試用已結(jié)束頁面比較隱藏,也只顯示文案“名單已發(fā)布”,用戶難以判斷內(nèi)部是否有值得查看的內(nèi)容。淘寶阿里試用已結(jié)束頁面沒有任何文案提示。

已結(jié)束頁面的試用報(bào)告入口

?由上述競品分析,我們得出這樣的結(jié)論:

  1. 在使用產(chǎn)品較少的極端情況下,將所有活動(dòng)放置于一個(gè)頁面可以營造出熱鬧的活動(dòng)氛圍,可以比較大程度避免極端狀態(tài);
  2. 提高優(yōu)質(zhì)試用報(bào)告的展示優(yōu)先級(jí),3個(gè)競品給予了試用報(bào)告較高的優(yōu)先級(jí),2個(gè)競品在試用結(jié)束頁面引導(dǎo)用戶查看試用報(bào)告。

4. 輸出設(shè)計(jì)方案

我們把競品的分析所得到的結(jié)論應(yīng)用到美啦免費(fèi)試用的優(yōu)化上:

  1. 將所有的試用活動(dòng)放置于一個(gè)頁面,順序按照進(jìn)行中、預(yù)熱中、往期試用,去掉已結(jié)束的標(biāo)簽,增加查看試用報(bào)告的標(biāo)簽,引導(dǎo)查看試用報(bào)告;
  2. 將同樣有吸引力的試用報(bào)告優(yōu)先級(jí)提高,放置精華試用報(bào)告。

5. 小結(jié)與反思

?面對(duì)設(shè)計(jì)迭代的優(yōu)化,視覺設(shè)計(jì)師除了做出視覺層面的更新,也需要從更深層次的考慮產(chǎn)品的功能是否順暢的實(shí)現(xiàn)、用戶的使用感受是否良好。具備一定的產(chǎn)品思維,挖掘設(shè)計(jì)優(yōu)化深處的需求與視覺層面的設(shè)計(jì)同樣重要。????

 

作者:Jenny黃靜雯?(微信公眾號(hào):「Jenny黃靜雯」),平安銀行視覺&插畫設(shè)計(jì)師。微博設(shè)計(jì)美學(xué)博主,花瓣認(rèn)證設(shè)計(jì)師,優(yōu)優(yōu)網(wǎng)入駐設(shè)計(jì)講師,深圳市插畫協(xié)會(huì)專業(yè)會(huì)員,視覺中國簽約設(shè)計(jì)師。

本文由 @Jenny黃靜雯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 你好,圖片預(yù)覽不了,能重新查看嗎

    來自江蘇 回復(fù)
  2. 最后一張圖很棒,查看報(bào)告很清晰,引導(dǎo)性強(qiáng),贊!

    來自北京 回復(fù)