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

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

相关推荐

  • 超级干货:75条界面版式设计准则

    一个好的界面设计应该拥有高转化率且方便用户使用,换句话说:既能达到商业目的又能满足方便易用的要求。 有一个设计咨询公司根据自己的客户案例,总结了 75 个经过实践证明的原则: 1. 使用单栏布局代替多栏布局 …

    2016-07-14
  • 高保真原型的这几个秘密,你知道吗?

    这不是一篇关于“怎么做高保真原型“的文章,也不是一篇关于交互规范的文章,这篇文章对于交互新人或者想作一些改变的互联网从业者有些许帮助。

    2017-05-23
  • 如果想做好产品,你懂人性心理吗?

    来源:市场部 作者:IT精英 众所周知,产品研发的过程除了必备的资源配给外,都离不开人的参与,需要有客户,需求分析人员,开发人员,测试人员等角色参与其中,才能使一个产品研发的过程顺利开展。既然离不开人的…

    2014-09-21
  • 2018年移动端用户体验设计趋势

    在移动应用领域,事物正飞速发展。要想在用户体验设计领域获得成功,设计师必须有远见,并为即将到来的新挑战做好准备。为了简化这个任务,我列出了2018年最重要、最有影响力的趋势,而且很有可能远不止如此。1.简化用户的使用流程当我们与应用程序或网站互动时,我们有一个特别的目标。通常,我们花在实现这一目标上的努力越少,体验就越好。线性用户使用流程线性用户体验设计指的是一种带有特定的开始、过程和结束,并且可以让用户在每一步完成一个动作的用户体验设...

    2018-02-01
  • 交互设计文档怎么写? | 设计基础05

    摘要交互设计师的工作虽不只是画交互稿子,但是好的交互稿不仅能够完美阐释产品内容和设计师的设计思路,还能够在项目各方协调工作中起到重要作用。保证完整的呈现产品需求和设计思路的交互稿,能够让各方工作人员…

    2017-08-04
  • 小白学Axure,这样学更高效,还能提升产品交互,更容易拿高薪

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别让Axure阻碍你的高薪产品路!别等面试时,才发现自己掌握不够。“起点学院&腾讯课堂”联合打造6周Axure实战班,第6期开启报名!从第1期到现在,1400多位同学学习成长,好评如潮。花3-5分钟了解,很快Axure对于你,就不再是问题。(真诚地说)先来看看学习效果全程实操,学完高效制作原型,做出高保真认真学完,原型效率提升,更...

    2018-03-04
  • 设计的三个层次,帮你重开情感化设计的大门

    我们正在进入一个信息复杂度远超以往的时代。我们所面对的是一个物质和信息都极大丰富的世界,从产品竞争的角度上来说,越来越激烈的对抗和冲击是必然的。许多产品已经从单纯的“谈配置”过渡到了“谈感情”的阶段,情感化设计已经在不同的设计领域中崭露头角,甚至成为了最核心的组成部分。

    2017-05-15
  • IAMUE经验分享-APP关于登录 与 注册引起的思考

    1. 何时会触发登录与注册 A. 第一次打开,启动页滑动结束就触发登录与注册 页面没有返回button 根据产品阶段,或强调注册或强调登录 点击注册button,注册页面从右向左进入,左上角是返回icon 如IN 脉脉 注册时的,…

    2015-09-22
  • 交互设计七大定律之席克定律

    最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从标准——交…

    2015-08-27
  • 交互设计之寻求设计需求点

    交互设计师如何进行设计需求分析?首先看交互设计的职责,协助产品经理进行需求分析,进行交互稿绘制,与视觉设计师对接。交互设计必须懂得进行需求的分析,不仅仅是用户需求,还有业务需求的分析,也就是来自产品的诉求,企业做这个产品的目的是什么。因此一个方案如果不能满足业务需求、用户需求和一个好的用户体验,那么它就不是一个好的方案。在这篇文章主要介绍的是如何进行需求分析和关键因素分析,找到设计的需求点。在这里主要分为了四个步骤:分析业务需求、分析用...

    2018-04-30