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

如何为色盲用户设计网站?本文作者与大家分享了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

相关推荐

  • 全面掌握算法交互设计,你的设计你做主

    在OF COURSE学习最纯粹的创意编程Processing生成艺术进阶课程全面掌握算法交互设计12周成为顶尖设计师👇△课程介绍《Processing&OF算法交互线上课程》你将要学习的第一部分:培养算法创造能力,学习运用高级算法模拟真实环境中的自然变化。第二部分:理解并掌握算法交互的原理。第三部分:培养软硬件结合能力,学习使用手部识别设备Leap motion、体感识别摄像头Kinect和算法的交互。第四部分:运用openCV计算机图...

    2018-04-08
  • 当戒指也走向智能化

    小编导语:这是这是一个不错的创新产品设计,特意推荐给大家看看哦。 这款叫做 Smarty Ring 的智能戒指使用了防过敏不锈钢材质,宽 13mm,厚度为 4mm,黑色给人一种酷炫高冷的感觉。 它不仅可以当手表使用,而且它…

    2015-04-11
  • 课件界面交互设计

    交互的概念我们将交互定义为具有信息处理功能的两个实体或对象间信息传递和反馈的过程。具有信息处理功能的实体或对象是指那些在功能上能够完成对信息的接收、处理和发送实体或对象。交互本质上是信息传递的过程。由于交互总是由某一实体或对象出于一定目的引发起来的,所以我们还可以认为交互是一个具有信息处理功能的实体或对象基于解释为定目的对另外一个具有信息处理功能的实体或对象发送信息并得到反馈信息的过程。(孙海民,2005)。一、人机交互概念人机交互是指...

    微信热点 2018-03-01
  • 未来设计师应该是数据艺术家

    未来设计师应该是数据艺术家 人类正进入数字化时代,虚拟世界里充斥着海量的数据,各种各样的数据。在此背景下,Mark Rolston认为,软件产业将需要新型的设计师:数据设计师,一种精通数据的意义、形式、移动与转换…

    2014-12-01
  • 如何在页面上减少用户操作

    作者:柒0   最近有同事在公司反馈:“有用户说xx流程、xx流程太繁琐了。”产品经理反驳:“怎么可能,我已经对标过业内很多体验很好的app,流程上的步骤我敢保证我们绝对不比别人多。” 作为“好事”的交互,我决定走查…

    交互专题 2017-08-07
  • AB测试告诉你,你以为的设计不是你以为的设计。

    用户体验设计不是忽悠,也许5分钟口水攻势能让前台小妹觉得你的设计非常高大上,但是要让每一个用户对着屏幕上的UI欲罢不能以身相许还需要数据支撑。

    2016-08-29
  • Banner设计之平面构成的奥秘

    我之前说过要写一系列专门针对电商的三大构成的文章的,而在上篇文章中我已经给大家梳理了一篇关于色彩的文章:六个步骤细说电商banner图设计之色彩的奥秘,那么今天呢,我就接着要给大家讲一篇关于平面构成的文章好了。

    2017-05-19
  • SKETCH | 周鸿祎自述:我的价值观

    在这本书的开头,我想讲讲影响我价值观的电影和书。说到价值观,有的人可能要笑了:都什么年代了,还讲价值观?虽然这本书的书名是《我的互联网方法论》,但这并不是按图索骥的说明书,你如果认为读完本书,就会做产品了,就能向互联网转型了,对不起,真的是做不到。赵括把兵书读了千百遍,在纸上推演了千百遍,到了实际的战场上,还是一个输。因为无论是做互联网产品,还是传统企业向互联网转型,能不能做得成,是看你能不能创新。而能不能创新,除了你的技能、阅历、领导...

    2018-04-26
  • 交互师们,每日高效的一天开启了吗?看看别家的交互怎么过今天~!

      编者按:教你高效利用工作时间!今天的主角是曾经在美国雅虎中国腾讯工作现在在华为人设计总监的尤原庆同学,他分别列出了自己在美国、德国和中国的交互设计工作,全都井井有条且轻重得当,最后还附上设计师…

    2014-11-26
  • iOS App中数据加载的6种方式

    我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态。那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以轻松自在的享受等待,对加载后的内容有明确的预期呢?今天这篇文章,会介绍6种常见的加载模式设计,和3种减少等待感的具体手法,希望对追求极致体验的产品人有帮助。

    2017-06-02