A key part of creating a new mobile game is designing the interface and making it accessible to players. The UI (User Interface) design is an integral part that affects the gameplay, game theme, and user experience. But what is UI? How can you get the best out of it, and what should you pay attention to? We’ve put together some tips to keep in mind.
When talking about UI design, there is a tendency to parallel it to a similar term: UX – User Experience. Although the terms do overlap and even complement one another to a certain extent, each serves a different purpose. UX defines the user’s experience: Is there a logical sequence between the levels, whether it is easy to navigate from place to place, what problems the user can encounter, and how to solve them.
In contrast, UI is the design of the visual interface that you use to interact with the application. UI designers are responsible for designing elements and screens while making sure that the UI design communicates the planned UX design. UI designers are also responsible for creating a consistent design language across the game.
What is the difference between mobile UI design and WEB UI design?
The goal of UI design for mobile is the same as for the web- the design has to convey the look and feel of the game and to provide a sense of progress and accomplishment. A good UI facilitates the user’s interaction with the app making it as efficient and straightforward as possible. The UI has to provide the relevant information quickly and clearly and then to get out of the user’s way.
We had a chat with Ori Naor, our Marketing Creative Director, that helped us put together 8 tips for UI design in Mobile:
1. The UI must be intuitive to the player. A successful UI is one that is clear to the user and works the way the user expects it to work. Buttons, for example, are a vital element in creating a smooth flow in the game. Designing the buttons’ size, shape and position, emphasizing the play button and reducing the exit button, are all vital tools that help to navigate players to the right place. Another helpful tool is adding animations and special visual effects to highlight important events in the game or different sales. With that said, you have to use these effects to the right extent as the excess of animations can cause performance slowdown that will frustrate the user and ultimately impair the UI’s intuitive flow.
2. A good UI communicates the necessary information clearly and quickly. Using icons on the game buttons instead of text will give a cleaner and tighter appearance. Also, using an icon instead of text will prevent problems caused by translating the game into different languages. For example, when a text is translated into another language, it may exceed the boundaries of the button and disrupt the formatting. It is also important to use commonly agreed symbols. For example, if you choose to use a circular arrow to indicate replay of a level, you can’t use this symbol for any other purpose or else you will confuse players.
3. Screen Resolution. Items that are rich in details that look great at a computer resolution will not necessarily look good on mobile. Try not to overburden the design with details and use the Navigator in Photoshop to compare how the item looks in different sizes.
4. Importing a game from computer to mobile. When importing games from one platform to another, it is important to remember that in mobile, the player’s finger replaces the game tools on the computer or the console (mouse/keyboard/joystick). Try to design the game to match the new format. Design large buttons and arrows with large, clear icons that will allow the player to click on them easily. Pressing a wrong or too small button can frustrate the player.
5. Use the right colors. It is important to use the right colors not only as an aesthetic design element but as a logical tool. Using red or green colors on the buttons adds a commonly accepted meaning to the action that the designer must be aware of.
6. Continuity. There is more than one acceptable way to present different functions. For example, an exit button can be an X or an exit arrow or a door icon to exit the level. Using different symbols for the same function in the same game will confuse the player. It is important to consistently maintain the same way to display the same function throughout the game.
7. Font. In UI design the font must be readable in any screen size. Thick fonts will work better in different sizes because it is easier to read and understand them. Thinner fonts are less readable at different resolutions.
8. Maps. The purpose of the map is to contribute to the player’s sense of progress in the game and to be a navigational intersection for the game’s various features. It is better to use a simple looking trail that will give the player a sense of progress. The map should continue the design language of the game and correlate with the UI design. Therefore, when designing the game map, you need to take into account the buttons and their placing. The buttons on the map will usually appear in agreed-upon locations – for example, the sales will appear on the map on the top left corner of the screen, and not all the four corners of the screen will be filled in, so the player will not have to work hard to find what he needs.
We hope that the tips given to you will help you design UI in mobile games. Our most important advice? Let the design blend naturally with the game, make it simple, clear and colorful, and try to ensure that your players will get the most entertaining and pleasant gaming experience.
