新用户引导设计模式

[产品设计] [用户体验]

封面用研整编文章

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

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

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

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

一. 初次使用说明引导

1. 滑动展示引导页

如今市场上大多数APP都会在初次登录的时候提供一系列滑动展示型引导页,介绍应用功能或演示交互。这种形式的缺陷在于它横亘在用户和APP之间,即使页面设计得足够精美有趣,用户也很难充满耐心地仔细阅读完。因为绝大多数的用户还是倾向于自己探索APP,即使教程对他们有所助益,但是这本身是偏离用户初衷的。

展示产品功能和价值
待办事项应用Clear,为用户提供了7屏教程教育用户如何与APP进行交互

2. 使用说明书引导

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

Trello

App Store的精华产品Paper,作为绘图软件它的交互建立在很多特殊手势之上,还定义了一些带有品牌特色的操作规范。要知道用户没有多少时间和耐心去摸索一个完全陌生的产品,因此Paper为用户使用初期做了大量的引导。

paper的新手教程

二. 场景式引导

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

1. 遮罩式提示

遮罩式提示为一种强引导,通过直接盖住界面来强调当前需要引导的内容。这种提示让用户将注意力集中到某个特定的主要交互上,最大限度的减少说明的信息量。引导内容以图层的形式叠加到对应的UI控件上,通常出现在用户首次操作的时候,并且一次只显示一个。它要求用户必须看到提示内容并且执行相应操作或触碰点击x按钮才会消失,这和app的弹窗逻辑有点类似,但不同之处在于弹窗通常都是警示或者确认是否执行操作的提醒。

虽然没有相关的统计数据,但用户直接关闭蒙灰提醒不看内容的行为是非常普遍的,使用此类提示建议设计简洁有力,文案尽量少。

此类提示通常出现在用户首次操作的时候,并且一次只显示一个
切勿像上图这样一股脑将所有东西抛给用户

2. 临时框提示

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

模态临时框:

A. 警告视图 Alert View

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

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

滴滴出行&网易云音乐
提示内容更新、版权问题、入口挪移

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

韩国某APP&回家吃饭
好奇心日报的开启推送及路径引导

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

B. 操作菜单 Action Sheet

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

网易云音乐&XY

上面两张图,看起来完全不一样,但是原理是我上面所说的,万变不离其中,只不过换了个UI样式。它们都属于操作菜单类临时框。该类临时框还有一类变种,不在底部弹出,而是在用户触发操作的区域附近弹出,如下图:

蜗牛读书&支付宝

C. 全局模态 Modal View

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

邮件APP

全局模态有一下几个特点(对照上面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秒。因此不要将其用作重要对象的引导形式,大多是可有可无或是会反复出现的,其次语言精练也是必要的。在样式上,尽量和产品整体风格保持一致,这样会更和谐,不至于突兀。

淘宝的关注与收藏成功提示

B. Snackbar

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

带一个操作 & 不带操作

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

C. 气泡/浮层

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

大部分浮层模式带有指向性的箭头,可以用来提示重要功能或者隐藏操作

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

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

三. 互动式引导

1. 互动提示

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

Dueling中的交互式提示

2. 操作示意

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

网易云音乐手势示意动画

还有一种操作示意比较隐蔽,是在用户与产品之间互动的过程中引导用户完成操作。常见的如下拉刷新、底部上拉等手势互动,也经常发生在语音操作中。例如用户使用麦克风的过程中,界面随着用户的声音的输入而产生互动。

淘宝二楼&微信语音

四. 引导的强弱及触发

1. 引导的强弱

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

2. 引导触发点的选择

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

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

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

3. 引导触发的频率

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

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

网易云音乐截屏分享功能

五. 引导效果衡量

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容