包容性网页设计的10条原则

本文的完整版本出现在问题216.net杂志,全球最畅销的网页设计师和开发者杂志 - 现已发售。在这里买!

什么是包容性网页设计?它是关于在整个设计过程中考虑最广泛的人的需求,从概念化到规划,构建和完成。

包容性设计在建筑和工业设计中已经建立,适用于这些学科的原则在网络上同样相关。这是您的网站所关注的人,而不是技术,因此以用户为中心的方法是至关重要的。包容性设计有10个基本原则 - 遵循这些原则,你就不会出错。

1.公平

公平是包容性设计的核心原则,但重要的是要注意公平与平等并不相同。这并不是说每个设备上的网站看起来都一样;它是关于提供不同的用户体验,但具有同样有价值的结果。这可以通过尽可能早地让真实用户参与研究和测试来实现。

拥有每个项目的包容性冠军是理想的,但如果您的资源有限,您可以在团队中分担责任,并请求朋友和家人帮助,以及残疾慈善机构,让您与真实用户联系。

2.要灵活

在你的思维和方法上保持灵活 - 没有“一刀切”。您的用户有很多需求和行为,因此您的团队需要关注为受众群体提供服务的更精细细节。灵活的目标是通过构建不同的结果为您的用户提供选项。

3.简单直观

这是你克制的地方。这不仅仅是“少即是多”的情况;这是一个'当更多不适合时越少越好'的情况。这是关于您的网站将为用户提供的好处以及这些将如何改善整体用户体验。您需要确保每个功能都能增加价值,而不仅仅是复杂性。人们不想知道如何使用您的网站。技术旨在让他们的生活更轻松。

Screengrab of Action for Blind People site

服务,资源和社区是这里的重点,因此这些部分很容易找到并相互链接

4.明白

一个人认为可以感知的东西对另一个人来说可能是不可理解的。了解这一原则的最佳方法是不假设:假设您的网站是您的用户访问过的第一个网站。回想一下你在学校的时候,对于一些孩子来说,当只有一种教学方式时,他们会感到多么沮丧。易感性是相对的:有些人记忆,有些情境,有些可视化,有些需要冲洗和重复。可感知的是考虑各种方式来传递信息和相应地建立您的网站。

5.提供信息

提供信息是通过以适当的方式和适当的时间提供正确的信息和反馈来维持与用户的持续沟通。从用户进入您的网站开始,您必须与他们开始对话,并在整个旅程中继续。提供信息的目的是让用户控制和选择他们在您的网站上导航,互动和实现目标的方式。

6.要有预防作用

大多数网站都包含某种形式的互动,无论是单击链接或填写联系表单等简单任务,还是更复杂的流程,如购买产品或在网站注册。妥善处理这些过程至关重要。具有讽刺意味的是,这个区域经常被执行得不好或者没有被考虑过。当人们开始与您的网站进行互动时,您需要预先为他们配备正确的信息,以防止他们犯错误并感到愚蠢。

预防的主要目的是尽量减少错误,但更广泛的目标是产生信任。当人们感到受到支持,受到尊重,并且在与您的网站互动时不会感到愚蠢,所建立的信任反映了您的品牌。

7.宽容

虽然预防可以减轻错误,但每个人都会犯错误,而当他们这样做时,你必须要宽容。宽容的目的是帮助用户建立对他们与您的网站和品牌在线互动的能力的信心。通过温和和支持用户纠正错误,建立的信心 - 从预防所产生的信任开始 - 是持久的。这增强了可靠性并影响用户是否会多次访问您的网站。

Form error alert on Action for Blind People website

Action for Blind People上的“Skip to Errors”链接使得表单导航更容易出错

8.毫不费力

为了让您的网站轻松自如,它是网站,而不是需要努力工作的用户。此外,访问者不应该了解进入其中的艰苦工作。对于您的用户,您的网站需要轻松,轻松,轻松的体验。如果您对访问者提出要求或限制太多,他们很快就会厌倦并去其他地方。你需要尽可能减少对人的精神压力。轻松的目标是让快乐的用户能够高效,有效地访问您的网站并与之互动。

9.适应

在容纳的物理环境中涉及诸如净空或门宽之类的事物。在线,它是关于您如何在页面上使用空间以使人们想要与您的网站互动。

如果空间太大而内容不足,用户可能会认为页面没有完全下载或者出现了问题,这可能导致页面反弹。另一方面,如果您的网站内容丰富,看起来很拥挤,一些用户可能会发现它令人生畏,不知道从哪里开始,然后离开。

容纳的目的是让人们感到舒适,这样他们就可以在您的网站中进行导航和互动,感觉轻松并且有机动空间。

10.保持一致

保持一致是为了提供一个熟悉的环境,具有令人难忘的导航,功能和特性。它意味着理解管理我们行业的标准,指南和最佳实践,但它也意味着理解惯例以及为什么有些事情就是这样。

当然,如果一个功能可以在那个很好的情况下进行改进,但如果这是用户在访问您的网站时所期望的惯例,请不要让他们失望。重要的是要了解规则以及何时遵守这些规则,但这也是要知道何时违反规则。

现实世界的挑战

这些是包容性设计的原则。现在让我们来看看如何在现实世界中将它们付诸实践。我们将参考我们建立的两个网站Vision Hotels(www.visionhotels.co.uk)和Action for Blind People(www.actionforblindpeople.org.uk)。

两个项目的主要挑战非常相似。这两个网站共享所有年龄段的视障用户的核心受众,其中50岁以上的人口占很大比例,并且两者都满足广泛的专业利益相关者的需求。

服务核心受众的技术限制构成了重大限制,IE6渗透率为20%,大多数人使用辅助或适应性技术。挑战在于创建具有直观用户体验的美丽,现代的网站,同时克服相当大的技术限制。

辅助技术供应商(尤其是屏幕阅读器)缺乏Web标准的采用,导致了互操作性问题。这一点,同时需要为所有用户提供同样有价值的体验 - 同时考虑从IE6到现代浏览器的所有变幻莫测 - 意味着我们必须使用HTML和CSS创建最佳用户体验,限制JavaScript的使用仅限于增强。

就像我们现在使用标准设计并考虑人们使用的许多不同设备的互操作性一样,了解设备,浏览器和向最终用户提供内容的其他技术背后的人的需求和行为也很重要。

这就是我们用一组用户专家开始每个项目的原因。我们从网站的目标受众中招募人员,但仅凭人口统计数据并不能说明问题:我们深入挖掘并确保访问需求是其中的一部分。

Vision Hotels home page

为了使Visions Hotel网站公平灵活,首先要对其用户进行研究非常重要

研究你的观众

为了公平和灵活,我们需要了解有关用户的一些事情。他们的技术能力是什么?他们说什么语言?他们是否有任何可能限制他们访问或使用互联网的障碍?

他们的种族或文化背景是什么?我们如何能够适应文化多样性?什么是年龄范围,我们如何满足不同年龄组的需求?他们的地理位置是什么?他们有什么类型的互联网连接?他们使用了哪些设备以及它们是如何配置的?他们使用任何辅助或自适应硬件或软件吗?他们使用了哪些浏览器以及他们的浏览器设置是什么?

其中一些数据可以通过分析数据轻松获得,这些数据提供了上下文,但直到我们与用户专家交谈并观察我们获得了所需的信息。与我们的用户专家就这两个项目的合作始于市场研究,完成调查和参与焦点小组。然后他们参与了原型测试,并在测试功能,可访问性和可用性方面与我们合作。

计划包容

一旦我们掌握了用户需要的东西,我们就开始计划了。我们确定了特性和功能,并考虑如何以提供用户选择的方式部署它们。

一旦我们的特性和功能成为范围,我们就编写了用例。我们的一些时髦的想法落在了路边,其余的则完成了原型设计。然后我们得到了用户
为了测试他们的地狱,我们再制作一些。

这可能听起来像是很多工作,但我们投入询问,思考,观察,确定范围,规划,原型设计和测试的时间总能带来丰厚的回报 - 我们在构建结束时从未有过一英里长的障碍列表。我们可以在这里和那里对事物进行细致处理,但事实就是如此,因为我们构建和测试时出土了大多数主要问题。

技术怎么样?我们开始使用Web标准的两个项目,提供了一个有意义的基础,其中所有内容和功能首先在HTML中工作。然后,我们应用有效的样式来重新确认意义并增强视觉用户的用户体验。接下来,我们添加了脚本以使行为更加动态和直观,同时还确保它不引人注目且不依赖于设备。

Booking form for Vision Hotels

Vision Hotels的预订表格是从头开始创建的,以确保它可以访问

例如,在Vision Hotels上,在考虑预订流程各阶段之间的流程时,我们希望增强仅限键盘和屏幕阅读器用户的体验,这样他们就无需在每个阶段通过导航进行选项卡。我们无法将焦点放在第一个表单字段上,因为屏幕阅读器无法读取表单标签。

我们考虑过关注H1,因为屏幕阅读器用户通常会在页面上使用它来定位自己,但是H1并没有链接到任何东西。因此我们创建了Focus Point,这是一个位于H1之前的锚点,允许启用了JavaScript的屏幕阅读器和仅限键盘的用户轻松绕过主导航和标签。关闭JavaScript的用户可以使用跳过链接或主导航。

有意义的经历

为了确保所有网站访问者都能获得有意义的体验,我们必须考虑人们访问内容的方式。例如,在Vision Hotels上,照片画廊必须具有视觉吸引力,同时还要考虑访问需求和非文本内容的替代方案。因此,我们创建了一个链接到幻灯片的缩略图库,使用JavaScript作为渐进增强。结果是一个使用title属性和alt文本的键盘可导航和屏幕阅读器友好的图库。

为人们提供导航和访问内容的不同方式是关键。有些人喜欢使用网站的主导航,有些人喜欢使用站点地图,有些人则忽略导航,直接进入搜索框。关于盲人行动,我们希望充分利用站点地图作为主导航的真正替代方案,而不仅仅是对其进行改造。

在测试期间,我们发现很多人都喜欢使用站点地图,因为他们发现它们不那么杂乱。我们将主要网站部分分组以便快速参考,并将主要部分分组,部分页面分为两个级别,在有序列表中。此外,我们将网站范围的内容分组以便于访问。

Example of a sitemap

我们创建了站点地图,为主导航提供了有意义的替代方案

当用户交互产生变化时,您必须提前让用户知道,这样他们就可以决定这是否是他们想要的,更重要的是,这是他们所期望的。

我们在两个项目中都学到了一些关于链接目的的知识。首先,我们通过提供个别单词或短语作为链接,开始符合WCAG 2.0 AA,只要它们在上下文中有意义。但是,我们很快发现在测试期间这对于某些屏幕阅读器用户来说是无用的,他们通过将链接列在上下文中来对链接进行分组,因此我们改变了我们的方法,现在符合AAA,确保链接文本本身就足够了。

在Vision Hotels,提供直观,便捷和无缝的在线预订体验是一种爱的劳动。我们不想重新发明轮子,因此我们最初考虑定制现有的在线预订引擎。但是,它们都使用依赖于设备的突出脚本,因此我们必须从头开始构建一个。

我们非常仔细地制作了预订表格。所有人都必须清楚地理解说明,标签,表格字段交互,所需字段的指示,预订过程中所有阶段和当前阶段的指示,错误消息,错误处理和成功消息,并且必须以一种方式工作防止用户尽可能地犯错误。

试错

在针对盲人的行动中,我们观察了用户在表单提交时返回错误时如何导航页面。因为在这种情况下在窗体字段中提供焦点不适合屏幕阅读器用户,所以仅将焦点放在页面顶部会导致屏幕阅读器和键盘用户焦虑不安。因此,我们在页面顶部添加了一个额外的Skip To Errors链接,这显着改善了用户体验。

在Vision Hotels,我们了解到视障人士倾向于通过电话或电子邮件预订。虽然焦点小组被告知该网站可以完全访问,但是人们担心需要选择预订方法 - 用户报告说,网站的在线体验很差,这些网站声称可访问性一致,但没有提供。很明显,必须获得信任。在这种情况下,满足核心受众的需求优先于可用性最佳实践,我们创建了一个临时预订页面,以提供必要的选择。

一般来说,两个主要因素有助于确保这两个网站都是可访问和令人难忘的。首先是确保共同元素一致,清晰和简洁,并且不要让用户思考。第二是坚持惯例。互联网已存在足够长的时间 - 将您的徽标放在左上角并确保它的可点击性是显而易见的。使用页眉,页脚和主体内容作为结构的一部分现在也是一种惯例。为人们提供他们想要和期望的东西会让他们更开心。

在性感JavaScript主宰的世界中制作内容动态并非易事。关于盲人的行动,这完全是关于内容策略。我们围绕三个基石 - 服务,资源和社区 - 构建了内容,并创建了一个环境引荐系统,可以轻柔地引导用户并将用户指向其他基石区域的相关内容。对于大型慈善网站而言,通常的方法是筹款是目的,而环境是严峻的,无法提供行动从其社区中寻求的更深层次的参与和参与。我们的方法不仅促进了所期望的社区活动,而且使得行动能够以单一的声音与社区和利益相关者进行沟通。

Screengrab from site showing lots of easy accessed content

让人们轻松发现相关内容,他们将保持忠诚

将它们整合在一起

互联网就像一个大谜题,不同的部分应该完美地融合在一起 - 但不幸的是它们没有。遵循包容性设计的原则,您将为您的拼图提供最佳机会。通过不同的设备,配置,浏览器,个人设置和辅助技术,以及如何实现互操作性,网络构建者必须尽力满足人们访问互联网的各种方式。牢记这一点将确保您的访客获得高质量的体验。

包容性设计使我们能够为最广泛的受众创建出色,有意义的品牌互联网体验。然而,包容性设计也是一种新的思维方式,其总体目标可能不会反映您组织或客户的目标。更改需要时间,因此您可能无法一次完成所有操作。如果您只是考虑可访问性并考虑用户计划项目,那么您将走上正确的道路。将会有权衡和艰难的决定,但这是包容性设计真正脱颖而出的地方。它挑战我们磨练我们的工艺并培养真正的创造力和创新。