【交互】法则的力量(一)：启发式评估 or 尼尔森法则

作者: 卜噪大仙 | 来源:发表于2019-10-05 15:04 被阅读0次

作为一个设计师，经常会听说各种各样的设计法则。这些法则无疑是好用的，是前辈们经过大量的实战，并结合各学科总结出来的精华。

在设计过程中使用这些法则，可以让我们避免很多“麻烦”，这些法则就像是前辈们过坑之后竖起的良心路标，沿着这些路标，能让我们的设计之路走的更顺滑~比飘柔都好使。

不是说前辈的经验就是绝对正确的，也许坑里会有美好风景，会有新发现，但是不得不考虑的是，你是否有资源、有能力跳进坑里，并保证从坑里活着出来？

大公司会有专业的用研小组，专门分析用户数据、发现问题，也就是专门研究各种“坑”。但绝大多数公司都没有这种实力组建用研小组，这时候法则就显得尤为重要。

遵循这些法则，能够让你离用户更近，做出体验更好的产品。

其实大公司，更加注重这些法则的运用，因为大公司更加重视效率，或者说成本，使用这些法则不仅是为了提升用户体验，更是让我们在有限的时间内，把设计做的尽可能完美，提高设计性价比。

用户体验的核心是用户需求。说白了就是帮用户解决问题，专业点叫“用户痛点”。既然是要解决问题，那就要先来分析问题。

其实无论什么问题，都需要衡量指标。衡量指标的重要性在于使问题具体化，直接用“好坏”来描述显然是没办法解决问题的，使用衡量指标来具体描述问题、层层刨析，问题自然迎刃而解。

用户体验之风越吹越大，可以说是混的非常眼熟了，但到底该怎么来衡量一个产品用户体验的好坏？这时候，法则就该出场了。没错，这些交互法则，就是用户体验的衡量指标。

如果我们在前期设计阶段就考虑到了这些交互法则，设计评审的时候，过高率必须飙升，即使吵起架来都理直气壮。

总之，罗嗦了这么多，也只是想强调法则的重要性，好用程度拯救各种年少秃头。

既然这么有用，那必须学起来啊！

然鹅，尽管，网上流传着各式各样的交互法则，但很多都是重叠的内容，甚至有些文章经过一路的复制粘贴，已经变得面目全非，不知所云。本仙儿尝试对这些法则进行一次尽可能全面的总结，并结合实例，演示在交互设计中是如何具体运用的。

希望对大家有所启发。帮助大家保卫发际线。哪怕是一丢丢，也值得！嗯！

那就正式开始叭~

交互法则第一弹↓

启发式评估 /尼尔森原则

启发式评估，英文：Heuristic Evaluation。1995年，由雅各布·尼尔森 (Jakob Nielsen) 及其同事创造，启发式评估的目标是找出设计中的可用性问题。

一共10条，也被称为尼尔森十大可用性原则，是最经典也是最常用的设计评估法则。

可分为三大块：

这三大块，也可以理解为用户体验路径的三个重要节点：触发前、触发中、触发后。

具体内容：

1、Visibility of system status 系统状态可见

又称为可视性原则，即：让用户知道系统在做什么；
系统状态有反馈，等待时间要合理；

最近很常见的应用场景就是加载动效，告知用户系统状态的同时，增加趣味性，缓解等待烦躁情绪 ↓

图片来源于Dribbble Alpha Team 侵删

2、Match between system and the real world 系统与现实世界的匹配

又称为环境贴切原则，即：使用用户语言，而不是开发者语言；
贴近实际生活，而不是学术概念。总之，要使用用户可理解的表现方式；
信息展示要自然贴切，逻辑正确，将用户认知成本降到最低；

千言万语汇成一句话：请说人话！

这条法则，应用场景非常多，拟物化设计就是最好的例子。像计算器APP，就是模仿现实生活中计算器的样子，还有相机应用、电子书翻页效果等。最近比较常见的就是各种购物APP的VIP卡、电影票、优惠券等设计，都是模仿现实生活中的样子。这种模仿会让用户产生天然熟悉感，快速上手，也就是前面说的降低用户认知成本。

展示一个我最近很喜欢小程序：粤省事，虽然我不吃福建人，用不到这个小程序，但却不妨碍我对它的喜爱，完美演绎什么叫“系统与现实世界的匹配”：

这个小程序由“数广”体验设计团队设计完成，团队成员主要来自腾讯

附一段他们的设计阐述，写的可谓是通俗易懂有内涵↓

原文：
证件本体的设计上，我们更多采用了轻质感拟物化设计。从实体证件中提取具有识别性的颜色和特征图形，进行视觉优化。同时，在 “视觉的颜色” 和 “跟真实颜色走” 两个点间，我们选择了跟真实颜色走。通过这些简单而必要的视觉隐喻，减少用户记忆压力，从直观层面上理解业务，更快作出反应和决定。

3、User Control and Freedom 用户可控性/用户自由

又称为撤销重做原则，即：操作失误可退回；
用户经常会误触系统功能，这时就需要一个清晰的“紧急出口”来离开非预期状态，而不是必须拓展一个新窗口；

例如无人不知的Ctrl+Z（撤销快捷键），就是这个原则的最强运用。以及微信消息撤回功能、邮件撤回功能等。

这个太常见了，就不放图了叭。

4、Consistency and standards 统一和标准

又称为一致性原则，即：同一事物和同类操作的表示要各处保持一致；
不要让用户去考虑不同的单词、场景、动作是否意味着同样的东西；
遵循平台规范；

这条原则，除非是刚开始接触设计的新手，但凡头发少一点的，都已经自觉使用了；比如各种“规范”，色彩规范、字体规范、组建规范等，都是这条原则的实践；

APP中各模块信息设计，会有明显区分，并各自保持一致。下图中不同层级的Icon设计，很容易就能让用户感知到谁跟谁是一伙的。

网易考拉首页 /淘宝首页 /小米应用商店分类页

以及像Adobe家族的软件，即使不是自己常用的那款，也一眼就能认出是Adobe没错了，而且Adobe各个软件的界面设计、快捷键等，都是相通的，都可以作为这条原则的案例。

5、Error prevention 防错性

又称为防错原则，即：比错误提示更友好的是——使用一种谨慎的设计方式，从一开始就防止问题的发生；
要么消除容易出错的条件，要么检查这些条件，在用户触发操作时向他们提供确认选项，及早消除误操作；

例如，删除某项内容，系统都会提示是否真的要删除，用户确认之后才会真的删除；填写手机号、邮箱等账号系统会自动检测格式是否正确：

淘宝更换手机号 /微信删除公众号 /小米手机相册删除照片

6、Recognition rather than recall 识别胜于回忆

又称为易取原则，即：让用户辨认或者说识别，是一种比让用户回忆更好的方式；
通过将对象 /操作 /选项可视化，减轻用户记忆负担；
不应该让用户必须记住对话框的每部分信息（也记不住啊），应该在适当的时候，系统自动提供可视化或容易检索的信息提示；

这条原则运用的场景也很常见，比如标签 /热门推荐 /日期选择 /性别选择....等等等等：

知乎添加形象关键词页面 /知乎搜索页面 /TickTick首页 /知乎编辑个人资料页面

这种让用户选择的方式有很多优点，不仅高效，而且具有一定的防错性。比如年月日格式，用户可能会有自己的书写习惯，但是这种习惯对于系统来说就不一定能够正确读取，让用户直接选择年月日，就可以完美规避这种问题。

7、Flexibility and efficiency of use 使用起来灵活高效

又称为灵活高效原则，即：通过合理的设计让用户在操作过程中更加灵活、高效；
为新手和专家设计定制化的操作方式，例如：为新手提供操作引导，为专家用户提供的快捷操作，这样系统就可以同时满足有经验的用户和没有经验的用户；
用户可体定制经常使用的操作；

这个也很常见，第一次使用某种功能，会有新手提示，尤其是工具类应用，引导用户尽快熟悉各项功能；专家用户会尝试进行个性化设置，比如设置符合自己使用习惯的界面布局、设置个性化快捷键等。

薄荷健康新手引导 /PS首选项编辑窗口

其他场景，比如账户自动记录功能、输入框提示功能、自动记录上次使用状态....太多了，就不再举例了。

人人都喜欢聪明可爱的东西，做产品也是一样，漂漂亮亮，聪明机灵的跟用户打交道才能虏获用户的芳心。

8、Aesthetic and minimalist design 美观简洁

又称为易读性原则或易扫原则，即：减少无关信息，体现简洁美感，网络用户浏览的动作更准确的形容应该是”扫“；
对话框不应该包含不相关或不常用的信息；
对话框中每增加一个额外的信息单元，都会与相关的信息单元争夺用户注意力，并且会降低信息的相对可见性；

这条原则还有个内在含义，经常会被忽视，就是开头分类中强调的Clean & Functional Design，简洁&功能性设计。呈现的时候要简洁美观，但是也不可忽略功能性。例如扫码，不管是哪个产品都做的很简洁，但背后隐藏的逻辑是十分复杂的，需要调用摄像头、智能识别、验证等等流程。你不需要向用户肉眼可见的展示这套流程的所有细节，但是用户却切实能感受到扫码带来的便利性，也就是功能性。

这类设计很多，除扫码以外，像日历、账号填写等等等，都遵循这个原则：

许多交互新手，会为了填满页面放一些杂七杂八的东西，纯粹为了把页面填满而填满。其实，页面放什么都是根据用户需求来的，不要为了“填满”放入无关信息。换句话说，就是不能为了美观而牺牲功能性。

另一方面，为了业务需求，有些需要简洁的页面可能会夹杂一些推广信息，比如看视频的时候本来应该是一种尽可能的沉浸式体验，但绝对会有很多广告时不时跳出来，对于这种情况，就要考虑取舍，毕竟大家都是为了赚钱。

法则运用要灵活，切不可死板。

9、Help users recognize, diagnose, and recover from errors 帮助用户识别、诊断和从错误中恢复

又称为容错原则，即：系统出现错误时，要向用户明确的展示错误信息（NO!代!码!）；
准确指出问题，积极提供解决方法，协助用户尽快从错误状态中恢复正常；

比如Github的搜索失败提示，不仅明确告知错误信息，而且提供解决方案

还有一个比较常见的应用场景：软件崩溃后，再次重启提供文件缓存版本。

做设计的肯定都深有体会，尤其是Adobe家最初的那些版本，还没有自动储存功能的时候。当设计稿完成了90%，而你却没有保存，而软件突然石乐志....然后....十里八村都听到了一声痛彻心扉的哀嚎......直到后来Adobe终于提供了自动储存功能，各位设计师的心脏也终于得到了拯救。

10、Help and documentation 帮助和文档

又称为人性化帮助原则，即：提供必要的帮助提示与说明文档；
无需说明文档就能流畅的使用产品自然是极好的，但是一般文档也很有必要性；
文档要易于搜索，关注用户任务，列出具体的执行步骤，并且不要太冗长；

帮助功能其实不属于应用的重点功能，但却是人性化最强体现，做的好的也没几家，必须点名表扬Adobe，尤其是AE，文案描述清晰，搜索也很方便，并且提供多种搜索方式，可以在某个功能旁边直接点击小问号按钮、在界面中使用搜索、网页中使用搜索等：

以上就是尼尔森大神的启发式评估全部内容。

关于启发式评估，我还是要再多说两句，咳咳，就？两？句...

既然是叫”启发式“，自然就有其道理。是为了带给你一些启发，而不是把你框住，所以👇

不要生搬硬套！具体问题具体分析，不同场景灵活运用！

附法则原文：

10 Usability Heuristics for User Interface Design

by Jakob Nielsen on April 24, 1994

Summary: Jakob Nielsen's 10 general principles for interaction design. They are called “heuristics" because they are broad rules of thumb and not specific usability guidelines.

I originally developed the heuristics for heuristic evaluation in collaboration with Rolf Molich in 1990 [Molich and Nielsen 1990; Nielsen and Molich 1990]. I since refined the heuristics based on a factor analysis of 249 usability problems [Nielsen 1994a] to derive a set of heuristics with maximum explanatory power, resulting in this revised set of heuristics [Nielsen 1994b].

1、Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within a reasonable time.

2、 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.

3、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.

4、Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

5、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.

6、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.

7、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.

8、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.

9、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.

10、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.

以上，Over。
祝好运💗

Reference：

Molich, R., and Nielsen, J. (1990). Improving a human-computer dialogue, Communications of the ACM 33, 3 (March), 338-348.
Nielsen, J., and Molich, R. (1990). Heuristic evaluation of user interfaces, Proc. ACMCHI'90 Conf.(Seattle, WA, 1-5 April), 249-256.
Nielsen, J. (1994a). Enhancing the explanatory power of usability heuristics. Proc. ACMCHI'94 Conf.(Boston, MA, April 24-28), 152-158.
Nielsen, J. (1994b). Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.), Usability Inspection Methods, John Wiley & Sons, New York, NY

合法原创内容，禁止以任何形式私自盗用！

盗文者秃头！盗图的也秃头！