B端产品的促活系统(Engagement)设计

     分类 [产品经理]
2025/11/14 11:20:10 浏览量  359 喜欢  13
导读:本文来自我正在写做的新书《决胜体验设计》(暂定名),欢迎大家在写作过程中给我提建议、期望、不足、错误!

B端产品的促活系统(Engagement)设计

本文来自我正在写做的新书《决胜体验设计》(暂定名),欢迎大家在写作过程中给我提建议、期望、不足、错误!新书写作完成内容会持续在公众号更新! 

 

本推送是第8章“微交互与设计范式”第2节(之前原计划是第3节,最后决定放在第2节)的内容。

 

这个章节花费了大量心血编写,单纯Engagement这个单词的本土化翻译(之前我一直翻译为触达,这次全部修改为促活),我就思考了两周,写完发际线都后退了2厘米,格式就不做精调了,大家凑合看吧!

 

B端产品的促活系统(Engagement)设计

 

1.1促活系统设计

1.1.1什么是促活系统

促活系统(Engagement System),是围绕新用户上手、功能探索、持续学习、行为纠偏四大场景,帮助用户尽快学习、掌握、使用产品的体系。

Engagement作为一个描述用户/客户和产品之间连接关系的专有名词,在不同的层面,有多个定义和解释。

Forrester认为,Engagement是指企业与客户建立长期、深度连接,进而驱动他们的购买决策、互动行为和参与意愿。

Nielsen Norman Group (NN/g) 认为用户参与度(User Engagement),是一个用于衡量用户与产品互动程度的抽象概念,不仅包括停留时间等简单指标,还涵盖了互动的深度。NNG认为,一般用户与人机界面的互动水平较低,并希望人机界面不要妨碍自己,这说明最成功的设计是帮助用户快速完成任务,而不是强迫他们学习复杂的功能。

在C端产品中,Engagement可以翻译为用户粘性、用户参与度、用户活跃度,关注的重点是用户使用产品的广度和深度,包括访问频次、功能深度、停留时长等。

在B端产品中,情况略有不同,toB软件的目标是帮助用户尽快完成工作和任务,而非尽量占据用户时长,我将Enagement翻译为促活,更强调促进用户活跃使用产品,高效完成工作。

B端产品的用户促活,主要覆盖四个场景。

上手引导(Onboarding):用户初识产品;

功能发现(Feature Discovery):用户探索功能;

深度学习(Learning):用户深度理解业务和产品;

行动纠偏(Trouble Shooting):帮助用户从错误中回到正确路径;

这四个场景,也是用户从新手成长为成熟用户的历经阶段,促活系统,负责保证这个过程顺利、高效。

1.1.2促活系统的组件和范式

接下来,我们首先介绍促活系统设计时常用的组件,这些组件都来自于SLDS,我对其中部分设计做了调整和修正。

组件:弹窗浮层(Popup Panel)

弹窗浮层,也叫页面弹窗,常常设计成模态窗口形态,用户只有手动关闭后,才能继续使用系统。因为会打断用户,所以使用时需要慎重。浮层都是富文本形态,内容中可以嵌入视频、图片、超链接,形式丰富,见图8-30。

弹窗浮层,常见的应用场景有两个:

欢迎新用户:新用户首次登录后弹出,初步介绍产品,提供更多习资源和路径,方便用户理解上手使用系统。

重要通知:系统重大升级、重要通知也可以考虑弹窗浮层,但是设计人员要尽量克制,时刻考虑是否可以通过全域通知条等组件来实现,尽量避免打断用户。

国内很多toG产品对弹窗浮层往往过度使用,我访问过的很多站点,每次登陆后乱七八糟的弹窗就有四五个,弹这么多重要内容,我根本不会仔细阅读,只会快速关掉。

B端产品的促活系统(Engagement)设计

图8-30  弹窗浮层:富文本形态的模态浮层窗口

组件:停靠面板(Docked Panel)

停靠面板,是在系统的角落(一般是右下角),位置固定的浮层。与弹窗浮层不同的是,停靠面板可以随时隐藏或唤起,用户切换访问其他页面,该面板依然存在,除非手动强制关闭,如图8-31。

B端产品的促活系统(Engagement)设计

图8-31  停靠面板:切换页面也不会关闭的重度提醒

停靠面板很经典,但并不是所有产品都实现了这个组件,因为其主要用于信息通知场景,为了降低研发成本,大家采用弹窗浮层或全域通知条就足够了。

如果团队研发资源丰富,当然也可以实现这类组件,就比如Salesforce,不仅实现了停靠面板,而且功能强劲,如图8-31,该组件可以收缩、展开、还能放大到全屏幕,此外如果用户当前不想看到这个通知或提示,还可以选择过一段时间再提醒。

B端产品的促活系统(Engagement)设计

图8-32  Salesforce将一个重要功能升级通过停靠面板进行强引导提示

组件:侧滑任务面板(Task Slide-Out Panel)

侧滑任务面板,主要用于教学场景,列出学习清单,方便用户对照着清单逐条完成学习任务,每完成一条,可以自行打勾,或系统根据状态触发自动打勾,如图8-33。

B端产品的促活系统(Engagement)设计

图8-33  侧滑任务面板:引导用户分步操作的经典组件

将学习过程拆解成任务,让用户感受学习的进度和完成度,体验非常好。不过考虑到研发成本,很多产品不一定要针对学习任务单独做一个组件,而会考虑用其他方式呈现,例如一个嵌入在帮助中的独立web页面。

比较大的商业软件,可能会开发专门的学习任务组件,例如Salesforce,在SLDS中提供了侧滑任务面板,该面板有两种呈现模式:

固定模式:如图8-34是点击图钉按钮,该组件被固定在屏幕右侧,整体页面被压缩放在左侧,页面中的操作不会影响到侧边栏。

B端产品的促活系统(Engagement)设计

图8-34  Salesforce侧滑面板——固定状态

收缩模式:如图8-35,用户不需要时,侧边栏收缩在屏幕右侧,用户需要时,可以将侧边栏随时展开,展开以后是浮层效果,会遮住后边的页面,但如果用户操作主界面,侧边栏就会自动缩回去。

B端产品的促活系统(Engagement)设计

图8-34  Salesforce侧滑面板——动态收缩状态

组件:信息提示非模态气泡(Info Non-Modal Popovers)

“信息提示非模态气泡”,和上一节介绍的“错误/警告非模态气泡”,都是非模态气泡组件,对用户进行非侵入式提醒,不过这两个组件的UI风格区别较大,后者是警告的样式,配色采用红色、黄色,非常醒目;前者只是信息告知,配色和视觉效果更加柔和,如图8.35。

 

B端产品的促活系统(Engagement)设计

图8-35  非模态气泡:高亮提醒功能点

信息提醒气泡的应用场景非常多,新用户提示,新功能上线提示,功能注意事项提示,建议将该组件设计成标准组件,产品经理和设计师需要时可随手取用。

图8-36展现了Salesforce的搜索框集成了AI能力后的升级提示。

B端产品的促活系统(Engagement)设计

图8-36  Salesforce通过气泡提示搜索功能的升级

 

组件:信息提示模态气泡(Info Modal Popovers)

该组件是模态气泡,会打断用户操作,需要用户进行操作反馈,是一种提醒程度很重的交互方式,如图8-37。

B端产品的促活系统(Engagement)设计

图8-37  模态气泡:强制中断用户进行提示

信息提示模态气泡常用于重要功能的更新提醒,一般会将原页面作为背景置灰,将提醒内容,通过箭头指向相关功能点。SLDS的信息提示气泡组件功能更加丰富,还具备“推迟提醒”的功能。如果用户当前不方便阅读内容,又希望后续有时间时再阅读,可以选择推迟处理,停靠面板组件也有相同的功能点,如图8-38。

B端产品的促活系统(Engagement)设计

图8-38  Salesforce对功能的强制提示

SLDS的模态气泡,采用了遮罩技术,通过半透明图层遮挡背景,实现背景置灰;还有很多产品,考虑到实现成本,对新功能的高亮提醒,是“假遮罩”,即用一张图片模拟了遮罩效果。真遮罩当然要优于假遮罩,在8.3.7小节我们将通过实际案例理解其优势,不过产研团队也没有必要都实现真遮罩,毕竟这种复杂的前端组件开发,需要投入一定的资源,但边际效益不一定特别大。

组件:提示框(Tooltips)

提示框是一个非常经典好用的小组件,用来对产品功能点进行提示说明,如图8-39。

B端产品的促活系统(Engagement)设计

图8-39  提示框:经典的提示小组件

设计提示框时,需要在待解释的控件或文字旁边加一个问号或者i,鼠标划过去(或者是点击)后,弹出一个非模态小气泡进行解释说明,点击屏幕任何区域,气泡消失,如图8-40。

B端产品的促活系统(Engagement)设计

图8-40  Salesforce通过提示框解释某个功能按钮

用户并不喜欢时时刻刻查阅帮助,界面中丰富的提示框引导,可以很便捷的方便用户理解功能。我甚至建议,对于报表类产品,每个表头字段都应该有一个提示框,解释字段口径。我相信大家都体会过看到报表但搞不清楚字段口径,又找不到相关说明的痛苦。

组件:情境式帮助(Contexual Menu)

情景式帮助是普通帮助的升级,当用户在不同的界面,点击帮助按钮时,系统会根据用户所在界面以及上下文信息猜测用户意图,推荐帮助内容,如图8-41。

B端产品的促活系统(Engagement)设计

图8-41  情景式帮助:根据上下文情境推荐帮助内容

情景式帮助,采用了渐进式披露的设计思路(Progressive Disclosure),并不会将所有推荐内容一股脑的呈现出来,而是有选择性的展现,用户也可以点击进入详细页面后,再进一步查阅相关内容。

图8-42展示了Salesforce的情景式帮助,一共三个板块:

上边部分是帮助的整体介绍和指引;

中间部分是涉及到当前操作页面的推荐内容,因为我是在线索视图页面(Leads View)点击的帮助按钮,所以推荐的是关于如何查询Leads,什么是Leads的相关条目;

下边部分是帮助相关的一些快捷路径和常用操作手册,包括快捷键查询、访问Trailhead(Salesforce的学习平台)、获得更多服务支持入口等。

 

B端产品的促活系统(Engagement)设计

图8-42  Salesforce的情景式帮助设计

范式:分步骤引导(模态/非模态气泡混合,Walkthrough)

在介绍新功能时,分步骤引导,是一个非常有效的设计范式,通过分步骤的指引,手把手带着用户感受新功能,体验新功能,如图8-43。

B端产品的促活系统(Engagement)设计

图8-43  分步骤引导:手把手教用户使用产品

分步骤引导可以由两种气泡组件构成:

信息提示模态气泡:通过虚化背景,高亮功能点,对用户进行强提示。

信息提示非模态气泡:对功能点进行提示说明的同时,还允许用户进行功能实操,加深印象和理解。

在8.3.10小节我们会看到具体的案例演示。

范式:成就激励(Achivements)

在促活系统设计中,用户完成了一些教学任务后,如果能进行适度的激励,会让用户更有成就感、参与感,更积极地投入下一次实践。常见的激励方式,可以在用户完成了某个操作后,界面弹出祝贺的画面,甚至可以是动画,如图8-43。

B端产品的促活系统(Engagement)设计

图8-43  成就激励:让用户眼前一亮的祝贺页面

Trailhead是Salesforce的学习平台,内容丰富,并且具备沙盒环境,用户不仅可以学习理论知识和操作教学,还可以在沙盒环境中上机实操Salesforce,加深学习印象;Trailhead的课程有不同的主题和单元,每个单元分为若干小课。

每当用户学习完一个单元后,Trailhead就会出现一个撒花的动画特效,恭喜用户完成单元学习,看起来非常有意思。我自己在通过Trailhead学习时,每次完成一个单元的课程和作业,获得撒花庆祝,就会成就感满满!

B端产品的促活系统(Engagement)设计

图8-44  Salesforce Trailhead在用户完成学习单元后撒花

范式:关闭提醒

大家在使用软件的过程中,有没有这样的经历,用到了某个小功能(或新功能),觉得还挺方便,但不小心关掉后,就再也找不到从哪里打开了?

解决这个问题,当然有很多思路,其中一个,是优化搜索框,让用户能够根据记忆在搜索框中查询功能,或者是强化Agent,向AI询问功能入口。

其实,还有一个设计上的小技巧可以采纳,就是在第一次关闭某个功能的时候,提示用户,下次可以在哪里访问该功能,这个技巧,我把他叫做关闭提醒。

如图8-45,Salesforce中,用户第一次关闭侧滑任务面板,就会弹出一个非模态气泡,告诉用户,可以在帮助按钮中再次打开侧滑面板。

B端产品的促活系统(Engagement)设计

图8-53  Salesforce中第一次关闭侧滑任务面板,会弹出非模态气泡提示下次访问位置

提醒用户的方式,并不一定必须用非模态气泡,Tooltips、Toast都可以考虑,灵活自由。

其实这个小技巧,在toC产品中非常常见,只不过toB产品经理很少关心这种细节,但是用户体验,不就是在这一点一滴中积累起来的么?

1.1.3促活场景(1):上手引导(Onboarding)

上手引导(Onboarding)的目标,是帮助用户建立初步良好印象,对产品产生持续探索和使用的信心!

对于标准化产品,尤其是SaaS产品,上手引导的旅程设计是标配,因为这是对潜在客户最重要的接触点,公司投入资源,通过投放、营销获得了线索商机,对于初次尝试系统的用户,一定要保证良好的体验。如果用户第一次登录系统,无从下手,一脸迷茫,势必会影响后续的销售转化。

商业软件的上手引导设计,不仅是一个用户体验问题,更是一个商业销售转化问题。所以,哪怕只是做一个录制好的弹屏视频教学,也是非常有必要的。

遗憾的是,自研系统往往忽视上手引导的设计,因为自研系统的目标用户都是明确的业务方,而产研团队设计一套新系统上线以后,都会花费大量的精力做线下的推广、培训、演示会等等,可能反而会忽略线上的自助学习和培育。

但事实上,大多数用户都不会认真听培训(尤其是线上培训),或者认真阅读文档(尤其是系统操作手册),最好的教学,一定是融入在软件的使用过程之中

上手引导的促活设计,不仅可以帮助用户快速对系统产生初步认知和信任感,还能帮助用户掌握后续持续学习的方法和路径,更重要的是,上手引导,可以针对不同用户画像,实现差异化的引导路径,更加具备针对性,提升用户体验。例如,有的用户懂业务但不懂系统,就可以加强对系统操作的介绍;有的用户对业务并不熟悉,则可以加强对业务知识的教育。

典型的上手引导设计,可以采用如下组件和思路:

l欢迎弹窗中针对不同画像用户介绍对应的产品关键特性;

l通过分步骤引导设计,手把手指导用户感受核心功能点;

l引导用户尽快完成一个有意义的实际操作(例如创建第一个客户);

l引导用户进入入门指南(Tutorial),按照指南快速实现完整案例;

l提供演示数据或演示环境,帮助用户学习理解;

l列出互动式学习清单,刺激用户逐步完成学习任务;

1.1.4促活场景(2):功能发现(Feature Discovery)

完成了上手引导,下一个重要场景是功能发现(Feature Discovery),帮助用户在持续探索中进一步感受、体验产品功能。功能发现有两种情况:

第一种,是新用户持续探索系统,在首次进入到相关的功能或板块,收到提示。

第二种,是新功能上线后,针对老用户提示,宣传新功能,引导老用户体验。 

如果你体验过比较成熟的SaaS产品,会发现系统的各个功能板块中,引导提示无处不在,让一个新手在无形之中体验感受产品的亮点;而自研系统的相关设计则比较少,甚至没有。尤其是国内的一些大厂产品,例如钉钉、飞书,你会发现,即便没有阅读过帮助文档或手册,也能够很容易理解学习其产品功能和特点,在用户体验设计上非常注重细节,这当然也是因为大厂资源充足。

功能发现的设计,可以采用以下组件和思路:

l使用页内通知条、停靠面板,引导用户深入了解新功能;

l使用提示框或气泡,提醒用户关注留意新功能点;

l采用分步骤引导,让用户分步骤体验加深印象;

l每日小知识提示;

l更新日志,呈现变更;

1.1.5促活场景(3):深度学习(Learning)

一个设计良好的产品,不仅能够让用户学习使用系统,还要帮助用户在业务能力和产品技巧上持续提升。

深度学习(Learning),不是简单的提供操作手册让用户查阅,而是通过一套系统化的设计,鼓励、激励用户持续学习,获得成长。

比较成熟的商业软件产品,都会运营用户社群和认证体系,并且组织各种线上线下活动,来提升用户的整体水平,更好的应用软件解决业务问题。

Salesforce的Trailhead学习平台,就是一个非常值得研究学习的学习平台。在Trailhead中,Salesforce提供了大量的课程、资料,不仅包括软件使用,也包括了业界最佳实践,甚至是体系化的专业知识,如图8-54。

我自己就在Salesforce中学习过免费AI系列课程,质量非常高,从AI的发展历程、基本原理,到大语言模型最新实践,以及如何融入企业应用并产生业务价值,都有非常棒的体系课程。

B端产品的促活系统(Engagement)设计

图8-54  Salesforce Trailhead学习平台

Trailhead中,每完成一门课程并通过考试,都会获得相应分数,每一名学习者都会根据分数获得等级勋章,如图8-55;对用户是一种很有趣的激励体系,也是一种个人专业能力的身份标签。我自己在Trailhead中大概学习了三十多个小时,目前取得了Mountaineer勋章。

B端产品的促活系统(Engagement)设计

图8-55  Trailhead的学习等级勋章

1.1.6促活场景(4):行为纠编(Trouble Shooting)

产品应该对用户错误的操作和行为进行及时纠正,确保用户回到正轨。行为纠偏(Trouble Shooting),不仅是促活场景的重要构成,也是贯穿产品设计的重要原则。

行为纠偏不应该只关心纠偏,而要具备整体思维:

预防错误:通过防呆机制的设计,避免用户操作出现错误。例如尼尔森十大设计原则中展示过的删除二次确认对话框中是否按钮的视觉处理。

错误提示:出现了错误,要及时给出提醒和反馈,以便用户尽快调整。例如表单填写时常见的行内校验设计范式,当输入错误焦点离开文本框后,马上在文本框旁边进行文字提示。

行动建议:如果可能,还要给出下一步行动建议,方便用户继续处理。例如,在输入密码错误后,弹窗强提醒中,给出修改密码的快速跳转链接。

1.1.7不同场景的交互组件选择

上手引导、功能发现、深度学习、行为纠偏,这四大促活场景,目标相同,场景不同,表8-3总结了彼此的区别和特点。

表8?3  四大促活场景的区别

B端产品的促活系统(Engagement)设计

 

促活系统设计,与反馈系统一样,应该设计一套标准规范,让团队成员遵循。规范中定义了不同场景下可以选择的组件与范式,确保不同产品经理,设计出的功能,对于用户来讲,体验一致。

表8-4是一套供大家参考的规范,实际方案要根据自己所负责产品做出调整。规范标准中,组件和范式的选择没有对错之分,重要的是一致性的体验和设计。

表8?4  用户促活场景下组件和范式的选用参考表

B端产品的促活系统(Engagement)设计

1.1.8促活系统的产品化设计

我们介绍了这么多促活场景和组件范式,在实践的过程中,应该如何实现呢?除了硬编码以外,有没有标准化的产品解决这类问题呢?

答案是肯定的,国外有很多专门实现用户促活系统设计的SaaS产品,例如UserTour、 UserGuiding、UserPilot,可以嵌入到自己的系统中,通过配置实现上手引导、功能发现等场景的促活引导,有效节省研发资源。遗憾的是,在国内没有见到过类似的标准化产品,而国外的这些产品,在国内用起来也并不方便。

除了嵌入第三方促活系统组件,成熟的商业软件,也可能实现自己平台的促活系统功能,例如Salesforce的In-App Guidance,就是在Salesforce中配置促活提示的产品模块,实施团队可以使用该功能,对Salesforce的原生页面,或者自定义页面进行促活系统配置。

In-App Guidance可以配置两种提示效果,纯提示(Single Prompt),以及分步骤引导(Walkthrough)。

图8-56展示了Single Prompt的具体配置项,用户可以选择Floating Prompt,Docked Prompt,以及Target Prompt这些Salesforce标准组件,进行新功能提醒。

B端产品的促活系统(Engagement)设计

图8-56  通过In-App Guidance配置Single Prompt

图8-57展示了Walkthrough的具体配置项,用户可以配置具体有几步,每一步采用什么组件来提示。

B端产品的促活系统(Engagement)设计

图8-57  通过In-App Guidance配置Walkthrough

促活系统的标准化产品能力,自研系统完全没有必要设计实现,投入产出比较低,最好是嵌入成熟的第三方工具,遗憾的是国内目前没有类似产品,因此如果想做上手引导和功能发现的提示与引导,只能前端硬编码,但在B端产品中前端资源总是很稀缺,最后评估下来,大多数公司都是PPT宣导。

至于商业化软件产品,设计这样一套功能模块,确实也要投入不少资源,大多数团队可能都选择放弃。

但不论怎样,对于上手引导、重要新功能的提示,这些都是非常重要的体验场景,即便没有产品化能力实现配置,也要考虑适当硬编码,来提升用户体验。

不论是哪种方案,一套促活系统组件、范式设计规范标准,是每个重视用户体验的产研团队,都需要定义管理的。

1.1.9促活方案设计六步法

促活系统的设计规范,定义了不同场景下可以选用的组件与范式。在具体设计中,产品经理和设计师,还要从用户画像和旅程的角度,更加细致的定义选用的组件和交互的过程。

每一个促活方案的设计,都可以遵循以下步骤,即用户、场景、目标、触发规则、旅程、惊喜时刻,如图8-58。

 

B端产品的促活系统(Engagement)设计

图8-58  标提醒样式

用户:虽然大多数促活方案是针对全员的,但如果能针对细分用户群体有更针对性的设计方案,效果会更好。例如,针对业务老手,促活的重点是系统教学指导,而针对业务新手,可能还要包括对业务知识的培训。 

场景:促活设计六步法,主要应用与上手引导和功能发现两个场景,因为深度学习系统是独立的学习培训体系,行为纠偏是单点功能的体验优化,不需要用到六步法的设计思路。明确了场景,从而遵循8.3.7的组件选择参考表,选择下一步要用到的组件和范式。

目标:每一个促活方案,都应该有明确的目标,例如让用户动手感受某个新功能,或者帮助用户初始系统并掌握深入学习的方法。

触发规则:所有的促活交互,都是被触发的,要明确触发规则,例如新用户第一次访问系统,遵循某个条件的老用户群体在某个时间点后第一次访问某个页面。

旅程:完成了前四部,接下来是促活系统设计的核心,如何设计用户旅程,引导用户一步一步体验产品,达成促活目标。旅程有长有短,可能只有一步的模态气泡提示,也可能是分了好几个步骤的侧边栏提醒、分步骤引导。

惊喜时刻:对于比较复杂的促活任务,如果旅程比较长,用户花费了时间完成了任务,本身有一定的成就感和满足感,这个时候再通过一些图片文字的鼓励激励,会让用户更加惊喜,对产品的好感进一步加深。所谓惊喜时刻,是来自于互联网C端产品的概念,在C端产品设计中,要通过一系列的手段,引导用户完成某些必须操作,达到惊喜时刻,这样会大幅度提升用户的留存率。

土豆:“我一直觉得我们的经纪人平台PC版,可以对新用户的引导做的更深一些,我参考六步法,设计了一个新用户的上手引导设计!”

大可:“不错啊,我看看你的设计方案!”

土豆:“我借鉴了之前用户画像旅程分析图的画法,并且结合六步法,做了一张设计图,如图8-59!”

大可:“很清晰,也很生动,杨堃老师介绍的六步法,只是一种思考框架,具体的绘制、应用十分灵活,主要是能表达清楚自己的设计思路,不要遗漏重点信息,就可以了!”

土豆:“是的,我的这个上手引导旅程,针对的是行业新人,他们不仅不知道如何使用系统,而且业务知识也比较薄弱,所以整体的设计目标,是帮助他们建立对系统的基本认知,学习了解基础业务知识,而且要完成一个创建客户的任务,帮助用户建立使用系统的信心!”

大可:“但是如果是行业老销售第一次入职使用我们的系统,是不是更多应该介绍系统功能?”

土豆:“是的,所以可以针对两类用户群体,设计两套上手引导旅程,在一些旅程节点的交互设计和内容编排上有所不同!”

大可:“你如何区分行业新老销售呢?通过年龄么?”

土豆:“很简单,第一次登陆的时候,可以让用户先回答一两个问题,让他们自己选择,自己是什么情况,希望登录系统后得到哪方面的指导帮助!”

大可:“这个办法确实简单又有效!”

土豆(受到表扬乐的嘴角开花):“这个是我从Salesforce受到的启发!”

土豆(战术性喝水,继续说道):“整个旅程分为五个大节点,第一步,首先收到一个欢迎弹屏,可以录一个简短视频,帮用户快速了解我们系统的特点、优点;第二步,关掉弹屏后,弹出停靠面板,里边会呈现一些学习资源目录,为了简化工作,行业新人和行业老炮两类用户的旅程,主要在这一步面板的推荐学习内容有明显区别;第三步,当用户关闭或隐藏面板后,通过非模态气泡提示用户,可以从哪里再次展开面板学习;第四步:接下来会通过分步骤引导,采用模态非模态气泡结合的方式,引导用户访问客户列表功能,并且创建一个客户。第五步:创建成功后,弹出一个祝贺用户的浮层,对用户进行激励!”

大可:“设计的不错,很清晰,不过让用户在正式环境创建大量虚拟客户,是不是有点草率?”

土豆:“啊,是,那我再想一想,也请读者帮我思考思考,这里怎么设计更合理!”

大可:“欢迎读者朋友留言讨论!”

B端产品的促活系统(Engagement)设计

图8-59  经纪人平台PC版本的新用户上手引导促活旅程

1.1.10案例:Salesforce的新用户引导

最后,我们演示一个实际案例,看看Salesforce是如何设计上手引导的。

在Salesforce官网申请免费试用CRM产品,填写完个人信息后,开通账号,登录系统,首先会弹出几个题目,Salesforce会询问你的背景(业务人员、工程师、产品经理、管理员),试用系统的目的(体验产品、学习业务),如果你选择了业务人员,在第三题还会询问你目前最想了解的主题(培育线索、销售预测、优化工作流),如图8-60,完成后,进入到系统。

 

B端产品的促活系统(Engagement)设计

图8-59  登录试用系统第一步,要求你描述个人情况和试用目的

我猜测不同的试用目的,进入系统后的旅程并不一样,针对这一节案例中我选择的个人信息,登陆后没有弹出欢迎窗口,而是一个内嵌的欢迎组件,同时展开了侧滑任务面板,里边有一系列的上手实操学习主题,如图8-60;而有的时候我第一次登录试用系统,会收到一个欢迎弹屏,如图8-61。

B端产品的促活系统(Engagement)设计

图8-60  进入系统后,看到可关闭的内嵌欢迎组件,以及任务侧边栏

截图中,侧滑任务面板的学习主题包括(截取部分):

开始(Get Start):了解适合你的学习路径,以及Salesforce如何帮助你开展业务。

开始销售(Start Selling in Salesforce):了解每个功能板块如何帮助你记录管理销售过程。

连接客户(Connect with Customers):帮助你的团队和客户保持及时沟通。

B端产品的促活系统(Engagement)设计

图8-61  不同情况下欢迎方案不同,图中演示了弹屏欢迎界面

点击侧滑任务面板的开始销售(Start Selling In Salesforce),展开具体的学习任务,如图8-62,清单如下(截取部分):

l使用Salesforce提升销售(Boost Sales with Salesforce);

l添加一个客户(Add an Account);

l学习客户板块如何工作(Learn How Accounts Work);

l添加一个联系人(Add a Single Contact);

l学习联系人板块如何工作(Learn How Contacts Work);

l添加一个商机(Add an Opportunity in Track);

l学习商机板块如何工作(Learn How Opportunities Work);

B端产品的促活系统(Engagement)设计

图8-62  点击侧边栏的某个学习主题,进去后有多个学习任务

这些任务,有些只是资料阅读,有的需要实操,任务前边的复选框不会自动勾选,是由用户手工点击标记的。我们选择添加一个客户(Add an Account)任务,系统会自动跳转到Accounts默认视图,进入到分步骤引导模式,第一步,是通过模态气泡引导点击新增按钮,如图8-63。实际上New按钮是无法点击的,点击气泡上的Next,自动进入创建客户表单界面。

B端产品的促活系统(Engagement)设计

图8-63  分步骤引导Step1/3:点击新增客户按钮

来到了步骤二,是客户资料编辑表单,此时弹出的是非模态气泡,用户可以不受影响的填写表单。如果没有提交表单内容,气泡的Next按钮是置灰的,无法继续下一步,只有提交表单,完成客户资料填写,才能进入步骤三。如图8-64。

B端产品的促活系统(Engagement)设计

图8-64  分步骤引导Ste2/3:填写客户信息

步骤二提交了表单后,点击下一步,来到步骤三,页面会自动跳转到客户详情页,呈现刚刚填写的客户资料。步骤三是本次分步骤引导的最后一步,弹出的依然是非模态气泡,告诉用户已经成功的添加了一个客户,可以自己选择返回其他页面继续操作。

至此,该任务执行完成,用户体验了一个创建客户账户的完整操作路径。

B端产品的促活系统(Engagement)设计

图8-65  分步骤引导Ste3/3:新增成功,进入到详情页,步骤结束

以上展示了Salesforce新用户登陆后的上手引导旅程,可以看出设计的非常详尽、用心。大多数商业化SaaS软件都有类似的上手引导设计,以后大家在体验产品时,可以留意观察,甚至截图存档,作为以后自己设计的灵感和参考材料。

 

标签

微信扫一扫,分享到朋友圈

微信公众号
 苹果iOS虚拟币充值(抖音钻石、快币、薯币、比心币、他趣币、陌陌币充值)

相关推荐