2012_08_07_featured Design

How and Why Icons Improve Your Web Design

This is a guest post by our friend Nikolaj Mertz

In our everyday life there are icons everywhere. You can find them on any interface, road sign, keyboard, you name it. Icons help us to better understand and interpret information. Not only offline, but also online can icons help us to support content. Therefore it is important to understand how and why to use them.

Let’s take a look at why you should include icons in your web design and how to do it most effectively.

Icons support your content

Normally we don’t have problems to differentiate between a good looking web design and a bad looking one. Yet, it can be hard to tell why one is better than the other. Sometimes, the devil is in the detail.

When we look at the content of a website, it’s all about readability. How well can people grasp the main points and how easily can they read and process information. Icons can help in several ways to support your content presentation:

  1. Icons can put content in a nutshell
  2. Icons can draw attention
  3. Icons can increase readability

Let’s dig a little deeper into each point.

1. Icons can put content in a nutshell

With icons you can quickly sum up what your text is about. Sometimes, icons can even be enough to communicate content, which makes reading additional text unnecessary. A great approach to relevant icons are metaphors. In my opinion one of the most important things about icons is that you choose metaphors people can relate to, like a cart or an old fashioned letter.

If you do not think a small icon says enough about your content, you can go into more detail and use small images or screenshots. UserVoice is a nice example of how to make a point more clear by accompanying text with icons and screenshots.


UserVoice uses both icons and screenshots to support their content.

2. Icons can draw attention

Pictures are worth a thousand words. So are icons. Websites without icons and pictures can be quite boring. Imagine a newspaper without any images. Besides catchy headlines, images draw our attention to certain content, right? That’s why we tend to read those articles first that show an appealing featured image.Therefore it’s important to integrate icons and images, or other visuals into your design.

Icons can draw attention, but at the same time they can help you structure content and separate different functions or services. For example, SEOMOZ separates different categories using different icons, instead of plain, boring text.


SEOMOZ uses icons to separate different content categories.

Another example that I’d like to reference here is Lomax, the Danish company that I work for. We also use product icons as indicators for specific content or just to draw attention to either text or links:


Lomax use icons to draw attention to both content and links.

Sometimes websites use the same or similar icons in different places. For instance, we use two different shopping cart icons on different places on one page. Both these icons are related to buying items, but still they have different functions. Their functions become clear through their position and the text that comes with each icon.

At this point, the proximity principle becomes interesting, which “calls for related items to be grouped visually, creating less clutter and making for a more organized layout. Items unrelated to each other should be placed further apart, to emphasize their lack of relationship.”

So, when a cart-icon is for example placed close to prices, or product pictures, we perceive these elements as a unit. That’s why we trust the one icon to add the product to our cart. The other cart-icon is placed more distant to the products and closer to the general navigation, which is why we expect it to bring us to the cart overview page.

When you work with the proximity principle, make sure your icons have a consistent size and margin. If you embed them without a consistency, you will risk your design to look misplaced and messy. I’ll go into more details about combining text and icons later in this article.

3. Icons can increase readability

Lists can increase the readability of your content. However, standard bullets can be quite boring. Instead of using standard bullets, you can you can use engaging icons to draw attention to paragraphs and other blocks of content. Just don’t overdo it. Too many bullet lists can also become confusing and counterproductive regarding the readability.


Conversion Rate Experts use checkmarks for more readability

Conversion Rate Experts use checkmarks as bullets. Not only does this look very clean, checkmarks also come with positive associations, such as “availability”, or “correctness”.

Icons are easier to both recognize and to remember than bullets. While bullets are all the same, icons are much more characteristic and as that recognizable. Also it’s much easier to separate different blocks of text from one another.


Mergeweb.com use icons to draw attention to their different services.

Very few icons can stand alone

It can be very hard for inexperienced web users to understand and distinguish between different icons. Peter Steen Høgenhaug ran a study where the test participants were shown several icons. Most participants were not able to tell a difference between the icons and even had difficulties to understand them.

What was meant to be simple and intuitive actually wasn’t that easy to understand. To me, who works with UX, it might be obvious what the different icons mean, but as you can see in these results not everybody understand them.

A solution to this problem could be to combine icons with test. This way, people can read the text to help them understand to the icon. At later occasions, it might be enough to show the icon without text. As mentioned earlier, when combining icons and text, it is important to consider the proximity principle.

Comparison of Facebook with and without icons

In order to make my points more clear, I would like to show you how different Facebook would look if all icons were removed. Do you think it looks more or less clear, interesting, appealing without icons?


Facebook as we know it.


A hypothetical Facebook page without any icons.

While some icons are complementary, others are crucial to some of the functionalities on the site. This means, by removing some of Facebook’s icons, you also remove their functionality. For example the icons on the right hand side of the logo are only integrated as icons. Assumably because there is no space for text links.

Conclusion

Icons play a vital role in web design. Even though they can be quite small and might seem redundant, they play many different roles. Icons can be a great way to bring essential content to the point. They are a great attention grabber and they help your website visitors to find and scan content.

When you use icons for your own design, make sure you base them on metaphors that people understand, or introduce them together with more descriptive text. When you place icons on your site, keep the proximity principle in mind and group them with content they relate to. Don’t forget to define consistent sizes and margins to keep your design clean.


Nikolaj is online merchant at the Danish company Lomax selling office supplies. He has been working with e-commerce and UX since 2006. Main interests are the customer lifecycle, personalization of web content and of cause online marketing in general.

16 comments

  1. Mads Ingo Nielsen

    Great article! And good inputs on how to use icons, a simple, yet complex thing!!!

  2. AnnaBelle

    It is very interesting article. If you want to see more icons look here http://www.ajaxline.com/Dribbble-Inspiration-iOS-App-Icons

  3. Nikolaj Mertz

    Hi Mads,
    Thanks for your very positive feedback!
    Best regards
    Nikolaj

  4. Nikolaj Mertz

    Hi AnnaBelle,
    Thanks a lot. That’s some nice icons too.
    //Nikolaj

  5. Digicool - Web Designer Kent

    Hi Nikolaj,

    Wonderful post. Icons are great for useability and can really help to improve on-page navigation for users.

    Best wishes, Alex

  6. Nikolaj Mertz

    Thanks for your feedback. I totally agree that icons are great for usability – many use them, but there are a lot of people who doesn’t really get why they are important to use.

  7. Steve Green

    Whilst I agree with the general principles of the article I think that the Facebook example undermines the argument.

    To me the version of Facebook without the icons is massively more usable than the version with icons. Maybe it is poor icon design, maybe it is because there are too many icons, maybe it’s the lack of whitespace when the icons are present. In my view Facebook is a UX disaster, and the icons exacerbate the problems.

  8. Nikolaj Mertz

    Hi Steve,

    Thanks for your comment.
    I get your point, but I’m not sure i agree. I think you use the icons as a visual shortcut. When you see a calender-icon, then you con’t need to read the accompanying text. Now you know that the calender-icon and “Events”. In my opinion it’s also very boring without the icons.

    Can you see what I mean?

    Best regards
    Nikolaj

  9. Bram Berkhout

    Hey Nikolaj,

    Thanks for your interesting article. I do think the visual design of the icons being used is very, very important. I’ve seen a lot of amateur and ugly icons which doesn’t help the usability/credibility of a website.

    Nevertheless; here’s how you example pic would really look like. You still left some icons in the pic (what actually strenghtens the message of your article I guess).

    http://i47.tinypic.com/13yl9o5.jpg

  10. Nikolaj Mertz

    Hi Bram,

    Thanks for your comment – i really appreciate your feedback :-)

    Best,
    Nikolaj

  11. Joy Edwards

    I am agree with you that Icons can put content in a nutshell, even these are very helpful for a quick information and there is no need to look for the links if we have the right icons on the website.

  12. David

    This is a great post! Indeed, icons are a great way to draw attention, it can increase readership and it seems to make all things easier, especially if you have too many options and navigation menus all over your site. Icons really make any website friendly.

  13. Magnus

    Hi Nikolaj

    The pictures are currently missing in the post – could you perhaps reup? I think that the site is really great – and I totally agree that images are very important to improve click rates and also I think that small images can help customers understand what they are looking for!

    Lomax is looking really great you guys did a great job to change it from the last website. Think it looks pretty great even though you’ve many categories.

  14. Sabina Idler

    @ Magnus,

    Thanks for the head up! We have issues with more of the images and we are going to fix it asap.

  15. Neil

    Great article. We’re currently working on a site with some form of user interaction. Base on these examples (together with other discussions of the topic, it looks like the best is to pair icon and text.

    Thanks!

  16. Colin Bhimsen - Canada Top SEO

    Great posting on web design in relation to look and appeal for the customer. Remember icons can increase eyes on your sales tactics.

Leave a Reply

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