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

为商业Web应用设计用户界面编译：陈良泳(chenliangyongQQ:120957033) 金和软件 用户体验设计师我们正在招聘用户研究、交互设计、视觉设计、前端开发人员。长期有效。2010-3-13原文地址：http:/www.smashi ngmagazi nin g-user-i ntefaces-for-busi ness-web-ap plicatio ns/商业Web应用的设计经常会被疏忽。我见到过大量既不符合企业目标也不能满足用户需 求的应用，因此导致利润的亏损和糟糕的用户体验。甚至是，设计师完全没有参与到应用开发过程当中，而是由开发人员承担全部的职责。对于开发人员，这是一个艰巨的任务。开发人员也许拥有前端或后端的丰富开发经验， 但是他们的设计知识有限。最终只能是客户不满意、用户沮丧和项目失败。因此，我将介绍商业 Web应用界面设计的基础。虽然在UI设计时，可以使用许多不同方法、技术和原则，但我们这里主要专注于商业Web应用。Web站点VSWeb应用很容易将 Web应用(Web Applications )和web网站(Websites )相混淆，就像将用 户界面设计和网页设计相混淆一样。但是它们从本质上及其它许多方面都不同，我们将在本文中进行探讨。Web网站由许多页面组成，这些页面往往包含许多静态文本、图像和视频，只有有限的 交互性功能(例如，联系表单和搜索功能)。网站的主要作用是传播信息。一些网站使用CMS (内容管理系统)生成动态内容，但是其性质仍然是提供信息。而Web应用是动态、交互式的系统，帮助企业执行重要的商业任务，达到衡量和提升企业生产力的目的。因此， Web应用的主要作用是根据定义的业务规则，去执行那些服务于用 户任务的功能。对用户而言，Web应用需要较高层次的参与和应用知识。用户不会只是偶然性的发现这 个应用和无意识的随便使用。他们会将这个应用作为一个日常性使用的工具，去完成非常重要的商业任务。最后，即使用户不喜欢它，也不能轻易的停止使用它和用其它应用替代它。Email markel just for do&igiwrpLaJR. jidi 咯 才峠 up*f -畔审 m nnM 国HCK貪*CCUICOMflCTTlieljtUenilmpI M9jigttii OMdiiMrii个强大的电子邮件营销应用软件，而CampaignMonitor 是Jeff Sarime nto的网站旨在向读者展示他的生活和工作。Web应用的类型商业Web应用的业务范围广泛， 从货品计价、内容管理系统、文档管理系统，到金融和 财务系统等等。我们可以将商业 Web应用区分为开放的和封闭的应用。开放的系统是在线应用，任何人都可以注册账户，然后轻松的访问。用户可以通过 web网络访问这个应用，可以免费或付费注册账号。封闭的系统是离线应用，不能在公司外部访问和使用（虽然很多系统通过一些服 务或是专用接口，向商业伙伴展示了一些功能）。这些应用往往是在公司内部网络中运行，只有公司员工才可以使用。我不知道是谁创造了 weblication 这个词，但我喜欢这个词，它大致说出了 web应用是 什么。但这并不是说一个 web应用是一半网站和一半应用的混合体，web应用比这可要复杂的多。首先，理解你的用户也许你已经不断的听到说要理解你的用户，并且理由也很充分： 一个成功的用户界面要以用户和用户任务为中心。然而，这就是为什么大多数开发人员无法创建良好用户体验的关键所在。正如 Steve Krug 说的：“开发人员喜欢复杂性，他们喜欢去探索系统是如何运行 的。”当你去识别和确认谁是用户时，记住客户不是用户，你自己也不是用户。虽然客户的管理层经常会对项目感兴趣和试图影响决策，但他们不会一天中在电脑面前坐上几个小时去使用它（除非这个应用就是针对他们的）。如何识别用户？你可以使用许多技术去识别用户，例如用户访谈、商业利益相关者访谈和“影子”观察法。通过访谈，你可以知道用户对于系统和计算机的基本理解和认知。而通过“影子”观察，你可以知道用户如何执行任务和犯了哪些错误的更加详细的信息。之所以叫“影子”观察法，是因为观察者就像一直跟随用户的影子一样，去观看和记录用户的每一个任务步骤。如果你没有遇到真正的用户（可能是因为你没有权限，或是在设计开放的应用），你可以使用“人物角色”来帮自己识别用户。“人物角色”是真实用户的代表，包含了用户的习惯、目标和动机等等。由于有关用户的某些信息往往是通过商业分析中确定的，所以你可以利用它来创建人物角色。 如果你对人物角色方法不太熟悉，Brand Colbow的漫画将对你有帮助（如下图）。人物角色人物背景：Mike是一个家小型制造公司的现场支持工 程师，他经常会被委派外出，一天之中只 有一两次在办公室。目标和动机Mike想要在到达客户那里进行维修之前， 就知道发生了什么问题。目的是为了第一 时间就能准确的修正问题。回访或超过计 划日程，会占用他个人时间和公司最低要 求时间。任务分析有助于确定用户在工作中需要完成哪些任务、如何完成、需要多长时间、犯了哪些错误。有时用户正在使用你将要重新设计的旧版本应用。你正好可以利用这套旧系统， 来看看用户是如何操作的。这样你会很容易了解到用户的任务和遇到的挑战。无论谁是你的用户， 有一点可以肯定的是： 在大多数情况下，您必须同时考虑 新手和专 家。要让新手用户尽可能快的学习和上手，而专家用户要尽可能快速高效的完成任务。这就可能要分别为他们创建单独的用户界面。但在很多情况下，你可以使用各种技巧（比如隐藏高级功能，逐渐显露 progressive disclosure），来保证不同类型的用户正常使用同一界面。这些研究通常由市场分析来完成。但当没人来负责这项业务时，你应该去完成它。一旦 得到了必要的信息，就可以开始设计了。设计流程有许多种界面设计流程你可以采用，或者你已经使用了某一中。 然而，我建议你考虑敏捷（Agile ）方法。为什么呢？因为对于用户（或客户）来说，用户界面就是产品。他们不 会关心你的概念构思、先进的后台技术或强大的服务器。他们希望看到的只是用户界面。那么，敏捷方法有何帮助？主要是它的重要的原则： 迭代方法。每一次迭代都包括了你 所定义流程的所有步骤。这就意味着，第一次迭代结束后，你将得到一个可以进行测试的产 品：即一个原型。TFvr测试草图(Sketching )草图是探索思路的一种强大方法。目的是通过起草各种不同的概念，找到最佳方案。大多数草图会被丢弃，但这无所谓。正如Bill Buxton在他的Sketching User Experienee一书中说的：草图快速低廉且容易处理，这正是它为何如此强大。草图(sketches )和线框图(wireframes )一样吗？也许区别是模糊的，但是我觉得不同。线框图不是捕捉粗略的想法，而是对粗略想法的延伸实现。可以读读IxDA上的精彩讨论：线框图前的草图。一旦你得到“正确”的草图，或者至少你认为正确的一个，你便可以创建更加详细的线 框图或直接去创建可交互的原型。PJK,卩 j U_41f 1HPtKsoi 墜Horcs- Wji t Cfbf时十.怙.j*.WMMLJason Robb的草图有关草图和线框图的趣味阅读: 35杰出的线框图资源起草构思用户体验的工具 20步改讲线框图原型（Prototyping ）接着就是去创建能够模拟真实应用的原型。原型可以包含一个或多个功能（或所有功能）但它只是模拟真实应用的行为，而不是对功能的真正实现，让用户感觉到好像真的在运行。 但原型也可以包含一些真正的功能，例如复杂的计算。由于HTML原型是临时性的（它的目的是验证想法），所以不用花时间在代码上。让bug最少，但只要能够运行就行，毕竟你最终会扔掉它。你也可以使用一些专门的原型设计工具， 如Axure，有些人甚至PowerPoint做原型。LOGOf 典如net pw . cmnwc* 舸 MritttKrv rfiJOjOv mWiK Meeii 母 e i j !*jije!.LUJKklULULKL KCUI11 r * *1LM fl勺 CC ! 丁 EB呵 TW&EFfr d尹自fg ELtfDMtB Win* rH+*-Pp4W1齐他f tflcvm $v- Lr Z :+ 曲比E* M EUI iu *爭Fmm* C*HpwilAfi Mom du produlfia存| Hpn j .ptEdkri! m 叶 pFrlVIJpEWV&nfw BlftAMMriiin .1*4 wi, : fiifiMB-l. 2 首匕亦 iwrOil IlMCiHl tngvw BtrinQpdiWi ilnl itll-.UvVwr c produH1 lurlt iltt b narqui山I*U耐11 LI ptM?1时rm WinhWlfttlMHI* VMW 4l*ft dkKlblrtrlliMq duattfldl 計 iK F 4dfT-7tE眸.卒n 址%fl xrrC,谄 dpp七 m| 丄 L AM J%.虹 ILjjM 7UErtiiiVM W4i 也卢區应4*l 戢g 的撕 d 韻FLwh ii mit ml. FiMf 4 M. nM1 詛 mucnoai lirrw 哎Xjiv S i-l Mmmignj iqua U qm 鼻 pwwi Mrun_ gpf 蚌（nriK|BBA iArimrQ *ti*4mi mil rtjfp |i cmwit 4Mt|uJ Dwi *J * 鼻Mu tfi pp murpM H iKfri. M Mill iriam 4b*u mi Nilta pMlK-j EiCitfP.i ivN artJwCHhl曲护! iLrti r 1知.并p 9-LlM| 蝴UiXMlFlJh*1! du 口 feM J imaawnji 宀*科9A pQi|WG i.M KIjFi i JwTWMm 鼻 MMm dAi#utB *it .称01 2wIf Seirch U - i i-t14tlWI创切Fma ind+dGoogle Docs中的表格就为用户提供了键盘快捷键和快捷菜单，并借鉴了用户熟悉的桌面程 序，使用户高效率完成工作。通过个性化定制 也可以提高用户使用效率。用户自己定制界面时， 不但会更快上手， 更重要的是，在使用时会更有信心。个性化可以体现在许多方面：选择仪表板(dashboard)中的模块、定义快捷键选项、设置偏好、改变元素顺序等等。也应该注意可访问性 (accessibility)，虽然许多人觉得 Web应用中的可访问性并不重要，但实际上你该像对待公众网站一个对待它。Web应用程序在处理信息时也必须是高效的。因此，局部呈现和AJAX请求产生的耗资源的交互行为需要慎重使用。反馈对于系统处于何种状态，界面上应提供有效的反馈。如果发生错误，应当通知用户并设法恢复。如果程序正在运行中，需要通知用户进展如何。我们可以更进一步说：用户界面应该防止用户犯错。 这一法则被称作 容错，确认对话框、 撤消选项、智能输入(forgivi ng formats)等就遵循了它。容错”让用户更安全地探索界面、降低了学习成本并提高了整体满意度。由于商业Web应用程序很复杂，你还需要提供一个全面的帮助系统。这可以通过联机帮 助、支持数据库、知识库或是向导(包含视频，图像和文字)来达到。更多阅读： UI设计中的容错 Web表单验证：最佳实践和练习小心处理用户错误：让用户回到正确轨道上让用户满意满意度是一个比较主观的词， 它是指用户使用界面时的愉悦程度。我们之前介绍的每条设计准则，都会影响满意度。还有一些准则需要在这提一下：简洁是界面设计的一条基本准则。越是简洁的用户界面，就越容易使用。但对商务应用 程序来说，让用户界面简洁却是一个挑战，因为这些应用往往有许多功能。问题的关键就是要平衡功能和简洁。最有效的解决方法就是“约束”。换句话说，就是找到最简单的解决方案。BuildWith.me有一个简单而高效的用户界面，它并没有为此牺牲美观。PEDPtEQUILDITWITH.ME美观，虽然是有些主观甚至随意的评价， 但也是影响满意度的重要因素。 用户喜爱漂亮 的用户界面，甚至可以为此牺牲功能。 但你也要注意自己并不是在创造艺术品。有关美观的最好的文章之一是 美丽无罪(In Defense of Eye Candy )。无论界面多么好用、一致性和最终，由于用户会花很长时间去使用一个商务应用程序, 容错性，评价界面成功与否的决定因素还是：用户满意度。更多阅读:7个界面技术简化和整洁你的界面 克制(Restraint)* 美丽无罪其它和UI设计相关的资源： 优秀用户界面设计的 12个实用技术*成功用户界面的8个特征用户界面设计原则(维基百科) UI设计大师的10大原则 帮你掌握用户界面设计的 20个网站Web应用的必要元素Web应用虽然各异，但它们大多包含有相同的元素。每个应用对这些元素的使用方式并 不相同，让我们先看看最常见的三个元素。Web 表单(Web Forms)一般来说，表单对 Web应用程序非常重要。不过，正如Luke Wroblewski 在他的 Web表单设计的著作中说的：“没有人愿意填表单。”这里说的表单，就包括许多商业 Web应用程 序的注册表单。尽量减少用户填写表单时的挫折感。提供内部验证与良好反馈，并尽可能使用默认值。 不要忘记新手用户，通过向导或隐藏高级(或不常用的)功能，来帮助他们更快地完成任务。主从窗格(Master-Detail Views )这是一种在两个独立且相关的窗格显示数据的技术。一个窗格显示项目列表， 另一个显示所选项的详细信息。主从窗格可以在单一页面或通过多个页切换进行实现。仪表板(Dashboards )很多Web应用程序都有仪表板。一个仪表板是将需要操作和决策的最重要信息展示在一 个视图上。它一般仅在单一页面出现，而且是一个应用程序的初始页。仪表板非常重要，因 为它让用户无需深入界面，就可以看到信息并执行任务。jriCEHIMG STARTEDBANIt JkCCCXJHTS a CSIOII CAHD5ACCOUNT MMCHLISTMUNIV GOING QVTEMPEMKE CLAIMS，以便于用户Xero在仪表板中显示了用户的最重要的财务信息(如银行帐户和信用卡信息) 迅速看到自己的财务数据状况。大量使用的表格(Heavy Use of Tables )由于Web应用常常需要处理大量容易取得和归类的数据，表格也就不可避免了。 这其实并不是坏事。事实上，表格就是干这个用的。不要将其与无表格页面布局相混淆。高效表格能够易于阅读。因此在多数情况下，你需要一个有意义的标题、 合理的表格列数、分页、 行颜色交替显示、适当的列对齐，并提供排序和过滤功能等等。表格是可以人为调整的， 这就是说你可以为它们添加更多信息，甚至去修改它们的数据 项。“VF 5叩party叭 Boitfi4-Mp* CuN riw 陀 3：”誠 St! 5Wr匚Flow洌 * K .w:i-Ll 0H04H.KO* (-aw i.oqcxm 目itawtT ：n.TO4W kWOO 11-5W5WJ 皿闻 】口OCJW JI WD9岁巴昙iztW&a皐曲B3窕廻聞!_谒1第UM射9& Ufnew 8IfHiH3 VMM3.W44i.weor wmwattTHkrinonmMMmOGLWCkMi孟GE 00l.J&OO ijmoot如（LM(nK 0iMdOoT.WQ-(DJJOQCnL04IJfc加 J coWit JkMMtfkMMUNoaW0MfiWi40QiKNhnuncoK Tl lliffTEl tCWMUMQATIQNZ抻4JRIO9iJt 如闰i輔j | 風血 Rifcna ,4IjFiwdRet ft*e. urrlbiji lt*iE*K0 lhFreshBooks具有打印、PDF输出和“以电子邮件发送”功能。它还能提供打印预览。不要忘记UI设计模式我们经常听到或讨论 UI设计模式，但有时还是会忽视它们！UI设计模式对设计用户界面是很有帮助的。要在设计流程的初期阶段就考虑模式，最好在草图阶段就开始。因为模式往往用于解决常见问题，正确的模式能够帮助用户熟悉界面、提高学习效率。Sfank Slate这张截图来自文章：12个标准屏幕版式 ，这篇文章能帮你重温最常见的屏幕版式。WiX5*c?r/ DeUIColumn BrowMFiUtrPaJelta/ CanvasFjrrriWzafriQ:A;Spreads-WiF-Fa.-日I方Irtepjctiw Wucelu日:s Elon &l Ahswh-更多阅读:* 设计Web界面：复杂交互的原则和模式 一本出色的书，涵盖了 70多个 Web设计模式 关于界面设计模式的 40多个有用资源实例学习：网上银行应用举一个实际的例子， 以简单说明用户界面的设计流程。 这是一个较小银行的网上银行系 统，我所在的团队被雇佣以改善这个系统。 要重新设计这个系统的主要原因是 （根据管理层 所说）：“用户在抱怨，许多人已经不再使用它” 。通过几个小时和真实用户的接触， 发现了主要问题： 有关账户和信用卡的信息被隐藏在 了糟糕的导航里； 用户要知道自己花了多少钱、 账户和信用卡的状态非常困难。 这个系统显 然只是考虑到了银行的职员，只有这些职员熟悉应用中的术语及理解其中数字的含义。时间紧迫，我们遵循了前面描述的流程， 并取得一定的成功。尽管时间很少，但一些主 要问题非常明显， 所以我们可以很清晰知道我们的主要任务和如何去做。 我们创建了一个仪 表板（ dashboard ），为用户提供清晰的账户和信用卡状态的信息。通过新的导航，能更加 方便的找到信息。报表更容易理解，并实现了一些新功能。虽然我们只做了很少的修改， 但这些修改影响了最主要的用户任务， 最终使得整体用户 体验大大提升。最后的思考为商业 Web应用设计用户界面是很有挑战性的工作， 充满了妥协。你需要在客户和用户 需求、商业要求和用户需求、初级和高级用户、功能和简单之间做到平衡。需要对用户和用户任务的充分理解， 以及对 UI 设计原则和 UI 模式的充分使用。 尽管充满挑战， 但这份工作 很有乐趣，你可以在每个项目上都能学到新的东西，也将影响着你对网站的设计方法。结束）