突破体验瓶颈—阿里云TXD包容性设计...

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名
13364 19 173 2020-08-17

你负责的B端产品是不是有很多复杂的专业名词难以理解?是不是有过量的信息需要在一个状态卡片上透传?本文可能有你想要的答案。


-引言-

前几天我去吃饭,想用个优惠券,老板打开它的验证APP准备扫码,但等了很久页面还是停留在加载页面,在老板大骂手机和APP差劲的时候,我拿过来看了看才发现所谓的“加载页”其实是新版本更新后的介绍页,需要右滑三次才能进入首页。我不知道版本介绍是否被这个老板记住,但这个APP很难用的感受肯定已经牢牢的刻在了他心里。



-认识包容性问题-

因为语言、文化、习惯、生理等因素的差异,用户对于同样一个设计的反馈可能很不一样,比如引言中的老板年龄偏大,互联网认知水平较低,导致其倒在了一个比较常见的滑屏操作上。作为设计师我们不能抱怨用户、场景等因素的特殊性,而应该积极的思考如何让这些特殊的用户能够更好的使用我们的产品。


图1:常见的版本优化引导页



-包容性在B端产品中的特点和价值-

包容性问题严重

因为受众多元、信息繁多、交互复杂等原因,B端产品的包容性问题一般都比较严重,是影响体验的核心因素之一,解决这些问题会很直观的反馈到整个产品的使用体验上。


表1:导致B端产品包容性差的原因

用户价值巨大

不同于C端产品,B端产品的用户获得成本非常高,每个用户都非常有价值,我们必须认真对待每一个用户。每一个包容性问题虽然受众有限,但对每个目标用户的影响确是巨大的,如果能够解决,这些收益用户往往会成为产品的忠实用户。

体验提升的必然方向

作为一个体验合格的产品,首先需要满足“稳定性”和“功能性”,然后是“一致性”和“易用性”,这些共同形成了产品体验的基础。接下来根据业务、目标、人群的不同,设计提升的方向也会有所差异,C端产品服务个人,重视情感,“美观性”和“愉悦性”会是重点;B端产品服务整体,强调通用性,所以情感设计相对克制,而能够提升用户范围和数量的“包容性”则显得尤为重要。如果说“易用性”、“美观性”等维度重视的是产品体验的深度,那么“包容性”重视的则是体验的广度,它的目标是拓展产品服务人群,让更多的人能够轻松、高效的使用产品。

图2:产品体验的层级和维度



-如何进行提升-

既然包容性对于B端产品如此重要,我们应该如何进行提升呢?从微观的具体设计上,我们需要注意每个设计的包容性,在不影响整体体验的前提下尽量满足包容要求,避免出现无障碍问题;在宏观的产品体验上,我们则要关注重点特殊人群、特殊场景下的使用体验,带给目标人群一个好的使用感受。

避免设计出现包容性问题

对于一些组件、功能的设计而言,我们应该警惕出现无障碍问题,让设计尽量包容到更多用户,比如B端产品常见的“状态卡片”,因为多颜色、多内容在一个狭小的区域内展现,很容易带来一些包容性问题,需要我们特别小心。

案例问题

和大部分B端产品一样,云研发产品中也有很多“状态卡片”,但总有用户反馈状态卡片不好用,不管如何优化,还是有不少人吐槽不满意,在访谈了多位代表性用户后,我们发现因为卡片类型和信息过多,我们使用了多种颜色来代表不同信息,这可能是主要的问题来源。

图3:云服务产品中的状态卡片示例

问题分析

我们从人群多样性的角度去检测设计中可能具有的问题,并通过“问题-多样性-原则-实现“的方式来进行分析。

表2:卡片问题分析思路

解决思路

识别难度:对比度越明显越容易识别

反馈最多的问题就是用户认为卡片信息不好区分,没有重点,这个问题主要是对比度造成的,虽然我们之前的版本已经达到了基本标准,但当我们继续加大元素间的对比度差异时,反馈的声音还是会明显减少,后来了解到因为灯光、环境、视觉障碍等因素都会让标准变得苛刻。

我们在设计时,应该尽可能减少元素数量,扩大各元素间的对比度差异,从而提升整个产品的识别能力,让更多类型的用户可以正常使用。

颜色类别:颜色越少越容易记忆

最开始我们卡片有5个状态,怎么修改对比度都有用户记不清每个颜色的意义,分析后我们发现问题的关键可能是需要让用户记忆的内容过多,我们进行合并筛减后只提供三个颜色,基本做到了不用记忆。另外使用更多的颜色也更容易降低视觉。

预警信息:维度越多越容易区分

减少颜色后其它信息如何进行传达呢?我们采用形状、状态等方式多维度去透传信息,比如蓝色的卡片我们不再用颜色表示,而是通过loading 的样式等。另外,为了加强预警卡片的认知,我们从形状上和其它卡片进行了区分。

图4:用状态代替颜色表达“运行中”的状态

生理缺陷:提供专属模式

我们的用户也包括红绿色盲这样特殊的用户,但如果为了照顾他们的感受而直接修改产品可能会影响正常用户的使用体验,而且效果不一定明显,这时候我们可以考虑提供特殊方案专门给到这类用户,比如我们可以在“设置-个性化”中提供“红绿色盲模式”等。

图5:卡片优化历程

提升产品整体包容性

除了具体的组件或功能,系统中往往还有一些通用的问题也需要改善,例如B端用户经常反馈的阅读障碍问题,它由很多原因造成,并且在产品的各个细节均有体现,如何来行动呢?

案例问题

起初我们认为对于云研发这样一种专业型产品来说“生涩词汇”、“不好上手”等问题不算什么,大部分用户应该具有一定的行业基础,即使开始不理解,也会慢慢自己学会。但深入了解后才发现作为一款共有云产品,用户大部分都是中小企业员工,他们中很多人都是低学历、低经验,对行业专专有名词的认知几乎是“0”,而且他们也并不那么“好学”,觉得你的产品复杂,马上就去看别家产品了,充分发挥了小企业掉头快的优势。问卷调研显示,37%的用户有提到“不懂”、“难理解”的字眼,而在访谈中一半以上的用户对产品有认知、学习上面的问题。

图6:共有用用户特征

问题分析

我们通过人群多样性的角度出发,首先,把有阅读困难的人群分为三大类:1、永久性的认知缺陷;2、暂时性的文化、习惯、经验、知识;3、匮乏和情境性的快速扫读、双屏切换等,然后通过“多样性-类型-原则-实现”进行分析。

表3:阅读障碍问题分析思路


解决思路

概念记忆:内容越少越好理解

我们可以通过合并概念,去掉不必要概念的方式尽可能的减少需要理解的内容,相似的概念使用相似的语言结构,这样更容易让人学习记忆。

概念理解:动词越多越简单

语言中动词要比名词少的多,使用动词来代表含义不仅可以大大减少需要用户认知的词汇,大部分情况下,还能更简单直接的表示含义,比如我们在产品进行发布的方式有很多,比如“cicd的自动化串流工具”、“appstack”等,直接使用肯定会难以被理解,但我们如果只去强调其功能动作,那只用写“发布”即可。这种手段非常实用,特别是在主界面上,简化的文案会让用户觉得清爽不少,详细的原因可以进入之后再进行介绍。

错误:普通发布、cicd流水线、apptack

正确:发布 、流水线发布、应用发布 

查看详情:机制越通用越有效

对于无可避免的专业词汇,应该提供一套通用、便捷的提示方式,而不能是没有逻辑,各不相同的,比如有的hover出现提示,有的点击出现提示等。

为更多人设计:如何提升B端产品“包容性”

图7:统一的图标提示方式

天生缺陷:提供专属模式

对于障碍度过大的少量用户,我们可以提供特殊版本,比如针对新手设计简易模式,原理可以参考一些视频软件的儿童模式等。


-最后-

用户是个十分复杂多元的群体,他们不仅包括“生理障碍人群”,还有“亚健康人群”,“特殊情境下障碍人群”,“不同语言、文化、习惯造成障碍的人群”等等,只针对普通环境下普通人的设计理念在体验快速发展的今天已经落后了,在实际项目过程中,我们可以利用“通用设计”、“无障碍设计”或“包容性设计”等方法优化产品的包容性体验。事实上,减少无障碍风险、提升产品包容性不仅对障碍人群有很大的帮助,大多数时候也会让普通用户获得更好的体验,从而使产品更加通用,更具竞争力。





Powered by Froala Editor

全部评论:19

  • 吴铁奶

    2020-09-15 00:02

    学到了

  • TUSX

    2020-09-01 09:59

    @零度下加冰: 我也觉得,再怎么接近高保真的设计,也需要很多优化完善

  • 一只快乐G

    2020-08-28 20:39

    @: 啊啊啊啊啊啊

  • 悠然

    2020-08-26 14:46

    @零度下加冰: 很多公司直接按照原型用Ant Design的组件去搭页面了

  • 阿里云_TXD

    2020-08-26 10:20

    @: B端最麻烦的是做体系,单做一个系统只是入门,等你开始做第二个的时候发现第一个沉淀的很多用不上,无法通用或要改第一个的时候就真的凌乱了

  • 阿里云_TXD

    2020-08-26 10:19

    @tczy: 你是真的秀

  • tczy

    2020-08-25 14:23

    @橘皮糖: 哦,我们的产品基本一个高保真把后台交互全部做完了,还做的和真的没什么区别,我也是挺佩服他的。忘记告诉你了,我们的产品经理就是我

  • 雅痞_Lay

    2020-08-21 09:05

    @橘皮糖: 可不是,我作为一个B端美工,不知道多舒坦(狗头)

  • 橘皮糖

    2020-08-20 18:24

    @雅痞_Lay: ....那你们产品经理挺忙的啊

  • 2020-08-20 18:05

    @阿里云_TXD: 最近接触做b端,真的比c端难多了,一个页面可以有很多逻辑,和状态,快哭了

  • 零度下加冰

    2020-08-20 09:30

    @阿里云_TXD: 并不是这样吧,产品原型怎么可能上线呢?除非产品就是做设计的。

  • 雅痞_Lay

    2020-08-20 09:27

    @橘皮糖: B端不需要设计,产品经理拿着原型就开发了

  • 阿里云_TXD

    2020-08-19 17:01

    @橘皮糖: 小哥,楼主也经常遇到好多人这么说,很烦这种,C端的很多瞧不起做B端的,但其实B端上下限比C端大的多,难的那种秒杀C端我觉得,而且目前SAAS是爆发期,前途更好,走好自己的,不要管别人。

  • 橘皮糖

    2020-08-19 16:37

    觉得悲哀的一点,离职后去了一家B端SaaS平台公司。前同事问去了什么公司,回答后被嘲讽。说:“啊?B端产品还需要设计?”觉得很不舒服...

  • Jade_小哥

    2020-08-19 16:12

  • 阿里云_TXD

    2020-08-19 15:55

    @楚-: 嗯嗯,我们这边后台做的很多,今后也会再做一些相关分享,持续关注我们哦

  • 楚-

    2020-08-19 11:22

    可以多分享一些关于后台的设计

  • 阿里云_TXD

    2020-08-18 14:35

    @shengtanga: 很高兴对你有帮助,我们确实有总结过一些包容性问题走查表、场景归纳表等,大家对包容性设计热情高的话之后可能会分享出来

  • shengtanga

    2020-08-18 10:28

    竟然看完了,很受益,请问有什么样的辅助工具吗?

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票