How to Use Icons in User Experience Design
Icons are everywhere; on every website we visit and every app we use. They help with interaction for navigation, to understand and get things done on said websites and apps. But those icons we see and use are not there “just because,” they are all well planned and thought out. Their positions, their purpose and their visual quality have all been considered by the UX designers before they got to where you see them.
If you didn’t know, icons are a huge part of User Experience Design (UXD) and User Interface Design. An icon in website design or app design needs to perform as we expect it, if not better. For this reason, there are some rules to follow for optimal icon functionality.
The principles of User Experience Design also apply to icons
User Experience Design follows a simple set of rules. Everything, including icons, need to have value for the user. For this to be achieved, everything also needs to be useful, desirable, accessible, credible, findable, and useable.
What does this mean? Basically, it means that an icon needs to be easy to use, easy to find, easy to understand, easy to look at, and easy to click on. If an icon used is of a simple arrow but the color is too light or if it doesn’t look clickable, it’s useless. Every icon needs to tick all the boxes. So how do you make sure that the icons you are using are following all these rules? By simply following some design techniques, your use of icons can be a success. Below are the best tips for how to use icons in User Experience Design.
Stay simple
A simple icon is better than a complicated one. What does a complicated icon look like? One with more than two colors, one that isn’t recognizable because of the graphic detail, one that doesn’t scale well from big to small and vice versa. Sometimes icons can be used at a big scale so it’s ok for them to be full of color and even unique. But if that same icon needs to be used for mobile functionality, then it might not be the right choice.
The simpler the icon, the easier it will be to understand. Be careful with icons with backgrounds. If you use icons with backgrounds, make sure the background is not too overwhelming. Try transparencies or gradients to make the actual icon noticeable and the background only a compliment. Always opt for simplicity.
Stay familiar
Icons, apart from minimal differences, should generally look the same. For example, an email icon most always looks like an envelope. Yet that envelope could be thin, thick, with a folded over flap, or an open flap, maybe with an arrow depicting in-mail or out-mail. Nevertheless, it is still an envelope. Don’t go crazy and turn the envelope into something unrecognizable.
Needless to say that if you use icons with a flat design and mix them with isometric ones, it will get visually confusing. Don’t reinvent the wheel when dealing with icons, always consider their usability!
Give them some space
Icons need space to breathe. They also need space for fingers to click on them. When icons are too close to each other they become unusable. The best distance to have between icons is one centimeter on the screen for both mobile and desktop. You can give it more space in a layout as long as it all fits nicely in their space.
Make distinctions
When icons look too similar to each other, they are hard to recognize. Make sure all the icons are distinctively recognizable from the one next to it. This is another reason why having icons with backgrounds can make things confusing. Use the 5-second rule; if an icon isn’t recognizable in 5 seconds, you need to change it for one that is.
Another distinction rule for icons is if icons are part of a menu, the one being used should be of a different color or shade. Giving the icons a subtle hover, shadow or color change when about to click it also helps.
Follow a style
Another really important design technique for icons in User Experience Design is to follow the same icon style in your entire project. If you are using line icons for most of the icons and then add an isometric one, it will look weird and out of place. Choose the style that matches your project best, think of the end-user and what they recognize and feel comfortable with.
Icons should be part of a branding style guide for all web applications. If one icon has a blue background in the menu, then they all must have it. You can find sets of icons with the same look and feel on the Flaticon website. You can even search by style if you are missing an icon and already have the rest. All the icons are easily customizable, you can also do it in the built-in editor right on the website.
Even though as a free user, you still have access to an extensive library of free icons, being Premium gives you even more options. You can download Premium icons, use them without having to attribute the sources, browse without ads, and receive special offers for Premium users.
If you are thinking of giving it a go, we are happy to offer you a 30% discount for an annual subscription. Click here to use the promotion.
Over to you
Are you using icons in your digital projects? Did you know about all the above techniques to make your icons work for you? Always remember that in User Experience Design, you are designing for the user, not for you.
