使用开源软件设计、开发和部署协作型 Web 站点，第 2 部分: 设计有效的用户体验

在这个系列 中，在 IBM Internet Technology Group 团队的带领下使用一套可免费获得的软件来设计、开发和部署一个完整的社区 Web 站点。这个系列的大多数文章主要关注这个 Web 站点的实际实现，但是这第二篇文章偏重于通用方法。这里解释了我们的设计过程，可以帮助您为应用程序、其他界面或 Web 站点创建用户体验。第 1 部分 讨论了团队的需求，对比了几种开放源码内容管理系统，并解释了选择 Drupal 的基本原因。
在这个系列中，我们使用一个虚构的组织，International Business Council（IBC）。IBC 让它的职员在一个协作型社区中与外部业务伙伴进行交流。IBC 需要重新设计现有的 Web 站点，需要有文档存储、讨论组、专门的工作组、研讨会日程安排、日程议题描述、会话过期和其他功能。
我们的过程涉及到分析业务目标、分析用户的目标和评估现有的 Web 站点。通过分析，我们设计了几个备选解决方案，然后根据用户反馈迭代地调整它们，最后形成了最终的设计解决方案。
图 1 概述了我们的过程，这个过程由四个基本阶段组成：
分析
设计
构建原型
开发
这个过程帮助我们将注意力集中于用户的目标、任务和关注点。尽管图 1 是一个线性的序列，但是这个过程并不是线性的。每个阶段都向其他阶段提供信息（既可以向前，也可以向后）。在整个过程中，反馈向前面的阶段提供基本信息，从而支持对解决方案进行改进。反馈会提供有价值的信息，保持项目不会偏离正确的方向并一直关注总体目标。本文主要关注这个过程的前三个阶段。

查看这张图的大版本。
正式的过程通常会生成文档，从而帮助从客户那里得到反馈和认可。在项目向前发展时，每个阶段的文档提供了对项目现状的共同理解，并为第四阶段中的实现提供蓝图。由于日程很紧，除了要设计的工件之外，可能没时间生成其他东西。IBC 现有的 Web 站点有一些已知的问题，也有一些有用的特性。我们使用一个正式的框架对分析进行组织，从而更有效地与客户进行讨论。
随着收集到更多关于项目的信息，过程的方向越来越明确，支持设计目标的备选方案的数量也逐渐减少。通过更深入地了解设计问题，设计决策得到了改进。随着时间的推移，备选方案的范围逐渐收缩，而关于设计方面的信息逐渐增加。这些决策会驱动这个过程和最终的实现。
本文详细描述分析阶段。您会发现设计阶段是一个迭代式的循环过程，包括设计、构建原型和评估设计备选方案。通过了解我们的用户，我们可以建立一个有用、好用且符合期望的 Web 站点。
分析阶段主要关注收集信息以便更好地理解项目。它会收集关于业务和用户目标的信息。
著名的架构师Vitruvius 在他的书 De architectura 中指出，结构必须展现出 firmitas、utilitas 和 venustas 三方面的品质 —— 它必须是坚固的（即持久耐用）、有用的和优雅的。这个规则适用于任何良好的设计。它必须持久耐用，不会崩溃。它必须提供一些实用的功能。最后，它必须是优雅的，让用户满意，让他们愿意再次使用这个工件。
与之相似，AIGA 认为良好的体验设计 应该满足三个必要条件：有用（提供所需的功能）、好用（提供流畅的体验）以及符合期望（提供用户希望体验的交互方式）。通过使 Web 站点有用、好用且符合期望，可以提高客户的满意度和参与度。
我们首先分析现有的 Web 站点。我们的过程分四个方面评估这个 Web 站点：
内容
导航和层次结构
交互
可视语言
这种方法主要基于 TSDesign 的 User Experience Audit（参见参考资料）。在整个过程中一直使用这些分析类别作为对评估、建议和设计讨论进行组织的方法。我们将分析所获得的信息整合在一起，提供有用的建议。下面简要描述业务和用户目标以及每个分析领域。
在任何项目的一开始，了解业务目标都是很重要的。明确任务、业务目标和项目目标会在客户和设计者之间建立一个共同的理解基础。这样，后续的设计决策才能够支持这些目标。目标必须是明确的，这样后续的设计决策才能够在整个过程中针对并支持这些目标。我们的目标是为客户提供外部 Web 站点的组织的典型目标。在这个设计问题中，业务目标包括：
在公司的解决方案和策略方面，与客户进行更充分的协作
从客户那里收集反馈
传播关于组织和即将举行的活动的信息
吸引客户
识别用户的目标和期望也很重要。有许多种技术可以用来收集这种信息。通常，利用用户访谈和调查表可以更好地了解用户在与设计进行交互时的角色和任务。如果有现有的设计，就可以向用户询问对这个设计的评价和建议。
对于我们的设计问题，用户目标包括：
能够轻松地访问内容，比如只需不超过三次点击就能够访问到任何内容
提供简单且一致的 Web 站点导航
在编辑内容和提交文件附件时允许选择成员
允许用户社区进行讨论和发表评论
向社区提供及时的信息
受众（audience） 这个概念描述访问站点的所有用户以及他们访问站点的原因。然后，将识别出的用户类型整理成主要角色。然后，根据 Cooper 的定义，识别出每个类别的角色（参见参考资料）。Cooper 的 GOAL-DIRECTED? 方法依赖于代表特定兴趣的人，而这些虚构的人依赖于正在创建的产品、服务和系统。
这些模型中最关键的部分是用户集。这些原型用户的特征是从调查结果中整理出来的。不同的用户集代表不同的行为模式和目标 ——Cooper。
通过确定角色（如图 2 所示），就可以度量设计的易用性和有用性，而不需要向过多的用户征询意见。如果在设计过程中这些角色感到满意，那么大部分用户也会感到满意。在我们的设计中，定义了三种角色：典型客户、组负责人和管理员。这些用户的需求差异很大，这样对用户类型进行划分是很合理的。我们与每个类别中的许多用户进行会谈，了解他们如何使用现有的 Web 站点。在设计过程中，我们还会观察他们在我们的原型中执行任务的情况，以此为设计提供反馈并更好地了解他们使用站点的实际方式。

内容是吸引用户访问任何站点的原因。内容必须是一致的、最新的，而且支持每类用户的总体目标。在重新设计期间，我们必须考虑几个问题，包括：
内容的表达方式应该是一致的。
内容应该是一致的，以免用户被相互矛盾的消息弄糊涂。内容中的不一致会导致用户感到混乱和迷惑。
不一致内容的典型例子是在整个站点中对词汇的使用。应该确定一个词汇表，并一致地使用它。例如，图 3 显示一个内容词汇整理过程，它将导航词汇从不一致的让人混淆的词汇表转换为更一致的词汇表。在研究导航和站点的层次结构时会进一步整理这些词汇。（一些词汇是第二级链接，其他词汇是第三级链接。）
特性应该支持总体目标。
每个特性都应该支持应用程序的总体目标。否则，它们会使用户分心。如果内容的组织散乱，用户就难以集中注意力。
内容的数量应该与它的使用方法相适应。
内容的数量应该与它的使用方法相适应。通常情况下，用户不会详细阅读整个 Web 页面，而是会寻找相关信息。应该尽可能减少信息量，同时提供必要的层次结构。这样，用户就能够轻松地 “扫描” 页面。在适当的地方提供更多细节。
图像、图形和动画应该增加价值。
任何图形元素都应该为总体体验增加价值，并支持对内容的表达。在某些应用程序中，图像往往会分散注意力，而不是帮助用户理解内容。要避免这种情况。
内容应该是精确的和最新的。
显然，所有内容和代码都应该是精确的和最新的，尤其是对于时间敏感的数据。这包括为了安全目的所做的软件升级以及修改过的内容。
图 3 显示现有站点和重新设计的 Web 站点上的导航条内容词汇。在整个站点中使用一致的词汇表会使站点更清晰，减少产生混淆的可能性。

在帮助用户轻松地完成任务方面，导航和层次结构是很重要的；它们可以帮助实现自然而且容易使用的界面；它们应该是直观、简单且可预测的。当用户点击某一元素时，用户会转到哪里应该是很明显的。Krug 对 “真实世界” 中的导航和 Web 站点导航做了比较（参见参考资料）。他指出，在网上比例尺、方向和位置是没有意义的。为了克服这些差异，Web 站点应该采用几种通用技术和约定，包括：
适当的名称
通过给元素提供与其用途相适应的标签，用户会更好地了解当前的位置以及点击链接时可能转到的位置。能够正确地预知链接的目标位置是很重要的。这可以通过提供结果页面的 “迹象” 来实现。
适当的路径
通过提供到达层次结构中的元素的适当路径，用户可以在头脑中对 Web 站点形成正确的思维模型，并明确他们在站点上的位置。
位置感
良好的应用程序总是会提供适当的位置感，让用户能够知道当前所处的位置和上下文。另外，他们也知道接下来要去哪里。这可以利用可视元素（品牌）和页面在站点层次结构中的位置来实现。
导航和层次结构的贯穿
Web 站点内容应该进行适当的超链接。在某些情况下，breadcrumb 导航有助于用户了解他们在信息空间中的位置，并提供了在层次结构中后退的快速方法。例如，对 Web 站点其他部分的引用应该是活动链接。人的名字应该链接到这个人的配置文件。
最后，这个 Web 站点划分成由工作组、研讨会和成员组成的三个主要区域。在可视语言中使用颜色来表示每个主要部分，从而建立位置感。图 4 对比了每个区域中颜色的使用。

交互应该尽可能明确以便于用户完成任务。在总体设计的设计和构建原型阶段中，将研究并记录典型的交互场景。交互是主要的设计元素之一，它对使用的简便性有很大影响。交互包括：
清晰的指示
尽可能向用户提供简单直观的说明。在这种情况下，“少就是好”，而且提供简单的说明有助于确保用户阅读这些说明并按说明进行操作。尽管大多数操作只对操作团队是有效的，但它们依然是始终在整个站点中显示的简单文字。
清晰的反馈
对于用户执行的任何操作，都应该提供一致且清晰的反馈，这是很重要的。显示给用户的消息应该采用一致的语言和术语。反馈在任何情况下都不应该误导用户。
高效的完成
系统应该在恰当时支持任务的高效完成。为用户提供完成（或不完成）特定任务的替代方法。提供适当的反馈来表明任务的完成。
错误处理
应该尽可能避免会出现错误的情况。但是如果错误发生了，处理应该简单直观。显示给用户的任何消息都不应该将当前的情况归罪于用户。
意图明确的体验
意图明确的体验就是期望管理，比如为用户操作的后果提供暗示。提供一种机制，让用户知道他们的操作会有什么后果。
没有死胡同
死胡同会使用户处于不知道要做什么或接下来要到哪里去的境地，界面应该避免这种情况。
进度的指示
与应用程序的交互应该向用户提供任务进度的指示。
协作
协作不一定是设计的目标，但是在网络环境中在设计中支持协作越来越常见了。尽可能支持用户之间的协作，从而促进社区的发展。社区可以通过用户发起的评论和讨论相互支持。
在遇到错误时，不要提供 404 页面（这是一个显示错误消息的死胡同），而是显示一个修改过的站点地图页面（见图 5），这样用户就能够轻松地找到相关信息。

可视语言是一套图形技术，用来将站点联系在一起并为用户提供一致的明确的体验。可视语言有几种不同的元素，包括颜色、网格、排版方式、窗口小部件和图像。可视语言在整个站点中应该保持一致，并支持设计的总体目标。它应该对应用程序的导航和层次结构起补充作用。可视语言是建立强烈且一致的风格的最有效方法之一。它有助于通过共同的元素风格在设计中建立位置感。
一致的可视样式
可视样式应该在整个站点上保持一致，并对总体设计策略起补充作用。使用一致的元素会让用户意识到他们是在同一个 Web 站点上。
有效的概念
有效的可视概念在表示的所有方面支持总体设计。它会在视觉上表示设计的共同业务目标和用户目标。
对导航和层次结构的支持
可视语言应该支持层次结构的概念，并对用户的位置感和任务的上下文起补充作用。它应该明确地指出用户接下来可以去哪里。Web 站点的结构应该是容易理解的。
明确的品牌标识
明确的品牌标识非常重要，它会使用户对 Web 站点感觉良好，并知道站点是稳定且一致的。
使用颜色来帮助定义品牌和可视语言。如图 6 所示，颜色有助于在 Web 站点中建立位置感。

下面的阶段要研究候选方案，主要关注在迭代过程中没有被淘汰的那些想法和技术。我们通过循环进行设计、构建原型和分析来产生设计决策，并创建有用、好用且符合期望的解决方案。结果是产生了 Web 站点的场景（或者说 “彩排”），这些场景突出表现了已定义的角色的活动。通过用户反馈以及对常见的导航类别、层次结构、交互和可视语言的分析，可以判断候选方案的效能。




回页首
设计阶段为新应用程序或 Web 站点创建设计。这个阶段帮助对 Web 站点的功能和技术规格说明进行精练。设计决策并不是随便决定的，而是必须支持 Web 站点的业务目标和用户目标。利用第一阶段 取得的分析结果和建议，设计阶段要对以下方面进行详细设计：
内容（页面示意图）
导航和层次结构（信息体系结构）
交互（场景分析）
可视语言（可视样式方针）
内容及其结构应该在整个 Web 站点上保持一致。在这里，应该建立对典型页面的描述，其中包括识别出的主要元素以及它们在页面上的相互关系。最终的布局可能有所不同，但是已经识别出的组件元素将出现在所有页面上。例如，一级导航元素可能出现在页面的顶部，二级链接可能出现在右栏中。现有页面的相关信息根据当前用户进行定制，之后再显示出来。图 7 粗略地显示内容的布局及其与页面上其他元素的关系。

导航和层次结构提供了 Web 站点的骨架，其中描述了信息的主要类别及其属性。然后，将它们组织成 Web 站点的地图以及一套菜单、按钮和相关链接。共有三级导航，这反映在图 8 所示的站点地图中。

查看这张图的大版本。
通过构造出站点上最常见活动的交互序列（静态的或动态的），对交互进行分析。我们的目标是减少访问 Web 站点上的任何信息所需的点击次数。我们希望减低感知负担并尽可能提高使用的简便性。
典型的交互序列如图 9 所示。这一系列屏幕表示一个简单的任务交互序列，从主页到研讨会页面，再到特定研讨会集会的信息。每个页面都是通过在前一个页面上进行用户选择（点击）而到达的新页面。这个简短的序列从主页开始，寻找特定研讨会中某次集会的相关信息。我们已经对在原 Web 站点上非常困难的一个任务进行了修改，使它只需要两次点击。如果需要的话，可以为同一任务针对每个角色创建不同的场景。然后，可以确定不同的角色在新设计中如何高效地执行他们的任务。可以通过易用性研究、会谈或其他技术发现这些任务。通常，执行任何任务都有多种方法。一些替代方法也记录在设计文档中。

我们希望建立一套一致的可视语言，以此对业务目标和用户目标进行补充。这里的意图是使 “外观和感觉” 更简单、干净且容易使用。可视语言要反映设计方式，并有助于简单化和使用的简便性。可视语言包括许多图形技术，比如菜单以及：
颜色
颜色是一种有用的可视工具，可以帮助为 Web 站点创建特色和外观。为了符合简单性这个设计目标，使用白色的背景和浅灰色定义一个简单且干净的外观。意图是让读者将注意力集中在内容和他们与内容的交互上。
排版方式
这是另一个帮助定义 Web 站点的风格的工具。同样，其意图是显示一个简单、干净且可伸缩的字体设计。使用的字型应该在不同的平台上都存在，至少应该可以退化到一般的替代字体。图 10 给出了一个例子。

图像、图标和徽标
还可以使用图像、图标和徽标为设计提供独特的品牌和位置感。
布局和网格
布局将所有组件组合在一起。网格是使原本很复杂的页面井井有条的好方法。
可以建立一个风格方针，在其中总结这些技术以及应该如何应用它们。实际上，这些风格方针常常采用 Web 页面的形式，其中用大量示例向客户提供整套可视语言的参考实现。




回页首
在构建原型阶段中，使用从前面阶段收集到的信息创建设计候选方案。这些候选方案可以采用多种形式，从可以快速建立的低真实度原型（如图 11 所示）到包含用户交互的高真实度原型。正如 Berger 指出的，有许多类型的原型，从抽象的到比较具体的（参见参考资料）。原型技术包括：
交互式卡片序列
纸上原型
线框图
Excel 电子表格模拟
Photoshop 模拟
Flash demo
基于代码的实现
原型具有内容真实度、交互真实度和可视真实度等属性。图 11 说明了这些原型技术的内容真实度、可视真实度和交互真实度。原点代表静态的原型，右上角代表最接近真实应用程序的原型。

在构建原型时，提供更详细的原型和在给定的时间内开发更多候选方案，这两种愿望是相互冲突的，需要在它们之间进行权衡。这两类原型都很重要。但是在设计过程的早期，如果细节太多，就可能偏离原型的目标，将注意力吸引到错误的设计领域。正如 Yin Yin Wong 在她关于快速原型开发的文章中指出的（参见参考资料），界面设计人员可以使用许多图形设计技术。例如，如果对布局感兴趣，可以用文本块构建原型，这样就可以展示信息结构而不需要给出过多的细节，如图 12 所示。

Marc Rettig（参见参考资料）将使用低真实度原型的动机总结为：
构建高真实度原型要花费很长时间。
审查人员会对原型细节进行评论，而忽视重要的特性。
因为修改高真实度原型比较困难，开发人员往往不乐意进行修改。
原型会使人们对系统形成预期，一旦形成，就很难改变。
高真实度原型中的一个 bug 就可能使测试完全中断。
通过使用低真实度的原型，可以更有效地进行设计。
反馈是这个过程的重要方面。原型阶段与设计阶段紧密结合，它们相互传递信息以此促进发展。
我们选择了两种原型技术。最初，我们使用低真实度的线框图，从而将讨论的重点放在内容和信息体系结构上。我们用这些线框图表示 Web 站点的每个重要部分。图 7 和图 9 显示了典型的线框图。
在从低真实度模拟中获得页面需求之后，我们使用更高真实度的原型来说明各个任务的流程。这些原型都是静态的，高分辨率，并包含相当多的可视语言成分。图 13 显示 Web 站点上典型研讨会页面的高分辨率原型示例。





回页首
这个过程中的最后一个阶段是构建 Web 站点。在开发阶段中，要实际构建和测试 Web 站点。前三个阶段为设计的实现提供了指导方针。开发阶段主要关注实现。
没有专门的测试阶段。在开发的过程中，要经常进行测试，检查实现的稳定性和正确性。在实现的不同阶段，利用来自客户的反馈使总体设计保持正确的方向。本系列中后续的文章将详细讨论实现问题。




回页首
在这篇文章中，讨论了我们为客户设计 Web 站点的过程。这个过程也有助于设计其他用户体验，比如应用程序和物理对象的界面。希望本文能够帮助您对自己的过程进行组织。文中提供了相关方法和技术的参考资料，帮助您了解别人的设计过程。
设计完 Web 站点之后，就要开始实现阶段。本系列中的后两篇文章将讲解如何为 Windows（第 3 部分）和 Linux（第 4 部分）安装开发环境。建立这个环境之后，就可以使用 Drupal 创建自己的 Web 站点。后续文章将讨论用 Drupal 开发 Web 站点特有的问题。