发新话题
打印

[艺术基础] 图标可用性测试【译言】

本主题由 iconsbox 于 2009-11-22 21:36 设置高亮 取消高亮

图标可用性测试【译言】

作者:初心不忘 来源:yeeyan.com

英文原文地址:http://www.useit.com/**s/sun/icons.html

图标可用性测试
Icon Usability


Icon usability testing was conducted with two different methods:

  • Icon intuitiveness test in which an icon was shown to a small number of users (typically five) without its label. The users were asked to state their best guess as to what the icon was supposed to represent. This test assessed the degree to which the graphic chosen for the icon represented the intended concept.
  • Standard usability test in which the icons were shown to users as part of the full user inte**ce and where the users were asked to "think aloud" as they used the system to perform set tasks. This test accessed the degree to which the icon would work well in context of the inte**ce as a whole (where it would typically be displayed with a label).
Our initial studies were done with ** sketched icons in black-and-white ink on **. For each icon, several alternative concepts were tested and we chose the most promising one for further development into a color icon rendered as an imagemap on the computer. The color icons were further developed through several rounds of iterative design.
Here are examples of the iterations of three of our icons.


图标的可用性测试可以通过两种方式来进行:
1.
图标直觉测试(Icon intuitiveness test)。将不带标签的图标展示给一小部分用户(通常为5个用户),让其说出他们认为图标最能代表的事物。该测试评估图标表示预期概念的程度。
2.
标准可用性测试(Standard usability test)。将图标和整个用户界面一起展示给用户,要求用户使用系统完成一系列预先设定的任务,并在完成任务的时候进行出声思维。该测试是为了评估图标在用户界面上良好工作的程度(在界面上,图标通常以标签的形式呈现)。
我们使用画在纸上的简单黑白草图进行最初的研究。对于每一个图标,我们都会采用几个可供选择的概念进行了测试,然后选择最有前途的一个概念进行进一步地开发,将其着色成一个电脑上的彩色图像。我们对那些彩色图标进行了几轮的重复设计。

以下是三个图标反复设计的实例。



This icon represents the concept of Technology and Developers. The first two icons with a chip and a CD-ROM were somewhat too hard to understand and seemed to represent the finished products more than the development phase. The construction worker was good at representing development but was rejected due to the strongly negative connotations this symbol has on the WWW where it is often used to represent pages that are "under construction" (something that was much hated by our test users). The second row shows our next round of attempts where a person was used to represent the developers. As you can see, we couldn't restrain ourselves from having a propellerhead despite the fact that we had rejected this aspect from the first iteration of the home page. The first developer icon was liked the most, though some commented that it represented hardware and not software development. Also, some people liked that the second icon represented "harnessing the power". So for our first color icon, we chose mainly the first developer icon but with the wrench replaced by the lightning bolt. The first color icon met with poor results in usability testing, though. Comments included:
  • thunder and lightning
  • electric - looks painful
  • person being killed by technology
  • dance machine
  • why do Sun developers look bug-eyed?
We clearly had to get rid of the human in this icon, and for the second color icon, we retained only the lightning and the cogwheels. Users still complained that the thunderbolt looked too much like lightning striking the machinery and destroying it. We finally decided to get rid of the references to electricity and the final design represented the concept of development by a CD-ROM. Throughout the testing, the cogwheels worked fine as a way of communicating engineering and technology even though computers obviously don't have gears. Sometimes elements of obsolete technology can work well as a stereotype to communicate concepts in an icon.



这一图标代表了概念“技术和开发者”。前两个用芯片和CD-ROM代表的图标有点难以理解,它们看起来更像完成的产品而不是开发过程。建筑工人能够很好地代表开发但是它最终被否决,因为其具有强烈的负面涵义,在互联网上这一力图标经常表示某些网站正在建设中(这是我们的测试用户非常憎恨的)。
第二排的图标是我们下一轮的尝试,我们使用人物图像代表开发者。
第一个开发者图标最受喜爱,尽管有些用户认为其代表了硬件而不是软件开发。另外,一些用户喜欢第二个图标因为它象征“利用力量”。因此,我们基本上采用了第一个开发者作为我们的首个彩色图标,仅仅是用闪电换掉了开发中手中的扳手。
尽管如此,我们的第一个彩色图标在可用性测试中获得了较差的结果。有如下评论:
- 雷和电
- 电的,看起来痛苦
-
被技术杀死的人
-
跳舞的机器
- 为什么Sun的开发者看起来像是暴眼的?
显然,我们需要抛弃该图标中的人物形象。因此在第二个彩色图标中,我们仅仅保留了闪电和齿轮。用户仍然抱怨雷电看起来像是闪电击中并摧毁了机器。我们最终决定放弃电流,最终用一个CD-ROM代表了开发的概念。在测试的过程中,齿轮工作良好,它被看成是工程和技术间的连接方式,尽管计算机显明地没有齿轮。Sometimes elements of obsolete technology can work well as a stereotype to communicate concepts in an icon.


This icon represents the concept of Products and Solutions. I personally liked the machine coming out of a box the best, but it had to be rejected because it only represented hardware and not software (nor, of course, the idea of solving problems for the customers and not just selling them products). Some users liked the man holding up a computer because "it says strength and power - I can do it for you." However, the icon was very busy with the large number of computers behind the person (of course, we hope to sell that much, but even so, icons should be **!). Nobody liked the guru and most of the people we asked liked the light bulb. One problem that was mentioned by a few users was that the man holding up the computer was indeed a man and not a woman, We briefly considered that we could use some mix of men and women if we had an icon family with people in most of the icons, but in the end the desire for simplicity resulted in icons with no humans in them. As you can see, all the versions of the color icon were essentially the same since the computer with a light bulb going on was easily recognized by all users as representing some combination of computers and bright ideas (the Sun solutions!). The light bulb did double duty as representing software (something on the screen) and solutions. The only changes to this icon were those necessitated by the changes in home page layout: first the icons were made slightly smaller and then they were made to look more like (slightly three-dimensional) buttons.


这一组图标代表了概念“产品和方案”。我个人最喜欢机器从箱子里面出来那副图,但是这张图被否决了,因为它只代表了硬件而不是软件(显然,也不能表示帮助客户解决问题而不仅仅是卖给他们产品这一观点)。
有的用户喜欢人举起电脑那张,因为“它代表了力量和动力我能够为你做这些。”但是,因为在人的背后有很多台电脑,所以这个图标非常嘈杂(尽管我们非常想卖出这些电脑,但是图标应该是简单的!)。没有人喜欢宗教智者那张。大部分喜欢发光的灯泡部分。小数用户提到的一个问题是,举起电脑的人是男性而不是女性。我们暂时认为我们需要使用混合的图像,如果我们要在图标上使人人形的话。但是,因为对简洁的追求,我们最终没有在图标上使用人物图像。
就像你所看到的,彩色图标的所有版本基本上都是一样的,一台电脑加上一个发光折灯泡。所有用户能够很容易地认为其代表了电脑和一些聪明观点的结合(Sun的解决方案!)。发光的灯泡同时代表了软件和解决方案。对图标的唯一修改是因为主页版面的规划:首先我们将图标设计得更小一些,另外,我们使它看起来更像是按钮(有些三维的感觉)。


This icon represents the concept of Sun on the Net. We initially had two different ideas: a talking server (telling you about itself) and world-wide communication. Most users thought that the world icons represented footballs (after a few failed attempts at color icons we finally recognized the ** truth that a world had to be round!). We rejected the overly anthropomorphic servers and chose a metaphoric style for our first color icon: a literal server serving information on a silver platter. Unfortunately, the users thought it was a pilgrim's hat. Also, of course, this literal interpretation of the word "server" would have failed international usability testing. We then combined the idea of a world with the idea of a speech bubble, but users thought it was a punctured balloon. The next two icons were attempts at a more literal globe, but users interpreted them as an astronaut in a space suit, an olive, and "a golfer trying to hack his way out of the rough." The final icon is simplified to the utmost - and it works.

这一图标代表了概念“网络上的Sun”。我们最初有两个不同的想法:一个说话的服务器(告诉你关于它自己是什么)和世界范围的沟通。大部分用户认为地图图标代表足球(经过几次失败的尝试之后,我们最终认识到一个事实:地球必须是圆的!)。
我们抛弃了过度的人-神同形的服务器,然后使用了一种隐喻的风格来设计我们的第一个彩色图标。我们使用文字的服务器在银色的盘子上显示信息。不幸的是,用户认为它是一个朝圣者的帽子。另外,显然,对“服务器”的文字解释会在国际化的可用性测试中失败。
接着,我们将地球和讲话泡泡两种想法结合起来。但是用户认为它是被刺穿的汽球。接下来的两个图标是更文字化的地球仪,但是用户将其解释成穿着宇航服的太空人、橄榄叶和一个试图砍平其道路的打高尔夫球的人。
最终的设计是最简单的。并且,它是有用的。
附件: 您所在的用户组无法下载或查看附件

  Do you know SoCool skin for Maxthon2? check here!

TOP

box这一贴,一定要顶,我一直找类似的东西~~
设计说话,用代码攻坚!

TOP

老大的帖子很经典`~~~顶`~学习中`~
我的博客,欢迎大家指教~http://hi.baidu.com/nangeyi_box
my DA:http://nangeyi.deviantart.com/

TOP

好帖~
一方面充实自己的设计思路
一方面可以当作武器去扫盲
http://hi.baidu.com/john_c_2008

TOP

好贴一定要

TOP

好贴!谢谢!

TOP

关注好帖。收藏下 。。。。

TOP

我,就icon盲一个!!!把我扫扫吧

TOP

发新话题
最近访问的版块