【UXRen译#04】为加快图标识别速度而设计

对交互界面来说，是什么让图标不仅仅是装饰而更有价值呢？直观性、美学价值、易于记忆还是跨文化的识别性？当然，一个有效的图标会包含许多此类特质，而我更关注的方面则是：识别速度，也就是一个特定的图标能够被发现和确认的快慢程度。

在一个简单的休闲类应用中，图标识别速度或许无关痛痒，它对应用的整体体验没什么影响。但对于一个复杂的电子商务类应用来说，就不同了：此时图标识别速度变得很重要，因为用户花在处理各个独立元素的每一秒钟都会对应用整体体验的效果产生显著的影响。

 

符号学理论和符号的结构

就像任何一门语言或其它的沟通系统，用户界面是由一系列符号组成的结构体。符号学，是语言学的一门分支，是专门研究各类符号的学科。符号学将一个符号定义为由两种元素组成：意符（一个符号的表现形式）和意指（它所表征的概念）注1。一个符号，是由一个意符和特定的意指所构成的可识别的组合。

同样的意符（形式）可以表示很多不同的意指（概念），而不同的意符也可以表示同样的概念注2。意符和意指的独特搭配就构成了符号，并在特定情境中赋予其意义（如图1）。举例来说，一个铁路交叉路口的概念可以有很多种表示方式。与此同时，对于一个不熟悉道路标志系统的人来说，铁路交叉路口的标识可以有很多种理解。

图1 铁道交叉口符号

 

基于意符和意指间的关系以及它们在符号使用上的惯例水平，符号被分为三类注3：

• 肖似符号：通过形象上的相似与概念建立联系；
• 象征符号：通过惯例或规约与概念建立联系；
• 标记符号：通过因果关系与对象建立联系。

典型的UI图标本质上是象征符号或肖似符号，还有许多是介于两者之间的符号。注4

象征符号常常带有任意性，它表示一个概念的形式往往比较抽象，例如用表示“刷新”功能。它们的意义常难以猜测，只有通过学习才能知道。

而与之相对的，肖似符号使用一种更接近字面意思的方式去表征概念。人们常可以用常识猜测它们的意义（例如用表示“呼叫”的功能）。两种类型的符号都可以采用隐喻来帮助理解。

 

肖似符号与象征符号

一段时间以前，我在Adobe Indesign和Quark Xpress toolbars注5上做了有关图标直觉的小测试。测试的参与者是第一次使用这两个软件的人，我让他们猜测其中图标可能的含义。

我观察到一个有趣的现象（尽管并不令人惊讶），那就是当不熟悉的符号呈现在人们的面前时，他们总是试图从肖似的角度（基于符号和物体的相似性），使用已有常识来理解它们。举个例子，在InDesign工具栏里的“按钮”标志，是一种肖似符号，它很快就能够被所有的参与者正确理解；而另一方面，“自由变形工具” 在传达它所要表示的功能时就不那么成功，它是一个有着标记性特点的象征符号。

对于设计者来说，很明显，后者的图标表示的是对象被选中做变形时的状态场景。但对于初次接触这些的人，他们会试图以自己已经熟悉的符号元素为基础来解释它。此类解释包括“裁剪一个长方形”、“重调大小”、“通过选点来选择一个对象”以及“选取一些点”。

自然，理解更抽象（象征性）的图标明显会比理解肖似性的标识花更长的时间。

 

视觉风格和识别速度

如果图标形状大致相同并表示相同的概念，那么他们的视觉表现风格会对理解过程产生怎样的影响呢？Medium杂志近日发表了一篇文章，该文章作者称，对于大脑来说，线型图标比实体图标要更难处理，并最终会导致“认知疲劳”。

暂且把认知心理学及大脑如何处理形状的理论抛开，我想采用符号学的视角注6，用一些基本的用户测试来比较一下两种图标。这一次，我没有再让人们猜测图标的含义，而是读出一些物体的名字，例如相机、邮件，然后让他们指出表示相应概念的图标，在这过程中我会记录他们指出图标所花的时间。比较用的两种图标来自同一图标集，一种是线型的，一种是填充的（如图2）。

图2 给参与者呈现的图标集

 

将试验的参与者分成两组注7。先后向每组参与者呈现两种风格的图标。表1记录了他们发现和认出图标的时间。测试过程中图标在相同的位置呈现，所以由于熟悉度的增加，人们识别第二个呈现的图标的速度都会加快，而不管它是何种风格。

平均来说，先观看填充图标的人会在66.2秒内发现指定的图标，而先观看线型图标的人所花的时间是65秒。在第二轮测试中，填充类图标的平均所需时间是28.4秒，线型图标是30.4秒。对于两组来说，由于熟悉度导致的时间减少量都大约是36秒。由此看出，两种风格的图标在识别速度上并没有显著的差异。所以我们也许可以认为，如果一个图标设计良好，能够清晰的表现某个可识别的形状，那么它的视觉风格并不会对识别速度有什么影响注8。真正影响到识别速度的是符号表示概念的方式——也就是符号中意符和意指之间的关系。在刚才的测试中，那些在两类图标中都被较快识别的是图像符号——“计算器”、“照相机”、“邮件”；而那些看起来都需要短暂停顿的都是象征符号——“下载”、“返回”、“复制”，甚至“删除”的图标都造成了参与者反应的轻微延迟。

A组                       B组

填充   线型     线型   填充

64.2  28.2     72.6    31.2

63.0   27.6     61.8   26.4

71.4   35.46   60.6   27.6

表1 各组识别时间统计（单位：秒）

 

有趣的是，尽管有些图标识别起来有些缓慢，但这并不意味着它们就难以被找到。在测试后的访谈中，参与者们认为“删除图标”非常容易被找到，尽管它花费的时间比有些别的图标要略长些。对此，我猜测这里面有心理层面的原因。当我们发现一些熟悉的符号时（比如一个垃圾桶代表“删除”，一张软盘代表“存储”，等等诸如此类），我们会体会到某种满足感。它们就像神秘的编码，我们会庆幸掌握了它们，不会注意到识别它们需要多花一点时间。

图3汇总了参与者在识别两种图标集中各个图标的表现。识别红色轮廓标出的图标所需时间平均比识别绿色轮廓的图标所需时间要长。

图3 易于/难于被识别的图标

 

其它因素

图标标签的表述方式和它们所代表功能的一致性也可能会影响识别的速度。例如，那些被要求寻找“时钟”的用户比那些寻找“最近或历史”功能的用户完成起来要快些。这两种功能都是由同一个“时钟”图标表示的。

另外可能影响图标识别速度的是图标形状或其表示相关概念的近似程度。例如，旗和文件夹图标（见前图右上角）都是基于一个类似大小的矩形绘制的，这使得用户识别时会有轻微的延迟；而“重要”（用旗表示）和“喜欢”（用星星表示），由于它们在概念上有些相似，使得用户很有可能将二者混淆，特别是当它们的位置间隔不远的时候。

因此，不是图标的视觉风格，而是它们间的个体差异，它们的形状以及它们彼此间的位置关系造成了这次测试中图标识别速度的差异。

 

更“快”图标的设计建议

众所周知，有标签的图标比没有标签的图标更有效，特别是对于刚接触一款应用的新手来说。这是显而易见的，因为文字标签充当了桥梁的角色，建立起意符和意指间的联系。然而，有时候，由于各种原因，你可能需要单独使用图标而不带标签或者仅仅使用悬停提示。在此类情况下如果你想要图标被快速的发现和识别，那么我的建议是：

一、可能的话，选择那些采用“外表相似”的方式联系概念的肖似符号而不是象征符号。例如，图4中左边的“计算器”图标就应该比右边的更易于被发现和识别注9。

图4 两种不同的计算器图标

 

二、对于那些必须快速理解的重要概念，也包括抽象概念，文字标签和颜色的组合比一个图标更有效，例如图5中的组合就使“停车”的道路标识能被快速的识别出来。

图5 停车标识

 

三、将表示类似概念的图标（例如“任务”、“收件箱”、“通知”）放在一起有可能减慢该组中各图标的识别速度。

 

四、用户界面上的用语与图标标签间的联系应尽可能接近。例如，如果你要用旗帜图标表示“重要”，那么应该标注“插旗以示重要”而不是“标记以示重要”。

 

五、最重要的是，当测试图标时，主要的关注点不应落在图标的视觉风格上，而应该集中在图标的形状、它们与所要表示的概念的关联方式以及它们彼此之间在外观和概念方面的联系上。

 

注释

1. 这是由瑞士语言学家索绪尔（Ferdinand de Saussure）最先提出的定义。另外一个著名的符号结构由查尔斯皮尔斯（Charles Sanders Perice）提出。
2. 实际上，组合的数量是无限的。这在语言学中被称为无限指号过程。
3. 尽管皮尔斯最初的符号分类要更加精细。
4. 这种分类是用来做交互界面图标间的比较的。从广义来说，所有的UI图标本质上都是肖似符号。
5. 这一测试是我本科学位论文的一部分。论文中做了两类交互界面的符号学比较分析。
6. 从符号学角度来说，交互界面是通过一种元语言的形式运作的沟通媒介。所有的元素被看作是编码后的符号，所有的操作都代表了设计者与系统使用者之间的沟通过程。符号学的视角与以用户为中心的视角之间，并不是非此即彼的关系，而更多是一种补充。在用户中心视角来看，对符号的选择主要由实证研究来决定，即如果一种符号能够被一定数量的用户识别出来，且这一结果被统计检验证明是显著的（译注：即用户对它的识别能力高于随机猜测水平），那么可以认为它的设计是成功的；符号学的目的在于提供一种理论基础，它可以解释用户中心研究的结果并指导设计师在所有可能的意符中选择正确的表达方式。一本由C. de Souza写的书对符号学视角做了更深入的阐述。
7. 六名参与者参加了测试（感谢我勇敢而富有冒险精神的同事们）。尽管参与者的数量太少以致于无法得出任何较为确定的结论，但测试还是帮助我们了解了一些人们在解读符号时的大致趋势。
8. 值得一提的是，有两名参与者认为填充类图标“看上去更容易”。可能确实如此，但也可能是因为他们更为熟悉填充类的实体风格。另外四名参与者没有去注意两种风格的差别，只是提到一种是“黑”的，一种是“白”的，他们也并不认为这是很明显的不同。
9. 注意：这是建立在我对相似图标测试的假设和观察之上的，该例子并没有被用户测试证实。

 

参考文献

• Andersen, P. B. 1990. A Theory of Computer Semiotics. Cambridge: Cambridge University Press.
• Barr, P. 2003. User-Interface Metaphors in Theory and Practice
• de Souza, C. S., 2004. The Semiotic Engineering of Human-Computer Interaction. Cambridge: The MIT Press.
• Eco, U. 1978. A Theory of Semiotics. Bloomington: Indiana University Press.
• Peirce’s Theory of Signs
• Peirce, Eco, and unlimited semiosis
• Peirce, C.S. 1998. The Essential Peirce. Volume 2. Indiana University Press.
• Semiotics for beginners
• Saussure, F. de. 1983. Course in General Linguistics. London: Duckworth.
• Wiedenbeck, S., 1999. The use of icons and labels in an end user application program: an empirical study of learning and retention.

 

原文作者：Alla Kholmatova; 发表时间： September 17th, 2013

原文链接：http://boxesandarrows.com/optimizing-ui-icons-for-faster-recognition/

图片来源：androidbeat.com

译者：展翼行翔；审校：Suezz，欣宁，Tina

版权所有：UXRen翻译组 （转载请注明出处！）