When Should You be Using Icons in Your UI?

Illustration by Rafika Aulia Rahma

The ultimate aim of icon is to enhance the user experience ans also aim to significant benefits for UI design.

Image Source: SketchApp Resources

Icon is one of the biggest design elements that help to communicate your design. Icons have been used since the early days of computer graphics. The use of icons has many advantages over text in terms of human-computer interaction. Icons can replace a long descriptive group of words that usually make you boring which can be effective to improve the visual interest and grab the user’s attention. Moreover, by using icons you can communicate more words in a lesser space. Last but not least, the use of icons in most user interface applications has become a design pattern that is familiar to users.

Despite these potential advantages, icons often cause usability problems when they are overused in your UI, they can be compromising the UX. The use of icons should always have a strong meaning, reinforcing what can’t be said with words. If it takes more than 5 seconds to think of an appropriate icon for something, it is likely that icon is unfamiliar and it will probably be ineffective to communicate the meaning.

The use of familiar icons will work best to communicate the meaning for users (e.g. home, close, print, play, search) because these icons are clear and fast to recognise. We all have a great deal of previous experience with these on a daily basis. If that object or action isn’t clear to users, the icon immediately loses its practical value and becomes a visual noise.

Moreover, the use of icons in a good way should help the user do what they need. Every icon has to set an expectation that enables a user to predict what’s going to happen if they click or tap an icon. When users can’t predict the icon, it can’t help guide users intuitively.

From the explanation of the icons above, the use of icons is very important, but you need to know when you should use icons. Let’s discuss the negative effect on user experience as a result of overusing icons, or using them unnecessarily. This is when you should be used and shouldn’t be used while using an icon.

Do: Use Icons When The Label is not Enough to Explain The Action

Icon should you use when you don’t have enough space for a text label, but this isn’t always the best reason to use an icon. You can consider creating space in other ways, this might include simplifying the layout or removing unnecessary distractions.

Image Source: Twitter
Image Source: UI Garage

Do: Use Icons to Save Space

When you decide to use icons, confirm it aim to save space and improve recognition in toolbars, functions, and navigation. This benefit is especially important on mobiles where using icons can save valuable space. Icons should be fast to recognise. Use icons that people have seen and used before, and don’t forget to include a visible label text when in doubt or your icon is unfamiliar.

Image Source: UI Garage

Do: Before Any Label or Text

If we want to use icons to their full potential, we should always put icons before any label or text, that is related to the icon. This enables us to use icons as both, visual and also functional aid. Great design is about both, form and function. Great design can be eye-pleasing as well as functional.

Image Source: UI Garage

Don’t: When The Design is Crowded

Precision is the first and most important job of any interface. Users need precision when navigating an interface. Users must be able to recognise what it is, consider about why they would use it, understand what the interface is helping them interact with, predict what will happen when they use it, and then successfully interact with it. By using many icons you can make your design lose their clarity and make users confused. Always calculate how crowded your design is before you decide to include icons on your UI.

Image Source: UI Garage

Don’t: Without any Reason

Often you find some vacant spaces in your design and looking for things to fill them with to make enhancing the aesthetic appeal of a design. If you filled it by using icons unnecessarily and without any reason, you will create more visual distractions and make it harder for the user to scan through content for useful information. Always use icons with a specific purpose.

Image Source: UI Garage

Conclusion

Icons can certainly make a design look more visually appealing but also can make usability problems at the same time when they are overused. Always consider the reason for using icons and use them with caution, because it can be very distracting especially when it isn’t clear what an icon represents. The correct use of icons will enhance user experience and vice versa.

Contributor: Christantoputra

A global brand and experience digital product design agency that builds digital products to move at the speed of culture.