原文来自:Garcia, A. (2020, May 26). Design a Better Homepage with the StoryBrand Framework. Retrieved May 27, 2020, from https://www.toptal.com/designers/ux/storybrand-framework?utm_campaign=Toptal+Design+Blog
翻译:Zoe Ren

网站的主页就像店面的橱窗一样,应该清晰地告知消费者,这里经营什么样的生意,谁在经营这个生意,并且至少给出一点关于这里将提供什么样服务的暗示,这里是否有打折商品,提供信息,或者娱乐活动。

就像店面橱窗一样,主页面的设计师们可以诱惑用户更多去了解产品,否则他们会失去用户的关注(更糟糕的可能性是,可能会驱使用户离开)。而此处即将介绍的,清晰地讲述一个品牌故事的方法,可以帮助UX设计师们吸引主页用户的注意力,并鼓励他们更多探索和了解产品。

主页的目的是什么呢?

登录页面的目标是转化浏览者成为注册用户,而主页的目标则是告知浏览者我们的品牌可以为他们的问题提供解决方案。如果做得好的话,主页的浏览者就会被转化成我们的客户,一个潜在的回头客。

在过去的几十年中,主页的设计已经得到了很大程度的提升。这要多亏了各种各样的分析和市场调查,以及设计团队们基于这些调查数据做出的改进。

回顾1993,当时只有600个网站存在,唯一去监测一个网站流量的方式是用浏览器计算访问者的数量。紧接着可以去计数,最后有了更多便于理解的分析数据包,其中包含唯一次访客,页面浏览量和跳出率等。

通过这些分析数据,UX设计师们可以去优化“Action”按钮的放置位置,提升站点的相应速度,做A/B测试,使用视频去吸引访客,使用高质量的图片去吸引人们的注意力,并且设计了消息框功能区提高主页的表现力。然而问题是,这些是不是能够保证客户的忠诚度和信任呢?
Screen Shot 2020-05-27 at 3.25.40 PM.png

设计主页时常见的三个陷阱

商业,或者扩展开来说,设计师们,在打造主页的时候常常会遇到三个主要的陷阱:

  1. 他们不关注真正重要的东西。他们告诉人们产品或服务的特性,却没有意识到人们根本不在意这些。人们关注的是商业如何解决他们的问题并让他们的生活变得更好。
  2. 商业没有清晰地表达他们想要传达的信息。Chatbeat的Tony Haile曾说,一个网站只有少于15秒的时间去吸引访客的注意力。
  3. 当产品本身很糟糕而不能解决任何问题的时候,设计师们其实能够做的非常有限。

品牌故事结构是什么?
不管商业界是如何认为的,事实上一个logo不等于一个品牌,事实上远非如此:一个品牌是一个承诺,一个基于他们存在理由的承诺。

人们选择一个品牌而不是选择另一个有着一些理性或者感性的理由。强有力的品牌表达可以为品牌本身打造客户忠诚度而不仅仅是客户对于单个产品的忠诚度。一个清晰连续的表达对于实现这一点非常重要。而使得一个品牌能够脱颖而出的恰恰是它的品牌故事。

讲述故事的技巧被企业家们广泛地用来吸引投资者和社交。像Apple这样的公司就非常理解和整合这样的力量,对于他们所做的所有事情都采取讲述故事的方式。他们知道一切不是与自身相关,而是与客户相关。
Screen Shot 2020-05-27 at 3.41.32 PM.png
讲述故事的框架是由Donald Miller创建出来用于帮助商业简单有效地交流和清晰传达信息的。在他的书:Building a Story Brand里面,Miller陈述道:“你的客户应该是故事中的英雄,而不是你的品牌。这是每一个现象级成功的品牌都知晓的秘密”。

什么是故事版

无论是一个小型公司还是一个百亿级别的大品牌,都应该理解让客户困惑最终会造成他们的损失。通过讲故事的方式传达信息,就像Miller说到的,“组织他们的思维方式,减少他们的行销努力,消除混乱,重视竞争,并最终再次获得商业增长”。

Miller还将这个过程解析成了七个不同的部分:
Story Brand.png
想要某事的角色(使用网站的人)遇到问题(他们的需要),然后遇到向导(业务),该向导为他们提供了一个计划(指示下一步)并呼吁他们采取行动(呼吁采取行动), 这会带来成功的故事(他们购买产品)并帮助他们避免失败(提醒他们如果不购买会发生什么)。这种结构几乎可以在每部成功的电影中找到。 它也可以应用于企业及其客户。 下一步是让客户按照以下结构编写他们的品牌故事:

  1. 角色:客户永远是故事的英雄,而不是品牌。 UX设计人员通常要通过UX研究和用户测试来确定客户对品牌的需求。他们需要集中精力于了解人们的欲望,例如节省财务资源,节省时间,建立社交网络或获得地位。
  2. 定位要解决的问题:将这个问题拟人化,并让用户了解该公司的产品可以用来精准解决用户的问题。公司倾向于专注解决外部问题,但客户会购买针对自身问题的解决方案。人们有三个冲突级别:

-外部(大多数企业尝试解决外部问题)
-内部(例如沮丧,恐吓,不安全感)
-哲学的(这个故事为什么重要?)

  1. 提供一个指南:该指南是企业或品牌。客户需要有人来解决问题。他们对品牌的认知对他们的信任至关重要。品牌必须传达两件事:

-同理心(表明对客户可能感到的痛苦的理解)
-授权(它将使客户确信该品牌能够帮助他们)

  1. 给他们制定计划:企业向客户展示他们下一步需要做什么。在显示出简单的行动计划之前,客户仍然不确定是否要购买。用户体验设计师可以为客户阐明确切的下一步。他们还可以通过解决与产品或服务有关的问题来减轻客户的焦虑感。
  2. 并呼吁他们采取行动:有效的行动呼吁有助于购买或注册。
  3. 告诉用户该产品可以帮助他们避免失败:客户面临什么风险?如果不从该品牌购买商品,他们会损失什么?
  4. 告知成功的样子:告诉客户这种特定的行动将如何改变他们的生活。向他们展示购买产品后的生活状况。强有效的讲述故事的方式是允许用户:

-赢得权力或职位
-寻找可以使他们完整的人或事物
-体验某种形式的自我实现,使他们变得完整

image.png



如何使用故事版设计主页

主页永远不应该是关于商业的,而是应该关于潜在用户和消费者的。
就像初次约会,第一印象很重要,而初次约会的目标是为了吸引对方的兴趣。UX设计师们必须策略性的选择他们将要展示的内容。设计师们可以根据故事版的7个环节去合理安排主页的设计。同时,也要考虑到以下五个重要因素:

1. 标题

标题往往与一些引人入胜的图像结合,并被放置在首页的顶部。 几乎在所有情况下,大标题都应以客户为中心,并向访问者表明品牌具有使他们受益的东西。 标题应该具有以下特征:

  • 告诉客户产品的益处
  • 定位用户的问题并告诉他们品牌可以为他们解决这个问题
  • 以一个清晰精确的方式描述商业的运作方式

    Screen Shot 2020-05-27 at 4.19.34 PM.png

    2. 通过展示权威性而获取用户信任

    必须将业务定位为解决客户问题的指南和解决方案。 精通建立信任艺术的UX设计师可以轻松地说服人们,这个特定的品牌是解决他们问题的正确解决方案。 他们可以通过以下方式做到这一点:

  • 显示该品牌重要客户的推荐

  • 显示与该品牌合作的公司的徽标
  • 显示有关用户数量,交易次数等的特定数据
  • 具有奖项和荣誉,已发表的作品,媒体露面和类似成就
  • 显示团队或公司总部的图像

image.png

3. 号召行动的语言

与首页访问者建立情感联系是将他们转换为客户的第一步。 建立这种情感联系后,就需要采取行动来达成协议。
行动呼吁有两种方式:

  1. 使用直接号召性语言

这个适用于已经了解该产品并准备好购买或注册的人,其中包括“购买”,“注册”或“开始使用”之类的语言。 单击这些按钮,买家将直接进入表格以完成交易。

  1. 使用过渡性的号召用于

这个适用于尚未购买的访客。 在提交之前,他们可能需要更多的时间和了解更多信息。 这些按钮的形式为“更多信息”,“免费试用”或“取得联系”类型的按钮。
有些号召性用语可以将两者结合起来,也可以并排放置(通常被视为一对“立即购买”和“了解更多”按钮)。
Screen Shot 2020-05-27 at 4.25.37 PM.png

4. 引人入胜的图像

无论首页内容有多严肃,StoryBrand框架都要求有一个圆满的结局。 选择图像时,请记住,要选择那些使人感到“永远幸福”的图像。图像吸引着来访者的情绪,尤其是快乐的人的图像。 显示幸福的人的照片可以使人们想象自己购买产品后的幸福结局。

5. 短文本

蚊子呢越少越好。许多人不愿意阅读大篇幅的文字,所以最好以尽可能少的文字去传达品牌信息。UX设计师们应该帮助品牌去以最精简的方式传达核心内容。

image.png


成功的主页设计

成功的主页设计可以清楚回答以下几个问题:

  1. 品牌是做什么的?
  2. 品牌如何帮助客户?
  3. 客户必须要购买什么样的服务/产品(以实现自己的目标/解决问题)?