无障碍使用

概念说明:一种不需要定制就能满足于各类需要用户群体的思维模式。

无障碍这个概念被提出时最初是为了满足残疾人群体的要求,相信生活中大家也时常看到过很多无障碍设计。

无障碍卫生间
无障碍卫生间
无障碍通道
无障碍通道
无障碍电梯
无障碍电梯

伴随着人们对“无障碍使用”思维的积累和设计上的部队革新,“无障碍”已经不再是残疾人的代名词,它渐渐成为了所有群体的代名词。

在一款产品中,好的无障碍设计应该包含四个要素:易读性、易操作性、简易性、包容性

易读性:不论使用者处于何种年龄段、感官上有何种差异,他都能够很好的理解产品中的设计。

易操作性:不论使用者处于何种状态、何种姿态,他都可以很好的操作产品。

简易性:不论使用者在文化水平、经验背景上有何等差异,他都能够快速上手并正确使用产品。

包容性:不论使用者怎么“破坏”产品,都能够造成最小的错误和最低的后果。

而“无障碍使用”的提升方式也是从这四个维度去提升。

易读性:

  1. 使用通用图标、文字等标注呈现通用信息,对于不同模块或者同一模块的不能内容则有层次感有区分度,从而提升使用者的感官舒适度。
  2. 辅助性设计,如图片的alt属性,input的placeholder属性。
  3. 合理的页面布局,如“我的”放在底部右侧,文章段落有层次感。

易操作性:

  1. 最大限度减少使用者的“无用操作”和“重复性”操作,从而减少使用者体力消耗和疲劳积累,以增加产品舒适度和使用时长。如QQ对接的“表情包api”就帮助用户省略了“找图->保存->发图”这一不属于产品本身的无用操作。而“上滑发图”则减少了用户“选择图片”的重复性操作。
  2. 考虑用户身体条件,以最适合劳苦大众的方式呈现出产品的操作内容。如《王者荣耀》的“轮盘施法”,革新了手游moba的操作方式,玩家不再需要很高的手速去快速点击技能,只需要简单滑动。
  3. 考虑用户身体和姿态,单手还是双手,站姿坐姿还是卧姿,以视频播放来说,横过手机全屏播放是最通常的做法,所以设计出了自动转屏。但是也存在侧卧看视频的情况,而这时手机的陀螺仪处于手机的上下位,这时候的自动转屏则会让用户崩溃,解决方案也很简单,一个锁定按钮,顺带还解决了“手残党”的误操作。

简易性:

  1. 较少干扰项,去除不必要的设计保证产品重点突出,该是显示内容的地方就绝对不要弄些乱七八糟的特效。
  2. 导引清晰明了,以“对话式导引”来说,引导用户左滑屏幕,很多人对于左滑的定义是不一样的“从左往右”“向左”这些情况都可能出现,所以最好配上箭头或者手势清晰的告知用户滑动方式,如网易云音乐就做的很好。

包容性:

自我更正功能,如微信的话费充值的号码提示

逻辑正确且性能稳定的页面跳转流程。

明确的提示信息和操作错误后的进一步引导,如未购物时查看购物车则使用“局部型空白页导引”引导用户去商品购买页面。

举例:表单验证

在用户提交一个表单的时候为了避免用户错误提交无用内容甚至联合查询或sql注入,通常会进行前端正则或后端验证。而在这个过程中必然存在对用户进行报错提示。如何做好表单的无障碍设计也是一个很头大的问题。我们来看下面的表单。


这个表单是一个有错误验证机制,但是没有用户反馈的表单,用户只知道自己的表单点了提交没有动静,却不知到是哪里错了。


在看这个表单,尝试在邮件栏随便输入点什么东西再点击提交,可以看到它的错误提示。这就是从文字方面进行的一个很好无障碍设计。当然,或许会有人觉得这样的文字提示比较臃肿,那么我们不妨从颜色上进行区分。

成功、警告、错误分别使用不同的颜色来表示,这样对于大多数用户群体来说似乎更能一眼看出自己填写时的问题。

但是如果对于色弱、色盲等用户群体而言,他们看到的可能是这样的,还比不上之前的文字描述来的实在,对于他们的无障碍化我们应该怎么做呢?

我们可以对表单添加额外的图标,在去除了文字赘述的同时又保证了色觉障碍群体能够直观的发现自己填写的表单中的错误部分。

这样对于视觉障碍群体来说是不是看起来比之前清晰多了?

这里同时使用了三种视觉线索来区分错误,颜色、符号、文字,哪怕损失两种也能够正常操作。