商务web应用程序的界面设计

在smashingmagazine上看到这篇文章，讲的是Web应用程序设计流程和准则等方面，也许对大家有所帮助。翻译比较仓促，错误地方请多指教，查看原文点这里。

　　商务Web应用程序的设计常常被人们所忽视。我看到许多程序，它们既不符合商业目标，也不满足用户需求，它们有很差的用户体验，并造成了商业利润的损失。更夸张的是，有些设计师根本没有参与整个程序的开发流程，而是把全部职责都推给了开发人员。

　　对于擅长前端和后台技术的工程师来说，他们缺乏设计能力，很难完成这项艰巨的任务。不满意的消费者、沮丧的用户，以及失败的项目，也就自然而然地出现了。

　　接下来，我们将介绍“商务Web应用程序”界面设计的基础知识。一般来说,人们可以提供许多有关界面设计的方法、技巧和准则，而这里，我们的重点将放在商务Web应用程序上来。

一.网站与Web应用程序
　　我们很容易将Web应用程序和网站搞混，就像搞混用户界面设计与网页设计一样。其实它们在本质上和其他方面上都有很大不同，本文将就此与大家探讨。

　　一个网站更像是一组网页集合，大部分都是静态文本、图像和视频等等，只有有限的交互功能（联系表单和搜索功能除外）。网站的主要作用是提供信息。虽然一些网站使用“内容管理系统”来提供动态文本，但从性质上来说依旧是信息。

CampaignMonitor是强大的电子邮件营销软件，而Jeff Sarimento 的网站向读者讲述他的工作和生活。

　　另一方面讲，Web应用程序是动态交互系统，它帮助企业完成重要商业事务，评估并提高企业自身生产力。因此Web应用程序的主要作用是：根据明确的业务规则，满足不同用户的需求。

　　Web应用程序在参与度以及知识储备方面，对用户有更高的要求。这些用户不只是偶然地使用了它，并评价一番，而是把它当作完成日常重要商务的平台。总之，当他们不了解一款程序的运行机制时，是不会随便喜新厌旧的。而对网站来说，这种情况却常常发生。

1.1 不同类型的Web应用程序
　　Web应用程序的业务范围，可以从为自由职业者开发票，到内容管理、文件管理、银行和金融系统等等。

　　我们可以区分出开放的和保密的应用程序。在开放的程序中，用户可以很容易接近到其他注册用户。他们可以在网上使用这些程序，选择注册免费账号或是收费账号。保密的应用程序通常不允许在公司以外的地点使用。在外面,它们仅仅是一个“离线”的程序（虽然很多系统通过一些服务或是专用接口，向商业伙伴展示了一些功能）。这种程序一般只能在公司的内部网络中运行，只有员工才可以使用。

　　我不知道是谁创造了weblication这个词，至少在现阶段我很喜欢它，它描述了Web应用程序是什么。但这并不意味着一个Web应用程序就是网站和程序的简单混合，它可比这复杂得多。

二.首先要了解你的用户
　　有一句话，你可能听过有一千次了，也听过遵循它的理由。这就是“一个成功的用户界面，一定要以用户和他们的任务为核心”。这也是为什么许多开发人员没能创造出良好的用户体验的关键。正如Steve Krug所说，“开发人员喜欢复杂的东西，他们享受发现事物运行机制的过程。”

　　在识别用户时，切忌，客户不是用户，你也不是。虽然客户的管理层通常会对该项目感兴趣，并试图影响你的决策，但你要记住，他们不会每天使用该程序工作好几个小时（除非该程序是专门为他们设计的）。

2.1 如何识别用户？
　　我们可以通过许多方法识别用户，比如用户访谈，商业利益相关者访谈和影子用户观察( the “shadowing” method of observation)等。“用户访谈”让你了解用户在程序和计算机方面的知识储备，而通过“用户观察”能得到更详尽的信息，比如用户是如何完成任务的，他们都犯了哪些错误。“影子用户观察”之所以这么称呼它，是因为观察者需要像用户的影子一样，与其形影不离，注意他们的每一步操作。

　　如果你没有遇到真正的用户，可能是因为你没有权限，或是在设计开放的应用程序，你可以使用“人物角色”来帮自己识别用户。“人物角色”是真实用户的代表，他具有他们的习惯，目标和动机等等。你可以利用在商业分析报告中获得的用户信息，来创建“人物角色”。如果你对这种方法不太熟悉，Brand Colbow的漫画将对你有帮助。

“任务分析”有助于确定用户在工作中需要完成哪些任务，他们是如何完成的，需要多长时间，犯了哪些错误。有时用户正在使用你要去更新的旧程序。你正好可以利用这套旧程序，来看看用户是如何操作的。这样你会很容易了解到他们的任务和遇到的挑战。

　　可以肯定的是：无论你的用户是谁，在通常情况下你都必须同时考虑新手用户和专家用户。使“新手”尽快上手，“专家”高效地完成任务，也许意味着要为他们各自单独设计界面。但在很多情况下，你要使用各种技巧，来保证不同类型的用户正常使用同一界面，比如隐藏高级功能。

　　这些研究通常由市场分析来完成。但当没人来负责这项业务时，你应该去完成它。一旦得到了必要的信息，就可以动手设计了。

三.设计流程
　　设计用户界面时，你可以从许多流程中选择一种来执行，或者可能你已经有了一种流程。不过我建议你选择一种更便捷的方法。可能你会问为什么。这是因为对用户（和客户）来说，最终的用户界面才是他们看到的。本质上来说，他们并不关心你的草图、高超的后台技术以及功能强大的服务器，他们只希望看到用户界面。

　　那么这种方法是如何执行的呢？主要还是通过它的核心法则：迭代。每次迭代都包括你在流程中定义的所有阶段。这意味着在第一轮结束时，你将有一个可以测试的产品：原型。

3.1 草图
　　草图可以有效的拓展思路。我们通过画出不同的概念图来寻求解决方案。大多数草图会被丢弃，但这无所谓。正如Bill Buxton在他的著作《手绘用户体验草图》中所说：“草图不但速度快还便于处理，这就是它们如此强大的原因”。

草图是否与线框图一样呢？似乎差别可以被忽视，但我却不这样认为。线框图并不是用于获得粗略的想法，而是去延伸它们。可以读读IxDA上的精彩讨论：线框图前的草图。

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

Jason Robb画的草图。

有关草图和线框图的趣味阅读：
•   35个优秀线框图素材
•   画用户体验草图的工具
•   20步帮你提高线框图质量

3.2 原型
　　流程的下一步就是创建原型，用以模拟真实程序。原型可以含有一个或多个界面（或所有界面），它们只是模拟了一个真实程序的行为，让用户感觉程序确实是在运行。可其实呢，它们什么都没有做。如果需要的话，原型也可以完成一些功能（比如复杂运算）。

　　网页原型是临时的，其目的归根结底还是去验证想法。由于你不用花时间写代码，也就降低了犯错的成本。反正最后你也会扔掉它嘛。你还可以用专门的原型制作工具，比如Axure，有些人甚至会用PowerPoint来制作原型。

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

有关原型的其他阅读资料和工具：
• 5个有关网站规划和原型制作的在线工具
• 原型制作指南：Rosenfeld Media著
• 16个原型和线框图制作工具

3.3 测试
　　如果你没有测试原型，它们便无法发挥作用。其实测试也算不上什么困难工作。Jakob Nielsen和Steve Krug就支持一种被称作“简易可用性测试”（“discount usability testing”）的方法，它成本低廉、便捷，并能为你的设计决策提出宝贵建议。你也可以将测试结果用作另一次迭代的基础。在重大问题得到解决之前，你至少要这么测试。我们知道，软件项目的时间和预算都很紧张，因此为了更有效率，测试得越早越频繁，也就越好。

　　Steve Krug的新书《将困难工作变得更简单》（“Rocket Surgery Made Easy”）是有关“简易可用性测试”方面最好的素材之一，找一本读读吧。

照片内容是有关美味的可用性测试，Dave（新西兰）提供。

其他阅读资料：
• 为什么你只需要测试5名用户
• 解密可用性测试 
• 可用性测试的神话