GUI设计禁忌2.0——3.2 将用户引入歧途,又不为他们显示路径

    Pirolli ad Card [1999]指出,人们根据信息“气味”来寻找目标。这种气味来自用户界面中对用户操作或其目的地的暗示。如果某用户正在使用照片编辑软件,并且想要增加一幅较黑的图片的亮度,那么任何命令或链接中的单词“lighte”或“brightess”就有可能是用户的目标。用户将向着散发出强烈的目标“气味”的方向前进。     因此,软件不仅应该显示用户所在的位置,而且还应该提供线索,即“气味”,以便指导用户向其目标前进。这些线索至少不应该使用户偏离他们的目标。以下小节阐述了一些未能为用户指明目标(甚至将他们引入歧途)的错误。     图字:     由Buy Hoest和Joh Reier创作     “我们的祖先是狩猎者-采集者(huter-gatherer),但我们已经进入浏览者-购买者(browser-purchaser)时代”      2007; 承蒙Buy Hoest和Parade Magazie授权重印.    3.2.1  禁忌16 使用户偏离正确道路的按钮和链接     软件应用程序或Web站点的目的是为特定用户目标提供支持。软件的用户界面应当引导用户向着这些目标前进。遗憾的是,很多应用程序和Web站点出现了一些分散用户目标的内容,导致用户偏离了他们的目标。     电气和电子工程师学会(IEEE.org)的Web站点有一个“Reew Membership”(成员续约)页面。页面顶部中央位置是一个“Begi Membership Reewal”(开始成员续约)链接(参见图3-19)。想要续约的IEEE成员访问这个页面,因此这个链接看起来很清楚。然而,该页面上的其他链接看起来也是适用的。如果用户仔细的阅读网页,他们将知道应该单击“Begi Membership Reewal”来续约,但只有很少的用户会仔细阅读。大多数人会快速浏览网页,并单击可能看起来相关的任意链接。     插入原书P123图     图3-19 IEEE.org:“Reew Membership”页面有许多分散用户目标的链接     用户在快速浏览时,很有可能会点击另一个链接。用户只有仔细阅读才能找到正确的链接要。“Begi Membership Reewal”链接的下面紧跟着“Usig a secure coectio”(使用安全连接)链接,用户可能错误地理解为它是续约的另一个起点,也就是使用安全的连接进行续约,这似乎上面的续约链接是不安全的。然而,“secure coectio”链接只是跳转到页面下面的“secure vs. o-secure”(安全与不安全)的解释。总之,此页面至少会导致很多用户犹豫,不确定哪个步骤才是正确的第一步,而且可能会将一些用户引入歧途,使他们点击另一个链接,然后不得不再返回原处。     引入歧途,而且无法返回     当客户在美国西南航空公司的Web站点上搜索航班时,网站会列出符合客户标准的航班(参见图3-20)。该列表包含一些链接,指向西南航空公司的各种费用目录的说明。就它本身来说,这是没有问题的;大多数客户将理解这些链接只是说明,而不是用于预订航班的链接。     插入原书P124图     图3-20 SWA.com:费用说明页面,但未提供返回的途径     问题在于当客户单击这些说明性的链接时会发生什么情况。航班的列表将消失,取而代之的是“Southwest Airlies Fare Iformatio”(西南航空公司费用信息)页面,它提供了很多信息,包括西南航空公司的退款政策。那么客户如何返回到航班列表呢该页面并未提供返回链接。客户必须单击“后退”按钮才能返回航班列表。一些客户在看到费用信息页面顶部的导航栏时,会单击“Reservatios”(预订)链接,他们认为此链接会返回到预订航班的页面。实际上它返回预订过程的开始页面。这可能会耽误销售,当用户非常不耐烦时甚至可能丢失客户。     位置不当的促销信息将客户引入歧途     计算机用户往往不会仔细阅读屏幕信息;他们快速浏览以寻找符合目标的任何东西。在西方社会中,人们通常从左上角到右下角进行浏览。用户在表格中输入数据后,总是快速到右下角寻找用于提交表单的按钮或链接。在REI.com网站上,许多填写完新的客户注册表的用户就会这样做,然后等待他们所期望的结果:一个标记为“Cotiue”(继续)的链接(参见图3-21)。用户单击它后,会发现得到一个不相关的表格(可能是不需要的),它是用于订阅产品促销电子邮件的。用户会很惊讶,点击了错误的链接。     插入原书P125图     图3-21 REI.com:注册表――用户可能不会注意到“Submit Iformatio”(提交信息)按钮,而单击了“Cotiue”(继续)按钮,而这会打开一个不同的表单     更糟糕的是,当人们意识到他们访问了错误泊网页时,他们将单击“后退”,但这时他们会发现注册表变成空白的了。用户必须再次输入。这是用户无法忍受的。     避免禁忌16     不要分散用户对他们的任务的注意力。应用程序或Web站点的设计目的是帮助人们完成他们的主要任务。     当人们开始任务过程后,不要分散用户的注意力。创建一个“process fuel”(过程通道),用于指导用户向着他们的目标前进,并保持在实现目标的正确道路上[Va Duye等., 2002]。将用户引入歧途的(有吸引力的)按钮和链接降低了用户完成任务的可能性,当用户很难返回到任务路径中时尤为如此。     确保那些不在“任务路径”上的按钮或链接不会使用户误认为它们位于“任务路径”上。用于解释细节、条款和条件的链接应出现在单独的窗口中,以便不会导致用户“迷路”。例如,Uited.com(美国联合航空公司)的航班搜索结果(像SWA.com一样)包括一些用于说明联合航空公司费用目录的链接。然而,在联合航空的网站上,这些说明出现在单独的小窗口中,并且提供一个“Close”(关闭)按钮来帮助客户返回预订航班的页面(参见图3-22)。     插入原书P126图     图3-22 Uited.com:费用说明出现在单独的窗口中,以便保护任务上下文     然而,即使是弹出说明的链接也可能影响用户的速度,令他们生厌并浪费时间,因此应尽量少使用它们。    3.2.2  禁忌17:自身链接     一个非常常见的导航错误是Web页面中包含一个指向它自己的活动链接。单击这样的链接只会重新加载页面。这不仅浪费人们的时间,而且也会令用户感到迷惑:用户可能没意识到重新显示的页面就是他们正在访问的页面。原因如下:      用户在向下滚动页面时单击自身链接,页面重新显示顶部。用户可能是通过指向这个页面的某个“锚点”(achor poit)的链接访问的,因此可能未看到过页面的顶部。      页面每次显示时都有变化的图像。     页面包含动画、applet或其他动态内容,这些内容需要一定时间才能打开,因此用户无法立即看到页面显示了什么。     潜在的自身链接(Self-lik)也可能导致用户丢失已输入到网页表格中的数据。根据活动的自身链接在页面上的位置不同,这种错误有几种变体。     变体A:导航栏中的自身链接     这种变体发生在站点导航栏中的所有链接在所有页面上都是活动链接的时候。FaieMae.com有一个导航栏(在左边),其中的链接在它们自己的页面上是活动的(参见图3-23)。所显示的页面是主页,页面导航栏上的“Home”链接是活动的。     插入原书P127图     图3-23 FaieMae.com:左导航栏中的链接甚至在它们自己的页面上也是活动链接     这种变体很常见,原因是导航栏的HTML代码通常被复制到网站的每个页面上,因此每个页面上的导航栏链接都是活动的。更改每个页面的代码(使得页面自己的导航栏项变成不活动的)需要大量工作。     这种错误的危害有多大呢这取决于这种自身链接对于用户来说是否明显。如果当前页面很好辨认并且与链接标签匹配,用户可能知道该链接是自身链接。如果当前页面不好辨认或链接与页面标题不匹配,用户就可能不会意识到该链接是自身链接,而去点击它。     FaieMae的主页没有提示它是主页。访问者可能认为主页是另外一个页面,而单击“Home”访问它,他们会发现他们原来访问的就是主页。     变体B:哪一个是主页     在具有多个子站点(例如,针对不同国家或地区业务的子站点)和很多页面的大型站点上,站点访问者可能很容易在站点中迷失方向。子站点当然提供了到其主站点以及其他子站点的链接。然而,当子站点包含其自己的活动链接时,可能给访问者造成混乱。PriceWaterhouseCoopers站点的美国主页(PWC.com)提供了一个示例:“Uited States”链接(左上角)重新显示了这个相同的页(参见图3-24)。     插入原书P128图     图3-24 PWC.com:Uited States主页的左上角有一个活动的自身链接“Uited States”     变体C:“面包屑式”的导航中的自身链接     Web软件中的导航帮助通常是“面包屑结构”或“面包屑路径”。它通过列出从主页到当前页的大部分直接路径上的页面来显示当前页的位置。这个名称来自于在穿越一块陆地时沿途撒面包屑的想法,目的是指明回去的路。面包屑结构的一个示例是:     Home > About Us > People     这指明了当前显示的是“People”页面,是从“About Us”到达的,“About Us”又是从主页到达的。     面包屑结构一个常见的错误是将当前页面显示为一个活动链接,例如     Home > About Us > People     KFC.com和ColumbiaSC.et都犯了这种错误(参见图3-25):这两个面包屑结构路径中的所有项都是活动链接,包括最后一个。ColumbiaSC.et面包屑结构更有可能使用户感到混乱,因为页面标题与最后一个“面包屑”项不匹配。     插入原书P129图     图3-25 面包屑结构中的最后一项是一个活动链接. (A) KFC.com. (B) ColumbiaSC.et.     变体D:其他地方的自身链接     不在正式的导航链接中的自身链接比导航栏中的自身链接更麻烦。站点用户通常无法确定这样的链接是否可以返回到当前页。点击了这些链接的用户开始时可能不会意识到重新显示了相同的页面。     在Su Microsystem的在线产品文档中,对Su在线产品文档的任何引用都是一个链接--甚至是对用户正在阅读的那个文档的引用(参见图3-26)。用户可能不会意识到这些是自身链接,可能点击它们去寻找它们本身,在重新加载后,返回到他们正在阅读的文档的开始处。     插入原书P129图     图3-26 Su.com:在在线文档中,对所有文档的引用都是链接,甚至是对其本身的引用也是一个链接     避免禁忌17     ielse ad Tahir [2001]给出了以下设计规则:     不要在主页中包含对主页的活动链接     这条规则可以推广到任何网页:     不要在当前页面中包含当前页面的活动链接。     导航栏中的自身链接:是否很难避免     导航栏中的自身链接是很常见的,因为在每个页面中使用完全相同的导航栏代码比为每个页面更改代码要容易得多。Web开发人员有时认为很难实现当前页面项不是活动链接的导航栏。但这并不难。它只需要为每个页面编辑代码,以及在导航栏上删除当前页面项的链接代码。Google.com和WA.com就在其导航栏中避免了自身链接(参见图3-27)。     插入原书P131图     图3-27 导航栏避免了当前页的链接. (A) Google.com. (B) WA.com.     如果导航栏代码是自动生成的,则只需确保生成它的软件禁用当前页面在导航栏项上的链接即可。     避免指向“这里”的面包屑     面包屑结构中的自身链接很容易避免:当前页面的项不应该是一个链接。这项“最佳实践”设计可以在Uited.com中发现(参见图3-28)。     图3-28 Uited.com:面包屑路径结构中的最后一项(当前页)不是一个链接    3.2.3  禁忌18:对话框层次过多     开发人员常常将精力过于集中在窗口或Web页面的设计上,反而不能退一步审视一下宏观的布局。到底有多少个窗口或网页用户在这个软件中是否能够很容易找到自己想找的东西许多软件产品和Web站点都包含了太多的窗口或网页,或者窗口/页面层次结构很容易令用户迷失方向。“我在哪里我怎么会来到这里我怎么能回到原来的地方那个行宽设置到底在哪里刚才电话响的时候我在干什么”     建立一个包括软件的所有窗口或网页的整体层次结构表示可以为开发人员显示一个“宏观视图”。最好的表示方法是使用图的形式(参见图3-29)。     插入原书P132图     图3-29 支票簿管理应用程序的窗口层次结构图     但有一些应用程序和Web站点包含太多的窗口或网页,以至于无法用一个结构图来表示,因为这样大的图可能要画满整面墙,或者图中会乱七八糟地堆满方框和连线,因此起不到任何作用。在这种情况下,可以使用一个大纲(outlie)来代替(参见图3-30)。     插入原书P133图     图3-30 支票簿管理应用程序的窗口层次结构大纲     一个实际的错误例子     在Apple的Fial Cut Pro(用于优化流媒体图像)中,从录像中导出一幅图像需要通过5个层次的对话框的导航:     1. Save As命令显示“Save”对话框(参见图3-31a)。输入文件名,将格式设置为“Still Image”(静止图像),由于此对话框上没有用于优化流媒体图像的设置,因此单击“Optios…”     2. 显示“Export Image Sequece Settigs”(导出图像序列设置)对话框(参见图3-31b)(窗口标题并未提到“选项”,参见禁忌15)。这里仍然没有用于优化流媒体图像的设置,因此单击“Optios…”     3. 显示“QuickTime Image Optios”(QuickTime图像选项)对话框(参见图3-31c)。由于此对话框仍然没有用于优化流媒体图像的直接设置,因此再次单击“Optios…”     4. 显示“Compressio Settigs”(压缩设置)对话框(图3-31d)(再次注意按钮标签与窗口标题之间的不匹配)。仍需再次单击“Optios…”     5. 显示“Photo JPEG Optios”(照片JPEG选项)对话框(参见图3-31e)。最后,终于出现了用于优化流媒体图像的设置。单击它,然后单击此对话框中的“OK”,再依次单击第四个、第三个、第二个、第一个对话框上的“OK”。     插入原书P134图     图3-31 Apple FialCut Pro:从视频中导出图像,优化流媒体的图像,需要(A)、(B)、(C)、(D)和(E)     现在还能想起刚才都做了些什么吗     对话框层次过深有两个坏处:(1)它们分散了用户对原来的目标的注意力;(2)用户分辨不出哪个“OK”和“Cacel”按钮是当前按钮。人们不能很好地处理较深的信息结构;当他们遇到的信息层次结构超过一定数目时,可能会分辨不清他们的位置、刚才做了什么以及如何返回。     其他示例     下面的示例摘自两个软件评审,其中也出现了这类错误:      层次结构的大纲显示StockUp软件的窗口层次在某些区域深度过深。例如,在多个监控窗口(第5层)以及在分析窗口(第6层)之下的层次结构。要简化StockUp,需要消除这些层次结构中过深的区域。      结构图显示设计人员不需要担心程序的网页和对话框的层次过深。因为在这一层次结构中唯一看上去比较深的区域位于网络监控和维护功能中,而这些功能大部分用户都不会用到。     避免禁忌18     通用规则是:避免对话框的层数超过两层。一个对话框可以产生另一个对话框,但是如果超过两层,用户可能就会迷失方向。     然而,这条规则过于简单了,并且很容易被曲解。我们需要对它进行澄清并加以限定。     限定1:这一规则只适用于对话框     对话框是一种瞬态窗口,允许用户为某个功能指定参数、为数据对象设定属性,或者对某条消息进行确认。     大多数软件应用程序都显示一个主窗口、各种对话框和几个额外的基本窗口。基本窗口的功能就像是操作和导航的前哨据点;它们起到临时“主窗口”的作用。因此,在确定两层的深度限制的时候,可以不将基本窗口计算在内。     基本窗口只应来自其他基本窗口。对话框不应显示基本窗口,否则当用户关闭对话框时,基本窗口会发生什么事情是无法预料的 。在应用程序的窗口层次结构中,任何分支在其对话框之下都不能存在一个基本窗口。任何一条分支都应该包含一定数量的基本窗口,下层连接最多两层对话框。实际上,基本窗口的层数也应该保持在一个比较低的水平,以避免将用户引入歧途。但是到目前为止,还没有出现能够广泛应用的设计准则。     这一限定同样适用于Web站点和Web应用程序,但是会更复杂一些,因为在Web环境中不太容易清楚地确定什么样的窗口属于对话框。在Web 上显示一个“对话框”有三种不同的方式:      真对话框:Web浏览器可以在浏览器窗口之外显示独立的对话框。这些对话框与桌面软件非常相似。Web 浏览器提供了几种类型的对话框,每种都有特定目的,例如错误、警告、信息和文件选择器。      独立的浏览器窗口:Web应用程序有时在一个弹出(小的)浏览器窗口中显示信息或控件。一些弹出式浏览器窗口的功能类似于对话框:它们显示消息或设置,在窗口底部带有“OK”和“Cacel”(或类似的)按钮。      类似于对话框的页面:一些Web应用程序包含一些功能上类似于对话框的正常页面,但它们并不打开单独的窗口。它们显示消息或者设置,并且在窗口底部带有导航按钮。它们是一种过渡性的页面,用户简要浏览一下,可能会对一些设置进行编辑,然后单击“OK”或“Cacel”,并且返回到先前的页面。     不管是如何显示的,Web“对话框”也需要遵循两层深度的限制。另一方面,它们也要受限定2的约束。     限定2:某些类型的对话框不在考虑范围内     一些对话框提供的功能十分简单,是一些用户很熟悉的常用功能,这种对话框的出现很可能不会分散用户的注意力或是误导用户。因此,这种对话框应该不受两层深度的限制。     例如,许多应用程序都包含“要求用户指定一个文件名”这个功能。它们显示一个文件选择对话框,用户可以键入文件名或在文件层次结构中浏览以选择一个文件。文件选择器应用非常普遍,大多数用户都知道应该如何对其进行操作。用户并不将文件选择器视为应用程序中的一个“位置”,而只是作为一种简单的选择机制。Gertrude Stei解释说:在文件选择器中是“不存在那里”的。文件选择器并未给应用程序增加明显的复杂性。因此,即使一个文件选择器使用了三层对话框,也不违反两层深度的原则。这一点也适用于其他常用的“chooser” (选择器)对话框,例如,颜色选择器和日期选择器。     另一类在计算对话框层数的时候不应该包括在内的是错误消息,它只接受一种应答,即确认用户看到了这条消息。像选择器一样,将简单的错误对话框排除在外的原因是它们并没有给应用程序增加实际的导航“位置”,因而也就没有显着增加应用程序中导航的复杂性。     这些排除在两层深度限制之外的对话框并不生成自己的下级对话框。换言之,它们在层次结构中都是分支的终点。这一点非常重要。任何对话框,不论属于何种类型,如果它能够生成另一个对话框,就应该计入两层深度的限制之中。     将窗口层次结构图形化或列出大纲     除非开发人员知道软件的窗口结构,否则无法确定是遵守还是违反了两层深度的规则,而知道窗口结构的办法通常是将其表示为图形或大纲。许多开发人员并不这样做,结果导致很深的层次结构。我们应该将创建和维护窗口层次结构的表示作为设计过程的一部分。这样这些结构也可以在用户文档中使用。     在构造窗口层次结构的表示时,可以忽略选择器和错误对话框。在结构图或大纲中包括它们是一种累赘。     消除层次过深的方法     如果应用程序的窗口或页面层次结构过深,还有其他可以选择的方法吗答案取决于为什么要将各种设置分散到单独的窗口上。      一些GUI使用额外的窗口来提供渐进式显示,即将细节隐藏起来,只到用户要求查看它们。在这种情况下,一种替代方案是使用一个“Details”(细节)面板而不是一个单独的窗口。      有些对话框用于提供命令选项。例如,在微软的Word 软件中,“Chage Case”功能显示一个对话框,此对话框提供了几种方式来更改选中文本的大小写(参见图3-32a)。这个对话框事实上所处的层次并不深,假设它的层次过深,设计人员可以通过将各个选项放置在层叠菜单中来代替这个对话框(如图3-32b所示)。     插入原书P138图     图3-32 (A) Word的Chage Case对话框. (B) 将大小写选项放在层叠菜单中来代替对话框