Just about every app and website uses icons. In fact, you’ve probably used then in many projects, but why did you use icons and how do you know you used them in the right places?
That question keeps even the most experienced web and app designers scratching their heads. It all seems like a guessing game and unfortunately, more often that not, icons are used to decorate rather than to help people using the interface.
What if you could strategically make icons do work for you? Instead of placing them at random, what if you could make well informed decisions about where they make the biggest impact?
In this article we’ll take a look at exactly how you can do that. But before we do, let’s define exactly what an icon does.
Icons Are a Call to Action
Icons are much more powerful than we give them credit for. They bring a human element to an interface by depicting real world subject matter and universal symbols that feel familiar.
But what’s perhaps most beautiful about them is their ability to reach across language barriers. They say something without saying it directly, and they help us navigate both the real and digital world.
“In essence, it is not what it looks like but what it does that defines a symbol.”
Paul Rand
Every well placed icon has some form of action attached to it. If you click the back arrow, you go back. If you click the search icon, you start looking for something. Even an app icon launches an app and brings you into an experience.
This concept of icons being an action item full of life is really important. They may look like passive symbols to decorate your interfaces with, but they’re actually a very unassuming call to action.
A lot of links are clearly connected to a verb (e.g. search, refresh, play, pause, schedule), but if what you’re working with isn’t so straightforward, write down what will happen when a user taps each icon.
As you can probably imagine, this first rule doesn’t mean an icon should be used on every action in an interface. In fact, there are three possible solutions:
- Icon only
- Text & icon
- Text only
We see these approaches used all the time in real-world situations. Just think back to the last time you went to a restaurant with friends.
On the way there, you saw words and symbols that let you know where to go next. An arrow with the word exit next to it, a bus stop sign you recognized without reading the words “bus stop”, and the logo on the restaurant, which you may have either read or recognized instantly by certain symbols.
Once inside, there are even more calls to action. The restroom signs where symbols mean a lot more than words, the exit sign where seeing EXIT helps a lot more than a door icon, and the menu where icons can help you understand what’s most important.
These three approaches are foundational, but let’s narrow down which is best for your interface.
Does the Action You’re Leading to Have Immediate Consequences?
Actions that do something really important like deleting a post, restarting a game, or making a purchase, shouldn’t be taken lightly.
Imagine that you walk into a store and find a product you’re really interested in. It looks great, but you have a few questions, so you approach an employee to ask them about it.
Suddenly you hear register noises and the employee is asking for money. What a ridiculous and terrible experience right? You’d probably leave, never to return again.
As extreme as that situation seems, it’s exactly what happens when you send unsuspecting users into an action with immediate consequences. In a situation where icons might actually do more harm than good, it’s best to use either an icon with text, or no icon at all.
How often do you expect users to take action?
I’m sure a lot of the actions in your interface that don’t have harsh consequences, so how can you make informed decisions about the other places icons could be used?
Let’s take a look at how Twitter handles it’s use of icons in the user dropdown menu. They’ve divided this menu into three sections, each with a very specific goal.
There’s what I’ll term the “average user section”, where you can go to see your profile, look at which lists you’re a part of, and browse moments. What you might find odd about this list of icons is that they don’t seem to be action oriented but by being part of a menu, they are.
- Profile = View and edit my profile.
- Lists = View and manage lists.
- Moments = View and Consume trending stories.
Next on the list is the very obvious promotions and statistics section. This is where you can go to promote your tweets, create ads, and see how your tweets have been performing.
And lastly we have the “things we need to have in the menu” section. Where links that are nice to have (but not often used) have a home. But you’ll notice this section has one very distinct difference from the other menu sections… No icons!
Why would only two thirds of a menu include icons? Because this final section is the “things we need to have in the menu” section.
- Settings and privacy are things you’ll rarely need to adjust. In fact, I can’t remember the last time I visited that page.
- Help Center is a place I would imagine very few of us have gone for Twitter, and certainly not every day.
- Keyboard shortcuts are nice to see, but you’ll rarely (if ever) view that page.
- Logging out is important, but Twitter doesn’t want you to log out. If you can open the site and get right to the content, that’s a much better experience.
The important menu items have icons, and If you visit those pages enough, the text starts to fade away a bit and the icon is all you’ll need to find where you’re going.
When you’re adding icons to your interface designs, keep this in mind. Only core features need icons. Because when you make everything important, nothing is important.
You’re Ready to Strategize
We’ve covered a lot in this article, but the three main criteria for placing icons are: –
- What action will the icon lead to?
- Does that action have immediate consequences?
- How often do you expect the action to be used?
When you find yourself in a situation where using an icon is the best solution, the choice to use only an icon or an icon with text is really up to you. In fact, the decision often comes down to the icon itself.
Are you using a well established and easily recognizable icon that can stand on it’s own? If not, consider using text to give users confidence in what they’re doing.
When you start looking at icons as powerful calls to action, making smart decisions about where to use them becomes a lot easier. Key features will be strategically highlighted, and you’ll start to establish a really solid user experience for any interface you work on.
0 Comments