商业Web应用的用户体验设计

为商业Web应用设计用户界面编译：陈良泳（chenliangyong@ QQ:120957033）金和软件用户体验设计师我们正在招聘用户研究、交互设计、视觉设计、前端开发人员。

长期有效。

2010-3-13原文地址：/2010/02/25/designing-user-interfaces-for-business-web-ap plications/商业Web应用的设计经常会被疏忽。

我见到过大量既不符合企业目标也不能满足用户需求的应用，因此导致利润的亏损和糟糕的用户体验。

甚至是，设计师完全没有参与到应用开发过程当中，而是由开发人员承担全部的职责。

对于开发人员，这是一个艰巨的任务。

开发人员也许拥有前端或后端的丰富开发经验，但是他们的设计知识有限。

最终只能是客户不满意、用户沮丧和项目失败。

因此，我将介绍商业Web应用界面设计的基础。

虽然在UI设计时，可以使用许多不同方法、技术和原则，但我们这里主要专注于商业Web应用。

Web站点VS Web应用很容易将Web应用（ Web Applications）和web网站（Websites）相混淆，就像将用户界面设计和网页设计相混淆一样。

但是它们从本质上及其它许多方面都不同，我们将在本文中进行探讨。

Web网站由许多页面组成，这些页面往往包含许多静态文本、图像和视频，只有有限的交互性功能（例如，联系表单和搜索功能）。

网站的主要作用是传播信息。

一些网站使用CMS （内容管理系统）生成动态内容，但是其性质仍然是提供信息。

而Web应用是动态、交互式的系统，帮助企业执行重要的商业任务，达到衡量和提升企业生产力的目的。

因此，Web应用的主要作用是根据定义的业务规则，去执行那些服务于用户任务的功能。

对用户而言，Web应用需要较高层次的参与和应用知识。

用户不会只是偶然性的发现这个应用和无意识的随便使用。

他们会将这个应用作为一个日常性使用的工具，去完成非常重要的商业任务。

最后，即使用户不喜欢它，也不能轻易的停止使用它和用其它应用替代它。

CampaignMonitor是一个强大的电子邮件营销应用软件，而Jeff Sarimento的网站旨在向读者展示他的生活和工作。

Web应用的类型商业Web应用的业务范围广泛，从货品计价、内容管理系统、文档管理系统，到金融和财务系统等等。

我们可以将商业Web应用区分为开放的和封闭的应用。

开放的系统是在线应用，任何人都可以注册账户，然后轻松的访问。

用户可以通过web网络访问这个应用，可以免费或付费注册账号。

封闭的系统是离线应用，不能在公司外部访问和使用（虽然很多系统通过一些服务或是专用接口，向商业伙伴展示了一些功能）。

这些应用往往是在公司内部网络中运行，只有公司员工才可以使用。

我不知道是谁创造了weblication这个词，但我喜欢这个词，它大致说出了web应用是什么。

但这并不是说一个web应用是一半网站和一半应用的混合体，web应用比这可要复杂的多。

首先，理解你的用户也许你已经不断的听到说要理解你的用户，并且理由也很充分：一个成功的用户界面要以用户和用户任务为中心。

然而，这就是为什么大多数开发人员无法创建良好用户体验的关键所在。

正如Steve Krug 说的：“开发人员喜欢复杂性，他们喜欢去探索系统是如何运行的。

”当你去识别和确认谁是用户时，记住客户不是用户，你自己也不是用户。

虽然客户的管理层经常会对项目感兴趣和试图影响决策，但他们不会一天中在电脑面前坐上几个小时去使用它（除非这个应用就是针对他们的）。

如何识别用户？你可以使用许多技术去识别用户，例如用户访谈、商业利益相关者访谈和“影子”观察法。

通过访谈，你可以知道用户对于系统和计算机的基本理解和认知。

而通过“影子”观察，你可以知道用户如何执行任务和犯了哪些错误的更加详细的信息。

之所以叫“影子”观察法，是因为观察者就像一直跟随用户的影子一样，去观看和记录用户的每一个任务步骤。

如果你没有遇到真正的用户（可能是因为你没有权限，或是在设计开放的应用），你可以使用“人物角色”来帮自己识别用户。

“人物角色”是真实用户的代表，包含了用户的习惯、目标和动机等等。

由于有关用户的某些信息往往是通过商业分析中确定的，所以你可以利用它来创建人物角色。

如果你对人物角色方法不太熟悉，Brand Colbow的漫画将对你有帮助（如下图）。

人物角色 任务分析有助于确定用户在工作中需要完成哪些任务、如何完成、需要多长时间、犯了哪些错误。

有时用户正在使用你将要重新设计的旧版本应用。

你正好可以利用这套旧系统，来看看用户是如何操作的。

这样你会很容易了解到用户的任务和遇到的挑战。

无论谁是你的用户，有一点可以肯定的是：在大多数情况下，您必须同时考虑新手和专家。

要让新手用户尽可能快的学习和上手，而专家用户要尽可能快速高效的完成任务。

这就可能要分别为他们创建单独的用户界面。

但在很多情况下，你可以使用各种技巧（比如隐藏高级功能，逐渐显露——progressive disclosure ），来保证不同类型的用户正常使用同一界面。

这些研究通常由市场分析来完成。

但当没人来负责这项业务时，你应该去完成它。

一旦得到了必要的信息，就可以开始设计了。

设计流程有许多种界面设计流程你可以采用，或者你已经使用了某一中。

然而，我建议你考虑敏捷（Agile ）方法。

为什么呢？因为对于用户（或客户）来说，用户界面就是产品。

他们不会关心你的概念构思、先进的后台技术或强大的服务器。

他们希望看到的只是用户界面。

那么，敏捷方法有何帮助？主要是它的重要的原则：迭代方法。

每一次迭代都包括了你所定义流程的所有步骤。

这就意味着，第一次迭代结束后，你将得到一个可以进行测试的产品：即一个原型。

这个人物角色有这些目的 人物背景： Mike 是一个家小型制造公司的现场支持工程师，他经常会被委派外出，一天之中只有一两次在办公室。

目标和动机Mike 想要在到达客户那里进行维修之前，就知道发生了什么问题。

目的是为了第一时间就能准确的修正问题。

回访或超过计划日程，会占用他个人时间和公司最低要求时间。

草图（Sketching ） 草图是探索思路的一种强大方法。

目的是通过起草各种不同的概念，找到最佳方案。

大多数草图会被丢弃，但这无所谓。

正如Bill Buxton 在他的《Sketching User Experience 》一书中说的：草图快速低廉且容易处理，这正是它为何如此强大。

草图（sketches ）和线框图（wireframes ）一样吗？也许区别是模糊的，但是我觉得不同。

线框图不是捕捉粗略的想法，而是对粗略想法的延伸实现。

可以读读IxDA 上的精彩讨论：线框图前的草图。

一旦你得到“正确”的草图，或者至少你认为正确的一个，你便可以创建更加详细的线框图或直接去创建可交互的原型。

草图原型测试Jason Robb的草图有关草图和线框图的趣味阅读：∙35杰出的线框图资源∙起草构思用户体验的工具∙20步改进线框图原型（Prototyping）接着就是去创建能够模拟真实应用的原型。

原型可以包含一个或多个功能（或所有功能），但它只是模拟真实应用的行为，而不是对功能的真正实现，让用户感觉到好像真的在运行。

但原型也可以包含一些真正的功能，例如复杂的计算。

由于HTML原型是临时性的（它的目的是验证想法），所以不用花时间在代码上。

让bug 最少，但只要能够运行就行，毕竟你最终会扔掉它。

你也可以使用一些专门的原型设计工具，如Axure，有些人甚至PowerPoint做原型。

一个电子商务网站的Axure交互式原型，e-maujean提供。

原型设计的相关阅读和工具：∙5个Web设计规划和原型设计的实用工具∙一个实践者的原型设计指南: 来自Rosenfeld Media的一本书∙16个用于原型和线框图的设计工具测试（Testing）原型如果不用于进行测试，原型也就失去了其真正的意义。

测试并没有那么难，正如Jakob Nielsen 和 Steve Krug提倡的“简易可用性测试”方法，它成本低廉、快速，并为你的设计决策提供宝贵建议。

你也可以将测试结果作为另一次迭代（草图-原型-测试）的基础。

至少在主要问题解决之前，你都该进行测试。

我们知道软件项目的时间和预算都很紧张，所以为了更加高效，要尽早测试和经常测试。

Steve Krug的这本《Rocket Surgery Made Easy》书是简易可用性测试的最好资源，你可以找一本进行阅读。

上图是对Delicious进行可用性测试，(nz)dave提供更多阅读：∙为什么你只需要测试5个用户∙可用性测试不神秘∙可用性测试神话设计原则现在流行许多设计原则，但还没有形成最终的普遍共识。

所以我们这里去看一些非正式的设计原则，但并不进行严格定义。

一致性一个优秀用户界面的关键要素是“一致性”和“熟悉感”。

用户界面在整个应用的所有部分的应该一致，从导航、颜色到术语，这叫做内部一致性。

用户界面还应该和该应用所处的环境一致，例如和操作系统或其它配套应用达到一致，一个典型的例子就是微软Office 套装应用，这叫做外部一致性。

保证一致性的一种有效的方法，就是为每个项目或为一组项目定义用户界面指南（user interface guidelines）。

每个详细的设计决定都应该遵循它。

用户界面指南不仅能保持界面一致性，还能够作为文档帮助团队成员更好的理解你的决策。

虽然是一个简单例子，SprinklePenny在整个应用中达到了一致性和熟悉感一致的用户界面使得学习曲线缩短，因为用户已经认识了系统的某些部分和复用以前的使用经验。

但是“熟悉感”有时会和“一致性”相混淆。

具有“熟悉感”的用户界面能够吸取用户的心智模型和利用合理的隐喻方法。

例如，文件夹就是对文件组织方式的著名的隐喻，而不再是使用以往命令行操作系统的“目录”。

总之，就是要使用用户的语言。

很多企业用户有一个共同的观点是：一个良好的用户界面应该看起来像微软的Office 产品，尤其是Outlook。

我不想去解释这是否有意义。

但是我想说的是：要遵循“以用户为中心”的方法这里，我只提出不同于他们的建议：要沿用“以用户为中心”的方法，并解释为什么为员工、客户和合作伙伴（合作伙伴的用户）设计应用程序才是重要的。

尽管如此，大多数企业都不相同，他们的工作流程也不同。

例如，来自同一行业的两个公司可能有完全不同的流程，将迫使你超越和创新。

设计流程中的这部分可能非常有趣，当然你也要在创新的程度上多加把握。

更多阅读：∙为设计和选择组件∙为什么一致性如此重要高效毫无疑问，当用户使用商业应用时应该能够达到高效，这正是客户花钱的原因，也正是管理者对应用的期望。

用户界面应该能够让用户高效工作，并以最轻松和快速的方式完成任务。