Eyesparks web design

When is it appropriate to use icons in your User Interface?

We are regularly commissioned by software developers to help them with the design of their User Interface (UI). While each project has it’s own quirks and nuances, there are many issues that we face time and time again. One common mistake we come across is inappropriate use of icons.

It’s not unusual to see this statement included in a UI brief “… and a set of icons to help users navigate the product and enhance the experience”. One reason for this is that when people think “user interface” they think “graphical” – and icons are very obviously graphical. However, in our experience icons are sometimes used to try to jazz up a poorly thought out interface and the result can often be a confusing User Experience (UX).

Inconsistent icons
Mixed-and-matched, inconsistently styled icons create an unsettling, “bumpy” user experience.

So when is it appropriate to use icons? Icons are great when you want to draw attention to or differentiate particular elements of your interface. For example you might use a series of icons to subdivide elements of key functionality by sector. The icons are intended to help the user identify each separate sector but they are also there to draw attention to the fact that this is a key area of functionality. If these icons are well drawn and descriptive enough they can be used as shorthand to save space in your interface, however, be wary of using icons that are too similar or ambiguous in their meaning – it is very easy for users to misread images and become lost in your product. On numerous occasions we have been tasked with redesigning interfaces where the same icon has been used for multiple functions; this really confuses the user and introduces inconsistency which is the enemy of good design.

Icons also help extend the visual language of your brand so you should be very careful over how these are drawn and displayed. Consistency of style is very important. If you have obviously pulled icons from different stock libraries the chances are they will clash with each other and not complement your brand. The resultant user experience will feel “bumpy” and lack professionalism.

Beware of Icon Overload
Beware of “Icon Overload” – the result is that everything shouts for attention.

Avoid creating icons for all buttons. The eye is naturally drawn to a picture so if you have lots of pictures the user finds it difficult to focus on any one in particular. The effect is that everything screams at the user and nothing gets heard. If you are already using icons to describe a section or subject, think very carefully before incorporating icons in other parts of the interface. Does it really help to have icons beside or instead of action buttons like “new”, “edit” or “delete”? Often a word consistently styled is much more powerful and communicative than a graphic.

When you do include icons in your user interface remember to use recognisable standards. Users universally expect a magnifying glass to represent ‘Search’ and a house icon to mean ‘Home’ so don’t try to re-invent the wheel! Also, be wary of using icons to try to describe a very specific, bespoke function such as “create pressure point” or “build data set”. It is rare that an icon improves understanding in such circumstances.

Icons within your User Interface is one thing, but what about using them within the content of your application, how does that effect the User Experience? With regards to UX, icons are as important to brand perception and layout as to navigation and function however many of the same rules apply as with UI; don’t over do it, keep them consistent, ensure they are easy to read, keep them simple.

It is quite common for applications to use icons and other small images as a means of helping users read and interact with their core content. Including small icons beside sub-divisions of a page will draw attention to that area and enhance the decorative appeal of the layout. These images are quite often generic objects such as documents, pencils, laptops, calculators etc. These graphical devices provide a quick visual flag for locating specific content regions and should be implemented with rigorous consistency.

In summary try to apply logic and good taste when you use icons. There are so many free sets available that it is easy to get carried away and spray them all you’re your User Interface. But always ask yourself the question, “Does this enhance the User Experience?” If the answer is “not really”, then proceed with caution and if you are in any doubt ask a good UI designer, I’m sure there’s one around here somewhere.

Eyesparks will be running a UI Design workshop in Spring 2017, contact us to register your interest.