处理用户焦虑,提高网站可用性的14种方法 | UX必看

make your website more accessible - operation, design - 处理用户焦虑,提高网站可用性的14种方法 | UX必看

任何设计作品,沟通和传达都是最重要的要素。在如今,人们的生活节奏加快,浏览的时间也变短了,因此对沟通和传达要求也进一步提高。因而在网络世界,数字媒体的可用性,可谓必须首先考虑的优化要素。

然而可用性是一个比较宽泛的概念,涉及到许多方面。而其中有很多是并不需要付出多少代价就可以实现的。下面我们就将为你介绍其中一些,帮助你开始进行可用性改良。

01 总是添加Alt文本

不管是网站还是APP,我们在上传多媒体文件的时候应该加入alt,即“标签”。这里所说的多媒体文件主要指的是视频和图片。

在如今,使用语音阅读器辅助查看屏幕设备的人越来越多,根据英国政府网站gov.uk的调查,该国有高达29%的用户曾借助相关工具访问。因此如今alt标签属性不仅再只是提供给搜索引擎和网站识别内容的标识,对某些用户来说也是网站可用性的直接体现。对alt优化到极限的标志是:如果你的网站被以“纯文本”的形式读取,所有的内容也应该是可用的。

现在很多软件支持在分层文件里就命名好各图层的名称,在导出裁切文件后,alt标签会被存储在文件里,上传后很多CMS系统可以自动提取相关内容。

02 谨慎使用动画

02 Consider animations carefully - operation, design - 处理用户焦虑,提高网站可用性的14种方法 | UX必看

上述的图片是我们从某个网站的GIF动画中提取的,使用了华丽了视察效果,有很好的传达信息的能力。但要知道,在超过40岁的用户中,有高达35%的用户患有不同程度的前庭功能衰弱,这意味着在观赏部分动画的时候他们会感到头晕恶心。而常见的视差动画很容易造成这方面的问题。

考虑到这一点,建议你提供关闭滚动动画,或启用静态网站内容的选项。类似Slack,就提供了隐藏动态图片和标签的选项,这样可以减少屏幕上产生的滚动,同时也不需要彻底下线这类动画而影响到所有的用户。

03 考虑不同的语言

03 Think about other languages - operation, design - 处理用户焦虑,提高网站可用性的14种方法 | UX必看

不是所有项目都需要考虑多语言,但如果你遇到了这类项目,一定要考虑到其他语言下的可用性。在设计视觉元件的时候,务必考虑兼容其他语言的可拓展性。

举例来说,如果你将行高设置的太紧,对于英文来说是没有问题的,但对于法语就不一样了。法语的字母高度会超出行高,因此比如à、è、ù这样的字母头部的小标可能和上面的字母重叠而时区该有的意思。另外有些语言是从右往左读的,而默认的块元素如果没有考虑好排布,有可能会出现大量的错误对其,让读者找不到北……

因此在设计国际性项目时,你设计或修改的模板最好能进行多语言测试,看看不同的语言对排版和渲染的影响有什么区别。毕竟在项目基本成型后,再修改这些东西就会更加麻烦。

04 使用简单直观的文字

很多情况下,是有必要进行严肃处理的,你必须要考虑文字的表面意思。尽管有些时候,颜文字和有趣的提示可以给品牌很好的个性,但对于某些问题,使用简单直白的文字消除歧义是非常有必要的,尤其是在需要用户做出重要的选择时。在撰写每段文本的时候,务必考虑要阅读者的实际需要。

05 使用简单的文字或图形

05 Use simple colours and shapes - operation, design - 处理用户焦虑,提高网站可用性的14种方法 | UX必看

图形和颜色非常重要,它将对用户体验产生重大影响。你需要考虑高度近视、色盲和其他视觉困难的用户,不宜选择难以区分的颜色或大小太小的元素。

普遍认为,对于子病症患者来说,明亮且高对比度的内容是很难观看的,因为他们的注意力很容丢失。而对于色盲用户,对比色是他们区分内容的主要方式,全世界大约有1/12的男性和1/200的女性患有不同程度的色盲,包括:红绿色盲、蓝绿色盲、蓝紫色盲、绿棕色盲等。

Chrome浏览器下有Spectrum等插件,可以帮助你分析网页对于色盲患者来说是怎样的。另外Userway提供的对比度检查器,也可以帮助你确认你的文本和背景对比度是否符合WCAG 2.0 AA或AAA标准。

06 赋予用户多种选择

每个人的需求不同,获取信息的能力也不同,而为了能适配各种情况,就需要提供多种内容。举例来说,要看《哈利波特》,你可以读书、可以看电影也可以听电子书,这三种方式可以满足绝大多数粉丝,不管是视觉困难还是听力困难,都可以吸收到内容。

很多新闻网站都引入了这类功能,比如同一个新闻,你可以选择阅读新闻稿、看报道视频或者听阅读器帮你阅读新闻稿,这些内容都可以通过统一的用户界面呈现,让几乎所有用户都有能力接收。

因此在考虑内容策略时,将“多种输出形式”纳入考虑范围是值得的。尽管有能力障碍的是少部分用户,但如果别人做到了而你没有,那你就将永远失去他们。

07 提供多种选择

对视觉或听觉障碍的人群来说,沟通是比较困难的。因此在很多环节上,都应该设置多种选择。比如在需要输入的地方,你可以考虑纳入输入法输入和语音输入两种选项,甚至考虑记忆用户的使用习惯,让他们一次性选择。

08 提供定制化服务

尽管品牌在线的视觉形象是基于一定的标准的,但有时候你的字体、配色等可能对部分人群没那么友好。因此,建议你为用户提供定制化选项,比如允许他们更换网站的主题(包括开灯/关灯这类功能)和字体大小。

09 考虑键盘操作

09 Think about tabbing - operation, design - 处理用户焦虑,提高网站可用性的14种方法 | UX必看

尽管根据调查如今有超过50%的流量来自移动设备,到哪作为设计师你常用的应该还是电脑和键盘。但你有没有考虑过,如今约有7%的成年人是无法使用鼠标的,他们依靠键盘来浏览计算机上的菜单和网页内容。这将从两个方面影响你的网站:

第一,你的网站的页面布局允许使用键盘来顺序浏览吗?如果采用类似Pinterest的多列纵向对齐布局,由于焦点非常混乱,你几乎不可能用键盘正常实现切换……

第二,你的网站元件在别对焦的时候是否有特定的显示?大多数浏览器都有默认的对焦显示风格(如虚线框),但你实际可以通过改变CSS来制定独特的风格,让被对焦的对象更明显。

为了满足这类用户的需求,花时间考虑组件的排布次序和对焦状态是值得的。

10 不要忘记机器人

人类并不是我们网站的唯一读者,还要记得“机器人”。机器人包括语音操控设备、网络蜘蛛等,它们会扫描网站的内容并记录或输出。尤其是屏幕阅读器如今已经越来越普及,很多患有视力障碍的用户都会配备。

而你网站的结构会影响这些设备对网站内容的识别。其中,网站的文字内容和alt标签的内容是屏幕阅读器最依赖的,而具体如何布局HTML文本,将影响这些设备的实际读取效率和准确性。

11 正确地调整行宽

互动性是引起用户兴趣的关键因素,但不要忘记最重要的还是内容本身。而对于文本内容来说,大片的文字让人很难轻松阅读,甚至会让人感到恐惧。

这里我们不是说不可以使用大量的文字,而是说你需要考虑文字的展示方式。比如文本的长度就必须考虑,如果每行太长,那读者就很难保持阅读,因为在换行的时候容易错行。在阅读大块文本的时候,这个问题会更加严重。

相对的,如果一行太短也并不合适。太短的行迫使用户经常换行阅读,容易打乱用户的阅读节奏。一般来说,建议在英文排版下,每行在50到60个字母左右,中文下每行在30个字左右。

12 避免强迫性提示

12 Avoid anxiety inducing prompts - operation, design - 处理用户焦虑,提高网站可用性的14种方法 | UX必看

在我们浏览商城类网站时,经常看到“枪类推荐”和“最后抢购机会”这样的标语,有些网站还会给一个倒计时……而这些尽管可能提高转化率,却也可能让另一些用户感到焦虑。

根据调查,对这类提示感到焦虑(并非反感,也并非接受这些内容想要购买,而只是产生内心的紧张感)的用户超过10%——这个比例并不小,我认为设计师们有义务联手避免这个问题。尤其是对于某些常用的网站和APP来说,为了让用户可以长期使用,这些带有强迫性的用语和内容应该尽量限制。

13 添加检查功能

13 Add in verifications and checks - operation, design - 处理用户焦虑,提高网站可用性的14种方法 | UX必看

说到关于焦虑的另一个问题,那就是用户可能会疑惑自己填写或提交的数据有没有错误。比如,如果你在购买物品的时候,一路点击下一步,在付完款后弹出的页面只有一个“提交成功”,并且没有查看订单的按钮,你会焦虑吗?尤其在涉及到金钱的情况下,大概率会是的。

因此在设计这类流程时,建议总是在最后加入检查的页面,可以很好地避免用户焦虑。比如在完成交易之前,将订单的详细内容再次呈现给客户,让他们有机会二次检查自己的填写是否正确。

14 考虑操作后的返回

很多人致力于操作流程的优化,这自然是很好的,可以提高用户体验。但在每个操作的最后,用户如何返回的问题却很容易被忽视。实际上处理这个问题很简单,哪怕添加一句提示都能很好地提升用户体验,告诉用户下一步该怎么做即可。比如,在用户填写完一个问卷后,给用户提示“感谢提交,点击按钮返回主页”的简单页面就足够了。这点简单的提示可以很好地减少部分用户的压力,也能帮助他们进一步确认自己的操作已经正常完成了。

14 easy ways to make your website more accessible

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注