Laying out the UI elements

When laying out the UI for your game, I strongly recommend checking other games of the same genre and seeing how they implemented their UI. Play the game and see whether it feels good to you.

If you are unsure of how to lay out your game’s UI, I recommend dividing the game’s screen into a guttered grid, like the one shown in the following diagram, and placing items within the non-guttered areas:

Figure 1.2: A guttered grid

You can use as many grids as you want, but laying out the items with reference to the grid will help ensure that the UI is arranged in a balanced way.

In most cases, the HUD items should remain at the outer edges of the grid. Any UI that displays in the center grids will restrict the player view. So, this area is good for pop-up windows that pause the gameplay.

The device your game will be played on is important when determining the layout. If your game is designed for a mobile device and has a lot of buttons the player will interact with, the buttons are generally best suited for the bottom or side portions of the screen. This is due to the way players hold their phones and the top-center part of the screen is the most difficult area to reach with their thumb. Additionally, reaching for this area will cause them to block the majority of the game view with their hand. We will discuss designing UI for mobile more thoroughly in Chapter 2.

You’ll note that when you play computer games, they tend to have much smaller and more cluttered UI than mobile and console games. This is due to visibility and interaction. Clicking on small objects with a mouse is significantly easier than tapping them with a finger or selecting them with the D-pad. Also, the screen resolution is much bigger, which allows for more space to be taken up by the UI.

When trying to determine the size and relative location of UI items, you can reference Fitts’ Law. Fitts’ Law can mathematically calculate how long it will take a user to navigate to a UI item based on its size and distance away from the user’s starting position. I won’t go over the math here (despite the math teacher in me desperately wanting to), but the lessons that can be garnered from Fitts’ Law are as follows:

• Don’t make interactable UI small and far apart
• Make the most important interactable items the largest and near each other

Next, we’ll look at resolution and aspect ratio.