Comments on: Icon Analysis

By: austingovella

austingovella — Wed, 30 Nov -0001 00:00:00 +0000

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

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

By: donnamaurer

donnamaurer — Wed, 30 Nov -0001 00:00:00 +0000

Holy cow. This is amazing!!!!!

By: kodia

kodia — Wed, 30 Nov -0001 00:00:00 +0000

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.

By: putchavn

putchavn — Wed, 30 Nov -0001 00:00:00 +0000

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.

By: jannacameron

jannacameron — Wed, 30 Nov -0001 00:00:00 +0000

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)?

By: dustinh

dustinh — Wed, 30 Nov -0001 00:00:00 +0000

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.

By: mqueen

mqueen — Wed, 30 Nov -0001 00:00:00 +0000

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.

By: michael_andrews

michael_andrews — Wed, 30 Nov -0001 00:00:00 +0000

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?

By: mqueen

mqueen — Wed, 30 Nov -0001 00:00:00 +0000

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?).

By: mancjew

mancjew — Wed, 30 Nov -0001 00:00:00 +0000

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.