How can you improve products by focusing on better icon usability?

Icons are everywhere and they act for substantial importance in how users navigate on any website or app. The updates on system icons or app icons come pretty regularly and every move the big tech makes doesn’t go unnoticed.

Just a few months back, Google’s new Workspace app icons became quite a discussed topic in product design. You probably already have experienced frustration or annoyance similar to mine trying to find a calendar, google drive, or docs icons on your mobile’s home screen.

Image credit: Behave_or_else

Calendar, calendar. Hmm, it should be on my home screen, no it’s not here. Oh, ya, here it is. — Talking to my phone

Since an icon’s primary goal is clarity or in other words, communicating the concept quickly, we may have an issue here. In general, what it was before, was good for years. Gmail used a white icon with red strokes. Docs and Calendar icons were blue. And Google Drive for example used a multicolor icon. It just worked. And it’s not the only example in the tech world, where we are exposed to icon usability problems. Let’s go through the definition of icons' purpose, usability, and lastly some recommendations on designing icons, that will help you build better user interfaces. But before that, let’s go back quickly into how icons looked and communicated functionality back in the old days.

Icons back then and now

In fact, the word icon originates from the Latin word ‘eikṓn’ meaning ‘likeness, image’. It tracks back to the year 1565. Even though in HCI icons appeared much later. It all started in 1981 when Xerox Star became the first-ever consumer market release computer model to use icons.

1981 — Xerox 8010 Star - I know, who on earth can reference black & white icons

But still, Xerox made quite a good job. If we consider how using only black pixels and low-resolution screens it was possible to achieve recognizable objects. You may notice, that Document, Calculator, Trash, and Printer icons haven’t changed too much up until now. This Xerox advancement pushed others in the tech community to release similar machines.

More professional icon sets were later designed by Apple designer Susan Kare for Apple Lisa in 1983 and 1984 for Macintosh.

1984 Macintosh iOS icons set — Susan Kare

Actually this all pixelated icons thing inspired me to replicate the famous apple system icon, just added some color if you don’t mind. I hope you like it.

It still fascinates me how few pixels are needed to make this recognizable icon

But enough of these prehistoric examples, Let’s focus on where we are now. Quite recently, in iOS 14 latest software update, the tech giant Apple gave iPhone users the power to customize the icons the way users want. This feature came out apparently because some icons don’t fit next to each other and don’t look too cool. Presumably, we will all love this new feature, but from a usability standpoint for some users, it will definitely take more time to search for favorite apps on the screen.

iOS 14 — custom style icon set example

So let’s question ourselves a bit more. What really makes great icons stand out and deliver wonderful experiences?

Icons purpose

The meaning and purpose of icons are to visually express objects, actions, and ideas. And icons are failing, because people tend to assign different icon meanings based on their browsing experience. Even though NNgroup made this research about icons that cause usability problems a few years ago, as of today, we still deal with the same issues. And one of the findings of this analysis — tendency to remove labels from commonly used icons.

To help overcome the ambiguity that almost all icons face, a text label must be present alongside an icon to clarify its meaning in that particular context. — NNgroup

Icons usability

According to Aurora Harley, a senior researcher at Nielsen Norman Group, there are 4 quality criteria on icon usability testing: Findability, recognitions, information scent, and attractiveness. Each of these key points helps to create icons, which communicate the core idea and intent of a product or action in the user interface.

Usability testing of icons — NNgroup

• Findability: Defines how hard it is to find an icon on a website or app in the context of a full user interface.
• Recognition: Recognition happens at the focus of attention, so it is crucial, that people would understand what each icon represents from first sight.
• Information scent: The basic purpose of an icon is to ensure, that users are guided to where they need to go. There may be certain emergencies when there is no time for a second guess or “let me think for a while” what this UI element means in context with other icons.
• Attractiveness: Enhancing aesthetic appeal helps to create products that are both usable and beautiful. It helps to deliver a great overall user experience.

Designing icons for UI

And what else you should keep in mind trying to deliver your next icon set?

• Holistic approach: Icons have to be approached holistically, as a system with a certain purpose within the user interface. They must fit in within the graphic system you’re using them in. It’s recommended to design icons in a way, that differs from surrounding icons, while still working together as a unity.
• Target audience: Even though icons should be universal and fit for all cultures and languages, preferences of your target group’s taste should be considered. Another factor is RTL languages that use the right to left scripts. For example Google material design icons even have a list of icons, which can be programmatically mirrored if they are targeted to RTL type of languages. But still many icons in RTL layout only change position, they are not mirrored themselves.

Navigation, overflow menu, and icons displayed in LTR vs RTL layout

• Style consistency: Strokes, shapes, radius, and overall small style details make all the difference. Keeping your icons consistent and in balance, will make UI look professional. Material Design icon set is one of the great examples, which is coherent and clearly communicating the meaning of each icon across the entire set.

System of icons from Google material design

• Size matters: Icons must work in really big and small sizes. It’s very painful to find out, that the icon set is too detailed when the need arises to use icons in 16x16 or similar small size.

The bottom line
Putting more effort into icons in your UI will definitely improve the overall usability of the digital product. I hope this article helped you grasp some core ideas about functional and visually appealing icons.

Thanks for reading my article! Let’s connect and get to know each other on my Website, LinkedIn, Twitter, or Instagram.