恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
SaaS 中 6 种常见 UI 入职模式
0.0°
2020-07-13 原创文章 经验/观点 举报 1793 4 1 0

工作以来,一直从事着企业级 SaaS 产品。如今,也慢慢的看到越来越多的设计师,从事和关注这个行业。


但能够让设计师学习的相关知识,却特别少。


作为一个深有体会的过来人,相信还有很多设计师在面临这样的问题。


所以,结合自己的工作,并尽所能书写这方面的内容,希望能够帮助到需要的人。



新手入职

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


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


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


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


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


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

•  欢迎光临

•  产品导旅

•  清单

•  手动执行

•  脉冲

•  空状态


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



01 欢迎光临

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


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


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



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



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



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




02 产品导旅

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


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


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



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



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




03 清单

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


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


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



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



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




04 手动执行

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


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




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



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




05 脉冲

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


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




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




06 空状态

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


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




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




最后

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


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

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

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

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

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


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



———  END  ———



以下是已经发布的有关 SaaS 内容索引:

当我们在谈 SaaS 的时候,在谈什么?

如何构建 SaaS 网站

SaaS-4 种提升产品使用

UX Writing-内容写作实操

SaaS-onboarding 框架:CARE


设计完全手册

表格-设计完全手册(5209)

设计心理学(14983)

组件-设计完全手册(10409)

表单-设计完全手册(4829)

更多 → → →



☻ ☻ ☻ 给我点个赞吧!或 加我微信好友

Powered by Froala Editor

微信公众号:int-PD

更新:2020-07-13

收藏

4人已收藏

Wiiii

设以为计,格物求索

  • 40

    作品

  • 2125

    粉丝

  • 0

    关注

  • 企业级(ToB)SaaS 客户生命周期下的设计价值探索
  • 网站设计进阶!5 个方面优化+数据优化
  • 5 年内收集 10 万家 ToB 和企业级 SaaS 应用!
  • 网站设计秘诀! 5 大模块、72 个案列详解,轻松 get
相关标签

    猜你喜欢

      2020-07-13 原创文章 经验/观点 举报 1793 4 1 0

      SaaS 中 6 种常见 UI 入职模式

      0.0°

      你确定要举报SaaS 中 6 种常见 UI 入职模式

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年05月05日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      4
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录