前言

总结:引导指的是帮助用户熟悉一个新的交互界面的过程。App引导流程可以包括下列的一个或多个元素:功能展示、用户定制和解释说明。

想象一下,如果你接手了一份新工作,但你完全不知道你的主要工作任务,也不知道如何完成它们——你不太可能会做得很成功(无论标准是什么),也不太可能长久地做下去,对吗?高效的引导流程能够帮助新员工适应工作环境,确保成功。同时,每当公司开始使用一项新规章或制度时,对每个人而言,引导也是必须的:这能够帮助他们适应这种变化。

同样的道理也适用于交互界面,尤其是对于要多次重复使用的交互界面而言。这篇文章中,我们主要关注手机应用的引导流程。

我们将引导定义为:通过使用独立于普通的应用界面、精心设计的任务流和交互元素,让用户熟悉一个新的交互界面的过程。这不仅包括了教用户如何与界面交互(这是常见的对该概念的误解),也包括完成任何必要的设置。此外,引导并不仅仅针对于首次使用的新用户——当新的功能或设计上线时,我们也需要对现有用户进行引导。因此,引导过程可以发生在用户与一个应用交互的多个时间点,而不仅仅是首次使用的场景。

一、尽可能地不用引导

一般来说,使用引导流程可能会存在一些问题,原因如下:

  • 更高的交互成本。引导过程需要用户分配注意资源,并付出努力来理解或操作。即使用户决定跳过引导,他们需要点击来跳过它。这样就增加了他们使用你的产品完成任务的交互成本。
  • 记忆限制。通常,引导流程被用来帮助用户记住交互页面上的特定元素(例如每个图标代表什么意思,或者如何进行某项操作),但人类的记忆是有限的。不要让用户付出额外的努力来记住你的app上的东西;利用用户已有的心理模型,花更多的时间和精力在如何让app更好用上。
  • 可能并不会提升用户的表现。我们了解引导流程的缺点,但它的用处其实也并不十分明显。我们对卡片切换式引导(一种解释说明的引导页)的研究发现,这种引导并没有提升用户的表现。

因此,我们推荐UX从业者尽可能地避免制作app引导流程,而是将资源分配在让交互界面更加可用上

二、何时需要使用引导

用户通常需要花费一些(尽可能少的)时间来了解一个新的手机应用,但这并不意味着所有的app都需要独立的引导流程或冗长的解释说明。对于大多数手机应用,用户都应该能够通过使用它来理解界面,因此说明性的引导流程并不是必要的

即使对于比较复杂的手机应用,相对于展示一个针对整个app交互界面的教程,在任务情境中显示小提示对引导用户而言也是更高效的——人们通常不想(甚至都不会尝试)记住一大堆信息,尤其是在他们不确定自己是否会用到它们的时候。类似地,尽管app出错是用户体验中消极的一部分,但错误提示信息可以作为「教学时间」来让用户进一步了解app——此时用户有一定动力去阅读一两句话来试着解决遇到的问题。

只有在如下的几种情况下, 应该在手机应用中使用引导界面:

  • 你需要用户输入信息来让他们能够开始使用app。例如,银行的手机应用需要用户在使用前创建账户、确认身份信息。
  • 该应用的功能高度依赖于用户的个人状况和所处情境。例如,帮助节食的应用在了解用户当前体重的情况下会表现更好。
  • App的重要功能或任务流非常新颖,和典型的交互界面模式有所区别,或是全新的、对用户而言是陌生的。例如,当电子支票提现首次作为线下支票提现的替代功能出现时,app需要正式地介绍该新功能。

如果你还是不确定你的应用是否需要引导流程,在投入资源增加引导流程前,测试没有引导流程的版本。当你的用户在第一次使用应用(或新功能)时,是否存在困难?如果是,首先考虑是否能够改进app设计,增加它的可学习性;如果无法做到,设计一个引导流程的原型,并测试它。它是否解决了用户遇到的问题?用户在使用app时更轻松了吗?只有当答案都是肯定时,为你的交互界面增加引导流程才是有价值的。

三、引导流程的组成

常见的移动端引导流程有三种元素:功能展示、用户定制、解释说明。任一引导流程都可能包含了一种或多种上述元素。
image.png
引导流程中有三种常见元素:功能展示、用户定制、解释说明。任何一个引导流程都可以由一种或多种上述元素组成。

在下文中,我们将会介绍每一种引导元素在移动端app中的应用,并讨论使用它们的必要性及何时使用。

四、功能展示

功能展示告诉用户该app可以被用来做什么——正因如此,用户可能会把它看作市场营销甚至广告。
image.png
Productive, 一个帮助建立和追踪习惯的app,提供了介绍该应用功能的推广型引导页,诸如提醒和查看数据。

尽量避免在用户首次使用时就显示功能展示型的引导页。用户基本上不会无缘无故地下载一个应用;因此,他们很有可能跳过冗长的展示推广型的引导页。该原则的一个例外就是在某功能是全新的、较为复杂的情况下,例如我们之前提到的移动端电子提现支票的例子。(请记住:这项技术如今已经不是最新的了,因此当前的app并不需要在用户首次使用时展示它。对于一个功能从新颖到普及有多快,与该功能被使用的频率和每个步骤的可记忆性有关。)

将这些功能展示的页面放在应用商店页上,而非用户首次打开app时。应用商店才是用户探索新的应用、对比它们之间的功能差异的地方。
image.png
Productive的苹果应用商店页面的「预览」部分也放置了一些功能展示的内容。它在应用商店和应用内部都显示了同样的信息,会有些过犹不及。

除了在应用商店中强调、展示app的功能之外,另外一种解决方案是在用户使用app的过程中展示功能,即情境性帮助。例如,在Productive应用中,用户有可能在有足够多的数据后才会想看习惯数据的统计。这个app可以考虑在用户能看到习惯相关的数据后再展示这个功能,而非在用户并不能做相关操作时推广它。比如,在用户就某一习惯录入7天左右的数据后,这个应用可以通过展示一个视觉线索(如高亮app的统计数据部分)来告知用户他们可以用这些数据做什么。

尽管这种功能展示型引导在用户第一次使用app时并不十分有用,在新功能发布时的功能展示对于现存用户却能够起到引导和帮助作用。例如,Chase银行的手机应用使用卡片切换式的引导流程来介绍新的预算功能。
image.png
Chase银行应用通过卡片切换式的功能展示引导来介绍该应用的新功能(例如信用卡花销总结)。该引导流程非常短,也允许用户完全跳过它。

仅在功能对用户而言是全新的情况下,再使用功能展示型的引导流程。不要展示那些已经在你的app上存在一段时间的、使用率很低的功能。如果你总是展示那些你的用户早已熟悉的,或对他们而言不相关、不需要的功能,他们可能会感到厌烦,甚至无视所有类似的引导元素——即使它介绍的是对他们有帮助的新功能也是如此。

五、用户定制

许多应用都要求用户提供一些数据,从而个性化定制用户体验。例如,用户可以定制应用展示的内容或视觉设计。然而,并不是所有类型的定制都应该在引导流程中完成。

需要特别指出的是,视觉设计相关的个性化定制,例如选择颜色主题,并不属于引导流程。在用户实际使用一个app之前,他们很难知道自己更喜欢它的哪种外观,或者为什么某套视觉设计会比别的更好。(同时,大量研究表明用户通常选择默认设定。不要让他们选择、增加其认知负荷;提前做功课、做调研,确定最好的那套视觉设计。)
image.png
Reflectly应用在它的引导流程中包含了对视觉设计的个性化定制。在用户知道整个交互界面是什么样之前,该应用就迫使他们选择一种颜色主题。

这并不是说我们不该提供个性化定制视觉设计的功能,但是你可以迟点再展示给用户。这点并不值得在引导流程中展示。
image.png
Any.do允许用户在应用设置中更改视觉设计主题,但并没有在首次发布时就要求用户进行选择。

内容定制化可以创造对用户而言更与自身关联、有意义的体验,因此更适用于app的首次引导流程。手机应用中的内容定制的例子有许多。例如,对于一个语言教学的app,选择一种语言并确定用户对该语言的熟练度,是确保他们能够高效使用该应用的关键。
image.png
Fitplan让新用户填写一个简单的调查来定制他们的使用体验,并推荐适合他们的健身计划。该应用也简单地解释了它需要什么信息、为什么需要这些信息。同时,尽管该调查是自动弹出的,用户也可以跳过它;它还提供了进度条以告知用户他们的完成进度。

当引导用户定制他们的体验时,把它做得越简单越好。向用户解释你为什么需要这些数据,以及它会被怎样使用(就像上文的Fitplan例子一样)。思考:你真的需要这些信息来帮助用户开始并成功地使用你的应用吗?如果你不能够解释引导流程中收集这些数据的用处何在,那么应该在用户充分了解提供这些信息的必要性之后再收集它们。

六、解释说明

解释说明型引导流程的目标是教用户如何使用一个交互界面。解释说明型引导不应该被用来帮助解释糟糕的设计。我们更应该把资源放在如何将交互界面做得更好用,而不是制作教导型内容上。尽管如此,在一些情况下,我们确实需要解释说明(例如,应用特有的、与常规交互界面模式不同的,或新兴的、对用户而言陌生的功能或任务流);另一些情况下,用户期望解释说明(例如移动端的游戏)。

解释说明型引导流程有多种形式:卡片切换式教程、情境性帮助、交互式展示,等等。无论形式如何,解释说明型引导流程应是精炼的、非必要的,并且只应强调那些为能使用app,用户所需要了解的尽可能少的内容。下文展示了一些移动端应用中解释说明型引导流程的例子。

6.1 卡片切换式(Decks of cards)

卡片切换式教程通常在用户首次使用app时出现,以卡片切换的形式(类似图片轮播)说明了可以如何使用该应用的交互界面。使用这种类型的引导页面,尤其是对于那些相对简单的手机应用而言,实际上往往复杂化了界面,并增加了用户的记忆负荷。

因此,我们不推荐使用卡片切换式引导页面。话虽如此,如果你还是选择使用了这种引导页面,应提供一个显眼的跳过选项,最小化卡片的数量、只展示用户最需要了解的信息;同时,每张卡上只应介绍一个概念。
image.png
What the Forecast?!!应用使用了卡片切换式引导流程,告知用户各个功能在app的什么位置。这些对于标准图标的介绍是完全不必要的,仅仅是在浪费用户的时间。

6.2 层叠展示解释文字

层叠展示的解释性内容是另一种解释说明型引导,它被用来向用户展示核心功能在界面中的位置及其作用。当使用这种类型的引导时,要确保该展示是及时的(例如,在用户首次使用某功能时)、不唐突的。这种类型的引导流程非常适用于用户首次试着完成某任务时的情景;在这种情况下,这种引导可以随着用户推进任务,逐步进行提示。因此,层叠展示的解释性内容是锦上添花,但并非缺它不可的元素
image.png
NOAA Weather应用解释了该界面上所有可能的交互方式,显得有些过多了。这种展示侵入性太强,且对于标准界面元素(如分享和设置图标)的解释是毫无必要的。
image.png
Checklist应用通过层叠展示向用户介绍了该应用的一些核心功能,例如如何为出行清单分类、贴标签。然而,这种解释说明是为了解释不熟悉的用语(左图:在出行清单的情境下使用「种类」)和没有标签的图标(右图:较大的橘色标签)。在这种情况下,可以用通过点击触发的帮助信息来降低该解释说明内容的侵入性——如果用户需要进一步的解释说明,他仅需点击即可。(更好的方法是:提升交互界面本身清晰度,而非为糟糕的交互界面提供解释。)

6.3 交互式展示

如果你的应用比上述的例子都更加复杂,或你的设计更新颖、不寻常,因而你觉得需要解释说明,考虑使用交互式展示。交互式展示能让用户边操作、边学习(最好在低风险情况下)。成功的交互式展示(简要地、仅仅展示新颖的、不常见的功能)会让用户感觉像是进行了一次练习,而非查看了一个教程。
image.png
Fabulous,一个目标追踪应用,使用了交互式展示来让用户了解相对简单和熟悉的任务流。这是没有必要的。

image.png
在新用户玩一个简单关卡的过程中,Temple Run 2实时提供了交互式展示。例如,在用户接近一个障碍前,该应用会提示用户如何避开该障碍。这种交互式展示教会用户如何玩该游戏,并让他们能够有机会在情境中进行多次练习。

image.png
MindNode,一个绘制思维导图、帮助头脑风暴的app,使用了交互式展示帮助用户熟悉一个相对陌生的任务流。在教程中,用户可以创作一张非常简单的思维导图,从而在这种可交互的、练习式的环境中对app的各种元素、设置和术语快速熟悉起来。它也提供了跳过该教程的选项。

大多数移动端应用并不需要解释说明型的引导流程。如果你的应用中使用了这种引导,仅仅在展示新颖的功能(区分你的app和其他类似产品的关键元素和交互)时使用,并确保它足够简短。

结论

尽可能地简化引导流程。对于绝大多数移动端应用而言,这意味着直接让用户上手开始使用。对于那些复杂的、有独特的交互模式的app,或者需要用户信息来提升体验的app,引导流程可能更有帮助。在提供引导页面时,记住如下几点:把重点放在那些能够帮用户成功使用app的内容上;强调新颖的、用户不熟悉的部分;确保解释性的内容简练、不唐突,不影响用户的使用和体验。

附录

原文地址:https://www.nngroup.com/articles/mobile-app-onboarding/

版权声明
本文版权属尼尔森诺曼集团(Nielsen Norman Group)所有。欢迎转发至朋友圈,如需转载,请邮件Support@nngroup.com。未经授权的转载、翻译是侵权行为,版权方将保留追究法律责任的权利。