细节决定交互设计的成败
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

3.2 如何帮助用户找到功能在哪里

随着软件应用领域的复杂性的增加以及软件开发效率的提高,软件所提供的功能也在飞速地增加着。我记得在Word 6推出的时候,自己还有时间和信心把它的所有功能都系统地学习一遍。不过在今天,当面对Office 2003中的Word这样的庞然大物时,我彻底打消了这种念头。

功能增多本身并不是一件坏事,不过,要想使得用户能够真正获得这些功能所带来的价值,一个很重要的前提条件是用户首先要能找到这些功能在哪里。对于用户来说,找不到的功能就是不存在的功能。

下面我们就来讨论一些有助于帮助用户找到某项功能的一些设计策略。

3.2.1 就近原则

在Vs.net 2005的Tab区域上,关闭tab的关闭按钮放在很靠右的位置,用户看不出该按钮能用来控制该tab。而在Eclipse中,每个tab上都有关闭按钮,用户很容易看出其控制关系,如图3-6和图3-7所示。

图3-6 Vs.net 2005中关闭当前文件的按钮位于整个Tab区域的右上角

图3-7 Eclipse中关闭当前文件的按钮位于标签项上

在Google的IE工具条界面设计中,当用户点击搜索框右侧的下拉按钮来下拉出以前搜索过的关键字列表后,在列表的最下方有一个“清除记录”的功能,用户可以通过点击这个超链接来清除曾经搜索过的关键字。由于这个功能和操作对象就在一起,因此很容易知道和使用这项功能。不过,或许出于实现技术上的限制,在Google主页上的输入搜索关键字的输入框中,却没有类似的设计,结果使得用户无法方便地找到这项功能,如图3-8所示。

图3-8 Google搜索关键字输入栏的不同设计

3.2.2 以对称的方法进行对称的操作

假设有这样一个奇怪的房间,你用钥匙打开了门进去,在里面呆了一会儿后,你走了出来,准备锁门离去。但是,锁门的位置和开门的位置不在一起,你无论如何也锁不上门了,是不是觉得很苦恼?更有甚者,有可能当你把钥匙插入开锁的地方准备以通常方式锁门时,房间突然爆炸了。

在计算机的世界里,这并不是笑话。想想我们是如何开关计算机的。开机的时候,我们只需按下机箱上的电源键就可以了。然而,关机的时候可不是一般人想像的那样再去按一下电源键,就像我们关电灯或关电视那样。你必须通过软件的方式来执行操作系统的关机命令才能正常关机,正如图3-9所示。

图3-9 Windows的关机界面

如果你直接按下电源键、关闭电源,则一些数据可能丢失,或发生任何其他不可预知的事情。如果你不知道这样的关机方式,那些懂计算机的人便会笑话你说:“关闭计算机怎么能像关闭电视一样呢?”。那些更懂一些计算机知识的人会向你解释说:“之所以不能这样关机,是因为还有很多内存中的数据没有保存到硬盘上,是因为如此这般这般…”。

不过,真正应当被笑话的或许应当是计算机设计人员,他们为什么不能把关机操作做得像关闭电视机那样简单呢?为什么计算机系统不能在检测到关机信号后自动保存所有应当保存的数据并在随后自动切断电源呢?实际上,计算机设计人员只是在近两年才有了这样的认识并做了相应的改进。在Windows XP和Windows Vista操作系统中,当用户按下电源键后,操作系统的默认行为就是执行关机操作,正如图3-10所示的系统电源设置对话框所表示的。

图3-10 Windows允许用户设置按下电源按钮动作的含义

上面的例子说明了,对于一些含义相反或相对立的操作,用户期望在同一个位置能够以类似的方式执行这些操作。如果不是这样,用户将很难找到含义相反或相对的功能。

首先来看Word中在标尺区域上设置某行的制表位位置的方法。标尺区上的制表位位置是指,当用户在该行中按下制表键(即Tab键)后,文字输入光标将直接跳到该位置,而不是向右移动固定个数的空格数。向标尺区域中添加一个制表位位置的方法很简单,只需在标尺区域上想要设置制表位的地方用鼠标单击一下即可,如图3-11所示。然而,用户如何去发现相反的功能,即如何去除掉一个已添加的制表位位置呢?你的猜想可能是再次在该位置上用鼠标单击一次,以便把它清除掉。可惜Word中的设计并不是这样的。其实去掉的方法也很简单,只不过你很难通过正常的推理来想到它:那就是把该位置处的小标志用鼠标拖拽出标尺区域,或者是通过“格式”菜单下的“制表位”菜

图3-11 Word标尺区域中的制表位

单项来完成对于制表位的编辑。

再来看一个正面的例子,同样是在Word中,我们可以看到工具栏区域中有很多的工具条,图3-12 显示的工具栏就包括了“常用”和“格式”两个工具条。用户可以根据自己的使用特点,向工具条中添加自己常用的那些工具条,同时去掉那些不常用的。这里,添加和去除某个工具条的操作时含义相反的,而Word中也是在同样的位置以相对称的方法来提供这一对功能的,那就是选择“视图”菜单中的“工具条”菜单项,此时你会看到所有可能的工具条的名称都列了出来,那些已经出现在工具栏中的工具条名称的左边带有一个对号标记。如果用户想添加某个工具条,只需点击该项即可,而如果用户想去除某个已有的工具条,也是同样地点击该项即可。这样,如果用户知道了如何添加某个工具条,他也就同时知道了从哪里删除某个工具条。

图3-12 Word中对于隐藏或显示某个工具条的控制方法

不过,这个方法并不是在所有的情况下都有效的。例如,在Adobe Reader版中,可以允许用户以全屏的方式查看文档。为了进入这个状态,用户可以在“View”菜单下选择“Full Screen”菜单项来进入全屏模式。不过,紧接着而来的问题是,进入全屏模式后,菜单区域不见了,用户如何才能切换回正常的查看模式呢?解决这个问题的思路是:要在屏幕上留下一个可以进行逆向操作的可见的小区域。

很多软件在关闭左侧的导航区后,无法容易地再次打开它,而有些软件在这一点上做得比较好。例如在Microsoft PowerPoint中,左边的导航区域可以通过向左侧拖拽分隔条的方式来关闭。不过,在导航区被关闭后,该分隔条还会留在屏幕上并紧贴在主窗口的左侧边框上。此时如果用户把光标移动到该分隔条上后,光标指针会改变形状,提示用户可以拖拽。于是用户可以通过向右拖拽的方式再次把导航区显示出来,图3-13和图3-14两幅图分别显示了导航区被关闭前后的界面。

图3-13 PowerPoint中导航区关闭前的效果

图3-14 PowerPoint中导航区关闭后的效果:左侧还留有很小的一个窄条用于用户拖拽

另外一个例子是Word在进入全屏模式后所采取的方法:除了以全屏方式显示用户的文档外,它还会在屏幕上显示一个很小的窗口,里面有一个标有“关闭全屏显示”文字的按钮,如图3-15所示,这样用户就能够很容易地知道如何退出全屏模式了。

图3-15 Word在进入全屏幕模式后的提示对话框

3.2.3 对功能进行恰当的分类和组织

在日常生活中放置物品时,我们通常会按照物品的用途来将其分门别类地进行放置,以方便日后找寻和使用。例如,我们会把常用的一些五金工具放在某个盒子里,会把一些证件集中放在某个抽屉里,等等。那些经常找不到东西的人往往是没有养成把物品归类放置的习惯。

在软件界面设计中,最能体现功能是否被恰当归类和组织的地方就是菜单的设计了。好的菜单结构能够让用户很快地找到所需的功能项;相反,设计不当的菜单会导致用户花费大量的时间在各个菜单中搜索,并且很可能找不到所需的功能。

举例来说,在IE浏览器中,如果安装了JavaScript调试模块,则用于调试网页上的JavaScript脚本的调试功能将被放置在“View”菜单下,如图3-16所示。

图3-16 Script Debugger功能在IE菜单中的位置

这种设计显得相当随意和不合理。因为,正如其字面意思所表示的,“View”菜单下的功能应当是和视觉外观有关系的,例如调整字体大小、调整工具栏上的工具条、是否显示状态栏、是否全屏显示,等等。JavaScript调试功能和这些功能没有一点接近之处,也不是普通用户会常用到的,因此放在这里是不合适的。相比之下,Firefox在安装了JavaScript调试工具Venkman后,对应的菜单项将会被放置在“Tools”菜单下,这就显得相对合理多了,如图3-17所示。

图3-17 JavaScript debugger功能在Firefox菜单中的位置

在我所使用过的软件中,Lotus Notes 6.5是在菜单分类及组织方面做得最糟糕的一个,下面就结合该软件来详细讨论有关菜单分类及组织设计方面常见的一些典型错误。

第一,同样的功能重复出现在多个菜单中

在Lotus Notes 6.5中,有两个菜单项都能够用来删除当前打开的邮件。一个菜单项位于“Edit”下,菜单项的名称是“Delete”;另一个位于“Actions”下,菜单项名称也是“Delete”。还有,为了回复当前打开的邮件,也有两个同样的菜单项都能够用来完成该功能,一个是位于“Create”菜单下的“Reply”,另一个是位于“Actions”下的“Reply”。以上的这些重复放置的做法人为地增加了用户的困惑度,会导致用户记不清楚所需的某项功能到底位于哪个类别中。

第二,菜单项归类不当

正如上述IE浏览器中的脚本调试功能菜单的归类不当一样,Lotus Notes 6.5中也存在着这样的问题。例如,在它的“Actions”菜单下有一个“View Unread”菜单项,它的作用实际上是让软件仅仅显示出那些用户还没有阅读的邮件。显然,这个功能是和显示内容相关的。按照通常的做法,应当放在“View(查看)”菜单下。还有,“Create Rules”也应当放在“Create”下,而不是“Actions”下。

第三,分类名称过于含糊和宽泛,包含项目过多

在最顶层的菜单中,“Actions(操作)”一词过于含糊和宽泛。用户使用软件时就是在进行各种各样的操作,因此用户无法根据自己将要执行的功能的含义来在范围更小的分类中更加方便地找到所需的菜单项。从这个菜单中的内容可以看出,有些操作是完成和某封邮件相关的任务,例如回复邮件,有些是创建邮件规则,还有些是调整显示哪些邮件,这些功能之间没有什么密切的关系,因此不应当放在一类中。

3.2.4 让用户能够从界面上看到软件所提供的功能

我还记得自己购买了第一辆汽车后去车辆管理所验车时的一个小插曲。我把车停在车管所前面的小广场后,先去办理了一些手续,然后回到车子旁边等待有关工作人员过来脱汽车的发动机号。发动机在前车盖下面,因此首先需要把前车盖掀开。我先是愣了一下,然后觉得车里应当由某个开关可以做到这一点。我回到车里找了半天,可是总也找不到哪个开关或按钮是这个目的。我只得去问旁边的一些车辆的司机。经旁人指点我才发现,原来控制车前盖的开关隐藏在仪表盘面板下方左侧靠里的位置,无论你是站在车外或是坐在驾驶员的位置上,你都看不见这个开关,除非你把头钻到驾驶员膝盖的位置才能看到它。

从这个例子可以看出,如果某项功能的操作控件没有在界面上显示出来,用户就会因为看不见它而很难知道该功能的存在,在软件界面设计中也是如此。最简单的例子就是Windows操作系统中窗口的标题栏上的三个标准按钮:最小化、最大化、和关闭。用户看到了这三个按钮,就知道了可以通过它们来对窗口进行怎样的操作。如果某个按钮不存在,用户将不容易看出该项功能的存在。例如,在第2 章中所示的Adobe Reader的About对话框的例子中,该窗口中没有标准的关闭按钮,因而用户很难找到关闭窗口的功能。

图3-18显示的是Windows文件管理器软件的界面,从这个状态中,你将会知道左侧的“文件夹”窗口部分可以被关闭,因为这部分的左上角有一个关闭窗口的“X”型按钮,这是好的设计。现在来看窗口底部的状态栏部分,从这里你能看出这部分也可以被关闭吗?你很可能无法看出,因为这个功能及其操作并没有显示在屏幕上。你的确可以通过选择“查看”菜单下的“状态栏”菜单项来关闭(或打开)这个状态栏部分,不过这种方法不是一般人能够很容易就看出的。

图3-18 Windows文件管理器软件界面中的关闭文件夹部分的按钮

还是在文件管理器软件的界面中,当你关闭了“文件夹”窗口后,它原先占据的部分会被一些新的内容所代替,其中最上面那部分是“文件和文件夹任务”,在这里列出了对于用户在右侧选中的某个文件或文件夹的常用功能。如图3-19所示。

图3-19 Windows文件管理器中直接显示出可能的操作

当用户选中了文件“购票须知.htm”后,在“文件和文件夹”部分列出的功能有:

第一,重命名这个文件;

第二,移动这个文件;

第三,复制这个文件;

第四,将这个文件发布到Web;

第五,以电子邮件的形式发送此文件;

第六,打印这个文件;

第七,删除这个文件。

当用户看到这些明显地显示在界面上的功能后,他们就能很容易地知道该软件都提供了哪些可用的功能了。

将功能可视化地表示在界面上的局限性在于,它对于屏幕空间有很大的要求。当只有很小的屏幕空间可以使用时,我们不可能把数量众多的全部功能都显示出来。对于这个问题有两个可能的解决方法。

第一种方法是只列出最常用的一种或几种功能。正如上面的“文件和文件任务”的例子中所展示的。

第二种方法的可扩展性更好些,它利用屏幕上能够利用的一小块空间来显示一个可单击对象,用户单击后可以按照菜单方式列出所有可能的操作或功能。这一点和在某个对象上单击鼠标右键来调出上下文菜单很相似,不同之处在于,这种方法由于有了视觉上的提示,因而更容易让用户看到这种用法。例如在Word的工具栏区域中,每个工具条最右侧都有一个向下的箭头,单击这个箭头就会下拉出一个菜单,从这个菜单中你可以对该工具条进行一些设置操作,例如定制其中的按钮个数,如图3-20所示。

图3-20 Word的工具条上用按钮来下拉出更多的功能

有些时候,即使是把功能以可视化的方式显示在屏幕上,用户也不一定能够理解这些可视化部分的正确意义,最典型的就是工具栏上各式各样的按钮设计。虽说有些时候一幅图像能够胜过千言万语,但同样有些时候,一句话,甚至是一个词的含义都远不是一幅图像所能够表达的。也许有人会说,让用户去看使用手册不就可以了吗?这只是设计人员的一厢情愿,没有人能够保证用户在使用前一定会老老实实地看一遍使用手册。实际上,更多的用户倾向于边用边学。那么如何在用户不阅读使用手册的条件下帮助他们理解界面上的可视化信息呢?解决方法就是把界面自身做成帮助系统的一部分,使得用户能够直接从界面自身得到帮助信息。

根据屏幕上是否有足够的空间,这种解决方法又可以有两种实现方式。

第一种,如果屏幕上有足够的空间可以利用,则直接把帮助信息显示出来。

如图3-21所示的是Google图片软件Picasa的界面的右上角,这里有一个文本输入框,它的功能是什么呢?仅仅从这个操作控件的外观上,用户很难理解它的正确含义。输入框左边的图标看上去像是个放大镜,难道它的作用是放大某个照片吗?熟练的计算机用户也许知道这可能是搜索功能,不过如何能够让初级用户也能很容易就看出来呢?在这个特定的例子中,输入框部分占据了很大的屏幕空间,那么为什么不能够利用这片区域来写一句简单的帮助信息呢?例如:“在此处输入搜索关键字”。

图3-21 Picasa中的搜索关键字输入框

实际上,不少的软件已经采取了这样的方法,即利用操作控件自身所占据的空间来显示其自身用法的帮助信息。例如,在图3-22所示的Word的界面中的搜索关键字输入框。

图3-22 Word中的搜索关键字输入框

图3-22 的右上角有一个类似的文字输入框,它用灰体显示了“键入需要帮助的问题”的文字。这样一来,用户就会很容易理解这个控件能够用来查找一些帮助信息。类似地,在新浪首页的最上部,接受用户搜索关键字的输入框内也显示了“请输关键字”的提示信息,如图3-23所示。

图3-23 新浪网页上的搜索关键字输入框

第二种,如果屏幕上的空间不足,则可以当用户把鼠标指针悬停在操作控件或界面对象上时,动态显示帮助信息。这种方式最大的应用就是工具栏按钮的“工具提示(tooltip)”设计手法。正如前文所说,并不是所有的按钮图像都能一目了然地表达出该按钮所代表的操作的正确含义。但是,直接把功能描述以文字形式显示在工具条上又会占据太多的屏幕空间。一个巧妙的方法就是只有当用户把鼠标移动到该按钮上并停留时,以一个弹出的小窗口的方式显示该按钮的功能描述;而当用户把鼠标指针移开后,小窗口自动消失。

这种工具提示方法不仅可以用于工具栏上的按钮,也可以应用于界面上的所有能够看见的对象。例如在Word中,标尺区的左端和右端有一些不同形状的控件,如图3-24所示。当用户把鼠标指针悬停在这些对象上后,一个小的工具提示窗口就会弹出,里面显示了该控件的含义。

图3-24 Word标尺区上各个控件的含义