訂閱頁面的設計技巧：4個原則分享

近期公司產品在進行訂閱頁面改版，因此針對這塊做了不少功課，整理了8個在設計訂閱頁時，可以注意的原則。

當初在設計訂閱頁時確實覺得蠻棘手，畢竟它是讓用戶付款最後接觸的主要頁面之一啊！要讓用戶轉化成訂閱用戶，頁面要確保讓用戶清楚地知道網站方案、功能差異和各方案定價，但又不能過於複雜，瀏覽起來負荷過重，就容易造成反效果了。

一、不過多的方案數

過往主觀會認為「站在用戶的角度」，將方案細切成各種需求讓用戶做選擇，是一種貼心的方式。但不少研究文章都指出：人類不喜歡複雜。

用戶不會細讀你網站上每個字，他們只會大略瀏覽。

用戶更不傾向花時間把所有事情搞懂。

用戶更偏好簡單好懂的內容。

根據 CXL 調查顯示，SaaS 公司提供的最受歡迎的定價計劃數量大約落在 4個。而4個是如何訂的？其實也只是大多數公司只是一時興起決定，並從未進行過測試。

RingCentral 的定價頁面上原先有4個方案，產品團隊進行了測試，結果顯示3個方案的頁面將轉化率提高了37% 以上、顯示2個方案的頁面轉化率比4個方案來的更低。

在《矽谷思維》這本書也有提到一個「果醬實驗」，曾有一家超市舉辦果醬試吃活動，他們做了一個實驗：一次是準備6種口味的果醬供用戶選擇，另一次則是提供高達24種果醬。

結果發現，雖然展示24種口味的果醬，會有更多人來試吃，但是一次只展示6種口味的果醬反而購買人數更多！把選擇減少，淨成交量提升了6.6倍！

二、易於比較

價格公開透明外，也要跟用戶溝通各方案的差異。

不過一次將所有方案的內容攤開在用戶面前，資訊量過於龐大。因此可以在頁面的最上方先加入大方向的差異。頁面的下方，再補上每個方案詳細功能比較，準確地告訴用戶各個方案中之間的差異。

先在最注目的方案區塊加上大方向的差異：

圖片截自：Todoist

頁面下方再補上詳細比較表格：

圖片截自：Todoist

補充：常見的比較設計即用表格呈現，但表格在手機閱讀中極不友善，不少網站會選擇直接在手機版隱藏表格比較，稍顯可惜。這裡我採 Framer 的作法，重構比較表格的布局，即使在多功能的比較下，仍保有一定的易讀性。

圖片截自：Framer

三、幫助用戶更好地選擇計畫

前面有提到，用戶在選擇的過程中性迷茫，若在方案頁第一眼無法初步選擇自己可能比較適合的方案，很有可能就離開了。

因此，為每個方案設立一個情境描述或是人群吧！讓用戶可以看到描述就自行帶入「哇！這就是我」如此以來，就能讓用戶可以更加清楚了解各方案的差異，加速他做決定的效率。

圖片截自：Trello

另外，常見的方案頁設計還有「主推方案」

不過應該拿哪一個方案作為主推？
這邊沒有一個絕對的正確答案，uxcel建議以下這些方向：

1、中間選項：這是最常見的做法，因為大多數人通常會偏好中間的選擇。

2、最適合大部分用戶的方案：從使用者體驗的角度來看，優先推薦最適合大多數人的方案，這個方案必須考慮到大部分用戶的需求和喜好

3、價格最高的方案：這裡使用到的就是所謂的「錨定效應」！假如你最貴的方案是每月 1580 元，如果你特別強調這個方案，那麼用戶看到的第一個價格就會是這個 1580 元。但一旦他們發現中間的方案只要每月 590 元時，心裡就會產生「這個比較便宜」的想法。這種做法可以影響用戶的價格感知，讓中間方案看起來更具吸引力！

4、提供免費試用/免費版本：在付費之前，先邀請用戶輕鬆地體驗你的產品。此種作法可以降低使用者體驗上的阻礙，讓他們更容易感受到產品的價值，進而考慮是否付費升級到更高級的方案。

四、讓心理學推用戶一把：創造FOMO

「害怕錯過任何機會」（FOMO — Fear of Missing Out）的心理，近年來隨著社群媒體的興起，逐漸引起科學界的關注。這指的是人們對於錯過某些機會或活動感到擔心，特別是對社群媒體上的訊息有所關注。

方案推出後，可以適時結合心理學中的「稀缺性」與「限時」來促進用戶轉換為付費會員。

常見的做法有：

1、營造稀缺性：強調「限量」、「欲速從快」或「售完不補」...等等。例如，僅開放給前50名註冊的用戶，或是每月僅有少數名額。這能激發用戶迅速行動，確保自己不會錯過這種獨特機會。

2、限時優惠：提供短暫的折扣或特價，讓用戶在一段時間內享受更優惠的價格。同時，在頁面上顯示倒數計時器，營造緊迫感，促使用戶儘快作出決定。Foodpanda 的 pandabox 即是運用此原理。

Foodpanda的Pandabox

3、獨家功能或內容：加上僅限付費會員使用的獨家功能，例如特別的內容、工具或社群互動。這會讓用戶感到成為付費會員是一個特別的機會，並且可以提升他們的價值感。常見的有像訂閱財經資訊就可獲得展望報告、店商平台成為付費會員獲得市場分析報告...等等。

不過有關折扣等刺激轉換手法，也需評估品牌調性是否適合「常常做廣告」，久了可能會造成用戶在心目中價值降低哦！

結語

以上就是這次簡單針對訂閱頁面設計的分享，訂閱頁設計的眉角還有很多，未來如果有看到喜歡的案例，也會持續增加進來！

此外，除了UI設計外，「定價策略」也是因為這次重構訂閱頁後，提起我興趣的一環。希望之後可以找到喜歡的書再來做紀錄！