使用 StoryBrand 框架設計更好的主頁

主頁就像商店櫥窗。 他們應該讓消費者了解企業是做什麼的，誰在經營企業，至少是它提供的產品和服務的暗示，無論這些是實際出售的物品、信息還是娛樂。

就像商店櫥窗一樣，主頁設計可以吸引人們深入了解，或者無法吸引訪問者的注意力（或者更糟糕的是，主動將他們趕走）。 清晰地傳達品牌故事是用戶體驗設計師可以用來讓人們留在網站上並參與到主頁之外探索的一種方法（StoryBrand 框架為此提供了一個很好的路線圖）。

主頁的目標是什麼？

登陸頁面的目標是轉化訪問者，而主頁的目標是讓訪問者與品牌互動並為他們的問題提供解決方案。 如果做得好，主頁訪問者可以變成客戶——可能是回頭客。

在過去的幾十年裡，由於分析以及基於這些數據進行性能改進的營銷和設計團隊，主頁得到了迅速的改進。

早在 1993 年，當時只有 600 個網站，衡量網站流量的唯一方法是統計訪問者數量的服務器日誌。 接下來是點擊計數器，然後是更全面的分析套件，可以洞察獨特訪問者、頁面瀏覽量和跳出率等信息。

使用這些分析數據，用戶體驗設計師能夠優化號召性用語放置、提高網站速度、A/B 測試、使用視頻吸引訪問者、使用高質量圖像來吸引人們的注意力，並包括消息傳遞工具來提高性能主頁。 然而，這能保證消費者的忠誠和信任嗎？

設計主頁時的三個常見陷阱

企業——以及擴展設計師——在創建主頁時會遇到三個主要陷阱：

1. 他們不專注於重要的事情。 他們告訴人們他們的服務或產品的所有特徵。 人們不在乎這個。 他們想知道企業將解決他們的問題並改善他們的生活。
2. 企業沒有清楚地傳達他們的信息。 正如 Chartbeat 的 Tony Haile 所說，一個網站只有不到 15 秒的時間來吸引訪問者的注意力。
3. 他們的產品不好，不能解決任何人的問題。 如果是這樣的話，設計師可以為企業做的事情不多。

什麼是 StoryBrand 框架？

儘管一些企業似乎相信，一個標誌並不等於一個品牌。 離得很遠; 品牌是一個承諾，背後是它們存在的原因。

人們出於理性和情感原因選擇一個品牌而不是另一個品牌。 強大的品牌信息可以產生對品牌本身的忠誠度，而不僅僅是它創造的單個產品。 清晰一致的信息對於實現這一目標至關重要。 使品牌在競爭中脫穎而出的是品牌的故事。

講故事被企業家廣泛用於在推銷和社交網絡中吸引投資者。 像 Apple 這樣的公司了解並將清晰、簡單的故事講述的力量融入到他們所做的每一件事中。 他們知道這與他們無關； 這是關於他們的客戶。

StoryBrand 框架是由唐納德·米勒 (Donald Miller) 創建的講故事公式，用於幫助企業簡單而清晰地傳達他們最強大的信息。 米勒在他的《建立故事品牌》一書中指出，“你的客戶應該是故事的主角，而不是你的品牌。 這是每個非常成功的企業都明白的秘密。”

如何與客戶一起使用 StoryBrand

無論是小公司還是價值數百萬美元的品牌，客戶都必須明白，讓客戶感到困惑會讓他們付出金錢。 正如米勒所說，通過 StoryBrand 公式澄清他們的信息將“組織他們的思維，減少他們的營銷努力，消除混亂，嚇倒競爭，最終讓他們的業務再次增長。”

米勒將建立 StoryBrand 比作為劇本寫故事。 他將其分解為七個情節點。

想要某樣東西的角色（使用網站的人）遇到問題（他們的需求），然後遇到嚮導（企業），嚮導會為他們提供計劃（指示下一步）並呼籲他們採取行動（號召性用語按鈕），這導致了成功的故事（他們購買了產品）並幫助他們避免失敗（提醒他們如果不購買會發生什麼）。

這種結構幾乎可以在每一部成功的電影中得到認可。 它也適用於企業及其客戶。 下一步是讓客戶按照以下結構編寫他們的品牌故事：

1. 一個性格：客戶永遠是故事的主人公，而不是品牌。 用戶體驗設計師通常通過用戶體驗研究和用戶測試來弄清楚客戶對品牌的需求。 他們需要關注驅動人們的願望，例如節省財務資源、節省時間、建立社交網絡或獲得地位。
2. 有問題：StoryBrand 弧線中的反派是角色的問題。 將這個問題擬人化並理解公司的產品就像客戶可以用來打敗它的武器是很有用的。 公司傾向於專注於解決外部問題，但客戶購買的是內部問題的解決方案。 人們有三個層次的衝突：
   - 外部（大多數企業試圖解決外部問題）
   - 內部（如沮喪、恐嚇、不安全感）
   - 哲學（為什麼這個故事很重要？）
3. 並遇到嚮導：嚮導是企業或品牌。 客戶需要有人來解決問題。 他們對品牌的認知對他們的信任至關重要。 必須傳達兩件事：
   - 同理心（表現出對客戶可能感受到的痛苦的理解）
   - 權威（它會讓客戶相信品牌能夠幫助他們）
4. 誰給他們一個計劃：企業向客戶展示他們下一步需要做什麼。 在顯示一個簡單的行動計劃之前，客戶仍然不確定是否購買。 用戶體驗設計師可以為客戶詳細說明下一步的確切步驟。 他們還可以通過解決與產品或服務相關的問題來減輕客戶的任何焦慮。
5. 並呼籲他們採取行動：有效的行動呼籲有助於購買或註冊。
6. 這有助於他們避免失敗：對客戶來說有什麼風險？ 如果他們不從這個品牌購買，他們會失去什麼？
7. 並以成功告終：告訴客戶這一具體行動如何改變他們的生活。 向他們展示他們購買產品後的生活會是什麼樣子，以及這種決心會讓他們感覺如何。 講故事者結束故事的三種可靠方式是允許角色：
   - 贏得權力或地位
   - 找到讓他們變得完整的人或事
   - 體驗某種形式的自我實現，這也使他們變得完整

如何在主頁中使用 StoryBrand 框架

主頁不應該是關於業務的。 它應該是關於它的​​潛在客戶。

就像第一次約會一樣，印像很重要，目標是產生興趣。 用戶體驗設計師必須在包含哪些內容以及如何安排方面具有戰略意義。 遵循上一節中解釋的框架將幫助設計人員確保將正確的消息放在正確的位置。

儘管聽起來可能很簡單，但在設計主頁時只需牢記五個重要元素。

頭條新聞

標題，有時與引人入勝的圖像結合使用，被放置在主頁的頂部。 幾乎在所有情況下，標題都應該以客戶為中心，並向訪問者展示品牌有一些對他們有利的東西。 標題應該：

• 將好處傳達給客戶
• 確定訪客遇到的問題，並向他們保證品牌可以為他們解決問題
• 以簡潔明了的方式描述業務所做的事情

通過展示權威來建立信任

必須將業務定位為客戶問題的指南和解決方案。 掌握創造信任藝術的用戶體驗設計師將更容易說服人們這個特定品牌是解決他們問題的正確方法。 他們可以通過以下方式做到這一點：

• 包括推薦品牌的重要客戶的推薦信
• 展示與該品牌合作過的公司的標誌
• 顯示有​​關用戶數量、交易等的特定數據。
• 以獎項和榮譽、出版作品、媒體露面和類似成就為特色
• 顯示團隊或公司總部的圖像

呼籲採取行動

與主頁訪問者建立情感聯繫是將他們轉化為客戶的第一步。 一旦建立了這種情感聯繫，就需要採取行動來達成交易。

號召性用語有兩種：

1. 直接號召性用語適用於知道自己已準備好購買或註冊的用戶，包括“購買”、“註冊”或“開始使用”等語言。 點擊這些 CTA 將直接將買家帶到一個表單以完成他們的交易。
2. 過渡性號召性用語適用於尚未準備好購買的訪客。 他們在提交之前可能需要更多的時間和信息。 這些以“更多信息”、“免費試用”或“取得聯繫”類型的按鈕的形式出現。

一些號召性用語可能會將兩者結合起來，或者將它們並排放置（通常被視為一對“立即購買”和“了解更多”按鈕）。

引人入勝的圖像

無論主頁的內容多麼嚴肅，StoryBrand 框架都需要一個圓滿的結局。 選擇圖像時，請記住其中一些應該給人一種“永遠快樂”的感覺。

圖像吸引遊客的情緒，尤其是快樂的人的圖像。 展示快樂的人的照片可以幫助人們想像如果他們購買了自己的快樂結局會是什麼樣子。

短文本

文字越少越好。 許多消費者不會閱讀長段文字，因此最好用盡可能少的文字來傳達品牌信息。

用戶體驗設計師應該幫助客戶以最簡單的方式分享他們的故事。

成功的主頁回答關鍵問題

一個成功的主頁將能夠在不到五秒鐘的時間內吸引訪問者的興趣。 從那裡開始，將有大約 15 秒的時間來回答人們在訪問主頁時（通常是下意識地）問自己的三個問題：

• 他們在做什麼？
• 他們可以怎樣幫助我？
• 我需要做什麼才能購買或參與？

用戶體驗設計師可以使用 StoryBrand 框架來創建一個主頁，該主頁可以立即引起興趣並有效地回答這些問題。 它為設計師和品牌提供了一條清晰的成功之路。

讓我們知道您的想法！ 請在下方留下您的想法、評論和反饋。

• • •

進一步閱讀 Toptal 設計博客：

• 所有的趨勢都值得嗎？ 網頁設計師最常見的 5 個用戶體驗錯誤
• 如何設計有效的登陸頁面
• 為轉換而生——著陸頁設計最佳實踐
• 電子商務網站設計終極指南
• 信息架構綜合指南