以B端平台设计，理解尼尔森10大可用性原则前端设计

尼尔森是一名人机交互学博士，通过总结分析200多个可用性问题，1995年提出了尼尔森十大可用性原则，不论在Web设计还是移动端设计，掌握了这十项原则，都能有效提升产品用户体验度。今天就以实例跟大家聊聊尼尔森十大原则。
雅各布.尼尔森简介
文章图片

雅各布·尼尔森（Jakob Nielsen）是毕业于哥本哈根的丹麦技术大学的人机交互博士，他拥有79项美国专利,专利主要涉及让互联网更容易使用的方法。尼尔森在2000年6月，入选了斯堪的纳维亚互动媒体名人堂，2006年4月，并被纳入美国计算机学会人机交互学院，被赋予人机交互实践的终身成就奖。他还被纽约时报称为“Web 易用性大师”，被 Internet Magazine 称为 “易用之王”。他提出的10大可用性原则（10 Usability Heuristics），被广泛运用于人机交互的各个领域（多在C端为主）。
10大可用性原则 1. 系统状态可见性（状态可见原则）

系统应始终通过合理时间内的适当反馈，让用户了解正在发生的事情。--尼尔森

1.1 系统状态可见性-位置可见

文章图片

相比于C端产品，B端产品在页面层级往往更为复杂。因此，让用户明确当前所处的位置尤为重要，这也就突显出了导航的重要性。系统平台中常见的有横向导航、纵向导航和组合导航这3种。
1.2 系统状态可见性-数量可见

文章图片

系统支持对任务字段进行自定义配置，在「添加字段」的弹窗中，当用户勾选了字段后，下方的「确定」按钮上会显示已选数量，方便检查核对。
1.3 系统状态可见性-状态可见 【以B端平台设计，理解尼尔森10大可用性原则】

文章图片

在企业管理后台将某个任务字段锁定后，再次进入「添加字段」弹窗，被锁定的字段后面带有表示已锁定的icon，告诉用户该字段不可编辑。（多选超出选择数量后复选框置灰或隐藏也属于状态可见原则）
2. 贴近用户的真实环境（环境贴切原则）

系统应该说用户习惯的语言，比如：用户熟悉的单词、短语和概念，而不是系统导向的术语。遵循现实世界的约定，使信息以自然且合乎逻辑的顺序出现。
——尼尔森

文章图片

一个B端管理平台中集成了众多用户权限，比如：功能性模块和系统管理模块等。在首页中，用到的语言通俗易懂，无需特定的专业背景即可理解。而在系统管理页面中，用到的语言则是较为专业的开发术语，比如「代码库」、「代码组」、「权限管理」等，因为系统管理的主要用户群体是开发或运维人员，以上这些词语是开发人员习惯和熟悉的。
3. 用户有控制和来去自由的权利（用户可控原则）

当用户错误地选择了的某个功能后，系统需要提供一个明确的「紧急出口」，来让用户离开其不想要的状态，而且无需额外的对话框。支持撤销和重做。
——尼尔森

3.1 用户有控制和来去自由的权利-关闭与返回

文章图片

在某些系统中，一个任务下可建立多个子任务，子任务从属于父任务。因此，在子任务弹窗中，同时具有「返回上级」和「关闭」按钮，对应的操作分别是返回父任务弹窗，或者直接关闭弹窗。（多用于功能浮窗，面包屑导航也属于用户可控原则）

文章图片

由于B端系统的复杂性，有些功能的层级会比较深。弹窗A中的某个操作可能会触发弹窗B的弹出，如果弹窗A和B承载的功能具有父级和子级的关系，同样需要考虑「返回」的功能。
（PS：实际项目中其实应该尽量避免多层级弹窗）
3.2 用户有控制和来去自由的权利-撤销与重做

文章图片

在「任务字段类型配置」的页面中，当用户更改了默认的初始配置后，右上角会出现「恢复为默认配置」的按钮。这是一种支持高效重做的设计思路。（我们系统中经常会在信息录入，系统设置中增加“重置”）
4. 系统的一致性（一致性原则）

我们不应当让用户去怀疑不同的语句、状态或操作是否在表达同一件事。设计需遵循平台的惯例。——尼尔森

4.1 系统的一致性-样式一致

文章图片

以平台中的弹出提示为例，在位置上，提示统一出现在页面的左下角，经过一样长的时间后自动渐出消失；在形式上，都是icon加上文字的形式，且右上角具有关闭按钮；在颜色上，操作成功用绿色，操作失败和报错用红色，功能推送用蓝色；如果提示中存在文字按钮，则文字按钮的颜色统一用蓝色。
4.2 系统的一致性-功能一致

文章图片

当具备排序功能时，以相同的icon表示，并且在功能操作上也保持了一致：通过拖拽来调整排序。
5. 避免错误（防止错误原则）

比报错提示更好的方法是，通过严谨的设计来防止错误的发生：要么消除容易出错的情况，要么把这些容易出错的情况找出来，并在用户采取行动之前提供确认选项。——尼尔森

5.1 防止错误-预警与确认

文章图片

在任务菜单中，当鼠标悬停在非危险操作上时，底色会变成浅灰色；但是，当鼠标悬停在「移到回收站」上时，底色会变成红色，通过醒目的颜色来提示用户，这是一个危险操作，从而降低用户误操作的可能。而当用户点击「移到回收站」时，二次确认的弹窗会弹出，进一步防止用户错误操作。（未保存关闭、删除、更改数据等操作都需要做预警提示）
5.2 防止错误-置灰

文章图片

通常情况下，按钮置灰表示对应功能或操作无法使用，这也是防止错误的一条有效途径，因为用户通过按钮样式就可获知其状态，省去了点击的试错成本。那么，是不是只要功能或操作无法使用时，就应该将对应的按钮置灰呢？（其实更好的做法是填写玩标题后按钮不置灰，点击完成按钮后定位或高亮必填项，让用户更容易识别错误点）
6. 系统识别胜过用户记忆（易取原则）

通过将对象、操作和选项进行可视化，最大限度地减轻用户的记忆负担。用户不需要记住对话框中某一部分到另一部分的信息。系统操作的指示信息需要易于被用户发现和获取。——尼尔森

6.1 系统识别胜过用户记忆-保留历史

文章图片

提及保留历史，最为常见的就是为用户保留历史搜索和历史浏览。某些平台功能中有「近期项目」模块，会按项目打开时间由近至远排序，方便用户快速进到自己需要处理的项目中。（常用的office工具）
6.2 系统识别胜过用户记忆-可视化呈现

文章图片

在worktile的看板配置弹窗中，当勾选了右侧的字段后，左侧的预览区会实时展示字段显示在卡片中的位置和样式。因为看板的单张卡片区域比较有限，但有时又需要在卡片中囊括较多的任务信息，这时通过勾选字段后实时地预览，可以让用户反复对卡片呈现效果进行配置和调试，很大程度上减轻了记忆负担。
6.3 系统识别胜过用户记忆-指示信息易取

文章图片

worktile任务打开方式有3种，分别是：弹窗、侧边滑出、全屏。但如果仅仅是3个名词，还是有些抽象，不够直观。因此将3种打开方式做成了对应的3个GIF图，当鼠标悬停在上面时，GIF图就开始播放。当用户需要进行选择时，必定会将鼠标移动到对应的打开方式上，也就必然会发现GIF图中涵盖的指示。（这样子设计，不仅让打开方式直观，而且易于被用户发现和获取）
7. 灵活易用的使用体验（灵活高效原则）

一些快捷操作的功能，虽然会被新手用户忽略，但可能为专家用户所使用并帮助提升其使用效率，因此，系统需要同时满足新手用户和专家用户的需求。允许用户频繁地操作。 ——尼尔森

7.1 灵活易用的使用体验-灵活配置

文章图片

以worktile的任务字段为例，可以对任务字段类型进行配置，包括添加字段、删除字段、将字段设为必填等。另外支持对自定义字段进行编辑，包括字段的名称、类型、默认值和提示文案。任务字段的配置仅对当前所在项目生效，因此，不同的项目可具备不同的字段配置，使得项目管理更加灵活。（多见于任务或内容发布）
7.2 灵活易用的使用体验-各取所需

文章图片

以文档为例，如需对文本格式进行编辑，可以有多种方式。当用户需要对文本进行加粗时，在选中文本后，可以点选上方工具栏中的加粗按钮，也可以按快捷键，或者使用Markdown语法。以上这3种方式都可以达到加粗的效果，但面对的用户群体却不太一样。新手用户可能会选第1种，熟练用户或专家用户可能会用第2种，习惯于用Markdown写作的用户则更倾向于第3种。因此，在设计功能时，最好能考虑到不同层次用户的需求，以此来让用户「各取所需」（需要平台有多类型用户）
7.3 灵活易用的使用体验-允许频繁操作

文章图片

在某些场景下，用户可能会进行一些频繁或重复的操作，因此需考虑：如何设计才能让这些频繁的操作更加方便。比如，在创建任务时，会有「保存」和「完成并创建下一个」这2个按钮，「完成并创建下一个」其实就为那些需要一次创建多个任务的用户提供了便利。另外，在创建子任务时，点击「保存」后，下方会自动弹出下一个子任务的文本框，用户可选择继续创建或点击「取消」按钮结束创建，这样设计同样是为了提升频繁操作的效率。
8. 美观且简约的设计（优美且简约原则）

对话框中不应包含无关或很少用到的信息。在对话框中每增加一个信息，就意味着降低了主要信息的相对可见性。 ——尼尔森

文章图片

在任务看板中，当任务状态为「已完成」时，对应的卡片以置灰的方式呈现，从而突出了「待处理」和「进行中」的任务卡片。当任务的优先级为「紧急」时，卡片左侧会以橙色进行标记，而优先级为「普通」或「较低」的任务，卡片左侧就不会用颜色标记。这个案例通过弱化(置灰)和去除(去掉标记颜色)，从而让页面简洁，且使得重要信息得以突显。
9. 帮助用户识别、诊断和从错误中恢复原则

报错信息应该用通俗易懂的语言表达（而不是用代码），准确地反应问题，并且提出可行的解决方案。 ——尼尔森

9.1 帮助用户识别、诊断、并从错误中恢复-识别并从错误中恢复

文章图片

当某个自定义任务字段在企业管理后台被锁定后，在「编辑自定义字段」的弹窗中，不仅通过置灰让用户明确不可编辑，还提示了原因所在（字段被锁定），而且也告知了解决方案（被谁锁定，可以找谁）。

文章图片

如果报错信息用到的是难以理解的语言或代码，那起到的效果将会大打折扣。上图中这个报错提示出现的场景是：在任务弹窗中添加附件并发布时出错。从「参数有误: attachments」这句文案中，用户获知的仅仅是：附件问题导致发布不成功。但，「参数有误」是什么意思？附件格式不对？还是附件超出大小限制？还是不知道出错的原因，就更别提解决方案了。
10. 帮助文档-帮助和提示原则