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.

User Experience for Social Games

I started a new job as a User Experience Designer at Kabam in early April, and I was extremely excited at the chance to jump back into social gaming with a new focus on user experience. The role has been extremely rewarding, but it’s also been challenging due to the lack of information out there about UX for games.

UX is a fairly new discipline in social games. During my first month at Kabam, I scoured the web looking for any reading material. While there’s material on UI Art and Game Design, there’s not very much concerning interaction design or user research specifically for games (In many companies in the games industry,the producer typically generates wireframes). Research was especially important for me because I quickly discovered that games have unique challenges. For instance, a core component to games is challenge, and preserving that challenge is instrumental in keeping the game fun. However, every project I’ve worked on as an IxD was about removing challenge and ambiguity from interactions.I thought David Kieras’s Solve Problem Button example in his paper User Interface Design for Games (PDF) was a clever example of this issue:

Software for Work versus Software for Fun

Work is less productive if the software is unnecessarily hard to use.
The user must get something done, so operating the software should be as easy as possible. Fist-fighting with the software is pointless. Save time and effort for actual work.

Games are not fun unless some difficulty is involved.
Something must be hard to learn, hard to figure out, hard to execute. The user is seeking the thrill of accomplishment.

Consider a button labeled “Solve Problem.”
Best possible design for work software. Worst possible design for game software. At best, a “cheat” function.

I think the reason user experience hasn’t been a focus in the games industry is because there hasn’t been a need so far in order to sell games. Game players are typically very much more motivated to play online games than users of other online products, and they dont mind the interface friction that sometimes results from limited ux work.

Joshua Porter, 2009 (http://www.slideshare.net/bokardo/designing-for-sign-up)

Joshua Porter, 2009 (http://www.slideshare.net/bokardo/designing-for-sign-up)

To put it in terms of metrics, at my last job, we experienced an average time on site of less than a minute, big bounce rates, and average page views were barely over 1. Working in social games, the average time on site is right under 10 minutes, with some sessions lasting into double digit hours. It’s difficult to measure pageviews in flash, but it’s hard to imaging a user in the app for 10 minutes without navigating a bit 

But I think with the focus on user experience on the web, the bar for online interactions is rising rapidly. While I cant speak for traditional console gaming, I think online social gaming companies have taken notice and have started to build out user experience teams. The UX team at Kabam is very impressive and I’m excited to be working there.

I’ve gathered a few resources based on the research I have done below, just in case anyone finds themselves in a similar situation.

UX Design and User Research in Games

Better Games Through Usability Evaluation and Testing
Upping Your Game’s Usability
Researching Video Games the UX Way – A Look at How Bolt|Peters Researched Usability for Spore

User Interfaces for Games by David Kieras (PDF)
Game Design Patterns by S Björk (PDF)

The Elements of Player Experience – UX Magazine

Gamer Personas

Gamification Design – Strategic Synergy
Personality Types – Strategic Synergy

Motivations – Strategic Synergy

Unmasking the Avatar: The Demographics of MMO Player Motivations, In-Game Preferences, and Attrition

Motivations for Play in MMORPGs by Nick Yee (PDF)

Facets: 5 Motivation Factors for Why People Play MMORPG’s

Social Interaction Design

The Theory behind Social Interaction Design – Johnny Holland
Gravity 7

Game Design

SCVNGR’s Secret Game Mechanics Playdeck – TechCrunch

Gamification for User Experience

Designing Fun: Games Design Lessons for User Experience – Adaptive Path 

Games & User Experience – Luke W