SaaS 中 6 种常见 UI 入职模式

新手入职

新手入职是用户首次尝试产品的过程,如果做得好,会引导用户走上一条关键的道路,这条道路会让他们最终成功地使用并获取到产品价值。

在 SaaS 产品中,通过免费试用吸引用户。如果用户在第一次尝试之后未能获取到产品的价值,可能就再也不会回来了。

良好的入职,可以提高新用户留存,进而提高试用到付费的比率。所以,新手入职对 SaaS 而言至关重要。

在许多公司,入职流程通常由销售(AE)、客户成功(CSM)团队来负责。然而,越来越多的厂商转向应用内的自动化方式,设计的价值开始逐渐凸显。

其中,入职的体验内置于产品中,即用户在应用内接受培训和教育。不仅加快了用户实现产品价值的时间,同时也减少了销售团队和客户成功团队的人力投入。

以下,总结了常见的 UI 入职模式:

  • 欢迎光临

  • 产品导旅

  • 清单

  • 手动执行

  • 脉冲

  • 空状态

共列举了 16 个 SaaS 产品案列,图文并茂的进行阐述。

01 欢迎光临

「欢迎光临」是最为最常见的入门模式。除了基本的打招呼信息以外,通常还包括接下来的行动引导,以及功能介绍、视频教学等内容。

其中,模态的方式,在视觉上将「欢迎光临」与背后的应用区分开来,从而让用户更聚焦在当前信息上。

Basecamp,团队和项目管理工具。新用户进入产品后,弹框内的视频内容,可以帮助用户快速的熟悉产品。


07b9f9940f994ae604634fcaf4c33c26.png

Airtable,在线表格工具。除了视频内容外,还提供了入门指南。

765c2c54d5948ce0c31b607e97c6aacb.png

Webflow,无码建站工具。欢迎页面结合炫酷的效果演示,让新用户更加期待产品实现的效果。

7af101c40a61a5141236c89191cbbb3a.gif

‍‍同时,动态的演示,使用户理解起来更加容易。

83a6f94899ab25f05bdc604bed863412.gif

02 产品导旅‍

通过提供上下文信息,一步步引导用户,找到最快获得价值的方法。

通常采用带有箭头的小窗口或热点提示,一般 2-5 个步骤之间,简短的文本介绍。

Useloom,在线录屏录像工具。通过文本框(有用的详细信息)+热点提醒的方式,引导用户对录制后的视频进行编辑和分享设置。

f69be2c184f254e9b568c465b144dc51.gif

Invision,数字产品设计平台。采用图文结合的方式,逐个介绍每个关键功能。


763c5717ab32f2b88c6cf343af58c57c.gif

Dropbox,云储存和团队协作工具。大面积的蓝色与浅色页面很好的区分开来,让用户聚焦在引导框上。‍

94f23e0ad8a9a7fc4037aba75b4a74f0.png


03 清单

提供了清晰的结构,并引导用户完成关键步骤,从而上手产品的具体使用。

清单还使得待完成的任务可视化呈现在用户面前,利用了人的“完成”心态,激发用户采取行动。

Crisp,在线沟通应用。清单+奖励(试用天数)的方式,激励用户完成清单任务,在深度绑定同时也越能体验出产品的价值。

91b5c1f8e9a516f554b3b8b9b86d46da.png

Productboard,产品管理系统。Productboard 清单的第一个任务为已完成状态,利用人的“完成”心理倾向,增强了用户的行动动力。

2044fc351800e7335dde22eb20e03ac0.png

Evernote,云笔记应用。通过较少的付出,就完成了第一个清单任务,产生极大地愉悦感,同时自然的引出其他任务。在视觉上采用“波动”的方式,引导用户继续点击操作,执行任务。

c8c3ceeae675794c9872de16035aaa71.gif

04 手动执行

需要用户操作,才能进入下一个步骤。用户根据引导,按照顺序手动完成一个个步骤任务,从而为后面发挥产品的价值奠定了基础。

Trello,看板工具。用户根据引导完成整个步骤后,进入产品内可看到刚才所设置的内容,就这样在不知不觉间开始了产品的使用,从而提高了产品留存。

e04ebbefdd382bc3c85cafb77a960926.gif

b80a015d7df34a0adcb7cd3b4a2e6485.png

Monday,可视化项目管理。通过引导用户建立任务,开启产品的具体使用。

3cc00a93cc2c0e6badbdfe757dff47fe.gif

Deputy,员工日程管理应用。引导用户完成班次设置,从而更快的获取到产品价值。

a2f5e76b8f75cc81fddce8832d35e404.gif

05 脉冲

通过“圆形”的波动吸引眼球,在较低侵入性的情况下,对关键操作或功能进行引导提示。点击后,提供相关上下文信息,帮助用户更好的理解。

Feedly,RSS 聚合器应用。在不同页面和场景下,引导使用不同的功能。

e1a4a56531956278b1c268da4836bee6.gif

40ca03c481bc067bbc649cbf2acf988d.gif

Grammarly,在线语法纠正和校对工具。通过“脉冲”对主要功能进行引导说明。

1ef21934ae91c7ccc2734f68ad7c1a71.gif

06 空状态

通过填充空状态或者利用空状态来引导用户行动。

JivoSite,在线沟通应用。空状态下引导用户模拟使用,在无压力的情况下,提前体验到了产品的 aha 时刻。

4db13a31097a8b5e4771f6e83149d5cd.png

984cfb3dd33a094d4c45062d9c0ffd48.gif

Groove,客户支持应用。将默认数据和教程完美的结合在一起,通过解决未分配任务,自然的学会了产品的使用。

4a94e071c56790d7db5d4751a87ea7bd.png

最后

为了方便分类,其实上方中的 SaaS 案例,大多都采用了多种 UI 模式,来帮助用户完成入职,get 到产品的价值。

当我们进行新手入门设计时,试着询问自己以下问题:

  • 产品为客户提供的核心价值是什么?最好从现有的客户那里询问答案

  • 新用户需要采取什么步骤来获得该核心价值?

  • 这些步骤中可能存在哪些障碍?

  • 是否需要针对不同的角色,提供个性化的入门?

然后,才是思考采用什么 UI 模式。同时,新手入门和其他产品设计一样,还需对其数据监测(定量),并与付费不久的用户以及最终流失的用户交谈(定性),进行持续优化。

如果你喜欢这篇文章,欢迎关注上面的公众号

最后,我建立了各大城市的产品交流群,想进群小伙伴加微信:yw5201a1  我拉你进群。

dca014a24b7503e105770d8445e5b643.png

9f292ff20c7613f194ab3e29dc41ebc0.gif

视频号推荐

关注微信公众号:产品刘 可领取大礼包一份。

eb71d1c543fb9d3eb4468ca12c5e3180.gif

··················END··················

43c4db24d22acbe75f6fa48f6397d38f.png

今日报告:腾讯广告&腾讯营销洞察发布《2022新职业教育洞察白皮书》下载报告去公众号:硬核刘大  后台回复“ 职业教育”,即可下载完整PDF文件。

申明:报告版权归 腾讯广告&腾讯营销洞察 独家所有,此处仅限分享学习使用,如有侵权,请联系小编做删除处理。

RECOMMEND

推荐阅读

究竟什么是CRM?

手把手教你做B端产品经理

新一代客服系统

从面试的这些细节就可判断公司的好坏

14a5464dd027d4d50d5ed1020bed742e.gif

点击“阅读原文”

查看更多干货

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值