What is the secret of designing mobile games? Everything a player can possibly need should be placed in one window: primary and secondary information, a nice header, tracery, and some art. The problem is that you will run out of the screen space with just the first thing.
The main goal in designing a mobile game is to make sure that UI is really clear and easy to use.
Among other things, small detailed images don’t work at all. You can’t just take an image from a big browser game, shrink it, and put it into a mobile device screen.
- Information architecture and UI
Game designers often think that to solve a problem completely, all this information, all these actions should be crammed in one window.
But it’s not like that! If this happens, then, most likely, the user’s key task was misunderstood, and, as a result, it was incorrectly divided into subtasks. Working with such an interface, the user will have to do it every time on his/her own. And, believe me, this is how it will be. That’s the way the brain works. It has been tested and proven many times.
Bellow is a slide from Juggernaut Wars. The player has already chosen a character, examined his items in the opened window, and decided what to do next. And only after that, the player’s attention is focused on the single task — upgrading the item. To solve the task, the player is offered the most convenient tool.
When the game acquires certain information architecture and the key features turn into steps, it is necessary to pay attention to each window individually. It is important not only to present the information, but also to work on its perception. It is better to divide content into logical blocks unified by a common task.
For instance, in Juggernaut Wars, it is clearly shown that the level can be increased by pressing “+”. It is also clear that collecting items is linked directly to “promoting”, and the progress bar at the bottom may somehow affect the evolution. When all this is done, it seems that everything is logical and obvious. But there are many examples of interconnected interface elements being scattered throughout the window in complete disarray or being arranged in a way that makes using them inconvenient.
If you take care of it at the designing stage, the user will not have to worry about the laws of your game world. There will be no obstacles in the gameplay that stress the user.
These small details define the quality of the final product, and at the end you either get a loyal user or you don’t. Even the user can’t tell you why.
- Context help
Context help is OK, but the player only uses them as additional information. So, when working on the interface, we always remember to add images which will allow the player to quickly identify and remember our objects.
In general, the primary information involved in perception is the shapes and primary colors — red, blue, yellow, and green. Therefore, for the menu items to be easily found, processed and remembered, we make them look different. A good menu is the one that features clearly different and easily recognizable objects, for example, a brown backpack, a green book, a yellow cogwheel.
Object size, color and animation are not only important for fast searching and perception of information. They also help set priorities within the window. Obviously, a big bright or flickering button is important as it makes you focus and calls for action. It is important not to overdo it: It would be a big mistake to lead the player to the button which is not currently relevant or available. Let the window elements light up sequentially, leading the player with the flow of the game. It really helps to facilitate routine actions.
Context help is what a lazy user, who gradually gets used to the comfort, particularly appreciates.
Take Juggernaut Wars as an example.
In this case, we have written a brief but clear prompt on what gaming stats are about. With the “i” icon we let the player use this prompt on the spot, wherever characteristics are mentioned.
Another example of reminders is the red indicator that tells you what item you need right now. If you tap this item, you will be prompted who specifically needs it.
On the right, you can see the widget that reminds you why you entered the fight and how many resources you need to collect.
Don’t forget that the users are different. Most players are right-handed, so the most frequently used elements should be positioned on the right, because otherwise, user would be forced to stretch his/her hand to the left side of the screen, then remove it to see what has changed on the right, then stretch again, and so on.
When designing a mobile game, please get acquainted with the Fitts’s Law (Paul Morris Fitts (1912–1965), an American psychologist, who, among other things, did experimental psychology at the University of Rochester).
Fitts’s law says that the time required for moving to any item is a function of the ratio between the distance to the item and the size of the item. It means that the closer and the bigger the target object is, the faster the user will process it.
For example, in Evolution: Battle for Utopia this law has a very specific gaming value. There is a special aiming mode, in which, if hitting the enemy’s small head, the player inflicts a critical hit puncturing the armor, and is rewarded with a fountain of enemy’s blood (i.e. the player is rewarded for aiming and hitting the less noticeable point).
The interface should always provide feedback for the user. Addressing it means that the user is waiting for a response. Pressing the button, the player should clearly understand what happens as a result. If the event doesn’t occur, it should be clear for what reason and what to do next. If a button is locked without any explanation, you confuse the user. Or you simply force the user to click on this button in the hope of getting a hint. The worst thing is when there is no hints. It turns out that the action just can’t be performed, period.
You should not display empty windows or areas that can potentially have letters, items, or anything else (but are empty at the moment); instead, explain what is happening. Just write something like “There is no new mail today.”
It is important to note that all of this is the tip of the iceberg. There are many approaches, and the number of opportunities to study user behavior increases with each passing day. We pay as much attention as possible to product convenience at all stages of its development, so we end up having a really great product.
The text is based on the report presented by our UX expert Olga Lisenko at White Nights 2016 in Saint Petersburg.