Icons are heavily used in social games and gaming in general. They’re used in the form of iconic buttons and to represent gameplay elements. They’re a great-looking solution for information-dense interfaces, as social games often can be. Icons also make translation easier — If you’re not using text, there’s less copy to translate as your game expands into international markets. Icons seem like a great idea, and since they’ve been a practice in games for so long, there doesn’t seem to be much of a need to change them.
But lately, I’ve been suspicious about the practicality of icon usage in games. Can users easily understand and learn these icons? Are we potentially trading usability for a cleaner layout? I was also suspicious about icons as a method of making localization more efficient. Sure, icons make localization easier on the development team by reducing the amount of translation that wold need to occur on text, but are we potentially adding confusion for international consumers? How can designers confirm that an icon is interpreted similarly across cultures? To add complexity to this matter, social games often grow organically into international markets, so there’s often no way to anticipate what cultures a game will end up in.
A quick search for icon usability reveals a few article supporting the idea that icons can often be difficult to understand:
One of the first interfaces to spark this suspicion was Crowdstar’s Wasteland Empires. Check out the screen grab below. Can you intuitively tell what the icons in the red boxes mean?
I play this game intermittently, and every time I play I find myself hovering over the icons in the bottom left of the screen to reveal tooltips explaining what they mean. The design team on the game probably used these icons as a way to save space, but they sacrificed usability, especially for users who dont play often. Now you might be saying, “Well Saad, social games are only successful when people play often. Good use of game mechanics like gating and loss aversion make people come back. If users come back often enough, they’ll learn to use these interfaces” Maybe so. Repeatedly using an interface definitely impacts its learnability, but it shouldn’t be what drives understanding of an icon’s meaning. It also puts strain on the first time experience and increases the need for heavy tutorials. It also breaks my sense of flow if I need to figure out which icon is appropriate for what I’d like to do.
Another example of confusing icon usage is Zynga’s Mafia Wars 2. Check out some of the icon usage below:
Now this isn’t to say that icons are all bad. I think there’s definitely a need for them in games and other software. I believe one of the great powers of icons in UIs is to provide analogy to explain an action that might otherwise be confusing. However, there’s definitely a balancing act involved. Overuse of icons leads to a lot of thinking and breaking flow.
Here are some things I keep in mind when using icons:
- Always ask, “Why am I using an icon here instead of just text?” If I cant come up with a good answer, I’ll use text.
- Icons are great for providing real world analogies to actions that might be confusing. Facebook’s ‘like’ buttons are such a part of the lexicon now, but when they first were released into the wild, I bet the thumbs-up icon did a lot to quickly communicate their meaning.
- Because users often remember placement more than design of the icon, I try to keep iconic buttons in one place throughout an interface. This best practice assumes that people will be using your interface more than once.
- When choosing an icon, I try to use conventions when possible. For instance, there are standard icons for making text bold or italicized in most text editing interfaces. Also, back and refresh on browsers are pretty standard. When sharing, an envelope is common for email.
- I dont rely on repitition alone as a means of teaching the user what an icon means.
- Whenever possible, I try to pair an icon with a text label instead of just using an icon alone.
For a good example of these icon practices (and a generally great UI), check out Kabam’s Edgeworld (I promise I’m not biased because I work there 
). Resource icons are color coordinated with resource collectors, main icons and job bar icons have text labels, and settings icons follow standard conventions. It’s very clear that the designers on Edgeworld really put thought into making the UI learnable and intuitive.
