设计和用户体验

想一想您最喜欢的网站或应用。是什么让您最喜欢它?现在,想一想您不喜欢的网站或应用。您不喜欢它的哪些方面?用户与您的设计互动的方式以及他们在您的网站和应用中的体验可能会有所不同。

这种体验可能会因时间、所用设备类型、前一天晚上是否睡眠充足、身体是否不适、是否使用辅助技术等因素而异。全球有近 80 亿人,用户使用和体验您的设计的方式是无限的。

包容性设计

如何一次性满足所有潜在用户需求?采用包容性设计。包容性设计采用以人为本的方法,将包容性、易用性和无障碍性融为一体。

维恩图,其中无障碍设计、包容性和易用性是包容性设计的中间环节。

与通用设计不同,通用设计侧重于尽可能让更多人使用单一设计,而包容性设计原则则侧重于为特定个人或使用情形进行设计,然后将该设计推广到其他人。

以下七项包容性设计原则侧重于无障碍设计:

  1. 提供类似体验:确保您的界面为所有用户提供平等的体验,让用户能够以符合其需求的方式完成任务,而不会降低内容质量。
  2. 考虑情况:确保无论用户身处何种情况,您的界面都能为其提供有价值的体验。
  3. 保持一致:使用熟悉的惯例,并以逻辑方式应用这些惯例。
  4. 让用户掌控一切:确保用户能够以其偏好的方式访问和与内容互动。
  5. 提供选择:考虑为用户提供完成任务的不同方式,尤其是复杂或非标准任务。
  6. 确定内容的优先级:在内容和布局中按照首选顺序排列这些元素,帮助用户专注于核心任务、功能和信息。
  7. 增添价值:考虑功能的用途和意义,以及它们如何改善不同用户的体验。

角色

在开发新设计或新功能时,许多团队都会依赖用户角色来引导他们完成整个过程。角色是指使用您的数字产品的虚构人物,通常基于定量和定性用户研究。

角色还提供了一种快速且经济高效的方式,可在整个设计和开发过程中测试这些功能并确定其优先级。他们通过在对话中增加实际考虑因素来帮助调整策略并专门针对特定用户群体制定目标,有助于专注于有关网站组件的决策。

纳入残障人士

残障可能是永久性、暂时性或情境性。这些障碍可能会影响触觉、视力、听力和口语。
Microsoft 的 Inclusive 101 Toolkit 中的 Persona Spectrum。

“人都是不同的。我只能根据自己的经验来回答。当你遇到一位失聪人士时,就表示你遇到了一位失聪人士,而不是我们所有人。”

ID24 演讲“Deaf Tech: Travel Through Time from Past to Future”(聋人技术:从过去穿越到未来)的 Meryl Evans。

在将残障人士纳入角色时,角色可以用作包容性设计工具。您可以通过多种不同的方式来实现此目的。您可以创建特定于残障的角色,为现有用户角色添加残障,甚至创建角色谱系,以反映情境性、暂时性和永久性残障的动态现实。

无论您如何将残障人士纳入角色中,都不应以真实人物或刻板印象为依据。角色永远不能替代用户测试。

角色:Jane Bennet
查看支持特定用例的角色示例。
Jane Smith 身材高挑,留着长长的黑发,穿着灰色长袖衬衫和牛仔裤
  • 姓名:Jane Bennet
  • 年龄:57 岁
  • 地点:英国埃塞克斯
  • 职业:用户体验工程师
  • 残障:年轻发病型帕金森病 (YOPD) 导致的手部震颤
  • 目标:使用语音转文字输入功能更轻松地添加代码建议;只需按下最少的按键即可在线查找骑行装备。
  • 失望因素:网站仅提供键盘支持;应用设计为触摸互动区域较小。

作为一名用户体验工程师,Jane 负责设计和构建对保持公司网站相关性至关重要的网页。她需要全天为许多团队成员提供支持。 她是解决技术问题的专家,是部门里所有人遇到意外问题时的首选人选。

由于手抖,她的精细动作能力逐渐丧失,因此她越来越难以使用鼠标。她越来越依赖键盘来浏览网页。Jane 一直致力于保持健康体魄。她喜欢公路赛和小轮车赛。 因此,当她去年被诊断出患有年轻型帕金森病时,更是晴天霹雳。

残障模拟器

在使用残障模拟器模拟或补充您的角色时,请格外小心。

残障模拟器是一把双刃剑,它可以培养同情或同理心,这取决于个人、模拟器的使用情境以及许多其他不可控因素。许多无障碍倡导者反对使用残障模拟器工具,建议您寻找残障人士制作的电影、演示、教程和其他内容,并亲自了解他们的体验。

“我认为我们需要完全坦诚地说,任何模拟活动都不会影响我们希望视力正常者从他们的心智中了解的一些最重要的理解。我们的特征并非盲人,人们对失明的误解和期望不高是我们最大的障碍。

这些误解会造成人为的障碍,阻碍我们充分参与,这些虚假的限制会成为阻碍我们前进的因素。”

Mark Riccobono,全美盲人联合会主席。

无障碍功能启发词语

在构建角色和设计时,不妨考虑将启发词语添加到工作流中。启发词语是 Jakob Nielsen 和 Rolf Molich 在 1990 年提出的互动设计规则。这十大原则基于在易用性工程领域多年的经验制定而成,并且从那时起就被应用于设计和人机交互程序中。

时间快进到 2019 年,Dequ 的设计团队创建并分享了一组侧重于数字无障碍的启发词语。他们的研究表明,如果将无障碍功能纳入设计过程中,网站或应用的所有无障碍功能 bug 中可避免的 bug 高达 67%。即使没有编写一行代码,也有可能产生巨大的影响。

与原始启发词语集类似,在规划设计时,您需要考虑 10 条无障碍启发词语。

  1. 互动方法和模式:用户可以使用自己选择的输入法(例如鼠标、键盘、触摸等)与系统高效互动。
  2. 导航和寻路:用户可以随时在系统中导航、查找内容以及确定自己所在的位置。
  3. 结构和语义:用户可以理解每个页面上内容的结构,并了解在系统中的操作。
  4. 错误预防和状态:互动控件具有持久且有意义的说明,有助于防止错误,并为用户提供清晰的错误状态,以便在返回错误时指明问题所在以及如何解决。
  5. 对比度和易读性:用户可以轻松地区分和阅读文本和其他有意义的信息。
  6. 语言和可读性:用户可以轻松阅读和理解内容。
  7. 可预测性和一致性:用户可以预测每个元素的用途。清晰明确了每个元素与整个系统的关系。
  8. 时间和保留:为用户提供足够的时间来完成任务,并且在用户的时间(即会话)用尽时不会丢失信息。
  9. 移动和闪烁:用户可以停止网页上移动、闪烁或呈现动画的元素。这些元素不应分散用户注意力或对用户造成其他伤害。
  10. 视觉和听觉替代方案:用户可以使用文本替代方案来获取传达信息的任何视觉或听觉内容。

对这些无障碍设计启发词语有了基本的了解后,您可以使用无障碍设计启发词语工作表,按照所提供的说明将其应用于角色或设计。当您收集多种观点时,本练习将更有启发性。

导航和导向检查点的无障碍启发词语审核示例如下:

导航和寻路的检查点 表现出色 (+2 分) 通过 (+1 分) 失败(-1 分) 不适用(0 分)
是否在所有活跃元素获得焦点时为其设置了清晰可见的指示器?
网页是否包含有意义的标题文字,并将特定网页的信息放在最前面?
网页标题元素和 H1 是否相同或相似?
每个主要部分是否都有有意义的标题?
链接的用途是仅根据链接文字确定,还是直接上下文?
网页的最顶部是否提供了跳过链接,链接是否显示在焦点上?
导航元素的组织方式是否有助于用户找到所需内容?

团队中的所有成员查看相应网页或组件并进行无障碍启发词语审核后,系统会统计每个检查点的总分。此时,您可以决定如何补救发现的任何问题,或纠正对支持数字无障碍至关重要的任何疏漏。

无障碍注解

在将设计交给开发团队之前,您应考虑添加无障碍注释

通常,注释用于说明广告素材选择并描述设计的不同方面。无障碍注释侧重于开发者在设计团队或专注于无障碍功能的专家的指导下,可以做出更易于无障碍使用的程序化选择的方面。

无障碍注释可在设计流程的任何阶段(从线框到高保真模拟)应用。这些内容可以包括用户流程、条件状态和功能。它们通常使用符号和标签来简化流程,并将设计作为主要关注点。

以下设计插图示例来自 Figma 的 Indeed.com 无障碍注释套件

显示用于各种可能的按钮状态的视觉修改的设计插图。
操作按钮设计因状态而异:默认、聚焦、悬停、有效和已停用。
显示在招聘信息卡片上使用的三个不同图标的设计插图。
三个图标的替代文本都已突出显示。“保存工作”和“不感兴趣”的图标用作按钮,因此替代文本对于了解操作至关重要。“使用 Indeed 简历申请”旁边的图标仅供装饰用途,因此不需要替代文本。
说明表单标签在月份和年份的相关输入中应具有的关系图。
每个输入都可以关联多个输入标签,以帮助用户了解上下文。

根据您的设计计划,您应该有多个无障碍注释入门套件可供选择。或者,您也可以自行创建。无论在哪种情况下,您都应该决定需要向移交团队传达哪些信息以及哪种格式最适合。

在添加无障碍功能注释时,需要考虑的一些方面包括:

  • 颜色:包括调色板中所有不同颜色组合的对比度。
  • 按钮和链接:识别默认、悬停、活动、聚焦和停用状态。
  • 跳过链接:突出显示隐藏和可见的设计元素,以及它们在页面上的链接位置。
  • 图片和图标:为重要图片和图标添加替代文本建议。
  • 音频和视频:突出显示字幕、转写和语音描述的区域和链接。
  • 标题:添加程序化等级,并包含看起来像标题的所有内容。
  • 地标:使用 HTML 或 ARIA 突出显示设计的不同部分。
  • 互动组件:识别可点击元素、悬停效果、焦点区域。
  • 键盘:确定焦点应从何处开始(字母停止键)以及后续的标签页顺序。
  • 表单:添加字段标签、帮助文本、错误消息和成功消息。
  • 无障碍名称:确定辅助技术应如何识别元素。