Web软件测试Checklist应用系列,第4部分内容、图片和按钮讲解.doc

内容、图片和按钮测试包含的范畴 在网页产品中，用户获得数据的来源中很重要的两个方面是文字内容（本文简称“内容”）和图片。内容主要以文字为主体传递信息，而图片则以图表的形式以更加醒目的方式向用户提供信息。两部分内容相互补充，均不可或缺。按钮则用于针对用户的点击执行相关的操作，从而实现与用户的互动，在用户体验中具有非常重要的作用。 本文中将列举部分在网页产品测试中应用广泛的 Checklist 条目，这些条目均需要在开发和测试过程中加以注意。文中也将列举测试过程中遇到的一些实例，供大家参考。 内容测试 Checklist 表 1. 内容测试 Checklist 总结 序号 Checklist 1.1 检查内容排列是否恰当 1.2 检查标签排列是否恰当 1.3 确保所有单词大小写使用正确 1.4 确保所有的错误消息中没有拼写错误 1.5 检查产品页面中是否存在冗余信息 1.6 确保不可编辑区域呈现为黑色文字、灰色背景、黑色标签 1.7 确保产品在最大、最小和最优分辨率下都能正确显示 1.8 确保内容表述清晰准确 1.1 检查内容排列是否恰当 为了给用户提供良好的用户体验，同时为了符合业界普遍的 UI 设计标准，文本内容的排列要整齐、有序，易于阅读。否则，排列凌乱的文本内容将给用户留下不够专业的印象。 下面的例子展示了一类数量显示栏没有对齐导致的缺陷实例。 图 1. 数量显示栏未对齐缺陷实例 该实例中，图表左侧纵轴上的数量显示存在未对齐的问题。从图上可以看出，整数位 1,000,000 和 2,000,000 两个数字显示与其他数字的显示不在同一条竖直线上，这是产品的显示缺陷。 1.2 检查标签排列是否恰当 跟上面 1.1 节中提到的内容排列类似，标签的排列也需要做到恰当、整齐。规范整齐的排列，会使得标签看上去更规整，用户体验也会更好。 以下是两个标签排列出现问题的实例。 图 2. 竖直方向标签排列错位 图 2 的实例中，左侧条目内容和右侧的输入框未能在竖直方向保持对齐，存在错位。这是产品的一个缺陷，该缺陷只有当将网页浏览器的尺寸缩小时才会出现，而在最大化时不能重现。 图 3. 水平方向标签排列错位 如图 3 所示的实例中，红框中所示的两个组件标签，一个为选择列表，一个为进度条，两者虽然隶属于不同的选项，之间并无直接关系。但两者之间的空间位置位于相同的水平位置，只有当两者在水平方向上对齐时，才能符合友好设计规范，用户看上去才能更舒服。 1.3 确保所有单词大小写使用正确 按照业界通用的 Web UI 设计标准，对单词的大小写有明确的规范。最基本的，需要保证所有相似表述在产品中保持一致性。 在测试过程中，测试产品中我们遇到了以下窗口组件描述：“Variable-length Segment splits”，该描述中，从一致性的角度来说，明显最后一个单词“splits”应采用首字母大写，应为“Variable-length Segment Splits”。 1.4 确保所有的错误消息中没有拼写错误 产品提供的错误消息对于用户体验具有非常重要的作用，因为错误消息不仅提示了当前的错误，更重要的是同时向用户提供相对应的解决方案，告诉用户如何应对。因此错误消息的清晰准确表达，对于提升用户体验来说至关重要。 图 4. 错误消息中的不一致信息实例 图 4 所示的实例中，呈现的是一个用户名登陆页面出错的提示信息。总结消息为“Invalid user ID or password. ”，当点击该总结消息时错误消息会展开，呈现出详细的解释消息“Error: The username or password you entered is incorrect. More Details”。总结消息和详细解释消息应保持一致性，而这里两者对于用户名的表达存在不一致。总结消息中使用的是“user ID”，而在详细解释中，使用的单词是“username”，这里需要保持同一个对象的描述一致，这里是产品的缺陷。 1.5 检查产品页面中是否存在冗余信息 网页产品需要为用户提供充足的信息，但也要尽量杜绝冗余的功能和信息，因为冗余无用的内容对用户是一种干扰。 图 5. 冗余的导航聚焦点 上图 5 中，当按 TAB 键在页面上移动光标时，光标会经过图中蓝色圆圈所标记的位置，该位置的光标停留没有为用户提供任何有用的功能和信息，属于冗余的功能，为产品的缺陷，应该移除该光标聚焦位置。 1.6 确保不可编辑区域呈现为黑色文字、灰色背景、黑色标签 对于不可编辑的区域，应该用明显的显示特征告知用户，该区域不可编辑。通常不可编辑区域呈现为黑色的前景文字显示、灰色的背景以及黑色的标签。这样每当用户看到此类区域时，就知道该区域不可编辑，也就不会试图去对其进行编辑和更改。 1.7