如何構建高轉化率的SaaS 網站?

1 評論 6789 瀏覽 46 收藏 15 分鐘

本文將以“優秀的表達呈現”和“有效的轉化策略”為標準,以著陸頁-首屏、產品說明、社會證明、CTA四個方面展開講述:如何提高 SaaS 網站轉化率?

背景

通過研究和總結 SaaS 網站的優秀案例,給自己在產品設計的過程中攢經驗,是我進行這樣工作的原因和動力。

在 SaaS 領域扎根 3 年半已來,一直在做軟件和后臺,產品在很牛 X 的路上一路狂奔,如何表達出來,并產生更加有效的客戶“轉化”,是我目前工作需要思考的。

本文以“優秀的表達呈現”和“有效的轉化策略”為標準,總結一些不錯的案列,共四個方面:

  1. 著陸頁-首屏
  2. 產品說明
  3. 社會證明
  4. CTA

一、著陸頁-首屏

著陸頁,訪問者到達的第一個頁面,點擊廣告或者搜索引擎結果后顯示給訪問者的網頁。

有些將網站首頁作為著陸頁,有些根據廣告采用有針對性的特定頁面。當然,具體情況需要根據公司的業務而定。

著陸頁的首屏,100%(基本)觸達,直接映入訪問者眼簾,所以重要性不言而喻,如何在第一印象中快速的解答訪問者產生的疑問非常重要。

我翻遍了很多網站,雖各有巧妙的亮點,但有其結構性的東西,主要有四個部分:

  1. 介紹(標題+說明):是什么?解決了什么?優勢?
  2. 配圖:產品外觀、產品介紹、呈現效果等等。
  3. 客戶 logo:建立初期的信用。
  4. CTA:注冊、演示、在線溝通等等,提供行動的入口。

是的,以上四個部分就是為了回答,訪問者首次進入后產生的疑問:

  • 干啥的,效果如何?
  • 是我需要嗎?
  • 為什么相信你?
  • 不錯,哪里可以試試看?

當然,這不是萬能鑰匙。但,在此思路上發揮你的創意或許會更棒!

sleeknote

絕佳模范案列,充分利用首屏,來回答訪問者的疑問。

  • 介紹:碩大的文字,簡短而又無法忽略,澄清產品解決的問題,解答了訪問者的第一反應,這是什么,能干嘛?
  • CAT:行動的號召,提供兩個 CTA,一個高成本(七天免費使用),一個低成本(查看演示),讓訪問者選擇而不是拒絕。
  • 社會證明:列舉客戶,證明產品的價值,通過第三方背書建立初步可信度。
  • 圖片:一圖勝千言,就算訪問者不看右側的介紹文案,也能理解產品是什么。
  • 引導:動態圖形結合文本,引導訪問者繼續瀏覽。

稿定摳圖

通過 gif 動畫,可謂一圖勝千言。

  • 圖片:采用左圖右文的布局方式,圖片作為主角,通過 gif 一目了然其功能和效果。
  • 介紹:通過數據(3 秒)加上左圖動態演示,讓人立即 get 到“快速”這個核心點。

addthis

反問句的標題,引起好奇心。

  • 介紹:反問句的方式,看到的時候,內心不自然的就給出肯定的回答,并引起強烈的好奇。
  • 社會證明:通過數據,1500萬,哇,這么厲害,看來我可能也需要。
  • CTA:免費 + 快捷注冊,打消訪問者兩大難題:成本 + 麻煩。
  • 網站高度:窗口即使縮到很矮,“免費網站工具”也會在一屏內,精心的小設計,讓訪問者止不住滑下去一探究竟。

useproof

通過量化的數據和左側實時的產品展示效果,簡單明了。

  • 介紹:能做什么,效果如何,并以結果為導向。
  • 社會證明:客戶量 + 評分,沒有大客戶,我有不錯的數據呀。
  • 預覽:實時呈現產品的各種功能效果,一秒即懂。

二、產品說明

放心,訪問者通常沒什么耐心,也沒那么熟悉你的產品,“簡單粗暴,傻子都懂”是設計師作為“翻譯者”最應該追求的目標。

你沒法很好的解釋,就別過多的指望訪問者會注冊嘗試。

產品說明,最好用第三方的視角,多問問你的同事,如新入職同事、客服、財務或其他非技術人員,他們怎么理解,不要過于在意設計的“高大上、權威性、不可撼動、其他人都是傻 X”。

永遠記住,你服務的是用戶,手握一票否決權的上帝。

不過,有以下方法,可以參考:

  • 文案介紹采用結構化的方式??刹捎么髽祟}、小標題、分點說明等方式,提高訪問者獲取和理解的速度。
  • 在配圖效果上,GIF > 靜態圖片。同時,與產品相關、相近程度越高的圖片越好。
  • 提供在線演示或視頻解說。

benchmark

標題解釋了功能(郵件營銷)+ 優勢(15 分鐘)+ 客戶群體(中小企業),并通過強大的 gif 快速的讓訪問者知道如何使用,而無需過多的解釋。

batch

通過步驟和分點,簡短而又明確,高效而又易于理解。

sleeknote

在線演示,預覽效果,直觀明了。

viral-loops

大標題 + 小標題 + 更多解釋,從大概到具體,訪問者可根據情況,是否深入了解。

三、社會證明

黃婆賣瓜自賣自夸,瓜好不好,最終還得看吃過瓜的人怎么說。

社會證明,就是為了消除潛在客戶內心的不確定性,不安全感。通過背書,來增加產品可信度,給人靠譜、成熟、牛 X 的印象。

但是,如何增加背書的有效性,可以從以下角度考慮:

  • 增加相關性。每個人都會更加關注自己和自己領域內的,按照行業分類,呈現出服務過的各個行業領頭品牌,增加其與潛在客戶的關聯性?!芭P槽,好牛,XXX 也在用,注冊試試?!?/li>
  • 增強誠信背書。視頻 > 評價人的頭像+文字評價 > 文字評價 > 單純的企業 logo,同樣文字評價中,可量化的結果(數據) > 模糊的好評

那又有哪些社會證明的素材呢?

總結如下:

  • 服務的客戶
  • 第三方權威認證
  • 可量化的產品數據
  • 集成(對接第三方應用)
  • 還有一個經常被忽略的,真人圖像,這比滿屏的插畫和 C4D 給人更多的親近感和信任

53KF

通過詳細的量化數據和列舉各行業代表客戶,證明其領域內的地位。

zoom

通過視頻,增加產品其可信度:

華為云

通過第三方的權威認證,樹立其安全穩定的特性。

batch

通過量化的數據,體現其技術和服務能力。

smartlook

通過集成,向訪問者證明其成熟、方便、可擴展。

bizmates

使用大量的真人和場景素材,不是網上的無版權和一眼假的商務圖。當然,用心程度并不會浪費,都會呈現在給人的專業和信任感上。

四、CTA

CTA 是 Call to action 的縮寫,中文通常稱之為行為召喚。

CTA,簡單來理解就是你希望用戶執行的行為。整個網站中有不同程度的 CTA ,高成本的(如注冊、電話咨詢)、低成本的(在線演示、在線咨詢),甚至引導訪問者瀏覽網站的路徑指示。

不管怎樣,CTA 要讓訪問者“覺得”是需要的,他們才會有點擊的沖動。

Crazyegg

整個頁面的最大的 CTA 是“展示我的熱圖”,而非注冊,以為輸入了網址,就能夠查看到熱圖,還是太年輕,跳轉到的既然是注冊頁面,沉沒成本嗎?不得而知,具體的轉化只有官方知道了。

第二個 CTA 是下方的藍色字體,默認這個網站是單屏,點擊該鏈接,單屏變成了多屏,下方顯示產品的具體功能。

指的啟發的是:CTA 按鈕的文案,使用“my”,以我的口吻(本文第一次提到),每個人都更關心自己并且不愿付出太多或承擔太大責任。

對了,我來到這個網站,當然最關心的就是網站分析,切中我的想法,不假思索就輸入了網址。

perspective

首屏提供兩個 CTA :注冊 + 免費課程。在用戶沒有決定好是否注冊時,進行引導。

點擊后彈出邀請框,肯定回答的 CTA 按鈕及我的口吻文案(本文第二次提到)。

引導至新的頁面,近在眼前的視頻內容,不注冊是不是就前功盡棄了?

Helpscout

通過提供內容,獲取郵箱,以便向潛在客戶發送郵件廣告和相關內容,促使后期的轉化。

  • 從眾心理和害怕失去,促使訪問者添加郵箱。
  • 閱讀文章,結束或者后半段的時候,提示訪問者可以獲取 pdf 版本,從而獲得訪問者的郵箱。

neilpatel

首屏碩大的問題,你需要更多流量嗎?當然(我的內心直接回答),輸入你的網址進行分析吧!

第二屏,通過各種頭銜和個人照片,建立權威和信任,CTA 文案使用我的口吻(本文第三次提到)。

第三屏,想學習營銷嗎,簡單就 4 步,然后開始點擊按鈕,詳細查看。

有沒有發現,你被“設計”了,你跟著網站的引導,一步步的深入 > 投入 > ?獲得 > 想要更多,這大概就是內容營銷的魅力,先給予的互惠原則。

最后

SaaS 網站設計,應該以“轉化率”作為最終好壞的評判標準。

從而,以更有策略性的角度去看待、去深入、去量化。同時,采用其他工具輔助決策和優化,而非僅僅停留在頁面風格,甚至只是局限在好看的層面。

當然,這只是開始,因為我還在研究的路上,感謝你的閱讀。

 

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

題圖來自Unsplash, 基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 麻辣

    回復