交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法

Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则。它们被称为“启发式”,因为它们是广泛的经验法则,而不是特定的可用性指导原则。因此,我们不能把它上升为一种标准,而是应该当做一种经验来学习,然后跟现实中的设计结合来使用。接下来,作者通过一些具体的实例来跟大家深度解析尼尔森十大交互设计原则在设计中的用法~一、Jakob Nielsen(雅各布·尼尔森)简介:Jakob Nielsen(雅各布·尼尔森)是毕业于哥本哈根的丹麦技术...

Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则。它们被称为“启发式”,因为它们是广泛的经验法则,而不是特定的可用性指导原则。因此,我们不能把它上升为一种标准,而是应该当做一种经验来学习,然后跟现实中的设计结合来使用。接下来,作者通过一些具体的实例来跟大家深度解析尼尔森十大交互设计原则在设计中的用法~

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


一、Jakob Nielsen(雅各布·尼尔森)简介:

Jakob Nielsen(雅各布·尼尔森)是毕业于哥本哈根的丹麦技术大学的人机交互博士 , 他拥有79项美国专利,专利主要涉及让互联网更容易使用的方法。尼尔森在2000年6月,入选了斯堪的纳维亚互动媒体名人堂,2006年4月,并被纳入美国计算机学会人机交互学院,被赋予人机交互实践的终身成就奖 。他还被纽约时报称为“Web 易用性大师”,被 Internet Magazine 称为 “易用之王”。

二、尼尔森十大交互设计原则深度解析:

原则一:状态可见原则(Visibility of system status )

系统应该让用户时刻清楚当前发生了什么事情,也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解,一般的方法是在合适的时间给用户适当的反馈,防止用户使用出现错误。

案例一:

比如今日头条的下拉刷新功能:头条页面的刷新功能使用的是下拉刷新的交互方式,当用户下拉页面时,页面状态栏跟内容区中间会出现“新年快乐”的提示,当我松开页面中间会出现“推荐中”的动态提示,加载完毕之后中间出现一条“今日头条推荐引擎有8条更新”的文字提示;这一系列的提示就是我们所说的动态可见原则,如下图:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


案例二:

比如安心记加班中关注和取消圈子功能:当用户点击关注按钮之后,页面中间会出现一个“关注成功”的提示,停留2S之后消失;类似这种,操作之后的提示也是状态可见原则的一中,如下图:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法

原则二:环境贴切原则(Match between system and the real world)

软件系统应该使用用户熟悉的语言、文字、语句,或者其他用户熟悉的概念,而非系统语言。软件中的信息应该尽量贴近真实世界,让信息更自然,逻辑上也更容易被用户理解。

案例一:

比如计算机的软件界面设计:现在我们手机中的计算器软件设计界面,基本上跟我们现实中使用的计算器的样式差不多,下图左一是我们现实中是使用的计算器,左二、三依次为锤子手机和苹果X自带计算器软件的界面,真的是很相似,这样设计能让用户很快上手,易于操作,因为现实生活中用户已经很熟悉计算器的使用方法了,这就是环境贴切原则:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


案例二:

比如新浪微博安卓的中文版和国际版:微博的中文版和国际版的logo和内部页面风格、语言、结构布局包括交互方式也不一样;考虑到国外用户的使用,软件的语言默认为英文,当然还支持各种语言版本,可以根据所需在设置中调整,另外国际版界面的布局使用的设计风格完全遵守谷歌的设计规范,这就是环境贴切原则,具体看下图:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


原则三:用户可控原则(User control and freedom)

用户常常会误触到某些功能,我们应该让用户可以方便的退出。这种情况下,我们应该把“紧急出口”按钮做的明显一点,而且不要在退出时弹出额外的对话框。很多用户发送一条消息、总会有他忽然意识到自己不对的地方,这个叫做临界效应;所以最好支持撤销/重做功能。

案例一:

比如微信聊天中的撤回功能:两个人在微信中聊天的时候,我发了一条消息或者表情,突然觉得不合适,我可以在长按这条消息或者表情,在出现的选择框中选择撤回,然后重新编辑发送,来避免一时没想好而错发消息可能给对方或者自己造成困扰,这就是用户可控原则,具体看下图:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


案例二:

比如谷歌相册删除照片之后的撤销功能:在使用谷歌相册的时候,我们会对照片做一些操作,比如照片的删除,当我在谷歌相册中删除一张照片的时候,它会在底部出现一条提示框,框内后边就会出现撤销的提示,这也是用户可控原则的体现,具体看下图:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


原则四:一致性原则(Consistency and standards)

对于用户来说,同样的文字、状态、按钮,都应该触发相同的事情,遵从通用的平台惯例;也就是,同一用语、功能、操作保持一致。软件产品的一致性包括以下五个方面:

(1)结构一致性:保持一种类似的结构,新的结构变化会让用户思考,规则的排列顺序能减轻用户的思考负担;

案例:

例如微信每个模块的条目布局:微信中每个模块的条目都有统一的“图标+文字信息”的结构样式,能让用户快速了解朋友圈、扫一扫、摇一摇、看一看、搜一搜、附近的人、漂流瓶、购物、游戏及小程序等功能都是作什么的,这就是结构一致性的体现,如下图:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


(2)色彩一致性:产品所使用的主要色调应该是统一的,而不是换一个页面颜色就不同;

案例:

例如网易云音乐的颜色:网易云音乐的图标颜色与界面的主色均为红色,也包括其中一些标签和强调的文字颜色都是红色,整个界面除了图片的有效信息外,都通过灰、白、红色来呈现,界面保持了很好的一致性,这就是色彩一致性原则,如下图:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


(3)操作一致性:能让产品更新换代时仍然让用户保持对原产品的认知,减小用户的学习成本;

案例:

比如安卓版微信、支付宝和钉钉APP中左上角的返回操作:它们三个安卓版的应用内返回上一级操作,都是通过顶部左侧的返回按钮进行的,当然也可以通过安卓的物理返回键,这就是操作一致性的体现,如下图:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


(4)反馈一致性:用户在操作按钮或者条目的时候,点击的反馈效果应该是一致的;

案例:

比如安卓版手机QQ信息列表的打开方式:它的信息都是列表式结构,不管你点击那一行条目,下一级界面都是由右往左滑出,点击顶部左上角的返回按钮会从左往右滑回,体验相当一致;这就是反馈一致性的体现,如下动图:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法

(5)文字一致性:产品中呈现给用户阅读的文字大小、样式、颜色、布局等都应该是一致的;

案例:

例如微信几个关键界面的字体:下图我用红色框框起来的条目部分的文字,三个主界面不尽相同,但是,字体大小、颜色、布局的样式都一样,这样让整个APP视觉上看起来很舒服,这就是字体一致性,因此,我们在做视觉设计的时候尽量使用同意风格的文字。

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


原则五:防错原则(Error prevention)

比一个优秀错误提醒弹窗更好的设计方式,是在这个错误发生之前就避免它。可以帮助用户排除一些容易出错的情况,或在用户提交之前给他一个确认的选项。在此,特别要注意在用户操作具有毁灭性效果的功能时要有提示,防止用户犯不可挽回的错误。

案例一:

比如知乎安卓版本的登录操作:当用户在知乎中登录时,在没有填写完手机号码和密码前,底部的登录按钮是置灰不可点击的,只有两项都填写完整底部的登录按钮才会变为可点击状态,也就会蓝色的,这就是为了防止用户犯更多错误,也是防错原则的一种体现,如下图:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


案例二:

比如安卓版微信发朋圈动态时,点击返回按钮出现的提示弹窗:弹出框方式会增加不可逆操作的难度,当用户发一条动态一半的时候,因为误操作或者其它退出当前状态的时候,使用弹窗是是个不错的选择,因为用户这个操作会让之前辛苦编辑的内容删除找不回,想要再发只能从头开始,对用户造成损失比较大;这就是防错原则的另外一种体现,如下图:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


原则六:易取原则(Recognition rather than recall)

通过把组件、按钮及选项可见化,来降低用户的记忆负荷。用户不需要记住各个对话框中的信息。软件的使用指南应该是可见的,且在合适的时候可以再次查看。

案例一:

比如谷歌相册中的删除照片操作:用一个类似垃圾桶的“图标”标识删除功能,对于用户来讲是有一定的认知负荷的,且点击“删除”之后用户对于造成的后果及影响也不清楚,因此,删除之后出现弹窗提示很有必要,此弹窗清除的写明了删除之后的影响、后续的帮助说明以及操作的选项,弹出框的出现很好的减少了用户前后的记忆,这就是易取原则的体现,如下图:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


案例二:

比如安卓版爱奇艺更新后的新功能引导:更新完APP之后,当用户触发到这些功能时,会出现下图类型的遮罩类的提示,这些提示告诉用户功能所在的地方以及功能的作用;这种做法在很多APP中都会出现,这也是易取原则的一种体现,看下图:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


原则七:灵活高效原则(Flexibility and efficiency of use)

汽车油门—新手用户常常看不见,而且对于高手来说可以通过它快速与汽车互动。这样的系统可以同时满足有经验和无经验的用户。允许用户定制常用功能。

案例一:

比如安卓版本支付宝中的编辑应用功能:支付宝首页的应用是可以根据自身喜好自定义的,包括定义常用应用、排序、删除、新增等等;这样用户可以根据自己的个人兴趣定制自己适合的应用分布方式,这就叫做用户定制常用功能,也就是灵活高效原则的一种体现,如下图:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


案例二:

比如安卓版QQ聊天常用表情模块:安卓版本的QQ聊天界面表情弹窗中会有一个“常用表情”的模块,它把个人平时使用频率或者次数最多的表情进行归类,当用户使用的时候能很快的找到自己喜欢或者常用的表情,提高了聊天效率,体验很好,这也是灵活高效原则的体现,如下图:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


原则八:优美且简约原则(Aesthetic and minimalist design)

对话中的内容应该去除不相关的信息或几乎不需要的信息。任何不相关的信息都会让原本重要的信息更难被用户察觉。

案例一:

苹果手机中自带的软件(IOS11设计规范):在新版本的苹果手机中自带的软件中标题都属于字体放大,界面简洁的设计风格;还有苹果自带的音乐软件中,段落中的标题和正文区别是很明显的,标题明显很大,而正文部分相对较小,这就是优美简约原则的体现,如下图:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


案例二:

例如安卓版网易云音乐及QQ音乐播放页面:网易云音乐和QQ音乐APP音乐播放界面,从视觉及功能布局上面做的相当不错,美观简约、功能主次分明、用户体验不错;也是优美且简约原则的一种体现,如下图:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


原则九:容错原则(Help users recognize, diagnose, and recover from errors)

错误信息应该使用简洁的文字(不要用代码),指出错误是什么,并给出解决建议。也就是在用户出错时如何为出错的用户提供及时正确的帮助呢?即要帮助用户识别出错误,分析出错误的原因再帮助用户回到正确的道路上。如果真的不能帮助用户从错误中恢复,也要尽量为用户提供帮助让用户损失降到最低。

案例一:

比如网易邮箱PC端的注册界面:用户在网易163电脑端注册邮箱时,在输入出错时不但会出现错误的提示,还会给出相应的建议,帮助用户进行正确的抉择,这样就避免用户出现更大的失误并且提高了注册的效率,这是一种相当好的用户体验,也是容错原则的一种体现,如下图:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


案例二:

例如Twitter注册页面的错误提示:用户在注册Twitter账号时,第一步要输入名字和手机号码,当用户输入正确的时候,输入框后边会有绿色的对勾圆圈,提示用户输入正确,可以进入下一步操作了,而当用户输入错误的时候,输入框会变为红色并且在下方出现红色字的错误提示,这样让用户很清楚的知道用户输入错误以及错误的原因,这样用户就知道怎么修改了,这也是容错原则的一种体现,如下图:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


原则十:人性化帮助原则(Help and documentation)

即使系统不适用帮助文档是最好的,但我们也应该提供一份帮助文档。任何帮助信息都应该可以方便地搜索到,以用户的任务为核心,列出相应的步骤,但文字不要太多。

案例一:

例如淘宝APP和知乎APP登录页面的帮助入口:在比较重要的功能入口处有必要提供相应的帮助入口,来解决用户在操作功能过程中遇到的问题或者反馈问题的入口,不要让用户在出现问题时手足无措,不知道怎么办,具体看下图:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


案例二:

比如mac上一些常用的大型软件:原型制作工具Axure RP 8软件、图像编辑软件Photshop CC以及mac上的Safari浏览器,在顶部状态栏上都有有一个“帮助”的入口,也体现了帮助文档的必要性,所以,不管是什么样的产品都要给用户提供一个帮助的入口,用来解决用户操作过程中遇到的问题,如下图:

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法


三、总结

以上就是我对Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则的理解和实例解读,从中学习到了很多的设计经验和技巧,希望对大家有所帮助。

最后,谢谢大家的阅读,喜欢就点个赞哦~~笔芯~~

参考文献:https://www.nngroup.com/articles/ten-usability-heuristics/ 

作者:熊猫小生,交互设计师,4年互联网产品设计经验,曾主导多个互联网产品的设计工作。

 ·End·

微交互 ∣细节设计成就卓越产品

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法

交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法

长按,识别二维码,加关注

分享文章,让更多的人知道微交互


原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/34950/

(0)
交互精选交互精选
上一篇 2018-01-31
下一篇 2018-01-31

相关推荐

  • 用户体验双语术语,附阿里招聘广场舞达人资深用研专员

    这两天朋友圈被一则特殊的招聘刷屏了。先看看关键词:年薪40万,60+,广场舞 KOL(意见领袖)优先!一时间,网友沸腾了。这则招聘发布于1月16日,来自阿里巴巴集团社会招聘网站。从招聘网页上看,阿里对此职位的描述是“淘宝资深用研专员”,全称“淘宝资深用户研究专员”。记者推算了下,大致为阿里P序列中的P6等级。岗位给出的薪水待遇还不低,年薪范围是35万~40万。感兴趣的小伙伴可以转给符合要求的人士哦!点击阅读原文就可以看到这则招聘了。今天...

    2018-01-30
  • SEO营销之浅谈用户体验

    好的产品不是做出来的,而是改出来的。任何一个产品都不可能一招致胜,都需要不断的打磨,改进,尝试过失败之后,才能更为光彩的进入用户的视野。在这个反复修改的过程中,大家提到最多的词恐怕就是“用户体验”了,没有之一。今天,山哥就来跟大家交流一下我对“用户体验”的理解,希望各位看官手下留情。什么是用户体验标准定义:人们对于针对使用或期望使用的产品、系统或者服务的认知印象和回应。通俗讲法:这个东西好不好用,用起来方不方便。总的来说,用户体验是用户...

    2018-03-23
  • 如何平衡广告盈利和用户体验?

    如果你是一名手机应用开发者,你肯定知道广告可以为你的应用提供巨大的收入潜力。可以说手机应用就是在为流量主下金子: 到2020年,将会有高达1890亿美元的收入,而其中仅应用内广告带来的收入就会达到1170亿美元。事实上,我们最近对1000多名应用程序开发者进行了调查,发现高达84%的人承认他们通过广告将应用变现 —— 61%的人声称广告带来了最多的收入。但是,一如既往,能力越大,责任越大。作为一名应用开发者,你要负责确保用户的使用体验,...

    2018-04-06
  • 双11期间,阿里巴巴UED的设计师都在做什么?

    双11 忍不住剁手的冲动?因为你所有的购物喜好,心理,行为和最终的选择,都被一个神秘组织认真研究过。今天我们拉开幕布,看看这个叫阿里巴巴UED的顶尖设计团队。在11月11日这个日子的前后一段时间,当你发现如下症状之一:当你被机场、地铁、公交站牌和网页里频繁出现的双11提醒,感觉重要的时刻就要来临;当你心跳加速,不管什么都先放到购物车里再说;当你最终等待在11号这天的凌晨用风一样的速度支付成功,并长吁一口气;当你认为一切都那么的简单、自然...

    2018-01-31
  • 网友吐槽,各种“小玩具”用户体验很失败!

    据说关注了「没完没了官方」很多人丁丁变大了女票更黏人了一夜3次也不累了好像前几天曼曼更新的那篇硅胶娃娃一样大家一定也经常听说各种小玩具但是真正体验过的其实很少今天曼曼总结了一些网友的用后评价(来源:某博,某宝评价,某圈)『蝴蝶』听到这个名字,应该都很陌生大概就是一种带振动摩擦感的小东西配有蓝牙功能是为了在户外制造情调用的大概就是女生提前塞进去到了户外通过蓝牙控制振动从而达到一种刺激感实际上内.裤和小妹妹之间的空隙很小根本放不了这个玩意儿...

    2018-03-14
  • 我是如何从测试转到产品的?

    为什么我从测试转产品?无论硬件研发还是软件研发,都需要测试工程师找出软件缺陷、保障产品质量,以降低项目风险,我们可能听到过由于某一个漏洞导致公司损失多少钱的例子。而测试的价值就是尽可能早的——发现这些会给公司造成损失的问题,在项目交付前反馈到开发修复。所以测试岗位对于企业来说也至关重要。在做测试时,我一直期望能发挥自己的最大价值,无论是功能性问题还是用户体验问题,我都会一一跟踪。当兼顾项目进度,有些问题来不及修复时,遗留问题我会...

    2018-04-02
  • 【用户体验工作坊】用户体验地图实践

    提升用户体验是企业信息化部本年度重点事项。为此,敏捷推进小组已经组织了两期“用户体验工作坊”,并和京东大学合作举办了“创新训练营”。同时“用户体验工作坊”也是用户体验提升计划的一部分,旨在推动部门内部所有产品进行用户体验的优化升级。参加本次“用户体验工作坊”的有来自企业信息化部各个部门的研发、产品和项目经理近50人。🔺 赵卫老师在讲授用户体验实践方法🔺刘泽鹏老师讲授“用户体验生命周期”赵卫老师首先讲解了用户体验五大原则:01不要强迫用户...

    2018-04-26
  • 《用户体验可视化指南》视频讲书(1)

    我们选择了人民邮电出版社2018年出版的《用户体验可视化指南》作为第一本,带着大家啃书。原因是这本书真的非 常 好,好到可以成为用户体验设计和研究领域的大辞典了。作者引经据典,却因为篇幅受限,很多没有详细展开。不知前因后果的读者,因此会错过很多有意思的观点。所以UXREN为你详细拆解《用户体验可视化指南》,每次10-20分钟,3首歌曲的时间,日积月累,透彻理解经典书籍。第1期: 前言《用户体验可视化》前言部分,介绍了为什么会提出共线图(...

    2018-03-27
  • Axure工具简介

    工具简介主要介绍axure的基本元件使用,熟悉该软件的各个功能区。1.添加元件到画布在打开axure软件之后,添加元件到画布,在左侧元件库中选择要使用的元件,按住鼠标左键不放,拖到画布适合的位置后松开鼠标,如下图所示:2. 添加元件名称在检视面板的元件名称文本框输入元件的自定义名称,这样方便后面制作原型的过程中,设置元件属性等时便于查找元件,如下图所示:3.设置元件位置/尺寸元件的尺寸与位置可以通过鼠标拖拽,也可以在快捷功能或元件样式中...

    2018-03-18
  • 邀你参与丨2018中国用户体验行业调研

    什么是用户体验设计?往小了说,它包括视觉设计、交互设计、用户研究等,宽泛一点讲,产品、文案、服务流程的设计也是用户体验的一部分。用户体验不是一个独立的岗位,它应该是整个团队的一种思考维度。而在其中,你又扮演着什么样的角色呢?在行业中你的专业能力和知识储备在什么层次?用户体验行业的未来,将会往何处发展?自2013年以来,IXDC已连续开展了5次用户体验行业调研,回收了上万份从业人员的反馈,并总结出调研报告,以全局角度俯瞰,了解行业现状与存...

    2018-04-19