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

更新於 發佈於 閱讀時間約 5 分鐘

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

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

一、不過多的方案數

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

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

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

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

raw-image

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

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

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

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

二、易於比較

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

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

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

raw-image

圖片截自:Todoist

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

raw-image

圖片截自:Todoist

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

raw-image

圖片截自:Framer

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

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

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

raw-image

圖片截自:Trello

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

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

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

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

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

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

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

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

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

常見的做法有:

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

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

raw-image

Foodpanda的Pandabox

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

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

結語

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

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

留言
avatar-img
留言分享你的想法!
avatar-img
K的下班後一角
18會員
17內容數
自我成長上的小發現
K的下班後一角的其他內容
2024/05/11
本文記錄 1/27~1/28 參加臺南青年職涯發展中心舉辦的 「SEO不只是入門-進階實際應用班」講座。講座內容相當扎實,包含SEO概念與內容佈局,進階SEO技術,以及數據分析應用。另外,文章也提到了SEO的工作內容和目標,以及關於SEO演算法因素和網站架構的相關資訊。
Thumbnail
2024/05/11
本文記錄 1/27~1/28 參加臺南青年職涯發展中心舉辦的 「SEO不只是入門-進階實際應用班」講座。講座內容相當扎實,包含SEO概念與內容佈局,進階SEO技術,以及數據分析應用。另外,文章也提到了SEO的工作內容和目標,以及關於SEO演算法因素和網站架構的相關資訊。
Thumbnail
2024/02/27
這篇文章紀錄瞭如何透過新社群平臺Threads提升公司品牌曝光的過程,以及一些成功的策略和方法。文章分享了Threads的特點,以及一些在這個平臺上有效的行銷策略。
Thumbnail
2024/02/27
這篇文章紀錄瞭如何透過新社群平臺Threads提升公司品牌曝光的過程,以及一些成功的策略和方法。文章分享了Threads的特點,以及一些在這個平臺上有效的行銷策略。
Thumbnail
2024/01/19
以往對於macOS系統都不會追求要更新到最新版本,儘管許多人推的macOS Sonoma免費版釋出後,也遲遲沒有升級XD。 直到知道升級後就能透過App Store下載copilot使用GPT-4就衝動更新了!(有聽說部分人的網頁版就可以直接選擇GPT-4?)
Thumbnail
2024/01/19
以往對於macOS系統都不會追求要更新到最新版本,儘管許多人推的macOS Sonoma免費版釋出後,也遲遲沒有升級XD。 直到知道升級後就能透過App Store下載copilot使用GPT-4就衝動更新了!(有聽說部分人的網頁版就可以直接選擇GPT-4?)
Thumbnail
看更多
你可能也想看
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
近期公司產品在進行訂閱頁面改版,因此針對這塊做了不少功課,整理了8個在設計訂閱頁時,可以注意的原則。 當初在設計訂閱頁時確實覺得蠻棘手,畢竟它是讓用戶付款最後接觸的主要頁面之一啊!要讓用戶轉化成訂閱用戶,頁面要確保讓用戶清楚地知道網站方案、功能差異和各方案定價,但又不能過於複雜,瀏覽起來負荷過重.
Thumbnail
近期公司產品在進行訂閱頁面改版,因此針對這塊做了不少功課,整理了8個在設計訂閱頁時,可以注意的原則。 當初在設計訂閱頁時確實覺得蠻棘手,畢竟它是讓用戶付款最後接觸的主要頁面之一啊!要讓用戶轉化成訂閱用戶,頁面要確保讓用戶清楚地知道網站方案、功能差異和各方案定價,但又不能過於複雜,瀏覽起來負荷過重.
Thumbnail
本文將總結網頁設計的重點,包括設計的基本要素、使用者體驗設計、色彩運用、版面設計,以及設計如何幫助提升轉換率等等。以下將提供一些關於網頁設計的技巧和建議,協助你設計出一個具有吸引力、易用性的網頁,並提高網頁的流量和轉換率,讓您更好地了解網頁設計的要素和技巧,設計出一個成功的網頁!
Thumbnail
本文將總結網頁設計的重點,包括設計的基本要素、使用者體驗設計、色彩運用、版面設計,以及設計如何幫助提升轉換率等等。以下將提供一些關於網頁設計的技巧和建議,協助你設計出一個具有吸引力、易用性的網頁,並提高網頁的流量和轉換率,讓您更好地了解網頁設計的要素和技巧,設計出一個成功的網頁!
Thumbnail
吸睛又吸金的銷售頁三大重點,以及如何透過CANVA 製作吸睛的一頁式網站!
Thumbnail
吸睛又吸金的銷售頁三大重點,以及如何透過CANVA 製作吸睛的一頁式網站!
Thumbnail
在數位時代中,無論是什麼產業類型,當您經營一個品牌時,除了建立社群媒體外,品牌官網 可說是與消費者溝通的必要橋樑,不只可以做為社群導流的終點站,也有機會在搜尋結果頁面中曝光,獲得更多潛在流量。
Thumbnail
在數位時代中,無論是什麼產業類型,當您經營一個品牌時,除了建立社群媒體外,品牌官網 可說是與消費者溝通的必要橋樑,不只可以做為社群導流的終點站,也有機會在搜尋結果頁面中曝光,獲得更多潛在流量。
Thumbnail
電商百問第72集,直接給你一頁式網站案例參考,讓你日進斗金、賺錢如有神助。我們在【電商百問71】哪裡有一頁式商店範例參考?分享了一頁式商店要怎麼做,而如果提到一頁式商店,就不免俗的要提到一頁式網站。這兩個的設計邏輯不太一樣,簡單的說,一頁商店就是為了銷售而服務,所以所有的設計邏輯都是為了取信消費者
Thumbnail
電商百問第72集,直接給你一頁式網站案例參考,讓你日進斗金、賺錢如有神助。我們在【電商百問71】哪裡有一頁式商店範例參考?分享了一頁式商店要怎麼做,而如果提到一頁式商店,就不免俗的要提到一頁式網站。這兩個的設計邏輯不太一樣,簡單的說,一頁商店就是為了銷售而服務,所以所有的設計邏輯都是為了取信消費者
Thumbnail
想提升品牌行銷效果及範圍,要怎麼做呢?哪一種網站模式適合我呢?讓我告訴你快速有效的網站行銷小撇步!
Thumbnail
想提升品牌行銷效果及範圍,要怎麼做呢?哪一種網站模式適合我呢?讓我告訴你快速有效的網站行銷小撇步!
Thumbnail
很多人有很棒的產品或服務,卻少了一個可以把路人轉換成消費者的高效銷售頁,本文分享銷售頁設計的5...
Thumbnail
很多人有很棒的產品或服務,卻少了一個可以把路人轉換成消費者的高效銷售頁,本文分享銷售頁設計的5...
Thumbnail
廣告無效,能檢討的問題很多,本篇就官網網站文案,常見的3個問題講! 不妨在看完時,做個調整吧!
Thumbnail
廣告無效,能檢討的問題很多,本篇就官網網站文案,常見的3個問題講! 不妨在看完時,做個調整吧!
Thumbnail
Google 最近推出了UX playbook — Retail,裡面列出了電商零售產業,在網站及 app 上應該要注意的細節,包含十足的品牌案例分享及數據的研究結果,非常適合所有設計及行銷人參考學習! 目前只有全英文版,隨手記錄下來這幾個重點,可以當作一份 checklist,來幫自己的網站健檢
Thumbnail
Google 最近推出了UX playbook — Retail,裡面列出了電商零售產業,在網站及 app 上應該要注意的細節,包含十足的品牌案例分享及數據的研究結果,非常適合所有設計及行銷人參考學習! 目前只有全英文版,隨手記錄下來這幾個重點,可以當作一份 checklist,來幫自己的網站健檢
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News