Recognizing Icons
Semiotics is Academic
You can read a lot about Semiotics and the study of icons. A lot of it is very academic and difficult to get through with high comprehension. But, it helps to understand some basics. Below is my reinterpretation and distillation of a lot of semiotics reading I’ve done through the years.
So, how do people recognize and identify icons?
Or, better put, what attributes of icons help distinguish one icon from another? Well there are a variety of attributes that play a role and the task of quickly recognizing the difference between icons. However, in order to aid the user in quickly making a decision, more than one attribute must stand out (and more than two is even better).
Here are the attributes:
- Size
- Location or relative position
- Rough Shape (a shape at low spatial frequency)
- Average Color range (spectrum region and intensity region; orange an umber are the same)
- Associated labels (yeah, this isn’t the icon, but this is important)
Now, remember more than one of these needs to be unique to help the user. So, for example, two icons that are 32 pixels, roughly round, in the blue spectrum, sitting next to each other on the desktop but with different labels are likely to be confused for each other. Simply moving one icon to the other side of the screen will improve user recognition by a large percentage. So, let’s dig into this just a little.
Size
This is an unfortunate attribute because many systems enforce uniformity in size. Sure, there’s some wiggle-room within the enforced size, but not likely enough for icons to distinguish themselves on size. For example, Microsoft Windows desktop enforces 48 pixels as the standard size. Two blue round icons, one using all 48 pixels and the other using only 32 are still going to be confused.
Location or Relative Position
The position on the screen, or relative to other screen elements is a key factor for recognition. But, like in Fitts’ Law, the farther the icons are from each other, the more this attribute plays a role. In 2009, I was conducting user research and found a few frustrated users when Windows moved the icon they were looking for on the desktop.
Rough Shape
By “rough” we mean a shape in general terms. If you were to blur the icon, what resulting shape would remain? Or, if you put it through a high-pass filter, sharpening edges and removing subtlety, what shape remains? The more distinct the shape, the quicker users are to decide which icon they want.
Average Color Range
Any bitmap image can be reduced to average color. In fact, Photoshop includes a filter to determine the average color of an area or the entire image. This average color should fall within one of the six basic colors (3 primary, 3 secondary). Yeah, six colors isn’t a lot, but that’s the human brain at work. It tries to sort things quickly and average color in the six basic colors is one of the ways this happens. Light blue, dark blue, violet and teal will all fall in the same category.
Associated Labels
Sure, it can be argued that labels are technically part of the icon, but they can help humans make quicker decisions. In essence, once the label is read, the shape of the text becomes its own icon. Repeat use of icons means that the text will contribute to the overall shape of the icon in the user’s vision and make deciding quicker. It also helps users initially understand the icon’s meaning and purpose.
Making a difference
If icons are different on all five of the above attributes, users will be able to instantly (well, close enough to instant) tell the difference and make a decision. The fewer attributes that are distinct, the longer it takes for a user to make a decision and the more likely it is for a user to make the wrong decision. So, when assigning meaning to icons, make sure there are several of these attributes making the icons distinct.