五个技巧,设计优质的新用户引导流程

新用户引导绝对是个瓶颈。花费时间设计和开发,找了用户测试调研,最后上线了,依然拦不住汹涌的用户流失潮。很多时候,也许只是新用户引导没做好而已。今天的文章,我们来聊聊新用户引导的设计~新用户不去注册是因为他们乐于了解你的产品的UI是如何工作的。他们注册是因为他们认可你的产品所呈现出来的价值。好的空状态设计,能够化腐朽为神奇。


新用户引导绝对是个瓶颈。花费时间设计和开发,找了用户测试调研,最后上线了,依然拦不住汹涌的用户流失潮。很多时候,也许只是新用户引导没做好而已。今天的文章,我们来聊聊新用户引导的设计~

五个技巧,设计优质的新用户引导流程

让用户注册本身就不是一件容易的事情。产品团队需要花费大量的时间、精力、金钱来提升产品的注册量,而更严峻的问题在于,许多用户注册完成之后,尝试一次之后,就再也不用了,来之不易的注册用户就此流失。根据 Andrew Chen的研究表明,平均每个APP会在用户安装后3天丢失77%的日活用户。

你绝对不希望在投入了如此之多、收获新用户之后,在几天之内丢失其中的多数。那么,要怎样才能做的更好呢?一个优质的新用户引导流程(Onboarding),能帮你的产品获得良好的第一印象。

新用户引导(Onboarding)这个词本是人力资源领域的术语,不过现在已经被UI/UX领域借用过来,指的是帮助刚刚注册网站/APP的新用户熟悉产品到流畅使用的引导流程。

在设计新用户引导流程的时候,有许多注意事项,确保用户能够尽快熟悉你的产品,并且了解它的实际价值。

一、不要使用过长的新手教程

为了降低用户流程中可能存在的摩擦,尽量遵循“少即是多”的原则。

如今市场上每个APP都会在初次登录的时候提供一个滑动展示的教程,介绍应用的功能:

五个技巧,设计优质的新用户引导流程

静态的展示页,旨在展示产品的功能和价值。

而有的APP则在这几屏来教育用户,告诉他们如何与之进行交互:

五个技巧,设计优质的新用户引导流程

著名的iOS 待办事项应用Clear为用户提供了7屏教程,当用户经历了这些教程之后,才能进行真正的操作。

这种滑动展示型的新用户引导教程,有明显的缺陷:

  • 这种滑动展示型教程是“动力杀手”。它横亘在用户和APP之间,像障碍一样,即使教程设计得足够精美有趣,用户也很难充满耐心地仔细阅读完。为什么?因为绝大多数的用户还是倾向于自己探索APP,他们想要先看看这个APP到底怎么样,而不是先看教程。
  • 用户在使用APP之前并不想阅读教程。首先,用户打开这个APP的目的本就不是阅读教程,即使教程对他们有所助益,但是这本身是偏离用户初衷的。用户打开APP的目的是要完成某个任务,达成某个目标的,所以,不要让你的用户觉得他们必须通过学习,才能使用你的APP。

二、让新用户引导结合场景

相比于让用户记住一切,不如适时的给予用户以引导。

前面谈及的这种首次打开的引导教程还有一个可用性上的问题:它会要求用户在还未开始使用APP的时候,就必须仔细阅读这些指引,并且将教程中所提供的信息记住。可是问题是在于,人的短期记忆是相当有限的,教程越长,记住内容的比例通常越低。而这还是在用户决定要去仔细阅读教程的前提下。

五个技巧,设计优质的新用户引导流程

新用户不去注册是因为他们乐于了解你的产品的UI是如何工作的。他们注册是因为他们认可你的产品所呈现出来的价值。

符合上下文场景的即时的新用户引导流程,可以作为上述静态展示型引导的替代方案。这种新用户引导流程和之前的方式不同,它是在特定的界面、场景和时刻,或者说特定的用户历程的节点,给用户提供必要的说明。这种新用户引导模式更加简单、强大。它可以以许多不同的方式实现:

(1)示例数据

“Welcome Board”是用户打开Trello 的任务管理面板的时候,能看到的第一个的界面,其中涵盖了预填充的代办事项列表,说明了程序中不同控件的交互和功能,这种方式可以让用户更有效地学习产品的功能。

五个技巧,设计优质的新用户引导流程

(2)焦点提示

你可以在Android 版的Youtube客户端找那个找到恰到好处的提示。APP 让用户将注意力集中到某个特定的主要交互上,最大限度的减少说明的信息量。它让教学内容以图层的形式叠加到对应的UI控件上,这些提示通常出现在用户首次操作的时候,并且一次只显示一个。这些提示的内容应该设计得易于快速阅读,因为用户倾向于看到之后快速关闭它们。

五个技巧,设计优质的新用户引导流程

(3)交互式提示

交互式提示则是在用户在使用过程中,进入特定的环节、进度的时候才会被触发的一种提示,它不会按照一定的顺序出现,所以不同的用户碰到这些提示的时间、场景不尽相同。Duolingo 这一语言学习APP 就非常了解人们语言学习的规律,在实战中学习语言是最为有效的方式,所以它会在用户不断同APP进行交互的过程中提供交互式的提示。

五个技巧,设计优质的新用户引导流程

小贴士:将视觉设计和提示结合起来,让用户更快地获取信息。

三、充分运用空状态

用户最初使用APP或者网页的时候,许多界面都呈现出“空状态”,所以很有必要将空状态纳入到新用户引导流程中。

首先,各种各样的内容是APP和网站所提供的价值所在,这也是人们选择的缘由。因此,要让用户在没有内容的时候,体会到内容的重要性,满足新用户获取内容的需求。

对于新用户引导流程而言,空状态界面是一个非常合适的介入点,所以最好不要让它真的就这么“空”下去,有效的用起来才对。

好的空状态设计,能够化腐朽为神奇。

如果想要让用户更好的同你的产品进行互动:

  • 让用户有所期待,这样能让用户更舒服
  • 给予明确的指示,让用户更快推进到下一步

举个例子,例如用户注册Instagram 之后的界面是一个典型的空状态。其他的用户的这个个人页面通常都被照片、评论等内容填满,所以,Instagram 将这个空状态改成了新用户引导的界面,上面会显示“还未发布新作——请点击相机按钮分享你的第一张照片或者视频。”而这句话下会有一个箭头指向相机按钮。

五个技巧,设计优质的新用户引导流程

四、展示成功的状态

通过达成成就的方式帮助用户获得最初的成就感。

当用户完成一个重要的任务的时候,这一时刻是创造产品和用户之间情感联系的重要机会,你要让用户知道,他们做的很好,要承认他们的进步,并且同用户一起庆祝。

五个技巧,设计优质的新用户引导流程

MailChimp 就是个典型,他们在新用户发布第一次邮件的过程中,不断添加有趣的、幽默的奖励来推动用户完成他们的第一封邮件的发送。

五、衡量

当你设计好了新用户引导的流程之后,需要不断的根据用户反馈的数据和信息来衡量用户是否真正的“Onboarding”了。这个衡量的指标是至关重要的,你应该设定一个值,严格的跟踪数据的变化,并且根据成功率和用户的反应,敏锐地调整。在开始任何新项目之前,你都应该问自己一个问题:“这个项目要如何衡量新用户引导成功率?”

六、结语

优秀的新用户引导流程能够让产品的运营、用户的积累更为高效。新用户引导应该是整个产品的UX和UI设计中不可或缺、值得重视的一个组成部分。

 

原文地址:uxplanet

原文作者:Nick Babich

翻译:@陈子木

译文地址:http://www.uisdc.com/best-practices-for-onboarding

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24840/

(0)
CatherineCatherine
上一篇 2017-05-09 20:52
下一篇 2017-05-09 22:42

相关推荐

  • 情绪板的制作方法:写给设计师的全方位使用指南

    在设计上图片比其他要素更容易让人理解,所以我们可以利用情绪板(英: Mood Board),来使设计工作更加流畅,缩短制作的时间、改善工作流程。

    2017-05-11
  • 双十一来了,淘宝的登录页有bug?我有解决方案!

    关于淘宝的登录页设计中的BUG,本文作者就用所学的用户研究、交互设计以及产品经理相关的知识来分析一下,并提出了自己的解决方案。

    2017-05-17
  • 交互新人,请不要再犯这几个错误了!

    不知不觉,我已经正式在交互设计的路上越走越远,了解得越多,就觉得交互设计需要学习和掌握的知识越多;同时犯的错也会越多。然而犯错并不是一件坏事,怕的是犯过的错误不能够被积极地思考,我们不能及时把错误化作成长。根据目前我的一些浅薄经验,总结出了交互新人往往容易犯的一些错误,以及关于错误的一些思考。

    2017-05-22
  • Sketch快捷键速记表(中英对照)

    Sketch 是一款好用快捷的设计软件,很多做UI设计的同学开始从 PHOTOSHOP 转向 SKETCH,使用它不仅可以做 WEB 和 APP UI,也可以用它来制作高保真原型或交互稿。如果你刚接触这款软件,那么熟记他的快捷键会大大提高你的作业效率,下面是最新的 Sketch 快捷键一览表,可以让大家快捷查询或记忆Sketch的快键。原文地址:http://www.shejidaren.com/sketch-kuai-jie-jian...

    2018-04-16
  • 搞定APP着陆页优化的超实用原则

      你应该知道着陆页的分析方式,一个比较客观的方法是使用GoodUI(http://goodui.org)清单来提升和衡量着陆页。最优化着陆页几乎是不可能的。将着陆页最优化几乎是不可能的,但如果你正在为移动app设计一个着陆页,…

    2015-07-28
  • 电子书阅读APP原型设计解析

    我是比较喜欢纸质书的,一本好书,我总愿意买本纸质书,放在家里可以随意翻看,或一遍,或多遍,偶尔也会当花瓶放着。 阅读纸质书是视觉,听觉,触觉,嗅觉的享受,甚至连带着回忆都是美好的。 柔和不刺眼的纸张带…

    2015-06-11
  • 教育产品组件化交互设计的实践与思考

    作者:王媛媛   组件化设计,就是设计模块化,组件可复用。是以通用化的视角审视模块设计,根据业务方需求支持多个产品的接入与使用。在线教育领域内,题目是线上线下教学场景内校验学习的一种基本方式,同时,题目…

    交互专题 2017-11-13
  • 【交互基础】系列之解析移动端导航设计模式

    鉴于目前交互设计的知识体系较为混乱,我写了这个[交互基础]系列专题,旨在整理移动端交互设计基础知识。巩固自己的知识体系,也与大家共勉,打好基础,才能飞得更高!

    2017-04-30
  • 交互设计的门类 & 英国综合类院校及艺术院校在如何定义交互设计?

    艺麸大大带你了解英国交互类TOP院校要知道你离名校并不遥远别走神,好好看完哦~随着科技日新月异的发展,让交互设计一时成了“网红专业”,很多学平面设计或视觉传达的童鞋们纷纷转专业到交互设计大本营。然而各大顶尖院校对于交互设计的专业命名也是“五花八门”,如,服务设计、交互设计、用户体验设计等。交互本来就是一个艺术与科技的完美结合,国内很多院校都不能将其做的很突出和优秀,这就导致了出国学习交互设计成为许多人的想法。那么你有多了解交互设计呢?我...

    2018-04-19
  • 浅谈WEB页面三种程度的提示弹窗

    在设计WEB页面时,经常会使用到弹窗提示,根据提示的深度层次,大致可分为三种,接下来介绍一下三种程度的弹窗样式与进阶样式。

    2017-05-29