Awwwards

The “Why?” and “How?” of Effectively Using Icons in Web Design

by Ciprian Paraschiv on 23rd September, 2016

Web design

Icons have been used for millennials as communication tools. They can be regarded as a first expression of the written language. They entail a shared understanding and need to communicate a certain message effortlessly. To accomplish this, icons do not only need a broad understanding but also having a single meaning.

People often don’t look to the same icon with the same eyes. It’s extremely hard for a symbol to become an international standard, in many cases cultural and personal associations reshaping the intended meaning. For this reason, using icons in web design is a two-edged sword.

This article will help you better understand the benefits and the risks associated with using icons in the interfaces we design.

Icons are great for the UI…

One of their benefits is that, correctly designed, icons will allow the user a faster recognition while scanning the page, before digging into content. The icons help give users a point of reference and act as small details used to persuade them to continue their interaction.

Many psychological studies revealed that there is a superior memory performance for pictures over words. Using pictures rather than words will reduce user’s cognitive load, will increase the memorability and the intuitiveness of our designs.

Icons certainly add an aesthetic value helping to create more visually pleasing interfaces. If they are sprinkled with creativity and consistent with the overall design, icons can offer your design visual personality.   But despite their artistic mean, our key goal is to make use of the icons to improve the user experience. They should provide guidance and support user’s goals accordingly.

Icons can also improve the overall readability by making it easier to break up content, allowing the user to absorb and process the information more efficiently. By enabling efficient communication without wordiness, the content will appear less intimidating to the user. But keep in mind that the primary purpose of icons is to draw attention to the content and not to lower its meaning. Icons should enrich minimal content by giving it more substance.

Due to their ability to condense a particular idea, icons are an excellent way to save up space. This can be extremely useful for us as designers, especially if we are adopting a minimalist mindset.

Icons are also an excellent target, especially in the context of mobile design. They can have the right size to be easily accessed in a finger operated  UI but also with a mouse cursor. That doesn’t always apply when it comes to using text, being much harder to apply the ‘fat finger’ rule.

But be careful…

Regarding of the many benefits listed, there are strings attached and things to look for when opting for icons. The highest risk is that the users won’t get it.  Many can be the reasons, but if this happens, your icons will turn into visual noise, hindering people for completing their goals.

Many of the issues with icons reside in the speed with which technology is evolving. A good example is the floppy disk icon that may have a perfect sense for us when we want to save something but may be confusing for the kids who had no interaction with that old technology.

Think of all potential meaning an icon may have in various contexts before adding it to your design. Understand its functional role and avoid using it if for aesthetic value only. Avoid using icons with a contradictory and mixed meaning.

Another thing we should avoid is to compact many icons in a given space or abusing their use. Remember that icons act as points of reference for your users, facilitating their navigation. Having too many icons will increase confusion.

Also be careful how the icons are consistent with the rest of the website. Try to avoid simply buying a nice looking set of icons and try to design your own. When you are in doubt or lack any idea, the monochromatic icons may be your choice because of their low level of distraction.

If you are in doubt, try to find ways to attach a label to your icon, without any interaction from the user (ex. hover). Research have been shown that this combination of text and icons is the most effective.

Let’s take as example one of the most debated icons in web design nowadays, the “hamburger” menu. Many use it especially in the context of minimalist design and a mobile first approach. Despite its popularity, there are risks attached to using it due to the lack of understanding of inexperienced users. Facebook, for example, didn’t assume the risks and for its iOS platform, they replaced the menu with labeled icons.

Another very good idea is to test the icons you use for usability. Norman Group offers great insights  into how to perform the testing in terms of findability, recognition, information scent and attractiveness.

Last but not least, when thinking whether to add an icon or not, use the 5 seconds rule: if it takes you more than 5 seconds to think of an icon for something, you should probably don’t use that icon.

Ciprian Paraschiv

LEAD DESIGNER

I am a breed of SEO specialist and UX Design advocate. My strong engineering knowledge is key to reconcile the distinct goals of the two areas. I design with user’s delight in my mind, while not averting from optimizing conversion rates.