9 Rules to Make Your Icons Clear and Intuitive

by on 10/31/11 at 9:09 am

Have you ever looked at an icon and struggled to figure out what it meant? Users do this all the time with icons they’re not familiar with. And there are only a small set of icons that users are universally familiar with. This is why when you use icons in your designs it’s important to make them clear and intuitive. Here are a few solid rules to follow so that your icons don’t leave users scratching their heads.

1. Always Label Your Icons, Unless Space is Limited

Unless the icons you’re using are universally recognized (i.e. play, print, close, help), you should always label them. The one other exception is if you simply don’t have enough space to add labels. This can happen when you have a large set of icons together, or when the control area is in a confined space such as on a mobile display. When this is the case, use tooltips to show users the labels on mouse hover. But if your icon is on a mobile display, there is no hover so you really can’t use tooltips. This is why icon intuitiveness on mobile displays is so important.

9 Rules to Make Your Icons Clear and IntuitiveNo space for labels with multiple icons packed together. Tooltips help clear up confusion.

2. Always Represent Both the Icon Action and Object

To make your icon as intuitive as possible, always make sure that your icon represents both the action and object. First, you’ll need to pick a concrete object for the icon that most users can easily recognize. Then, you’ll need to design the object in a way that illustrates the icon’s action. A clever example of this is the image of a paper airplane for sending email. You have the paper that represents the email and the paper folded in the shape of an airplane that represents the act of sending.

9 Rules to Make Your Icons Clear and IntuitivePaper airplane icon shows a clear action and object.

3. Always Group Similar Icons Together

Icons that function similarly belong together. This way users can quickly and easily find all the options they need to complete their task. When icons are grouped, it’s difficult to label them individually lack due to the lack of space. But when you group similar icons together you can label each group to make their functions clearer. This not only makes groups of icons easier to scan, but it helps users understand the general function of all the different icons by sets instead of one by one.

9 Rules to Make Your Icons Clear and IntuitiveIcons that share a similar function are labeled and grouped together.

4. Always Keep the Icon Order and Placement Consistent

Users don’t just rely on how an icon looks to understand its function. They also rely on the icon order and placement. One study found that it’s easy for users to adapt to a change in icon appearance, but far harder for them to adapt to a change in icon location. Their results suggest that the “location of the icon is more important than the visual imagery. People remember where things are, not what they look like” [1]. A change in icon location could make the user’s head spin. So find an ideal place for your icons and keep them there even when you redesign your interface.

9 Rules to Make Your Icons Clear and IntuitiveIcon order and placement stay consistent despite design changes.

5. Always Give Your Icons a Common Visual Motif

Icons that share a common visual motif look and feel more together. If you have a set of icons on your interface that share a common visual motif, users can easily tell which icons are a family and which ones aren’t by the colors and styles they share. This helps them intuitively figure out which icons behave similarly. When you find a common visual motif for a set of icons, it’s important that you keep the motif consistent at every level.

An example of visual motif inconsistency is the strikethrough icon for text editors. Most editors represent the bold icon with a bolded ‘B’, the italics icon with an italicized ‘I’ and the underline icon with an underlined ‘U’. But the mistake that they make with the strikethrough icon is that they use a strikethrough on the letters ‘ABC’ instead of the letter ‘S’. This is visually inconsistent with the other text editing options and can confuse users. In fact, one study found that 100% of the users they tested understood the bold, italics and underline icons, but only 54.55% understood the strikethrough icon [2]. That difference is huge for a slight visual motif inconsistency.

9 Rules to Make Your Icons Clear and IntuitiveThe other icons follow a consistent visual motif. But the strikethrough icon breaks it by not using the letter ‘S’.

6. Avoid Using Icons for Abstract Actions

It’s better to use icons for concrete actions than abstract ones because with concrete actions you have clear objects to work with that similarly represent an action. With abstract actions you have to go out of your way to think of an object that is commonly associated with an action. When you finally think of one, you still run the risk of users interpreting it differently.

In the same study, they found that more than half of the users they tested didn’t understand the icons for ‘undo’ and ‘redo’ [2]. These abstract actions were represented with an arrow pointing to the left and right. These arrows can easily have multiple meanings to any user as they are commonly used for different actions on interfaces. Instead of just using arrows in this situation, it would have been better to use the ‘undo’ and ‘redo’ abbreviations ‘Un’ and ‘Re’ with a small arrow pointing back and forward. Arrows by themselves can have multiple meanings. But if you add a unique element that resembles the action, you’ll make the icon clear and intuitive.

9 Rules to Make Your Icons Clear and IntuitiveArrows alone can have multiple meanings. Adding ‘Un’ and ‘Re’ to them makes users think of the specific action.

7. Avoid Using Icon Images That are Too Metaphoric

There’s often a tendency to use metaphoric imagery on icons when images visually similar to an action aren’t obtainable. However, this can sometimes backfire if the metaphoric image isn’t closely associated with the action it represents. Using an image of scissors to represent the action ‘cut’ is easy to understand because most people associate scissors with cutting things. However, using an image of a chain link to represent hypertext linking is not as easy to understand because most people have not closely associated the two. The same study found that 64.71% of the users they tested did not understand the chain icon for hypertext linking [2].

Perhaps a better image choice for hypertext linking is one that follows the visual motif of the bold, italics and underline icons that 100% of the users understood in the study. The letter ‘L’ in the hypertext link style is an image that represents both the icon action and function. Naturally, the letter ‘L’ stands for linking. And to represent the function, the ‘L’ would look blue and have an underline. The underline icon also has an underline in it. But what distinguishes the link icon from that one is its blue color and unique letter. You can even make the underline in the link icon a pixel thicker to make it more distinct. This new approach to the link icon is clear, intuitive and miles away from using the image of a chain link.

9 Rules to Make Your Icons Clear and IntuitivePeople don’t associate a chain link with a web link. But they do associate the color blue and an underline with a web link.

8. Avoid Giving Your Icons Too Much Specific Detail

Most designers want their icons to look pretty. But some designers go overboard and give their icons too much specific detail. Sometimes it’s so specific that it looks more like a photo than an icon. If the icon looks too specific it can prevent users from understanding the icon’s general meaning. One article compares an image of a house in various levels of detail for the ‘home’ icon. When the house has too much detail, it starts to look like a photo of a specific house down the street. But when the house only displays the key characteristics that form the general concept of a house (i.e. roof, chimney, door), the house starts to look more like a ‘home’ icon [3]. A balance in detail is important in making your icons clear and intuitive. When you’re using a concrete object for your icon, only pick out the few common characteristics that all other objects like that share and omit the rest.

9 Rules to Make Your Icons Clear and IntuitiveRooftop, chimney and door are the only characteristics needed to tell users that the icon means ‘home’.

9. Avoid Using 3D Perspectives and Heavy Drop Shadows on Small Icons

Using 3D perspectives and heavy drop shadows on your icons can make them compelling, realistic and enhance visual communication. However, using them on small icons can make them muddy and confusing.

3D perspectives are best used on large or medium-sized icons because users can still interpret their perspective. However, when the icon is scaled to a small size, the accuracy of the perspective starts to fade away, and users find themselves looking at the icon at an unfamiliar angle. With small icons, use a flat, straight-on perspective so that users can recognize the icon through its distinct shape.

Heavy drop shadows on small icons can also confuse users. When your drop shadow is too heavy, it can make your icons unrealistic and murky. If your icon needs a shadow, reduce its size and make it tight. This way the shadow will slightly enhance the icon instead of interfering with its outlines and shape.

9 Rules to Make Your Icons Clear and IntuitiveAt small sizes, 3D perspectives and drop shadows make icons look less beautiful and confusing.

Make Your Icons Clear With These Rules

There are many benefits to using icons on your user interface. One big benefit is how they conserve the space of your controls. Another benefit is how they can make your controls more understandable across cultures. Most of all, icons can make your interface actions easier to learn and find. But your users won’t experience any of these benefits if your icons aren’t clear and intuitive. The first step in making your icons clear and intuitive is to know and follow these nine rules. The last step is to know when to break them.

References

[1] Orbitz Can’t Get A Date

[2] Usability in Icons

[3] Realism in UI Design


9 Rules to Make Your Icons Clear and Intuitive 9 Rules to Make Your Icons Clear and Intuitive

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

16 Responses to “9 Rules to Make Your Icons Clear and Intuitive”

  1. Egypt Urnash

    Oct 31st, 2011

    Hmm, I think the patternbreak on the strikethrough icon is a matter of keyboard shortcuts. To wit:

    Option-I – italic
    Option-B – bold
    Option-U – underline

    Option-S – save

    (Or ctrl if you’re on Windows, I would imagine.)

    Having a big S there would make you want to hit Option-S and possibly have the save dialogue pop up, surprising you.

    Which also, in your wonderful idea of “blue underlined letter for hyperlink” – sooo much better than the chain – suggests that the proper letter is only L for “link” if the key command is *also* Option-L. If it’s, say, Option-K then it should be a blue underlined K, to make the UI that tiny bit more self-documenting.

    • Gregory McClendon

      Nov 1st, 2011

      A little surprised (and not sure I buy) that people don’t associate the chain link with hyperlink. While I agree the metaphorical paradigm is flawed (and the chain link is a bad icon). This particular example has fallen into the world of convention (I personally would stare at an underlined blue L and wonder what the heck it does). Microsoft office is awfully dominant software and they have been using the chain for ages.

      • Greg

        Nov 2nd, 2011

        I don’t think I could have put it better myself. Convention is a hard thing to break people of.

      • anthony

        Nov 2nd, 2011

        I disagree. I don’t think you can objectively judge the icon from your perspective because you’re more technically savvy than a typical user. You pay attention to the details of the UI more because you’re a designer. A typical user doesn’t. They just want to do their task. Many designers make the mistake of thinking “It’s clear to me, so it must be clear to users”. But I’m afraid that’s the wrong approach. You are not your user. Which is why the test results of the study (which is fairly recent, May 2011) show that most users (64.71%) still don’t get chain link icons.

        • Dee

          Dec 1st, 2011

          I disagree. I am your typical user (not a designer) and I instantly associated the chain link with a hyperlink. Because Gmail has it and so does WordPress (two things I use frequently). Word uses it, too (the globe with the chain link).

          When I looked at the blue underlined L, I was confused as hell.

          • Abigail Hamilton

            Dec 16th, 2013

            Agree: The Underlined blue L could mean text styling, etc etc. ANother pile-on for the link, a convention we all know and recognize.

          • Jeremy

            Apr 10th, 2014

            Dee, do you disagree that 65% of users tested didn’t get it? It’s irrelevant that you understood it because you cannot represent the typical user. Just because you aren’t a designer doesn’t make you a typical user. You can only represent yourself. The “typical user” is actually an archetype of the audience of users. You are one piece of that, not the whole.

  2. Ivan Nikolić

    Nov 1st, 2011

    I don’t know if the “underline and blue color” is the right choice for specifying links. What if you can’t use colors in your icons (you use only grayscale or one color icons)? Also, some people could make mistake and think that that icons purpose is to underline selected text.

  3. Greg

    Nov 2nd, 2011

    I think almost all of the icon improvements are definite improvements, however I would have thought Undo and Redo were harder to understand than Un and Re? Some people may read Re with an arrow as Reply rather than Redo, without taking the direction of the arrow into account. Also why not add a couple of letters ‘do’ to the end and hey presto no more ambiguity…

    • anthony

      Nov 2nd, 2011

      You can’t judge an icon in isolation from its context. The context of the interface also plays a role in communicating what the icon does. For example, if I’m using a photo-taking application and I see the icon of a camera. I’m going to intuitively know that the camera icon is for taking pictures because of the nature of the app.

      Many people are familiar with ‘undo’ and ‘redo’ in the context of text editing programs. The ‘do’ at the end is not needed. Plus, there are sizing issues when you try to fit an entire word inside an icon. Your icons won’t look uniform in size. If you try to make it uniform, you’ll have to shrink the text considerably to make it fit with the arrow and match the other icon sizes. At that point, the text is hardly readable anymore.

      • James

        Jul 3rd, 2012

        The icons work better for localization as well. Un and Re are English BTW. To be honest, there was a time (not sure if you still can or not but Apple application on the Mac would give you a choice of icon only, text only or combo and I thought the actual word was the clearest.

  4. twri

    Nov 2nd, 2011

    What do you think of the Apple Siri icon?

    The microphone does say that you are supposed to say things but does not imply its use as a “voice assistant”.

    • anthony

      Nov 2nd, 2011

      Actually, it is implied by its simple use of the microphone glyph.

  5. Benoit Meunier

    Nov 17th, 2011

    If in a meeting, you want to add an icon in the interface and there’s nothing clear that comes to mind in less than 0.5 seconds, don’t add the icon.

    Nothing is cleared and easy to use than text.

  6. Krishna Kiran

    May 7th, 2012

    Thanks for the knowledge buddy.. Surely learnt something in using Icons.. I don’t think hover text for every icon and logo is important.. Even then.. specifying it for the visitors sake is best.. Thanks alot buddy!

  7. Ashdeekonda

    Apr 6th, 2014

    That was a really great knowledge burst. But i have followed this article deeper and researched the references u have to attached. There was a comment in the usability(Stiern) article asking why do they use that regular power button with a circle and a stripe in the middle. So i asked many of my friends and none could answer. so if anyone can answer this?

    Link to the power buttoon : http://findicons.com/search/power

    P.S. I know why..

Leave a Comment