王牌您的在線轉換：SaaS 登陸頁面最佳實踐

大流行推動了軟件服務的繁榮，以幫助我們聯繫、工作、學習和娛樂。 如今，SaaS 客戶擁有比以往更多的選擇。 您如何將這些複雜產品的亮點打包到可轉換的清晰、令人信任的 SaaS 登錄頁面中？

在大流行期間，使用 Zoom 的會議參與者數量從 2019 年 12 月的 1000 萬激增至 2020 年 4 月的 3 億，全球有 125,000 個學校系統正在使用該平台來接觸無法上課的兒童。 利用雲的公司總體上正在蓬勃發展：根據 Bessemer Venture Partners 的數據，該行業現在的總價值為 2 萬億美元，其中排名前五的供應商——PayPal、Adobe、Salesforce、Shopify 和 Zoom——實現了 70% 的同比增長-年值。

消費者 SaaS 產品的吸引力在於您不必購買這些產品——您只需訂閱它們即可。 可能有應用程序，但您也可以經常通過任何網絡瀏覽器使用服務。 相對於預先購買，它們通常具有成本效益，因為您只需為使用的東西付費。

但是軟件服務很難用幾句話和幾張圖片來解釋——更不用說銷售了。 客戶可能比一年前更精明，但他們仍然不是專家，特定軟件服務的價值主張可能很複雜。 登陸頁面需要在提供足夠的信息以鼓勵點擊而又不會壓倒或無聊的客戶之間取得適當的平衡。

由於存在軟件服務來幫助客戶更好或更簡單地做事，因此以最佳方式傳遞消息是您的目標。 以用戶為中心的設計方法將幫助您更有效地接觸客戶。

滿足用戶的需求

作為軟件服務提供商，您應該已經很好地了解用戶的擔憂和挑戰，以及他們試圖用您的產品解決哪些問題。 讓這些 UX 見解也通知您的登錄頁面。

最近，我在一個名為 Cohere 的客戶成功產品的登陸頁面上工作。 它不僅推出了，還經歷了幾個版本。 公司在產品開發過程中收集的見解以多種方式為頁面設計提供了信息。

該公司的大多數客戶使用 Cohere 來：

• 幫助解決客戶的疑慮和問題。
• 轉換潛在客戶並幫助他們入職。
• 監控客戶在各自網站上的活動，以了解客戶與界面的交互。

我們使用這些數據對登錄頁面進行細分，以展示針對這三個場景中的每一個的功能。 用戶可以在每種情況之間切換，以查看產品在每種情況下的工作方式。

通過展示價值實現您的目標

每個著陸頁都必須引導用戶達到明確定義的目標。 對於消費者軟件服務提供商而言，其目標通常是吸引客戶註冊免費試用，並可選擇在一段時間後轉換為付費服務，或者使用極簡免費版本並可選擇支付更多費用特徵。

例如，Slack 希望新客戶註冊免費、無承諾的試用，因此它展示了應用程序如何工作，無論團隊規模、項目類型或參與類型如何。

登陸頁面突出了 Slack 在各種場景中提供的價值，首先是允許用戶選擇他們的團隊規模。 該選擇提供了來自類似規模公司的幾個相關示例，使用戶也可以輕鬆了解他們的團隊如何使用它。

這可以讓用戶保持足夠的參與度，以便繼續向下滾動以獲得更普遍的好處，例如視頻聊天和與外部團隊合作的能力。 該頁面總結了與生產力和社區相關的各種統計數據，以及當場實施免費試用或與銷售代表交談以獲取更多信息的選項。

明智地選擇你的英雄（圖片）

您只有 50 毫秒的時間來吸引用戶的注意力，因此您必須非常有選擇性地選擇顯示的內容。 對於 SaaS 產品而言，這更具挑戰性，因為沒有可吹捧的有形產品。 展示產品的功能，預測和回答用戶的問題，而不分散視覺效果或無關信息，這一點至關重要。

Monday 項目管理工具背後的團隊在捕捉產品價值主張方面做得非常出色，他們使用屏幕截圖突出了所有可以定制的方式。

口號——“無限制地工作”——吸引註意力、滿足需求並激起好奇心。 副標題通過總結產品的價值主張來增加興趣，並邀請潛在客戶更多地了解它如何應用於他們的生活。 將該邀請表述為問題可以鼓勵與網站的互動。 下面是為各種特定行業量身定制的工作流程的視覺效果，提示用戶思考它如何適合他們的工作。

強調優點而不是功能通常很有幫助。 如果您的產品難以形象化或過於細微而無法濃縮成幾個吸引人的詞，這是一個很好的策略。 您可以專注於對用戶最重要的東西，而不是炫耀產品的所有功能。

Pipedrive 的登錄頁面很好地說明了使用其客戶關係管理 (CRM) 系統的價值。 該頁面簡潔地展示了產品的所有主要優點，以避免滾動。 一目了然，用戶可以：

• 獲得 CRM 的背景和知識。
• 可視化他們可以從使用產品中預期的結果。
• 了解 Pipedrive 的產品如何脫穎而出。
• 了解該產品如何適用於大型團隊，這是吸引大公司的關鍵。

最後，考慮一種交互式方法。 SaaS 產品可能很乏味，但它們的登錄頁面不必如此。 交互式設計可以讓用戶參與足夠長的時間，以便您傳達產品信息和價值以及您的品牌故事。

Cuberto 機構的移動銀行應用程序 Wickret 的登錄頁面概念使用交互和簡約設計來保持用戶的興趣。

用戶在向下滾動頁面時遇到的交互式副本，以及自定義光標為屏幕元素設置動畫的巧妙方式，使簡單的消息傳遞變得生動起來。 請注意號召性用語中的微交互（“下載”）如何幫助它在頁面的其餘部分中脫穎而出。

這是一種展示極簡產品的有趣且引人入勝的方式。

考慮到移動用戶的設計

您的一半用戶將通過他們的移動設備瀏覽您的網站。 但是您的目標網頁不僅需要縮小到更小的屏幕，還需要針對移動設備進行優化。

注意用戶可以在移動設備上進行的交互類型，並簡化頁面結構，以便用戶可以無縫導航。 當網站只是響應式時，內容通常會轉移到較小的網格並垂直堆疊。 這種內容架構的變化會降低你的消息傳遞的力量，所以你必須考慮垂直堆疊佈局是否最適合你的設計。 在某些情況下，水平輪播或標籤等替代解決方案可能更有效。

未能在移動設備上很好地傳達您的產品可能會導致您的轉化率下降。 視頻消息服務 Loom 在將其網站上使用的交互式組件和視覺敘事轉換為移動設備方面做得非常出色，它在需要時簡化了內容架構並使用了另一種選項卡方法。

從頭開始建立信任

想像一下走進一個滿是陌生人的房間，想知道你是否在正確的地方。 這類似於用戶訪問新產品網站的感覺。 在聚會上，一旦你看到一些熟悉的面孔，你就會開始感到更舒服。

同樣的想法也適用於 SaaS 產品。 即使客戶有他們想要解決的問題，學習新產品並將其整合到他們的日常生活中也可能會令人生畏。 這會使客戶難以合理化交出他們的聯繫方式和支付信息的風險。

您可以通過多種方式促進信任：

• 確保擁有 SSL 證書。
• 簡明扼要地構建您的 URL。
• 確保沒有不必要的重定向。
• 避免聽起來很需要潛在客戶的副本。
• 使您的頁面直觀且易於使用。

這些是與您的用戶建立融洽關係並創造他們感到有價值和知情的體驗的簡單方法。 但你不應該止步於此。

向用戶展示它是如何為他們工作的

您可以通過證明您了解客戶可能如何使用您的產品來減少不確定性和項目的可信度。 向他們展示您的產品如何融入他們的日常生活可以很快回答很多問題。

例如，Monday.com 提供快速瀏覽，幫助用戶了解他們將如何與網站互動。

原型設計工具 Framer 更進一步，通過動畫顯示 Framer 界面中工作原型的開發。 額外的交互性使用戶能夠點擊不同的項目，以便更好地了解可能性。

社會證明是必不可少的

社交證明對於 SaaS 產品尤為重要。 向您的客戶展示值得信賴的合作夥伴對於提高用戶試用您的產品的意願大有幫助。

社會認同的另一種重要形式是積極的同伴壓力。 在預訂餐桌或根據正面評價在線購買東西之前，您多久查看一次餐廳的評論？ 據 BrightLocal 稱，87% 的消費者就是這樣做的。

背書可以是一個強大的工具，但它們必須提供信息並與用戶相關。 做得好，他們可以一次做幾件事。 Zoom 展示了評論如何：

• 表明你有需求。 Zoom 的認可表明該產品得到了各行各業大公司的認可和使用。
• 在客戶之間建立一種社區意識。 分享來自多個客戶的反饋和想法可以傳達一個龐大的用戶群，這讓新客戶感到更受歡迎。
• 提升公信力。 用戶會看到由知名客戶進行的購買——為您的產品提供可信度並建立信任。

右腳結束

即使用戶一直瀏覽您的頁面，也有很多原因可能導致他們還沒有準備好做出決定：

• 他們對您的 SaaS 產品感興趣，但想要更多信息。
• 他們有尚未解決的問題或疑慮。
• 他們不信任產品或品牌。

您如何設計頁面底部來解決這些問題？ 首先，確保有一個清晰的部分、按鈕或鏈接，用戶可以在其中獲得即時支持或聯繫可以解決他們的問題和疑慮的人。 您可以提供更多機會通過聊天進行聯繫或提供常見問題解答。

吸引好奇但不情願的用戶的另一種方法是提供額外的視角。 如果免費試用不是您的主要號召性用語，那麼提供演示可能有助於吸引仍然猶豫不決的用戶。 或者，您可以提供來自不同用戶的案例研究。

您的頁腳應該為用戶打開一扇門，讓他們與您的產品建立更強大、更個性化的聯繫。 不要只將其視為頁面的結尾：將其視為用戶新旅程的開始。

混搭成功

轉換並不是一個一致的公式，它對每種產品都適用。 相反，一個成功的 SaaS 登陸頁面將包含一系列變量，這些變量可以被控制、調整和組合，以創建一個實現三個 C 的站點：

• 以最有效的方式傳達您的產品故事。
• 捕捉用戶的注意力、興趣和行為。
• 轉換它們。

進一步閱讀 Toptal 設計博客：

• 如何設計有效的登陸頁面
• 為轉換而生——著陸頁設計最佳實踐
• 結識——用戶入職流程指南