Great user interface (UI) design is really important for just about any video game. Displaying relevant information to players in an understandable, convenient and attractive manner will help them engage with the game, keeping them immersed for longer.
However, what’s considered “great UI design” changes from game to game. For example, overloading a player of a casual mobile puzzle game with a load of performance stats isn’t appropriate. But making those numbers easily accessible to someone playing a competitive multiplayer game – like a class based FPS or a MOBA – could be crucial.
Here are our thoughts on UI design for four common games genres and hopefully, some useful tips.
First person shooters
First person shooters (FPS) tend to be frenetic experiences. On top of the natural confusion caused by flying bullets, the player’s restricted perspective and the chaos of war, recent releases like Bethesda’s Doom reboot and Titanfall 2 have emphasised speed in their design – upping the pace further.
The challenge for UI designers is to cater for this rhythm naturally. For the most part, this means providing only the most relevant information to the player on screen to prevent unnecessary distracting clutter.
What is defined as relevant will change from shooter to shooter. In relatively casual FPSes like Overwatch, the main on screen information consists of a health bar, an ammo indicator and an “ultimate” charge counter. But in more detailed shooters like Battlefield 1, which focuses on a strategic “realistic” experience, it swaps in a mini map to help players make a decision.
The key thing is that both games only keep the most relevant information up on screen during a round. However, that doesn’t mean that other information – such as how a gun works or how to play with a character – isn’t excluded from the game.
Instead, information like that is best saved and displayed in fluid menu screens that display whenever a player dies. This allows them to quickly reconsider their build, load out or character choice, before immediately diving back into the action. This helps UI designers to offer the best of both worlds; a fluid uncluttered experience during a round, followed by some pacey planning in breaks.
Action adventure games
The action adventure genre offers up so many different game experiences. The open world style of The Legend of Zelda: Breath of the Wild contrasts notably with the linearity of games like The Last of Us, meaning there are some differences in UI best practices.
That said, there are a few things these games share from a UI perspective. The first of those is a need for an accessible and understandable inventory. Knowing how much ammo a gun has or whether a weapon is about to break is crucial, so it’s essential for UI designers to provide that through easy to read on screen numbering and other visual techniques (e.g. soon to break weapons in the latest Zelda flash red in the menu screen).
Second, action adventure games need to provide players with information to guide them through the world. This may be through a map, through the use of line of sight, the use of on screen elements like objective markers or a combination of all of the above. But crucially, it needs to be done in moderation. Some Ubisoft adventure games have been criticised for overburdening players with icons and information, implying that it's sometimes better to strip back a bit to allow players to feel like they’re in the hot seat.
Lastly, non-linear action adventure games need manageable quest screens. Allowing the player to easily identify key quests, side quests and other types of mission through simple visual indicators helps them decide what to do more easily.
RPG The Witcher 3 has a number of lovely indicators in its quest menu screen that help players to decide what to do. By providing an estimated level needed for completion, marking it red if a player isn’t at that level and then putting it next to a crest associated with a region of the game, it helps players easily work out whether a quest is near them and whether they can take it on.
Racing games may look as if they’re all about going as fast as possible, but the secret to the design of any good racing game is letting the player know exactly where they are at any given moment.
In the midst of a frantic game of Mario Kart, a more drawn out race in Project Cars or even in a racing mini game contained within another larger game, the UI has to let the player know how they are doing at a glance.
Information such as the player’s position in the current race, their current speed, the item they’re holding (if it’s a kart racer) and the track map has to be visible during the race. Pausing the game to pull up stats mid race simply disrupts the flow, meaning that key information has to be front and centre.
However, there are two things to consider in relation to that. The first is where that information is placed. Typically, speed and position have been pushed into the bottom corners because it prevents the view being obscured. But more racing games are putting information at the top of the screen because it is spare space, so it’s worth considering your placement before you dive in.
And secondly, it’s worth thinking about if you can bring up information in natural in game lulls. This obviously won’t work in a casual racing game, where sessions are short and frantic. But in simulation games based on real world racing series like Formula 1 or Moto GP, there may be a chance to hold important information back for the pit lane – keeping players slightly in the dark to reflect the confusing nature of elite racing.
Management sims are often cumbersome beasts. While they will operate on a sliding scale of complexity depending on the platform they appear on and what they’re based on, these games tend to be menu heavy because players need information.
For these games, UI design will focus on making information understandable. Menus heavily populated with numbers – such as financial management screens in city builders or statistics sheets in sports games – can be made readable with a handful of UI tweaks. Colour coding key statistics, using graphs and charts for data visualisation purposes and allowing for simple side by side comparison between like for like attributes can all help do this.
Equally though, in between diving through menus, management games often have active components to their gameplay where the player has to respond to actions in real time. In Football Manager, players will have to respond to what is happening on the pitch. And in classic management game Theme Hospital, spotting and dealing a rapid outbreak of an infectious disease like Bloaty Head syndrome can be the difference between success and failure.
It’s therefore important to include visual cues for the player to spot problems. Colour coded fatigue bars, special icons that hover over infected patients or small injury indicators help with day-to-day management. This helps them to maintain the feeling of overall strategic control, while having some in the moment power.
We’ve shared some thoughts on UI design for a number of different games and genres. However, it’s important to remember that like all design what makes a "good UI" is subjective. New games regularly hit the market and they often change what’s considered best practice for a UI. The inclusion of user testing is an absolute must for any UI design process.
We’ve also not covered every game out there. Puzzle games, dating sims, MOBAs, RTSes, strategy games, platformers and other genres of games will have different best practices, meaning you will have to be flexible with the way you approach the problem.
UI design, particularly in a creative pursuit such as games is extremely challenging. Sometimes, creativity and innovation can be at odds with best practice. Don't be afraid to experiment and go against the grain, but equally be honest with yourself whether you're truly adding value and improving the player experience or simply adding a cheap quirk that gets old fast.