When Should You be Using Icons in Your UI?
The ultimate aim of icon is to enhance the user experience ans also aim to significant benefits for UI design.
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.
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.
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.
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.
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.
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
