当前位置: 首页 > 科技观察

大师总结!8条原则助你快速提升页面易用性

时间:2023-03-21 17:26:33 科技观察

编者按:无论是设计网页还是APP,设计UI时保证产品无障碍是说起来容易做起来难。这种对细节的打磨和优化在逻辑上是没有上限的,但是要保证基本的可达性和可用性是有下限的。高级设计师BriannaKoch的这篇文章总结了8个基本的可访问性优化方向和原则:四年前,当我刚开始提倡设计用户可访问的网页和产品时,我遇到了很多障碍。我的许多同事和朋友认为无障碍、无障碍设计过于理想化。他们认为,如果有时间优化产品的无障碍,不如花时间去挖掘用户价值或为企业增加收益,甚至认为无障碍设计与这些直接冲突。我发现这种想法往往源于误解。很多人认为无障碍设计意味着构建高层次的、特定的功能,而实际上无障碍设计需要的是,在日常设计中,要合理优化才能做到。本文将帮您梳理出8种常见的无障碍设计设计原则和技巧。小决定大影响许多用户体验/产品设计师的日常工作是由一系列小决定组成的,这些小决定最终可以累积起来构建一个巨大的产品。但是很多小的决定造成的问题累积起来,就会形成一个巨大的障碍,从而挡住一些特定的用户。而我们要做的就是在做具体决策的时候知道陷阱在哪里,如何绕过它们。换句话说,就是做出正确的小决定来提高用户的可用性。这些小问题通常会影响到每一位用户,但对于有身体和认知障碍的用户来说,影响会更大。为了做出正确的选择,我总结了8条设计原则,它们将帮助我们进一步提高产品的可访问性。用好它们不仅可以提高可访问性,还可以影响整个产品的可用性。W3C网站对网页内容的可用性设计有更详细的指南,我总结的8条原则是一个更容易的起点。接下来,我们就来详细了解一下。1.始终为用户提供更大的目标区域。如果为用户设置的区域或交互元素太小,没有提示触发的悬停效果,整体的可访问性会差很多。在大屏幕上使用光标交互通常需要精确的操作。如果目标区域很小,又没有悬停触发等交互来辅助,对于行动不便的用户来说会很麻烦甚至庞大。挑战。通过提供更大的目标交互区域,可以减少对突击操作的依赖,更方便地定位页面元素并进行交互。每个人在面对光标和交互目标时或多或少都会高估或低估自己交互操作的效率,但绝大多数健康用户会在过程中快速微调和修正,以尽快达到交互目标,并且这个问题在有行为障碍和认知障碍的用户方面会被放大。通过放大交互元素和目标,以及悬停效果,我们可以让用户尽快到达目标元素,减少不确定性。这些变化让每个人都更快、更自信、更准确。2、使用高对比度的颜色根据W3C的规定,高于4.5:1的颜色对比度可以带来更清晰的轮廓,让用户更容易区分不同元素和控件的边界。有许多工具可以使颜色对比度正确,例如来自WebAIM的颜色对比度检测工具。视力不佳、色盲和对比敏感度低的用户在阅读和查看低色彩对比度的内容时会遇到更大的困难。提高对比度对减轻视觉疲劳有直接作用。3.不要只靠颜色来表达意思。同样,仅用颜色来传达诸如“禁止”或“完成”等含义,在很多情况下会显得模糊不清,甚至直接让特定用户无法识别。我们不能假设每个人都有足够强烈和清晰的色彩感知。您的用户可能是色盲,可能是色盲,可能是部分视力,甚至可能是完全失明。他们甚至可能正在使用屏幕阅读器来阅读UI界面。这时候,颜色就完全无效了。通过更清晰的文字和符号,来辅助颜色传达信息,即使你去掉了颜色,UI界面中的内容和文字也能发挥作用,这是最重要的。颜色需要解释。颜色本身的意义是后天赋予的,有一部分是习惯的。然而,并不是每个人都有足够清晰的认识。在不同的文化和场景中,它甚至可能代表着截然相反的意义。.因此,有必要对颜色添加补充说明,使UI传达的信息更加清晰直观。4.为链接和按钮添加更具指导性的文本标签。按钮和链接上相应的文字不应该是简单的是否、确认或取消。在很多语境中,这些词有很多种理解方式,可能会带来误解。理想的情况是帮助用户更清晰的了解按钮的实际功能和方向。这可以解决一些基本的认知问题。但更重要的是,定向和描述性文本消除了使用屏幕阅读器的视障用户的猜测。使用“单击此处”作为链接,或使用非描述性文本(如“完成”)作为按钮对于此类用户来说太麻烦了,无法猜测它们的实际含义。所以,修改链接文字和按钮标签的核心意义就在这里。另外,要控制按钮和链接文字的颜色对比度,确保用户在快速浏览时能够立即注意到它们。因此,提高可访问性的核心是将其修改为描述性文字,并优化其颜色对比度。5.使用有意义的标题和结构。对于用户来说,长文本的可读性是有门槛的,而结构化文本在这方面要强得多。即使文字不多,段落清晰,主题概括清晰的副标题总能让用户第一时间抓住段落的核心信息,不会在阅读时走神找不到内容。使用结构化的副标题系统对于使用屏幕阅读器的视障用户来说也更加明确,使他们能够更快地导航到不同的内容。同时值得一提的是,为了更好的贴合屏幕阅读器的使用,标题和正文必须用不同的标签隔开,这样才会起作用。同样,除了标题的概括,最好使用描述性的句子,方便用户理解内容的作用,保证标题和内容的高度相关。6、使用占位符来展示表单内容表单也是最重要的界面组件之一。为了保持界面的整洁,使用占位符来描述表单的内容是一种常用的方法。目前在很多设计中,都是通过介绍的文字来标识需要填写的内容,比如“邮箱”,或者“电话号码”,但实际上这些表单域的填写方式都有详细的格式要求。当用户开始输入时,占位符会消失,用户可能会忘记输入什么或如何设置样式。在用户开始打字之前,他可能只用零点几秒的时间快速浏览了一下,根本没有写下要填写的内容。对于有阅读障碍的用户,可能一时半会看不懂相应的文字格式。为了减少认知负荷,最好直接使用对应字段格式的占位符直接展示给用户,通过字段输入框外的确定文本告诉用户具体输入字段是什么,这样无论输入前、输入中或输入后,都不会出现填写内容的问题。7.使用明确的错误报告指南帮助用户填写表单字段。即使有指导和指示,用户仍然有很高的填写错误的可能性。这时候报错提示就很重要了。但是,在编写用户错误信息时还是有很多需要注意的地方。在填写表格的过程中,用户肯定会出错。这时候,首先要保证错误提示的颜色对比足够强烈,以便用户能够定位。同时,还要考虑到有认知障碍的用户,尽可能用最简单的语言告诉用户如何解决这些错误,不用用户去猜测。8.使用高对比度的焦点指示器。虽然绝大多数用户会使用鼠标和触控板进行操作,但仍有部分用户习惯于使用键盘进行操作。有些人追求更快的操作,而另一些人则出于习惯。在进行多字段表单输入时,使用键盘Tab键快速切换确实比使用鼠标交互要快。当用户使用键盘快速切换时,选中按钮和输入框的焦点指示器需要使用尽可能清晰的颜色。只有这样,用户才能清楚地知道选择了哪个控件,而不会感到迷茫或摸不着头脑。结论控制界面的易用性可以考虑到更广泛的用户,对产品本身也具有更持久的价值。