The Power of Video Game HUDs

The heads-up display can change how a game works, feels, looks, and is made. Let's find out how.

=== Before you watch ===

Content warning: Some blood

=== Sources and Resources ===

Sources

[1] How We Made The Last of Us's Interface Work So Well | Kotaku

[2] How Slay the Spire’s Original Interface Almost Killed the Game | Ars Technica

[3] Specter Knight Mobility Design | Yacht Club Games

[4] Building games that can be understood at a glance | Stfj

[5] The Casual (but Regal) Swipe: Creating Game Mechanics in 'Reigns' | GDC Vault

[6] Into the Breach's interface was a nightmare to make and the key to its greatness

[7] Hearthstone: How to Create an Immersive User Interface | GDC Vault

Additional resources

Art Direction for AAA UI | GDC

Immersing a Creative World into a Usable UI | GDC

Bridging the Gap Between UX Principles and Game Design | GDC

Crafting Destruction: The Evolution of the Dead Space User Interface | GDC

So You Wanna Make Games?? | Episode 9: User Interface Design | Riot Games

Game Design Deep Dive: Dynamic detection in Shadow Tactics | Gamasutra

The UI and UX of Persona 5 | Ridwan Khan

=== Support GMTK ===

Use Creator Tag "GMTOOLKIT" when buying on Epic Game Store

=== Chapters ===

00:00 - Intro
00:53 - What's the HUD for?
04:40 - How much HUD to show
08:36 - Using a diegetic HUD
11:13 - How HUD effects gameplay
14:08 - HUD can influence game design
16:05 - Patreon Credits

=== Games Shown ===

The Last of Us (2013)
Control (2019)
Crackdown 3 (2019)
Metro Exodus (2019)
Overwatch (2016)
Apex Legends (2019)
Call of Duty: Black Ops Cold War (2020)
Borderlands 3 (2019)
The Outer Worlds (2019)
Minecraft (2011)
Assassin's Creed Syndicate (2015)
Cyberpunk 2077 (2020)
Assassin's Creed: Odyssey (2018)
Eagle Island (2019)
Devil May Cry 5 (2019)
DOOM Eternal (2020)
Invisible, Inc. (2015)
Darksiders (2010)
Desperados III (2020)
Fire Emblem: Three Houses (2019)
Batman: Arkham Knight (2015)
Ghostrunner (2020)
Slay the Spire (2019)
Ori and the Will of the Wisps (2020)
A Hat in Time (2017)
Hitman 2 (2018)
Rage 2 (2019)
Homefront (2011)
Titanfall 2 (2016)
Sekiro: Shadows Die Twice (2019)
Star Wars Jedi: Fallen Order (2019)
XCOM 2 (2016)
Mario + Rabbids Kingdom Battle (2017)
Shovel Knight (2014)
Valkyria Chronicles 4 (2018)
Horizon Zero Dawn (2017)
Guacamelee 2 (2018)
God of War (2018)
Just Cause 3 (2015)
Monster Hunter: World (2018)
Resident Evil 7: Biohazard (2017)
Receiver (2012)
Sunset Overdrive (2014)
Battleborn (2016)
Final Fantasy VII Remake (2020)
Hitman 3 (2021)
Hitman (2016)
Tharsis (2016)
SpellTower (2011)
Hearthstone (2014)
Shadow Warrior 2 (2016)
Castlevania (1986)
Castlevania: Lords of Shadow (2010)
Ghost of Tsushima (2020)
Hellblade: Senua's Sacrifice (2017)
Persona 5 (2016)
Inside (2016)
Firewatch (2016)
Dead Space (2008)
Fallout 4 (2015)
Metroid Prime (2002)
Metroid Prime 2: Echoes (2004)
Far Cry 2 (2008)
Alien: Isolation (2014)
Call of Duty: Modern Warfare (2019)
Journey (2012)
Wreckfest (2018)
The Legend of Zelda: Breath of the Wild (2017)
Super Mario Bros. (1985)
The Last of Us Part II (2020)
Loop Hero (2021)
Reigns (2016)
Metal Gear Solid V: The Phantom Pain (2015)
Kingdom Hearts III (2019)
Gears of War 4 (2016)
Halo 5: Guardians (2015)
John Wick Hex (2019)
Mark of the Ninja (2012)
Katana Zero (2019)
Peggle (2007)
Shadow of the Tomb Raider (2018)
Forza Horizon 4 (2018)
Into the Breach (2018)
Immortals Fenyx Rising (2020)
Mirror's Edge (2008)
Room to Grow (2021)

=== Credits ===

Music by…
License codes: PC3D3JQOFKHA7FNZ | 0X6GO4104801KFOE | H6D2IULHUG0BH7F7

Why I Work at Insomniac: Abdul Bezrati | Insomniac Games

Eyetracking while playing Overwatch | Jon Matthis

=== Subtitles ===

[tomrivlin]

Huge respect for setting yourself up for the obvious "Press F to pay respects" joke and then throwing something 10x more insane at us with the "mass grave" prompt.

[Chaosrunepownage]

I will never get over how NieR: Automata took diegetic UI to the next level by having them be chips you put into your robot character. Want more space for more useful chips? Sacrifice some UI! Wonder why that chip says never remove? Go ahead, you'll get a little funny scene!

[Dalenthas]

I really like the way Celeste tells you when your boost is available by changing Madeline's hair color. Also, Madeline getting visibly tired and flashing when her wall cling is close to running out. Other HUD elements like Strawberry count are hidden until they change.

[Gehab]

Outside the small little health bar, Sea of Thieves absolutely nails its UI. Really helps to immerse yourself as a pirate in this cartoony world.

[jaspercunningham]

I love how he delivers jokes like the mass grave or five shots or six in such a monotone voice, makes it so much funnier

[strmchild]

One of many reasons I appreciate GMTK: When there's a screen full of code, it's actually game code, not a screenshot from a web dev tutorial (as if the audience won't notice).

[thegameneededme]

It's wild to me that people were cosplaying as the UI from Persona 5. I'm glad you brought that game up as an example because slick, stylish UI can definitely add a lot to a game.

[christopherverhoef]

Halo: Reach has a pretty standard diegetic HUD for the most part, but the way it's used in the last level is amazing.

The last level is a hold-out-as-long-as-you-can one that ends with your death, both gameplay-wise and story-wise. As you take more and more damage throughout the level, cracks begin forming on your in-game helmet, obscuring your vision and shorting out elements like the ammo counter. These cracks stay even if you go back to full health. It really creates a sense of dread and desperation and it's one of the only times I've seen the HUD itself tell a story.

[j.r.]

I think it’s literally been a decade since I’ve heard the phrase, “consider Peggle...”

[Shyftus]

13 years later, and Dead Space UI still seems so insanely unique and cool.

[lemmythetrash-goblin]

I'd like to note how much Persona 5 was praised for how well it intgrated it's UI elements into the style and feel of the game, and how it became one of it's most praised and memorable feautures. It's one of those things so rarely paid much attention that when Persona 5 did it so well, it became instantly iconic.

[theskyisteal]

I will always love how Sparks is your health bar in Spyro and, if you take too much damage, you will no longer pick up gems as easily since your health bar was grabbing them for you when you got close enough. I especially like that in the remaster he will point you in the direction of any remaining gems.

[adriantoine]

An interesting case is Nier Automata where HUD elements can be equipped, but that is using up slots that can be used for buff items. You could remove all HUD elements and have all your stats improved but the game is much harder this way, so you need to decide which UI elements are really useful to you.

[BONSMcCOY]

Republic Commando was always my favorite diagetic UI, with ammo counts on weapons, in-helmet holoimages for squad commands, and a BUG SPLATTER VISOR WIPER

[palinbian]

Something I really enjoy about the enemies that use whistles in the Last Of Us Part II, is how when you're playing as Ellie, the subtitles just say ***WHISTLE*** because Ellie has no idea what they mean. While you are playing as Abby though, it shows in the subtitles as *Warning Whistle* or *Flanking Whistle* because Abby has been fighting these people for years and knows their calls.

[TrlliPop]

10:46
I have seen an example of this in the mobile games "alto's oddyssey" and "alto's adventure" both released by the same team.
The game is about sliding down endless dunes (or just hills in the latter game) and doing various tricks. The more tricks you do, the more you speed up and you can see this visually by _the length of your scarf._ This info becomes important when you get the wingsuit upgrade, which lets you glide for a while when you reach full speed, indicated by your scarf being very long and turning from colored to white.

[little_tater_tot]

I really like how Splatoon shows your ink with a tank on the back and just has the enemies color ink get more prominent on the edge of the scree when you take damage. You don't need exact numbers for that game so its just works great.

[IONProd]

I am really happy that you showed mirror's edge at the end, it's HUD is so interesting because it's 2 main features are diegetic (health and runner's vision), and the way they implement runner's vision not as a direction but an object you need to use is really interesting.

[_hellogan]

"These are about taking information that would normally be invisible..." *Shows the game Invisible, Inc on screen*

I see you Mark. Well played.

[joejoetv]

I really like the system that Astroneer uses, where your oxygen and power stats and also your inventory is included in your backpack. Your invantory can also directly interact with the world and players can put stuff in your backpack. It really gives it a sense of integration and makes it feel right.