视力设计:如何为弱势群体做包容性设计

世界是多样和公平的,在我们考虑大多数人和强者的利益时,弱势群体一样也需要被设计“庇护”到。本文作者将就此来谈谈如何为弱势群体做包容性设计之视力篇。主流产品或服务的设计能为尽可能多的人群所方便使用,无需特别的适应或特殊的设计。宽度不超过80个字符或符号(如果是中日韩字体,不超过40个);段落里的行间距(行隔)至少是1.5倍行距,段落间距至少比行间距大1.5倍。


世界是多样和公平的,在我们考虑大多数人和强者的利益时,弱势群体一样也需要被设计“庇护”到。本文作者将就此来谈谈如何为弱势群体做包容性设计之视力篇。

视力设计:如何为弱势群体做包容性设计

作为设计师,我们总说:我要让我的设计更漂亮和高大上,要完成老板的业务目标,要让多数用户的体验顺畅。我们总是优先考虑大多数人和强者的利益,然而世界是多样和公平的,除了这些我们眼中的“目标用户”和“大多数人”,还有一群被我们忽略的弱势群体一样需要被设计“庇护”到,所以今天,我想说说包容性设计。

等等,不要以为我要站在宇宙中心呼唤爱,包容性设计并不等同于专门为弱势群体所做的设计。

  • 之于弱势群体——包容性设计是温暖的,他们不会感觉自己是被抛弃或者被特殊对待。
  • 之于企业——包容性设计是商业的,根据长尾效应,如果我们做设计的时候考虑到了极端的情况,长尾部分的用户也蕴藏着巨大的商机,如图。
  • 之于设计师——包容性设计是一种有用的设计方法,类似于运动员在脚上绑沙包跑步这种训练方式,将自己置身于最难的境地,如果连最难的case都解决了,一般的情况是不是易如反掌?

视力设计:如何为弱势群体做包容性设计

英国标准协会(2005)将包容设计定义为:

主流产品或服务的设计能为尽可能多的人群所方便使用,无需特别的适应或特殊的设计。

是什么disable了我们?

从某种层面来讲,其实并没有所谓normal people和disablepeople的区分,只是我们每个人的各项能力(capability)有所差异而已。

举个例子,《穿普拉达的女王》里有这么一个片段:新入职的安迪双手拎满了大包小包,同时捧着四杯滚烫的星巴克,需要拉开办公室的门,可以想象她做起来有多艰难。

视力设计:如何为弱势群体做包容性设计

单看安迪,她就是我们眼中的normal people,然而,此情此景下我们可以理解为她就是“disable”的,她的双手被完全地占用了。所以disable这个标签不应该打在一个人的身上,它描述的是在特定场景下,用户的某项能力低于正常水平的一种状况。在经典的包容性设计研究体系里,以下各项能力是经常会被大家考虑的:

视力设计:如何为弱势群体做包容性设计

我们来试着用包容性设计的思维方式来思考之前提到的例子:如果在设计门的时候,设计师考虑到了轮椅用户(Reach& Stretch这种能力低于正常水平的用户)的需求,会议室的门被设计成了感应的,安迪是不是可以轻松从容地走进办公室。感应的门不仅照顾了轮椅用户的需求,也让正常用户可以更方便地使用。

作为用户体验设计者、界面设计师,如何将包容性设计运用到实际工作中来,让我们的界面更包容?首先问自己:人们使用了哪些能力(capability)在哪些情况下去跟界面交互?这些能力的缺失或不足会导致什么样的问题?

下面以视力这种capability为例,分析视力可能出现的几种问题,并结合一些国际通用的guidelines提出了一些设计的建议。

常见的视力问题来自于以下四个方面:

  1. 视觉敏锐度:即人眼分辨物体细节的能力。近视、远视或白内障会导致用户视觉敏锐度下降。在视觉敏锐度较弱的用户眼里,图像细节变得模糊,只有较大的轮廓还能得以辨识,如下图中a:
  2. 对比灵敏度:即在前景色和背景色之间辨明亮度的能力。眼睛对比灵敏度较低的用户看到的图像像透过沙尘暴看到的样子,蒙了一层灰色,如下图中b:
  3. 色彩感知度:即对色相的感知度,色弱或色盲是指辨色过程中有环节出了问题,人眼辨别颜色的能力发生障碍。色盲以红绿色盲较为常见。在红绿色盲的眼里见到的图像如下图中c:
  4. 有效视野:视网膜病变导致用户有效视野发生改变。视野消失可能发生在视野中部(如青光眼),也有可能发生在视野周边(如糖尿病引起的视网膜病变),他们看到的图像如下图中d,e:

视力设计:如何为弱势群体做包容性设计

除了眼睛本身带来的视力问题,用户在何种情况下与界面交互呢?强光下,屏幕亮度必须加强才能看清;动态的界面(火车站的火车出发到站滚动显示屏)更不容易看清细节;分辨率比较低的页面载体(如电视机的屏幕)可能和你在自己电脑屏幕上的视觉稿大不相同。

设计建议

基于以上四种视力上的问题,我们可以对症下药从以下几方面检验你设计的界面是否最大程度上包容了这些视觉上有问题的用户。

增加视觉元素的可识别度:针对视觉敏锐度及对比灵敏度方面的问题

使用合适的文字大小、字间距和行距。WCAG(Web Content Accessibility Guidelines) 2.0 里关于文字可见性有具体的标准。将文字大小做成可调节是一种不错的方法,我们的手机以及一些阅读类的App都会有设置字号大小的功能,同时支持多国语言的选择,以便让更多的人可以使用。

视力设计:如何为弱势群体做包容性设计

避免使用下划线、斜体以及装饰字体。从下图能看出无衬线的正体字的可识别性是最强的,在同等模糊的条件下仍然能够得以辨识

视力设计:如何为弱势群体做包容性设计

文字与背景的对比要足够。背景过于复杂,前景的文字将变得难以辨识,可以通过加强二者对比的方式,比如在背景图上加上一个半透明的蒙版。

视力设计:如何为弱势群体做包容性设计

将文字转化为语音。包容性设计里一种十分常见的思维就是利用用户较强的ability,扬长补短。比如用户的视力可能不太好,我们可以将文字信号转化为语音信号,让用户较强的听力去接收信号。百度百科的H5页面就有语音播报的功能。这一功能对视力正常的使用者来说也是有益的,因为他可以边听边做别的事情。

视力设计:如何为弱势群体做包容性设计

合理运用颜色:针对色彩感知度方面的问题

红绿颜色使用时要格外小心。由下图可见,在绿色背景上放置红色前景,红绿色盲用户基本无法辨识,反之亦然。

视力设计:如何为弱势群体做包容性设计

避免只使用文字作为唯一的识别信号。我们在制作图表时,只用颜色来区分不同的组份,在色彩感知度弱的用户眼里可能就完全分不清。但是如果我们给每个组份同时加上纹理这种识别信号,这些用户就无需依赖颜色也能分辨。如下图所示:

视力设计:如何为弱势群体做包容性设计

集中布局相关联的内容:针对有效视野上的问题

不久前,同事提出一个有意思的问题:为什么搜索引擎的搜索列表页的有效区域只有那么窄的一点点?

具体如下图,在大屏幕上更夸张,有效区域大约只占了四分之一。

写到这里我想我有了答案:为了让文字集中在用户最有效的视野范围内。如果为了节省空间,设计设计师真的把内容撑满了整个屏幕,我们恐怕得不停地摆头才能看全一行文字吧?!

WCAG2.0里对于web端文本块的视觉呈现,AAA级标准定义道:

宽度不超过80个字符或符号(如果是中日韩字体,不超过40个);段落里的行间距(行隔)至少是1.5倍行距,段落间距至少比行间距大1.5倍。

视力设计:如何为弱势群体做包容性设计

将自己模拟成极端用户

有心的设计师可以通过图像处理软件模拟这些特殊用户看到的界面,来确保他们看到的界面仍然是可用的。PS里有专门的红绿色盲模式,可见PS也是鼓励设计师们在将视觉稿交出去前自己做一些色彩的校验。

Inclusive design toolkit 官网有专门的模拟软件。设计师可以通过该软件模拟不能视力状况下的用户之所见,可以调节严重程度。还可以上传自己的图片进行模拟。

视力设计:如何为弱势群体做包容性设计

结语

如果把好的UI比喻成一个优秀的人,他聪明能干(可用性),美丽大方(美观性),但还有非常重要的一个品质不容忽视,那就是他需要正直善良,一个正直善良的产品应该是包容的。包容的界面不仅让弱势群体能够很好的使用,让主流用户用起来也更加地惊喜,何乐而不为。

本文有自己对包容性设计的理解,也总结了当包容性设计成为一种设计方法时是如何运用的:从“视力”这种能力出发,枚举常见的几种视力问题,再从问题出发结合设计元素(文字,图形,颜色等)给出了三方面的设计建议:增加可识别度、合理运用颜色以及集中布局相关联的内容,从而达到让界面更包容的目的。包容性设计是一个开放且有趣的课题,与它接触从研一遇见我的导师董华教授开始,感谢董老师让我在学校的三年过得充实且有趣。

想要了解更多关于包容性设计的同学请参看:http://www.inclusivedesigntoolkit.com

 

本文由 @点融设计中心 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/26611/

(0)
CatherineCatherine
上一篇 2017-05-15 07:35
下一篇 2017-05-15 09:13

相关推荐

  • 用户体验设计影响力,引起两会代表关注

    现今,用户体验设计已成为社会广泛关注的话题,在今年两会上,用户体验设计的影响力也引起了两会代表关注。设计创新与科技创新互为表里,需要协同发展;从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。叶友达委员在接受《人民政协报》采访时指出,据国家知识产权局发布的报告显示,2017年发明专利申请量138.2万件,同...

    2018-03-16
  • 走进交互设计——感受生活中的交互设计

    交互设计交互设计(英文Interaction Design, 缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立的…

    2017-08-01
  • 内部教程|6步透视网易设计规范(附规范PDF下载)

    LOFTER这份精而美的设计规范,页数不多,但每页都是经过三思后得出的总结,推荐一看。

    2017-05-20
  • 交互设计中的“无意识错误”:如何帮助用户防错?

    在提高可用性的建议中,如何优雅、清楚的告知用户哪里出错了是非常重要的。当然,如果能够一开始就避免他们犯错是最好的。在讨论用户错误时,一个重要问题是在什么情况下指出用户的错误。「用户错误」这个词似乎暗示用户做错了某些事情,但不仅如此,设计师也犯下了错误,因为他们让用户轻易的做出了错的行为。所以,解决用户错误的方法不是指责用户,让用户再认真一些,或者给他们更多的指导练习,而应该是重新设计软件,让犯错变得困难。两类用户错误在讨论如何避免犯错之...

    2018-03-02
  • All You Need To Know About Customer Journey Mapping

    “Stories have defined our world. They have been with us since the dawn of communication, from cave walls to the tall tales recounted around fires. They have continued to evolve, with their purpose re…

    2015-01-16
  • 如何从零开始临摹大神的作品?

    在我们探讨设计原理的核心之前,我们需要明确构成视觉语言的5种元素。线段在动态设计中是点的集合。线段生成了运动,吸引我们的眼睛去跟随它的运动轨迹。线段可以是直线、曲线、虚线或粗细变化的线,它是构成形状的基本元素。

    2017-05-22
  • 从Surface Studio聊一聊实体设备上的交互细节

    相信小伙伴们这两天的朋友圈基本躲不过微软大法的霸屏。作为工业设计背景的我,也是被它深深地impress到。所以今天我想来聊聊,实体产品上的交互体验。Handles are better for continuous control (e.g. trombone)
    “手柄”对于连续性的控制更加合适。
    Buttons are better for discrete control (e.g. piano keyboard)
    “按钮”对于状态有显著区别的控制更加合适。
    Handles leave you in control (e.g. opening a car door).
    “手柄”是将控制交付于用户手中。
    Buttons are more likely to trigger something automatic (e.g. opening an elevator door).
    “按钮”更倾向于触发一个自动化的过程。

    2017-05-16
  • 有奖励的互动提高用户参与性

    奖励点燃我们的动力。奖励让我们知道我们正在做正确的事情,并使我们继续探索学习新东西或者实现一个目标。 用户收到的一个不经意的变量奖励会更有效,因为人类渴望可预测性。 我们到处寻找规律,试图理解这个世界。 …

    2015-01-12
  • 聊聊Axure RP 8 的动态面板(文末赠书)

    点击上方“蓝字”关注本公众号《Axure RP 8入门手册》本书的写作初衷是面向初学者,由浅至深地引导读者学习Axure RP 8.0的使用方法,从而实现最终的学习目标。本书不但适合初学者学习,在知识结构与案例的安排上,也非常适合工作中的查阅与参考。初学者只需要按照从前至后的顺序进行学习,就能够迅速、全面地掌握原型开发技能。具备一定原型开发基础的读者,也能够在本书的大量案例之中,获得各种实战的参考。书中的案例均为网站或App中采用的一些...

    2018-04-09
  • 你离互联网产品经理,只差一句自我肯定!

    从2014年开始,伴随着越来越多产品人转岗心路历程的分享,产品壹佰为此专门开辟专栏,记录了他们这一段学习路程中的点点滴滴。他们之中,有对未来茫然无措的大学生、不甘于现状的互联网从业者、郁郁不得志的传统行业人、孤立无援的产品新人以及举步维艰的创业者……在他们的诉说中,有着转岗前的不安、惶恐,也有刚转岗成功的喜悦、激动,更有成为产品经理后自我知识的输出!分享!如今,这些记录成长历程的人儿们如疾风般快速的蜕变着,梦想实现,更幸运的是,其中的出...

    微信热点 2018-03-10