前端如何提升To B产品用户体验

云计算产品发展的早期常以技术为核心吸引客户，功能的实现是这一时期产品优先考虑的因素。经过数十年的发展，云计算行业已经进入了深耕细作的时代，市场的激烈竞争与云产品快速发展的同时，用户对产品的可用性与易用性也有了更高的要求。在这一背景下，能够提供良好用户体验的产品在竞争激烈的市场中才更容易赢得用户的信任与市场的认可。故而，在2022财年伊始，阿里云整个产品层面就提出了要将用户体验作为我们今年最大的目标，那前端作为一个直接面向用户提供人机交互界面的工种，体验优化的提升更是我们义不容辞的责任。
本文将从前端入手，探讨如何更好地改善ToB类产品的用户体验。

什么是用户体验？

用户体验并不是指一件产品本身是如何工作的，用户体验是指“产品如何与外界发生联系并发挥作用”，也就是人们如何“接触”和“使用”该产品。

说到用户体验，就不得不提业界内比较经典的书，叫 《用户体验要素》，它把体验拆分成了5层要素，如下图所示：

通过上面对用户体验要素层次的划分，我们不难看出，前端的范围主要在 **表现层 **和 框架层，是用户体验的第一道把关者，可以说，前端工程师的每一行代码，每一条样式，每一段交互都直接影响着用户最直观的感受。
通常表现层又直观的包含以下几个方面：

• 视觉：即是用户所看见产品。
• 触觉：产品人机交互的过程。
• 感觉：对产品的满意程度，所使用的服务是否让用户感觉到极致的快感。
• 逻辑：逻辑上是否用户习惯，是不是下个页面是用户能预测到的。
• 黏度：用户使用第一次后，用户是不是会再回来使用你的产品。

什么是用户体验我们已经基本搞清楚了，接下来一起看下如何定义体验的好坏呢？

怎么定义体验好坏

如何定义产品体验好坏？通常的做法是通过一个体验模型来综合度量产品体验，常见的模型有 Google Heart模型、 蜂窝模型、 5E模型等

为此，阿里云结合自身的业务特点，制定了一套适合云产品与中后台等B端产品的体验模型-- UES（User Experience System）

• 易用性 - Ease of use：易⽤性是产品使用质量的核心维度，它反应产品对⽤户而言是否易于学习和使用，包含易学性、易操作性和清晰性3个维度。易⽤性的提升可以促进操作效率和任务完成率的提升、降低学习成本、提升⽤户体验和满意度。
• 一致性 - Consistency：一致性指多款产品间通用范式部分的一致程度，分为整体样式、通用框架和常用场景及组件等维度。对于⽤户⽽⾔，体验⼀致性的提⾼可以降低⽤户的操作时⻓及错误率，降低学习成本，提升⽤户的满意度；对于产品设计及开发者⽽⾔，保持体验⼀致性可以提升开发效能，产品模块的可集成性、稳定性和可延续性更⾼。
• 满意度 - Happiness：满意度反映着用户对产品或服务的期望被满足的程度，这个指标一定程度上会反映用户再次使用和对产品进行推荐的程度。
• 任务效率 - Task Success：任务效率包含任务完成率和任务完成时间，云产品的任务链路相对复杂，针对有明确任务或有固定使用流程的产品，通过比对用户路径和产品设计的理想路径之间的差异，能够帮助我们发现产品流程设计上的问题。
• 性能 - Performance：监控性能的指标有很多，其中最影响用户感知的指标是首屏渲染时间（FMP），指用户从发出请求到看到控制台主要内容的时间。其次，还包括页面请求响应时间、API 请求响应时间等指标。

利用这套模型，接下来我们就可以通过 用户调研（问卷、访谈、回访）、 用户声音（反馈、舆情、工单）、 用户行为（点击率、转化率、跳失率）、 系统表现（稳定性、流畅性）等途径和手段获取体验指标，通过对这些体验指标的洞察，初步定位产品的问题和潜在机会。下一步是进行体验的深入分析和论证，推导出优化方法，这才是我们最终的目标。

如何进行体验优化

前面做了这么多工作，就是为了发现产品中出现的体验问题，问题一旦确定之后，接下来就是如何解决这些问题了。下面分别从 性能、 一致性、 易用性、 满意度、 任务效率五个方面阐述在前端层面，如何解决问题。

性能

性能问题是前端体验优化中最为常见的，当产品规模达到一定程度，功能变的越来越复杂，用户量越来越大的时候，那前端的性能问题是一定会出现的。前端的性能问题通常包含以下指标：

对于用户来说比较直观感受的包括以下四个指标，白屏时间、首屏时间、可交互时间、可流畅交互时间。
我们通常认为“首屏时间”在 2秒以内是比较优秀的， 5秒以内用户可以接受， 10秒以上就不可容忍了。（首屏时间是指用户打开网站开始，到浏览器首屏内容渲染完成的时间）
前端能做的事情？

• 服务端渲染（SSR）
• 资源预加载、懒加载（require、React.lazy）、按需加载
• 尽可能减少 http 请求数
• cdn 内容分发网络
• 压缩图片、雪碧图
• 骨架屏、Loading、占位符等
• .......

那么，阿里云在上半年也针对各个产品线提出了**「一秒极速体验战役」**，采用了PCP（Perceivable Contentful Paint，可感知的内容渲染）这样一个自定义指标来度量用户侧的「首屏感知性能」。规定只有 PCP < 1500ms 才符合日常要求，超过这个值将自动报警处理，若产品线未在规定的时间内做出整改，将直接通报到阿里云高层。经过这样的一次性能体验战役，使得阿里云百万营收工单量同比下降 38%，同时得到了 66% 的受访用户的性能提升好评。

一致性

• 视觉一致性

视觉一致性主要体现在以下几方面：

• 颜色（主色、辅色、渐变规律、点缀色、提示色、字体颜色等）
• 风格（扁平、拟物、极简等）
• 元素属性（字体、控件、间距、图标、图片风格等）
• 交互一致性

交互一致性体现在各种页面控件布局、操作交互、页面跳转逻辑等的一致性。

• 文案一致性
  • 语气、句式结构统一
  • 专业名词、相同功能名称、相同操作统一
• 跨平台一致性

如果我们设计的产品在不同设备端都提供下载使用，那我们也需要注意 保持产品在不同软件中的一致性，使其视觉、功能方面很好的统一，用户才能够很快适应，没有陌生感。

为了保证视觉和交互的一致性，我们通常会制定视觉设计规范，采用统一的UI组件，统一的前端框架，封装常用业务组件等方式来解决。而对于文案的一致性，一般靠测试和产品的人工走查为主，当然我们在开发的时候也要尽可能保证文案的一致性。

易用性

• 易操作性
  • 键盘、快捷键---支持常用的快捷键、减少频繁鼠标和键盘的切换。
  • 扩大点击范围
  • 操作反馈---及时对用户的操作给与反馈，包含成功、失败、等待时间等。
  • 符合预期---任何操作及跳转都要符合用户心里预期。
  • 避免重复/过多的操作---不要要求用户多次输入相同的内容或同一操作。
  • 用户的控制度和自由度---能够执行“取消”操作，选择开通或不开通。
  • 遵循惯例
  • 防错、容错处理
  • 帮助记忆
  • 灵活高效
  • .......
• 易学性
  • 新手引导
  • 通俗易懂的文案---将复杂的术语、行话和缩写用通俗易懂的方式表达清楚，“说人话”。
  • 清晰的选项---提供清晰的表单列表，分组明确，需要步骤的明确需要几步，需要准备的东西提前告知。
  • .......
• 易见性
  • 可交互的元素应该更清楚的显示出来，避免非交互的元素看起来是可交互的
  • 选取行高亮
  • 明确表单必填项
  • ......

满意度

1984年，东京理工大学教授狩野纪昭根据功能满足度及用户满意度画出了一张二维四象限图，即KANO模型，该模型反映了产品性能和用户满意之间的非线性关系。每一款产品都有许多的功能，通常理解下，产品功能增加会带来用户满意度增加，但是KANO模型则反映了更多真相。

必备属性：这一类的产品功能特性是，没有会很糟糕，有了勉强可以及格，但远未达到满意的地步。比如家用冰箱，制冷就属于它的必备属性，即使你把制冷温度能够降到-100度，我也没觉得他让我多么满意，这就是必备属性。必备属性就如同他的名字一样，必须具备但是适可而止，这不是产品功能核心竞争力。

期望属性：这一类产品功能特性是，没有会很糟糕，有了会让人满意度大幅提升。比如一款电动车，如果不能充电续航，我会觉得很垃圾，但是随着你续航里程的持续提升我的好感度会越来越高。这类功能也不是竞争的主战场，不过从用户体验角度来说，100-1=0，我们的产品不应有明显的短板，即便你其他全部满分，期望属性如果有一门打0分，你的总体得分可能也高不到哪里去。因此，最好的状态是期望属性达到平均分即可。

魅力属性：这一类产品功能特性是，没有我也无所谓，而有了会让人满意度大幅提升。如果能把魅力属性提升，那么也就是所谓的“超越预期”的用户体验。提升魅力属性才是我们产品的核心竞争力。

那么带着这个模型回到我们的产品中，不管是一款ToB还是ToC的产品，一旦用户量达到一定的规模之后，必然会为了满足不同的用户而要去实现多种多样的功能。在这些功能和需求提出之前，我们就可以利用这个模型，去想想这个需求它是属于什么属性。不同的属性我们的重视程度和投入度是不一样的，人的时间和精力是有限的，只有把事情的本质、优先级、重要程度弄清楚了，投入产出比才能达到预期。
比如，淘宝交易平台在今年终于推出了支持同一个订单可以选择多个收货地址的功能，以及双11预售付尾款前1天可以提前进入“商品结算”页面，查看最终的结算金额、优惠金额，避免像往年一样用户需要自己拿出计算器去计算。
在我看来，这2个小的体验优化都属于魅力属性，没有这两个功能，我一样能够下单成功，更改收货地址。可是一旦有了这两个小的功能，用户的满意度就会大幅提升。

最后再以我们DMS产品内的SQL编辑器为例：

作为一款SQL编辑器，智能提示是必备属性还是期望属性呢？我们来分析下，如果在智能提示上你能不断的提高它的准确度，能根据语法做精准提示，甚至可以结合业务场景、用户使用频率等做智能化推荐，将用户要查询的表、字段、关键字放到首位，用户可以一路回车回车，不用输入任何关键字，即可完成整个SQL的编写。随着我们精准度的提升，用户的满意度是会直线上升的，那它就是期望属性，值得我们花费一定的经历去投入。

最后总结一下：作为前端来说，要提升用户满意度，可以在用户的期望属性和魅力属性上下功夫，精打细磨能够提升用户满意度的一些功能及交互。

任务效率

发现问题： 任务效率包含任务完成率和任务完成时间，要提升这两个指标，首先必须先计算出这两个指标，我们才知道如何提升。这里以DMS产品内的录入实例为例，使用DMS的第一步就是将数据库实例录入到DMS，我们利用链路分析工具AEM对这一任务进行了链路分析，分析结果如下：

分析问题： 经过分析，我们很明显的发现了问题，用户从输入密码 -> 选择管控模式中间花费了很长时间，流失率也特别大，从 21% 下降到 3%，那么这一步就是需要我们重点关注和解决的。找到问题以后，接下来就是解决问题了。
解决问题： 前端同学可以拿着这份报告，联合产品经理、交互设计师、服务端等人员一起讨论解决方案，制定方案，方案实施，发布上线。
结论验证： 最后再利用链路分析工具进行分析，验证我们的方案是否符合预期。若还未达到预期值，则再重复前面的步骤，直到目标完成为止。

总结

从前端领域来看，我们对于用户体验关注最多的就是页面性能，同时做的最多的也是各种性能优化。快即是好的用户体验，也是最好衡量的体验标准，好到我们可能把对于用户体验的关注都放在了这里。
性能优化的确是提升用户体验的一个重要手段，但不应该成为我们唯一的手段。 用户体验的提升不是一蹴而就的，寻常之处见功力，细微之处见真章，只有在不同的体验细节处发力，积少成多，才能产生质变的效果。

从用户体验要素层次的划分来看，前端主要服务于表现层和框架层，所以有的时候我们对于用户体验的思考可能就仅局限于这两层。但从用户体验层次的影响权重上来看，越往下权重越高，如果在策略层我们都没有想清楚我们的用户是谁？用户真正需要的是什么？那么我们的产品很可能连触达用户的机会都没有，就更不需要提表现层和框架层对于用户体验的影响了。
作为技术同学，我们需要有意识的去打破职能边界，主动以产品设计者的角色去思考，好的产品体验，有时需要的可能就是我们多走那一步的努力。