使用 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 个用户体验错误
• 如何设计有效的登陆页面
• 为转换而生——着陆页设计最佳实践
• 电子商务网站设计终极指南
• 信息架构综合指南