Icon usability testing was conducted with two different methods during the design process for Sun Microsystem's early website:
- 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 interface 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 interface as a whole (where it would typically be displayed with a label).
Our initial studies were done with simple sketched icons in black-and-white ink on paper. 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.
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.
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 simple!). 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.
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 simple 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.
(For more information on improving individual web page design elements, see our full-day training course Web Page UX Design: Optimizing Pages to Deliver on Business Goals.)
