为色盲用户做的电商设计

寻求色彩和体验的平衡点

世界上7%的人口是色盲。在UI中,色盲可能以为颜色无法很好的理解那视频,图像和图表。

什么是色盲?

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

色盲的原理

锥体是人眼中感光细胞的一种,它负责感知颜色。有三种类型的锥体 - 每个分别负责检测光谱中的红色,蓝色和绿色波长。当这些细胞有缺陷或完全缺失时,就会出现色觉问题。通常情况下,这些情况是从出生时父母遗传的,也可能是通过创伤:长时间暴露于紫外线,随着年龄的自然变性,糖尿病的影响或其他因素而造成的。

常见的色盲类型

两种最常见的色盲,畸形眼和远视眼是与性相关的特征,男性比女性更常见。最常见的畸胎性发生在男性中的几率有7%,但女性中只有0.5%。那么,困惑?全部人口的8%是色盲,所以我们不能忽略这部分人群。

作为设计师,我们的责任是确保我们的设计对于大众众是色彩可感知的和用户友好的。

1.使用常用的颜色名称

对于有色觉缺陷的人来说,最令人讨厌的体验之一就是产品颜色与产品无关。在这种情况下,说明中提到的颜色名称通常是对色盲用户有帮助的。但是想象一下,如果提到的颜色是 - “Damson”,“Blush”,“Olivaceous”,“Woodrush” - 这些名字有多少人能够理解?实际上,这些名称并不是我捏造的,这些名称实际上是我在少数电子商务应用程序中找到的颜色名称。

通过在产品描述中清楚地标明颜色名称,帮助色盲用户更容易做出决定。

话虽如此,好的网站和应用程序尽量使用通用命名颜色进行描述。 “淡粉色”或“深蓝色”是描述衬衫产品颜色的最好方式。

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

另一个常见的问题是有一个彩色过滤器,但没有标签!这里有一个众所周知的电子商务网站的例子,它有彩色过滤器,但没有标签。另一方面,我也展示了一个红色色弱的用户对这个网站的体验。

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

虽然这似乎是一个好主意,但记住:并不是所有访问该网站/应用程序的人都属于同一类的色盲患者这很重要。对于视力正常的用户来说,在过滤器中看到颜色名称也是一种很好的体验。当客户想要尽可能快速和平滑地查看搜索结果时,移除色样会导致颜色决策减速。

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

3.避免以颜色为基础传达信息

设计表单是强制输入字段的一种常规设计手段。或者,如果用户试图在未填写必填字段的情况下提交,则输入字段的边界将变为红色,表示错误。但是,我们必须明白,并非所有用户都能看到红色。

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

这里有几种表示处理表单中必填字段的方法

用星号标记必填字段。
更好的是,标记必填字段,标签为“必填”。
在可能的情况下,完全删除可选字段。

不仅仅是表格,还包括警报信息。我们通常倾向于分别显示成功和失败信息为绿色和红色。但是,使用诸如“成功”或图标等标签文本可以帮助用户快速方便地阅读,如下所示 -

4.低对比度设计困扰着网络

低对比度的文字可能是最近的流行趋势,但它真的不仅对于色盲用户来说可读性很差,不易察觉,很难辨识的;而且对于正常的视觉用户也是不理解的。相反,我们应该考虑更多可用的替代品。

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

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

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

确实,如果你没有受过色觉缺陷的困扰,很难想象色盲眼中的世界。这就是我们为自己建立内部工具的原因 -CanvasFlip colourblind simulator。几个星期前,我们将它发送给了全球的设计师。这个想法是弥补设计师和色盲使用者的经验之间的差距。

在设计开始前,检查你的设计是否值得预先解决任何潜在的问题,以及进行最后的检查。

结论

优化色彩盲目用户访问我们的网站的体验实际上很容易。我们只需要有意识地去思考,遵守指导方针。使用色盲模拟器来帮助确定页面上的颜色如何影响整体体验通常会很有帮助。



原文链接


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,830评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,992评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,875评论 0 331
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,837评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,734评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,091评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,550评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,217评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,368评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,027评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,623评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2 341

推荐阅读更多精彩内容

  • 寻求色彩和体验的平衡点 世界上7%的人口是色盲。在UI中,色盲可能以为颜色无法很好的理解那视频,图像和图表。 什么...
    尼克努努阅读 466评论 0 0
  • 译者心得: 也许是因为我在视觉设计上没有太多经验,我发现平常在与视觉设计师讨论设计方案时,我们常常讨论的是:“我觉...
    ux2017阅读 2,008评论 1 33
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,566评论 18 139
  • 当你喜欢他不敢告诉他,又想让他知道。 我是安安。上高中喜欢一个男生,刚开始没注意他,没有觉得他挺帅挺好,到了下学...
    糖果安梦阅读 377评论 1 1
  • 原文:Gradle, the Applidium way 让我们继续谈论android生态中的Gradle Gra...
    小武站台阅读 18,485评论 6 36