为商业Web应用设计用户界面

用户体验 everyinch 1915℃ 0评论

原文地址:

http://www.smashingmagazine.com/2010/02/25/designing-user-interfaces-for-business-web-applications/

商业 Web应用的设计经常会被疏忽。我见到过大量既不符合企业目标也不能满足用户需求的应用,因此导致利润的亏损和糟糕的用户体验。甚至是,设计师完全没有参与到应用开发过程当中,而是由开发人员承担全部的职责。

对于开发人员,这是一个艰巨的任务。开发人员也许拥有前端或后端的丰富开发经验,但是他们的设计知识有限。最终只能是客户不满意、用户沮丧和项目失败。

因此,我将介绍商业 Web 应用界面设计的基础。虽然在 UI设计时,可以使用许多不同方法、技术和原则,但我们这里主要专注于商业Web应用。

Web 站点 vs. Web 应用

很容易将 Web 应用(Web Applications)和 web 网站(Websites)相混淆,就像将用户界面设计和网页设计相混淆一样。但是它们从本质上及其它许多方面都不同,我们将在本文中进行探讨。

Web 网站由许多页面组成,这些页面往往包含许多静态文本、图像和视频,只有有限的交互性功能(例如,联系表单和搜索功能)。网站的主要作用是传播信息。一些网站使用 CMS(内容管理系统)生成动态内容,但是其性质仍然是提供信息。

而Web 应用是动态、交互式的系统,帮助企业执行重要的商业任务,达到衡量和提升企业生产力的目的。因此,Web 应用的主要作用是根据定义的业务规则,去执行那些服务于用户任务的功能。

对用户而言,Web应用需要较高层次的参与和应用知识。用户不会只是偶然性的发现这个应用和无意识的随便使用。他们会将这个应用作为一个日常性使用的工具,去完成非常重要的商业任务。最后,即使用户不喜欢它,也不能轻易的停止使用它和用其它应用替代它。

business_ux_1

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

Web 应用的类型

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

我们可以将商业 Web应用区分为开放的和封闭的应用。开放的系统是在线应用,任何人都可以注册账户,然后轻松的访问。用户可以通过 web 网络访问这个应用,可以免费或付费注册账号。封闭的系统是离线应用,不能在公司外部访问和使用(虽然很多系统通过一些服务或是专用接口,向商业伙伴展示了一些功能)。这些应用往往是在公司内部网络中运行,只有公司员工才可以使用。

我不知道是谁创造了weblication 这个词,但我喜欢这个词,它大致说出了web 应用是什么。但这并不是说一个 web 应用是一半网站和一半应用的混合体,web 应用比这可要复杂的多。

首先,理解你的用户

也许你已经不断的听到说要理解你的用户,并且理由也很充分:一个成功的用户界面要以用户和用户任务为中心。然而,这就是为什么大多数开发人员无法创建良好用户体验的关键所在。正如 Steve Krug 说的:“开发人员喜欢复杂性,他们喜欢去探索系统是如何运行的。”

business_ux_2

当你去识别和确认谁是用户时,记住客户不是用户,你自己也不是用户。虽然客户的管理层经常会对项目感兴趣和试图影响决策,但他们不会一天中在电脑面前坐上几个小时去使用它(除非这个应用就是针对他们的)。

如何识别用户?

你可以使用许多技术去识别用户,例如用户访谈、商业利益相关者访谈和“影子”观察法。通过访谈,你可以知道用户对于系统和计算机的基本理解和认知。而通过“影子”观察,你可以知道用户如何执行任务和犯了哪些错误的更加详细的信息。之所以叫“影子”观察法,是因为观察者就像一直跟随用户的影子一样,去观看和记录用户的每一个任务步骤。

如果你没有遇到真正的用户(可能是因为你没有权限,或是在设计开放的应用),你可以使用“人物角色”来帮自己识别用户。“人物角色”是真实用户的代表,包含了用户的习惯、目标和动机等等。由于有关用户的某些信息往往是通过商业分析中确定的,所以你可以利用它来创建人物角色。如果你对人物角色方法不太熟悉,Brand Colbow的漫画将对你有帮助(如下图)。

business_ux_3人物角色

任务分析有助于确定用户在工作中需要完成哪些任务、如何完成、需要多长时间、犯了哪些错误。有时用户正在使用你将要重新设计的旧版本应用。你正好可以利用这套旧系统,来看看用户是如何操作的。这样你会很容易了解到用户的任务和遇到的挑战。

无论谁是你的用户,有一点可以肯定的是:在大多数情况下,您必须同时考虑新手和专家。要让新手用户尽可能快的学习和上手,而专家用户要尽可能快速高效的完成任务。这就可能要分别为他们创建单独的用户界面。但在很多情况下,你可以使用各种技巧(比如隐藏高级功能,逐渐显露——progressive disclosure),来保证不同类型的用户正常使用同一界面。

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

设计流程

有许多种界面设计流程你可以采用,或者你已经使用了某一中。然而,我建议你考虑敏捷(Agile)方法。为什么呢?因为对于用户(或客户)来说,用户界面就是产品。他们不会关心你的概念构思、先进的后台技术或强大的服务器。他们希望看到的只是用户界面。

那么,敏捷方法有何帮助?主要是它的重要的原则:迭代方法。每一次迭代都包括了你所定义流程的所有步骤。这就意味着,第一次迭代结束后,你将得到一个可以进行测试的产品:即一个原型。

business_ux_4

草图(Sketching)

草图是探索思路的一种强大方法。目的是通过起草各种不同的概念,找到最佳方案。大多数草图会被丢弃,但这无所谓。正如 Bill Buxton在他的《Sketching User Experience》一书中说的:草图快速低廉且容易处理,这正是它为何如此强大。

草图(sketches)和线框图(wireframes)一样吗?也许区别是模糊的,但是我觉得不同。线框图不是捕捉粗略的想法,而是对粗略想法的延伸实现。可以读读 IxDA 上的精彩讨论:线框图前的草图。

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

business_ux_5
Jason Robb 的草图

有关草图和线框图的趣味阅读:

35杰出的线框图资源

起草构思用户体验的工具

原型(Prototyping)

接着就是去创建能够模拟真实应用的原型。原型可以包含一个或多个功能(或所有功能),但它只是模拟真实应用的行为,而不是对功能的真正实现,让用户感觉到好像真的在运行。但原型也可以包含一些真正的功能,例如复杂的计算。

由于 HTML 原型是临时性的(它的目的是验证想法),所以不用花时间在代码上。让 bug最少,但只要能够运行就行,毕竟你最终会扔掉它。你也可以使用一些专门的原型设计工具,如 Axure,有些人甚至 PowerPoint 做原型。

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

原型设计的相关阅读和工具:

5 个 Web 设计规划和原型设计的实用工具

一个实践者的原型设计指南

16 个用于原型和线框图的设计工具

测试(Testing)

原型如果不用于进行测试,原型也就失去了其真正的意义。测试并没有那么难,正如Jakob Nielsen 和 Steve Krug 提倡的“简易可用性测试”方法,它成本低廉、快速,并为你的设计决策提供宝贵建议。你也可以将测试结果作为另一次迭代(草图-原型-测试)的基础。至少在主要问题解决之前,你都该进行测试。我们知道软件项目的时间和预算都很紧张,所以为了更加高效,要尽早测试和经常测试。

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

business_ux_7
上图是对 Delicious进行可用性测试

更多阅读:

为什么你只需要测试5个用户

可用性测试不神秘

可用性测试神话

设计原则

现在流行许多设计原则,但还没有形成最终的普遍共识。所以我们这里去看一些非正式的设计原则,但并不进行严格定义。

1、一致性

一个优秀用户界面的关键要素是“一致性”和“熟悉感”。用户界面在整个应用的所有部分的应该一致,从导航、颜色到术语,这叫做内部一致性。用户界面还应该和该应用所处的环境一致,例如和操作系统或其它配套应用达到一致,一个典型的例子就是微软 Office套装应用,这叫做外部一致性。

保证一致性的一种有效的方法,就是为每个项目或为一组项目定义用户界面指南(user interface guidelines)。每个详细的设计决定都应该遵循它。用户界面指南不仅能保持界面一致性,还能够作为文档帮助团队成员更好的理解你的决策。

business_ux_8
虽然是一个简单例子,SprinklePenny 在整个应用中达到了一致性和熟悉感

一致的用户界面使得学习曲线缩短,因为用户已经认识了系统的某些部分和复用以前的使用经验。但是“熟悉感”有时会和“一致性”相混淆。具有“熟悉感”的用户界面能够吸取用户的心智模型和利用合理的隐喻方法。例如,文件夹就是对文件组织方式的著名的隐喻,而不再是使用以往命令行操作系统的“目录”。总之,就是要使用用户的语言。

很多企业用户有一个共同的观点是:一个良好的用户界面应该看起来像微软的 Office产品,尤其是 Outlook。我不想去解释这是否有意义。但是我想说的是:要遵循“以用户为中心”的方法

这里,我只提出不同于他们的建议:要沿用“以用户为中心”的方法,并解释为什么为员工、客户和合作伙伴(合作伙伴的用户)设计应用程序才是重要的。

尽管如此,大多数企业都不相同,他们的工作流程也不同。例如,来自同一行业的两个公司可能有完全不同的流程,将迫使你超越和创新。设计流程中的这部分可能非常有趣,当然你也要在创新的程度上多加把握。

更多阅读:

为设计和选择组件

为什么一致性如此重要

2、高效

毫无疑问,当用户使用商业应用时应该能够达到高效,这正是客户花钱的原因,也正是管理者对应用的期望。用户界面应该能够让用户高效工作,并以最轻松和快速的方式完成任务。但事实上并非如此。开发人员们有一种观点(至少实际行动上确实如此):用户界面应该和系统后台一样复杂。无论这听起来多么荒谬,但问题已经出现,可能还会令你很头疼。这就是为什么必须与开发人员进行良好的沟通和协作。

当用户专注于某个特定任务时是高效的。前面提到,任务分析可以帮助你识别任务和确定用户如何完成该任务。如果一个任务需要较长时间,就需要将其分解成许多较小的任务,这样能加速用户完成任务。你还可以通过提供键盘输入和快捷键来提高效率。试想一下,当用户必须在鼠标和键盘之间来回切换是多么耽误时间。在某些情况下,你需要为习惯于命令行界面的用户设计,他们将强烈渴望支持键盘输入。给你一个建议:定义快捷键时,应与常用程序的快捷键相同。例如,Ctrl + s永远应该是“保存”等等。

business_ux_9
Google  Docs 中的表格就为用户提供了键盘快捷键和快捷菜单,并借鉴了用户熟悉的桌面程序,使用户高效率完成工作。

通过个性化定制也可以提高用户使用效率。用户自己定制界面时,不但会更快上手,更重要的是,在使用时会更有信心。个性化可以体现在许多方面:选择仪表板(dashboard)中的模块、定义快捷键选项、设置偏好、改变元素顺序等等。

也应该注意可访问性(accessibility),虽然许多人觉得 Web 应用中的可访问性并不重要,但实际上你该像对待公众网站一个对待它。

Web 应用程序在处理信息时也必须是高效的。因此,局部呈现和 AJAX 请求产生的耗资源的交互行为需要慎重使用。

3、反馈

对于系统处于何种状态,界面上应提供有效的反馈。如果发生错误,应当通知用户并设法恢复。如果程序正在运行中,需要通知用户进展如何。 我们可以更进一步说:用户界面应该防止用户犯错。这一法则被称作容错,确认对话框、撤消选项、智能输入(forgiving formats)等就遵循了它。“容错”让用户更安全地探索界面、降低了学习成本并提高了整体满意度。

由于商业 Web 应用程序很复杂,你还需要提供一个全面的帮助系统。这可以通过联机帮助、支持数据库、知识库或是向导(包含视频,图像和文字)来达到。

更多阅读:

UI 设计中的容错

Web 表单验证:最佳实践和练习

小心处理用户错误:让用户回到正确轨道上

4、让用户满意

满意度是一个比较主观的词,它是指用户使用界面时的愉悦程度。我们之前介绍的每一条设计准则,都会影响满意度。还有一些准则需要在这提一下:

简洁是界面设计的一条基本准则。越是简洁的用户界面,就越容易使用。但对商务应用程序来说,让用户界面简洁却是一个挑战,因为这些应用往往有许多功能。问题的关键就是要平衡功能和简洁。最有效的解决方法就是“约束”。换句话说,就是找到最简单的解决方案。

business_ux_10
BuildWith.me 有一个简单而高效的用户界面,它并没有为此牺牲美观。

美观,虽然是有些主观甚至随意的评价,但也是影响满意度的重要因素。用户喜爱漂亮的用户界面,甚至可以为此牺牲功能。但你也要注意自己并不是在创造艺术品。有关美观的最好的文章之一是美丽无罪(In Defense of Eye Candy)。

最终,由于用户会花很长时间去使用一个商务应用程序,无论界面多么好用、一致性和容错性,评价界面成功与否的决定因素还是:用户满意度。

更多阅读:

7 个界面技术简化和整洁你的界面

克制(Restraint)

美丽无罪

Web 应用的必要元素

Web 应用虽然各异,但它们大多包含有相同的元素。每个应用对这些元素的使用方式并不相同,让我们先看看最常见的三个元素。

1、Web 表单(Web Forms)

一般来说,表单对 Web 应用程序非常重要。不过,正如 Luke Wroblewski 在他的 Web表单设计的著作中说的:“没有人愿意填表单。”这里说的表单,就包括许多商业 Web 应用程序的注册表单。

尽量减少用户填写表单时的挫折感。提供内部验证与良好反馈,并尽可能使用默认值。不要忘记新手用户,通过向导或隐藏高级(或不常用的)功能, 来帮助他们更快地完成任务。

2、主从窗格(Master-Detail Views)

这是一种在两个独立且相关的窗格显示数据的技术。一个窗格显示项目列表,另一个显示所选项的详细信息。主从窗格可以在单一页面或通过多个页切换进行实现。

3、仪表板(Dashboards)

很多 Web应用程序都有仪表板。一个仪表板是将需要操作和决策的最重要信息展示在一个视图上。它一般仅在单一页面出现,而且是一个应用程序的初始页。仪表板非常重要,因为它让用户无需深入界面,就可以看到信息并执行任务。

business_ux_11
Xero 在仪表板中显示了用户的最重要的财务信息(如银行帐户和信用卡信息),以便于用户迅速看到自己的财务数据状况。

4、大量使用的表格(Heavy Use of Tables)

由于 Web应用常常需要处理大量容易取得和归类的数据,表格也就不可避免了。这其实并不是坏事。事实上,表格就是干这个用的。不要将其与无表格页面布局相混淆。高效表格能够易于阅读。因此在多数情况下,你需要一个有意义的标题、合理的表格列数、分页、行颜色交替显示、适当的列对齐,并提供排序和过滤功能等等。

表格是可以人为调整的,这就是说你可以为它们添加更多信息,甚至去修改它们的数据项。

business_ux_12
PulseApp 是“表格如何有效显示和处理复杂数据”的优秀案例。

5、报表(Reports)

大多数企业都离不开一些类型的报表。由于打印报表是常用功能,你就要重视报表的设计。打印(或输出)的报表通常是在线报表的简化版本,所以需要优化以适应单色打印。

business_ux_13
FreshBooks 具有打印、PDF 输出和“以电子邮件发送”功能。它还能提供打印预览。

不要忘记 UI设计模式

我们经常听到或讨论UI 设计模式,但有时还是会忽视它们!UI设计模式对设计用户界面是很有帮助的。要在设计流程的初期阶段就考虑模式,最好在草图阶段就开始。因为模式往往用于解决常见问题,正确的模式能够帮助用户熟悉界面、提高学习效率。

business_ux_14
这张截图来自文章:12个标准屏幕版式,这篇文章能帮你重温最常见的屏幕版式。

更多阅读:

设计 Web 界面:复杂交互的原则和模式

关于界面设计模式的 40 多个有用资源

实例学习:网上银行应用

举一个实际的例子,以简单说明用户界面的设计流程。这是一个较小银行的网上银行系统,我所在的团队被雇佣以改善这个系统。要重新设计这个系统的主要原因是(根据管理层所说):“用户在抱怨,许多人已经不再使用它”。

通过几个小时和真实用户的接触,发现了主要问题:有关账户和信用卡的信息被隐藏在了糟糕的导航里;用户要知道自己花了多少钱、账户和信用卡的状态非常困难。这个系统显然只是考虑到了银行的职员,只有这些职员熟悉应用中的术语及理解其中数字的含义。

时间紧迫,我们遵循了前面描述的流程,并取得一定的成功。尽管时间很少,但一些主要问题非常明显,所以我们可以很清晰知道我们的主要任务和如何去做。我们创建了一个仪表板(dashboard ),为用户提供清晰的账户和信用卡状态的信息。通过新的导航,能更加方便的找到信息。报表更容易理解,并实现了一些新功能。

虽然我们只做了很少的修改,但这些修改影响了最主要的用户任务,最终使得整体用户体验大大提升。

最后的思考

为商业Web应用设计用户界面是很有挑战性的工作,充满了妥协。你需要在客户和用户需求、商业要求和用户需求、初级和高级用户、功能和简单之间做到平衡。需要对用户和用户任务的充分理解,以及对 UI 设计原则和 UI模式的充分使用。尽管充满挑战,但这份工作很有乐趣,你可以在每个项目上都能学到新的东西,也将影响着你对网站的设计方法。



转载请注明:陈童的博客 » 为商业Web应用设计用户界面

喜欢 (2)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无觅相关文章插件,快速提升流量