有时不同的窗口或者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” 链接 避免禁忌15 窗口或Web页面的标题应反映出打开它们的命令。这样可以让用户知道他们点击的按钮或菜单项就是他们所需要的。 一种方法是让窗口或者网页的标题与调用它们的命令的名称相同。由于命令标签应该是动词短语,因此大部分情况下,窗口的标题也应该是动词短语。 虽然Microsoft Excel的“Insert”菜单提供了一个错误示例,但它也提供了一种完全匹配的好的示例。“(Insert)Hyperlink”命令显示了一个与其标题名称完全相同的对话框(参见图3-18)。 插入原书P121图 图3-18 Microsoft Excel:Insert => Hyperlink… 命令显示Insert Hyperlink对话框 如果对用户理解有利的话,两者不完全一致也是可以的 只要用户能够看到两者之间的对应关系。命令和标题就不必完全一致。“Show Order Status”和“Status of Order: 6823”之间的差异很小,不会引起误解。然而,应该站在用户的角度来判断命令名称与它调用的窗口名称是否相似,而不是由开发人员来判断。因为任何不相符的命令名和窗口标题都可能带来潜在的易用性问题,因此开发人员应该尽可能地避免它,在无法避免的时候请用户来做测试。大多数差异即使看起来微不足道,也会导致用户至少是暂时性地怀疑自己是否点击了错误的按钮或链接。 一种有效的解决方案:允许使用命令来设置窗口标题 命令名和结果窗口标题不相符的一个常见原因是因为几个不同的命令打开同一个窗口。三个典型的例子是: 1. “Open...”、“Save as...”、“Import...”和“Export...”命令都打开一个标题为“File Chooser”的对话框。 2. “Create Account”和“Edit Account”命令都打开一个标题为“Edit Account”的窗口。 3. “View Graph”和“Edit Graph”命令都打开一个标题为“Graph”的窗口。 在这三个例子中,我们都可以通过“允许使用命令和链接来设置窗口或页面标题”的方法消除不相符。在第一个例子中,我们通常这样做:文件选择对话框允许调用它的代码设置对话框的标题,程序员常用这个方法将文件选择对话框的标题设置为调用它的命令,例如“Save As”。因此,这个例子中的情况事实上很少发生。另外两个例子中的问题却很常见。虽然相同的解决方案也适用于它们。
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