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

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

相关推荐

  • APP常用导航总结

    虽然我承认导航这种东西在现在的app非常常见,但是实际上,这种东西也不是必须存在的。如果应用够轻,比如雅虎每日新闻News Digest就不存在导航这种东西。只有当app的架构扩大到一定的程度,当内容繁杂到无法展示在一个页面中,这时候才需要用到导航。

    2017-05-31
  • 用户体验三大评估指标优劣势分析:CSAT、NPS和CES

    作者:TASKUS |  翻译:Cecilia喵酱(在魔都破壳的用盐新人),校审:Baozhu如今市面上有很多不同的用户体验(抑或客户体验、服务体验等)评估标准,我们要如何抉择?用户满意度(CSAT)是B2C企业的一个关键绩效指标,然而现有的用户服务评估标准很多,让人很难分辨哪一种是评估用户真实感受的最佳方法。此文会帮助你了解目前最流行的评分系统的利弊,从而帮助你做出选择。用户满意度(CSAT分数)CSAT是一个广义的概念,描述了许多不...

    2018-02-03
  • 长大的用户体验不好,想退货了

    来都说:本周,小编的桌上多了一盆仙人球,世界各地还发生了这些小事情:钻石兄弟情、无声面包店、「自杀式」教学、午夜「决斗」、从天而降的小女孩、我明白得有些晚、长大的用户体验……01钻石兄弟情近日,美国印第安纳波利斯市一处停车场内,一位 80 岁的老爷爷遭遇抢劫。由于行动不便,拄拐杖的老爷爷只能任凭灰帽衫劫匪的摆布……这时,一个身影冲过来,朝着劫匪的后背就是一拳,劫匪被打得踉跄了几步,脑袋也有点蒙了。这个身影是 80 岁老爷爷的哥哥,今...

    2018-04-13
  • 如何在界面设计中“色”诱用户?

    在设计过程中,如何最佳地搭配颜色,诱导用户视线?是不是在为图标选择什么颜色而烦恼,反反复复地尝试,总不能达到想要的效果。是不是总在羡慕“别人家的设计”,而苦于无从下手?其实所有的颜色都有些小规律,今天@Micu设计 就和大家聊一聊“色”。

    2017-06-05
  • 深入智能商业用户体验 —— 艺土咨询(ETU)

    4月10日下午,本协会会长王日华和副秘书长王索飞等一行前往位于长宁区凯旋路166号上的本协会理事单位上海艺土界面设计有限公司走访,该公司董事长林钦、资深用户体验设计师梁雯琦热情接待了王会长一行。在该公司的会议室,林总首先用PPT形式向王会长一行简单介绍了艺土公司的发展情况。她说,艺土(ETU)自2004年成立以来,深耕用户体验行业14载,通过与160多个知名企业进行760多个项目的深度合作探讨,帮助企业通过洞察市场价值、理解用户价值需求...

    2018-04-12
  • 【交互】浅析交互设计

    点击上方"人人都是产品经理"可以订阅哦由于在工作中会经常探讨交互该怎么做以及如何做出高效的交互,今天就整理下自己的思路,和大家一起探讨下交互其实分为两种:一种是酷炫的动效,一种是隐形的操作反…

    2017-08-04
  • 朋友圈最近上来几个广告,导致我的朋友圈被讨论轰炸,那么朋友圈的交互设计解析你有兴趣看看吗?还有,朋友圈已死!

    1. 朋友圈的印象 2. 设计上的体现 3. 浅析设计背后原因 4.不足点分析 5.我们向微信学习什么  

    2015-01-26
  • 2018年用户体验趋势(二)

    2017年,我们见证了很多。在与全世界的189489位设计师策划并分享了1926条链接后,我们从行业内的所写、所说和所想中,预见了几个趋势。以下就是2018年用户体验的预期。#4每个界面都是一个故事设计世界中的讲故事和写作从未如此现实过。随着客户的体验旅程越来越碎片化,我们要确保在不同渠道中讲述连贯的品牌故事,并且这些故事清晰、有趣、富有人性。有段时间,大概是几年前,我们听说过显微术语。但是到了2017年,业内人士发现,不仅要重视在设计...

    2018-03-02
  • 交互设计牛校排行榜 | 纽约大学ITP研究生项目

    Create Your Difference. by CYDWHO ARE YOU?Do you love biology but also love your art classes你是否热爱生物,也沉醉于艺术and want to merge the two所以想把这两者融入Do you love programming but also like to make things你是否能编程序,也想做出真实的东西Are you int...

    2018-05-06
  • 两会唤醒全民关注用户体验

    聚焦2018年全国两会,共有13位人大代表和政协委员提倡在相关领域内发展与提升用户体验,范围遍布于新能源汽车、互联网、通信、教育科研、传媒、版权保护、交通运输与医药等数十个行业,引起了社会各界的广泛关注。两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。叶友达建议,从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。同时要加大对基于用户体验的设计创新的宣传力...

    2018-03-28