无障碍 on Victor42

老年用户的体验思考

hi@victor42.work (Victor42) — Sun, 09 Jul 2017 01:08:45 +0000

[国外设计第177期]

吸引老年人作为用户群体的一部分，这曾经被认为是互联网世界中最后需要考虑的事情。但是，这种罕见的情况正在成为现实，我们见证了老年用户群体持续不断的增长，他们经常登录、注册和订阅。Statista的记录显示，光是在美国境内，2016年就有64%的老年人在线，这个数字在2013年的时候只有4%。

尽管数量在增长，老年用户群体在人口统计学中，仍然属于用户体验的不毛之地。如果用户体验从业者不将老年用户纳入考虑，就会疏远这个整个群体，把他们从在线体验中排除出去：这情况可不乐观。

通过加大UI元素、使用颜色强调重要内容、进行适当的用户测试，遵循这些最佳实践，可以做到为老年用户定制网页设计。

保证界面适合阅读

文字：越大越好

首先要考虑文字和屏幕本身的尺寸，确保用户界面清晰可辨。不像我们UX设计师，并非每个用户都有高分辨率的显示器，未必对眼睛友好。对于60岁以上的用户，小号文字真的会让人抓狂。如果你想要定位老年用户群体，界面正文字号不要小于12磅。

有时候用户会选择调节浏览器本身的字号。但是多数时候，这样只是放大了整个页面，这就会产生功能和显示问题。要避免让用户去手动设置字号。

而且，要把信息分解为更小的部分，通过留白分隔，就不会在局促的空间里塞进大量文字，使用户感到眼花缭乱。

调节颜色和对比度达到最佳可见性

当设计师忽略颜色规范时，用户体验就会崩塌。界面中的颜色和对比度帮助用户确定哪些元素对应哪些任务，掌握自己当前处在网站的什么位置，并且知道哪个词语可以通向特定的页面。比如说，不带链接的文字就要避免使用蓝色——深蓝色是网页链接约定俗成的标准用色。

而且，如果未访问和已访问的链接在颜色上没有区别，他们可能很难回到之前去过的地方。这对所有用户都有影响。不过，老年用户更难记住自己访问过网站的哪些部分，可能会浪费时间反复操作，然后又回到原点。

使用用户熟悉的语言

Nielsen Norman Group的Jakob Nielsen指出，不是所有设计师都会阅读自己设计出来的网页，因此就不会去思考人们阅读它所需的努力。

为老年用户设计网页时，要考虑展现信息的方式，他们听力不佳或者视觉损伤。WCAG提醒我们，内容必须可被感知，具有特殊障碍的用户仍然要能获取到这些信息。如果视频或音频的内容对于试听障碍者的体验至关重要，就要额外提供副标题或字幕。提供朗读功能，对于需要别人把文字读出来的用户至关重要。你可以尝试使用一个文字转语音（TTS）程序软件，比如说Ivona（它很快会成为Amazon Polly）。

还有，要知道语音学、俚语和双关语对于特定年龄的群体是一项挑战。俚语会破坏用户体验，所以得确保文案迎合受众。避免使用那些会让用户迷惑的行话，坚持使用能够准确表达含义的语言。同理心地图可以帮助你写出对特定目标群体有效的内容。

易于点击

55-65岁的年龄段，手眼协调和运动机能开始衰退，这就使得操作用户界面变得更加困难。对于运动机能逐渐衰退的用户，鼠标是一个特别的问题，因为点击界面目标、在界面元素间移动、响应屏幕上的某个目标，都十分困难。

按Smashing Magazine的Ollie Campbell所说的，要应对这种障碍，就要确保可点击的UI元素足够大（对角线长度至少11mm），并且与其他元素之间距离要足够大（至少2mm）。你也可以尽量减少鼠标点击，如有必要，可以只留一个可点击的元素。

对于运动机能损伤的用户，滚动条同样会导致可用性问题。按住细长的滚动条并执行滚动操作非常困难。而且，对于有阅读障碍的用户，滚动会影响他们的体验，因为在界面移动之后，他们要持续不断地重新找回之前阅读文字的位置。

简化滚动条——无论是外观还是感受。给用户多一些选择（点击滚动条箭头、点击页面自身的可拖动区域、拖动滑块、使用鼠标滚轮、或者使用键盘的上下键）。不过总而言之，还是尽可能避免产生滚动吧。

所幸的是，电脑键盘和移动触摸屏能帮助老年用户跟上时代。因为手指点按的机能退化得比其他机能要晚，许多老年用户更擅长使用电脑键盘和触摸屏。

使UI模式易于记忆，帮助认知

对于任何想要通过UI来完成任务的用户，他们都需要尽可能快和简单地从A点（入口）到达B点（任务完成）。所以清晰的UI导航如此重要。

但对于老年人，UI导航系统还需要更直接地为用户流程提供方便。为什么？虽然我们的长期程序性记忆（记住如何做某件事）能力不容易随年龄增长改变，但我们的注意力在衰退，短期的情景记忆会受损。这就意味着，我们学习新概念的能力会有极限，比方说学习操作一套为年轻人设计的新界面。

应该尝试使用标准的图标和导航模式，例如顶部通栏，能够一眼看到所有选项，或者面包屑导航来引导用户通过几次点击前往特定的位置。这有助于用户习惯各功能所在位置，还有如何在网站上找到它们。

不要隐藏重要信息。保留面包屑导航来引导用户前往网站的相关区域。

还有，要避免出现非必要的链接。这么做可以增加用户的信任，鼓励他们点击链接，前往网站或应用中的重要位置。

了解你的用户基础

要使用户体验更愉快，应该要有一套捕捉目标用户需求的框架。但是，不同的用户成长在不同的科技年代，设计师们永远无法取悦所有年龄层的用户。

怎么解决？做用户测试。

即使设计师们遵循这些为老年用户设计的准则，但真正了解某人如何操作网站的唯一方法，就是做测试。对于老年用户，考虑使用边想边说的方法做定性分析，通过测试，你能看到受试者屏幕上发生的一切。这有助于增进你对于用户认知过程和物理限制的理解，并且确定UI系统的哪些部分需要再调整。

老年用户最大的一个痛点是难以看清和阅读屏幕内容。视觉或听觉障碍，意味着某些老年人要非常费劲地解读网站和移动设备上的内容。通过对你的界面设计进行真人测试，发现真实问题，你就会更准确的知道解决方案效果如何。

考虑使用原型工具来进行用户测试，例如Justinmind，可以实时演示你的设计。这能让你获得即时反馈，知道为何和如何解决设计上的问题——这是定性用户测试背后的原则。

而且，为什不再更进一步呢：把老年人受试者加入到设计过程中，让老年用户掌控自己的在线体验。

总结

老年用户群仍然有巨大的增长潜力。但就像其他任何用户群体一样，老年用户需要我们设计出符合他们需求的体验。随年龄而产生的局限意味着，数字科技中一些常规的吸引用户手段对老年用户不管用。

识别出老年用户的这些糟糕体验，可以避免设计师在设计中犯这些错误。用户测试是很安全的方式，确保你的用户得到他们所需的东西。把老年用户纳入到界面设计过程中，用户体验绝不会差。

作者信息：Emily Grace Adiseshiah

原文链接：http://usabilitygeek.com/ux-design-thinking-senior-citizen-user/

提升色盲用户的体验

hi@victor42.work (Victor42) — Sun, 03 Jul 2016 00:02:52 +0000

[国外设计第138期]

据Colour Blind Awareness的统计，总人口的4.5%是色盲。如果你的用户多数是男性，则这个比例还要上升到8%。人们常常忘了为色盲设计，因为多数设计师不是色盲。本文中，我们提出13条建议来改善色盲用户的体验——这些对视觉正常的用户同样有益。

色盲是什么？

有许多种类的色盲，但最终都能分成这几类：无法清晰辨认颜色、色彩混杂、无法区分特定颜色。

这些问题在特定环境中愈发严重，比如浏览网站。这包括低分辨率显示器、糟糕的光线、小移动端屏幕、远离大屏幕电视而坐。

仅仅依靠色彩建立可读性和可见性，会让网站难以使用，最终影响了阅读和销售。

尽管下面这些建议并不全面，它们确实涵盖了色盲用户浏览网站时遇到的主要问题。

1. 文字可读性

要确保文字容易阅读，它就应该遵循可读性规范，结合字色、背景色和字号：

“WCAG 2.0的AA级标准要求，普通字号的对比率要达到4.5:1，大字号的对比率要达到3:1（大字号是指14磅的加粗或加大文字，或者18磅及以上字号）” ——WebAim色彩对比检查器

下面列举了一些颜色和字号组合，有的达到标准，有的没有：

这表明了颜色和字号的组合形成了怎样的反差对比。(查看大图)

2. 背景图上的文字

背景图上的文字处理起来很微妙，因为图片局部或整张图都可能无法与文字形成足够的反差。

文字没有蒙层，直接覆盖在图片上。(图片来源：Jay Wennington) (View large version)

降低背景透明度能够增强反差，让文字更容易阅读。

文字覆盖在带有蒙层的图片上。(查看大图)

或者，你可以给文字选择一个可靠的颜色，或者加上投影，其他任何符合品牌规范的方法都行。

3. 颜色过滤器、选择器和色盘

下图展示了Amazon的颜色过滤器，可以看到普通人与红绿色盲（分不清红色与绿色）的视觉效果。如果没有描述文字，就不可能从这么多选项中作出区分。

不带标签的颜色过滤器，在红绿色盲看来是完全没法用的。(查看大图)

在用户鼠标悬停时，Amazon展示了描述文字，但移动端上没有这一操作。

在下图中，Gap在每个色彩旁边加上了文字标签，问题得以解决。

带有标签的色彩选择器，红绿色盲使用起来很轻松。(查看大图)

这刚好也对正常视觉的人有益。例如，黑色与藏蓝在屏幕上很难区分。文字标签能让人免于猜测。

4. 缺乏有效描述的照片

下图展示了SuperDry网站上售卖的一件T恤。它的描述是“树叶纹理”，这太模棱两可了，因为树叶可以有许多颜色（绿色、黄色、棕色等等）。

色盲难以了解这件SuperDry T恤是什么颜色。(查看大图)

Jaspe（其实应该是“jaspé”）是指随机的斑点或纹理，所以应该加上这样的特殊说明：“灰绿色树叶纹理”。

5. 链接的辨识度

链接应该容易被发现，不必依赖颜色。下图模拟了全色色盲（看不到颜色）浏览UK Government Digital Service (GDS)网站所见到的画面。许多链接都难以察觉。例如你有没有注意到“GDS team, User research”（标题下方）是链接？

GDS博客在全色色盲眼中的样子。(查看大图)

要发现一个链接，用户只能鼠标悬停，等待指针变成一个手形。在移动端，他们只能点按文字，希望它触发页面请求。

上面带有图标的链接更容易察觉。而那些没有图标的，加一条下划线是个好方法，GDS在文章正文部分正是这么做的：

带下划线的链接更容易被全色色盲察觉。(查看大图)

6. 色彩组合

在现实世界，你无法控制色彩的组合排列：红色的苹果可能掉进绿色的草丛里。但是，我们可以控制网页设计中使用的颜色。下面这些色彩组合应当尽量避免：

绿色/红色
绿色/棕色
蓝色/紫色
绿色/蓝色
浅绿色/黄色
蓝色/灰色
绿色/灰色
绿色/黑色

色盲眼中的色彩组合。(查看大图)

7. 表单的默认文字

没有标签，只用框内的默认文字提示，这是个问题，因为默认文字通常缺乏足够的对比度。Apple的注册表单就有这样的问题，请看下图：

Apple的注册表单使用了不带标签的文字提示。(查看大图)

不建议增强对比度，因为那样就难以区分默认提示和用户输入的文字。

最好还是使用标签——毕竟是最佳实践——对比要鲜明，下图中的Made.com正是这么做的：

Made.com使用了对比度强烈的标签。(查看大图)

8. 主按钮

通常情况下，只有主按钮使用颜色来表现，Argos在它的登录页面就是这么做的：

Argos的登录界面依靠颜色来强调主按钮。(查看大图)

其实应该考虑通过尺寸、位置、粗细、对比度、边框、图标和任何其他手段来辅助——只要在品牌指南的范畴内。例如，Kidly就运用了尺寸、颜色和图标来凸显：

Kidly用了尺寸、颜色和图标来强调主按钮。(查看大图)

9. 警告消息

成功和错误的消息通常各自选用绿色和红色。多数色盲没有全色色盲的烦恼，自然能够把不同的信息与不同颜色联系起来。但是，使用比如“成功”这样的前置文案，或者用我喜欢的图标形式，就能更快更轻松地阅读，就像下图这样：

带有前置文案和图标的警告消息。(查看大图)

10. 表单必填项

Denoting这种用颜色表示的必填项有问题，因为有些人可能看不出区别。

Denoting的必填项用颜色表示。(查看大图)

其实应该考虑这些方法：

给必填项加上星号
更好的方法，给必填项加上“必填”
如果可能的话，把所有选填项都去掉

11. 图表

颜色经常用来区分图表中不同的指标。下图显示了不同视觉能力的人看到的样子。右边的图表对色盲做了优化。

正常视觉者眼中的图表(查看大图)

红绿色盲眼中的图表(查看大图)

全色色盲眼中的图表(查看大图)

使用纹理，并且尽可能加上每个指标的文字，能让图表更易理解。如果文字不合适——通常是小尺寸饼状图的情况——用一个字母就足够了。

12. 缩放

浏览器有一项易用功能，让人根据需要尽可能放大页面。这点能提升易读性，在移动设备上尤其有帮助。

不幸的是，Viewport Meta标签可以禁用缩放，这也是个问题。比如，对于色彩对比度而言，字号可能过小了——放大则能有效增大字号，让文字更易阅读。所以不要禁用网站的缩放。

13. 相对字号

和前一点类似，浏览器提供了放大字号的功能（并不是放大整个页面），也是为了提升可读性。但是，如果字号被指定为绝对单位时，例如像素，有些浏览器会禁用这个功能。应该使用相对字号单位，例如em，确保所有浏览器都能提供这个功能。

工具

有许多工具能帮助你为色盲群体设计：

Check My Colours：如果你有现成的网站，可以输入URL获得反馈，告诉你哪里需要改善。
WebAim的色彩对比度检查器：提供两种颜色，看它们是否符合易用性规范。
I Want To See Like The ColorBlind：在Chrome中对网页应用色盲模式滤镜。
Color Oracle：Windows、Mac和Linux平台的一款色盲模拟器，展示常见的视觉障碍人士看到的画面。

结论

本文中的建议并不全面，它们并非要应用到每个场合中。但是，它们确实涵盖了色盲用户浏览网站时遇到的主要问题。

更重要的是要消化这些原则，这样才能将它们融入到你的设计中。最终，网页并不是仅仅为了好看——而是要易于每个人使用，包括色盲人士。

原文链接：https://www.smashingmagazine.com/2016/06/improving-ux-for-color-blind-users/

作者信息： Adam Silver Adam Silver helps people and companies make the web simple and human. He specialises in UX, Front-end engineering and Strategy. Oh, and he’s also the author of MaintainableCSS which is about writing modular, scalable and maintainable CSS.