尼尔森十大易用性原则驱动的测试

易用性验证

  通过了解尼尔森十大易用原则，探讨易用性测试需要注意的测试点。首先还是介绍一下尼尔森的十大易用原则有哪些，然后总结一下前端的检查点。

尼尔森十大易用原则

系统状态的可见性

始终让用户了解当前发生的事情，并在恰当的实际给予适当的反馈。

匹配系统与真实世界。

界面语句需要有易读性及易理解性。

用户的控制性和自由度用

用户在功能选择上犯错，应该允许用户堆操作进行撤销和重做。提高用户操作容错率

一致性原则

同一个系统内所有的语言应该有一个统一标准。同一用语、功能、操作应该保持一致。

防错原则

比出现错误信息提示的更好设计微防止此类问题的发生。如果某些操作不能进行，需要置灰或隐藏。即每一项操作都应该有正确或错误的提示。

系统去识别而不是让用户记忆

尽量减少用户对操作目标的记忆负荷，系统的使用说明应该是可见的或者容易获取的，在必要时应该有相应的提示信息。

使用灵活度高

系统可以同时满足有经验和无经验的用户。提供新手引导以及skip跳过。满足大多的基础快捷键交互操作。

简约设计美学

对话中不应该包含无关紧要的信息。视觉上有明确的区分信息轻重。

帮助用户识别，诊断，并从错误中恢复。

错误信息应该用语言表达（不可使用代码、编号），较准确地反应问题所在，并提出一个建设性的解决方案。报错时需要提出准确的解决方案。

帮助文档

界面提供hover后tooltip进行简短说明功能。

易用性检查项

界面

基本准则：

1. 界面整洁、排列整齐、分清主次、突出重点
2. 图片和图标风格同一
3. 参考B/S系统界面常用框架： 页头、导航、主体内容、页脚、（侧栏导航）

检查点

1. 操作界面一致，如操作按钮位置等。
2. 界面舒适与完整。
3. 页面整洁不凌乱、不错位。
4. 网站整体风格一致，网页布局、文本的字型、字体、颜色保持统一。
5. 最常用的按钮和菜单放在界面显著位子和，使用颜色货亮度差别突出显示重点部分。
6. 输入合理信息时，UI布局合理、整洁、不拥挤。
7. 在每一页的相同位置放置相同的功能或类似功能，操作结果应该一致。
8. 内容应占据网页的大部分空间80%，导航不超过20%。
9. 比例适当，不要出现横向下拉条。
10. 导航菜单货窗口进入级别避免过多和过深，常用功能突出。
11. 屏幕对角线香蕉的位置是用户直视的位置，正上方1/4为易喜迎用户注意力的位置。
12. 颜色：测试人员需要对比颜色和字号。设计图缩放100%，和实现界面进行一一对比。
13. 字体：
    a. 字体样式一致
    b. 标题和正文区分，各级标题字体样式统一
    c. 文字链接与非链接要区分
    d. 字体颜色与北京颜色不宜相似
14. 页面对齐处理。
15. 图标、图片不严重失真、图标风格统一。

控件

1. 窗口有标题。
2. 避免不同窗口使用相同的标题。
3. 窗口的标题应该与命令相符。
4. 设置弹出窗口的默认位置。
5. 设置窗口的默认大小。
6. 避免一个以上的弹出窗口层次。
7. 系统中的窗口标题、关闭、确认等操作位置一致。

检查点

1. 全部窗口可以正常关闭。
2. 信息项复杂的界面要使用弹出床，窗口可以改变大小、移动、滚动。
3. 窗口中的数据内容可以用鼠标、功能键、方向键头、键盘访问。
4. 显示多个窗口时，窗口名称需适当表达。
5. 活动窗口的高亮。

工具栏

工具栏是命令的一种图形化，目的是为了高效访问。

1. 工具栏需要合理的即时提示信息。
2. 默认应用使用不超过2行。

菜单

1. 菜单功能条功能可使用。
2. 菜单功能位置随着操作有高亮或置灰处理。

操作按钮

常用按钮需支持快捷键。图形应适用。

下拉列表

下拉列表用于从一组互斥值列表中进行选择，用户只能选一个选项。

检查点

1. 选项不宜过多。
2. 提供快捷键定位。
3. 视觉统一。
4. 树形展示。
5. 不选择时，应提示none or 无，不能直接空白。

单选框&复选框

检查点

1. 单选和复选的区别 - 互斥性。
2. 重要选项需有提示信息。
3. 排版。

文本框

1. 输入框考虑最长字段长度来确定其长度。
2. 样式统一。
3. js强迫限制输入的格式。
4. 文本框自动联想。
5. 基本规则判断。

其他

1. 对话框：需要特殊处理的都需要有提示信息。
2. 状态条、滚动条：避免出现横滚和多个滚动条。
3. 消息提醒：提醒高亮且醒目、同一类型的提醒位置固定、提供操作入口。
4. 列表：显示可视化适用性。
5. 查询统计：默认置与用户自设值、显示、导出性。
6. 文案措辞。