Icon Usability in Social Games

Usability is a difficult issue in social games (and games in general) because users are often approaching games with various levels of experience. A first-time player needs a learnable interface so that he can easily figure out the game and get into gameplay. A power user wants all of his actions available up front (like an airline dashboard) so that he can quickly access all commands. Balancing these two extremes is one of the toughest aspects of interface design for social games. Screen real estate becomes a big issue. To illustrate, check out World of Warcraft for an average player:


OK now check out how an expert player has modified world of warcraft to meet his or her needs:


Notice that the majority of the interface elements above are unlabeled icons. If you’re a non-player, are you able to understand what these icons mean? If you are a player, can you easily recall the meanings of all of these? Imagine you’re in the heat of an epic battle or about to beat a level and suddenly you forget the meaning of an icon. You’re instantly removed from the game world and you’re back in the real world trying to figure out an interface.

Icons are heavily used in social games and gaming in general, often in the form of  buttons representing categories of actions and also 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 internationally and needs to localize. 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 new countries, 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. 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. As a user, 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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. I dont rely on repitition alone as a means of teaching the user what an icon means.
  6. 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. 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.