Buttons

9 Guidelines for Clear and Intuitive Icons

Have you ever struggled to figure out what an icon meant? Users do this all the time with icons they’re not familiar with. That’s why it’s important to make your icons clear and intuitive. Here are a few guidelines to follow so that you don’t leave users scratching their heads.

1. 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.

No space for labels with multiple icons packed together. Tooltips help clear up confusion.

2. 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.

Paper airplane icon shows a clear action and object.

3. 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 the icons easier to scan, but it helps users understand the function of all the icons by sets instead of one by one.

Icons that share a similar function are labeled and grouped together.

4. 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”. 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.

Icon order and placement stay consistent despite design changes.

5. Give Your Icons a Common Visual Motif

Icons that share a common visual motif look and feel more together. Users can tell which icons are a family and which ones aren’t by the styles they share. This helps them figure out which icon actions function in a similar way. When you find a visual motif, it’s important that you keep it 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. That difference is huge for a slight visual motif inconsistency.

The 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’. 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.

Arrows 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 there are no concrete images to represent an action. This can sometimes backfire if the metaphoric image doesn’t associate well 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. But most do not associate a chain link with hypertext linking. The same study found that 64.71% of the users they tested did not understand the chain icon for hypertext linking.

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. The letter ‘L’ stands for linking. It would also look blue and have an underline.

The icon for underlining text also has an underline in it, but uses the letter ‘U’. What distinguishes the link icon from the underlining text 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.

Users didn’t associate a chain link with hypertext linking. But they do associate the color blue and an underline with it.

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.

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 all objects like that share and omit the rest.

Rooftop, chimney and door are the only characteristics needed to tell users that the icon means ‘home’.

9. Avoid Using 3D Perspectives on Smaller 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. When the icon is scaled to a small size, the accuracy of the perspective starts to fade because users look 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.

At small sizes, 3D perspectives and drop shadows make icons look less beautiful and confusing.

The Benefit of Icons

There are many benefits to using icons on your user interface. They conserve the space of your controls and make them understandable across cultures. But most of all, icons make your interface actions easier to find. Users won’t experience any of these benefits if your icons aren’t clear and intuitive. These nine guidelines are important in knowing how to design and display your icons. Let them guide you, but don’t let them confine you.


Book

Affiliate

elegant wordpress themes

This Post Has 21 Comments

  1. Egypt Urnash Reply

    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 Reply

      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 Reply

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

      • anthony Reply

        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 Reply

          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

            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

            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ć Reply

    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 Reply

    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 Reply

      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 Reply

        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.

        • Maxim Reply

          That’s what I thought too, right away. You can localize a label for icon, but you can’t localize a textual icon. Namely examples with “Un” and “Re” as part of the icon. Underlined U and L are a bit confusing too, since the difference is language specific and color could be confused with button state, depending on particular interface. B, U, I, S are arguably less confusing, since they are grouped and are mostly about evident text decoration, not letters themselves.

          Otherwise, the article is a good read. Thank you.

  4. twri Reply

    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”.

  5. Benoit Meunier Reply

    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 Reply

    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 Reply

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

  8. JG Reply

    “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 ”

    Sorry but flat, monotone icons do NOT say “click me”. They look like the most boring of company logos – a visual statement but not a link to something.
    The house with the red door is still simple but looks “active”.

  9. CW Reply

    This list is missing possibly the most important rule: Follow convention. If there is standard icon for something, its invariably better than what you make up. This is why your link icon is terrible – its still potentially confusing and loses the potential recognition that the chain has.

    • anthony Reply

      I can’t verify that my icon is clearer to users, but I can verify that the chain icon was confusing to users in the research study. So your rule of always “follow convention” (which is not even a rule, more like a general sentiment) fails. What you should do is follow conventions that have a history of working, not just follow conventions for the sake of it.

      • CW Reply

        I take your point, and I’m not trying to say that you should follow convention no matter what. I’m just pointing out that convention gives such an advantage that is often the right choice. A lot of the time you will choose an icon primarily because it is the standard, even if their is a more intuitive option (hamburger menu, overflow menu, save floppy, linked dot share, cog settings etc.). I think at the least convention is important enough to make the list.

Leave a Reply to anthony Cancel reply

Your email address will not be published. Required fields are marked *