Heads up! An in-depth dissection of one of the most important gaming UI elements, the HUD

How to convey all the useful info to the player without interfering with the game experience.

Players encounter a ton of different interfaces in games: inventories, dialogues, crafting and trading menus, game lobbies, maps, character and equipment upgrade trees, the list could go on forever. All of these allow players to interact with the mechanics which the developer’s have placed into their projects. But we’ll focus on just one, very special, UI component today.

Hello, my name is Vlad Ostrovsky and I’m a UI/UX designer at Pixonic, MY.GAMES. In this article I’ll explain a few basic things regarding one of the most important game UI elements of all: the heads-up display, commonly abbreviated as HUD.

Defining HUDs

So, what is a HUD? There are many definitions, but I’ve worked out the following:

A heads-up display is a set of graphic interfaces and decorative elements located in the foreground and/or in the game world, which are designed to clearly and quickly convey necessary game information to the player at a certain point in time, without interfering with the game experience.

Key points to consider about this definition:

The HUD displays necessary information that, for whatever reason, we cannot, or do not want to transmit via gameplay. For instance, through the player’s character behaviour (like slowing down or a troubled gait when injured) or the environment (like scorn from NPCs when reputation level is low).

It’s important not to use the interface to communicate information that should be conveyed through the gameplay.

To that end, a HUD does not interfere with the gaming experience: it’s no fun if your interface is displayed at the wrong time and in the wrong place. It’s bad if an interface element attracts player attention without any benefit in the current game situation. Imagine you’re playing an intense shooter and while trying to hit an evasive enemy, some message pops up and obscures your aim (for example, about incoming air support). Clearly, this will dampen your gaming experience.

A few more things about HUDS to keep in mind:

HUDs can include a lot of different elements. The HUD, when viewed as an independent interface, might include numerous game elements, like health or direction indicators, meta-interfaces, or anything required for the game.

That being said, all HUD elements are, in fact, separate interfaces, each of which exists to convey certain types of information to the player and that performs a unique task.

HUDs are almost always directly in front of the player’s eyes (at least partially), since all its elements are displayed in the gameplay foreground and/or in the game world during the game.

The design and functionality of a HUD, will of course, vary based on the genre and gameplay style of a particular game.

Why HUDs are so important

In Snowrunner, the dedicated task area, speedometer, and tachometer on the dashboard are also part of the HUD-related game interface

In my view, even if HUDs aren’t “more important” than all the other interface elements, nonetheless, they certainly rank in the top 3.

Here’s why they’re so important:

1. The player frequently uses this interface throughout every game session, or, let’s be honest, during almost every second of pure gameplay.

2. A HUD must be able to provide players with necessary, and often critical, information at a particular moment in the game, so players can make the right in-game decisions.

3. A HUD can warn players about future events which may have certain consequences. This is the same as the previous point, only this time, based on the HUD state, a player will not only solve current game situations, they’ll also be able to make predictions and plan game behavior accordingly.

4.. Through the HUD, designers can influence the look, operation, and feel of the game. This is achieved through the overall style and consistency of the elements, the correct response and behavior of the HUD in various game situations, and so on.

Analysing interface types

Let’s zoom out from HUDs and get an overview of game interfaces in general. Over time, UIs have branched off into several directions. As games started to become more complex, so too did their interfaces, with many becoming instantly recognisable gaming UI conventions. New genres also gave birth to new types of interfaces: with new mechanics, more information needed to be displayed, so the good ol’ score counter and timer were no longer cutting it.

Over time, these branches have assembled into several types of interfaces that we can observe today in certain games. Based on whether an interface is a part of the story, or a part of the game space, they are divided into the following types:

● Diegetic — for example, when car speed is displayed on a speedometer in a truck cab. This is an interface that the actual player character could hypothetically see and interact with. Diegetic elements provide a more immersive narrative experience.

● Meta — an example would be water or blood drops on the visor. In essence, these are post-processes that allow us to transform the character’s experience into the player experience.

● Spatial — these are various highlighted areas, interactive objects, grenade flight paths, projection messages, and so on. These are for players; spatial interface elements don’t exist for characters as they cannot interact with them.

● Non-diegetic — this would be like speedometer or status indicators, but located on top of the gameplay as external widgets. These allow players to simply and quickly read information, but break the narrative, and their presence is very rarely explained through the game story. (There are some exceptions to this rule. The Metal Gear Solid series is famous for breaking the fourth wall, and despite the serious tone of the plot, the voice actors will sometimes reference interface and control elements by name.)

For HUDs, this system of classification is quite relevant, since the other game interfaces primarily fall into the non-diegetic category. That said, HUDs can also simultaneously fall into 3–4 interface type categories.

This example shows three types of interface elements on the same screen (1 — non-diegetic, 2 — diegetic, 3 — spatial)

Here are the aforementioned types rendered as layers:

Each layer is represented as follows: 1 — non-diegetic, 2 — meta, 3 — diegetic and spatial

All these interface types are simply visual tools for UI designers to convey information to the player. There’s no need to limit ourselves to just one. We can modify them, combine them, both with each other, and with other means of expression (like sound design, vibration for gamepads).

For better understanding, let’s also consider an example of the damage UI in Snowrunner.

The game informs us about truck damage with the spatial interface displayed next to the damaged nodes (a specific icon shows the damage type and hit points). At the same time, we can also see that the truck is damaged through the non-diegetic interface, which shows the remaining health of the truck’s damaged parts. Further, our spatial interface has a specified display time, after which it disappears. But the non-diegetic display remains with the player until the truck has been repaired because it contains critical information; that is, damage affects important gameplay parameters.

And here’s another question: why is our truck damage interface located where it is?

HUD element placement

Let’s discuss why and how we should place our HUD elements within the player’s field of vision. Essentially, information should be close to the player’s main area of focus during gameplay. To illustrate this, let’s divide a screen considering the HUD’s base areas:

The screen is divided into the following areas:

● The main focus area (or MFA) — this is the screen area most visible to the players, where they keep their attention during the gameplay. This area’s center is also the screen’s center, the primary gameplay concentration point.

● The surrounding area — this is a lower visibility screen area due to its remoteness from the max visibility point, and an area which is most often used for UI display.

The main focus area

If you’re playing a more intense game, as opposed to Snowrunner, then you need to conveniently receive information ASAP in order to be successful. Like in PvP/PvE shooters, for example. This is why elements like directional damage icons (like those that appear when you’re being lasered at) are big and situated nicely in the main focus area. (Thus, in the previous example, our spatial damage indicators are mainly situated in the player’s main focus area.)

In Far Cry 5, visibility and offensive direction indicators are situated in the MFA

Placing more complex info in the MFA

That game info is quite simple. So can anything more complex be placed in the MFA? The answer is yes. To illustrate this, let’s go through a brief case study and consider this visibility indicator in Far Cry 5:

The character is considered visible only if an NPC has accumulated enough visibility points. After this, a hostile NPC may attack the player character. If this occurs, the player sees the following states:

• Calm state: a player character does not trigger the environment at all as there is no one to react.
• Alert state: player actions attract an NPC’s attention to the character, but the NPC hasn’t discovered them yet.
• Visible state: an NPC has discovered the player character.
• Danger state: NPCs attack a character according to the game conditions.

That seems to wrap it up, but you should keep in mind that this system also has borderline states which can influence the gameplay:

• An alert state can change both to a visible state (if NPCs discover the player), and a calm state (if the player character hasn’t been discovered by the end of the search).
• Visible state can change to an alert if the player hides and the NPCs are unable to discover them for a long period of time, or if there are no more NPCs able to respond to player actions. It can also change to a danger state.

Based on the obtained information, the player can do the following:

• Interrupt visibility accumulation by hiding from NPCs.
• Reset the accumulated visibility by leaving the area with the NPCs who have already noticed or attacked, or interrupt the visibility indicator display by destroying the enemy.

It’s worth noting that there may be several visibility indicators on the screen, which potentially makes the system even more difficult to reckon with. However, it functions well and does an excellent job of transmitting the necessary information, despite how much data is involved for the players.

This example displays the value of this specific element: if we replace the visibility bar with a small icon or just a post-process, then we will not be able to transmit information about the accumulation of NPCs visibility/system transition from one state to another, and the player will not will be able to interrupt these deliberately mechanics.

Wrap up on the MFA

The MFA can also display important elements such as health indicators (for example, in PvP/PvE shooters), interaction triggers, gameplay critical messages, activating/completing quest tasks, receiving rewards, etc.

The main thing to consider is this: interfaces placed within the MFA should be justified and necessary. The main function of such elements is to quickly switch the player’s attention from gameplay, so that, for example, the game can continue (the Warzone game session goal is to stay alive for as long as possible), and the player will continue enjoying the game.

Surrounding areas

Interfaces placed around the MFA are less distracting while still being close to the player focal point. In the example from Far Cry 5, we already got information from the spatial interface in the MFA area and the non-diegetic version of its presentation does not require much attention.

The location around the MFA will allow the player to easily and quickly use the displayed information, while spending a small amount of time and effort. However, it’s worth noting that the visibility of interface elements in the areas around the MFA will still be significantly reduced compared to interfaces inside the MFA.

This decrease in interface visibility depending on distance from focal point (and size) is described by Fitts’s law. The law predicts that the time required to rapidly move to a target area (in this case, the areas around the MFA) is a function of the ratio between the distance to the target (optic pathway) and the width of the target (target interface).

To put it simply: the farther our interface is from the screen center, the smaller it is, the less noticeable it becomes for the player, which means that they will spend more cognitive effort on interacting with it.

In order to offset the visibility decrease and reduce player effort, UI elements in these areas must be able to effectively attract user attention. This is possible with effects, animations and other possible indicators of its altered state. Whatever the situation calls for, something must be implemented so players will not miss critical information, (and so it will be easier for them to interact with the interface.)

Let’s consider an example with a handbrake: the handbrake block is highlighted and an additional hint command is added to stabilize movement. This block is more readily noticeable than the task interaction trigger, which, although located closer to the maximum visibility point, has been statistically shown to attract less attention to itself.

So, it appears that for an interface not to interfere with gameplay:

• The information should be prioritized according to display criticality.
• Only information critical for players at the current moment should be displayed in the MFA.
• The areas around the MFA should display the rest of information and be able to attract user attention if needed.

Go for it, experiment. Feel free to be creative, come up with cool HUDs, and give some love to the games you’re working on.