Designing with Icons
Back to the Basics
In previous posts, we discussed logo design and other visual design issues. Next, we wanted to do a series where we get back to the basics. Our first topic is iconography for web application design. Ryan Heffner, a User Experience Engineer with an extensive background in graphic design, worked with me to construct this post. We have a couple more posts coming on this topic; we’ll start this series with best practices.
When should I use icons?
Just like the old adage “A picture is worth a thousand words”, using icons in your app can be a great way to convey a lot of information in a small space. Icons represent a thing, action or idea that help a user navigate their workflow. However, there are some questions you should ask when thinking about using an icon in your interface:
- Is it needed, or will it clutter the interface?
Icons can simply represent a set of actions and add visually appealing graphic elements to an interface. On the other hand, when you add too many icons it can visually overwhelm users. Ask yourself: Does adding the icon help the interface or if it is going to add additional confusion? - Can I rely on users knowing what the icon means?
Do you have users from multiple cultures using the same interface? Do the icons used in your interface mean the same thing to all of your diverse user types? Icons can mean different things based on how they are interpreted. They can even mean different things based on where they are placed and the other icons they are near. Before using an icon, particularly in cases when there isn’t room for a label, think through whether or not adding the icon is going to help or hinder. - Is it something your users can easily learn?
In the case when the icon isn’t common (like the ubiquitous floppy disk for save), can the users understand the meaning and how it will help them move through their tasks? And, can they learn the icon’s meaning from other contexts within the application? - Is there room for a label?
Icons are much more successful in communicating their purpose when they are paired with a label — at least when first encountering it. If space permits, it is usually a good idea to include a label, especially for icons that represent uncommon or complex functions and ideas. If space is an issue, the label can be responsive; appearing when the screen real estate allows, and hiding when space is at a premium.
In our personal experiences icons are dangerous. They can be complicated and confusing. And, developers tend to use icons that are intuitive to them but not intuitive for users. Rather than spending more time creating space for buttons and labels, icons get overly simplified and used too often.
Icons can also be very powerful. The advice on using icons is like the advice Uncle Ben gave to Spiderman: with great power comes great responsibility. To help with wielding that power, we’ll cover some basics.
Use icons when…
- They enable quicker communication of ideas than words. If you have to use words to describe the icon, you’ve failed at simplifying a task.
- Icons represent common tasks. If the icons aren’t going to streamline the workflow they aren’t worth risking user confusion. Do not use them if the workflows you are supporting are niche workflows, because uncommon tasks aren’t worth increasing the risk of user confusion.
- Space is a limited resource. If you can make the next more clear by increasing spacing and using icons, then you are winning. If everything is cramped with or without the icons, don’t use them.
Use words when…
- Space allows. Icons plus labels are always the best solution for common actions. If space allows, add a label.
- Complex ideas or workflows — especially the first time a user moves through a complex workflow it isn’t in that user’s best interest to simplify. Complex tasks should be supported with words until the user has learned the meanings of the icons.
Our Best Practices
- Always use a tooltip that at least has the name of the function or status the icon represents.
- Use titles and alt text for accessibility needs. Use alt text even if you don’t care about accessibility needs. It is just good design.
- Proximity and placement. Place the icons next to other actions. And, if you are using a label, the label should be closer to the associated icon rather than closer to another icon. You don’t want a whole bunch of icons and then a whole bunch of labels. An icon and its label should look distinct from other icons and their labels if for no other reason than space.
- Group related items. Common tasks should be grouped. For instance, if you have a whole set of icons that are really clickable links/buttons and a different set of icons that represent status, do not place the two sets close together. It is worth mentioning here that buttons should look like buttons rather than just icons with a hover action.
- Test your Icons (Hallway, AB, User feedback). A quick round of paper prototyping is insanely valuable. Even if you simply print all of your icons and ask people what they think they mean, you are ahead of the game. If 9 or 10 people can’t correctly guess what your icons mean, you need to get back to work. The one caveat we give here is that even if your icons pass this basic test, they can be confusing when placed within the interface. The next step is to print your interface with the icons in it and ask people again what they think the icons mean. Users shouldn’t have to rely on hover or alt text — even though you put them in there because of Best Practices #1 and #2, right?
- Styling your icons. Strive for the best case scenario by creating a set of stylized icons that reflect your brand and fit within your budget. If you have limitations, keep the colors of the icons consistent with your color palette.
- If you have to pick, we prefer using SVGs to PNGs. But, we have a whole other blog coming on how to pick and use these different formats.
Overall, icons can be powerful, but they can be overused to the point where the interface becomes unusable. In this post we’ve outlined some of our guiding principles. In our next post we’ll continue this discussion and explore different icon formats and how to use them.
If you are interested in learning more about Next Century, please check our website below:
