尼尔森十大原则笔记梳理与案例说明

前言

最近在梳理和学习交互设计相关的原则，补充理论知识，有助于让自己变得更加专业，也方便与产品经理和其他同事沟通设计思路。尼尔森十大可用性原则可谓是交互设计原则中的经典，由 “易用之王”雅各布·尼尔森在1995年提出，具有广泛的通用性。以下是我结合自己的理解整理的相关笔记以及找的一些案例说明。

思维导图

①状态可见（Visibility of system status）【感知】

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.​系统应该让用户时刻清楚当前发生了什么事情，在合适的时间给用户适当的反馈。​ （也就是快速地让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解）

实践要点

· 向用户反馈现在所处状态/进度/位置

· 给用户及时的反馈

正面场景案例

· 手机顶部的状态栏，就是让用户时刻了解自己手机的状态，包括网络信号、电量等信息

iOS 状态栏

· 页面加载过程中，显示进度条和进度说明，可以让用户了解加载状态，减少等待的焦虑感

加载状态展示

· toast提示是一种常见的反馈形式，可以在不影响用户操作的情况下及时反馈用户操作的结果

取消关注的反馈提示

反面场景案例

页面加载时进度条和标题栏融为一体不易察觉，且页面空白无感知  

②匹配现实世界认知（Match between system and the real world） 【易懂】

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

实践要点

· 人性化的文案表达

    用户看得懂的语言

    情感化幽默化的表达

· 采用符合用户实际生活认知的隐喻

    动效和图形符合现实世界认知

正面场景案例

网易云音乐的播放界面采用播放唱片的设计样式

B站和芒果TV面向不同的用户群体，对于频道分类有不同的命名

反面场景案例

掌上生活未登录时点击右上角类似扫一扫的icon，进入登录界面；登录后再次点击，进入付款码界面而不是扫一扫界面，不符合用户认知

③用户控制和自由（User control and freedom）【可控】

Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.用户常常会误触到某些功能，我们应该让用户可以方便的退出。这种情况下，我们应该把“紧急出口”按钮做得明显一点，而且不要在退出时弹出额外的对话框。很多用户发送一条消息、总会有他忽然意识到自己不对的地方，这个叫做临界效应；所以最好支持撤销/重做功能。

实践要点

· 让用户可进可退

· 用户可以随时选择退出

正面场景案例

微信聊天中的撤回功能

反面场景案例

黄油相机编辑图片时只有撤销没有重做，不能退回撤销前的效果

④一致性（Consistency and standards）【统一】

Users should not have to wonder whether different words, situations, or actions mean the same thing. 用户不需要担心不同的文字、状态或操作是不是意味着同样的功能。（对于用户来说，同样的文字、状态、按钮，都应该触发相同的事情，遵从通用的平台惯例；也就是，同一用语、功能、操作保持一致。​）

实践要点

· 从内容维度

    结构一致性

    色彩一致性

    操作一致性

    反馈一致性

    文字一致性

· 从对象维度

    与平台规范保持一致

    与自身产品保持一致

    与用户预期保持一致

正面场景案例

微信的“发现”和“我”的列表布局，从icon到文字样式都是保持一致的

反面场景案例

松鼠记账的修改密码、本位币设置和新建周期记账页面中右上角表示确认的按钮样式不一致

⑤防错（Error prevention）【防范】

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.​比一个优秀错误提醒弹窗更好的设计方式，是在这个错误发生之前就避免它。可以帮助用户排除一些容易出错的情况，或在用户提交之前给他一个确认的选项。在此，特别要注意在用户操作具有毁灭性效果的功能时要有提示，防止用户犯不可挽回的错误。

实践要点

· 置灰或隐藏不常用的或负面的功能按钮

· 对常犯错误进行及时提醒或事前提醒

· 利用用户的联想防止错误，如用红色文字/按钮警示用户

· 使用临时状态进行重要操作，执行重要操作时提供确认操作

· 产品设计时尽量做到不让用户混淆

    即使有人为疏忽也不会发生错误的设计——不需要注意力

    外行人来使用也不会出错的设计——不需要经验和直觉

    不管是谁或在何时工作都不会出错的设计——不需要专门知识和高度技能

正面场景案例

微信编辑朋友圈可见范围时点击返回，会提示是否保存修改

在未输入有效的手机号时，获取验证码的按钮置灰不可点击

反面场景案例

松鼠账单在导出账单时，默认选择默认导出，此时其实不支持自定义选择账本、账户和时间，但界面上没有隐藏这些选项，点击也无任何反馈，让用户感到疑惑

⑥识别好过记忆（Recognition rather than recall）【易取】

Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.通过把组件、按钮和选项可见，最小化用户的记忆负担。用户不必记住各个对话框中的信息。系统的使用说明应该是可见的，或在合适的时候易于检索。​

实践要点

· 用户提交内容时把结果展示出来让用户确认

· 将选择对象可视化，或丰富记忆线索

· 使用通用的指令，减少用户记忆负担

· 为用户提供历史记录或草稿，让用户方便查询

· 减少用户输入成本，如提供选项、默认值或手势输入，自动默认＞用户选择＞用户输入

· 自动读取、记录信息，减少操作路径

正面场景案例

在淘宝搜索时可以根据输入的的内容推荐搜索关键词，减轻用户输入成本

提交订单时会把订单详情内容展示给用户进行确认

反面场景案例

微信在没有获取到权限时，会用文字提示用户去开启，用户很难记住开启权限的路径

⑦灵活高效（Flexibility and efficiency of use）【便捷】

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.​加速器——新手用户常常看不见——通常可以加速专家用户的交互，这样系统就可以同时满足没有经验和有经验的用户。允许用户定制常用功能。

实践要点

· 突出常用功能，提供快捷键

· 提供撤销/重做功能

· 提供历史记录功能（在以前基础上操作，定制化）

正面场景案例

搜狗输入法支持滑行输入，让专业用户输入更高效

支付宝用户可以自定义首页的常用应用  

反面场景案例

随手记在流水页不支持长按或左滑进行快速删除，必须进入详情页才可以

⑧优美且简约（Aesthetic and minimalist design）【简约】

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.对话中的内容应该去除不相关的信息或几乎不需要的信息。任何不相关的信息都会让原本重要的信息更难被用户察觉。​

实践要点

· 让用户注意力有承接性，不出现视觉跳跃

· 保证信息可读性，清晰明了，重点突出

· 建立清晰的视觉层级和信息层级

· 如无必要，勿增实体

· 提示一次只给一个

· 沉浸式体验独占全屏

正面场景案例

App Store 首页的编辑推荐文章都以卡片展示，突出标题和图片，没有多余的内容

反面场景案例

花生地铁的新闻页面布局较为杂乱，Banner下方的四个按钮很突兀，信息流中还穿插着签到

⑨帮助用户确认、诊断和纠正错误（Help users recognize, diagnose, and recover from errors）【容错】

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.错误信息应该用简单的语言(不要用代码)来表达，准确地指出问题所在，并建设性地提出解决方案。​

实践要点

· 用用户能够理解的语言告诉用户错误原因

· 给用户提供确切的解决办法

· 安抚挫败感，情绪化表达

· 自动纠错，并及时进行修正，将给用户带来极大的便利

正面场景案例

淘宝在网络错误时，会明确原因，安抚用户，并提供刷新按钮

反面场景案例

12306操作频繁或弱网时，toast提示“操作失败”，让用户看不懂且没有提供明确的解决方案

⑩人性化帮助（Help and documentation）【帮助】

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.即使不需要文档就可以使用系统也更好，但可能有必要提供帮助和文档。任何这样的信息都应该易于搜索，集中在用户的任务上，列出要执行的具体步骤，并且不要太大。​

 

帮助提示优先级

· 无需提示，简单易懂

· 一次性提示，只需要提示一次用户就懂

· 常驻提示

· 帮助文档

实践要点

· 在需要的情况下自动出现

· 帮助文档应该方便寻找，比如放在显眼的菜单栏

· 帮助操作应该易于理解，比如图文引导

· 方便用户应用，如在操作的同时就能看见帮助的信息

正面场景案例

广州地铁乘车码页面右上角有很明显的“帮助”入口，可以帮助用户快速确认起点终点换乘路线

反面场景案例

花生地铁的图文引导做得很好，但是在首页很难找到入口，感叹号更像是一个警示图而不是一个帮助入口

总结

现在的APP已经越来越注重用户体验，想找到很典型的反面例子还挺不容易的，通过正反面举例也让自己对这些原则印象更加深刻。尼尔森十大原则是比较通用的可用性原则，尽管以前曾学习研究过，这次重新复习仍有新的收获。

参考文章

https://www.nngroup.com/articles/ten-usability-heuristics/

尼尔森十大交互原则

尼尔森十大可用性原则

尼尔森十大交互原则思考心得

交互十大原则（尼尔森十大交互原则）