12 min read

With so many different screen sizes, so little space to work with, and no real standard in the videogame industry, interface design is one of the toughest parts of creating a successful game. We will provide you with what you need to know to address the task properly and come up with optimal solutions for your mobile games.a

(For more resources related to this topic, see here.)

Best practices in UI design

In this article we will provide a list of useful hints to approach the creation of a well-designed UI for your next game.

The first golden rule is that the better the game interface is designed, the less it will be noticed by players, as it allows users to navigate through the game in a way that feels natural and easy to grasp.

To achieve that, always opt for the simplest solution possible, as simplicity means that controls are clean and easy to learn and that the necessary info is displayed clearly.

A little bit of psychology helps when deciding the positioning of buttons in the interface. Human beings have typical cognitive biases and they easily develop habits. Learning how to exploit such psychological aspects can really make a difference in the ergonomics of your game interface. We mentioned The Theory of Affordances by Gibson, but there are other theories of visual perception that should be taken into consideration. A good starting point is the Gestalt Principles that you will find at the following link:

http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm

Finally, it may seem trivial, but never assume anything. Design your game interface so that the most prominent options available on the main game screen lead your players to the game.

Choose the target platform. When you begin designing the interface for a game, spend some time thinking about the main target platform for your game, in order to have a reference resolution to begin working with. The following table describes the screen resolutions of the most popular devices you are likely to work with:

Device model

Screen resolution (pixels)

iPhone 3GS and equivalent

480×320

iPhone 4(S) and equivalent

960×640 at 326 ppi

iPhone 5

1136×640 at 326 ppi

iPad 1 and 2

1024×768

iPad 3 retina

2048×1536 at 264 ppi

iPad Mini

1024×768 at 163 ppi

Android devices

variable

Tablets

variable

As you may notice, when working with iOS, things are almost straightforward, as with the exception of the latest iPhone 5, there are only two main aspect ratios, and retina displays simply doubles the number of pixels. By designing your interface separately for the iPhone/iPod touch, the iPad at retina resolution, and scaling it down for older models, you basically cover almost all the Apple-equipped customers.

For Android-based devices, on the other hand, things are more complicated, as there are tons of devices and they can widely differ from each other in screen size and resolution. The best thing to do in this case is to choose a reference, high-end model with HD display, such as the HTC One X+ or the Samsung Galaxy S4 (as we write), and design the interface to match their resolution. Scale it as required to adapt to others: though this way, the graphics won’t be perfect for any device, 90 percent of your gamers won’t notice any difference.

The following is a list of sites where you can find useful information to deal with the Android screens variety dilemma:

Search for references

There is no need to reinvent the wheel every time you design a new game interface. Games can be easily classified by genre and different genres tend to adopt general solutions for the interface that are shared among different titles in the same genre.

Whenever you are planning the interface for your new game, look at others’ work first. Play games and study their UI, especially from a functional perspective. When studying others’ game interfaces, always ask yourself:

  • What info is necessary to the player to play this title?
  • What kind of functionality is needed to achieve the game goals?
  • Which are the important components that need to stand out from the rest?
  • What’s the purpose and context of each window?

By answering such questions, you will be able to make a deep analysis of the interface of other games, compare them, and then choose the solutions to better fit your specific needs.

The screen flow

The options available to the players of your game will need to be located in a game screen of some sort. So the questions you should ask yourself are:

  • How many screens does my game need?
  • Which options will be available to players?
  • Where will these options be located?

Once you come up with a list of the required options and game screens, create a flow chart to describe how the player navigates through the different screens and which options are available in each one.

Mobile Game Design Essentials

The resulting visual map will help you understand if the screen flow is clear and intuitive, if game options are located where the players expect to find them, and if there are doubles, which should be avoided.

Be sure that each game screen is provided with a BACK button to go back to a previous game screen. It can be useful to add hyperlinks to your screen mockups so that you can try navigating through them early on.

Functionality

It is now time to define how the interface you are designing will help users to play your game. At this point, you should already have a clear idea of what the player will be doing in your game and the mechanics of your game. With that information in mind, think about what actions are required and what info must be displayed to deal with them. For every piece of information that you can deliver to the player, ask yourself if it is really necessary and where it should be displayed for optimal fruition.

Try to be as conservative as you can when doing that, it is much too easy to lose the grip on the interface of your game if new options, buttons, and functions keep proliferating. The following is a list of useful hints to keep in mind when defining the functionality of your game interface:

  • Keep the number of buttons as low as possible
  • Stick to one primary purpose for each game screen
  • Refer to the screen flow to check the context for each game screen
  • Split complex info into small chunks and/or multiple screens to avoid overburdening your players

Wireframes

Now that the flow and basic contents of the game interface is set, it is time to start drawing with a graphic editor, such as Photoshop.

Create a template for your game interface which can support the different resolutions you expect to develop your game for, and start defining the size and positioning of each button and any pieces of information that must be available on screen. Try not to use colors yet, or just use them to highlight very important buttons available in each game screen.

This operation should involve at least three members of the team: the game designer, the artist, and the programmer. If you are a game designer, never plan the interface without conferring with your artist and programmer: the first is responsible for creating the right assets for the job, so it is important that he/she understands the ideas behind your design choices. The programmer is responsible for implementing the solutions you designed, so it is good practice to ask for his/her opinion too, to avoid designing solutions which in the end cannot be implemented.

There are also many tools that can be used by web and app developers to quickly create wireframes and prototypes for user interfaces. A good selection of the most appreciated tools can be found at the following link:

http://www.dezinerfolio.com/2011/02/21/14-prototyping-and-wireframing-tools-for-designers

The button size

We suggest you put an extra amount of attention to defining the proper size for your game buttons. There’s no point in having buttons on the screen if the player can’t press them.

This is especially true with games that use virtual pads. As virtual buttons tend to shadow a remarkable portion of a mobile device, there is a tendency to make them as small as possible. If they are too small, the consequences can be catastrophic, as the players won’t be able to even play your game, let alone enjoy it. Street Fighter IV for the iPhone, for example, implements the biggest virtual buttons available on the Apple Store.

Check them in the following figure:

Mobile Game Design Essentials

When designing buttons for your game interface, take your time to make tests and find an optimal balance between the opposing necessities of displaying buttons and saving as much screen space as possible for gameplay.

The main screen

The main goal of the first interactive game screen of a title should be to make it easy to play. It is thus very important that the PLAY button is large and distinctive enough for players to easily find it on the main screen.

The other options that should be available on the main screen may vary depending on the characteristics of each specific game, although some are expected despite the game genre, such as OPTIONS, LEADERBOARDS, ACHIEVEMENTS, BUY, and SUPPORT.

The following image represents the main screen of Angry Birds, which is a perfect example of a well-designed main screen. Notice, for example, that optional buttons on the bottom part of the screen are displayed as symbols that make it clear what is the purpose of each one of them. This is a smart way to reduce issues related with translating your game text into different languages.

Mobile Game Design Essentials

Test and iterate

Once the former steps are completed, start testing the game interface. Try every option available to check that the game interface actually provides users with everything they need to correctly play and enjoy your game.

Then ask other people to try it and get feedback from them. As you collect feedback, list the most requested modifications, implement them, and repeat the cycle until you are happy with the actual configuration you came up with for your game interface.

Evergreen options

In the last section of this article, we will provide some considerations about game options that should always be implemented in a well-designed mobile game UI, regardless of its genre or distinctive features.

Multiple save slots

Though extremely fit for gaming, today’s smartphones are first of all phones and multi-purpose devices in general, so it is very common to be forced to suddenly quit a match due to an incoming call or other common activities.

All apps quit when there is an incoming call or when the player presses the home button and mobile games offer an auto-saving feature in case of such events.

What not all games do is to keep separate save states for every mode the game offers or for multiple users.

Plants vs. Zombies, for example, offers such a feature: both the adventure and the quick play modes, in all their variations, are stored in separate save slots, so that the player never loses his/her progresses, regardless of the game mode he/she last played or the game level he/she would like to challenge. The following is a screenshot taken from the main screen of the game:

Mobile Game Design Essentials

A multiple save option is also much appreciated because it makes it safe for your friends to try your newly downloaded game without destroying your previous progresses.

Screen rotation

The accelerometer included in a large number of smartphones detects the rotation of the device in the 3D space and most software running on those devices rotate their interface as well, according to the portrait or landscape mode in which the smartphone is held.

With games, it is not as easy to deal with such a feature as it would be for an image viewer or a text editor. Some games are designed to exploit the vertical or horizontal dimension of the screen with a purpose, and rotating the phone is an action that might not be accommodated by the game altogether.

Should the game allow rotating the device, it is then necessary to adapt the game interface to the orientation of the phone as well, and this generally means designing an alternate version of the interface altogether. It is also an interesting (and not much exploited) feature to have the action of rotating the device as part of the actual gameplay and a core mechanic for a game.

Calibrations and reconfigurations

It is always a good idea to let players have the opportunity to calibrate and/or reconfigure the game controls in the options screen.

For example, left-handed players would appreciate the possibility of switching the game controls orientation.

When the accelerometer is involved, it can make a lot of difference for a player to be able to set the sensibility of the device to rotation. Different models with different hardware and software detect the rotation in the space differently and there’s no single configuration which is good for all smartphones. So let players calibrate their phones according to their personal tastes and the capabilities of the device they are handling. Several games offer this option.

Challenges

As games become more and more social, several options have been introduced to allow players to display their score on public leaderboards and compete against friends.

One game which does that pretty well is Super 7, an iPhone title that displays, on the very top of the screen, a rainbow bar which increases with the player’s score. When the bar reaches its end on the right half of the screen, it means some other player’s score has been beaten. It is a nice example of a game feature which continually rewards the player and motivates him as he plays the title.

Experiment

The touch screen is a relatively new control scheme for games. Feel free to try out new ideas. For example, would it be possible to design a first person shooter that uses the gestures, instead of traditional virtual buttons and D-pad? The trick is to keep the playfield as open as possible since the majority of smart devices have relatively small screens.

Summary

To learn more about mobile game desgin, the following books published by Packt Publishing (https://www.packtpub.com/) are recommended:

Resources for Article:

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here