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:
- Icons can put content in a nutshell
- Icons can draw attention
- 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.
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.