让用户拍案叫绝的引导设计

说起“引导”,大家可能既熟悉又陌生。熟悉是因为看到“引导”马上就能联想到“新手引导”,陌生是因为了解的引导类型其实并不多。实际上“新手引导”只是“引导”家族中的一部分,产品中的引导不仅可以帮助用户熟悉产品和操作,而且可以实现产品的目标。

本文将从“引导”的定义、价值、类型、适用场景以及设计要点,来和大家探讨如何设计产品中的“引导”功能,通过深耕产品细节,让用户拍案叫绝。

在线下商场、地铁、博物馆等公共场所,如果我们想要到达一个陌生的地点,往往会去寻找路标等导视标识帮助我们到达目的地。如果实在看不懂,还可以去询问工作人员,他们也会告诉我们明确的方向。这些导视标识、工作人员的帮助都可以看作是一种“引导”。

同样,在线上产品中也存在各种“引导”,最常见的便是新手引导、引导页。线上的引导可以帮助用户在短时间内快速学习功能的用法,解决用户问题,建立良好的第一印象。也能满足业务目标,比如吸引用户点击、提升某个功能使用量、提升转化率等等。

所以说,“引导”实际上是指通过一些设计手段,影响用户的决策和操作,促使其尝试并完成某项任务,从而实现用户目标或产品目标。

前面已经提到了,引导的主要作用就是可以实现用户目标或产品目标。

2.1 实现用户目标

引导可以实现用户的3个核心目标:

1. 了解产品(功能)信息,建立基础认知

2. 降低学习成本,提升上手效率

3. 解决用户问题,帮助用户完成目标任务

2.2 实现产品目标

引导也可以实现产品目标。

我们在公司里工作的主要任务是帮助公司赚钱,在产品中我们需要通过设计手段,向用户宣扬产品的价值,通过利益点吸引他们使用功能或消费转化。同时,也要在用户遇到问题时,帮助他们解决问题,提升产品口碑、让用户能更久地使用产品。以上这些,引导都可以做到。

梳理一下,引导可以实现产品的2大目标:

1. 让用户感知产品价值,吸引用户长时间使用。从而提升留存率、用户活跃度与付费率。

2. 通过解决用户问题,帮助用户达成目标,来提升产品口碑、好评度。

我们平时在产品中常看到的引导,有引导页、气泡引导、蒙层引导、弹窗引导。但实际上,引导的类型远不止这些。根据信息传达的目的和传达内容的不同,引导有非常多的形态。本文主要从交互形式、打扰程度、引导效果几个维度来一一介绍。

引导主要可以分为前期引导过程引导两大类。

前期引导:建立认知、吸引使用

过程引导:解释怎么用、解决用户问题

3.1 前期引导

前期引导是指用户即将使用产品时,还没有进入主界面前,就看到的引导信息。主要包括:引导页、开屏页(闪屏页)、登录页。

前期引导主要告诉用户产品是什么、有什么,建立用户对产品的基本认知。一般前期引导,会介绍产品愿景、新功能、核心特色、以及利益点。展现形式可以是平铺直叙,也可以将内容包装成故事,使用户获得情感共鸣,从而打动用户。

3.1.1 引导页

引导页是一种非常常见的引导形式,通常出现在用户首次打开app,一般通过图文或视频传达给用户信息。引导页是展示品牌调性的重要模块之一,决定了用户首次接触产品时的第一印象。

设计引导页时,要注意精简内容,减少操作阻碍。可以突出产品特色或品牌调性,建立用户对产品的初步认知。

用处:

1. 让用户快速了解产品,建立对产品的初步认知。

2. 用户能快速了解产品的核心功能、产品特色、品牌调性等。

设计要点:

1. 内容简洁,重点突出

2. 内容可以是照片、视频、插画等,内容和文案需要有联系

3. 图文页面一般是3~5页,有明确的翻页引导且提供进度条

4. 可以提供跳过按钮,不一定要强制用户浏览每一页

使用场景:

1. 用户首次使用产品时,了解产品核心功能或特色

2. 用户更新产品时,了解比较重要的更新的内容

3.1.2 闪屏页

闪屏页可以理解为是一种轻量化的常态引导页。闪屏通常展示产品的品牌(logo、吉祥物等),一般出现几秒后自动进入主界面。有时闪屏画面会结合特殊节日,增添节日氛围。

用处:

1. 传达产品品牌

2. 早期用来加载主界面内容,避免用户等待

设计要点:

1. 内容简洁,突出品牌

2. 内容一般包含产品logo、产品slogan

3. 可以添加节日相关元素,强化节日氛围

使用场景:

1. 用户打开app时,宣传品牌或体现节日氛围

3.1.3 登录页

使用产品时,若产品必须登录,才能进入主界面,可以将引导和登录页结合。引导可以介绍产品的核心功能、特色、优势、与竞品的差异等等来吸引用户登录/注册。

用处:

1. 登录页做引导,减少用户进入主界面的门槛

设计要点:

1. 可以突出产品的品牌

2. 可以是静态插画,也可以是动图

使用场景:

1. 用户登录/注册app时

3.2 过程引导

过程引导通常用来介绍产品怎么用,或者吸引用户使用/进入某功能。过程引导种类较多,需要根据不同的引导目的、引导内容,选用合适的引导方式,并且在合适的位置和时机出现。

3.2.1 覆盖式引导

覆盖式引导指用户打开新页面时引导覆盖在界面上,常见形式有弹窗、气泡和蒙层。

① 弹窗

在新功能或重要变化上线时,我们通常会使用弹窗这种强打扰方式,告知用户产品变化,引导用户操作。使用弹窗通常是因为产品侧希望更多的用户能体验产品新功能,了解产品新变化,同时也向用户传达一种信号,产品还在积极优化,没有跑路。

因为弹窗是一种强打扰的引导方式,所以必须是非常重要的内容才能使用弹窗引导。

用处:

1. 告知用户更新内容

2. 告知用户产品重要变化

设计要点:

1. 弹窗内必须是重要内容

2. 弹窗内容精炼,避免啰嗦

3. 适当添加插画、图示,提升浏览效率,减少厌恶感。

4. 提供功能跳转,方便快速体验

使用场景:

1. 上线新功能、功能入口变化、版本升级、功能下线、重要活动等

2. 用户打开app时;用户打开某个功能、频道时

② 气泡(浮层)

气泡引导是一种轻量级的引导方式。它的主要形式是在操作按钮旁边弹出一个气泡提示框,没有遮罩层。一般含有箭头,所以指向性很强,且对用户的干扰较弱。

用处:

1. 提示用户新增功能位置,

2. 引导用户如何使用功能

3. 告知用户页面调整变化

4. 提示一些隐藏操作

设计要点:

1. 箭头需要指向准确的功能或位置

2. 通过颜色、阴影区分层级,避免和页面混为一体

3. 可以点击关闭图标消失,也可以显示几秒后消失,主要根据内容重要性

4. 文案上要尽量简洁、清晰

5. 可以适当添加插画或IP形象

使用场景:

1. 展示重要功能的使用方法

2. 让用户注意到重要的新功能

3. 告知功能内的隐藏内容

③ 蒙层

蒙层是一种轻量级目标性很强的引导形式,一般指页面上有一层黑色半透明的遮罩铺满屏幕,通过高亮重点模块吸引注意力,一般使用白色或对比度强的文字,对高亮模块进行解释说明。蒙层出现时会打断用户操作,所以它的干扰性较强。

一般分为两种类型:单页蒙层分步蒙层。

单页蒙层:

只有一页蒙层,点击按钮或黑色蒙层区域就会消失。用于单个功能的引导。

分步蒙层:

有多页蒙层,用来一次性介绍多个功能或变化。每页的内容不多,帮助用户一步步了解产品新功能的位置,或让用户快速体验一遍操作流程。一般控制在5步以内,太多步容易让用户产生厌烦情绪。

好处:

1. 让用户快速注意到重点内容,避免其他元素干扰

2. 提示用户重要功能如何使用,解释说明重要模块

设计要点:

1. 内容聚焦,一眼看到高亮内容,可以带有指引性箭头

2. 文案简洁,浏览高效

3. 操作按钮明显,也可将整个页面设为点击热区

4. 出现时机恰当

5. 酌情提供跳过/关闭按钮,且弱化此按钮

使用场景:

1. 用于新手引导

2. 用于一些用户不易察觉的新功能、新变化,但这些功能、变化对用户或产品来说比较重要。

④ Toast

样式是toast,但作用是引导。如下拉刷新后出现的提示toast,点击可以查看新内容。由于出现时间短,能承载的内容也不多,一般用于不太重要的内容。

好处:

1. 轻量的引导,不打扰用户

设计要点:

1. 文案精准、简洁

2. 引导明确、无歧义

3. 显示几秒后消失

4. 可适当添加图标

使用场景:

1. 用于一些非重要内容的引导,用户错过了也没有较大影响。

3.2.2 嵌入式引导

嵌入式引导是将引导的内容直接嵌入到页面内部,可以在页面的任何位置,让引导变成产品中的一部分,一般常驻显示,有的进行操作后才会消失。

常见的嵌入式引导有信息提示条、空状态引导、预置内容、文案引导、角标。

① 信息提示条

信息提示条指将引导内容直接嵌入到页面内,以条状样式存在的一种引导方式。常规样式一般是色块上放置文字内容,可以带图标、关闭按钮、跳转按钮。

好处:

1. 不打断用户操作

2. 不会遮挡页面原有信息

3. 了解当前页面的重要信息,并指导接下来如何操作

设计要点:

1. 文案一般一行或两行

2. 文案过长时可以滚动播放

3. 有时会添加操作按钮

4. 一般位于页面顶部

使用场景:

1. 异常状态时,提示用户当前状态

2. 告知用户如何操作

3. 显示重要提示信息时

② 空状态引导

页面内没有内容时,大面积的空白会给人造成一种不安全感。而空状态可以在页面无内容时,告诉用户当前是什么状态,接下来应该怎么做,引导用户行动。

好处:

1. 知道当前是什么状态,应该怎么做

设计要点:

1. 插图要有趣。可以放吉祥物、或品牌相关元素

2. 文案简洁、清晰

3. 某些场景可以给出行为指引,添加行动按钮

使用场景:

1. 页面内容为空时

③ 预置内容

预置内容一般工具类app用的比较多。这类引导是指用户进入产品后,提前创建好了一些和产品功能相关示例、模板。引导的同时突出产品核心功能,让用户清晰地看到产品可以怎么用,能够快速理解产品并上手。

好处:

1. 产品功能清晰直观,降低学习成本,容易上手

2. 快速了解产品核心功能

设计要点:

1. 提前设计好预置的内容,符合用户需求

2. 提前设计好用户操作路径

3. 引导的内容不宜过多,需是产品的核心功能

使用场景:

1. 初次使用产品时,引导用户学习产品功能

④ 文案引导

文案引导是指通过界面中的文案引导用户行动,这可能是最简单的一种引导方式。通过一句简短的文案引导用户行动。文案引导可以出现在很多位置,比如输入框中的暗提示文案,引导用户这里应该输入什么样的内容;某些卡片上也会通过利益点文案引导用户点击。(其他类型的引导里,因为有文案,也具有文案引导的效果)

想知道文案怎么写对、写好,可以看我另一篇文章《手把手轻松学会UX文案设计》

好处:

1. 简单好用

2. 可以出现在任何位置、任何功能模块上

设计要点:

1. 精简文案。有的模块空间较小,注意文案简洁

2. 表述清晰。让用户能看懂。

3. 格式规范统一

使用场景:

1. 任何需要引导的功能模块上

⑤ 角标

我们在app中经常会见到角标,他是一种体量小、实现成本低的引导方式。由于嵌入在页面中,对用户操作的干扰非常小。一个页面可以同时存在多个角标,相互之间也不会存在冲突,要注意过多的角标可能导致用户失焦,降低引导效果。为了能吸引用户视觉焦点,通常角标首选红色配色。

1)红点角标

红点只能表示单一的状态变化,表示有新内容或期望用户点击。红点传递的信息最少,主要利用的是用户的好奇心和强迫症。

红点角标也可以和辅助信息搭配使用,透出更多信息,增强对用户的吸引力。

2)数字角标

数字角标在红点角标的基础上增加了数量信息,提示的新内容的数量更具体。数字角标往往用在单一维度信息提示中,常见于消息数量、商品数量、订单数量等。

3)文字角标

文字角标更多的出现在和售卖有关的产品,如电商、团购、金融产品等。此类角标通过让内容信息、利益点前置,强化用户感知、吸引用户点击。

由于文字角标的空间有限,通常只能放3个字左右。有些产品为了能展示更多文字,会使用动效方式滚动展示信息内容。但动效会一定程度增加用户看完信息的等待时长,如果信息用用户关联性较差,或吸引力力不足,引导效果会大打折扣。

好处:

1. 体量小

2. 成本低

3. 可以出现多个,不会冲突

设计要点:

1. 一般使用红色较为醒目

2. 酌情添加动效

3. 空间较小,文案需精简

4. 信息和用户强相关可以使用数字角标,非强相关可以使用红点

使用场景:

1. 新功能、新内容、新信息的提示

2. 通常位于图标、文案右上角;列表右侧或右上侧。

3.2.3 互动引导

这类引导不容易被发现,一般在用户操作某项功能时出现,提示用户一些操作方法或注意要点,帮助用户完成后续操作行为。互动引导和用户的操作关系密切。如输入、下拉、滑动、长按都可以触发互动引导。

好处:

1. 出现时机恰当

2. 引导效果好

设计要点:

1. 引导需和操作强关联

2. 出现时机要在操作中

使用场景:

1. 介绍功能用法

2. 提示后续操作效果

3.2.4 对话式引导

对话式引导经常用于收集信息,以对话的形式分步收集相关信息。比起填写枯燥的表单,让用户更有兴趣去填写对应信息。

好处:

1. 有一定趣味性,用户更易接受填写信息

2. 分步操作填写效果较高

设计要点:

1. 可适当增加图标、插图、IP形象强化趣味性

2. 对话可带一定语气风格,更亲切

使用场景:

1. 收集信息、填写表单时

3.2.5 教学式引导

此类引导大多存在于工具类、游戏类app中,通常会结合产品的实际使用方法,一步步引导用户操作,让用户边用边学。因为用户能得到及时反馈,所以学习效果更好,更有成就感。

好处:

1. 学习效果好

2. 有成就感

设计要点:

1. 引导内容突出,且明确展示操作方式

2. 内容和操作要有关联

3. 操作成功后给予及时反馈

使用场景:

1. 工具类产品或游戏类产品,引导用户操作相关功能

前面聊引导的类型时,已经简单提到了不同类型的引导有不同的使用场景。这些场景归纳后主要可以分为3种:告知用户状态、告知用户内容、影响用户行为。遇到这些场景时,可以考虑添加合适的引导,来提升用户体验、达成业务目标。

4.1 告知用户状态

根据尼尔森的“状态可见性”原则,系统应该让用户及时了解当前发生了什么,知道自己处于何种状态。例如内容型产品有新的动态、资讯、消息等等,此时需要将更新的信息及时反馈给用户,引导用户查看。

4.2 告知用户内容

用户首次使用某个产品或某个功能时,需要对一些内容进行引导,可以减少用户的困惑以及学习成本,建立对产品或功能的基础认知,从而快速上手。

那么哪些内容需要引导呢?主要分为3种。

4.2.1 产品特色、核心功能

展示产品的核心价值,帮助用户快速了解产品特色,以及和竞品的区别,进而吸引用户、留住用户,建立良好的第一印象。

4.2.2 新功能、新活动

产品新功能或新活动上线时、功能迭代变化时、功能位置变更时,希望尽快让用户知道这些变化,吸引用户使用功能或参与活动。

4.2.3 产品操作

产品中添加了一些新的操作或一些操作太隐蔽,希望通过引导让用户知晓相关操作,降低用户的认知和学习成本,能更快上手使用。

4.3 影响用户行为

4.3.1 吸引用户行动

指希望用户做出我们所期望的动作,从而提升数据,达成业务某个目标。比如开会员、开启消息通知、点某个按钮、分享等等

4.3.2 预判用户操作

某些场景下,产品需要根据用户当前的行为,预测用户下一步的操作。通过适当的引导,将用户需要的功能主动推荐给用户,从而提高用户的操作效率。

前文中我们看到了很多类型的引导,可以发现引导的强度往往和其打扰的程度成正比。只有打断用户当前的操作,才能吸引用户注意力,让用户看到引导。但无论是前置引导,还是过程引导,都在一定程度上影响了用户正常操作,体感较差。

那有没有一些方法既能保证引导效果,又能不太影响用户体验呢?其实是有的。要想实现以上效果,我们在设计引导时需要做到以下2点:

1. 让用户愿意看引导

2. 尽可能提升引导效果

5.1 让用户愿意看引导

我们平时在使用各种产品时,肯定遇见过各种各样的烂引导。有的引导太像广告,有的文案啰嗦复杂,还有的位置太隐蔽,可能我们压根就没注意到。用户看都没怎么看,引导效果肯定非常差。

那怎么样能让用户愿意看引导呢?以下有3个方法可供参考。

5.1.1 在需要的时候出现

好的引导,应该像及时雨一样,在用户最需要的时候出现,为他们解决燃眉之急。这些引导会在不干扰用户正常操作情况下,根据用户行为预判用户需要的功能,及时给予相关提示。这样,用户不仅对引导有好感,而且能提升用户体验,达到引导的最终目的。

5.1.2 增加引导的趣味性

有趣的内容能让用户有兴趣,且耐心地看完引导,同时也会给用户留下深刻的印象。怎么让引导有趣味性呢?可以从以下几点着手:

1. 加入趣味元素:很多app会在引导上加入可爱的IP形象,仿佛IP形象在和用户互动。

2. 引导形式模仿娱乐产品:引导样式可以参考游戏界面、参考漫画的样式等等。

5.1.3 分阶段引导

有时候,一个功能里面新增的内容、有变化的内容非常多。我们在设计引导时,总是希望用户能了解里面的每一个新增的内容,所以会一次性添加大量的引导,导致想塞给用户的内容太多,用户不愿意看引导效果也不好。

解决方法是,首先考虑是否能精简引导,引导里只展示最重要、最有必要的内容。如果实在没法精简,可以再考虑分阶段引导。

面对此类重要内容过多的功能或产品时,很多产品会采用分阶段引导,来避免用户单次接受过大的学习量。在重要内容中,按照用户接触的顺序或核心程度再分优先级,分多个阶段展示引导内容。避免由于单次引导的学习量过大,用户记不住所有引导内容。

5.2 尽可能提升引导效果

现在我们已经可以让用户愿意看引导了,但光愿意看还不行,看完无动于衷,没有行动怎么办?这时,我们需要用一些手段,尽可能地提升引导效果。以下有三个方法可供参考:强调利益点、让用户边用边学、强化反馈

5.2.1 强调利益点

利益点简单理解就是对用户的好处。用户按照引导所说的去做了,能得到什么、能有什么用处,这些都需要在引导里有所体现。手段上无论是用文案还是文案结合图形都可以,只要能做到清晰直观即可。

比如,在某产品会员页,我的会员快到到期了,这时产品希望用户在会员快到期时,提升续费率。手段是给用户发优惠券减免会员费,光发还没有用,得让用户知道自己有这个优惠券。所以在一级页的「立即续费」按钮上方添加气泡引导,文案展示「惊喜红包减5.5元」。这样做,用户一是能感知到自己有减免会员费的优惠券,二是气泡直接指向续费按钮,能明显地引导用户点击按钮续费。

5.2.2 让用户边用边学

之前看罗子雄在TED的演讲,里面有提到学软件的最好方法不是看软件里的每一个功能怎么用,而是去学着做一个案例,通过做案例顺带学习用到的相关功能,这样学习效率和效果都会非常好。

同样在产品中,如果我们希望用户学会某个功能、某个操作时,可以引导用户边学边操作。看完引导内容就能直接开始操作,避免用户学完还得找功能在哪,时间稍长忘了功能怎么用。

5.2.3 优化文案

文案的引导的重要组成部分之一,好的文案能让用户做出我们期望的行动。我们在设计文案时,需要做到最基础的四个原则——清晰、准确、简洁、统一。这四个原则能让用户在看到文案时,看得快且看得懂。这些原则具体怎么做,在我之前一篇文章《手把手轻松学会UX文案设计》里有详细表述。由于篇幅有限,本文简单讲一个优化文案的方法。

6.1 尽可能少用引导

有没有发现,在我们经常使用的微信里并没有看到非常多的强打扰引导,多数是一些比较弱引导,如:红点引导、文案引导等等。难道是这些强打扰引导没有用吗?

张小龙在早期某次媒体采访时,其实回答了这个问题。

他说微信在讨论产品的设计时候,常常会思考怎么才能不打扰用户,特别是我们想把新功能体现给用户的时候。现在常用的Tips,看似体贴实则非常打扰。需要文字解释的功能不是好体验。做 UI 的同事尽量不需要通过文字的解释就把这个功能做好,最好也不要用 Tips 这样的东西。

在最早的微信版本里面,用户自己说的话是不带自己头像的,后面才把自己的头像展现出来,当用户看到自己的头像没有设置的时候,很快就会去设置头像了。可见这样的设计比经由别的环节去引导用户设置头像要自然很多。因为这是用户自发的,而不是被“引导”的。微信也一直尽力减少 Tips 的使用,当然微信也还没做到完全不用,但是自己要知道一点:每一次都是因为做得不好才用 Tips。

所以,我们在设计产品时应该尽可能得少用引导,因为无论什么引导,或多或少都会打扰到用户。应该花更多时间想一想怎么优化现有设计,怎么让界面一目了然,降低认知成本和操作成本在没有引导的情况下,用户一看到界面也能知道怎么用,自发地去做我们期望的操作。

6.2 只引导必要内容

实在要加引导时,只引导必要、重要的内容,不要描述显而易见的事情。要选择合适的引导,保证引导对用户的价值大于对用户的打扰。

聊了这么多,其实设计引导最重要的是要结合产品自身特点,需要在合适的时机,通过恰当的方式,尽可能少打扰用户的情况下,去引导用户更好地使用我们产品。

虽然,引导对于整个产品来说是非常细微的一个功能,但产品正是由多个小功能组成了产品本身,在小细节上不断优化迭代,才能给用户带来高水平的用户体验,也能让领导认可我们的实力。

希望这篇文章能解决大家在设计引导时遇到的各种问题,感谢阅读。我是优游,我们下次再见。

参考资料:

《设计师必看|新手引导藏在这里》

原文:https://mp.weixin.qq.com/s/N3QylKNLviOrBF_QhDEQng

- Posted in: Blog

- Tags: ,

1 条评论 ,1,272 次阅读

发表评论

  1. fengzzf

    超赞的文章,这个网站相当nice,感谢

Top