1、介绍
设计专业化的用户界面,不仅仅是一个好的图形艺术家加上一些好的创意就能实现的。不幸的是,创建用户界面的人仅仅是为了获得产品,并没有意识到界面背后基础的或理论上的原则。排的满满的进度表,误解(某些象“可用性是我们目前所能提供的附加物”诸类的看法)以及专业化精神的匮乏,是导致我们周围糟糕产品泛滥的原因。本文乍看起来有点抽象,但它的主要意图是普及一些概念,这些概念通常仅限于学术界和很少的专业领域。这里,我们不会深入探讨很多关于UI设计方法的细节,因为从个人的经验来看,我发现人们经常被创建令人印象深刻的用户界面这一类“将要做的事情”而吸引,而不是一些简单的概念。实际上,这些概念在整个UI设计的过程中都会使他们受到启发。
本文主要面向开发者或图形设计者,他们想要(或者被要求)创建高质量的用户界面(UI)。设计用户界面看起来似乎是整个应用程序开发过程中的一件小事。但实际上,它可能是整个系统中最重要的部分,这不仅仅是指我们致力的软件领域。这里展现的很多需要考虑的事情,都可以应用到任何的人与人的交互之中。这是一个经常被忽略的重要观点。正面的、平滑的人-机交互恰恰是一个良好设计的重要部分,因为任何人创造的产品都将要被另外的人使用。这是一个非常复杂的问题,区别于典型的工程挑战。实际上,人们(有着他们自己的性格、感情等)将参与整个过程(从设计者、开发者到终端用户、间接用户等等)。
本文将涉及到高质量用户界面背后的多个理论。第一部分将提出一些适用于任何界面的一般概念,而不仅仅是图形界面。在第二部分,我们将讨论一些图形用户界面的细节。我们会给出现实世界的例子。尽管这些例子看起来似乎微不足道,但这将会帮助我们把注意力集中在关于优秀UI设计的现实世界用例的讨论上。
2、人-机交互
我们将从最基本的地方开始:人-机如何交互?
对交互式系统建模的最简单的方法之一,就是描述用户在使用系统时的行动步骤。我们将一个典型的用户交互过程分为7步:形成目标和意图,规划和执行动作,感知和解释系统状态,语法化评估交互结果。见图1。
第一步,用户从其目标中形成概念上的意图(例如,用户想从Web站点上的仓库中访问一个详细计划)。第二步,他试图将意图转换为系统本身提供的命令(例如,浏览Web页将会或者怎样实现意图),并根据这些命令(用户感知的)执行动作(例如,用户在搜索文本框中输入一些信息,然后点击它旁边的“Search”按钮)。然后,用户企图理解他自己的行为结果(例如,在按下“Search”按钮之后检查获得的Web页面)。这对于计算机系统来讲是非常重要的。因为计算机的内部状态是隐藏的,用户应该仅仅通过一些暗示就能获知内部状态。整个过程在行动-评估循环中不断进行。用户通过解释自己行为的结果,精简自己脑海中的系统模型。
当然,我们的讨论非常简化和迅速。很明显,人-机交互背后的事情很难这样简单直白。不管怎样,我们这里的目标是提供从另一个视角来看待这个重要问题的概述,感兴趣的读者可以从详细的文献中获得更深的了解。本文的最后给出了一些参考资料。
3、用户不是设计者,设计者也不是用户
作为人类,当我们和我们周围的世界交互时,我们需要借助于现在和过去的经验。同样的,我们也需要语义模型。譬如,我们需要借助于过去曾经发生的一切。这就是为什么我们经常会听到人们在讨论他们计算机方面的经历。他们非常熟悉文件、数据库、鼠标形状等概念。但这并不意味着一个终端用户能够理解一个设计者的意图。一个在设计小组看来非常简单的事情,对终端用户来说可能是非常困难的。如果一个应用的内部模型含糊不清,即使是开发人员也可能无能为力,这种事情经常发生。这样以来,因为终端用户需要通过一些人工提示来使用软件,那么这些提示就应该尽可能的连贯。基本的思路,可视化的条目以及条目之间的交互,条目的名字和其他的每件事情,都必须在设计时就要考虑。
当设计一个UI时,设计者应该将焦点放在终端用户的身上。然而,经常发生的事情是,设计者忙于引用其他获奖产品的界面。这导致了开发者恶梦般的实现,而且对终端用户而言,那是一个非常神秘的东西。但是,当UI被开发者设计时(通常频繁出现于资金匮乏的小公司里),情况看起来甚至更惨:开发者重新转为设计者的模式,会导致开发者将他陈旧的编程习惯放在一个毫无用处的界面上。这是因为开发者很难知道怎样去获得一个良好的UI。但是,大公司和其他组织正在撒布他们的设计原则。这些原则是他们的专业设计队伍来编写的,它们在通用软件的设计中也同样适用。
4、更多的概念
这部分,我们将简要介绍人-机交互领域中一些其他的有趣的概念。
l 用户和系统之间的不匹配。这通常指的是所谓的隔阂隐喻。
ü 执行隔阂是指用户意图和被允许的行为之间的不匹配(例如,一个我们非常熟悉的像图3一样的Web站点。一个新手想访问他先前的图书列表,但在那个页面上却无法访问)。
ü 评估隔阂是指用户的期望和系统响应之间的差别(例如,用户将 “gold box”图标和期望的列表图标搞混了)。
l 响应时间是一个重要的参数,一个慢的响应会导致错误,引起用户使用系统时的挫败感。这对于一个基于Web的应用来说更明显。这时,性能是一个严重的瓶颈。更进一步说,响应时间可以在不同的方面影响用户。期望和过去的经验在其中扮演了重要的角色。如果有人习惯于在给定的时间内完成一个任务,完成时间过短或者过长都会导致用户不耐烦。此外,也应该将个人习惯考虑在内。短的响应时间使得浏览UI更加容易,无论在哪里,这种行为是被鼓励的(借助于重做行动,减少出错的代价等)。
l 短期记忆(STM,Short-term Memory)是一种有限记忆。它对于可变数据的处理就象缓冲区一样。它一般用于处理认知输入。以前的研究表明,通常人类有一个可以容纳5~9个条目的STM能力。这样的条目可能是单个的对象,也可能是衔接在一起的大块信息。非原子的可存储在STM中的信息片大小,依赖于对信息的熟悉程度,但不会持续超过15~30秒钟。你可以试一下,你可以很容易地记住7种不同的随机颜色,但很难记住一个自由组合的西班牙单词(假设你对那种语言并不熟悉)。STM非常不稳定,分心、外部噪音或者其它任务都能很快地打乱它的内容。设想,你在图3所示的或者提供类似服务的Web站点中,发现了一个以前从来没有听说过但很有趣的新书。然后你被迫离开这个站点并关闭了会话。即使你在5分钟之内回来,你可能也很难记得确切的书名。STM通常用来在声音界面中保持状态:当你借助于声音或者按键来选择菜单和操作以应答一个声音界面,,你需要记住操作的上下文(你处于菜单和操作链中的位置)。
另一种记忆是所谓的长期记忆(LTM,Long-term Memory)。它比较稳定,并有大得多的容量,但访问速度比STM要慢。LTM的主要问题是恢复状态的难度比较高。我们使用辅助记忆手段来访问LTM,就象用一个中心处理器记起一个个人代码或者密码等。
STM处理那些效率要求较高的操作。那些仅仅需要STM处理的操作,与那些需要LTM或者外部认知的操作相比,要容易一些并且速度较快。由于在整个过程中需要维护数据上下文,复杂操作会变得更糟,这时要用STM。
对一个良好的设计界面而言,STM是有价值的助手。STM需要集中精力,并且人应该在适当的环境中最大化他们的能力。他们应能自由地感知应用,有信心地预言系统如何工作,不用担心灾难性的操作,不会感到系统施与的压迫感等等。当然,我们不可能干预最终使用系统的物理环境,但我们可以在设计时考虑它。
一个设计者在设计用户界面时,应该使得用户尽可能的用STM工作;在这种方式中,他们的记忆负载很轻,而且交互更快,很少出现错误。一个Unix命令行界面需要持续的访问LTM或者其它的外部“认知助手”。对于一个Unix新手来讲,很难记住一些命令和语法,甚至执行某些任务时的命令顺序。图形用户界面的出现改变了这种情况。现在,设计者们有了一个强大的工具来设计表达丰富、容易使用的用户界面。减轻用户记忆负担的另一个方法,是采用标准设计。通过这种方法,用户可以使用从另外的标准界面中获得的知识。
l 控制和自动化是用户界面设计的另一个重要事情。提供一些自动化特征是很有用的,但这会从用户手中拿走控制权。如果人们对他们所作的事情失去完全控制的时候,他们将会变得失落和不安。因此,为终端用户提供控制的感觉是很重要的。与此相对照,通过严格的定义,一个UI应该提供一个服务和数据的高层次且易用的界面,而隐藏没有什么意义的细节,象CPU内部寄存器或者硬盘表面的底层物理状态。一个成功的用户界面的关键因素是自动化和用户控制能力的平衡,应该能够显示有意义的细节,隐藏剩余的细节,并且能够根据特殊用户进行自适应。即使相同的用户,如果他对应用软件非常熟悉,他就有可能想跳过一些自动化的特征而完全控制它。在一个UI中,评估展现给用户控制的级别是非常有用的。这将帮助实现自动化的分层,能够清楚地为设计提供参考。例如,可以定义宏,可以为大部分的普通操作提供向导等。总之,一个计算机程序一般来讲是一个天生有限制的人造物品。既然它不能考虑到所有可能的情况,不妨考虑考虑组合。
因此,在自动化基础上平衡个人控制,是一个典型的UI设计的权衡。另一方面,提供全自动化的UI界面是非常冒险的,特别是当任务比较关键的时候(像管理一个化学工厂),因为很多独立变量会导致无法预见的行为。另一方面,允许用户过多的参与控制也是很危险的,他们可能修改一些敏感的数据或者用一种不被期望的方式来使用这些数据。
5、一些一般原则
当设计一个UI的时候,在脑海中应该遵守一些规则。如下所示:
ü 了解你的用户。这可能是用户界面设计原则中最重要的原则。然而,有时很难对你的用户群做出假设。图2的用户界面主要服务于计算机工程师和程序员,而图3主要面向于更广范围的观众(看看颜色和术语就知道了)。
ü 最小化用户的负担。这意味着减少记忆和认知负担(就象前面讨论的),提供更有价值的反馈、记忆辅助手段和其它的认知支持。一个会话能够很容易地被中断几分钟而不丢失过程中的工作也是重要的。这一点在设计一个Web站点的时候也应该注意。尤其是页面有终结日期,并且信息也没有在URL中编码,这使得以后返回是不可能的。
ü 保持一致性。在一个UI中,应该保持一些一致性:标签、术语、图形惯例、组件、排版等。很多的指导、原则甚至软件设计体系方法都能提高一致性。例如,仔细看看图1的界面,你将会发现一些语言上的不一致性(一个不完整的站点定位,里面混杂了意大利语和英语)。
ü 确保高度的灵活性、错误修复能力和客户化。在和人打交道的时候,灵活性是要点。呵呵,是人就会犯错L。应该能提供一种允许用户去浏览UI并能够倒退的方式,从而将用户因陷入不可恢复的失误造成的焦虑中解脱出来。更进一步说,用户应该可以客户化界面。对某些人(举个例子说,那些残疾人),这可能是使用应用程序的仅有的合适途径。对不同种类的用户提供不同的使用机制时,应该坚持灵活性。新手们可能使用向导或者其它的简化方法来完成一个容易的交互,而高级用户则利用快捷方式。一般来说,提供两种有区别的交互途径是常见的方法,一是为有经验的用户,一是为没有经验的用户提供一个简化的函数集。
ü 遵循标准。在交互、缩写、术语等方面有很多的标准和规范,对于交叉应用的一致性和高效实现,标准是很重要的。他们确保了当减少设计付出时的专业化质量。
ü 清楚表现系统内部状态。上面我们已经讨论了这项重要的原则。举个例子,当对关键的数据直接操作时提供警告信息,这对有经验的用户也是一样的。下面亚马逊Web站点的做法:当目前没有用户登录进来的时候,提示“Hello,Sign in to get personalized recommendations。”
6、结论
在本文中,我们简要地讨论了与用户界面设计背后理论相关的的一些事情和基本概念。我们看到,UI设计可以被组织在一些基本的标准周围,例如消除UI中的可能的分心,提供给用户反馈信息,避免错误或使用户能容易处理错误,或者恢复他们(提供一个探索式的交互模式)等等。
我们看到,在用户界面设计中,底层概念模型扮演着一个重要的角色。一般来讲,人们会借助于概念,意味深长的实体进行表示。这样的表示通过他们目前和过去的经验来提供。因此,对同一个应用,会有不同的思维模式,如设计它的人(UI设计者),实现它的人(开发者)和使用它的人(终端用户)。对于如何根据不同的思维来表示用户界面的创建和随之的应用,设计者应该很清楚。
这些和其它的我们提及的原则是用户满意度,低的错误频率和有效任务表现的基础。它们被UI设计的规范和标准所支持。
7、参考资料
本部分列出了在HCI、可用性和用户界面设计方面的一些资源。这方面的书籍和资料太多了,我只选择了其中的一部分进行简述,这纯粹是我个人的观点。
Mullet, Kevin; and Sano Darrel. 1995. Designing Visual Interfaces. Communication Oriented Techniques. Englewood Cliffs, New Jersey: Prentice Hall.
Agile book on visual design, focused on the visual and functional design aspects.
Nielsen, Jakob. 1993. Usability Engineering. San Diego: California Academic Press.
A (dated) wide collection of usability papers. Still a reference book as regards usability.
Norman, Donald A. 1993. Things That Makes Us Smart. Defending Human Attributes in the Age of the Machine. Cambridge, Massachusetts: Perseus Books.
Not as illuminating as "The Design of Everyday Things", but definitely worth reading.
Norman, Donald A. 1990. The Design of Everyday Things. New York: Doubleday.
A classic, interesting even for non-specialists.
Shneiderman, Ben. 1998. Designing the User Interface, Third Ed. Reading, Massachusetts: Addison Wesley.
If you need one (introductory or not) book on user interface design, go for this one.
Preece, Jenny. 1994. Human Computer Interaction. Reading, Massachusetts: Addison Wesley.
Compendium on the field, from an academic viewpoint (a bit dated anyway).
Tufte, Edward R. 1990. Envisioning Information. Cheshire, Connecticut: Graphic Press.
As interesting as the others in the classic three-book series from Prof. Tufte on the visual representation of information.
Tufte, Edward R. 1997. Visual Explanations. Cheshire, Connecticut: Graphic Press.
Maybe the less compelling of the three, but worth studying (rather than merely "reading").
Tufte, Edward R. 2001. The Visual Display of Quantitative Information. Second Ed. Cheshire, Connecticut: Graphic Press.
The first and the best of the three books by Tufte. An unmatched "visual" classic.
Various Authors. 2001. Java Look And Feel Design Guidelines, Second Ed. Reading, Massachusetts: Addison Wesley.
Look and feel guidelines for the Java platform. A well-crafted example of such kind of documents.
General advice on usability and GUI design on the Web:
http://www.usabilityfirst.com
General advice on usability and GUI design
http://www.gui-designers.co.uk
Practical examples on GUI design
http://www.tworivers.com
General and practical discussion on GUI design
http://www.asktog.com
Tognazzini's Web site
http://www.acm.org/sigchi/
CHI Conference proceedings abstracts and other academic research material
http://www.useit.com
Nielsen's Web site with some useful articles
http://www.iarchitect.com
Home of the "interface hall of shame" and other useful material
http://www.acm.org/~perlman/readings.html
Suggested readings on HCI and UI development
http://msdn.microsoft.com/ui
Microsoft MSDN User Interface Resources
http://developer.apple.com/techpubs/macosx/Essentials/
AquaHIGuidelines/AHGIntro/Introductio__Guidelines.html
Mac OS-X Design Guidelines
Please note that this long URL had to break to fit on the page. You will have to paste it, in sections, into your Web browser.
http://www-3.ibm.com/easy/
IBM's ease of use Web site
http://www.ibm.com//ibm/hci/
IBM's Human Computer Interaction Web site
http://world.std.com/~uiweb/
Practical advice on GUI design
http://www.pegasus3d.com/apple_screens.html
The evolution of the Macintosh Interface
8、关于作者
Mauro Marinilli 目前完成了他的第二本书,是关于专业Java图形用户界面的。他在意大利Rome 3大学教授CS课程。同时也是基于用例推理、人-机交互和e-learning应用方面的顾问和学术研究者。你可以通过Email和他联系:contact@marinilli.com