您的位置:知识库 » Web前端

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

作者: shiru1126  发布时间: 2010-09-03 22:20  阅读: 2444 次  推荐: 1   原文链接   [收藏]  
摘要:商务Web应用程序的界面设计是一项艰巨的工作,它充斥着各项妥协。你必须在客户和用户需求之间,商务需求和用户之间,新手和专家用户之间,功能和简洁之间妥协。它需要你充分理解用户和他们的任务,以及界面设计准则和版式。尽管困难,但这项工作却很有趣,你可以从每个项目中学到很多新的东西,并将它用到网站设计中去。
[1] 商务web应用程序的界面设计
[2] 商务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名用户
• 解密可用性测试 
• 可用性测试的神话

[第1页][第2页]
1
0

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻