Linna Zhou

概述

Eclipse Soundscapes 项目作为美国航天局NASA 公民科学计划的一部分，致力于研究日食对地球生物的影响。我们的设计挑战是：如何在现有的设计限制下提升无障碍体验 (Accessibility)？

职责

用户体验设计师，无障碍体验分析师

时间

2024年4月 - 2024年5月

项目概述

美国航天局NASA公民计划项目Eclipse Soundscapes将发布一个新的公民科学家任务，邀请广大网友参与项目数据分析。数据分析任务将通过第三方平台Zooniverse完成。由于这是美国航天局NASA赞助项目，项目负责人对设计的无障碍体验（Accessibility）标准要求非常高。

作为用户体验设计是和无障碍体验分析师，我主要负责：

  • 对项目的Zooniverse部分完成无障碍体验测评。

  • 对其他市面上的公民科学平台进行竞品分析，是否有比Zooniverse更合适的选项？

  • 设计项目在官网上的介绍页面，重点关注第三方平台Zooniverse的跳转流程。

无障碍体验(Accessibility) 评测

项目负责人找到我们时，已在 Zooniverse 上建立了一个测试页面，我们的任务是进行无障碍性评测，确保网站符合 WCAG 2.2 标准 并且直观易用。为此，我和另外两位团队成员使用 WAVE、AxeDev、VoiceOver 等自动和手动审查工具进行评测。其中，我主要负责使用 AxeDev 和 VoiceOver 。

我们一起完成了一份15页的评测报告，报告中指出主要的无障碍问题，分析问题所带来的潜在影响并给出了改进建议。在测评中我们发现Zooniverse总体符合标准，但仍有以下几个问题：

  • 部分文字/背景色差太低

  • 部分按钮标签和替代文本确实

  • 标题层级混乱

  • 项目主页有大块内容（项目介绍）对于屏幕阅读器使用者是不可见的

  • 教程页面的UI容易造成用户困惑

评测报告预览

由于项目团队无法修改 Zooniverse 的后端，我们在解决上述无障碍性问题上的能力受限。因此，我们仔细分析了问题出现的页面发现，许多颜色对比度问题和缺失的按钮标签不影响用户提交声音数据分析的任务。同样，混乱的标题层级和被隐藏的大块内容主要影响的是用户对项目背景信息的获取，也不会妨碍数据分析任务的完成。

因此，我们认为在不能直接解决问题的情况下，我们提出在项目官网上优化 Zooniverse 的引导流程、涵盖关键项目描述和教程，确保用户在进入第三方平台就了解到这些信息，从降低无障碍问题对用户的影响。此外，我们还评估了 SciStarter 等替代平台，但发现这些平台存在更严重的无障碍问题，都直接影响可用性。基于上述发现，我们给出 Zooniverse 仍然是最佳选择，但需要在项目网站上进行补充性优化，以提升整体用户体验的综合建议。

替换平台对比

线框图方案

项目团队明确表示无法修改Zooniverse的代码，希望我们不要给出Zooniverse上面的设计建议。因此，我们的设计围绕团队自身官网上展开。官网已存在其他类似任务的介绍页面，为保证网站整体统一性，我参考了过去的页面的信息组织方式、设计语言，并主动寻找保证统一性同时，可以优化用户体验的地方。

本次设计的主要考虑因素是内容策略。根据前面的评测报告和既有网站结构，我们设计出可点击的完整线框图，涵盖了项目介绍、Zooniverse引导流程和Zoonverse教程。

任务概述和Zooniverse跳转

遵循已存在的任务页面的结构，我们将页面分成三个主要信息块：数据分析任务介绍、Zooniverse介绍和跳转，以及Zooniverse教程。这个信息结构帮助用户理解自己的任务内容，了解第三方平台避免跳转时发生的困惑。我们尽量平衡了页面信息与Zooniverse上的项目信息的重合度，重合度过高则是无用信息，但保留关键信息至关重要，因为有许多项目信息在Zooniverse上是不符合无障碍体验标准的（屏幕阅读器使用者看不到）。为避免用户困惑，我们在Zooniverse介绍下方放置了一个醒目的跳转按钮，而教程则在第三块，作为选读内容存在。

原官网教程导航（图一）

教程线框图（图二）

我们参考了其他任务页面的教程部分（图一），但注原有的步骤导航的结构不清晰，也因为分项太多而分两行展示，很不美观。为了保持网站风格一致性的同时进行优化，我们对步骤栏进行了上图二中的设计，采用数字编号，并将信息整合到更少的标签下。这样的设计使流程更加直观，户更容易理解并完成引导过程。

在每个标签下，我们引入了以下内容：

  • 项目页面 - 因为项目页面中许多信息对屏幕阅读器用户不可见，我们利用教程告诉用户他们会跳转到哪一页，需要在这页做什么。

  • 注册 - 由于Zooniverse平台限制，用户在数据分析前需要登陆，用户往往需要时间反应是登陆问题，增加网页使用障碍，我们在教程中提前提醒用户。

  • 音频样本 - 解释如何导航Zooniverse上的教程，该教程由一系列音频样本组成，但缺少替代文本，涵盖这个内容也是为了减轻无障碍问题的影响。

  • 数据分析 - 主要介绍参与者的任务流程，确保他们知道任务如何完成。

  • 讨论 - 介绍非必需的后续活动有哪些，涵盖这个是因为Zooniverse上大量低对比度文字都在这。

优化

我们把可点击的线框图给了7位用户进行测试，测试结果显示，7 名用户中有 5 名认为该页面提供了足够的引导信息，清晰且易于理解。我们也根据反馈进行了进一步优化，如上图所示。包括简化教程导航（移除本来在教程区域每一个标签下方还有“上/下一步”按钮）、增强教程图片的视觉引导，以及优化文本内容（更清晰、简洁）。

补充方案

尽管项目团队对我们的研究结果和线框方案感到满意，我仍有疑虑：“我们在Zooniverse上真的什么都做不了吗？是否有简单、不受技术限制的改进方法？”

我找到Zooniverse的项目构建工具探究了在平台上可修改的内容到底有什么，并发现，虽然缺失的标签、混乱的教程UI和文本颜色问题无法直接修复，但更换背景图片可以改善部分对比度问题，且调整标题层级可以让屏幕阅读器识别之前隐藏内容，已是很大的改进。这些都是可以在10分钟内完成的简单优化，却能显著提升无障碍体验。

经验总结

技术限制下的包容性设计（Inclusive Design）

当技术限制阻碍包容性设计时，我们仍然可以找到应对方案。例如：

  • 内容策略可作为辅助工具
    虽然内容策略无法替代真正的无障碍修复，但在本项目中，它可以降低问题影响。我们通过引导流程将第三方平台里访问起来有障碍的信息点重新整合到项目官网上，确保用户能够顺利获取关键信息。

  • 简单的非技术性优化也能带来显著影响
    Zooniverse 页面的大量内容屏幕阅读器无法识别，但这一问题可以通过在 Project Builder 中添加正确的标题层级轻松解决，无需复杂的技术调整。

引导流程不仅仅是说明

制作引导流程的时候不仅仅是提供操作说明，而是要通过用户测试（对第三方平台，和我们设计的引导流程两者的测试）发现潜在的困惑点，而引导流程则是针对测试结果对用户做好预期管理。

主动探索，挖掘改进机会

探索 Zooniverse上的补充解决方案并不在任务要求内，但它成为了改善可用性最直接的方法。一切始于我的疑虑——“我们真的无法在 Zooniverse 内部做任何改进吗？” 疑虑，行动，才会有意料之外的收获。