Comments on Icon Analysis

Andres Zapata — Fri, 26 Jan 2007 14:53:05 GMT

Wow. This is very good! Although, I am sad to find out that my squint test is no good :-) So, making good icons is very important. Granted. But I can’t help to think about if graphic designers shouldn’t take this article and substitute the word “icon” for “billboard” or “print add” or “TV commercial” or… er… well, you get the idea. Good work.

Michael Andrews — Fri, 26 Jan 2007 14:53:05 GMT

Matt, thanks for your detailed response. You asked why 20 icons might be necessary. I agree for navigation purposes one could partition along the lines you suggest. But it is common to have many icons even on tool bars. I must have 25 on my browser, with just one add-in to the browser’s main navigation.

What is very common as well is the use of icons in rows of data, especially in enterprise applications. Think about icons in a list of emails, where you can delete or forward an item from the list. It saves space to show an icon only. But the number of icons is not limited to a small sub-set. I think SAP have over 200 icons available for use, but the distinctions between them are minute, and it must be a burden to learn what they represent if there are too many.

I agree with your point about the visual form of text presenting similar issues, but would speculate that the peripheral recognition of text is superior than for icons, simply because we are so familiar with letters and their combinations we can “fill-in” meaning more easily than with a idiosyncratic icon.

Matt Queen — Fri, 26 Jan 2007 14:53:04 GMT

Yes I agree Rex. The current state of knowledge in neuroscience and cognition supports the mix of top down (recognizing/identifying) and bottom up (sensing/describing). Following the discussion into icons and signs, you could look up the works of Joan Peeck, “The Role of Illustrations in Processing and Remembering Illustrated Text” and Robert B. Kozma’s “Learning With Media.” I think those are good references for looking at icons and illustrations. They aren’t neuroscience so you won’t find any discussion of retinal architecture but they are chalk full of wisdom about how users learn and absorb information from media. As for research specific to icons and spatial frequency – as far as I know – you just read it! If others have found articles of this nature post them: I’d be interested.

Rex Chung — Fri, 26 Jan 2007 14:53:04 GMT

Great stuff! One of the best article I’ve read in a while.
This type of research strengthens the theory of how the brain works from ‘On intelligence’ by Jeff Hawkins that I’ve been reading. He suggests that our brain make predictions and process information at the same time. In this case, our brain makes a prediction of what the icon is from the blurry details received and from our own memory.

I’m interested to know if there’s research with familliar icons/signs together with spatial frequency. I think what the user already knows add a big difference to recognition, e.g. red and ’!’ usually means warning, danger. The common shape of ‘arrow’, ‘home’ and ‘refresh’ icons are already in our memory. I’ve personally experienced the difference it makes when Yahoo decided to flip the icons horizontally, even though the elements in the icon was the same, I just couldnt recognise it. E.g. if we put the chimney of the house icon to the left side, it just doesn’t look right.

Matt Queen — Fri, 26 Jan 2007 14:53:04 GMT

I’m not sure whether designers rely too much on icons though I know they are a popular way to represent actions (cut/paste) and categories (media file vs. word document) – which requires care (ex. “is this icon on the web an action or a category, or both?”).
The necessity of having 20 visually unique and distinguishable icons sounds like quite a design problem … the main problem being, “why is that a necessity?” Suppose we cut this 20 to 15 and partition them out. For example we have a web application that has 3 modes while each mode has a toolbar holding 5 icons. The user only sees 5 icons in the toolbar at time and we will decide that icons appearing in menus are preclassified differently in the mind of the user than icons that persist in the UI. The point isn’t that a user can distinguish between a low frequency representation of an icon in the first toolset and the second. The point is that they can easily distinguish between the currently available tools (then we leave the problems arising from modal issues to another type of analysis). Finally, suppose we would rather not rely on icons (after all they can be expensive) and opt for well thought out labels in our UI. Believe it or not, labels have low frequency components as well! The large letter forms of capitols, risers, and descenders (ex. “X”, “t”, “g”) coupled with the amount of kerning and line space contributes to the recognition of labels. We use the P channel (specifically, “detailed shape”) to read the labels yet rely on low frequency components to aide the identification of a word. Some reading research suggests that we actually don’t “read” all the letters in a word. Rather, we recognize a word by its large distinguishing visual features. We could argue that large visually distinguishing features are low frequency components. Does this make sense (perhaps improve the usefulness of this technique for you at all?).

Michael Andrews — Fri, 08 Jun 2007 09:09:36 GMT

I’ll be brave and admit I don’t understand everything here—the prose is clear, but my brain is small.

My gut impression is that designers rely too much on icons. They seem difficult to distinguish the more graphically elaborate and three-dimensional they become. The greater the number of distinctions icons try to make, they less successful they convey these distinctions, especially when viewed in the M-channel.

Seems it is difficult to provide sufficient discrimination when there are numerous icons. I don’t have a sense of how many different unique low frequency icons are possible to display at once. Could one have 20 icons that would all have sufficiently unique frequencies so that users could tell each any pair of them apart?

Matt Queen — Fri, 26 Jan 2007 14:53:03 GMT

I just mentioned in an email to Dustin Hamilton that he hit the nail on the head, distance filtering of icons is an evaluative technique—not a design technique. My knee-jerk reaction of how to coerce this method into a design tool is to create a plug-in for Photoshop or GIMP (preferably) that would allow an auto-updated window of the design space filtered at set distances. That way all design decisions (small and large) could be made in the context of the filtered frequency views. I imagine there is someone out there with enough talent and time to create such a tool. It seems like it would be useful.

Dustin Hamilton — Fri, 26 Jan 2007 14:53:03 GMT

Great work here; I’d really like to see more things of this nature… specifically how to actually design icons which will bring out the necessary differences for quick identification.

I work on in-vehicle navigation systems and we’re definately more than attune to the ‘driving condition’ where the system needs to be usable to a point, but with as little distraction as possible. (Honestly much of our particular interface is disabled while driving, but what is functional is primarily large icons with supporting short-text.)

I’m really thankful for this kind of work being done.

Matt Queen — Fri, 26 Jan 2007 14:53:03 GMT

Glad to see this is such a hit! I’m glad it promises to be useful for folks. As for answers to the growing list of questions:
About using color to lead the eye … using color is referred to as “creating a feature based search” (the feature being color, yet it could be – say, shape [find the triangle amidst the cluster of circles]). However, using color only provides a purposeful difference in the P channel because the M channel is luminance only. That is why unique low spatial frequencies help. They act to provide purposeful differences in the dual pathways of a users visual system. Also, though a sub population of users might be color blind, a better reason to provide low spatial frequency differences as well as color differences is that we actually don’t see in color in peripheral vision! I know this sounds crazy but try this: open a document up in your favorite text editor. Choose a document that has a full page of text. Then, select a word close to the top left of the page and change the color of the word letters (try blue and red for example). Now, center your focus on a word toward the middle or bottom right of the page. Can you see the color of the word? Probably not. In fact you can play around to see exactly where you can’t see the color anymore in terms of how close you place your focal point. Now imagine your user using the application, while they are in the context of reviewing content, categorizing tags, and whatnot – could they “see” the color differences?

About the non standard icon sizes and visual angle equation … I found this site by googling “size-distance-invariance equation,”

http://retina.anatomy.upenn.edu/~bart/scriptie.html

scroll to the passage that begins with, “Later theories of perception yield the well-known size-distance-invariance hypothesis.” That website uses the same Gilinsky article I pulled the equation from yet makes some elaborations for smaller visual angle sizes (either far away from icon or icon is really small).

Spacing in icon discrimination trials … Here is where things get sticky. The display I used provides enough space to require the user to shift their eyes to view the stimulus, match, and distracter images (that is at least 2 fixation points assuming that the user is sure the first image and second image are the same). I wanted the user to hold the image in a visual buffer for a split second and compare an image to the buffer to truly examine the uniqueness of the spatial frequency component. There are some issues with this approach. Someone might argue that low frequency information is not held as well in the visual iconic store (look at something really bright, then close your eyes and watch it fade away from the visual iconic store). Is that splitting hairs, being too anal? I don’t know. Yet, there are far more pressing issues that preclude this experimental setup from being rigorously academic – namely, there is no objective way to measure the distinctness of a visual pattern design (I just heard all the designers cheer, and I kind of cheered myself just then). Although, If a brave soul is interested, I have some ideas of how you might get around that and fit this together for something more scientific (has do with krigging coefficients … I do love a teaser).

Anyhow, I’ll answer any and all questions and I’m glad you folks find this useful. Have fun.

Janna Cameron — Fri, 26 Jan 2007 14:53:03 GMT

This is great! I have some unique icons sizes that I would like to use this for. Could you provide the equation you used to calculate the radius?

Also, do you have any suggestions for how the icons should be spaced in the trial file? If the icons are close together in reality, should they be close together in the trial file (which would possibly blur them together)?

Derrick Bates — Fri, 26 Jan 2007 14:53:03 GMT

I really enjoyed the article, particularly the science behind the visual perception of pattern and shape. I have found that I can walk along a library shelf at normal speed and yet still pick out Louis L’Amour or even something that is close to that. I also agree with Igor’s comment about colour but would caution that there are huge numbers of people who are colour blind and would therefore rely on the work having been done to satisfy both the P and M channels. Great stuff!

Putcha V. Narasimham — Tue, 06 Feb 2007 15:35:34 GMT

I have studied Image Processing and used filtering conceptually. It is inspiring to see practical application of such significance explained so clearly.

The explanation of “M and P Pathways”, the use of the “Box Plots” the reasoning, and conclusion are all exemplary—of presenting the complex subject lucidly and also of the method to do so for any complex subject.

Igor Asselbergs — Fri, 26 Jan 2007 14:53:03 GMT

Great piece. I love the analysis of M versus P channels.

But I would add a ‘third dimension’. This is illustrated in figure 1: the red icon on the right is clear to see. But not because of either the M or P channel. It’s clear to see because it’s red and the other icons aren’t. Color is a great way to ‘lead’ the eye even before the M or P channels kick in.
I myself recently designed some icons for a image editor. In the design, the selecting tools are distiguished from other tools by giving them a green overall cast. They are easy to distinghuish because their color is different, not because of their shape or details. Colors work primarily in the overall view of the whole design. You can’t attribute it’s effect to a single icon only.

Donna Maurer — Fri, 26 Jan 2007 14:53:03 GMT

Holy cow. This is amazing!!!!!

Austin Govella — Fri, 26 Jan 2007 14:53:02 GMT

This kicks ass. I don’t have any better words.

Very technical, but now we can evaluate the usability of our icons. Sweet!