Skillz Blog

Designing the UI, Controls, and Visuals for Your Competitive Mobile Game

Author: Evan James, Head of Product Marketing

When designing a competitive mobile game, the user experience is essential for player engagement and retention. A game’s user interface (UI) encompasses all of the elements that allow players to provide input and obtain feedback from the software. A well-designed UI is vital for creating a fun and satisfying player experience. In this third installment of our game design blog series, we’ll outline best practices when designing the UA, controls and visual elements to a competitive mobile game.

User Interface

To provide the best possible competitive experience for your players, pay special attention to vital elements of the game’s UI. Some key items to consider are:

  1. Text: Ensure that the text size is large enough to read comfortably on a mobile phone. Use simple, easy-to-read fonts, and avoid overly-stylized fonts.
  2. Numbers: Include commas in all numbers over 999. Avoid decimal values unless they are necessary for gameplay. Update crucial numbers, such as score, in a way that is synchronized with gameplay and sound effects. This way, players can intuitively understand the changes that take place.
  3. Heads Up Display (HUD): Display important information such as game score, timers, and progress in a clear, easy-to-read layout along the top of the screen. Ensure that HUD items do not crowd each other or obscure the gameplay.
  4. Pause/Menu Button: Provide a pause button that hides the game screen and displays basic how-to-play information, a “quit” option, and/or audio settings. Place the pause button in a location where a player is unlikely to accidentally tap it.
  5. Blocking: When designing the layout of the UI, keep in mind that players are using a touch screen, and therefore, certain areas of the screen will be blocked by the player’s fingers during gameplay. Avoid placing important information in these blocked areas. It is recommended to place important information at the top of the screen, rather than at the bottom.

Controls

Generally, game controls should be intuitive and designed with the form factor of mobile devices in mind. Standard mobile control gestures such as tapping, dragging, and swiping should function as users would expect whenever possible. Try to avoid creating custom gestures or redefining standard gestures unless the gameplay absolutely requires them. Additionally, take care to avoid designing game controls that interfere with standard system screen-edge gestures, such as swiping up from the bottom of the screen or swiping down from the top corners on iOS.

When testing a game, take into account the feedback of the target audience and fix usability bugs before adding new features. Consider the difference in a player’s interaction with controls for a portrait view game versus a landscape view game. For example, the way a player holds their device when interacting with a portrait view game tends to be casual, sometimes even one-handed. On the other hand, landscape view games need both hands positioned at the two bottom corners of the screen in order to maximize performance.

Visuals

When designing a game for competition, it is important to eliminate unintentional visual obstacles that interfere with gameplay. Avoid having unclear graphics and using visual effects that make the screen unreadable for significant periods of time. A game’s visuals should enable players to compete at their best, never getting in the way of good decision-making.

When creating game art, design clear distinguishable game objects that use a variety of shapes and colors. This will minimize the amount of time that players spend reading the screen while maximizing player activity. Use visual effects wisely to celebrate exciting moments without cluttering up the screen or obscuring the player’s view.

As a general practice, avoid causing the player fatigue. If a player is strained or exhausted at the end of a game, his or her desire to play again will be diminished, and the player may never end up returning to the game. Visual fatigue is caused by flashing or flickering effects, overly busy graphics, hard-to-read text, or grainy, pixelated images.

The Relationship Between Game Design & Game Success

Designing a great UI with efficient controls and straightforward visuals is the first step to ensuring your game’s long-term success. It provides players with a continuous flow of important information. By creating an interface that provides engaging and satisfying content, you will build loyalty and player satisfaction. Satisfied players are more likely to recommend your game to others and more likely to remain engaged with the game over time. For more tips on mobile game design, check out our blogs “Key Design Elements For A Skillz-Powered Multiplayer Game” and “Key Considerations When Designing Your Game’s Core Loop.”

If you’re a developer interested in turning your game into a competitive mobile eSport, check out the Skillz Developer Console!