新用户引导设计分类与思考

新用户引导设计分类与思考

本文主要从四个模块来阐述如何做好app的新手引导:

一、新手引导简介

1.新手引导有哪些作用?

用户引导在app的使用过程中是十分常见的,也是必不可少的,旨在降低用户的学习成本,快速了解和上手产品或者是新增功能,避免用户使用过程中的迷茫,是提升产品整体愉快体验的必要手段。

如同Jesse James Garrett在《用户体验要素》提出最底层的架构是用户需求和网站目标一样,推动新用户引导设计(Onboarding)的原因也有两个:用户需求和产品目标。

对于新手引导来说,用户需求是快速、愉悦地学习使用产品,产品目标是将新手用户快速转化为活跃度高、黏着度高的忠实用户。用户需求和产品目标出发的角度会不一样,有时候会存在着冲突,但并不是不可调和的矛盾,所以新手引导设计就是要平衡处理好用户需求和产品目标,实现双赢的局面。

在引导力和对正常用户使用的干扰上做出平衡。

为了不破坏用户正常使用产品原有的功能和操作,需要在引导力和对正常用户使用的干扰上做出平衡。不妨多反问自己几个问题:这个功能真的很必要引导和提醒用户吗?这个功能是需要让所有用户都知道还是某一类用户知道就可以了?这个提醒是需要所有场景都提示,还是到某一类特定场景才来提示呢?下面我们来梳理各类引导设计模式

然而,大部分产品都有其特殊的复杂性,如果一开始我们就强制要求用户进行注册或者邀请好友等操作,会招致用户反感,降低了用户体验,那么这条实现目标的路径就不会按照我们所预期的进行,甚至最终导致了用户的流失。

研究表明,影响用户决定去选择并坚持使用一款产品的原因有以下四要素:

(1).基于当前的问题,寻找新产品新解决方案的推动力

(2)新产品所能带来价值的拉动力

(3)不想轻易作出改变的惰性

(4)对使用新产品可能带来不确定风险的焦虑


2.哪些内容需要引导呢?

引导的4种类型

产品特色

展示产品的核心竞争力及最有特色的点,让用户清晰地了解该产品和同类产品相比最突出的优势,有一个良好的第一印象。

产品操作

绝大部分产品做新手引导都是为了提示用户如何进行操作,降低用户的学习成本,帮助用户快速上手。

操作引导分为强制性的和非强制性的。

强制性的主要是登录、注册、安全认证、激活相关流程,需要身份验证后才能继续进行后续的操作;

非强制性的则多是鼓励用户操作,例如完善的资料、关注更多好友、分享转发等,这类引导最好给予一定的激励。

功能提醒类

出于有些icon达意不明确、有些功能被收起或隐藏在手势中、主打功能希望被用户快速掌握等原因,需要加以引导降低用户的学习成本。

内容推广类

有时候产品在运营过程中会策划一些行销活动,该区域就作为活动的宣传口。活动推广型闪屏着重体现活动的主题,用户利益点,以及营造活动氛围。


二、新手引导有哪些呈现形式?

新手引导「前置引导」

引导页的内容一定要仔细挑选,保证能带给用户新鲜感和吸引他们的注意力,否则对用户来说反而是种干扰,只会直接选择快速划过。


1、启动页 (launch screen )

定义: 当app被用户打开时,在app启动过程中被用户所看到的过渡页面(或动画)都被我们统称为启动页。

作用:APP在用户打开过程中需要一定的时间,启动页的展示是为了给用户一个过渡页面,缓解用户打开app时等待的焦虑心情。类似于在app在加载过程中loading动画一样,都是为了通过设计的手段来解决用户的焦虑情绪。

主要分类:规范型和品牌推广型

规范型闪屏:根据  iOS 和MD 的官方定义来,用户打开应用能立即使用是最好的体验,例如苹果系统自带的一些应用,是没有闪屏的;或者把闪屏设计的和首页很像,类似 国外的instagram


instagram 启动页

品牌推广型:国内很多APP为了体现产品的品牌,强化用户对品牌的记忆,一般启动页会由:产品名称+产品形象(logo)+产品广告语(slogan)组成。启动页设计多数较为精简,主要目的是为了突出产品特点,不宜内容太多,太过复杂,且不易经常更换,打断用户对品牌的认知记忆,类似国内的淘宝、优酷等。

交互方式:启动页为一张静态图片,不可点击,不可跳过

启动页

2.闪屏(splash screen )

定义:闪屏页约等于启动页,又叫做开机广告。由于闪屏主要用于活动推广,商业上的广告宣传,容易造成用户排斥心理,所以这类闪屏多数有倒计时和跳过的功能。该页面出现在启动页之后,类似京东、爱奇艺等国内大多数应用,在冷启动出现启动页之后有时候紧接着还会出现广告闪屏。

除了自身功能之外,产品中也会包含一些额外的推广性引导,最常见的就是产品中植入的广告。

主要分类:广告推广型、活动推广型、节日关怀型

广告推广型:产品为了通过流量变现,在此区域给一些商家提供广告宣传。

广告推广型

活动推广型:有时候产品在运营过程中会策划一些行销活动,该区域就作为活动的宣传口。活动推广型闪屏着重体现活动的主题,用户利益点,以及营造活动氛围。

活动推广型

节日关怀型:在节假日到来时,很多APP会通过营造节日气氛来体现人文关怀。目的主要是通过情感化得设计给用户带来节日祝福,提升用户的对产品的好感度,提升产品本来的品牌调性。且此类闪屏多采用插画类的手法,对设计师的表现力比较强的需求。

节日关怀型:雪球十周年纪念宣传图

3、引导页(onboarding screen)

定义:用户第一次安装app或者app更新后首次启动时展示的3-5个可滑动的页面。主要是向用户展示产品的功能和产品亮点。

交互方式:可以左右滑动切换页面,一般最后一页有引导按钮,可以点击进入app。

(1)静态滑动展示引导页

滑动引导页主要目的是向用户展示产品新功能的操作方法。引导页出现在用户首次打开APP的时候,基本上由3-5个页面组成。在用户使用产品前先给用户营造好产品的基调和氛围,宣传产品功能和亮点或告知用户最核心的操作方式。

如今市场上大多数APP都会在初次登录的时候提供一系列滑动展示型引导页,介绍应用功能或演示交互。这种形式的缺陷在于它横亘在用户和APP之间,即使页面设计得足够精美有趣,用户也很难充满耐心地仔细阅读完。通常用户对信息吸收的效率并不高,用户更希望赶紧体验产品而不是看这些教导。因此引导页的数量一定不要过多,页面简明扼要、中心明确才是王道。因为绝大多数的用户还是倾向于自己探索APP,即使教程对他们有所助益,但是这本身是偏离用户初衷的。

(2)动画/视频引导

启动引导页面视觉鲜明,说明简约,对刚刚熟悉新应用的用户来说能够快速记住核心功能,并在使用中探索。

滑稽有趣的引导交互动效,体验之初拥有趣味感。


情感化互动,细节暖化体验用户


游戏化互动,创建与众不同的启动引导页

4.预加载任务

预加载任务是指在用户进入产品后,自动为用户创建了一些和产品形态相关的示例,而不是留给用户一个空页面。在引导的同时突出了产品的特色,借用本身的形态让用户沉浸在产品的真实场景中去学习,在后续产品的使用中快速上手。常用于工具类产品,比如原型工具、设计软件、文档、任务清单等产品。


场景式引导「过程中引导」

符合场景的用户引导是在特定的界面、场景和时刻,或者说特定的用户历程的节点,给用户提供必要的说明。


1.遮罩式提示「蒙层引导」

蒙层引导,顾名思义,就是在产品的整个界面上放用黑色半透明的图层进行遮罩,遮罩式引导为一种比较强势的引导,对界面进行圈注,旁边配以手势、文字、符号、插画等。

这种引导方式可以让用户聚焦了解被圈住的功能点或手势说明等,不被页面中其他的元素所干扰,同时也能够增加用户对产品的好感度。

1)单页遮罩引导

单页遮罩引导的适用场景非常多,比如在展示新功能、说明界面中功能位置的改动、讲解操作方式、体现特定的手势交互划分说明界面的整体结构等等。

2)分步引导

分步引导就像上楼梯一样,会一步一步由浅到深地引导用户进行操作。

这类引导方式常用于界面相对复杂或完整交互流程比较长的工具类产品,带领用户快速了解每个功能的收纳位置,或让用户以最短路径完整体验一遍操作流程。当然它的缺点也比较明显,因为引导过程是连续的,用户不可以自己控制步骤,所以有时候会让用户产生厌烦情绪。

2.临时框提示

临时框可以分为两大类,一类称为模态临时框,另一类称为非模态临时框。模态临时框需要用户必须选择一项操作后才会消失,比如 Alert 确认等;而非模态临时框并不需要用户必须选择一项操作才会消失,比如页面上弹出的 Toast 提示。

模态临时框:

A. 警告视图 Alert View

Alert View是iOS中的概念,官方定义是:警告框用于告知用户一些会影响到他们使用 app 或设备的重要信息。与之对应的临时框,在Android系统中被称为dialog,翻译为对话框。

回想一下,当听到一个令人震惊消息时你的反应是?大部分人的反应是“什么?”或者“你说什么?”你潜意识要求对方再说一遍。为什么?因为这个信息太出人意外了,所以你要再次确认下是不是真的!同理,当你触发了删除按钮时,App是什么反应?删除的操作太敏感了,所以需要让再次确认,这里用到的便是警告视图Alert View。App要获取位置信息;访问相册和相机;询问是否升级App等等,这些都需要用到警告视图。


提示内容更新、版权问题、入口挪移

除此之外,警告视图还能作为运营活动的入口或者引导页。

QQ音乐     淘票票     得到
好奇心日报

从上图可以看到,警告视图包括三个部分:标题;正文;按钮。有些简单的警告视图只有标题和按钮,不需要正文来说明;另外一些可能会没有按钮,点击临时框外部区域临时框会消失。

B. 操作菜单 Action Sheet

iOS中Action Sheet中文翻译为操作菜单,对应Android中的Bottom Sheets,中文翻译为底部动作条。使用某音乐App听一首歌,看着播放界面,这时候你想要查看歌手信息,专辑信息,还想要收藏这首歌...,在当前页面要满足这这么多需求,就要用到操作列表Action Sheet。针对当前页面,用户想要执行的操作太多了,不可能把这些操作都放出来,这样页面上全都是密密麻麻的icon、button。用操作列表的形式把这些按钮都放在一个临时框里就完美的解决了这个问题。

网易云音乐

它们都属于操作菜单类临时框。该类临时框还有一类变种,不在底部弹出,而是在用户触发操作的区域附近弹出,如下图:


支付宝    广告门

C. 全局模态 Modal View

全局模态属于一种很特殊的临时框,因为它的区域会占据整个屏幕。但在iOS的设计规范中,全局模态被放在了临时框中。官方定义是:一个以模态形式展现的视图,它为当前任务或当前工作流程提供独立的、自包含的(self-contained)功能。

ios_消息_编辑短信  & 邮箱登录

全局模态有一下几个特点(对照上面iOS自带的邮件APP的图会更容易理解):①占据整个屏幕,或者占据整个父视图的区域。②包含完成当前任务所需的文字和控件。③通常也包含一个完成任务的按钮,和一个取消按钮。

非模态临时框:

A. Toast提示

Toast是Android平台的设计形式,iOS规范中并没有规定这种形式,但是由于Toast能很好的起到轻量级反馈的作用,现在很多iOS的APP也在使用这种临时框。Toast属于一种轻量级的反馈,常常以小弹框的形式出现在屏幕上中下任意位置,但同个产品会模块尽量使用同一位置,让用户产生统一认知。

关于Toast的显示时间,Android自带的两种时间属性分别为2秒和3.5秒,但是一般会自定义为1.5秒和2.5秒。Toast中的文本超过10个字符用2.5秒,少于10个字符用1.5秒。因此不要将其用作重要对象的引导形式,大多是可有可无或是会反复出现的,其次语言精练也是必要的。在样式上,尽量和产品整体风格保持一致,这样会更和谐,不至于突兀。

一个「one」   微博    淘宝

B. Snackbar

同Toast,SnackBar同样是Android特有的临时框。SnackBar继承了Toast的所有特性,即:为小弹窗的形式,会自动消失。有三个差异化:①可以出现0到1个操作,不包含取消按钮;②点击SnackBar以外的区域,SnackBar会消失;③一般只出现在屏幕底部。在实际的产品设计中,很少看到SnackBar这种形式,以下放了两张MD规范中的图。

糗事百科     中国大学幕课    樊登读书

举个可以采用SnackBar临时框的场景:当删除某张照片时,可以在屏幕底部出现Snackbar,提示“照片成功删除”,并附带撤销操作,当用户点击撤销时,照片可恢复。用户不进行操作Snackbar则消失,照片删除成功。

C. 气泡/浮层

气泡/浮层式是一种量级轻但是目的性很强的引导方式,一般是半透明浮层结合文案的设计模式。大部分浮层模式带有指向性的箭头,可以用来提示重要功能或者隐藏操作。通常是非模态的,显示3-5秒后自动消失,对用户的干扰较小。


3. 嵌入式(局部嵌入/整体嵌入)

嵌入式引导分为局部嵌入和整体嵌入。局部嵌入就是在当前页面内容上增加引导提示。为了保证对象不埋没在信息流中,有效地引起用户注意,需要从视觉上做处理。整体嵌入则是将引导做为一个整体代替页面内容的显示,多使用在“空状态”的情况下。

(1) 局部引导

局部引导一般会在页面顶部出现,也会有嵌入页面某一地方的情况,通常会用作警示作用,比如:消息提醒未打开,网络异常等等,通常的组合是:文字+伴有红色、黄色等警示类色块(+关闭button),足以引起用户的重视。

(2) 全局引导

全局引导就比较好理解了,就是整个页面都是引导提示,属于主动型引导。最常见的就是为空页面:文字提示+插图占位符+跳转button,点击button会进入某个页面,要避免出现下面第三个整页空白的情况,不然用户会觉得卡住了或是出现了bug。

三. 互动式引导


1. 互动提示

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

流利说

2. 操作示意

操作示意较常采用简短的动画向用户展示操作方法,也不乏静态图片配以描述的方式。这种方法的好处是很直观,用轻松浅显的手法,就能传达给用户新鲜的功能和趣味的用法,比生硬的文字来得体贴。

网易云音乐

3.自体变形

自体变形是元素自身发生改变,可以是纯视觉上的也可以配合动画效果。它没有额外增加其他元素,也不会像膏药一样覆盖在页面上,只是通过效果变化达到与同组的其他元素作区分。如上图淘宝首页中天猫国籍的动画形式。

淘宝


小红点/数字+红点:常见的就是未读消息,相信很多强迫症患者都会有把小红点点掉的冲动,我就是重度强迫症患者,每次看见必须点掉,这就是利用了用户的这一心理作用,来达到查看产品类似促销等信息的目的;

引导的使用要根据场景进行合理选择,合理、有趣味的引导设计,会给产品加分,增强用户探索新功能的欲望。当然,初衷都是为了方便用户的使用,合适的时机出现合适的引导,切忌乱用,否则只会适得其反。


四. 用户引导的4个注意


1.保证引导的有效性

用户引导是对产品内容以及形式的辅助说明,存在即要有意义。

2.触发场景准确

用户在浏览/操作时都有一定的使用场景,根据场景触发相应的用户引导,保证在用户需要的时候出现引导,才能达到接受度的最大化。

(1) 引导的强弱

根据出现时是否有阻断、消失时是否需要操作,我们可以划分出不同强弱的引导提示。弱提示通常情况下它的出现不一定能让每一个用户都注意,或者不需要让所有用户都完整的了解,这样的提示不会阻碍用户当前的阅读和操作行为,还可以自动消失;强提示需要用户一定注意到的,它会阻断用户当前的使用且需要有明确的指定操作才能消失。

(2)引导触发点的选择

用户引导的触发点,就是在什么地方触发引导。是用户打开程序时触发?到达特定页面后触发?操作了指定功能后触发?到了某个时间点触发?它们都是在原有产品的基础上附加的一个东西,往往不是用户有心理预期出现的东西。

方式一:已经明确针对什么用户,就要结合场景考虑,此类用户的共性是什么,哪些页面是此类用户经常访问的页面?基于用户共性和访问最多的页面,把触发点放在此处,对于目标用户影响面会是最大的,对于非目标用户的影响也会是最小的。

方式二:有时候引导的内容会限制触发点,比如功能性引导,用户第一次浏览到功能所在页面,即触发引导,这个应该算是针对新功能的一个普遍的操作方式了。此时,最好逆向思考,本页面的用户是否大部分需要引导?如果是,如何才能降低对非目标用户的干扰;如果不是,此时就要反思,这个功能放在此处是否恰当?

(3)引导触发的频率

是指单位时间内完成周期性变化的次数。是确定了引导的触发点和类型后,另一个不可忽视的思考要素。引导的形式太强会干扰用户当前操作,太弱又可能被忽略,需要把握好它出现的频率,尤其是类似toast、浮层这种很容易被忽略的引导。下图为网易云音乐的截屏分享功能。虽然分享浮层出现后3秒会自动消失,但为了防止每次截屏都出现浮层给用户带来干扰,在设置页里加入了功能开关。

那么如何告诉用户有开关这个事情呢?做法是:功能上线后针对所有用户,首次手动取消浮层时(点击浮层右上角的“×”、点击半透明遮罩)即toast提示“可在设置中取消截屏分享提示”,之后每累计手动取消3次提示一次。

(4)引导效果衡量

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

3.简单易懂,突出核心

不论什么类型的引导,它们的目的都是为了让用户更好得去使用产品、减低认知和摸索学习的门槛。复杂繁琐的内容会给用户带来压力进而失去耐心,也很容易就被遗忘。

4.与产品基调一致

用户引导的视觉风格、语言表达要与产品定位、产品理念相一致。因地制宜的前提下保证全局的一致性,切记没有克制地随意发挥。这样的好处是可以让用户在看到引导的时候对产品有一个大致的基调认识和感受。

用户在浏览/操作时都有一定的使用场景,根据场景触发相应的用户引导,保证在用户需要的时候出现引导,才能达到接受度的最大化。

你可能感兴趣的:(新用户引导设计分类与思考)