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