雅各布·尼尔森(Jakob Nielsen)的十大可用性原则,它们被称为“启发式”,因为它们是广泛的经验法则,而不是特定的可用性指导原则。因此,我们不能把它上升为一种标准,而是应该当做一种经验来学习,然后跟现实中的设计结合来使用。
接下来,通过一些具体的实例来跟大家深度解析“尼尔森十大可用性原则”在设计中的用法。
雅各布·尼尔森(Jakob Nielsen)简介
雅各布·尼尔森(Jakob Nielsen)是毕业于哥本哈根的丹麦技术大学的人机交互博士,他拥有79项美国专利,专利主要涉及让互联网更容易使用的方法。尼尔森在2000年6月,入选了斯堪的纳维亚互动媒体名人堂,2006年4月,并被纳入美国计算机学会人机交互学院,被赋予人机交互实践的终身成就奖。他还被纽约时报称为“Web 易用性大师”,被 Internet Magazine 称为 “易用之王”。
原则一:「状态可见原则」在设计中的应用
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
系统应该让用户时刻清楚当前发生了什么事情,也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解,一般的方法是在合适的时间给用户适当的反馈,防止用户使用出现错误。
场景案例一:页面下拉刷新,页面加载
场景案例二:按钮点击后的反馈
原则二:「环境贴切原则」在设计中的应用
The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
软件系统应该使用用户熟悉的语言、文字、语句,或者其他用户熟悉的概念,而非系统语言。软件中的信息应该尽量贴近真实世界,让信息更自然,逻辑上也更容易被用户理解。
场景案例一:软件使用界面与现实产品使用界面贴切
比如计算器的软件界面设计和现实中的计算器界面一致,这样设计能让用户很快上手,易于操作,因为现实生活中用户已经很熟悉计算器的使用方法了,这就是环境贴切原则。
场景案例二:语言文化习惯贴切
比如新浪微博安卓的中文版和国际版:微博的中文版和国际版的logo和内部页面风格、语言、结构布局包括交互方式也不一样;考虑到国外用户的使用,软件的语言默认为英文,当然还支持各种语言版本,可以根据所需在设置中调整,另外国际版界面的布局使用的设计风格完全遵守谷歌的设计规范,这就是环境贴切原则,具体看下图:
原则三:「用户可控原则」在设计中的应用
用户常常会误触到某些功能,我们应该让用户可以方便的退出。这种情况下,我们应该把“紧急出口”按钮做的明显一点,而且不要在退出时弹出额外的对话框。很多用户发送一条消息、总会有他忽然意识到自己不对的地方,这个叫做临界效应;所以最好支持撤销/重做功能。
场景案例一:比如微信聊天中的撤回功能
两个人在微信中聊天的时候,我发了一条消息或者表情,突然觉得不合适,我可以在长按这条消息或者表情,在出现的选择框中选择撤回,然后重新编辑发送,来避免一时没想好而错发消息可能给对方或者自己造成困扰,这就是用户可控原则。
场景案例二:比如谷歌相册删除照片之后的撤销功能:
在使用谷歌相册的时候,我们会对照片做一些操作,比如照片的删除,当我在谷歌相册中删除一张照片的时候,它会在底部出现一条提示框,框内后边就会出现撤销的提示,这也是用户可控原则的体现。
原则四:一致性原则在设计中的应用
对于用户来说,同样的文字、状态、按钮,都应该触发相同的事情,遵从通用的平台惯例;也就是,同一用语、功能、操作保持一致。
软件产品的一致性包括以下五个方面:
1.结构一致性:保持一种类似的结构,新的结构变化会让用户思考,规则的排列顺序能减轻用户的思考负担。
场景案例:例如:微信每个模块的条目布局:微信中每个模块的条目都有统一的“图标加文字信息”的结构样式,能让用户快速了解朋友圈、扫一扫、摇一摇、看一看、搜一搜、附近的人、漂流瓶、购物、游戏及小程序等功能都是作什么的,这就是结构一致性的体现,如下图:
2.色彩一致性:产品所使用的主要色调应该是统一的,而不是换一个页面颜色就不同。
场景案例:例如:网易云音乐的颜色:网易云音乐的图标颜色与界面的主色均为红色,也包括其中一些标签和强调的文字颜色都是红色,整个界面除了图片的有效信息外,都通过灰、白、红色来呈现,界面保持了很好的一致性,这就是色彩一致性原则。
3.操作一致性:能让产品更新换代时仍然让用户保持对原产品的认知,减小用户的学习成本。
场景案例:比如:安卓版微信、支付宝和钉钉APP中左上角的返回操作:它们三个安卓版的应用内返回上一级操作,都是通过顶部左侧的返回按钮进行的,当然也可以通过安卓的物理返回键,这就是操作一致性的体现。
4.反馈一致性:用户在操作按钮或者条目的时候,点击的反馈效果应该是一致的。
场景案例:比如:安卓版手机QQ信息列表的打开方式:它的信息都是列表式结构,不管你点击那一行条目,下一级界面都是由右往左滑出,点击顶部左上角的返回按钮会从左往右滑回,体验相当一致;这就是反馈一致性的体现。
5.文字一致性:产品中呈现给用户阅读的文字大小、样式、颜色、布局等都应该是一致的。
场景案例:例如微信几个关键界面的字体:下图我用红色框框起来的条目部分的文字,三个主界面不尽相同,但是,字体大小、颜色、布局的样式都一样,这样让整个APP视觉上看起来很舒服,这就是字体一致性,因此,我们在做视觉设计的时候尽量使用统一风格的文字。
原则五:防错 原则在设计中的应用
比一个优秀错误提醒弹窗更好的设计方式,是在这个错误发生之前就避免它。可以帮助用户排除一些容易出错的情况,或在用户提交之前给他一个确认的选项。在此,特别要注意在用户操作具有毁灭性效果的功能时要有提示,防止用户犯不可挽回的错误。
场景案例一:比如网易新闻安卓版本的登录操作
当用户在网易新闻中登录时,在没有填写完手机号码和验证码前,底部的登录按钮是置灰不可点击的,只有两项都填写完整底部的登录按钮才会变为可点击状态,也就会红色的,这就是为了防止用户犯更多错误,也是防错原则的一种体现。
案例二:比如安卓版微信发朋圈动态时,点击返回按钮出现的提示弹窗
弹出框方式会增加不可逆操作的难度,当用户发一条动态一半的时候,因为误操作或者其它退出当前状态的时候,使用弹窗是个不错的选择,因为用户这个操作会让之前辛苦编辑的内容删除找不回,想要再发只能从头开始,对用户造成损失比较大;这就是防错原则的另外一种体现.
原则六:易取原则在设计中的应用
通过把组件、按钮及选项可见化,来降低用户的记忆负荷。用户不需要记住各个对话框中的信息。软件的使用指南应该是可见的,且在合适的时候可以再次查看。
案例一:比如谷歌相册中的删除照片操作
用一个类似垃圾桶的“图标”标识删除功能,对于用户来讲是有一定的认知负荷的,且点击“删除”之后用户对于造成的后果及影响也不清楚,因此,删除之后出现弹窗提示很有必要,此弹窗清楚的写明了删除之后的影响、后续的帮助说明以及操作的选项,弹出框的出现很好的减少了用户前后的记忆负荷,这就是易取原则的体现
案例二:比如安卓版爱奇艺更新后的新功能引导
更新完APP之后,当用户触发到这些功能时,会出现下图类型的遮罩类的提示,这些提示告诉用户功能所在的地方以及功能的作用;这种做法在很多APP中都会出现,这也是易取原则的一种体现
原则七:灵活高效原则在设计中的应用
汽车油门—新手用户常常看不见,而且对于高手来说可以通过它快速与汽车互动。这样的系统可以同时满足有经验和无经验的用户。允许用户定制常用功能。
案例一:比如安卓版本支付宝中的编辑应用功能
支付宝首页的应用是可以根据自身喜好自定义的,包括定义常用应用、排序、删除、新增等等;这样用户可以根据自己的个人兴趣定制自己适合的应用分布方式,这就叫做用户定制常用功能,也就是灵活高效原则的一种体现,
案例二:比如安卓版QQ聊天常用表情模块
安卓版本的QQ聊天界面表情弹窗中会有一个“常用表情”的模块,它把个人平时使用频率或者次数最多的表情进行归类,当用户使用的时候能很快的找到自己喜欢或者常用的表情,提高了聊天效率,体验很好,这也是灵活高效原则的体现
原则八:优美且简约原则在设计中的应用
对话中的内容应该去除不相关的信息或几乎不需要的信息。任何不相关的信息都会让原本重要的信息更难被用户察觉。
案例一:苹果手机中自带的软件(IOS11设计规范)
在新版本的苹果手机中自带的软件中标题都属于字体放大,界面简洁的设计风格;还有苹果自带的音乐软件中,段落中的标题和正文区别是很明显的,标题明显很大,而正文部分相对较小,这就是优美简约原则的体现。
案例二:例如安卓版网易云音乐及QQ音乐播放页面
网易云音乐和QQ音乐APP音乐播放界面,从视觉及功能布局上面做的相当不错,美观简约、功能主次分明、用户体验不错;也是优美且简约原则的一种体现。
原则九:帮助用户识别、诊断和从错误中恢复原则在设计中的应用
错误信息应该用简单的语言(不要用代码)来表达,准确地指出问题所在,并建设性地提出解决方案。
场景案例一:常见的错误提示框
场景案例二:支付密码错误时的操作,“重试”可以让用户在不小心输入错误中立即恢复。
原则十:帮助和文档原则在设计中的应用
即使不需要文档就可以使用系统也更好,但可能有必要提供帮助和文档。任何这样的信息都应该易于搜索,集中在用户的任务上,列出要执行的具体步骤,并且不要太大。
场景案例一:页面上的的帮助提示
更多参考: