屏幕截图助力成功

屏幕截图是软件文档中最重要的可视化工具。是否使用屏幕截图属于一个文档项目的基本决策。屏幕截图可以在文本中承担哪些功能?设计时必须注意哪些方面?

屏幕截图是软件应用程序中用户界面特定状态的现实图像。在软件文档中,屏幕截图不是唯一的可视化工具,但却是最常用的可视化工具。通常用于用户使用说明书、培训材料和教程中,也常用于在线帮助中。

目前,技术文档工程师有很多可轻松截屏的工具可选。往往只需点击一下鼠标即可生成一个屏幕截图。但收录屏幕截图的准备工作显然更加繁复。比如,通常必须首先配置软件或填写示例数据,以便在屏幕上正好看到屏幕截图所反应的状态。如果以多种语言交付软件并且其更新发布周期很短,这类工作量会成倍增长。所以屏幕截图是影响成本的一个重要因素,因此对每个项目的屏幕截图使用进行细致规划。

屏幕截图的使用问题

如果在编辑团队中讨论是否使用屏幕截图,焦点通常在于两个问题上:第一,在某个具体应用中,是否确实需要使用屏幕截图?实践表明,技术文档工程师对这个问题的回答通常是不确定的。即使描述对象和信息目标完全相同,他们也会做出截然不同的决策。插图 1 反映的就是这种情况。图片分别显示了文献管理软件 Citavi 第 3 版和第 4 版的在线帮助是如何介绍同一操作序列的。更新在线帮助时的文本内容几乎完全相同,但 Citavi 4 的在线帮助并没有使用额外的屏幕截图。

 

插图 1: Citavi 3(左)和 Citavi 4(右)在线帮助中介绍同一个操作序列。文本内容几乎完全相同。但 Citavi 3 的在线帮助包含一个额外的屏幕截图。Citavi 4 的在线帮助中则没有这个屏幕截图。来源:Swiss Academic Software

使用屏幕截图的第二个根本使用与设计相关。一方面必须确定屏幕截图所反映的屏幕区域大小。因为屏幕截图可以是全屏截图,也可以是屏幕的某个选定区域,比如只显示一个子窗口、菜单栏或单个按钮。

此外,在设计时需决定是否使用其它标注工具以及使用哪些标注工具,比如:方框、箭头、线条、颜色或文字标签。

在实践中,如何设计屏幕截图这个问题也会得到截然不同的答案,正如插图 2 所示的两个 Microsoft Office 2010 在线帮助的截图。它们分别使用了一个屏幕截图,其作用是帮助用户在用户界面中更快找到“WordArt”按钮。但设计方式截然不同。选定屏幕区域的大小也各不相同,并且其中一种形式还使用了额外的标注工具。

正如示例所示,这两个问题均有可能导致不同的竞争方案,并要求在其中进行选择。技术文档工程师需要遵循哪些标准,才能在这类情况中做出合理决策?

插图 2:Microsoft Office 2010 在线帮助中的屏幕截图示例;这两个屏幕截图分别反映不同的屏幕区域,并且其中之一使用了额外的标注工具。 来源:Microsoft

屏幕截图是否有用?

应用研究可让人获悉有关决策标准的重要信息。荷兰指令设计师 Hans van der Meij 及其团队曾在实验研究的帮助下,试图查实使用屏幕截图是否能够更有效地协助用户理解软件用户手册。 在实验中,研究人员分别编制出了两版包含若干操作序列的使用说明书。这两版手册文本内容完全相同,差别仅在于是否使用屏幕截图对操作序列进行辅助介绍。如果现在被试必须基于这两版测试使用说明书完成工作任务,能否从他们身上发现与屏幕截图使用相关的行为差异?被试完成任务的速度以及所犯错误的数目是否存在差异?

正如这项研究结果所示,屏幕截图确实可以对操作效率和效果带来积极影响。如果使用包含屏幕截图的使用说明书,用户在操作软件时速度更快,并且错误往往更少。此外,用户可以更深入地了解软件结构和功能原理。

但这些积极影响不会自动显现,只在特定条件下才成立:

  • 屏幕截图必须承担一个明确功能。只有能够立即判定屏幕截图支持用户的哪些操作(比如找到一个按钮或输入框)时,才对用户具有协助作用。
  • 必须根据屏幕截图的功能对其设计进行调整。在实验研究中,如果通过选择显示区域的大小和适当的标注工具来有效支持屏幕截图的功能,用户可以更快、更精准地操作软件。
  • 通过屏幕截图辅助执行的任务必须达到足够难度。如果任务比较简单,则使用屏幕截图在操作速度或精度上不具有任何优势。

因此,屏幕截图会给用户带来切实好处——但只在当技术文档工程师有针对性和选择性地使用屏幕截图,并根据其功能对其设计进行优化时才能实现。基于上述结论所得出的三个决策步骤有助于有针对性且有效地使用屏幕截图。

步骤 1 - 确定功能

屏幕截图在文本中构成独立的信息单元。如上所述,屏幕截图可用性的实验研究结果表明,在截屏时必须首先清楚确定其在文本中作为信息单元所承担的功能。 总的来说,屏幕截图有三大核心功能。它们可以专门服务于一种功能,但原则上也可承担多种功能。

功能 1 - 识别相关操作元件:屏幕截图可以高效传达明确的空间信息。它们可展示软件用户界面上操作元件的空间位置和感知形式。因此,屏幕截图有助于用户更快找到并识别用户界面上的按钮、输入框以及其它与当前操作相关的操作元件。插图 2 中的两种屏幕截图均承担这种功能。

功能 2 - 对比系统状态:如果用户执行一个操作,然后系统做出反应,其状态往往会发生变化。比如可以从用户界面上看出状态变化,即打开一个新窗口或显示特定参数值。屏幕截图可有针对性地协助客户将新的系统状态与指定的期望状态进行对比。在此功能中,它们对结果信息起补充或替代作用。

在这类屏幕截图的帮助下,用户可以轻松判定实际系统状态是否与期望系统状态相符,并且通过对比检查自己是否正确执行了所介绍的操作。在执行特定操作之前,还可以通过类似的屏幕截图检查系统是否已满足必要前提或条件。也就是将实际状态(即软件的当前系统状态)与说明书中规定的标准状态进行对比。

插图 3 展示从两个角度展示了这一功能。操作步骤 3 首先要求用户在输入框“层级名称”中输入一个指定值。随后出现的提示指出了另一个需检测的条件:“层级填写类型”设置的指定值。在屏幕截图的帮助下,用户可以检查自己是否正确执行了该操作步骤,是否满足了提示中的指定条件,操作序列此点上的实际系统状态是否与规定系统状态相符。

 

插图 3:图形编辑软件 Gimp 初学者教程中的屏幕截图示例;这个示例展示了功能 2 - 对比系统状态。 来源:Jenny Ullmann

功能 3 – 构建心智模型:屏幕截图不仅能够协助用户找到操作元件或将软件系统实际状态与规定系统状态进行对比,还能协助其快速、精准地执行指定操作。它们有助于用户更深入地理解软件结构和常规相互作用原理。心理学家将此称为“心智模型”。 这类模型代表了用户对于软件组成、用户界面结构以及特定操作序列循环运行模式的主观理解,因为其具有主观性,因此也有可能是错误的。理解软件的结构和功能原理意味着逐步构建对该软件的心智模型。

 

插图 4:功能 3 示例– 构建心智模型。 来源:Jenny Ullmann

最常用于说明“构建心智模型”功能的应用案例是展示用户界面组成和结构概览的屏幕截图。这类屏幕截图的目的在于让用户理解用户界面分为哪些区域,并将这些信息在心智模型中具化。屏幕截图序列或叠放式连续屏幕截图也有助于构件心智模型。比如连续屏幕截图可在执行某个操作序列时按连续方式展现用户界面的典型变化。因此,其作用不仅在于协助用户快速、精准地执行所介绍的操作序列,而且也为用户的学习过程提供支持,帮助其更轻松地记住典型互动模式,并转移应用于其它应用情况中。

插图 5 展示了关于在 Microsoft Word 中根据格式模板创建内容目录的软件文档中的说明截图。这个示例展示了多个叠放窗口,用户在执行四个操作步骤时需要参考其中内容。此外,插图 5 表明屏幕截图身兼多种功能,在此种情况下尤其明显,它们在操作步骤中不只对一个步骤具有参考价值。比如,中间的屏幕截图对于操作步骤 1 具有参考价值,承担第 2 种功能(对比系统状态)。此外,它对操作步骤 2 也具有参考价值,承担第 1 种功能。

 

插图 5:叠放式连续屏幕截图支持构建心智模型。 来源:Sabine Lambrich/O´Reilly Verlag

步骤 2 - 优化设计

只有当屏幕截图的设计能够为其功能提供最佳支持时,屏幕截图才能够有效地协助用户。屏幕截图设计必须以其所承担的功能为出发点。因此必须按功能所需对屏幕截图设计进行优化。前面已讨论过的重要设计变量在此具有协同作用:显示区域的大小和醒目标注元素的使用。

醒目标注元素对图像价值起根本控制作用。它们可以将用户注意力吸引到相关图像区域上,并帮助其在用户界面中识别所显示的区域。箭头或放大镜尤其适用于突出显示较小的图像区域。括号可将较大的图像区域相互隔开,而方框或椭圆等则非常灵活,适合于突出显示较小和较大的图像区域。模糊显示或对比度变化也适合用于强调相关图像区域。

 

插图 6:将用户注意力有针对性的吸引到相关图像区域上的标注工具 来源:Jenny Ullmann

显示区域的大小尤其取决于用户注意力应该集中在一个区域上,或是同时集中在多个相关区域上,当然也取决于这些区域各自的大小。较大的屏幕截图或全屏截图可以使若干相关屏幕区域之间的关联轻松呈现,并以这种方式提高心智模型的信息表达能力。比如,插图 4 中用方框和文字标签突出显示多个区域。所选择的屏幕截图大小适当,可以连续显示所有区域。

如果用户界面中只有一个较小的局部区域很重要,比如用于协助识别相关操作元件或对比系统状态,则选择的展示区域要小,以便使用户的注意力高度集中在重要区域。但重要的是,选定的屏幕截图不仅要展示相关区域,还要展示足够大的周围区域。 环境信息(即环境关系)有助于在用户界面中快速找到并识别相关区域。在这类情况中,由于需要清楚展示按钮或输入框的文字标签,对显示区域的大小也会造成一定影响。

插图 2 表明了醒目标注元素使用决策和展示区域大小决策之间的相互作用。插图 2 中的两种截图形式可协助用户尽快在 Word 或 Excel 用户界面中找到“WordArt”按钮。

左边选用的屏幕截图较小,并且未使用醒目标注元素。按钮的文字标签虽然清晰可读,但所提供的环境关系只有“文本”这一菜单栏分组。而右边所展示的环境关系显然更多。用户可以看到“插入”菜单栏。此外,“文本”这一菜单栏分组被突出显示在一个彩色方框中。用户可以立即看出按钮所在的菜单分组位于菜单栏右侧。

此外,此处还使用了放大镜这种醒目标注元素。它放大显示了“文本”这一菜单栏分组。因此,用户不仅可以在菜单栏中迅速确定按钮“WordArt”的位置,还可以在其所处环境关系中可靠识别按钮。

步骤 3 - 检查必要性

屏幕截图不只在用户执行足够难度的操作时具有协助作用。通行法则是:如果用户在没有屏幕截图的情况下也能轻松、迅速地知晓如何执行所述操作,则可以且应该放弃使用屏幕截图。

这个法则看似简单,但却影响深远:对于一个完整的信息产品,不能笼统决定是否使用屏幕截图。技术文档工程师必须检查每个操作步骤,弄清楚在执行具体操作步骤时可能出现哪些困难,以及通过屏幕截图提供可视化支持是否能够避免潜在困难。 但这时还不能绝对明确地分辨哪些操作对用户而言是简单的,哪些是困难的。在特定操作中,是否使用屏幕截图的决策往往受到多个因素的影响,技术文档工程师必须同时考量。

除操作本身的复杂度之外,软件的用户界面尤其重要。如果用户界面高度结构化,也许与大家所熟悉的 Windows 常规设计不一样,则用户出现操作错误或操作时间超过正常情况的可能性就会加大。另外,用户知识水平也是一个需要考虑的因素。有些操作对于经验丰富的用户而言是小菜一碟,但在初学者看来却是难上加难。目标群体不同,是否使用屏幕截图的决策结果也会截然不同。有些屏幕截图对初学者大有裨益,但有可能会让经验丰富的用户感觉浪费时间、索然无趣、干扰不断。

是否有必要使用屏幕截图?

在这里,我们通过图像编辑软件 Gimp 初学者教程中的一个操作序列检测来展示在针对问题 1 进行因素评估后到底会做出何种决策。操作步骤 1 要求用户在 Gimp 应用菜单中选择一个特定条目。这类操作在 Windows 世界无处不在——而且它们不仅存在于 Windows 世界中。如果 Gimp 教程的基本前提是目标群体具备一般的软件程序使用经验,则可以估计在执行操作步骤 1 时错误风险较低。因此,这里不需要屏幕截图。

操作步骤 2 的错误风险也不高。用户已经提前在绘制区域将待编辑图像打开。在这里,用户知道“绘制区域”指的是用户界面上的哪个区域。因为,Gimp 的绘制区域位于用户界面中间,而且非常大,用户在执行这一个操作步骤时也无需屏幕截图协助。

相反,操作步骤 3 的错误风险明显更高。这个步骤涉及到两个按钮,必须在两个具有相似功能的按钮分组中进行选择。这些按钮没有文字标签,视觉上很难立即区分。屏幕截图可以帮助用户迅速找到并正确识别这个操作步骤中所需要的相关按钮。

 

插图 7:图像编辑软件 Gimp 初学者教程的操作序列仅操作步骤 3 可能有较高的错误风险。 来源:Jenny Ullmann

是否需要优化屏幕截图?

上述说明建议选择性使用屏幕截图,需充分考虑用户界面的复杂性、所述操作的难度和用户的知识水平。如果使用屏幕截图,必须明确界定其功能并按功能所需优化屏幕截图设计。当然,这样的过程需要时间。尤其是按功能所需优化屏幕截图需要投入更多的时间和精力,进而带来额外成本。因此,不可避免地会产生一个问题,即这些投入是否值得。有针对性地使用经过设计优化的屏幕截图是否真的有用?编制技术文档时的这些额外投入是否会给用户带来切实好处?

为回答这些问题并对前面讨论过的 Hans van der Meij 及其同事的应用研究结果进行补充,梅泽堡大学通过 14 名被试进行了可用性研究,在其帮助下检查优化设计后屏幕截图的可用性。核心问题在于按功能所需优化后的屏幕截图是否确实比未优化的屏幕截图更好?是否有助于效率更高、效果更好地执行操作?

出于研究所需,他们特地编制了在结构和文本内容上完全相同的教程。教程总体目标(即在 Gimp 创设一个万能框架)被细分为八个重要的逻辑性子目标,并且操作步骤也被相应划分为八个操作序列。教程 A 中只使用了经过优化的屏幕截图。教程 B 中所包含的的屏幕截图与教程 A 中屏幕截图的位置相同,但未按功能所需对设计进行调整。教程 B 中的所有屏幕截图都是全屏截图,也没有使用额外的标注工具。

两版教程被分别分配给了相同人数的被试。为评估操作执行的效率,特别对被试通读整个教程并执行各个操作序列所需的时间进行了计算。通过测试得出了错误或未完全执行的操作步骤数,并将其作为判定操作执行效果的标准。

测试结果

正如测试结果评估所示,使用教程 A 的被试完成整个测试的平均时间比使用教程 B 的被试快 73 秒。二者的错误率也存在差异。使用教程 A 的被试几乎没有出现任何错误,并且没有一个被试在完成子任务时请求过测试管理员的帮助。相反,采用教程 B 的七名被试中有六人未能成功完成其中一个操作序列。甚至有一名被试在两个操作序列中都请求过帮助。

 

插图 8:可用性测试结果:测试平均时间 来源:Jenny Ullmann

 

插图 9:可用性测试结果:每个子任务的错误数。 来源:Jenny Ullmann

此外,测试还表明在待执行足够复杂的操作时,屏幕截图的效果尤为明显。在难度明显加大的序列 C(“图像居中”)中这一现象尤为明显。使用未经过优化教程的七名被试中有五人未能正确完整该操作序列,而使用教程 A 的七名被试都顺利完成了该操作序列。此外,与操作执行的效率和效果相对应的,测试后对被试的询问也表明教程 A 中的大部分屏幕截图都被大有裨益,而教程 B 中的屏幕截图却鲜有帮助。

总的来说,这些结果证明:如果有选择性的使用具有明确功能的屏幕截图,并且按功能所需对其设计进行优化,则屏幕截图有助于用户更快、更有效地开展工作。这一过程虽然意味着更高投入,但可以给用户带来切实好处。