图标的可用性(Usability in Icons)

编程技术 圣托马斯 12年9月2日 17:49 1002 0

在许多应用中,图标通常用来表达很多意义,可以表达一个功能,可以表达一个信息等等。
但是,如果用户不知道这个图标的意义,那么使用图标自身的意义何在?

在设计图标的时候,你会争取使用或创建同形的图标,同形的意思是图标的形状与现实生活中的物的图标一致。例如,垃圾桶,橡皮擦,刷子。
当你使用恰当的描述的时候,这些图标能够很好的发挥作用。但是要是图标在现实生活中没有对应的物怎么办?

为了阐述,我用链接的图标做例子。
“链接”,你说每个人都知道链接图标的样子。你脑海中浮起的第一个链接图标是什么,当你要在email或博客中插入一个链接的时候?是一个“链子”?是一个“地球”?或者其他?是的,你也知道,“链接”有很多图标,你会觉得每个都是符合逻辑的。但是这么都却是不必要的。

从上面的图片你可以看到,大多的App和博客系统都使用“链子”图标,只有facebook是一个例外,他使用一个note图标。我觉得facebook这个图标意义没有“链子”易懂。

不过你不要认为上面的“链子”图标就很容易懂,我说这个“链子”图标只有geek才能懂。要是你不信,下面我做的调查会让你大吃一惊。

我邀请了一批人做了一个“链接”图标的测试。测试过程是这样的:

我把“链接”图标和其他的在博客系统中常用的图标放在一起,让每个测试人员写出每个图标的意义。

调查结果是,一些测试人员把“链子”图标理解为“将一些东西绑定在一块”或者“把两个元素连起来”。他们说的并没有错,只是说不出来是把什么东西绑定起来。因此,这个图标表达的意思并不是我们上面所说的“链接”。所以我说要geek才能理解这个图标。
“地球”的图标,一些测试人员理解为“访问internet”或者“搜索”或者“上传东西到Internet”。

下面是测试人员理解的意义与我们期望的意义的对比数据:

ICON DID UNDERSTAND DID NOT UNDERSTAND
Bold 100 % 0 %
Italic 100 % 0 %
Underlined 100 % 0 %
Strike-through 54.55 % 45.45 %
Link 1 (chain) 35.29 % 64.71 %
Link 2 (globe) 25 % 75 %
Ordered list 100 % 0 %
Unordered list 93.94 % 6.06 %
Image 78.79 % 21.21 %
Undo 57.58 % 42.42 %
Redo 51.52 % 48.48 %

测试结果是,只有35.29%的人能够理解“链子”图标,而只有25%的人能够理解“地球”图标。
所以“链接”的图标是不可用的一个图标,无论35.29%还是25%都说明了不可用。

当我们回访测试人员的时候,他们说:

为什么不使用“WWW”,每个人都能理解。

是的,可能一部分人能够理解WWW是访问Internet,或类似的其他操作。不过最后惊讶的是,居然每个测试人员都能够理解“WWW”。WWW可能不是最好的解决方案,但是,基于我们的测试,这个是目前为止最好的表达“访问Internet”的图标。

原文链接:Usability in Icons

相关文章

文章讨论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

YDR_BLOG_TONGJI