INTRODUCING GAME UI PATTERNS

Published on 20th July 2017. Written by Dan.

 

 

The Moov2 team has wanted to make a UI design resource for game developers for quite some time now. Having worked on similar challenges in mobile and web design, we felt that it was much easier to get help with UI design patterns for both of those than it was for games.

That’s why we’ve finally put together gameuipatterns.com. The concept of it is pretty simple. It’s essentially an index of some commonly spotted UI design patterns in games – such as a minimap – which features basic definitions, tips on how to use them and calls for submission to help us populate it further.

So far, the response to it has been pretty great. We sat on the front page of the Game Dev sub Reddit for the whole week after we launched it on the 11th July, generating 15,000 page views from 5,500 users. That’s why we thought it made sense to spread the word about it a little bit further.

Here then are four common UI patterns that we’ve identified from games (and are on the Game UI Patterns website) for you to learn a little bit more about.

1) Compass

Blueprint pattern of a compass


The compass, as with its real world counterpart, is designed to help a player navigate within a game world. By determining the players location in the in game map, working out which way they’re facing and providing instruction about which way they are facing, it’s an invaluable way of finding your way around your world.

When to use it?

Compasses are essential for any games featuring large expansive maps. By providing an easy way for players to briefly glance at the screen and determine which way they’re going, a well deployed compass both helps to navigate and to stop the player jumping in and out of a larger game map to find their way round.

Compasses are also useful because they’re a great way of showing more information without giving too much away. Most games that use compasses include north, south, east and west, but they also tend to include icons depicting points of interest that you can travel towards. This encourages player led exploration, but keep things mysterious enough that players want to get there.

Case study: No Man’s Sky

Hello Games’s procedurally generated space adventure hugely benefits from the presence of an in game compass. As well as providing basic navigation for players as the hop from plane to planet, it helps them locate crucial in world points of interest – such as the location of the player’s ship – to make sure they don’t get cut adrift in the world.

Read more at GameUIPatterns.com

2) Quest menus

Blueprint pattern of a quest menu


When to use it?

If your game gives the players the chance to rack up plenty of different missions or quests, you’ll need to make sure they have some sort of menu to keep track of it.

This makes quest menus an essential part of just about any RPG or open world adventure game. But there are other types of games that can perhaps benefit from having a quest menu of sort.
Games that offer daily challenges or specific tasks may need one to help players keep track of their progress. Other genres of games like management sims can also benefit, particularly when the micro-managing of running an in game economy, team or business means its easy to lose sight of bigger goals.

Case study: The Witcher 3

The Witcher 3’s quest menu can get unwieldy quickly, particularly under the sheer weight of in game side quests you can unlock.

However, the addition of a recommended level, a sigil denoting which part of the game map the quest is in and additional details about what to expect from each mission helps the player to prioritise which ones to do. This means they can easily find a quest that suits their current level, what they’re doing in the world and what interests them easily.

Read more on GameUIPatterns.com

3) XP bar

Blueprint pattern of an XP bar


Experience (XP) bars tell players how close they are to achieving the next level for their character, an in game item or a trait. They help players to understand what they need to do to progress, while also slowly filling up to give the players the sense that they’re improving.

When to use it?

XP bars are required in games where performing well or completing tasks leads to the player increasing their skillset. It’s common to see in MOBAs, MMORPGs, RPGs and first person shooters, but the UI pattern can be applied anywhere that the developer or designer needs to show progression.
The question is whether the designer chooses to reveal it. On the one hand, an XP bar is a great motivator for pushing people on to something bigger and better. It’s also really important in games where strategically levelling a party or a character is necessary to beat in game objectives, meaning that sometimes a bar does have to be present.

However, on the other hand, there are arguments against showing it. By only telling the player that they’ve levelled up or evolved a character when they reach a landmark, a developer can choose to make their game slightly obtuse in return for a greater sense of reward when a player hits a high level.

Case study: Star Wars Battlefront

In Star Wars Battlefront, players only see the XP bar after a round. If they fight well in the game, they will be told that they have levelled up. But the points they generate through objective score, victory bonuses, kills and assists is only shown visually by an XP bar at the end of the game.
This encourages the player to focus on fighting to improve their level in the middle of the game, before giving them a pause to tot up their XP once the battle is over.

Read more at GameUIPatterns.com

4) Weather indicator

Blueprint pattern of a weather indicator


A weather indicator lets a player know what’s happening – or about to happen – in the game’s climate. It informs players of whether sun, rain or something else entirely is on the way, helping them adapt along the way.

When to use it?

Many games do not have in game weather, which means they needn’t use it. But if your game features a weather system and it affects the way it plays, a weather indicator is a necessary UI item.
The reason why is that players need to know what is happening to make choices. For example, players of sports management games need to know if it is particularly hot because their players may tire. In some adventure games, players need to plan around rain because it makes surfaces slippery. And plenty of survival games reduce health if the weather is too hot or cold.

A weather indicator gives the player a fighting chance of staying ahead of the climate or, at the very least, helps them to hunker down until the worst of it is over.

Case study: The Legend of Zelda: The Breath of the Wild

The latest Zelda has a very clever weather indicator. As well as showing you what the current weather is like, it also marries it to the system for telling you the time. This means you can see what weather is about to sweep through and plan accordingly – helping players navigate through tricky conditions.

Read more at GameUIPatterns.com