色彩和体验的平衡:为色盲用户设计网站

如何为色盲用户设计网站?本文作者与大家分享了5点小技巧。WCAG 2.0级AA要求正常文本的对比度为4.5:1,大文本的对比度为3:1(14点和大于或大于18点或更大)。——WebAim颜色对比检查器

如何为色盲用户设计网站?本文作者与大家分享了5点小技巧。

色彩和体验的平衡:为色盲用户设计网站

色盲影响世界7%的人口。在浏览网页时,这种情况让色盲用户无法了解不断涌入的视频、图像和图表。

什么是色盲?

色盲不并意味着人们根本看不到任何颜色,或人们看到的一切都是灰色。它实际上是降低了人们辨别颜色的能力。

色盲科学

视维细胞是人眼中负责感知颜色的一种感光细胞。视维细胞有三种类型——视维细胞分别负责检测光谱中的红色,蓝色和绿色波长。当这些细胞有缺陷或完全不存在时,就会出现色觉问题。通常情况下,这些病症是从父母身上遗传,但也可以通过外伤,长时间接触紫外线,随着年龄的自然变性,糖尿病等因素的影响获得。

常见类型的色盲

两种最常见的色盲类型,绿色盲和红色盲是性别相关的特征,在男性中比女性更常见。绿色盲是最常见的,7%发生在男性中,只有0.5%的女性。色盲占整个人口的8%,这是巨大的且不能忽视的。

作为设计师,我们的责任是确保我们的设计为更广泛的受众提供色彩的可访问性和用户友好性。

如何为色盲用户设计网站

1. 使用常用的颜色名称

对于有色觉缺陷的人来说,最令人讨厌的经历之一就是与产品颜色不相关的颜色。

在这种情况下,说明书中提到的颜色名称常常有帮助。 但是,如果所提到的颜色是“黑紫色”、“淡红色”、“橄榄色”,这些词有多少人了解呢?

实际上,在几个电子商务应用程序中我找到了这些颜色的名称。

色彩和体验的平衡:为色盲用户设计网站

通过对产品的描述,明确说明颜色名称,可以让色盲用户更容易做出决定。

话虽如此,好的网站和应用程序尽可能的普遍地保持颜色描述。“浅粉色”或“深蓝色”衬衫是描述产品颜色的更好方法。

色彩和体验的平衡:为色盲用户设计网站

2. 使用色板和标签的组合

另一个常见的问题是滤色镜未标记!以下是一个众所周知的电子商务网站的示例,其中包含了为标记的彩色滤镜。另一方面,我也反映了一个有红色弱视问题的用户体验网站的方式。

色彩和体验的平衡:为色盲用户设计网站

这个问题的另一种方法是列出过滤器中颜色的名称。

色彩和体验的平衡:为色盲用户设计网站

尽管这似乎是一个好主意,但重要的是要记住,不是所有访问该网站/应用程序的人都是同一类别。对于具有正常视力的用户,当他们看到过滤器中的颜色时,这是一个很好的体验。当客户只想尽可能快速顺利地查看搜索结果时,去除色板可能会减慢选择颜色的相互作用。

最佳解决方案包括色板和常用颜色标签的组合。WarbyParker网站的眼镜就是一个很好的例子。

色彩和体验的平衡:为色盲用户设计网站

3. 避免在颜色的基础上传达信息

设计表单时的常见做法是以不同的颜色标记强制输入字段。如果用户尝试提交没有填写的必填字段,输入字段的边框将更改为红色,表示错误。但是,我们必须知道不是所有的用户都以同样的方式来体验颜色。

色彩和体验的平衡:为色盲用户设计网站

因此,在这种情况下显示一个错误符号,或者有一个支持错误调用的标签是非常重要的。

色彩和体验的平衡:为色盲用户设计网站

下面是几种表示形式的强制字段的方法

  • 将所需字段标记为星号。
  • 更好的是,标记必填字段,标签为“必需”。
  • 尽可能地删除可选字段。

不仅仅是表单,提醒消息也是。我们往往倾向于将成功和失败的消息分别显示为绿色和红色。但使用诸如“成功”之类的前缀文本或图标可以快速轻松地阅读,如下所示:

色彩和体验的平衡:为色盲用户设计网站

4. 低对比度的设计正在困扰网络

低对比度的文本可能是时尚的,但它也是难以辨认且不可发现的,不仅是对颜色有偏差的用户,对于正常的视力用户而言都是不可接近的。相反,我们应该考虑更多可用的替代品。

色彩和体验的平衡:为色盲用户设计网站

低对比度的网页

WCAG 2.0级AA要求正常文本的对比度为4.5:1,大文本的对比度为3:1(14点和大于或大于18点或更大)。——WebAim颜色对比检查器

在低对比度项目中使用粗体文本增加可读性,避免使用非常薄的字体。阻止用户使用鼠标突出显示页面元素或更改默认高亮行为,不要使用任何JavaScript或CSS技术。许多视障人士利用突出显示作为增加对比度和辅助视觉焦点的快速技巧。

5. 让色盲用户体验你的设计

这是真的,如果你没有色觉缺陷,很难想象它是怎样开起来像色盲。这就是为我们自己构建内部工具的原因——CanvasFlip colourblind simulator。几个星期后,我们为全球设计师发布了它。这个想法是弥合设计师与色盲用户的经验之间的差距。

这是值得你检查自己的设计,抓住任何潜在的问题,并在设计开发之前进行最后检查。

色彩和体验的平衡:为色盲用户设计网站

尝试工具——CanvasFlip colourblind simulator模拟器

结论

实际上很容易让色盲用户访问我们的网站。我们只需要有意识地努力去思考和遵守指导方针。使用色盲模拟(colorblindness simulator )器来帮助决定页面上的颜色如何影响整体体验通常会有所帮助。

 

原文地址:https://uxplanet.org/designing-ecommerce-for-colourblind-users-1ffd648c9f91

原文作者:CanvasFlip

译者:SKYUI

本文由 @SKYUI 翻译发布于人人都是产品经理。未经许可,禁止转载。

题图来自 摄图网,基于 CC0 协议

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

(0)
CatherineCatherine
上一篇 2017-08-02 16:41
下一篇 2017-08-02 17:40

相关推荐

  • 双11的电商设计风格:5个角度分析天猫视觉页

    天猫官方的双十一预热页面刚刚上线,本文作者就帮大家分析双十一电商设计的流行趋势,包括场景、配色、角度、标题、辅助性元素等。干货+趋势,绝对值得一读!

    2017-05-17
  • 分身乏术?来学学交互设计的优先级判断与排期协同

    在被密集需求轰炸(需求本身都具备一定合理性,不包括那种应该拒掉不接的需求),同时自己还有一堆想自发驱动去做的事情时,交互设计师该如何进行合理的设计优先级判断,分解需求排期推进呢?来看今天的实战经验!

    2017-05-23
  • 产品经理如何有效学习产品课程?

    很多想要成为或者刚刚成为互联网产品经理的人会自己学习一些大牛分享的课程,阅读一些推荐书籍,但是学完之后经常会有好像很有收获但是却又不知道收获了什么的感觉,产品经理如何有效学习产品课程呢?以下是我自己在进行产品学习时的一些经验。1、多体验产品一个好的产品经理首先自己一定是一个好的用户,只有多体验产品,多思考产品背后的设计理念和价值,自己才能设计出优秀的产品。我们公司有个资深产品经理,他设计的产品日活已经上亿,公司当时还奖励公司员工每日一盒...

    微信热点 2018-03-06
  • 即将开课!6周,快速玩转axure,同时提升产品和交互能力

    前段时间,一位朋友因为原型不太过关,被老板委婉提醒了。我这位朋友的状况不是特例,原型是产品经理最基础的技能,如果不过关,后果太可怕了!最后给老板留下的印象:这人产品能力不行,每天加班就为改原型,产出太低。想成为靠谱、高薪的产品经理?第一步得提高Axure原型能力!起点学院&腾讯课堂联合打造给产品经理的Axure课程已有1868位同学学习,学习效果显著Axure零基础也能学,学完画出规范原型产品思维和交互贯穿全程,学完告别画图经理通过6周...

    2018-04-08
  • 交互新人,请不要再犯这几个错误了!

    不知不觉,我已经正式在交互设计的路上越走越远,了解得越多,就觉得交互设计需要学习和掌握的知识越多;同时犯的错也会越多。然而犯错并不是一件坏事,怕的是犯过的错误不能够被积极地思考,我们不能及时把错误化作成长。根据目前我的一些浅薄经验,总结出了交互新人往往容易犯的一些错误,以及关于错误的一些思考。

    2017-05-22
  • UED内功心法口诀篇

    本文约5000字,阅读需15分钟本篇思想可能给你带来的价值何为UED?在产品定义阶段,它是一种关乎如何解决问题的思维模式,在产品迭代期,它又是一种关乎如何思辨方案真实体验水平的科学验证。更具体一点,到底是什么样的思维模式和科学验证,近一年的时间我们通过大量案例逐渐将其解构出来,并将导图成“UED内功心法”,期望能够帮助交互设计师在具体实操过程中有的放矢,更有针对性地发挥设计的价值。心法口诀第一式:目标用户锁定招式1:找出契合业务的目标族...

    2018-02-02
  • 马化腾:用户体验,比一切事情都大

    企业快速成长中,第一个大问题就是战略。/演讲|马化腾来源|笔记侠(ID:Notesman)我非常希望也很高兴在这个平等氛围中,以创业者的身份跟大家进行这样一场交流。在座的创业者,很多拿到A轮、B轮,有些在走向C轮。企业快速成长中,第一个大问题就是战略。创业最难的就是选准创业的点,你会面对很多机会、很多诱惑,需要不断做出选择。自腾讯初创开始的六七年,是我们变化最快的时期,我想把这个时期包括战略选择等方面的经验跟大家分享。一、关注痛点你出来...

    2018-02-16
  • APP动效交互|切换动画设计

    功能性的动画微妙,清晰,逻辑清楚,能够减轻用户认知负担,建立更好的人机交互体验。而且,它还可以赋予界面生命力。

    2016-07-14
  • 一个应届的交互设计毕业生应该具备哪些能力?

    作者:马力 @ 可能性与大设计   ( 上图来自Elizabeth Bacon ) 首先说,很多专业的同学都可以做交互设计(还有视觉设计,产品设计等等),既包括设计相关专业,如工业设计、建筑设计、园林设计等,也包括完全和设…

    交互专题 2017-08-07
  • 网友吐槽,各种“小玩具”用户体验很失败!

    据说关注了「没完没了官方」很多人丁丁变大了女票更黏人了一夜3次也不累了好像前几天曼曼更新的那篇硅胶娃娃一样大家一定也经常听说各种小玩具但是真正体验过的其实很少今天曼曼总结了一些网友的用后评价(来源:某博,某宝评价,某圈)『蝴蝶』听到这个名字,应该都很陌生大概就是一种带振动摩擦感的小东西配有蓝牙功能是为了在户外制造情调用的大概就是女生提前塞进去到了户外通过蓝牙控制振动从而达到一种刺激感实际上内.裤和小妹妹之间的空隙很小根本放不了这个玩意儿...

    2018-03-14