The interface design of mobile games is always a HUGE challenge. It requires such a wide range of skill sets to take it from concept to completion. On Top of that, most mobile games are their interfaces, with a vast majority of the game taking place within the interface, unlike many of their PC & console cousins. To make it exponentially harder, interface designers must also understand monetization, retention, and many other topics related to mobile games.

There are many reasons why designing the interface for a game is so complicated, and it’s important that you try to understand all of the various problems you will or might face in order to make your game successful. Whether you are a UI or a UX designer, do both, are a game designer, a Product Manager or are involved with the design of the game's interface in any ways, it’s important you keep some of the interface design best practices in mind as you work.

This is an initial article for people who are new to or interested in mobile game interface design. In the coming weeks and months we will begin to dig much deeper and share with you more advanced techniques to make your interfaces much better.

An Introduction to Mobile Interface Design

What is the difference between UI and UX?

If you are new to interface design it is important that you understand the differences between UI and UX. At the most basic level UI (User Interface) is more about making an interface look good (ie the art behind it), while UX (User Experience) is about how the interface functions. So, to be a good UI artist, you not only need good art skills to draw the art, but you also need to understand great design aesthetics, and many different rules for how the UI should function. This requires a lot of experience and a willingness to also understand at least some aspects of UX.

As a UX designer, your job is to design the flow of the experience, what each screen does, how the menus function, and everything related to that. UX designers are the ones to make the interface both fun and the experience great.

In some companies, a single person does the UI and UX, but these are different skills and not everyone can do a great job at both. When you combine this with the need for someone to implement the interface (usually requiring coding skills), and make it work properly with the game design, you suddenly need four different skills sets or more to really properly design and implement an interface. This can be extremely tricky for most companies and almost impossible for most interface developers to accomplish as it requires a broad set of skills and a lot of experience.

Integrating UI/UX and Game Design

When designing the interface for the game, it is important that an experienced game designer be involved in the process. There are usually many great design ideas which sound great on paper, but when you try to implement them into the interface, you realize that they are just way too complicated, and just impossible to actually properly implement, forcing the game design to change or be simplified in some minor or drastic way.

For example, say you can collect a ton of creatures in the game (say 100 to start), and each is represented by a card/icon. This isn’t too bad to manage, but now imagine if each of these could have 1-5 stars or maybe 3 levels of rarity, which would require each of these to be another card. Suddenly now you have 300-500 possible cards. You can see how this can quickly spiral out of control. So, even a simple design idea can complicate the life of an interface designer in a major way.

The most common problem with interface design is in trying to very simply relay the amount of information that the designer and game need/want you to show, while fitting it all on screen and making it easy to use. This is why the game designers and interface designers MUST work closely together to make it as usable as possible to start with, as this will get even more complicated when the UI artist wants to make it look pretty, and the PM wants to adjust things to make it monetize better.

The Complexities of Design

Creating the interface UX for a mobile game is a LOT harder than those of console and PC games, as many (well most) mobile games are mostly their interfaces which players interact with. In the past, game developers had to often only create a front end interface to start the game and access some options, an in game HUD which relayed some gameplay information, and maybe some inventory or other simple screens to access while playing. The rules have changed a lot, as have the complexities of small screens, touch interfaces, and the other challenges of mobile games.

One of the biggest challenges when designing the interface is understanding who on the team is responsible for which aspects of the UI/UX. In order to properly design and implement the interface for a game, you will need people who can: ensure the user experience and flow is great, make sure it looks great, can build the optimized art assets, can animate it, can sync it with the game design, rapidly prototype it and can implement it into the game engine. So, this often means that all departments will be involved from: game design, art, engineering, product management, usability and more. Even other departments like audio, localization and production will often be heavily involved. However, one of the honest challenges is that many teams lack one or more senior people in these areas, or lack the experience for these teams to skillfully coordinate their efforts into a cohesive product.

Another problem is that in mobile game development, many teams often work in a very agile design process, which often means that specs and documentation are either non existent or severely out of date. This can also lead to a lot of challenges for the interface design team. This challenge requires constant communication and rapid prototyping to keep the interface design correct.

Top 10 Mobile Game Interface Design Tips

Here is our top 10 list for how to improve your games….. interface and hopefully make your game more compelling and successful.

1. Rapidly Iterate & Prototype - Make it interactive as fast as possible.

It’s important to rapidly prototype your interface as quickly as possible. There are a lot of tools to rapidly prototype, but no matter what you use, try and get it up and running quickly so you can see if it makes sense. You want to pay extra close attention to the UX flow (how complex is it to navigate), how readable the fonts are, how large the buttons are, and MUCH more. Make sure you get the interactive version onto multiple devices to test and don’t just test it on a computer. Make sure you iterate as many times as possible during this stage.

2. Utilize Monetization - Understand the Needs of Monetization within the interface.

This is a long and complex problem, which we will cover in more depth later. But, in short, you need to understand how your game, and other games, effectively (or ineffectively utilize the elements within the interface to help monetize the game better. Some of the factors might include: button size and placement (emphasizing buttons to buy things and minimize close buttons and such for example), glow or animate icons for special events, sales or other key things to draw attention to them, place important features in prominent locations, use the right colors, or increase the size of buttons you want players to touch first. There are many tricks to think about and use.

3. Ensure Continuity and Consistency - Make sure everything works together.

It is really important to ensure that the same conventions which are used in the game are utilized everywhere and in the same ways. Don’t change conventions in one menu if at all possible, as this will confuse players. This can include the button or element shape, placement, color, size, function, animation or anything else which makes it recognizable. This also is important in the use of icons, and in using them appropriately and consistently, especially when related to money and resources or other global things players need to always understand.

Many games utilize different conventions for the same thing, or different conventions which deviate from recognized industry standards. A common one is the use of a back/close/cancel button. Some games have a consistent red X in the top right hand corner, while others use a back arrow in the top left, others use an actual cancel button, and some choose to just have you tap off the menu to close it… yet, some games utilize aqAll of these together. Be consistent in how players navigate and interact with your game.

4. Define States - Understand the different states the UI and each element goes through.

Each screen and many buttons might have many possible different contextual states which it can be in. For example, a buy button might be in one state if the player has the ability (resources) to buy the item, but can change states to a “Buy More Resources” button if the player is short on resources, which will also pull up a different menu when clicked. Other states might be if players have completed a series of conditions which would allow them to do something. For example, maybe the player is trying to fuse several lower level characters into a higher level character to help it level up and improve faster, and the “fuse” button may not become active until the player puts all of the correct characters into the menu properly. In some cases, there could be several different elements whose context changes based on players actions. It’s important to understand the different states of the interface.

5. Playtest - Test on mobile devices and tablets.

It’s very important to test your interface on multiple devices of various sizes. Many developers only test on larger tablets as it’s convenient and fail to test them on smaller phones or min spec devices. This often leads to buttons being too small or fonts being too hard to read.

One idea for quickly testing your mockups is to make a mockup of the right size and put it on your device and view it like a photo. Dropbox works well for this. This is a simple way to see how large your UI elements are on various screens.

6. Use Icons - Use graphics whenever possible or keep graphics minimalistic.

There are two different schools of thought here. For games, I believe that utilizing a more iconographic approach to interface design is clearer and sexier. Using icons will allow you to show something small (the icon) instead of a LOT of text and can make it a lot cleaner for players.

However, in more modern UI/UX design conventions, many people argue now that in order to make the UI super fast and cleaner, all text or mostly text only approach should be used to make the UI a LOT faster and more responsive. Whichever approach you use, understand the pluses and minuses of both.

7. Simplify - Keep it simple and clear.

Making a simple UI is a LOT harder than a complex one. Keep iterating on the interface as much as possible until it is as simple as possible. This may take MANY iterations, but the simpler. cleaner and easier it is to use, the more users will appreciate it. Try and hide depth in deeper menus if it is needed, so that the core user experience is as simple as possible.

8. Fast - Keep it responsive and quick to load.

It’s critical that the interface is as responsive as possible. Players should never have to wait for the interface. Make sure each screen, each animation, each menu pops up responsively and instantly if possible, don’t make players wait.

9. Colors - Use Color in a consistent and meaningful way, not just to look good.

It’s really important to use colors correctly in your interface for anything that needs to have important logic behind it. The use of reds, greens, and other standard colors have certain preconceived meanings to people which you must be aware of. Color can be a HUGE indicator of a state or function of a button. Think about things like how the color should change with a state change of a button. For example, when players are buying or selling a resource, is the color of the icon and amount the same for both, or does it change to help quickly show players if they will gain or lose a resource?

10. Readable Fonts - Makes sure you can read fonts.

Fonts will often look great on a tablet or big screen, but are they legible on a small phone screen and lower resolutions? A LOT of games have fonts which cannot be read by most people. Make sure your fonts can be read at all resolutions, and make sure you have solutions for how texts can flow, scale or scroll to make it legible to players.

Summary

This is our current top 10 list of advice for making great game interfaces, but it’s only a few rules and MANY more exist. Over the coming weeks we will release more lists that talk about many different areas of interface design, with more rules for you to enjoy. We hope these rules, even though many are simple and common sense, will inspire you improve your game interface design methods and make better games.