人们利用环境线索来判断他们所处的位置。如果你看见一个炉子、一个酒杯、一些罐子和平底锅,那么你知道是在厨房里,而看到床、咖啡桌和立体音响,这暗示着你在起居室。 你是否试过在不熟悉的小镇或大楼里徘徊,却发现由于缺少标记或标记不清而迷路?当很难发现自己所处的位置时,就容易迷路。即使实际上没有迷路,但可能感觉上迷路了,这动摇了人们对是否正朝着目标前进的信心。 前三种导航错误是没有提供准确线索,这影响了用户对其自己位置以及所走的方向是否正确的判断能力。 3.1.1 禁忌13:未标识窗口或页面 一些应用程序或Web站点没有提供有关用户位置的任何信号。 桌面应用程序:窗口没有标题 应用程序窗口是通过标题栏上的标题识别的。窗体也可以识别应用程序。一些应用程序没有为它们的窗口设置标题。 文件传输应用程序Fetch在它的几个窗体上没有显示标题,例如,Delete File窗体(参见图3-1)。在窗体中只提供很少提示的情况下,这就要求Fetch用户记住他们所调用的功能。 插入原书P109图 图3-1 Fetch:Delete File对话框的标题栏中没有窗口标题 Mozilla Firefox(火狐浏览器)出现过比较隐晦的这类错误。“Preferences”(首选项)窗口有一个标题,但标题没有给窗口命名。相反,它显示了正在显示的是哪个首选项目录(参见图3-2)。这本来不是窗口标题栏的功能。 插入原书P109图 图3-2 Firefox:Preferences窗口标题栏标识了当前首选项目录,而不是窗口 Web:未标识页面 Web软件有两种标识当前页面的方法,一是通过标记导航栏中的当前项,二是通过在页面上的显着位置显示页面标题。很多软件没有采取这两种方法,则是迫使访问者猜测正在访问哪个网页。 Koehler-BrightStar的Web站点Flashlight.com提供了一个示例(参见图3-3)。位于每个顶部的导航栏没有高亮显示当前页面,并且网页没有标题。 插入原书P110图 图3-3 Flashlight.com:未指示当前页面。这是“About KBS”页面。 一些Web站点试图使用HTML <TITLE>标记在浏览器的标题栏显示页面标题,通过这种方法显示页面标题。这种方法收效甚微,人们很少注意浏览器的标题栏,特别是当他们已经在Web站点中时。站点应该为浏览器设置标题,但目的主要是为了在浏览器被最小化到屏幕底部的任务栏中时能够标识它。 避免禁忌13 桌面应用程序应该为所有窗口设置标题,包括对话框。可以使用这种格式: <Application name>: <window title> (e.g., PageDesigner: Import Image) Apple的Preview对话框就很好地标识了其Preference窗口,虽然它没有完全依照推荐的格式(参见图3-4)。 插入原书P111图 图3-4 Apple Preview:良好标识的应用程序窗口 Web软件可以采用两种方式指示当前页面。设计良好的站点在每个页面上都使用一种或这两种方法。 n 导航栏:在站点的导航栏中标识当前页面项。 n 页面标题:将页面标题放置在靠近页面内容顶端的明显位置。 IBM的Web站点在每个页面上显示两个页面标题(参见图3-5)。站点未在导航栏中标记当前页面要,但清晰地显示了页面标题。 插入原书P111图 图3-5 IBM.com:通过与导航栏分离的页面标题标识当前页面 AndePhotos.com在其导航栏中高亮显示了当前页面,但未显示单独的页面标题(参见图3-6)。这也起到了很好的作用。 插入原书P112图 图3-6 AndePhotos.com:在导航栏中高亮显示当前页面;没有单独的页面标题 如果标记导航栏和显示页面标题都有帮助,则应同时采用这二者。Saba.com就是这样做的(参见图3-7)。 插入原书P112图 图3-7 Saba.com:同时通过导航栏和标题指示当前页面 3.1.2 禁忌14:不同窗口使用同样的标题 有时不同的窗口或者Web页面使用了完全相同的标题。这可能会误导用户,使他们无法判断当前处于什么位置,这种错误有四种常见的原因。 变体A:窗口的标题只命名了应用程序 在第一种变体中,应用程序中所有的窗口都使用了相同的名称:都是应用程序的名称(参见图3-8)。或许程序员认为用户会自己分辨出每个窗口的不同功能,或记住哪个功能显示在哪个窗口中。遗憾的是,用户可能不会像他们设想的那样。 插入原书P113图 图3-8 窗口的标题只标识了应用程序,而没有指明窗口 Windows XP的绘图程序就犯了这样的错误。其帮助窗口被标记为“Paint”(参见图3-9)。 插入原书P113图 图3-9 Microsoft Windows XP绘图程序:帮助窗口只提供了应用程序的名称 变体B:程序员复制了代码,但忘记了更改标题 程序员常常通过复制原有类似窗口的代码再对其进行相应修改的方法来添加新的应用程序窗口。新的Web页面常常是从原有页面克隆得到的。在这种情况下,程序员常常忘记更改复制的细节,因此应用程序中就留下了很多具有相同名称的页面或窗口。这种情况实际上应该称为bug,而不是设计错误,不管怎样它们都是一种错误。 Canterbury.ac.nz网站的重复的页面标题可能就是由于这种原因,该网站的“Search”页面被标记为“Help and Accessibility”页面(参见图3-10)。 插入原书P114图 图3-10 Canterbury.ac.nz:“Help and Accessibility”页面标题也出现在“Search”页面上 变体C:程序员不知道这个标题在其他地方被使用了 开发团队常常把程序或Web站点的不同部分交给不同的程序员实现。这时如果程序员之间又没有充分交流的话,就可能会产生重复的窗口标题。 有时甚至程序员单独工作时也容易忘记某个标题已经被使用。窗口标题与程序变量或过程名称不同,编译器不会对其进行唯一性检查,所以它的唯一性就完全依赖于开发人员了。 变体D:程序员认为这个标题对两个窗口都适用 有时程序员为两个窗口赋予同样的标题是因为他们认为这个标题与这两个窗口的功能都相符,而且也找不出比这更好的标题了。在大多数情况下,这个标题对于其中的一个或者两个窗口来说都不够准确。举例来说,下面是为两个客户公司的应用程序评审的摘录: 公司1. 单击主窗口中的“Network...” (网络)按钮会显示一个名为“Control Network”(控制网络)的对话框;而单击“Select... ”(选择)按钮会显示一个不同的对话框,其名称也是“Control Network”。建议:这两个不同的窗口不应该使用同样的名字。应将一个窗口重命名。 公司2. 可以从“My Investments”窗口显示的“Execution Monitor”窗口与主窗口中显示的同名窗口是两个不同的窗口。建议:应该将这两个窗口合并,如果无法合并,应取不同的名字。 图3-11显示了一个假想的家谱应用程序的两个同名窗口。虽然标题“Show Family”对这两个窗口来说都是合理的标题,但具有相同标题的不同窗口将使用户感到混乱。 插入原书P115图 图3-11 禁忌:具有相同功能标题的不同窗口 发现标题重复的窗口后,它们总是被当作是优先级较低的、乏味的问题。因此,有时候软件产品中的标题重复的窗口一直存在,直至产品上市。 避免禁忌14 通过遵循以下原则,软件开发人员可以避免重复的窗口或页面标题。 每个窗口或Web页面都应该有一个唯一的标题 应用程序中不同功能对应的每个窗口或Web页面都应该有一个唯一的标题。图3-12中的两个假想的对话框的标题栏很清楚地将这两个窗口区分开来。 插入原书P116图 图3-12 避免禁忌:不同窗口使用不同的标题 消息文件会有所帮助 将软件显示的所有文本(包括窗口标题)都放在一个消息文件中,而不是把它们散放在程序代码中(参见禁忌22)。这种方法可以减少窗口标题重复发生的可能性。 然而,如果两个不同窗口的标题指向消息文件中的同一文本,那么这些重复就不太明显。这类重复可能需要程序员在代码评审或用户界面评审中来发现。 一些特殊情况 有两种值得一提的窗口标题重复的特殊情况: n 多个窗口的功能相同,而仅仅是处理的数据不同。例如使用文本编辑器窗口浏览不同的文件,或者是使用股市监控器显示不同股票的活动。这类重复可以通过在标题栏中包含数据名的方法来避免,例如“StockWatcher:Show Activity—Google (GOOG)”。 n 多个窗口的功能或数据相同,仅仅是用户选项不同。有些应用程序允许用户为“相同的”窗口创建多个实例,从而使得用户可以在每个实例中使用不同的选项。举例来说,一个工厂监控工具可能允许用户显示多个用于监视工厂产量的窗口,其中每个窗口以不同的频率从工厂的遥测仪器中采样。在这种情况下,传统的做法是在每个窗口的标题末尾加一个整数(用冒号与标题分隔),来区分每个窗口是哪一个实例。例如,“工厂监控”、“工厂监控:2”、“工厂监控:3”等。 3.1.3 禁忌15:窗口标题与命令或链接不符 当人们浏览应用程序或Web站点时,他们需要确保能够找到所需的内容或到达所需目的地。桌面软件和Web软件中的一个非常常见的错误是命令或链接与窗口或者窗口所显示的页面之间没有确定的对应关系。 桌面软件中的错误 Microsoft Windows XP中就有这类问题(参见图3-13)。单击System Proper中的“Change…”按钮,控制面板应显示一个名为“Computer Name Changes”的对话框,它不仅不符合所调用的命令,而且在语法上也含糊不清。 插入原书P117图 图3-13 Windows XP:“Change…”按钮显示Computer Name Change对话框 这种不匹配并不是无关紧要的问题。计算机用户会咬文嚼字地(经常很过分)理解标签和其他有助于导航的屏幕信息。如果两个短语哪怕只有很小的不同之处,他们都会认为这肯定意味着一些差异。当用户选择了“Change…”命令时,如果发现出现的窗口的标签为“Computer Name Changes ”,那么他们的第一反应将是打开的不是他们想要的窗口。这一点对于软件所显示的语言不是用户母语的那些人尤为如此。 Excel在某种程度上犯了一个更严重的错误。在Insert菜单中,“(Insert)Function...”命令显示了一个名为“Paste Function”的窗口(参见图3-14)。“Paste”意味着前面有一次“Cut”操作,而“Insert”则没有,因此这种不对应将引起误解。 插入原书P118图 图3-14 Microsoft Excel:Insert => Function… 命令显示Paste Function对话框 此错误的一个常见原因 一种常见的错误是“New <object>… ”或“Create <object>… ”命令显示的对话框的名称是“Edit <object>”或“<object> Properties”。用户指定用来创建新对象的属性通常与现有对象中的属性相同,因此GUI程序员常常将一个对话框同时用于两种功能。这对于开发人员是有意义的,但对用户却不然。如果对话框有一个静态标题,该标题将与用于显示对话框的一个或两个命令都不对应。Adobe Reader的“New Group…”按钮显示一个Edit Group对话框(参见图3-15)。 插入原书P119图 图3-15 Adobe Reader:“New Group…”按钮显示Edit Group对话框 Web上的此类错误 类似的标签不匹配在Web上也会发生。Apple的“.mac”服务中的WebMail应用程序中有一个用于添加电子邮件文件夹的链接,但它显示的是一个“Manage Folders”(管理文件夹)窗口(参见图3-16)。 插入原书P119图 图3-16 mac.com WebMail:单击“Add a folder”显示一个名为“Manage Folders”的窗口 Dr. Dobb的门户网页DDJ.com上出现了一个更为严重的不匹配错误。导航栏的“Subscribe”链接显示一个名为“Dr. Dobb’s Journal Print Subscription Services”(Dr. Dobb的期刊打印订阅服务)的页面(参见图3-17a)。虽然算不上好,但也不是很糟。然而,导航栏上的另一个链接“Newsletters”显示一个名为“Subscribe”的页面(参见图3-17b),这就使用户无法理解了。 插入原书P120图 图3-17 DDJ.com:导航栏链接与它们的页面标题不匹配 (A) “Subscribe” (B) “Newsletters” 链接
GUI设计禁忌2.0——3.1 未显示用户当前所在位置
书名: GUI设计禁忌2.0
作者: Jeff Johnson
出版社: 机械工业出版社
原作名: GUI Bloopers 2.0: Common User Interface Design Don'ts and Dos
译者: 盛海艳
出版年: 2008
页数: 352
定价: 49.00元
装帧: 平装
ISBN: 9787111242291