引导式用户界面

本主题介绍称为引导式用户界面 (IUI) 的用户界面模型。 IUI 模型也称为引导式导航,它建议通过将功能分解为易于解释和理解的屏幕或页面来简化软件应用程序。 此 IUI 模型在 Microsoft 项目(如 Microsoft Money 2000、Windows 控制面板小程序、Microsoft Visual Studio 2010 中的各种屏幕和对话)和 Microsoft Office 中的任务面板中显而易见。

介绍

IUI 是一种用户界面模型,它建议通过将功能分解为易于解释和理解的屏幕或页面来简化软件应用程序。 Microsoft 在 Money 2000(一个大型商业软件应用程序)中实现了此模型。 非正式测试表明,用户在这个模型中可以像在传统界面中一样快速地执行任务,并且可以更容易地找到内容。

许多商业软件应用包括用户界面,其中屏幕显示一组控件,但让用户推断页面的目的以及如何使用这些控件来实现该目的。

本文档中所述的原则不需要或暗示任何特定的刚性设计、控件或视觉元素集。 与一般的图形用户界面一样,本文档中的原则为设计中的灵活性和创造性留下了很大的空间。

使用 Money 2000 中的示例演示了引导式用户界面的一般原则。

重要

IUI 的整体概念还处于起步阶段。 使用这些技术的设计人员正在学习和发现更多关于它的知识,因为他们将其用于他们的软件。 本文件中的信息将随着该领域研究和知识的增加而不断发展。 本主题提供了对 IUI 的介绍,而不是一套明确的、全面的指南。

IUI 在行动:解决常见设计问题

本节讨论当今软件产品的一个常见设计问题,并介绍 IUI 作为一种克服该问题的技术。

问题:软件难以使用

大多数软件太难使用了。 这个结论是从可用性测试、轶事证据和软件设计者的个人经历中得出的。 IUI 的概念是通过进行研究,对当前软件难以使用的原因进行有根据的猜测,然后提出解决方案而产生的。 使用 IUI 的设计人员应该依靠客户的满意度来决定设计的最终成功。

大多数当前的软件产品都很难使用,原因如下:

  • 用户似乎没有构建一个足够的产品心理模型。

    大多数最新软件产品的界面设计都假设用户能够理解设计者精心制作的概念模型。 遗憾的是,大多数用户似乎从来没有获得一个足够彻底和准确的心理模型来指导他们的导航。 这些用户可能非常忙碌,信息过载。 他们没有时间、精力或愿望研究软件的概念模型。

  • 甚至许多长期用户也没有掌握常用的程序。

    设计人员知道新用户一开始可能会遇到麻烦,但却希望随着用户熟悉常见任务,这些问题会消失。 可用性数据表明,这种情况通常不会发生。 在一项研究中,研究人员设置了自动设备,在家里给用户录像。 录像带显示,专注于手头任务的用户不一定会注意到他们所遵循的程序,也不会从经验中吸取教训。 下次用户执行相同的操作时,他们可能会以完全相同的方式遇到问题。

  • 用户必须努力找出每个功能或屏幕。

    大多数软件产品都是为(少数)了解其概念模型并掌握通用程序的用户设计的。 对于大多数客户来说,每一个功能或过程都是一个令人沮丧、不想要的谜题。 用户可能会认为这些谜题是使用计算机不可避免的成本;但如果没有这些负担,他们肯定会更快乐。

解决这些问题的最佳方法是找到一种通用策略,使软件产品的特性更加不言而喻和不言自明。 用户必须能够在每次需要时找到某个功能,并且每次想要使用该功能时都必须能够使用该功能。

引导式用户界面

当今软件中的大多数元素都需要用户研究它们并推断它们的行为,如下面的屏幕截图所示。

示例属性对话框的屏幕截图。

经验丰富的计算机用户(包括软件设计师)很快就会明白这个对话框是让他们管理一系列的事项。 他们理解列表下面的按钮可以添加、删除和提供关于列表项的信息。 但是,请注意,这些行为都没有在对话框本身中明确说明。

现在,让我们从普通用户的角度来看一下这个对话框。 当面对这个对话框时,许多用户会问:“我该怎么办?”。当对话框出现时,用户必须停下来思考下一步该做什么。 首先,用户必须推断出这个大的白色矩形是一个要用项目填充的空列表框。 框上的小文字标签“事项”提供了一个模糊的暗示。 有些用户会尝试在列表框中键入,因为它看起来像一个编辑文本框。

接下来,用户必须推断出列表下面的按钮会影响其内容。 一些按钮最初被禁用,这是令用户感到困惑的另一个潜在来源。 用户必须尝试这些控件,以了解对话框的工作原理。

用户可能还会问其他问题:“我应该在列表中放置多少个项目? 我应该按特定顺序输入项目吗? 为什么我一开始会看到这个对话? 这是干什么用的?”

每当用户必须弄清楚屏幕的用途以及如何使用屏幕时,他们就会从目标中分心。 这最终代表了时间和用户满意度的成本。 更糟糕的是,用户每次使用某个功能时都会一遍又一遍地为界面感到困惑,为此付出代价。

屏幕的标题应该清楚地说明其用途。 当设计人员创建一个屏幕时,他们很少要求它有一个明确表达的目的。 相反,它可能只是用户必须推导的更大概念模型的一部分。

研究表明,许多用户甚至对软件中的基本操作感到困惑。 他们很难理解产品可以为他们做什么,在哪里执行操作,以及找到后如何执行该操作。 通过根本性的改变来简化软件是一种更充分地满足现有客户和吸引新用户的有力方法。

解决方案:引导式用户界面

作为一种新的软件设计方式,IUI 的目标是减少用户为了成功地在产品的各个部分之间移动并使用其功能时所必须进行的不必要的思考。 “引导式”这个词来自动词归纳,意思是通过影响或说服来引导或移动。

IUI 是常见 Web 样式接口的扩展。 在 Web 环境中,页面必须简单且基于任务,因为每条信息都必须通过相对较慢的连接发送到服务器。 然后服务器以下一个步骤进行响应,依此类推。 良好的 Web 设计意味着专注于每个页面的单个任务,并在页面之间提供导航。 同样,引导式导航首先将每个页面上的活动集中在一个主要任务上。

精心设计的引导式界面可以帮助用户回答他们在看屏幕时面临的两个基本问题:

  • 我现在应该怎么做?
  • 我该从哪里开始完成我的下一个任务?

根据这些原则设计的软件从一个基本前提开始回答这些问题:一个具有单一、明确、既定目的的屏幕比一个没有这样目的的页面更容易理解。 如果屏幕更易于理解,用户将更容易知道该做什么以及下一步要去哪里。

这个基本前提可以扩展为设计使用 IUI 的软件的一系列四个步骤:

  • 将每个屏幕集中在单个任务上。
  • 说明任务。
  • 使屏幕的内容适合任务。
  • 提供指向辅助任务的链接。

本文档介绍了 IUI 的一般原则,同时还可以通过显示 Money 2000 和其他软件的示例来演示这些原则。 应将这些示例视为 IUI 的特定表达式,而不是实现的严格模型。

除了上面列出的四个步骤外,还可以通过以下五条指南来加强界面:

  • 使用一致的屏幕模板。
  • 提供用于启动任务的屏幕。
  • 明确如何使用屏幕上的控件执行任务。
  • 提供一种简单的方式来完成任务并开始新的任务。
  • 使下一个导航步骤显而易见。

进程

许多任务需要用户在一系列屏幕中导航。 执行任务的用户可能会单击指向辅助任务的链接,该链接会从构成主要任务的屏幕序列中移开。 当用户完成辅助任务时,应该有一种简单的方法将用户直接返回到原始任务的分支点。 用户在使用常规导航控件(如后退前进按钮)返回到开始位置时可能会遇到问题。

为了提供此功能,IUI 定义了一个称为进程、屏幕或执行任务的一系列屏幕的导航概念。 进程充当一种导航子例程。 用户可以开始一个进程,浏览其一系列屏幕,然后在最后一页单击“完成”按钮,快速返回到开始进程的页面。

创建引导式用户界面的步骤

本节深入介绍可以用于创建 IUI 的四个步骤。

第 1 步:将每页集中在单项任务上

设计 IUI 的第一步是获取一个功能或一组功能,并将其分解为单独的屏幕。 每个屏幕都应集中在单个任务上,称为该屏幕的主要任务。

这个想法听起来很简单,但很少有应用程序遵循。 大多数应用程序都会显示一个屏幕,所有相关功能都可以从该屏幕上完成。 这种设计要求用户弄清楚(推断)可以做什么以及如何做。

主要任务可以是特定任务,也可以是开放式任务。 例如,在一个个人理财项目中,一个特定的任务可能是“选择你想支付的账单”;而一个开放式的任务可能是“回顾你的投资业绩”。

主要任务必须是对用户有意义的内容,而不是实现细节或其他摘要概念的反映。 该任务应该是用户可能想做的事情,最好用自己的话来描述。

示例

本节比较两个不同版本的 Money。 这些示例显示了非常相似的功能,允许用户查看和管理财务帐户。

IUI 模型是在创建 Money 2000(一种用于管理个人财务的应用程序)期间开发的。 Money 2000 是该产品的第八个主要版本。 Money 2000 是一个大型的 Windows 程序,有超过一百万行的代码。

Money 2000 是一个 Web 风格的应用程序。 它不是一个网站,但与网站共享许多属性。 它的用户界面由在共享框架中显示的全屏页面组成,并带有在导航堆栈中前后移动的工具。 在此基础之上,Money 2000 添加了一组新的用户界面约定,用于创建更结构化的用户体验。

尽管 IUI 最初用于 Money 2000 的 Web 样式设计,但它也可以与窗口和对话框等传统界面元素一起使用。

在 Money 99 中,用户经常在单个屏幕上执行各种各样的任务。 例如,下面的屏幕截图显示了客户经理,它在一个屏幕上显示了 Money 99 中所有与帐户相关的功能。

Money 99 中账户管理器的屏幕截图。

此屏幕将常见任务(导航到帐户)和不常见任务(如创建和删除帐户)分组。 这些特定任务都不会直接显示在屏幕标题客户经理中。 许多用户可能会发现这个屏幕和图 1 中的示例对话框一样具有挑战性。 在这两种情况下,用户都必须推断出屏幕的用途以及如何使用。

继 IUI 之后的 Money 2000 提供了一套几乎相同的账户相关功能,但在两个独立的屏幕上提供。 下面的屏幕截图显示了这些屏幕中的第一个,完全专注于让用户选择一个帐户。

Money 2000 中帐户选择屏幕的截图

Money 2000 屏幕包含的视觉元素数量与早期的 Money 99 屏幕大致相同,但该页面现在完全专注于让用户选择帐户。 例如,在 Money 99 版本中,用户必须单击两次才能打开帐户:一个用于选择帐户,另一个用于选择打开操作。 在 Money 2000 版本中,用户点击账户的唯一原因是打开它,因此只需点击一下就足够了。 这样,即使屏幕的数量可能会增加,执行常见任务所需的点击次数也会经常减少。

有时,用户会想要添加或删除一个帐户。 要在 Money 2000 中执行此任务,用户将导航到第二个屏幕(如下面的屏幕截图所示),该屏幕专注于设置帐户。

Money 2000 中帐户设置屏幕的截图。

在 Money 2000 的 IUI 版本中,每个屏幕的用途更加清晰。 此外,每个屏幕都有更多的空间来实现其目的。 例如,Money 99 账户管理器删除帐户按钮提供的空间很少,因为与屏幕上的其他命令相比,该命令很少使用。 相比之下,Money 2000 中的帐户设置屏幕可以更突出地显示此命令,使其更易于发现和不言自明。

什么是单一任务?

你怎么知道屏幕是否真的只专注于一项任务? 支持许多任务的屏幕可能被解释为只有一个目的,如果这个目的足够摘要的话。 这里有一条经验法则:如果设计人员能够用简洁、有意义且听起来自然的屏幕标题来表达目的,那么屏幕就是专注于一个目的的。

Money 2000 的设计人员考虑将这些屏幕(选取要使用的帐户在 Money 中设置帐户)分解为更多的屏幕。 然而,由于每个屏幕都有一个简洁、有意义且听起来自然的标题,因此设计人员认为屏幕已经足够集中了。 在设计屏幕时,如果你想不出一个清晰而简单的标题,那么你可能试图在屏幕上完成太多任务。

第 2 步:说明任务

每个屏幕的标题都应该简明扼要地说明其主要任务。 这可以是一个直接的指令(“选择你想要结算的账户”),也可以是一个你希望用户回答的问题(“你想要结算哪个账户?”)。

这是另一个听起来很简单的原则,但却经常得不到实践。 例如,早期版本的 Money 屏幕上的标题为在线金融服务经理余额账户。 用户必须从控件的排列和标签中推断出这些屏幕的用途和行为。

屏幕或页面的标题非常重要。 无论产品使用的是窗口、网页样式的页面、对话框还是其他设计,标题都不应该被允许滚动。

可用的屏幕有清晰的标题

执行许多任务的屏幕需要摘要或复杂的标题。 例如,图 2 所示的 Money 99 屏幕允许用户导航到帐户并设置帐户。 本页的摘要标题为“客户经理”,旨在实现这两个目的。 虽然用户可能对“客户经理”页面的功能有所了解,但他们可能没有意识到,这个屏幕上最常见的任务只是选择一个帐户。

有些屏幕或命令具有抽象的目的,不容易给出明确的标题。 对于这些屏幕,设计人员可能会故意选择一些模糊的名称,如“设置”;杜撰的流行语,如“QuickStep”;或揭示实现细节的术语(“数据库压缩”)。 这类名称往往会让用户感到困惑或误导。 此外,这些名称通常是名词,不能表达用户想要完成的操作,这增加了混淆。

屏幕标题和其他名称通常要到设计过程接近尾声时才能确定。 在设计和编码之后,设计人员经常要求编写者为屏幕想出一个合适的名字。 在这一点上,如果找不到好的名字,就没有追索权,因此团队可能不得不接受不清楚的名字。 这个缺陷的解决方案是让设计人员在设计过程的早期考虑屏幕功能和标题的清晰度。

屏幕功能和标题应侧重于客户执行的最常见任务。 设计人员经常试图提供大量的功能,以满足最大数量的客户,以及设计团队本身的愿望。 然而,附加功能总是会增加复杂性和其他成本。

屏幕标题指示设计清晰

在 IUI 模型中,设计人员在设计过程的最初阶段选择屏幕标题。 不是选择一个标题来证明屏幕的工作方式,而是使用标题来确定屏幕是否有意义。 如果找不到合适的标题,则会重新设计该功能。 如果没有任何设计允许一个清晰简洁的标题(也就是说,如果没有办法解释该功能),设计人员可能会放弃该功能。 在以下屏幕截图中,比较左侧的“Money 99 帐单付款”屏幕(该屏幕为页面(“即将到来的帐单和存款”)提供静态标签)和右侧对应的 Money 2000 屏幕(它有一个明确的标题(“点击你想要支付的账单”)):

屏幕截图显示了 Money 99 中的静态标题和 Money 2000 中的活动标题。

屏幕标题(当然只是一个短语或句子)比设计或代码更容易更改。 尽管如此,IUI 的经验表明,早期坚持使用清晰的屏幕标题可以产生更好的设计。 标题的选择应考虑用户教育和可用性团队成员以及产品设计师的意见。

团队成员有时可能会试图推迟这一决定,假设客户会分享他们对屏幕用途的理解。 然而,当被迫为这一目的提供清晰简洁的陈述时,往往会暴露出意见分歧。 通过解决这些差异并尽早选择标题,设计讨论可以更顺利地进行。

选择了一个标题后,不应将其视为不可更改。 随着时间的推移,设计人员可能会对屏幕标题进行改进,就像任何设计一样。 然而,选择的第一个标题应该在开发阶段尽可能强大。

选择屏幕标题指南

本节介绍选择好的屏幕标题的简单技巧。 为了使用这种技术,设计师想象一个朋友问:“这个屏幕是干什么的?”然后给出一个清晰、有用的回答,完成句子“这就是你所在的屏幕?”。完成句子的词语变成了屏幕标题。

在开发 Money 2000 期间,团队的文档编写者创建了屏幕标题指南,以确保质量和一致性。 例如,这些指南建议使用动词的标题,并将其表述为问题或直接指示。 设计人员避免使用静态名称,因为这些名称允许更多的抽象,而且可能很模糊。

为了简化标题,设计人员避免使用复合句,尽量使用对话语言,避免使用尴尬的术语和行话。 如果设计人员不能在不使用连词(“和”、“或”)的情况下描述任务,那么屏幕可能正在尝试执行多个任务,而用户不太可能立即理解该做什么。

即使仔细选择了标题,标题区域也可能太小,无法充分解释复杂的任务。 为了缓解这个问题,可以在屏幕内容区域的顶部包含一段简短的描述性段落,详细说明任务。

下表包含 Money 99 中屏幕标题的一些示例,以及 Money 2000 中相同或相关屏幕的标题。

Money 99 中的屏幕标题 Money 2000 中的新屏幕标题 注释
客户经理 选择帐户设置帐户
静态标题已更改为活动标题。
帐户详细信息 更改帐户设置 静态标题更改为活动的特定标题。
付款日历 支付帐单 模糊的标题具有描述性。
Online Financial Services Manager 重新设计后不需要页面。

使屏幕标题突出

一旦确定了一个有用的屏幕标题,确保用户的注意力被吸引就很重要了。 一些研究表明,用户很少阅读教学文本。 为了帮助克服这个问题,屏幕标题应该设计得突出而有吸引力,以吸引用户的注意力。 屏幕的视觉设计应该告知用户标题是最重要的阅读内容。

第 3 步:使页面的内容适合任务

当创建遵循 IUI 指南的软件时,最困难的设计工作通常涉及将功能分解为屏幕或页面。 下一步是确定将在每个屏幕上使用哪些控件来完成其主要任务。 这些控件构成了页面的内容,用户可以在其中完成工作。 屏幕标题和内容是程序和用户之间对话的两个部分。 标题提出程序的问题或给出指令,用户通过屏幕的界面做出回应。

如果屏幕标题清晰简单,那么设计屏幕通常很简单。 例如,前面显示的 Money 2000 屏幕之一标题为“选取要使用的帐户”。鉴于此标题,屏幕显然应包含用户可以选择的简单帐户列表。 另一个 Money 2000 屏幕的标题是“检查要包括在税款中的项目”。当然,此屏幕包含项检查列表。

用户应该能够很容易地弄清楚如何使用控件来实现屏幕的主要任务。 当用户被告知选择一个帐户,并且可以在屏幕上查找帐户列表时,即可确认对任务的理解。 这增加了用户成功的机会,也增加了他们执行其他任务的信心。

屏幕内容区域

屏幕内容区域的确切位置和形状取决于软件的设计。 在 Money 2000 中,屏幕内容区域是屏幕标题下方和任务列表右侧的所有内容。 此区域可能会在长屏幕上滚动。 一些非必要内容也可能出现在任务列表下方的状态区域中。

设计人员可以选择在内容区域顶部的段落中详细说明屏幕的主要任务。 用户不需要阅读此文本,但他们可能会发现这很有帮助。 许多用户可以跳过它,但仍能成功使用屏幕。 与标题不同,如果屏幕可滚动,则此描述可以滚动。 有关更多详细信息,请参阅有关选择屏幕标题的指南

如果设计人员希望页面显示非必要的提醒、警报或其他状态信息,则可以将其显示在主内容区域的左侧,即屏幕左侧的任务列表下。 从功能上讲,此状态区域是屏幕内容的附加区域。 此区域不够突出,无法包含基本控件。

提供一个清晰的页面出口

在成功完成任务后,用户面临另一个问题:何时以及如何离开屏幕。 对于主要任务是导航的屏幕,执行任务本身会将用户移动到下一个屏幕。 在其他屏幕上,用户可能很难知道如何继续操作。 例如,在要求用户在字段中键入信息的屏幕上,用户可能需要帮助来确定何时以及如何继续。 在这样的页面上,在一致的位置提供一个清晰的下一步按钮通常很有用。

可用性研究表明,即使工具栏上的全局导航按钮(如返回主页按钮)可用,用户也更喜欢使用此类按钮。 用户经常在没有明确出口的屏幕上感到不舒服,即使屏幕的唯一目的是提供可供阅读的信息。

有关此主题的详细信息,请参阅“其他指南”部分中的提供一种简单的方式来完成任务并开始新的任务

设计屏幕的最后一步是提供到辅助任务的链接,这些任务不是直接完成主要任务的功能,而是与屏幕相关的功能。 例如,如果屏幕上的主要任务是写信,该屏幕上的辅助任务可能是查找邮寄地址或打印信封。

辅助任务可能会显示对话框、更改屏幕内容的视觉呈现,或将用户导航到其他屏幕。 辅助任务可能会间接完成主要任务,也可能将丢失的用户重定向到他们正在搜索的位置。

如果页面是计算机与用户之间的对话,则辅助任务允许用户忽略计算机的当前问题,并要求计算机改为执行其他操作。 例如,想象一下这个对话框:计算机:“你想支付哪张账单?”用户:“实际上,我真正想做的是找到一张我不久前支付的账单。”

产品中的某些屏幕没有辅助任务,而另一些屏幕则有多个。 应避免创建一长串用户很难浏览的任务。 如果屏幕上有一个相对较长的辅助任务列表,那么最常见的任务应该放在第一位,分成单独的部分,或者以其他方式在视觉上强调。

该列表不应该包括所有可以想象的辅助任务,前提是它能使下一个导航步骤变得明显。 屏幕可以提供导航到列出更多任务的子页面的辅助任务,而不是提供许多辅助任务。

辅助任务的可视化设计

辅助任务应列在屏幕的次要位置,如果需要,可以访问这些任务,但不会分散用户对主要任务的注意力。 将此列表放在每个屏幕上的一致位置有助于用户在需要时快速找到列表。

如果在屏幕左侧显示辅助任务列表,则列表本身不应滚动,也不应随页面滚动,如 Money 2000 的Bill Pay屏幕的以下屏幕截图所示。

Money 2000 中账单支付屏幕的屏幕截图。

其他指南

本节介绍根据上一节所述的四个步骤创建 IUI 的五个有用指南。

使用一致的屏幕模板

在设计遵循 IUI 模型的软件时,应创建一个模板,用作每个屏幕的指南。 引导式模型并不要求使用任何特定的模板。 有许多可能的变化可以满足引导式设计。 你的产品可能只需要一个模板就可以用于所有屏幕,或者你可能会为各种目的创建几个不同的模板。

一个好的模板可以让新用户快速了解产品的屏幕的工作原理。 在产品屏幕中一致使用模板可以提供从屏幕到屏幕的良好用户界面流。 随着用户学会期望相同的元素出现在相同的地方,他们可以更快地扫描并开始使用每个新屏幕。

提供用于启动任务的屏幕

使用 IUI 设计的产品通常使用专门的屏幕来启动用户的任务集。 这些屏幕之所以称为活动页面,是因为它们组织了常见任务的相关组。 活动页面为用户提供了一个起点。 活动页面通常提供指向用户实际完成工作的其他页面的链接。 活动页面询问用户“你现在想做什么?”并列出可能的答案。 活动页面可能遵循一个特殊的模板,以帮助用户识别它们。

活动页面是一个很好的产品默认起始页。 当用户启动一个应用程序时,他们通常对自己想要完成的任务有一个想法。 通常,启动产品的原因是少数非常常见的任务之一。 产品的默认开始页面通过明确如何开始常见任务来识别这一点。

Money 2000 主页是活动页面的示例。 默认情况下,用户在启动应用程序时会看到此屏幕,其中显示了对常见财务任务(例如支付账单和余额帐户)的访问权限。

以下屏幕截图显示了 Money 2000 主页

Money 2000 主页的屏幕截图。活动页面列出了几个常见任务,并提供了指向其他页面上的任务集的链接。

由于 Money 提供了许多财务功能,因此只有最常见的财务任务适合出现在主页页面上。 对于所有其他任务,主页页面链接到一组称为财务中心的附属活动页面。 Money 的每个主要区域都提供了一个财务中心。 这些屏幕呈现下一层任务,作为每个区域内所有功能的起点。

例如,Money 税务区域包含产品的税务相关功能。 税务区域提供税务中心页面上这些功能的链接,如以下屏幕截图所示。

Money 2000 税务中心页面的屏幕截图。

如果可用的选项较少,活动页面也可以简单得多。 下面的屏幕截图显示了如何使用活动页面来管理 Windows 用户帐户。

用于管理 Windows 用户帐户的 Money 2000 活动页面的屏幕截图。

明确如何使用屏幕上的控件执行任务

遵循此指南的最佳方法是选择适当的屏幕标题,并将主要任务的范围限制为最常见的任务。 一旦页面有了明确的标题和目的,选择正确的控件集就很简单了。

提供一种简单的方式来完成任务并开始新的任务

用户在屏幕上面临的最后一个障碍是弄清楚何时以及如何离开。 用户通常通过单击链接或执行导航到另一个屏幕的命令来离开屏幕。 这些链接可以显示在屏幕内容区域、任务列表或导航工具栏上。 用户也可以通过关闭当前文件或应用程序本身来离开屏幕。

某些屏幕上的任务是为用户必须确认或取消的操作做准备。 此类屏幕通常提供一个执行和提交操作的链接,以及另一个取消操作的链接。 如果用户忽略这些选项并单击另一个链接,则程序会执行破坏性较小的选项。 屏幕应显示如果用户选择此路径将会发生什么。 可以用短语表达链接,使其更加明显。 例如,标记为“保存更改”的提交按钮意味着在单击该按钮之前,在屏幕上所做的更改不会生效。

即使用户可以随时离开,你仍然可以提供一个链接,提示用户明确退出页面。 对于仅显示静态信息的页面也是如此。 有关此主题的详细信息,请参阅提供一个清晰的页面出口部分。

启动并完成进程

在本文中,进程是用于处理将用户带到多个屏幕的任务的技术。

假设用户单击屏幕内容或任务列表中的链接,然后转到另一个屏幕。 这个页面可能是一系列屏幕中的第一个,这些屏幕可以实现一些总体结果。 在这一系列屏幕结束时,用户希望返回到该进程之前的屏幕。 至少有哪两种方法可以让用户返回? 重复单击“上一步”按钮,还是返回主页并从那里导航? 但这两种方法都不显而易见,也不自然。 大多数用户希望在最终屏幕上找到一个按钮,使他们直接返回到原始屏幕。

IUI 模型通过将进程、屏幕或一系列屏幕视为导航单元的概念来支持此方案。 用户可以进入进程,在屏幕上工作,并在最后一个屏幕上找到一个按钮,将他们返回到开始的位置。 重要的是,用户可以从产品中的多个位置启动进程。 用户总是能返回到开始的地方,无论他们在哪里开始这个进程。

进程名

每个进程都应该有一个名称,并且该名称应该出现在进程的每个屏幕上的某个位置。 Money 2000 使用此方法。 作为整个进程一部分的每个屏幕顶部都包含该进程的名称。 此进程名称显示得不如屏幕的唯一标题突出,因为它不那么重要。 进程名称提醒用户他们正在执行哪些过程,并强化了进程中的所有屏幕是单个功能的一部分的概念。 例如,Money 税务区域包括跨越多个屏幕的税务估算器进程。 此进程中的每个屏幕都显示集体进程名称及其唯一的屏幕标题。

进程的实施

相同的进程可以从不同屏幕上的各种链接启动,用户将始终返回到正确的起始页。 这种行为不能通过进程最后屏幕上的硬编码链接来实现,因为链接的目的地会有所不同。 相反,应用程序可以通过维护活动进程的堆栈来实现此行为,这与后退前进 命令使用的正常导航堆栈无关。 当用户启动进程时,启动屏幕将推送到进程堆栈上。 当用户单击进程最后一个屏幕上的完成按钮时,应用程序会从堆栈中弹出最新的启动屏幕,并将用户返回到该屏幕。

当用户离开进程中的屏幕时,进程将在进程堆栈上保持活动状态。 用户可以完成备份到离开屏幕的过程,然后继续。 这允许用户绕道,后退,然后继续这个过程。 若要了解此行为的工作原理,请在万维网上开始任何在线购物过程,离开网站,然后按返回按钮。 一般来说,你能从离开的地方重新开始。

“完成”按钮

要完成一个屏幕并在此进程中转到下一个屏幕,屏幕可以在页面底部附近显示一个按钮。 此按钮的标签为“下一步”、“完成”或类似内容。 如果按钮结束进程,并且可以从多个位置调用进程,则完成按钮的标题可以包括调用位置的名称。

在任何屏幕上,用户可能会决定已经完成了产品的当前区域,并想开始其他操作。 他们可能不想在转到产品的另一部分之前明确地完成当前屏幕。 导航工具栏可以为用户提供一组用于启动新任务的链接。 与其他任务链接列表一样,这些链接应该遵循使下一个导航步骤显而易见的原则,在下一节中详细讨论。

使下一个导航步骤显而易见

很少有程序可以同时提供其所有功能。 用户通常必须浏览整个程序才能找到特定的功能。 如果用户能够很容易地看到如何至少离他们想要的结果更近一步,他们的导航就会更成功。 使用 IUI 的屏幕在设计时就考虑到了这一原则。

例如,活动页面不一定显示用户从那时起可能想要实现的每个可能的任务或目的地。 相反,活动页面提供了一个足够完整的任务列表,这样用户就可以轻松地确定要单击的适当链接,即使仅将它们转到另一个链接页面也是如此 最频繁的任务应该最突出,并且需要最少的导航量。 不太频繁的任务可能需要更多的步骤。

下面是 Money 2000 中的示例。 假设用户想要执行一项偶尔才会做的操作,比如检查下一年的所得税缴纳估计金额。 用户首先在 Money 2000 主页上搜索此功能。 由于该功能没有出现在常见任务列表中,因此必须扫描财务区域的列表。 税务区域听起来很可能是目的地,所以用户单击该按钮。 税务中心页面包含一个链接,指向用户正在查找的税务估算功能,因此可以单击该链接并完成任务。 通过应用 IUI 原则,Money 2000 使用户能够直观地找到他们正在寻找的内容。

用户协助

本节介绍了一组建议的指南,用于将用户辅助文本集成到使用 IUI 的产品中。

主要协助是指屏幕上可见的所有文本(如以下屏幕截图所示)。 主要辅助提供以任务为中心的文本线索,用户可以轻松理解屏幕上显示的所有信息。 他们理解页面的目的和对象之间相互关联的方式,以帮助完成任务。 由于文本直接显示在屏幕上,因此回答入门问题(如“我应该做什么?”)的信息很容易访问,并且高度可见,用户无需采取任何行动。

Money 2000 的帐户设置屏幕的截图。

辅助协助由屏幕上不可见的所有文本组成,需要一些用户交互才能访问,例如单击或悬停在用户界面元素上。 这些内容对于完成手头的任务并不重要,但仍然是直接相关。

主要协助

主要协助可以包括以下部分或全部组成部分:

  • 屏幕标题

    示例:更改图片

    屏幕标题是出现在屏幕上的第一个也是最重要的项目。 其目的是用用户自己的语言描述可以在该页面上完成的任务。 屏幕标题应避免描述如何完成任务的详细信息。 屏幕标题中的文本应仅指屏幕的核心任务。 根据经验,任务的描述越简单、越短,任务的定义就可能越好。 有关本主题的详细信息,请参阅第 2 步:说明任务

  • 屏幕副标题

    示例:也可以从 Internet 下载新图片。

    即使经过精心的努力,屏幕标题也可能不足以充分解释复杂的任务。 使用副标题可以详细说明屏幕的目的。 可以使用副标题来帮助阐明页面的用途、提供额外的任务描述或帮助设置期望值。 没有阅读副标题的用户应该能够成功使用该页面。 与标题一样,副标题应该避免描述完成任务的详细信息。

  • 任务

    示例:更改屏幕保护程序

    任务可以显示为需要用户交互的文本链接或图形图像。 以文本链接形式显示的命令应基于动词,并作为清晰简洁的任务编写。

  • 命令按钮的标签

    示例:创建密码

    有三种类型的命令按钮:

    • Cancel
    • 完成
    • 提交

    取消和完成按钮只需使用“取消”和“完成”作为标签。 提交按钮应使用活动文本标签而不是“确定”。例如,使用“创建密码”而不是“确定”。

  • 其他控件的标签

    示例:键入密码

    单选按钮、复选框和文本框等控件的标签应写得清晰简洁,以便用户确切地知道控件的用途、使用哪些控件以及需要提供哪些信息才能完成任务。

  • “相关任务”链接

    示例:相关任务 - 更改另一个帐户

    “相关任务”链接是指向与当前功能相关的其他任务的明确入口点。 它们应编写为基于任务的链接。

  • “另请参阅”链接

    示例:另请参阅 - 更改主题

    “另请参阅”链接是辅助任务。 这些与主要任务相关,但会将用户带离当前上下文。 这些内容应显示为常规任务链接。 有关辅助任务的详细信息,请参阅辅助任务的直观设计

辅助协助

辅助辅助可以包括以下部分或全部组件:

  • InfoTips

    可以使用信息提示向用户提供有关任务链接或命令按钮的其他信息。 例如,任务链接上的信息提示可能会显示:“显示一个页面,从中选择要用于帐户的图片。”当用户将鼠标悬停在相关对象上时,信息提示会出现。 应为用户可以单击的所有用户界面元素创建信息提示。

  • “了解”帮助主题

    示例:了解 - 下载文件

    “了解”链接将打开帮助主题,例如功能概述、概念信息、支持信息和过程信息。 若要减少混乱,应尽量减少屏幕上的“了解”帮助主题的数量。

附录:设计和测试 Microsoft Money 2000

本节改编自设计人员自己的第一手描述。 本文讨论 Money 2000 团队如何修改设计和测试过程以适应 IUI 模型。

设计和测试 Money 2000

在《Designing Money 2000》中,使用引导式导航模型的团队对产品中已经存在很长时间的设计提出了质疑。 由于该模型的原理很简单,因此可以轻松地在设计过程中采用该模型并与之保持一致。 最终,设计人员们相信这个模型帮助他们做出了比没有模型更好的设计。

更清晰的标题和设计

Money 2000 的设计人员注意到,他们经常使用屏幕上没有出现的词语来描述功能。 在 IUI 模型中,屏幕应该自我解释。 例如,团队解释说,标签为付款日历屏幕是用来支付账单的。 在 Money 2000 中,该屏幕称为支付账单。 所有与该目的无关的元素都被转移到了辅助屏幕上,从而实现了更清晰的设计。

另一个示例涉及名为 Online Financial Services Manager 的屏幕。 该团队很难想出一个简单的解释来解释这个屏幕的用途。 他们无法做到,于是删除了此屏幕,并将其功能分布到更有逻辑定义的页面中。

帮助新设计人员

该团队发现,向没有经验的新软件设计师教授 IUI 设计技术很容易。 这些技术允许所有经验水平的设计师通过使用屏幕标题作为清晰度测试来评估他们的设计。 当被迫在设计不佳的屏幕上放置清晰简洁的标题时,设计人员很快认识到,对于页面来说,没有一个标题足够好。 他们意识到问题不在于标题的选词,而在于有缺陷的屏幕设计。 有了这种理解,他们就可以重新设计屏幕,以支持更清晰的用户交互,从而获得更清晰的标题。

包括编写者

随着设计的进展,团队意识到文档编写者和编辑应该参与创建屏幕标题。 编写者在之前的版本中挑选好标题的能力有限,因为他们只是在后期才参与进来。 屏幕通常是由设计人员或程序员临时命名的。 这些标题一直使用到产品周期的后期,编写者被要求想出最终的屏幕标题。 此时,重新设计设计糟糕的屏幕已经太晚了。

相比之下,Money 2000 团队在设计过程的早期阶段就有编写者参与。 这为屏幕标题带来了有价值的意见,同时也有助于设计。 如果屏幕太复杂,无法清晰显示标题,编写者可以建议重新设计页面。

到项目结束时,编写者和设计人员认为屏幕标题比以前版本更清晰、更有力。 编写者还发现解释新页面更容易,使记录产品的工作更简单。 所有团队成员都认为,在设计阶段让所有学科都参与进来,可以使产品更好、更容易使用。

可用性测试

在开发 Money 2000 时,该团队进行了多项可用性测试,以研究 Money 99 的旧导航结构与应用 IUI 模型所做出的更改之间的差异。

原型测试

在产品开发过程的早期,设计人员创建了一个原型,以探索用户对 IUI 的反应。 这项工作是在开发过程的早期完成的,以便在程序员开始彻底修改产品本身之前有时间完善模型的原则。

该团队用 Microsoft Visual Basic 和 HTML 创建了一个原型,模拟了通常在 Money 中进行的个人理财活动。 在原型中,用户可以导航到代表产品主要领域的 50 多个页面。 在这些方面,他们可以设置财务帐户、支付账单、查看报告以及处理其投资。

11 名参与者在 Money 99 和 IUI 原型中执行了相同的一组任务。 他们被随机分配先使用其中一种产品。 四名参与者目前是 Money 用户,四名参与者目前是竞争产品的用户,三名参与者以前从未使用过个人理财产品。

总体偏好表明,Money 的四个当前用户更喜欢 Money 99(他们在家使用的版本),而其余七个用户更喜欢新原型而不是当前版本。 就所有其他指标而言,三组用户之间没有差异。 就整体性能而言,用户使用 Money 99(每次任务 2.82 次)的错误区域是原型(每次任务 1.45 次)的两倍。 其他偏好数据和性能指标虽然不重要,但似乎有利于原型。 根据这些数据和其他测试,Money 产品团队决定在 Money 2000 中纳入 IUI 原则。

产品测试

完成产品的大多数代码后,该团队进行了另一项可用性研究,以检查 IUI 的最终实现。 在这项测试中,10 名从未使用过个人理财产品的参与者被选中使用 Money 99 或 Money 2000。 所有用户都执行相同的任务。

Money 2000 的用户成功完成了 89% 的任务;而 Money 99 的用户仅完成了 74% 的任务。 与原型一样,与 Money 99 相比,用户在 Money 2000 中的导航速度似乎更快,但没有显著差异。 此外,Money 2000 的导航总体主观满意度也往往高于 Money 99。

受控测试

由于 Money 2000 庞大而复杂,因此不太适合进行关于应用 IUI 效果的受控实验。 团队转而为测试创建了一个更加受限的环境。

该测试涉及一个“股票市场查看器”应用程序,该应用程序允许用户修改屏幕上显示的股市报表的显示。 用户可以更改报表中包含的数据列、报表列的顺序、其对齐方式以及所使用的小数位数。 设计人们们想看看与传统的图形用户界面相比,IUI 方法如何执行这项任务。

以下屏幕截图显示了测试中使用的传统用户界面。 单个对话框执行所有报表自定义任务。 许多应用程序提供用于从项目列表中选择子集的类似对话框。 该对话框包含两个列表:左侧列表显示所有可用的报表列,右侧显示用户为报表选择的列子集。 其他控件可修改右侧列表中所选报表列的顺序和格式属性。

传统对话框的屏幕截图。

对于此任务的 IUI 版本,团队创建了一个 Web 样式的应用程序。 每个自定义任务都放置在单独的页面上。 该应用程序还包括一个主页,如以下屏幕截图所示,询问用户希望如何自定义报告。

iui 测试屏幕的屏幕截图。

单击此主页上的链接会将用户转到其他页面以执行特定的自定义任务。 例如,以下屏幕截图显示用于选择报表列的页面。

用于选择报表列的 iui 测试屏幕的屏幕截图。

在两个版本的测试中,受试者被要求自定义报告,从给定的起始状态(显示在屏幕上)到指定的目标状态(显示在纸质讲义上)。 计算机记录了受试者自定义报告的时间和尝试次数。 当用户成功自定义报告时,计算机会通知他们。

测试包括 88 名参与者。 要求每个参与者使用应用程序的两个版本之一自定义一组 11 个报告。 此外,其中 72 名参与者在一周后返回,使用第一次会话的相同版本定制另一组 11 份报告。 每个受试者都被归类为电脑新手,主要使用电脑收发电子邮件、玩单人纸牌和上网。

两个版本的用户之间或任何其他感兴趣的变量之间没有显着差异。 用户以相同的速度执行任务,对任务进行相同次数的迭代,并且两个版本的总体主观满意度相同。 因此,此测试未能显示 IUI 导致性能或主观评级改善或降级的任何措施。

可以说,如果用户必须导航更多才能执行任务,那么执行任务的时间应该更长。 虽然这项实验没有表明这一结果,但重要的是要注意,这项任务的两种不同方法的平均性能时间及其相关标准偏差几乎相同。

需要进一步研究,以确定 IUI 的使用是否有可衡量的改进。 至少,此测试没有提供任何证据,证明 IUI 会损害性能或产品使用情况。

与网站比较

许多精心设计的网站使用与本文档中介绍的 IUI 模型类似的原则。 这可能是 Web 工作方式的副作用。 由于很难在单个网页上实现控件之间的复杂交互,因此设计人员经常将任务分解为多个部分,这些部分涉及多次访问服务器以获得新页面。 有些网站甚至会包含明确说明页面用途的页面标题。

传统应用程序的设计人员有一套更丰富的可用工具。 这给了他们更多的灵活性,但也提供了更多的机会来创建复杂和令人混乱的页面。 在创建引导式用户界面时,设计人员应该谨慎使用这种能力,并记住要重视清晰度和简洁性。