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

新用户引导绝对是个瓶颈。花费时间设计和开发,找了用户测试调研,最后上线了,依然拦不住汹涌的用户流失潮。很多时候,也许只是新用户引导没做好而已。今天的文章,我们来聊聊新用户引导的设计~新用户不去注册是因为他们乐于了解你的产品的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

相关推荐

  • 后台交互设计中,控件使用场景与规范总结(附案例)

    数十万互联网从业者的共同关注!作者:panda,交互设计师微信号:D1173740249编辑:Dva背景之前有写过一篇关于新手入门交互设计师的文章《新手入门做交互设计的那些事儿》,最近刚完成公司平台 2.0 的改版设计,平…

    2017-08-01
  • 12个常见的网站交互设计错误

    好的交互设计 可以区分开有质量的网站和其他普通网站。然而,如果有明显的设计错误,它只会给予你本来想打动的用户以刺激和挫败感。下面是Speckyboy上总结的让人最不喜欢的交互设计 错误列表,来看看你中枪了没!

    2017-05-27
  • 阿里交互设计师实习期总结的6个新人进阶方法

    这是阿里交互实习生半木对他两个月份实习做的一个总结,以指导后续的项目工作,主要内容为协作方式与职业素养方面的沉淀。都是书本上没有的实战经验,非常适合没有经验的交互新人进阶学习。 作为职场新人,第一次接…

    2016-05-19
  • 交互设计中的项目跟进怎么进行?

    交互设计的常见流程可以划分为:需求分析、设计规划、设计实施、项目跟进、成果检验五个流程。很多人以为从无到有的过程才是最重要的环节,观点并没错,但我今天想说的是如何进行项目跟进。

    2017-05-30
  • web图像的常见应用策略与技巧

    本文介绍一些关于响应式图像的适配应用策略,回退原理,SVG的换色技巧,雪碧图的百分比定位计算公式等相关的一些小知识点,目的在于帮助一部分同学快速的理清图像应用思路,以及一些web图像的应用技巧。data-src
    data-srcset
    在加载到的时候更换为
    src
    srcset容器元素的尺寸:elW * elH
    单张图片的尺寸:imgW * imgH
    Sprites图片的尺寸:spritesW * spritesH
    单张图片在Sprites图上的位置:imgPosX, imgPosY点的位置为 (x, y)
    容器上的(x, y)点与容器左上角的距离为 cX, cY
    Sprites图上的(x, y)点与本张图片左上角的距离为 sX, sYelW = imgW, elH = imgH
    cX = sX, cY = sYcX = elW * x
    sX = spritesW * x – imgPosX
    elW * x = spritesW * x – imgPosXx = imgPosX / (spritesW – elW) = imgPosX / (spritesW – imgW)
    y = imgPosY / (spritesH – elH) = imgPosY / (spritesH – imgH)

    2017-05-01
  • Axure RP 8.0 抽奖大转盘实例教程附.RP下载与视频演示

    原标题:【AxureRP8实现真正抽奖大转盘】 效果图: Demo地址:http://www.iaxure.com/share/luck/ (有广告) 视频: 实现过程: 1、生成一个0-360之间的随机数,保存至变量; 2、旋转转盘到达指定角度,案例中为3-…

    2015-08-24
  • 阿里设计师分享:UX设计心理套路

    在阿里巴巴国际站,我们对心理学理论进行了客观的数据验证,把科学理论应用至前线设计,提升设计效益。我们沉淀及过滤出一些行之有效的方法及案例与同业共享,希望普惠更多设计师能活化科学理论,共享知识协同促进中国设计走出去。

    2017-05-02
  • 美国交互设计“综合类&艺术类”院校申请差异对比?

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-04-30
  • B2B、企业SaaS中的交互设计总结

    [图片]熊猫设计院关注熊猫设计院发现更多设计好文[图片]译者 / 不器校对 / 熊猫小生作者 / Varun Mohapatra[图片]我刚开始在VWO工作的时候,一直想弄清楚一个问题:企业软件(B2B)真的和B2C应用不一样吗?对于设计师或者设计流程来说,两者又有什么不同?这篇

    微信热点 2018-04-18
  • 双11期间,阿里巴巴UED的设计师都在做什么?

    双11 忍不住剁手的冲动?因为你所有的购物喜好,心理,行为和最终的选择,都被一个神秘组织认真研究过。今天我们拉开幕布,看看这个叫阿里巴巴UED的顶尖设计团队。在11月11日这个日子的前后一段时间,当你发现如下症状之一:当你被机场、地铁、公交站牌和网页里频繁出现的双11提醒,感觉重要的时刻就要来临;当你心跳加速,不管什么都先放到购物车里再说;当你最终等待在11号这天的凌晨用风一样的速度支付成功,并长吁一口气;当你认为一切都那么的简单、自然...

    2018-01-31