案例解析 | 如何得到最滿足需求的交互方案?
本文作者結(jié)合總計做過的會員項(xiàng)目,來跟大家談?wù)勗鯓尤プ龀鲆粋€最滿足需求的交互方案。
今天跟大家分享一個之前做過的會員項(xiàng)目,愛奇藝會員業(yè)務(wù)是公司營收的重要來源之一。收銀臺作為用戶完成會員購買的關(guān)鍵步驟,用戶在這個頁面主要進(jìn)行會員套餐的選擇操作。筆者在2017年進(jìn)行過一個收銀臺改版的需求,改版后數(shù)據(jù)提升明顯,這里跟大家分享改版的波折卻結(jié)果完滿的歷程。
先介紹一下改版前的方案狀況,如下圖所示,改版前的收銀臺由3部分組成:
- 用戶賬號展示區(qū)域;
- 黃金VIP會員套餐選擇區(qū)域;
- 黃金VIP會員特權(quán)展示區(qū)域。
其中,套餐選擇是采用列表的形式,用戶點(diǎn)擊列表中的某個條目,則執(zhí)行付款操作,從效率的角度來說,這個頁面還是挺高效的。
這個頁面的改版,是來自產(chǎn)品同學(xué)提的需求。起初收到這個需求,其實(shí)是個“一句話需求”:“收銀臺希望進(jìn)行改版,突出強(qiáng)調(diào)大時長(會員年卡)和自動續(xù)費(fèi)模式”。
嗯,就是這么簡短。
雖然簡短,但分析需求的內(nèi)容,產(chǎn)品目標(biāo)還是比較明確的:
- 提升大時長套餐的購買量;
- 提升自動續(xù)費(fèi)的購買量。
那么,用戶來到這個頁面有什么目標(biāo)呢?我們來分析一下用戶購買會員的全流程:用戶被會員的介紹信息或者打折信息所吸引→點(diǎn)擊會員購買入口→進(jìn)入會員收銀臺頁面。
此時在收銀臺頁面,用戶最想了解的是每種套餐的收費(fèi)標(biāo)準(zhǔn)、持續(xù)時長等規(guī)則,進(jìn)而選擇適合自己的套餐。
總結(jié)一下,這個頁面里用戶的目標(biāo)是:
- 了解套餐信息;
- 購買適合自己的套餐。
總結(jié)產(chǎn)品目標(biāo)和用戶目標(biāo),可以得到此次改版的設(shè)計目標(biāo)有如下4個:
- 突出連續(xù)包月的吸引力
- 突出大時長套餐的吸引力;
- 清晰展示套餐內(nèi)容;
- 保證用戶對自己的操作有清晰的認(rèn)知,避免用戶產(chǎn)生不清楚消費(fèi)。
明確目標(biāo),是得到靠譜方案的第一步,也是最基本的一步。目標(biāo)找錯了,之后的努力很可能沒法得出令大家滿意的結(jié)果,實(shí)在是得不償失。所以,在開始一個需求之前,一定要先確定好設(shè)計目標(biāo)。
目標(biāo)確定了,開始尋找靈感。研究了市面上的主要競品,優(yōu)酷視頻的會員收銀臺頁面,是把可購買的所有套餐列出來,然后在底部設(shè)置了一個操作欄,可執(zhí)行購買操作,如下圖:
騰訊視頻的做法比較簡單粗暴:將所有的套餐都列出來,然后每個套餐上一個“開通”按鈕,點(diǎn)擊后就可以購買。
看來競品沒有能實(shí)現(xiàn)我們這個需求目標(biāo)的方案,Emmmm,怎么破?既然向外借不到力,只能向內(nèi)再繼續(xù)分析一下。
改版前的收銀臺,會員套餐總共只有4個,其中只有月份的套餐可以包月,即“連續(xù)包月”套餐,季度套餐和年度套餐,是不能進(jìn)行連續(xù)包月的。
改版后的期望,是季度套餐和年度套餐也可以連續(xù)包月,并且能夠強(qiáng)調(diào)出連續(xù)包年套餐的優(yōu)惠信息,如下圖所示:
分析上面這個圖,連續(xù)包月和單獨(dú)購買其實(shí)是兩種模式,既然如此,可否將兩種模式分開?讓用戶能在兩種模式中選擇。
帶著這樣的思路,嘗試了下面兩個方案:
第一個方案,是用了分段控件,將兩種模式明顯的區(qū)隔開。
這樣做的好處是單獨(dú)購買和續(xù)費(fèi)購買區(qū)分清楚,但劣勢也很明顯:由于需要點(diǎn)擊切換,操作成本較大。之前的項(xiàng)目中,通過數(shù)據(jù)也發(fā)現(xiàn),分段控件的點(diǎn)擊率很低,因此可能會影響放在第2個選項(xiàng)中套餐的售賣。
另一個思路,是把連續(xù)購買的模式變成一個選項(xiàng),打開后即變成連續(xù)購買模式,關(guān)閉則是單獨(dú)購買。同時在底部設(shè)置操作欄,于是有了如下方案:
這個頁面使得連續(xù)購買變得更簡單——用戶只需要選中“到期自動續(xù)費(fèi),可隨時取消”的按鈕就好。嗯,感覺有點(diǎn)上道了。
但對這個頁面還是不夠滿意,因?yàn)槿绻麌L試操作一下,就會發(fā)現(xiàn):用戶的操作路徑,是先在頁面上半部分選擇套餐,然后到頁面底部進(jìn)行購買操作,操作的路徑是比較長的,如下圖所示:
有沒有操作路徑更簡便的方案?
嗯,當(dāng)然有的,畢竟辦法總會比問題多:將自動續(xù)費(fèi)按鈕移到套餐選擇的區(qū)域附近,操作路徑就短多了。同時,默認(rèn)勾選自動續(xù)費(fèi),然后如果取消自動續(xù)費(fèi),開通的按鈕文案變?yōu)椤伴_通單年”。
嗯,感覺好多了,是交代得明明白白的一個方案了。
這個方案對于續(xù)約來說,已經(jīng)很友好了。只是,對于如何突出連續(xù)包年的優(yōu)惠促銷信息,顯得有些捉襟見肘:由于是一整行的列表類型的排布,如果在套餐內(nèi)容后面增加促銷信息,會使排版變得擁擠,頁面顯得凌亂,如下圖所示:
因此,保持續(xù)約勾選框和套餐選擇距離接近的原則的基礎(chǔ)上,繼續(xù)想辦法讓套餐可以承載促銷信息的展示。在和產(chǎn)品同學(xué)一起討論、探索之后,最后確認(rèn)了使用卡片的形式?
卡片的好處不少:容易點(diǎn)擊、方便增加促銷等運(yùn)營信息,且信息展示清楚。
該方案完美符合了四條設(shè)計目標(biāo)的每一條:
- 突出連續(xù)包月的吸引力;
- 突出大時長套餐的吸引力;
- 清晰展示套餐內(nèi)容;
- 保證用戶對自己的操作有清晰的認(rèn)知,避免用戶產(chǎn)生不清楚消費(fèi)。
嗯,終于有一個比較滿意的方案了,最終方案得到一致通過。
方案上線后,連續(xù)包月的訂購占比上升明顯,連續(xù)包年訂購量增加,套餐的總訂購數(shù)也有增加,方案效果良好。
令我有點(diǎn)意外的是,友商們也紛紛跟進(jìn):
甚至外賣app餓了么也使用了高度相似的卡片樣式:
頓時成就感有點(diǎn)爆棚。
總結(jié)一下這個方案的經(jīng)驗(yàn):
- 在動手設(shè)計之前,確立設(shè)計目標(biāo)很重要,因?yàn)樗赋隽撕罄m(xù)需要努力的方向。
- 競品沒有類似功能的時候,可以加強(qiáng)對自己的需求的特點(diǎn)進(jìn)行分析,找到解決問題的思路。
- 對方案保持不將就的態(tài)度,是最終獲得一個滿意方案的重要保證。其實(shí)做交互設(shè)計,就是不斷提出問題,然后想辦法解決問題的過程。將一個一個小問題解決,最后的方案肯定也會比較令人滿意。
歡迎留言討論,共同進(jìn)步。
#專欄作家#
沐風(fēng),微信公眾號:“沐風(fēng)與體驗(yàn)設(shè)計”。人人都是產(chǎn)品經(jīng)理專欄作家,2017年度作家評選最佳人氣獎。愛奇藝Phone和PC端交互團(tuán)隊負(fù)責(zé)人。留德海龜,曾任職騰訊微生活、網(wǎng)易、宜信。6年交互設(shè)計經(jīng)驗(yàn),專注設(shè)計領(lǐng)域,歡迎關(guān)注。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議
感覺受益很多。請問是否有做過B端產(chǎn)品?這方面有什么心得么?
PS:一直以來未做過移動端,做得都是公司內(nèi)部或服務(wù)商用到的系統(tǒng)。
之前做過B端簡單的需求,但是都是很小的項(xiàng)目,經(jīng)驗(yàn)不是太多~
點(diǎn)選‘連續(xù)包年’對用戶來說仍然有操作成本,騰訊選擇了卡片輪播,降低了操作成本,但沒法快速對比,這點(diǎn)不如愛奇藝。個人認(rèn)為,若能控制在6中選項(xiàng)內(nèi),不如平鋪展示,更直觀清晰。
您是說把非連續(xù)包月和連續(xù)包月全部平鋪嗎?那樣選項(xiàng)太多了,我覺得給用戶壓力有點(diǎn)大,用戶怕是會眼花 ??
不錯,早期的版本簡介清爽,翻看了一下現(xiàn)在版本已然被廣告bar和文字信息充斥,頁面雜亂了很多 XD
現(xiàn)在業(yè)務(wù)越來越多了~
呵呵
能說出道理來請隨意呵呵:)