Icons: Handle With Care
How to use icons the most effectively in your design
Icons are a part of the graphical user interfaces we all know & use every day. From your computer to your phone, icons help us complete tasks (be they mundane or important).
Early icons worked because they drew from real life as skeuomorphic little images of printers, trash cans, folders, floppy disks, and other things from office life. These are still used today even when their physical counterpart no longer is (such as the 3.5 inch disk). Other successful icons are those for concepts that already have a long history in our culture (an “x” for close, a triangle for play, a circle with a vertical bar for power, etc.). The key to successful icons, like the key to a lot of UX usability, is utilizing what people already know. It becomes a snowballing cycle where the more designers use these icons, the more people experience them & understand them, which leads designers to use them even more, etc.
We don’t just rely on legacy icons though. As new user experiences are created there are needs for new icons to support new interaction models & concepts. When smartphones arrived in 2007 the mobile web barely existed. In 9 years mobile internet traffic overtook desktop internet traffic, making smartphones the preferred device for internet access. With this new mobile web came new icons such as the hamburger iconwhich is generally used to open a menu of options. The hamburger icon has had criticism, that it doesn’t necessarily say “menu” to you when you see it and that the pattern it supports is hiding content, but its acceptance is in part due to its frequent usage. The more we see it the more we understand how to interact with it. This standardization helps usability. Think of the buttons that turn on or off most of the electrical devices you have ever used. They have probably used the same icons over and over. We don’t need every device/website using their own proprietary icons for shared tasks. Standardization helps users understand experiences and it helps the designers save time by not reinventing the wheel and designing new icons for common tasks.
What should you do
Well the first piece of advice is don’t use many icons. Icons aren’t flair, you don’t need to sprinkle little pictures around your design just to make it look pretty. They should be used to enhance a user experience in assisting users to complete tasks. Use the icons already in the UX vernacular, but if you encounter a situation where you need to design a new icon … you probably shouldn’t. Users struggle to understand icons for more obscure concepts. These mystery meat images leave users confused and often hesitant to make a selection because of the unknown ramifications of selecting an unknown icon.
Microsoft faced this problem when preparing for Outlook ‘98. Most users were not using the existing toolbar because they didn’t know what the icons did. They tried redesigning some of the icons but still there was little adoption. Finally, labels were added next to the icons, and usage of the toolbar took off. Which leads to the next piece of advice …
Use labels. Icons with text labels perform better in usability tests than icons without labels. Very few icons (print, save, close, etc.) are universally understood so outside of the easy ones people need labels to understand what they are looking at.
As for how many icons to use, using just a few icons employs contrast to your advantage to highlight certain tasks or information in your design. Too many icons blend in with the rest of the page and the icons lose their effectiveness. A page littered with icons is like a page of text in all caps: it ceases to lend emphasis through contrast and it just blends together.
For more UX best practices, download our paper on User Experience Best Practices for Data Analysis.