NJ Transit App
无障碍改进方 案
2023
#UI/UX Design
#Accessibility Design
Role:
UI/UX Designer
Duration:
5 Weeks
项目背景
新泽西公交（NJ Transit）的移动应用程序为其火车、巴士和轻轨服务用户提供信息与实用工具。该应用旨在提升用户体验，功能包含移动票务和实时行程规划。本项目聚焦于解决应用程序内的无障碍使用问题，通过分析现有使用障碍并提出改进方案，致力于确保不同需求的用户都能获得流畅的服务体验。
应用测试方向
测试小组依据《Web内容无障碍指南(WCAG 2.1)》AA级标准，对软件内容进行了系统性无障碍兼容性验证，重点围绕以下核心项目展开：
-
非文本内容（图像和视频）是否有等效文本描述。
-
表格内容是否包含有标签或说明，以便用户知道对他们的期望。
-
辅助技术（例如屏幕阅读器）能否访问内容。
-
信息或说明是否准确。
-
文本和背景是否良好的颜色对比度。例如，对比度至少为 4.5 比 1。
-
内容是否以清晰的标题进行组织，并采用逻辑顺序。例如，先是 H1，然后是 H2、H3 等。
-
导航的元素是否在整个网站上保持一致。
痛点分析
在测试过程中，应用的主要问题集中在以下三个部分：
TalkBack 和 Voiceover文本缺失
多个UI元素（包括图标、图像和功能按钮）缺乏标签或替代文本（Alt text），导致依赖TalkBack或VoiceOver等屏幕阅读器的用户无法识别其功能。
具体问题包括：
-
引导界面的手势操作方法不明确。
-
关键功能布局缺少标签说明：部分核心交互区域（如导航入口、功能按钮）的焦点顺序或语义标签缺失。
-
票务详情不可选择：用户无法通过辅助工具选中或读取完整的票务信息。
-
部分icon不被阅读器识别：铃铛图标（通知功能）和星标图标（收藏功能）被识别为“未标识的图标“
-
火车位置地图内容无法通过VoiceOver读取：地图模块缺乏无障碍适配，屏幕阅读器无法解析其内容。
用户流程和界面问题
-
需在多个应用间跳转才能了解无障碍设施车站信息，流程分散且效率低下，尤其对视障用户造成额外负担。
-
关键按键放置的位置较难搜寻：对于依赖视频阅读器的用户，部分关键按键位置不容易被触及。
-
出发信息界面逻辑需优化：「发车信息动态展示」的交互流程与信息层级设计不够清晰，不容易了解实时车次状态。
按键一致性和与颜色对比度不足
-
部分配色未达到基本可访问性——WCAG（ 网站内容可访问性指南）的基本标准：橙色、浅蓝色、绿色的组合在对比度上未达到WCAG要求（如浅蓝背景上的白色文字对比度过低），影响低视力用户辨识效率。
-
一致性缺失，按钮色彩逻辑混乱。
相同功能元素（如按钮、背景）在不同页面出现颜色偏差或是主按钮与次级按钮色调差异过小。 -
浅色文本可见性不足。
-
视觉层级缺乏色彩引导：重点按键视觉层级不突出。
设计规范更新
更新了应用中所选用的颜色，确保在深色和浅色模式下都能通过颜色对比测试。统一应用中字体大小与按钮格式。
原型交付
1. 主界面
-
上方划动标签未适配朗读文本，且导致下方功能按键遮挡。
-
不同功能按键使用同一颜色背景，无法快速区分。
修改方案
-
修改信息内容使其直观易用。调整按键排列方式，方便视力障碍者更快识别功能。
-
为不同功能添加颜色组，以便快速区分相似的信息集。
2. 车票购买
-
多个 UI 图标和图像未加标签或包含 Alt 文本，并且缺乏功能说明。如： 收藏 (星号)、减少 (-) 和添加 (+) 图标，与车票类型图标。
-
购买成功后未显示车票详情确认页。
-
车站信息按首字母列表排序，无法筛有无障碍设施的车站。
-
页面前后大小写，字体格式未统一。
修改方案
-
引入用于车站选择的“无障碍过滤器”。
-
颜色区分功能按键。
-
弹性搜索选项具有内置功能，可显示离用户最近的车站。
-
用户可以通过车站名称或区域名称搜索车站。
-
调整元素之间的间距，以便更好地导航和点击。
-
车站名称采用标题大小写，而不是全大写，以提高可读性。
-
确保深色和浅色 UI 上的颜色符合 WCAG 指南。
-
使用图标简化了不同类型车票的购入布局。
-
添加 +/- 和其余图标的朗读文本。
3. 抵达信息
-
需要在知道起点和目的车站情况下查询，无法提供附近车站的信息。
-
页面设计使用的元素与其他页面不统一。
-
多个 UI 图标和图像未加标签或包含 Alt 文本，并且缺乏功能说明。如可开启即将到站提示的铃铛符号。
-
显示车辆位置的地图界面不被阅读器识别。
修改方案
-
可以在同一应用程序中搜索车站以查找所需的路径/路线。
-
修改流程排列逻辑与其他功能界面统一。
-
添加了“购买车票”按钮简化购票流程。
-
在地图上添加了语音功能，点击地图即可播报火车状态。
-
减少了冗余信息并用图标代替。
-
修改了铃铛图标并增加朗读文本。
交互流程
车票购买
抵达信息
方案总结
可访问性
-
引入用于选择车站的“可访问性过滤器”。
-
确保深色和浅色 UI 上的颜色均符合 WCAG 指南。
用户体验改善
-
弹性搜索功能，方便用户使用。
-
简化售票流程的布局。
-
通过调整元素之间的间距增强导航。
-
添加了“购买车票”按钮以简化用户流程。
减少冗余信息
-
删除冗余信息并将其替换为图标以简化界面。
增添描述文本
-
为实用程序图标（如收藏夹（星形图标））提供相关的文本。
-
为铃铛图标添加文本以提供火车警报。
