The Power of Video Game HUDs

With just eight months left before The Last
of Us was finished, Naughty Dog finally got

to work on the game's user interface.

"While some of the UI elements had already
been roughed out," explains designer Alexandria

Neonakis, "an overall design of the heads
up display had not been established, and many

things were still undecided".

I think that's testament to the fact that
the user interface can be one of the most

under-appreciated parts of game development.

A nuisance after thought, thrown together
at the last minute.

But, if you ask me, it should not be undervalued,
because the UI can have a tremendous impact

on the way a game looks, works, and feels.

And so in this episode of Game Maker's Toolkit,
I want to explore the intersection of UI and

game design, to figure out how health bars
and stamina meters can change the way we play.

Now, UI encompasses a lot of different things.

Like online lobbies, inventory screens, dialogue
trees, crafting menus, store pages, and so on.

But for this video, I want to focus on one
specific type of UI: the heads-up display, or HUD.

That's the stuff that's laid on top of the
gameplay, while you're in the middle of the action.

And so the first question, I guess - is: what
is the purpose of the HUD, and what benefit

does it provide to the player?

To help answer that question, let me break
the HUD down into two distinct parts: which

I'll call gauges and previews.

Gauges are the ones we usually imagine when
we think about HUDs.

These are about taking information that would
normally be invisible, and surfacing it to

the player.

So, a character's health is typically a number
hidden in the game's code - but a health bar

can reveal this to the player.

AI behaviour can be inscrutable without visual
aids like view cones, movement ranges, and

attack indicators.

And because of camera limitations, critical
info may be hidden off screen - unless it's

highlighted with indicators or a mini-map.

Gauges are all about helping the player understand
the current or future state of the game world

- which allows them to make intentional plans
and moves.

Here's a case study from the addictive deck
builder Slay the Spire.

Early in development, enemies would give you
no indication of what they were planning to do.

So players didn't know whether to block or
attack on each turn, and ended up playing

pretty much randomly.

To fix this, developer Mega Crit added these
indicators which show you what the enemy will

do next.

Now the player can make smarter decisions
about how to use their hand - and concoct

satisfying synergistic strategies.

So that's gauges.

Previews, on the other hand, are about showing
you what will happen if you press a button

or take an action.

In their most simple form, it's those pop-up
button icons for contextual actions - you

know, press Y to open door, press X to get
in vehicle, press E to jump in mass grave.

What.

Uh.

But a preview could also be something like
an arc that shows you the trajectory of your

grenade throw.

An indicator that shows you when you're in
range of a grapple point.

A lock-on to show you which enemy you're targeting.

Or this line that shows you exactly where
your unit will run in XCOM.

Previews are all about giving the player a
heads up about the consequences of the actions

they might take, before they commit to them.

This allows players to act with confidence,
instead of blind faith.

For this case study, let's turn to Shovel
Knight.

In the third DLC campaign, Specter Knight
has a dash slash move - which allows him to

slice through certain objects and rocket out
the other side.

Initially, Yacht Club Games highlighted this
interaction with a simple change in the character's

pose, but found that this didn't adequately
explain when or where this contextually sensitive

action could happen - or where Specter Knight
would end up when it finished.

In the end, the team slapped on a simple indicator
which shows up when you get close to objects.

This clearly tells you that the dash slash
will happen when you hit the relevant button

- and shows you exactly where you'll travel
to when you press it.

The reticule was "the most important change
we made to make the Dash Slash understandable,"

the developer says.

So gauges and previews are very handy tools
for giving players information - either about

the current state of the game, or a glimpse
into the near future.

This allows players to interact with confidence
and comfort - and make specific and meaningful plans.

But here's the thing - behind the curtain,
games are tracking hundreds of variables and

the UI could surface any number of them to
the player.

And you could show a preview of any action
before it happens.

So why don't games show you all of this information?

Well - just as there are benefits to revealing
this info to the player, there are also advantages

for holding some of it back.

If you look into UX design - UX being the
experiential and psychological backbone that

guides UI - you'll come across the term "cognitive
load".

This is about how the human brain can only
juggle so much information in working memory.

And so the more junk you shove on the screen,
the more taxing the game is to parse.

Eye-tracking tech can show just how much our
eyes must dart around the screen to keep all

of this information in mind.

Therefore, cutting back on UI - by ditching
stuff that's extraneous or repeated or just

window dressing - can reduce cognitive load.

But - it's not just about getting rid of things.

And, in fact, UI can sometimes help with cognitive
load.

If you had to remember how many bullets you've
fired, well in all the excitement you might

lose track of whether you fired six shots
or only five.

An ammo counter is more efficient in this
case.

So, instead, it's about being clever with
the layout to ensure that the information

that is on screen is relevant and easy to
digest.

One way to achieve this is to think about
visual hierarchy.

This is when we use techniques like font weight,
colour, scale, position, and motion to make

some elements stand out more than others.

If everything on screen is screaming at you
with the same intensity, it's hard to know

what to focus on.

And if nothing is given prominence, critical
information can go unnoticed.

Consider, for instance, the trespassing pop-up
in Hitman.

This is a vitally useful alert but in Hitman
2016, you might not even see it - it's just

a simple label that appears under the mini-map
in the corner of the screen.

So it's much improved in Hitman 2, where the
label is yellow, and it flashes across the

map to grab your attention.

It's even better in Hitman 3, where this state
change is backed up by an obvious sound cue.

*Audio flare*

To help think about visual hierarchy, designer
Zach Gage talks about the principle of "The

Three Reads" - which is three levels of visual
information, ranked from most important to least.

So, Zach explains this with one of his own
games: SpellTower.

The first read will be the main game elements
- the letters you use to spell out words.

The second read will show big, critical rules
that are vital to gameplay like columns that

are getting close to ending your game and
blue bonus letters that will clear an entire

line.

And the third read will show smaller, less
important stuff like small contextual rules

, such as these tiles that can only be used
in longer words.

Developers can rank information in order of
importance, and then use design to ensure

the most relevant stuff sticks out.

And because games are dynamic, it's possible
for information to move between the different

reads at different times.

Zach points to Hearthstone as a "constant
wave of things being brought to your attention

in the first read, and then fading back into
the second or third reads".

Another way to reduce cognitive load is to
ask the question: do all of these UI elements

need to be shown all the time?

Like, back in Castlevania 1 you could see
the boss's health bar throughout the entire

level, for some reason.

Nowadays, that just shows up when you start
the fight.

But that principle can extend to pretty much
any UI element.

In Ghost of Tsushima, you'll only see your
health bar when you unsheathe your sword because

it's only relevant to combat - and not general
exploration of the island.

Okay. So, another reason for ditching the HUD - and
this one is becoming more popular all the

time - is in terms of presentation.

A desire to make games look more cinematic
and immersive, and to not mess up those lovely

3D visuals with boring 2D assets.

Though, anyone who thinks UI has to look boring
has obviously never played Persona 5.

♫ Music from Persona 5 ♫

Now, this is not about simply deleting all
of the HUD.

This is not something that should be done
at the expense of readability or comprehension.

Instead, it's about being clever with how
this information is presented.

So, like before, developers can hide information
and only show it when strictly necessary.

But another solution is to make HUD elements
diegetic.

This is when the UI actually exists, physically,
in the world of the game.

The most popular take on this is, of course,
Dead Space.

To try and increase this survival horror game's
immersive qualities, Visceral Games removed

the HUD and put the same information inside
the game world itself.

So Isaac's health bar and stasis meter are
built in to the pipes and gauges on his suit.

Each weapon's ammo count is shown on the gun
itself.

Even things like the inventory are styled
as holographic projections in the world.

We can see effective examples of this in other
games too - in Metroid Prime, the HUD works

exactly like every other shooter but by putting
it on Samus's helmet visor, and by making

it realistically jiggle and steam up, it increases
your sense of presence and your connection

to the character.

But it's not just about style and presentation.

Making this information diegetic can lead
to interesting gameplay consequences.

In Alien Isolation, you can hold up a gizmo
to see a motion tracking read-out.

It's similar to the mini-map in a game like
Call of Duty, but because it's a physical

tool - it means you have to choose whether
you want access to this information, or whether

you want to hold a weapon.

You can't have both.

Now a diegetic HUD doesn't just have to mean
normal health bars and ammo counters, but

rendered in the game world in a clever way.

Because if you take the idea even further,
you can use elements that we wouldn't usually

think of as UI to express this same information.

Like, you don't really need a health bar in
Wreckfest to know how close your car is to

being written off - you can see it on the
car itself.

And do you really need an indicator to tell
you if Link is too hot or too cold in Breath

of the Wild?

We can trace this back to Super Mario Bros.,
where Mario's health is represented through

the size of his sprite.

Okay, so one other reason to hold back the
HUD is to intentionally make the game less

readable.

In The Last of Us Part II, the first human
enemies you encounter will verbally call out

their intentions and plans, giving you an
idea of what the enemy is thinking and allowing

you to plan around them.

But later, you encounter a new faction of
enemies who converse exclusively in harsh,

high-pitch whistles.

*Whistle*
*Arrow impact* *Ellie yells*

These whistles are intentionally designed
to be impossible for the player to parse.

And so I found these foes to be significantly
more intimidating and difficult to fight - in

large part, because of a lack of that information.

Going further, the amount of information we
have as a player will completely change our

behaviour.

The developers of Reigns came to this realisation
while making their Tinder-inspired management

game.

Originally, the game showed exact numbers
for all your stats, and how your choices would

impact them.

But in testing, players focused almost exclusively
on trying to optimise these numbers - and

ignored most of the text.

After changing the UI to vague bars, players
went back to reading the story, and acting

on more of an emotional level - rather than
an analytical one.

I think this proves that developers don't
necessarily need to remove the HUD entirely,

but should at least consider the precision
of the HUD.

Do you want the health bar to be an exact
number, a meter, or just a vague red splodge

in the centre of the screen?

It really depends what the player's going
to do with this information - is it for calculating

exact differences, or is it just a warning
to hang back and find cover?

Now when it comes to those preview HUD elements
I talked about… well, the further into the

future, and the more precise that information
is, the more specific plans you can make.

Like in Mark of the Ninja, where it shows
you exactly what will happen when you throw

a knife into this lamp.

But if you reduce the future-ness of that
information, or make it fuzzy and imprecise,

it forces the player to learn and internalise
how the game's mechanics work.

Consider Peggle for a moment.

By default, the shot indicator shows you where
your ball will go… up until its first hit.

So it's on you to mentally calculate the ricocheting
trajectory after that.

That's part of the learning curve.

I mean, there is a way to push that preview
further into the future - but that's a power-up,

which just goes to show how powerful this
information can be.

Also, did you know that there's a patent for
Peggle's gameplay?

Because, I guess that's a theme for the channel,
now.

Because UI is so powerful, then, it can be
tied to things like difficulty or assist modes.

Consider how racing games often show an optimum
racing line on easy mode, but ask you to fend

for yourself at higher difficulties.

UI can be used to change a game's difficulty
between modes, or over the course of the adventure

- just like any other gameplay element.

So I think this all goes to show that UI can
have a really powerful effect on a game.

And if used effectively, UI can support and
advance the goals of game design.

But… what about the other way around?

Not game design influencing UI, but UI influencing
game design.

For a final case study, let's look at the
deterministic tactics gem Into the Breach.

This game shows you what every enemy is about
to do, at the same time, on a small and claustrophobic grid.

The result is a complex web of arrows and
icons that give you a complete picture of

what the enemy's army is planning.

But developer Subset Games discovered that
for this system to work, certain enemies and

weapons had to be removed from the game - simply
because they were too hard to show.

Things like weapons with a long chain of cause
and effect, or enemy attacks that would impact

a large area.

Co-designer Justin Ma says “just as a game
design principle, we would sacrifice cool

ideas for the sake of clarity every time".

And this isn't the only game where this happened.

In Hearthstone, the reason why you can only
have seven minions in play at once, is because

that's how many fit on the screen.

And certain hero powers were changed because
they were too complex to show through UI elements.

Ultimately, if something can't be made clear
to the player then maybe it's not a good game

mechanic and should be simplified.

UI isn't a band-aid to fix broken game mechanics
- and this is why it's important to design

the HUD in tandem with everything else - and
not throw it together at the end.

Because just like everything else in game
development, UI isn't something to be done

arbitrarily, or "because that's how other
games do it".

It should be done with clear thought and intention.

Let me know which games you think have awesome
UI in the comments down below.

It's indie game recommendation time!

This is Room to Grow - a grid-driven puzzler
about a cactus that can grow in order to shunt

plants into the goal.

It quickly gets more complex as you push against
the wall to move your entire spiky body.

And then more mechanics get thrown on top
of that.

It's a thoughtfully made little game with
lots of charm and some devious meta-level

challenges.

It's out now on Steam.