案例解析 | 如何得到最滿足需求的交互方案?

8 評論 7262 瀏覽 60 收藏 11 分鐘

本文作者結合總計做過的會員項目,來跟大家談談怎樣去做出一個最滿足需求的交互方案。

今天跟大家分享一個之前做過的會員項目,愛奇藝會員業務是公司營收的重要來源之一。收銀臺作為用戶完成會員購買的關鍵步驟,用戶在這個頁面主要進行會員套餐的選擇操作。筆者在2017年進行過一個收銀臺改版的需求,改版后數據提升明顯,這里跟大家分享改版的波折卻結果完滿的歷程。

先介紹一下改版前的方案狀況,如下圖所示,改版前的收銀臺由3部分組成:

  1. 用戶賬號展示區域;
  2. 黃金VIP會員套餐選擇區域;
  3. 黃金VIP會員特權展示區域。

其中,套餐選擇是采用列表的形式,用戶點擊列表中的某個條目,則執行付款操作,從效率的角度來說,這個頁面還是挺高效的。

這個頁面的改版,是來自產品同學提的需求。起初收到這個需求,其實是個“一句話需求”:“收銀臺希望進行改版,突出強調大時長(會員年卡)和自動續費模式”。

嗯,就是這么簡短。

雖然簡短,但分析需求的內容,產品目標還是比較明確的:

  • 提升大時長套餐的購買量;
  • 提升自動續費的購買量。

那么,用戶來到這個頁面有什么目標呢?我們來分析一下用戶購買會員的全流程:用戶被會員的介紹信息或者打折信息所吸引→點擊會員購買入口→進入會員收銀臺頁面。

此時在收銀臺頁面,用戶最想了解的是每種套餐的收費標準、持續時長等規則,進而選擇適合自己的套餐。

總結一下,這個頁面里用戶的目標是:

  • 了解套餐信息;
  • 購買適合自己的套餐。

總結產品目標和用戶目標,可以得到此次改版的設計目標有如下4個:

  1. 突出連續包月的吸引力
  2. 突出大時長套餐的吸引力;
  3. 清晰展示套餐內容;
  4. 保證用戶對自己的操作有清晰的認知,避免用戶產生不清楚消費。

明確目標,是得到靠譜方案的第一步,也是最基本的一步。目標找錯了,之后的努力很可能沒法得出令大家滿意的結果,實在是得不償失。所以,在開始一個需求之前,一定要先確定好設計目標。

目標確定了,開始尋找靈感。研究了市面上的主要競品,優酷視頻的會員收銀臺頁面,是把可購買的所有套餐列出來,然后在底部設置了一個操作欄,可執行購買操作,如下圖:

騰訊視頻的做法比較簡單粗暴:將所有的套餐都列出來,然后每個套餐上一個“開通”按鈕,點擊后就可以購買。

看來競品沒有能實現我們這個需求目標的方案,Emmmm,怎么破?既然向外借不到力,只能向內再繼續分析一下。

改版前的收銀臺,會員套餐總共只有4個,其中只有月份的套餐可以包月,即“連續包月”套餐,季度套餐和年度套餐,是不能進行連續包月的。

改版后的期望,是季度套餐和年度套餐也可以連續包月,并且能夠強調出連續包年套餐的優惠信息,如下圖所示:

分析上面這個圖,連續包月和單獨購買其實是兩種模式,既然如此,可否將兩種模式分開?讓用戶能在兩種模式中選擇。

帶著這樣的思路,嘗試了下面兩個方案:

第一個方案,是用了分段控件,將兩種模式明顯的區隔開。

這樣做的好處是單獨購買和續費購買區分清楚,但劣勢也很明顯:由于需要點擊切換,操作成本較大。之前的項目中,通過數據也發現,分段控件的點擊率很低,因此可能會影響放在第2個選項中套餐的售賣。

另一個思路,是把連續購買的模式變成一個選項,打開后即變成連續購買模式,關閉則是單獨購買。同時在底部設置操作欄,于是有了如下方案:

這個頁面使得連續購買變得更簡單——用戶只需要選中“到期自動續費,可隨時取消”的按鈕就好。嗯,感覺有點上道了。

但對這個頁面還是不夠滿意,因為如果嘗試操作一下,就會發現:用戶的操作路徑,是先在頁面上半部分選擇套餐,然后到頁面底部進行購買操作,操作的路徑是比較長的,如下圖所示:

有沒有操作路徑更簡便的方案?

嗯,當然有的,畢竟辦法總會比問題多:將自動續費按鈕移到套餐選擇的區域附近,操作路徑就短多了。同時,默認勾選自動續費,然后如果取消自動續費,開通的按鈕文案變為“開通單年”。

嗯,感覺好多了,是交代得明明白白的一個方案了。

這個方案對于續約來說,已經很友好了。只是,對于如何突出連續包年的優惠促銷信息,顯得有些捉襟見肘:由于是一整行的列表類型的排布,如果在套餐內容后面增加促銷信息,會使排版變得擁擠,頁面顯得凌亂,如下圖所示:

因此,保持續約勾選框和套餐選擇距離接近的原則的基礎上,繼續想辦法讓套餐可以承載促銷信息的展示。在和產品同學一起討論、探索之后,最后確認了使用卡片的形式?

卡片的好處不少:容易點擊、方便增加促銷等運營信息,且信息展示清楚。

該方案完美符合了四條設計目標的每一條:

  1. 突出連續包月的吸引力;
  2. 突出大時長套餐的吸引力;
  3. 清晰展示套餐內容;
  4. 保證用戶對自己的操作有清晰的認知,避免用戶產生不清楚消費。

嗯,終于有一個比較滿意的方案了,最終方案得到一致通過。

方案上線后,連續包月的訂購占比上升明顯,連續包年訂購量增加,套餐的總訂購數也有增加,方案效果良好。

令我有點意外的是,友商們也紛紛跟進:

甚至外賣app餓了么也使用了高度相似的卡片樣式:

頓時成就感有點爆棚。

總結一下這個方案的經驗:

  1. 在動手設計之前,確立設計目標很重要,因為它指出了后續需要努力的方向。
  2. 競品沒有類似功能的時候,可以加強對自己的需求的特點進行分析,找到解決問題的思路。
  3. 對方案保持不將就的態度,是最終獲得一個滿意方案的重要保證。其實做交互設計,就是不斷提出問題,然后想辦法解決問題的過程。將一個一個小問題解決,最后的方案肯定也會比較令人滿意。

歡迎留言討論,共同進步。

#專欄作家#

沐風,微信公眾號:“沐風與體驗設計”。人人都是產品經理專欄作家,2017年度作家評選最佳人氣獎。愛奇藝Phone和PC端交互團隊負責人。留德海龜,曾任職騰訊微生活、網易、宜信。6年交互設計經驗,專注設計領域,歡迎關注。

本文原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 感覺受益很多。請問是否有做過B端產品?這方面有什么心得么?
    PS:一直以來未做過移動端,做得都是公司內部或服務商用到的系統。

    來自吉林 回復
    1. 之前做過B端簡單的需求,但是都是很小的項目,經驗不是太多~

      來自北京 回復
  2. 點選‘連續包年’對用戶來說仍然有操作成本,騰訊選擇了卡片輪播,降低了操作成本,但沒法快速對比,這點不如愛奇藝。個人認為,若能控制在6中選項內,不如平鋪展示,更直觀清晰。

    來自北京 回復
    1. 您是說把非連續包月和連續包月全部平鋪嗎?那樣選項太多了,我覺得給用戶壓力有點大,用戶怕是會眼花 ??

      來自北京 回復
  3. 不錯,早期的版本簡介清爽,翻看了一下現在版本已然被廣告bar和文字信息充斥,頁面雜亂了很多 XD

    來自上海 回復
    1. 現在業務越來越多了~

      來自北京 回復
  4. 呵呵

    來自浙江 回復
    1. 能說出道理來請隨意呵呵:)

      來自北京 回復