UI Design Tips for smartphone games
Smart phone games are touching the lives of millions, This is a basic guide — please contact me via twitter if you have questions @RareSloth.
ADAPT to change
There’s nothing worse than seeing a game with a horrible UI, it detracts from the experience of your game. This happens often when interaction design takes the back seat to other more “important” tasks. While Yukon Warrior was being developed, our UI changed multiple times. Not because we were lazy and didn’t think it through, but because the structure of the game changed, requiring a different design.
Keep it LIGHT
You don’t need to get all crazy with your UI, just keep it light and simple. Each additional element will add more cognitive load for the user. Your goal should be for the player to consume more of the game, not more menus.
THEME your UI elements
We admit that the style of our UI doesn’t really fit the game very well. However, we think its passable because the game itself is light and the player spends very little time in the menus. Instead of having a different UI for each “wave” an interactive map would have worked better — just think of Mario’s “world”.
Focus on the CONTENT
Players don’t want to sit in front of UI’s — they want to be interacting with the bacon of the game. Every time you put a UI element in front of a player you’ve just removed the player from the experience to deal with a boring UI.
BAKE it in
The most common paradigm is to put some boxes on the screen and make the user input some kind of action. Instead try to bake this into the game so it feels more like a part of the game. We baked our tutorial into the game. We could have put a box with some words and an animation — instead we taught the player by putting these buttons directly on the screen.
SKETCH the full flow
This is so basic, but people don’t seem to get it. Sketching saves you time before you take it into high fidelity. We probably made close to 100 sketches of just the UI over the course of development.
Pixel PERFECT
If you want your design to be pixel-perfect, mock up your design in Fireworks or whatever wire-frame program so you can actually see what it looks like before you code. Doing this is faster than realizing after 2 hours of coding that it doesn't look right.
I WON’T READ
Unless your game is story heavy, keep in mind that a majority will NOT want to read anything. Your game should not need a manual for players to understand how to play it.
GUIDE the user
Think of the user as a sheep that you just need to lead to complete an action, all it takes is a little treatment that catches the user’s attention. We have a 1-minute tutorial for our game that teaches the player exactly what they will need to do throughout the rest of the game with 3 words and some animation. Here we are guiding the user to go and upgrade because there are some upgrades that they can afford.
Provide HIERARCHY
These bold titles are naturally going to be read first, because it attracts my attention. What you don’t want to do is create competition between multiple elements. You want a nice flow that guides the user’s eye to what they should be looking at and in what order.
Leverage FAMILIARITY
Our game is best played the same way you would hold a game boy. However, when testing our game, we discovered the “one tap culture”. Most people understand the simple tap action. When you start using some of the more advanced gestures, you begin to lose users.
Use advanced gestures minimally as most people will immediately follow their learned behaviors. Whats the familiar location for a back button on an iPhone? Yes, the top left. Don’t mess with learned conventions, its frustrating for your users.
Use INSPIRATION
There’s no harm in getting inspired with what other people are doing — you’ll begin to understand better what can be done. What kinds of apps do you feel are well-designed? Focus on what they’re doing and replicate it if it makes sense. Search for mobile design patterns and you’ll find plenty online.
Maintain FLOW
To maintain a state of flow, see my other article here.
Create CONSISTENCY
Make sure that your users don’t have to learn 3 different types of menus with different styling. This ties into the familiarity point above. Establish a design pattern to stick with.
Provide FEEDBACK
Did I just buy something? Did I just do something? What just happened? You can avoid all of these questions and confusion by providing the right feedback. Sometimes you don’t need a lot of feedback, maybe its just color filling up a row like we did here with our upgrades.
With this the player knows that they bought something, and how close they are to maxing out that particular upgrade — all simply by using color and animation.
PLAN ahead
If you know you are going to be adding other features in the future, try and account for that in your design. If you start changing your interface after players get used to one design, they are not going to like that. People are naturally resistant to change — remember how much of a freak out there was after Facebook changed their design?
You’ll notice that Hearthstone by Blizzard did something interesting here. They must have some plans for an additional feature or expansion later on. They designed with this in mind and now all they have to do is add another button, they don’t have to change anything — smart!
