确保你的应用设计不会疏远用户,无论他们是否有身体残疾

你刚刚开发了你的应用程序,它看起来非常漂亮和时尚与所有的铃铛和哨声!哦吼!每个人都会喜欢的,对吧?

首先,重要的是要检查它是否真的存在为尽可能多的用户精心设计。你奶奶知道这是怎么回事吗?当你只有一只手时,它是否容易使用?它是否与盲人、聋人等的支持产品兼容?

在这篇文章中,我们将研究一些针对某些身体残疾人士需求的UI设计的好与坏的具体例子。

残疾人如何与移动应用程序互动?

首先,重要的是讨论残疾人如何使用移动应用程序,以及如何克服其他人没有遇到的挑战。很多时候,它们依赖于特殊的支持产品,因此在设计应用时,务必牢记这些产品,确保它们能够很好地运行。下面我们将介绍其中的一些产品。

视障人士:

  • TalkBack (Android)和叙述者(Windows):阅读当前屏幕上的内容
  • VoiceOver (iOS):告诉你在触摸区有什么
  • 变焦(Android、iOS和Windows):WOrks就像一个放大镜,允许你使用触摸手势放大屏幕上的内容
  • 听写(iOS和Android):允许用户通过语音输入文本

听觉受损人士:

  • 字幕(Android和iOS):为多媒体内容添加和显示字幕
  • 可见和振动提醒(安卓和iOS):允许用户通过灯光和振动通知而不是声音来注意提醒和消息

运动技能受损人士:

  • Android的Switch Access和iOS的Switch Control:允许你通过按顺序突出显示项目来导航屏幕,并使用物理开关来选择它们
  • AssistiveTouch (iOS): A允许您配置多个手势,根据用户的需要

提示:iOS和Android中的易访问性API为开发人员提供了一组库,用于创建利用这些电话支持产品的应用程序。

现在,我们将分解6个好的和坏的易访问性移动UI设计的例子,按照移动易访问性的4个原则(由W3C概述)对它们进行分类:可感知性、可操作性、可理解性和健壮性。

例子1、2点:理解力

这个原则与应用程序中元素的可见性有关。当缩放操作执行时,或者当字体大小或对比度发生变化时,它考虑了信息应该如何显示。除了具有表示选项或功能的图像外,必须在可访问性层中具有兼容的文本替代。

以这个例子为例,当使用TalkBack工具时,左边的可感知性较差,右边的可感知性较好。

易访问的手机UI设计实例1

如果你的用户正在使用一种针对视障人士的工具,屏幕上的元素就会被大声朗读出来。在左边,“按钮1”的描述比右边按钮的描述更令人困惑。

通过为每个视觉元素添加清晰的描述性文本,始终确保视力受损的用户接收到完全相同的视觉可用信息。

应用可感知性的另一个重要方面是使用颜色对比

易访问的手机UI设计实例2

在第一张图片中,很难看到文本选项,因为文本是灰色背景上的灰色。

在第二张图片中,文本由蓝色或绿色背景上的白色字母组成,这更容易看到。

我们必须谨慎使用文本、按钮和应用程序背景的颜色。通过这样做,我们将牢记于心,并使视力不全的人能够轻松区分应用程序中的按钮,并感知前景和背景颜色之间的差异。

为了验证你的应用是否具有良好的颜色对比度,以及它是否具有高度的可感知性,你可以使用以下工具:

可访问的移动UI设计工具颜色对比度

  • 色彩对比分析仪:从UI设计阶段开始,这个工具帮助您了解文本的易读性和视觉元素的对比是否可以接受。
  • 无障碍扫描器:谷歌推出的Android免费应用程序,该工具为较大的触觉元素提供改进建议,如增加对比度或提供描述,以便所有有无障碍需求的用户都可以使用该应用程序,没有问题。

示例3:可操作性

这个原则与用户在屏幕上执行动作、手势和动作的简单程度有关。很重要的一点是,要让用户始终清楚地知道他们在应用程序中的位置,让他们更容易地知道他们接下来要做什么。

看看这些可操作性示例:

屏幕截图2019-01-17上午10.53.00

在第一张图片中,您可以看到标题屏幕是ORDER,这个标题没有向可能离开了30分钟左右的用户表明他们正在订购什么。如果表单中的字段不提供需要在每个字段中填写什么内容的提示,也不是很有帮助。

在第二幅图中,我们看到屏幕包含了一个更具体的标题:他们到底在排序什么,以及他们在排序过程中走了多远。此外,还会显示文本字段,让您知道您必须输入您的电话号码及其描述,如“家”或“手机”号码。通过这些改进,用户总是知道他们处于流程的哪个阶段,他们订购了什么,以及他们确切被要求的信息是什么。

每个屏幕的标题和文本域中的描述有利于认知障碍的人;用户可能在理解和吸收信息方面有困难,或者在解释选择或文本字段的含义方面有困难。

示例4:可理解性

当谈到应用的“可理解性”时,我们指的是它如何适应屏幕方向的变化。例如,它是否保持了一致的设计,并给了我们关于它如何工作的适当提示?当然,可理解性也与通知、说明、按钮等使用的语言有关。一切都应该清楚和简单,更不用说没有语法错误。

易访问的手机UI设计实例4

在第一张图片中,我们可以看到四个菜单项被称为faq。我们应该小心使用缩略语,确保用户可以访问缩略语的扩展形式。

通过满足这些可理解性的可访问性标准,我们可以帮助那些难以解码单词的用户,依赖屏幕放大镜,记忆力有限,或难以使用上下文来帮助理解。

示例5:鲁棒性

这个原则实际上与设计没有直接关系,但是作为设计师、测试人员或开发人员,我们仍然可以在使用支持产品时检查应用程序的行为。

内容必须足够健壮,以便支持产品能够可靠地解释。必须安装高度可访问的移动应用程序兼容的使用支持产品,就像没有激活的支持产品时一样工作。

易访问的手机UI设计实例5

用户轻按“下一步”按钮3次

当用户启用了“旁白”、“TalkBack”或“旁白”后,为了选择一个选项,他或她必须轻按一次以听到它是什么,然后轻按两次以选择它。

在第一幅图中,我们看到用户正在这样做。用户点击“下一步”选项,支持应用程序会指示这是“下一步”选项,这是一个按钮。然后他或她双击该应用程序,但该应用程序没有响应,不会显示下一个屏幕。当应用程序与支持产品不兼容,某些按钮和功能不符合使用它们的替代方式时,通常会发生这种情况。

另一方面,点击三次后,下一个相应的页面会出现,这意味着应用程序与支持产品兼容,并像支持产品未激活时一样执行操作。

易用性是优秀手机UI设计的关键

现在你已经知道了几个可访问的移动用户界面设计的例子,希望在未来你只会制作考虑身体残疾用户的应用程序。至少,我希望你能够花5分钟的时间,通过使用这些支持产品或易用性测试工具来测试你的应用,从而让自己站在别人的角度去思考问题。

更多的资源,我建议访问https://www.w3.org/WAI/mobile/读到这里:我的手机易用性测试方法海伦·伯奇(Helen Burge)为测试部(Ministry of Testing)撰写。

关于无障碍手机UI设计,你还有其他的注意事项吗?


推荐给你

如何在持续集成中轻松进行易访问性测试
为残疾人士而设的新软件测试课程