译者 | 薛老板娘
排印 | 薛小助
简而言之的“采用者新体验”,只不过采用者可交互的是后端的可视化结构设计,因此可视化结构设计很大是网络人的必不可少专业技能。
归纳的较为控制系统,网络商品结构设计参照最少的是:安德森易用性准则。
安德森的五大易用性准则是他们秋招考试解题操作过程中时常实地考察的习题,也是做商品副经理后做商品结构设计与提高采用者新体验结构设计的关键参照国际标准,值得称赞深入探讨与利用。
安德森(Jakob Nielsen)是理工学院毕业于斯德哥尔摩,瑞典控制技术理工学院的可视化式教授 ,于1995年1月1日刊登了「五大易用性准则」。与此同时, 他保有79项英国专利权,专利权主要就牵涉让网络更容易采用的方式。安德森在2006年4月,并被列入英国计算机控制系统专业委员会可视化式理工学院,被突显人机可视化课堂教学的终生荣誉奖 。能看出却是很牛的。
接下去他们就来看一看这五大准则依次是甚么:
1状态可见准则
首先,控制系统应该让采用者知道发生了甚么,在适当的时间内做出适当的反馈。这条很简单,是指采用者的每次操作,你都得给他个反馈,成功了就告诉他成功了,失败了就告诉他失败了。比如京东领优惠,如果成功了会弹个提示“领取成功,感谢您的参与”,当然如果领取失败也会弹一个类似的提示 还比如今日头条的下拉刷新功能:头条页面的刷新功能采用的是下拉刷新的可视化方式,当采用者下拉页面时,页面状态栏跟内容区中间会出现“推荐中”的动态提示,加载完毕后中间出现一条“今日头条推荐引擎有18条更新”的文字提示;这一系列的提示是他们所说的状态可见准则,如下图:其次,状态可见准则还指采用者在商品上的任何操作,不论是单击、滚动却是按下键盘,页面应即时给出反馈。“即时”是指,页面响应时间小于采用者能忍受的等待时间。
如果反应时间有点慢,也请用进度条or等待or下载等动效或其他形式告诉采用者当下的情况;千万别让采用者在懵逼的一直等,不知道发生了甚么。
比如我就见过一个商品的加载页面是两个卡通动物聊天的形式,还挺有意思的,不知不觉就加载完了,这样让等待操作过程变的能忍受。
这都属于状态可见准则的范畴。
2环境贴切准则
环境贴切准则是指:控制系统的一切表现和表述,应该尽可能贴近采用者所在的环境(包括:年龄、学历、文化、时代背景)。《iPhone可视化式指南》里提到的隐喻与拟物化是对这一个准则很好的课堂教学,比如下面这些图标的结构设计是很好的拟物化。 还比如电商里的购物车,在电商出现之前,他们去超市买东西就会进门推一个购物车,然后把想要的东西都放进去,然后一起结账。电商出现后,大家看到购物车图标会感觉很亲切,不用思考也知道这个购物车是甚么意思。 此外,文字叙述部分还应该采用易懂和约定俗成的表达。说的直白一些,是3个字:说人话。比如你们的目标采用者群体是老年人,那你的表述要按照他们的常用语去叙述;如果你的目标采用者群体是小学生,那你就要换一套表述方式了。3采用者可控准则
采用者可控准则是指:为了避免采用者的误操作,控制系统应提供撤销和重做功能。这种针对的是那种容易发生误操作的场景。比如他们正在word里写PRD,这时候你的猫跳到键盘上,噼里啪啦打了一堆火星文,这时候撤销功能就很好用了;还比如微信聊天中的撤回功能:两个人在微信中聊天的时候,我发了一条消息或者表情,突然觉得不合适,我能在长按这条消息或者表情,在出现的选择框中选择撤回,然后重新编辑发送,来避免一时没想好而错发消息可能给对方或者自己造成困扰。还比如一些机器设备的reset按钮,重启按钮等等。
这都是遵循采用者可控准则做的结构设计。
4一致性准则
对于采用者的预期来说,同样的文字、状态、按钮,都应该触发相同的事情;这是一致性准则,也是,同一用语、功能、操作保持一致。软件商品的一致性包括以下五个方面。结构一致性:保持一种类似的结构,新的结构变化会让采用者思考,规则的排列顺序能减轻采用者的思考负担;例如微信每个模块的条目布局:微信中每个模块的条目都有统一的“图标+文字信息”的结构样式,能让采用者快速了解朋友圈、扫一扫、摇一摇、看一看、搜一搜、附近的人、漂流瓶、购物、游戏及小程序等功能都是做甚么的,这是结构一致性的体现。 色彩一致性:商品所采用的主要就色调应该是统一的,而不是同一个商品采用多种色调;例如网易云音乐的颜色:网易云音乐的图标颜色与界面的主色均为红色,也包括其中一些标签和强调的文字颜色都是红色,整个界面除了图片的有效信息外,都通过灰、白、红色来呈现,界面保持了很好的一致性,这是色彩一致性准则,如下图: 操作一致性:能让商品更新换代时仍然让采用者保持对原商品的认知,减小采用者的学习成本;这是操作一致性的体现,如下图: 反馈一致性:采用者在操作按钮或者条目的时候,点击的反馈效果应该是一致的;比如手机QQ信息列表的打开方式:它的信息都是列表式结构,不管你点击哪一行条目,下一级界面都是由右往左滑出,点击顶部左上角的返回按钮会从左往右滑回,新体验相当一致;这是反馈一致性的体现,如下动图: 文字一致性:商品中呈现给采用者阅读的文字大小、样式、颜色、布局等都应该是一致的;例如微信几个关键界面的字体:下图我用红色框框起来的条目部分的文字,三个主界面不尽相同,但是,字体大小、颜色、布局的样式都一样,这样让整个APP视觉上看起来很舒服,这是字体一致性,因此,他们在做视觉结构设计的时候尽量采用统一风格的文字。 5防错准则
防错准则的定义是:通过控制系统的结构设计、重组或特别安排,防止采用者出错。首先,如果某些操作不能进行,那就置灰或隐藏,不要在采用者点击后才提醒不能操作。只有当11位手机号输入完成,并且符 其次,如果有某些内容不能选择,就置灰或者隐藏,不要等采用者点击完成时才告知不能采用。比如淘宝这个我想买个手机,选择了5.5寸,套餐选择官方标配,版本选择英国后,存储容量就只有128G能选择了,32G的是没有的,因此置灰了,变为不可点击状态。这是防错准则。
6
易取准则
易取准则是指:通过把组件、按钮及选项可见化,来降低采用者的记忆负荷。软件的采用指南应该是可见的,且在合适的时候能再次查看,不需要让采用者记忆才能正确操作。比如腾讯视频的锁定功能引导:当你切换横屏和竖屏的时候,在屏幕中间会提示“点击锁定”,还包含新推出的播放中长按快进快退功能,这些提示告诉采用者功能所在的地方以及操作方式,不需要采用者凭记忆来操作;这是易取准则的一种体现,看下图:7
灵活高效准则
商品的采用者总是会分为新手小白采用者、熟练采用者,灵活高效准则是指通过很大的结构设计来满足不同水平的采用者需求,允许采用者定制常用功能。 比如绝大多数商品都有新手引导功能,对于新采用者来说是需要通过这些信息来了解一个商品的,但是对于老采用者来说可能就不需要了,因此在新手引导中提供一个跳过功能,对老采用者是较为友好的。还比如支付宝中的编辑应用功能:支付宝首页的应用是能根据自身喜好自定义的,包括定义常用应用、排序、删除、新增等等;这样采用者能根据自己的个人兴趣定制自己适合的应用分布方式,这就叫做采用者定制常用功能,也是灵活高效准则的一种体现,如下图: 8易扫准则
网络采用者浏览页面的动作不是读,不是看,而是扫。如果大家做过眼动实验,也是通过眼动仪观察大家在页面的视线轨迹,大概类似于一个F型,这同样也是尼尔森F模型提到的理论。 易扫,意味着突出重点,任何不相关的信息都会让原本关键的信息更难被采用者察觉,因此要弱化和剔除无关信息。苹果手机中自带的软件(IOS11结构设计规范):在新版本的苹果手机中自带的软件中标题都属于字体放大,界面简洁的结构设计风格;还有苹果自带的音乐软件中,段落中的标题和正文区别是很明显的,标题明显很大,而正文部分相对较小,这是优美简约准则的体现,如下图: 9容错准则
容错准则是指:要帮助采用者从错误中恢复,将损失降到最低,例如页面的自动保存,现在word和石墨文档等工具做的都不错。如果错误无法自动挽回,则提供详尽的说明文字和指导方向,帮助采用者识别出错误,分析出错误的原因再帮助采用者回到正确的道路上。比如网易邮箱PC端的注册界面:采用者在网易163电脑端注册邮箱时,在输入出错时不但会出现错误的提示,还会给出相应的建议,帮助采用者进行正确的抉择,这样就避免采用者出现更大的失误并且提高了注册的效率,这是一种相当好的采用者新体验,也是容错准则的一种体现,如下图: 10人性化帮助准则