The Power of Video Game HUDs
Вставка
- Опубліковано 4 чер 2024
- 🔴 Get bonus content by supporting Game Maker’s Toolkit - gamemakerstoolkit.com/support/ 🔴
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
kotaku.com/how-we-made-the-la...
[2] How Slay the Spire’s Original Interface Almost Killed the Game | Ars Technica
• How Slay the Spire’s O...
[3] Specter Knight Mobility Design | Yacht Club Games
yachtclubgames.com/2017/07/sp...
[4] Building games that can be understood at a glance | Stfj
stfj.net/DesigningForSubwayLeg...
[5] The Casual (but Regal) Swipe: Creating Game Mechanics in 'Reigns' | GDC Vault
www.gdcvault.com/play/1024278...
[6] Into the Breach's interface was a nightmare to make and the key to its greatness
www.rockpapershotgun.com/into...
[7] Hearthstone: How to Create an Immersive User Interface | GDC Vault
www.gdcvault.com/play/1022036...
Additional resources
Art Direction for AAA UI | GDC
• Art Direction for AAA UI
Immersing a Creative World into a Usable UI | GDC
• Immersing a Creative W...
Bridging the Gap Between UX Principles and Game Design | GDC
• Bridging the Gap Betwe...
Crafting Destruction: The Evolution of the Dead Space User Interface | GDC
• Crafting Destruction: ...
So You Wanna Make Games?? | Episode 9: User Interface Design | Riot Games
• So You Wanna Make Game...
Game Design Deep Dive: Dynamic detection in Shadow Tactics | Gamasutra
www.gamasutra.com/view/news/2...
The UI and UX of Persona 5 | Ridwan Khan
ridwankhan.com/the-ui-and-ux-...
=== Support GMTK ===
Support GMTK on Patreon - / gamemakerstoolkit
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…
Music provided by Uppbeat - uppbeat.io
License codes: PC3D3JQOFKHA7FNZ | 0X6GO4104801KFOE | H6D2IULHUG0BH7F7
Why I Work at Insomniac: Abdul Bezrati | Insomniac Games
• Why I Work at Insomnia...
Eyetracking while playing Overwatch | Jon Matthis
• Eyetracking while play...
=== Subtitles ===
Contribute translated subtitles - amara.org/en/videos/izVGIyScVfOY - Ігри
![Clarity vs. Style [UI]](/img/n.gif)
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.
The "wot" at the end made me lose my shit.
i also anticipated the classic F but the mass grave was a welcome surprise
I expected the x to Jason.
because is a clearly much smarter than the average guy.
Don't forget the was it 5 or 6 reference.
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.
Yeah! Madeline's hair colour is a great example - lesser games would have put that info on the HUD.
Also wanted to mention celeste. Hollow doesnt show if the dash or double jump is available, but its not really a platforming focused game. How crucially it indicates when the shadowdash has recharged.
@@GMTK Very similar to the Luma spin in Galaxy which is another great example
Similar example: Hollow Knight's Shade Cloak being represented by a particle effect rather than a bar
@@GMTK I love how you never fail to recognize celeste in any video. This you've done in the comments, but still very cool
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.
I think the best part of it is that so much of the UI is integrated into the sound and visuals of the game (rather than bars or menus). Your ship health is roughly represented by how full of water it is. The wind direction is always visible, and you can tell when your ship is at max speed when you see the sails catch (accompanied by a satisfying whoosh sound effect). If you want to know what direction you're headed you need to pull out a physical compass.
It's a diagetic UI done really really right, and shows that a lot of cool stuff can be done without a conventional HUD.
I think the one thing they could have done better is controls for fishing. Right now all you get is some pop-ups the first couple times you fish, based on the stage of catching you're in. Personally I found them really confusing (and pretty sure one was wrong, telling me to use the mouse to pull against the fish, when I was supposed to use WASD) - I think a one-time hand-holding tutorial, or better on-screen UI while fishing could have helped. It just struck me as an area it felt like they went overboard in hiding information, especially after watching the video where the devs talk how they wanted no UI when fishing (a fine goal for immersion, *if* you're able to get the player there without a lot of frustration and lost fish).
@@themarrs fishing is ez
It has some good UI, but I really hate how reading quests and notes works.
i dont think so, the nested radial menus is just so bad and tedious to navigate
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!
Not to mention (spoiler)...
... One of the boss fights has you fighting in another android's UI until they stop functioning. It's literally a copy of your menu screen when you zoom out on it.
mmm, werent most Ui things realted to diffculty though ?
Including right at the start, where adjusting the game settings is diegetic, and specifically what you adjust is referenced later
It's part of the game, its canon you and the character your playing is also seeing it. I love it.
@@jablinski_timemaking the UI part of the game proper. Nifty
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.
imagine making a game so good people cosplay as the visuals
It's so stylish
I really hope turnbased rpgs start taking stylizing their menus in the future instead of just plain text
@@iaxacs3801 yeah, i was never much into turn-based rpgs because of how boring and underwhelming the battles usually are, just simple and small text with some really small animations. But Persona 5 managed to make stuff like selecting the right persona and attack actually interesting and fun
Sorry, they WHAT?
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
Humor masterfully enhanced by deadpan delivery is probably encoded in the genome of the British at this point.
@@KyleJMitchell as an Englishman myself, I can confirm this.
True. He really missed out on mentioning “press f to pay respects” imo
@@bartholomewjenkins164 No, he didn't. That meme's been abused to hell and back.
agreed
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).
The next step would be to actually show code segments that are related to what's being talked about.
@@cameron7374that sounds more difficult as he’d need a relevant game’s source code and one that’s open to having its code shown publicly
Well, Mark could show "relevant" code. Not the exact source code, but if he was talking about a health system, he could show code that functions as a health system.
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.
Great end. My brother and I were going at it thinking we had this one last fight. But they just kept coming….
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.
And auto-suppressing the HUD was also an equippable upgrade…
Was gonna mention this too, as something I loved about the game when I finally started playing it not too long ago. Making the UI feel like it actually exists in the world, as opposed to something just slapped on top for the player. Not that the latter is bad, but I do like the immersion of the former.
Nier: Automata and Dead Space have the best designs in this aspect.
Similar thing happens in Hollow Knight with the compass charm, which makes you decide whether the "you are here" icon on the map is important enough to take a slot that could be used to provide other utilities.
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.
Yeah, and a lot of games started mimicking it afterwards. Im really intrigued on how or what will be the UI for Persona 6.
Shame the other elements weren’t as good as P4G
Exactly. Lots of thing are good in the Persona series but there's no wonder why it's this one that broke into popularity. Writing, characters, core gameplay are pretty much as good as they've always been but this UI system kept people interested in an already pretty niche genre. I just left a big ass comment about the less obvious but incredibly clever ways the UI works, won't paste it but it's nice to see the public acknowledging the value of UI design, as a UI designer myself haha
@@blackstab3913 I disagree with the writing and characters comment. Could you paste your other comment, I’d be interested in reading it
@@ToriKo_ I do prefer a lot Persona 5 from its predecessors but it's out of personal stuff like me loving picaresque stories. The presentation is superior but a good amount of fans tend to prefer P4, probably out of nostalgia to be fair.
Anyway, the comment in question : "I'm seeing a few Persona Ui comments so I'd like to point out something :
We all know how stylish and juicy is the UI, but it's actually much more intelligent than one might think at first. The game released a whole console generation late and the animation and modeling shows it. The emphasis on the UI was a smart move to catch our eyes with the shiny portraits and splash arts, effectively hiding in plain sight the more rough aspects of their visuals.
But what's really a tour de force from Atlus is how the UI almost solely establishes art direction and expresses themes. Every Persona game has a color, and the game has to respect that color all along, which is in and of itself a daring choice to begin with. Some of the themes from Persona 5 are : individuality, corrupt society, changing the world for the better, rebellion and duality, all of which are inside the context of youth.
So... what did P5 use to express all of this at once? 80's Punk fanzines. Teenagers who awakens their inner spirit of rebellion to change a world they don't accept, created by corrupted adults. Sounds familiar. Just have a quick google images look and you'll see the ressemblance immediately.
This is why P5 color is red, why every menu is black and white with highlights of red, with some halftone newspaper effects. The punkrock fanzine also encapsulate the need for selfmade underground systems, since the Phantom Thieves also are clandestine. Another example is the cutout letters in most of the lettering work, which once again is found in punk fanzines but also supports the "Thievery" element by evoking ransom letters.
The game is so precise and smart when it comes to UI and graphic design that I made a 3 hours lecture on it for my game UI/UX students. :D P5 is not a great game with a great UI. Its UI made it the iconic title it is today, and there's no wonder why this one broke into mainstream audiences unlike its predecessors Persona 3 and 4 that stayed pretty niche in comparison."
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.
I agree
Really clever for sure
In the original year of the dragon (Spyro 3) sparx got upgrades when you played the minigames as Sparx, including the ability to point you towards the remaining gems if you pressed all of the shoulder buttons..
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
I think it’s literally been a decade since I’ve heard the phrase, “consider Peggle...”
You should subscribe to grayfruit. His Peggle videos are wonderful
@@thekiss2083 grayfruit was the reason i remembered that peggle existed at all
It's also been a long time since I heard a Dirty Harry reference.
I installed the mobile app a couple months ago, only afterwards found out it's long running
@@proxy1035 as a french speaker, I remember Peggle from Bob Lennon
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.
amazing detail, didn't notice!
That's incredible
That's a cool detail. I didn't know that because I haven't played with subtitles on. If the information is intended to give Abby a slight gameplay advantage over Ellie, because she has been fighting the Scars her whole life, it would have been even better to have a way of notifying the player without the need for subtitles to be on.
@@JeremyComans this isn't exactly what you mean, but its worth mentioning that you can actually tell these whistles apart if you listen closely enough! They're consistent enough to be deciphered, which I think is great sound design.
That being said, I suppose the most obvious way to make Abby's experience more evident would be to have her make contextual comments depending on the whistles the player hears. Its hamfisted, but it would make it more obvious what's going on.
@@Vatterju That's along the lines of what I was thinking. Even just the first few whistles to prod the player into working it out.
13 years later, and Dead Space UI still seems so insanely unique and cool.
Yeah, mostly cos of the lack of it
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.
ohh i love that game
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.
Man, I think the game tells you this at the beginning but I totally forgot it actually changes in-game, perhaps that's why under ink it does tell it through UI! man I'm having obvious realisations aren't I
yes! splatoon nails its UI and HUD design perfectly. you get just as much information as you need without impeding your vision. by only being able to look at the map if you're willing to sacrifice the view of your player, it introduces careful strategy. i'm glad splatoon 3 doesn't seem to be changing their approach to UI.
I wish more games did this. Having numbers and icons all over the screen feels very cumbersome. I love when developers display crucial information on the characters or the game world itself. Like if an enemy is almost dead, have them move slower or attack less instead of having a health bar over their head.
Press E to jump in mass grave is the best action prompt I have seen in a while
F
Im fond of "Press X to time travel" myself
"Press E to launch that little shit" is a good one I've seen.
The Wonderful 101's insane climax has "Protect Earth."
Infamous has a few good ones, twice they use the "(R2) - Punish" one when dealing with the more hateable villains. That Prompt at the end of 2 to "Let go" is always weirdly poignant too.
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.
And it can even be turned off. Highly recommended for a next play through
I haven't even watched the whole video, but this already deserves a like with that thumbnail! Honestly, Persona's UI is a sight to behold. Ever since I bought an item from the town shops in Persona 3 Portable, I couldn't stop thinking about those moving chains, pills etc. that just totally immerses you in whatever they're selling. And they've kept at it with 4 and just absolutely went nuts with everything in 5. 🔥
"These are about taking information that would normally be invisible..." *Shows the game Invisible, Inc on screen*
I see you Mark. Well played.
Hoped someone would spot that!
I caught that too! Very cheeky.
I do like a good HUD
@Fakename here before this comment implodes and replies just bego the fun "YuO not hErE?0?0?0?0!"
me here?
@Mr. CT you are helping it explode
yUo HeRe!1!111!
Oh my... This is surprising...
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.
I love Mario Odyssey’s HUD: coin counters in top left, health & compass top right. It is so minimal and sleek. Every time you collect a coin, it shows a short coloured accent on the counter, and a quick “42/100” with regional coins. Take damage or recover health and the health indicator moves to the center for a bit. I also like the subtle triangle above checkpoints when you get near them. Touch a checkpoint and you know what the place is called. Capture something and you get simple explanations for the controls, consisting of at most two buttons with short descriptions (and _“You can also […] to […]”_ as well). There are tons of examples of superb UI design in this game, it’s just fantastic.
Same holds for Breath of the Wild.
I always loved how in halo different weapons had different reticles and they would mix and match in different ways while dual weilding
The way that you put your sword against the light to find the direction to the next boss in Shadow of the Colossus is a great example of a HUD put in the game's world
but in other hand that stamina circle is just stupid.
and if you finish the game enough the whole screen gets pink 😂😂
Star Wars: Squadrons has a great diegetic UI with the player's ship status reflected through lights, dials, and readouts inside the cockpit. It's obvious that a lot of time and effort went into balancing each ship's layout to reinforce the ship's unique feel, the faction's style (Republic vs. Empire), and maintaining clarity of information.
yet they fucked up the rest with healthbars and "modern" markers everywhere
Very interesting, enjoyable video. Thanks Mark!
you sneaky little bastard hahaha :D
One moment involving UI that I thought was interesting was the final mission in Halo Reach, because as you fought to survive and you take hits, cracks start to form on your helmet and taking away hud info over time, really selling the feeling of a desperate last stand
Ooooh yes! That was really impactful
Indeed, that was an awesome touch! It really added to the final send off of the game! Love the halos! Classic and nostalgic series!
I swear so many games make it so hard to know what's happening BY THEIR LACK OF GOOD HUD ALONE!
Or having too much. It's all about balance
Which games? I mean specifically.
@@tracaine A great example is grenade throws in Uncharted 4. You don't see the throw arc, BUT you can aim your weapon and throw to be mostly accurate. However, grenades bounce and explode 1 sec after surface contact, enabling players of all skill levels to learn grenades. New players will line up nades and go slow, likely missing the opportunity, while pros will quick throw, bounce nades, or self nade etc on the fly, making them feel like a Transformers movie.
@@tracaine this extremely subjective but for me the Total War games come to mind - specifically how you're supposed to manage the loadouts of your characters.
They keep improving the UI but increase the importance and complexity of the loadouts which results in me always feeling the UI not quite manages to meet the needed ease of use to make the fun idea worth the effort; it mostly feels like maintance after having say more than 10 turns into the game.
P5 is a prime example of the absence of a good HUD, forgoing any sense of readability in exchange for trying to be artistic.
Half Life Alyx's diegetic design is wonderful. It would have been nice to hear a mention of VR in here somewhere.
In the same style of Metroid Prime, I really like the HUD in Republic Commando. It's a also a Helmet view that shows you all the necessary data. Where are your Teammates, what are they doing right now, how much health do the have. As well as the previews on giving commands to the team.
Really like that game and I'm glad it got a re-release on last gen systems.
This made me think of that brief period in the mid 90s where games like Donkey Kong Country would keep the HUD completely off the screen until it was relevant. Even the original SNES manual alluded to it by saying something like "Where's the lives counter? The speedometer? Off the screen, where they belong!"
Thinking about it, Paper Mario TTYD would fit in this category too. In the overworld, there's no UI except when specifically summoned by the player or you take in-field damage. In battle, the HP/FP/SP meters stay above the stage (or a small meter below each enemy), with action command prompts only appearing during the attacks. It does feel very clean.
I feel games with more concise states can benefit from it. If the states are able to be reflected in the ingame entities, the better. Provided it is readable. More quantifiable values ought to be displayed when relevant (relevant can also mean all the time)
A university should hire you for a game design course. My professor is great at his job, and he mentioned you a lot of times during his lectures, we even watched some of your videos in class.
Haha, great! I've actually given a few guest lectures at schools around the world - always a pleasure to do so.
Not enough mention down here of In Other Waters who dared to take the most extreme step forward and asked "Okay but what if YOU were the UI and the HUD?"
I really like how Half-life Alyx integrated it's UI elements, probably the best I have encounter in VR so far.
Not only is this high quality, thoughtful gaming content, but I have not once been shown a YT ad during GMTK's videos. It's fantastic.
I think Mark tries to run the channel almost entirely on Patreon revenue, so maybe he doesn't monetize his videos directly. It would be odd; I would have thought leaving ads on even just a few of them would be great for this channel, given the quality he holds himself to.
@@KyleJMitchell I've gotten an ad during thw video. Maybe UA-cam has introduced their new ideas already or it's just inconsistent
There are two ads at the end of the video, though.
@@bumpsy That makes more sense; either he does monetize his videos (I would), or showing gameplay clips from so many games means UA-cam may let relevant companies put ads on his videos for their compensation. (I know that's something UA-cam does for videos with copyrighted music, but I don't remember all of the details.) I never see ads on UA-cam so I forget they're there until other people mention them.
Get the Adblock extension or switch to Brave or something.
Persona 5 deserved the art or some other award for how brilliantly stylist and just fun it is navigating its UI, menus and HUDs
You have an Odd Head.
I didn't find it fun to load the "load data" button. I had to first open the menu, go to a button called "Config" or something like that, then watch a small animation of Joker flying to the screen, and THEN I could select the "Load Data" button.
It was nice to watch the 1st time. However, by the 5th time that I wanted to load a previous save, that small animation became old, and having to wait those 2 or 3 seconds just to load the rest of the menu felt tedious.
Jrpgs fans lack taste? surprising
@@eduardorpg64 How often did you load your save while in game?
@@eduardorpg64 You can skip the entire animation with the 'X' button😐
Holy shit Peggle actually exists, I thought it was a childhood fever dream
Peggle is real. Peggle is very real. If you want to see it again, and also experience a fever dream at the same time, you should look up DougDoug Peggle.
I appreciate this video so much. It's frustrating in meetings to explain early on something is wrong with the UI that causes major issues to the gameplay and have design dismiss it as "it's not a visual thing we can fix it in design." Then to have them after 3 months of being unable to work it out finally come to the conclusion I had months ago and pat themselves on the back for being so clever. It's nearly always treated as an after thought to Design or even just "polish".
The way Sea of Thieves deals with Ui is amazing. Aside from your health bar showing up when not at max, you screen is completely HUD-Less, with everything from the map to the compass to the in-game time shown through in-game items that can easily be accessed with a single bumper press and joystick movement. Things like treasure maps, compasses, and pocket watches can even be held out and shown to other players by holding the left trigger. It’s amazing.
Concur. Great design.
Satisfying UI
- Doom's weapon wheel, never gets old, it's just satisfying switching weapons this way.
- Ace combat HUD. The cockpit and arial views are just so engaging and they change the display elements with each aircraft, not only to match their rl counterparts for immersion, but to also signal to the player the physical change of switching aircrafts built for different roles.
- LittleBigPlanet: The Popit is just genius. A fluid UI element that adapts to the player's circumstances. Both a 2d object anchored to the screen and a physical object tied to the LBP world. Plus it was satisfying to use.
probably one of the best interesting hud designs I've ever come across is the field of view in Darkwood. Darkwood is a top-down view game, but detailed information is only visible within a perspective light-cone extending from the player character, the rest of the game screen is perpetually murky gray with only vague topographical information. It makes for an INCREDIBLE survival horror experience bc you have enough information about the terrain around you to estimate the distance between you and points in your immediate surroundings, but still need to pay attention to your field of view for things like protecting yourself at night, and it leads to interesting gameplay strategy bc the field of view changes under certain circumstances, such as when holding a weapon at the ready before striking, forcing you to juggle between broad visibility and task focusing. Its an incredible way to create a unique sense of claustrophobic tension and it and several other hud design elements, like the division of the inventory and how it's accessed in gameplay, make Darkwood a must play game when talking about interesting hud design
One of my favorite game HUDs is in Elite: Dangerous. It's a spaceship sim game played exclusively in the cockpit of a ship. The UI is all holographic projections either in the air or on your cockpit glass. It shakes around with your ship, rolls and pitches, etc. However, that's not the best part.
If you're somehow unlocky enough to smash your cockpit canopy against something or get your cockpit shot through by enemy fire, your glass takes damage until _fwoosh_ it's broken. The game goes silent. There is no sound, now that your ship's speakers have no air to play sound through. You only hear your pilot's breaths in his spacesuit. Oh, and remember how important parts of the HUD were projected onto the glass? That's gone too.
Good luck navigating a spaceship in deep space when you have no clue what or where your nearest spaceport, and you only have a few minutes of emergency oxygen left before you suffocate
"When games have great UI you dont notice it. But when they have a horrible one you can feel it." - TheActMan in that one video
@@z-leven9651 Hell, design in general. Douglas Adams quipped about tool complexity by saying "We don't notice pennies, because they work exactly how we expect them to. We notice computers." (The exact quote is no doubt better written.)
Yes and no. I mean, like he says about Persona 5 for example. That UI is so striking and stylish that it grabs your attention in a big way, but it's so great that you love it. The UI isn't some passive thing just doing it's job, it's part of the games identity.
I disagree. I think if the UI is passable then it goes unnoticed, but exceptional UI certainly can make a game feel different. Doom's weapon wheel still sticks with me and games that use this wheel well enough are satisfying to play.
Black Desert Online is an example of too much information on the HUD, and it's stressful for a new player...
@@z-leven9651 Persona 5's design has its benefits. If you ever look at the ingame models during standard conversation, you'll find them serviceable, but not very expressive. Aside from a few oft-reused animations, they don't really move much unless there's something big happening. During dialogue scenes, then, your eye is drawn down to the bottom of the screen with the jazzy, animated text box and the far more expressive character portraits.
Persona's models have long been the weak link in the game's look, so Atlus decided to leverage that, and ended up with one of the best looking games ever made.
I really like how "Return of the Obra Dinn" makes its UI elements diegetic, and in turn, once you start thinking about them as part of the game world, they can help you solve several fates, including one before you even use the pocket watch for the first time.
One of my favorite video gaming moments recently was while watching my girlfriend playing Obra Dinn:
"Do you want a hint?"
"Yes"
"How did you get that book?"
"What?"
"Who gave you that book?"
Honestly, one of my favorite examples of HUD-equivalent UI interacting with gameplay isn't even from a video game but from _Attempting to Fulfill the Plan:_ a turn based forum game about managing a planned economy. I'm quite fond of it as a case study in various ways that just altering the information presented to the players can alter the feel and nature of a game. Whether by making obfuscated mechanics something for the players to discover rather than being handed to them, adding an element of reading and analysis of the text to what would otherwise be a pure numbers game, or as a plot twist to, as one player put it "Put us into hard mode, but also unlock the good ending."
Importantly, it's one where there's both a narrative component and a list of hard numbers on how much everything is going to plan and what needs to be done. In light of that, the players eventually learned that things like seasonal variation or how fast they finished projects actually made a difference. (It turned out that rushed work is shoddy, slow but consistent maintenance can be surprisingly effective, and failing to account for the weather could be somewhat... grim. This was not a lighthearted game.) Nothing ever talked about it, and still doesn't, but the mechanics actually did exist, and had to be learned through the narrative and trial and error.
In another case, a stat for how much the higher ups are favoring you at the moment completely disappeared in the midst of a crisis while still being present in the narrative. (Because hey, makes sense that everyone is too worried about the war to be worried about pleasing the boss, including the boss themselves) So players instead of having a hard stat now have to hunt for clues in the narrative about how much each policy will affect their favors once the mechanic eventually does come back and tally up everything that happened again.
Yet another case is how one of the big early twists was players picking an option to be much better at everything, with the cost of no longer being able to lie to the bosses, only to learn that, "oh, the fudged numbers applied to what we as players see _too_ because all _our_ underlings were lying to us as well." and see that rather than doing incredibly well as they thought they'd been, everything was massively behind schedule. Not a little exacerbated by the players having gone for plans noted in the narrative to be "impossibly optimistic."
All things concluded, it's a really interesting fusion of the tropes of the unreliable narrator and the interface screw.
A really interesting example of UI I witnessed was in Sakuna : Of Rice And Ruin.
The UI here is treated a bit like a power-up. Since there's a lot of "farming" element in it, you start the first time on your field with 0 indications and barely any help, but the more you'll do each task, the more your character will get familiar with it and then you'll unlock some UI indication that'll let you know various information like "is your field well tended", "where are the bad weeds located" or "are your crops planted too close or too far".
Really makes it feel like something you earned.
Also, special mention for Nier:Automata where you can install/uninstall the HUD on your character.
As a counterpoint to decision made in Reigns, The Binding of Isaac used to have very basic information about how items would change your stats, shown in bars during the pause menu, and in one of their DLCs they added a HUD element that gave you exact numbers on the side of the screen. This was done, I believe, because of players voicing their frustration about the randomness of certain items and their descriptions.
For example the items "Screw" and "Toothpicks" both have the same description "Tears + shot speed up" but the former gives +0.5 tears and +0.2 shot speed, while the latter gives +0.7 tears and +0.16 shot speed. There are legitimate times in Isaac where you are offered the choice of 1 of 2 items and knowing those stat differences would likely have been impossible otherwise.
Interesting!
The fact this video was made when I’m looking at how to implement UI into my game design documentation is an insane coincidence and like most GMTK videos, I’m sure this is gonna help a tremendous amount in reminding me of the obvious stuff I always overlook
I found that the best games manage to dial it back as much as possible.
Diegetic UI is the best and should be encouraged more.
An example of UI impacting game design that's one of my favorites is the scrolling health meter in Earthbound and Mother 3. The ordinarily chill gameplay flips on its head and becomes and introduces a challenging decision to make. Do you try to beat the enemies fast enough to outspeed the clock or do you try to maneuver the menus without hesitation in hopes that you can heal your party members in time? In 3 they introduce another component to this situation, that being sound battles. You perform combos to deal more damage OR you can opt out on the combos to save time. Not something that I think gets enough credit
I particularly love the way experience points are handled in Ghost of Tsushima. Instead of giving some random number that I'll never use it just tells me if a mission yields high, medium, or low xp amounts.
The cool thing about the Scars’ whistles in TLoU2 is that you can actually parse out their meaning if you study them a bit. Specific whistle mean certain things like “man down” or “I saw something suspicious” etc.
@@lued123 Very cool. I had some issues with the pacing of that game but mechanically and graphically, it's virtually airtight
@@lued123 Never understood the differences since they all did the same thing.
Thought it was a wasted mechanic when you could have had your buddy scars distract them with whistles
For the bit on Castlevania always showing the boss' health... that could he interesting for a hunting style game, where the boss has no arena or obligation to face you head on all of the time. Maybe they can even hunt for the same healing items you'd use to recover... and seeing their HP tick up could let you know to focus on spots where heal items can appear at all.
Interesting you should mention a hunting type game, because that makes me think of how Monster Hunter does things. Oddly enough, they don't show a health bar at all for the monsters. Instead they make you figure out how close the monster you're hunting is to death through things like its behaviour and animations changing. When I first tried a MH game, that threw me off, because I was frustrated that I had no idea how long a hunt was going to take. I still haven't played too much of the series, but I appreciate that choice more now.
@@Terithian same goes for other games in the hunting genre, although in the hunting games I've played (which are in the MH and God Eater series, respectively), you don't always have only one target, so the Castlevania health bar wouldn't be of much help.
That sort of reminds me of that Bigfoot hunting game that got pretty popular a couple years ago. If I'm remembering correctly, its health is displayed pretty much at all times, and the sudden change when a previously laid trap manages to chip off some of its health always gets the excitement climbing back up. It helps you think about where you are/how you're faring in comparison to your prey, and I think it'd be really interesting to see more games with that mechanic.
I really liked that in ori and the will of the wisps ori spins on the second jump and and produces a small wave on the third making it obvious what jump you're on
For me the best UI system can be found in the Metro series, especially during outside phases where the state of your helmet and your watch would indicate you how much o2 you've got left. This fits perfectly with the general atmosphere and serves the gameplay in a unique way.
Great content as always, love this channel!
I remember accidentally pressing E at my grandfathers funeral. That was awkward
_Half-Life use SFX_
@@dmas7749 *half-life gibbing sfx*
@@re57k i LOVE that sfx
@@dmas7749 it sounds crunchy and tasty
I'm glad you said grandfathers rather than grandfather's, since it's a mass grave. Makes me wonder how many you had though!
I remember Donkey Kong Country being one of the first games I played that hid its UI elements. If you weren't collecting bananas or letters for example the counter wouldn't be on the screen. It really helped you appreciate those super high tech graphics at the time!
Also your "health bar" could be interpreted by having both Diddy and Donkey or just one of them
@@pcm1011 Yeah, I do miss that. The 2 hearts (and 4 with a partner) suits well the newer games but it removes the purpose of having them added following you (perhaps that's why they're on your back now and function as a powerup too, which holy shit is actually a very smart transition)
One thing that I wish had been addressed is how this stuff interacts with accessibility. Are these diagetic UI elements sacrificing accessibility?
This. Or any UI element that can be difficult to digest or needlessly increase cognitive load. It can be a real accessibility issue and i wish more devs would consider stuff like this. (Especially in shooters.)
I would like to mention how Amplitude studios has created a very consistent five color combo for their fidsi (food, industry, dust, science, influence) resources. Particularly in Endless Space 2 and Endless Legend, things pertaining to science have an obvious blue color, and Amplitude has used the same stylized atom to represent science in all their games. Industry is orange and has a pair of cogs, food is green and is a piece of wheat, dust (or gold in Humankind) is yellow and a coin looking object, and influence is purple and a star.
"It's about being clever with the layout. To ensure that the information that is on screen is relevant and easy to digest"
_Final Fantasy Dissidia NT has left the chat_
many games left the chat
That name alone should tell you that it's very much the opposite of minimalism
@@danieladamczyk4024 many games mess it up but very few mess it up THAT bad
@@AlexanderMartinez-kd7cz i just looked this up, and as atheist i must say
"DEAR GOD!"
@@danieladamczyk4024 bro as a fellow atheist I let out a jesus christ when they first showed it lmao
Mark Brown is going to raise the best generation of video games this world has ever seen
We really need to get this man more view.
This dude’s just great.
I'd like to shout out fighting game ui, as that can be extremely critical to gameplay and so it has become refined to tell the players exactly what they need to know at the slightest glance.
I'd personally like to give a shoutout to SimCity 4 for finding new ways through the HUD to convey to players the health of their city.
In addition to the returning news ticker, the game also displays six "polling bars" that show how the city is performing in categories like education, environment, health, etc. Much like the mood meters in The Sims, these bars have indicators and color changes that show when approval is rising and falling, giving players a nice confidence boost or point for concern, respectively.
The advisors also return from previous games, now with new animations and portrait colors to convey at a glance how positive, negative, or urgent their reports are. It's all a huge step up from having to scroll through your news ticker messages, scan maps, and judge tiny advisor thumbnails. SC4 found a clean way to give would-be mayors some nice visual indicators.
Anyways, great video! Loved the presentation (and that the P5 thumbnail literally says "heads up!" haha).
I’m a big fan of the sekiro attack indicators. They show you a big attack is coming, but you still need to parse the animation to know if you need to dodge, parry or step-on-their-spear, and you still need to react quick enough to do it.
I always thought of health bars and stamina etc not as gauges, but as displaying information the player would know if they were embodied in their player character. If you were actually running around as Aloy in Horizon (or whatever game) you would know if you were running out of breath/stamina or if you were half dead with your arms cut to shreds. Since you are not in fact embodied in your player character you need the hud to tell you the information that you would otherwise physically know. The same with magic/mana meters too, though they do not have a direct real world counterpart.
I think of it the same way, but that information can be conveyed without a HUD through various graphical, animation, and sound effects. You don't *need* a HUD for it, it's just a preferred solution for conveying that information most of the time.
Pokemon's exclamation mark when a trainer notices you is more an example of iconic HUD although it ultimately plays into game design because you quickly learn to be on the lookout for trainers, whether to find them or avoid them
I must say I love the design choice in Styx to give the titular goblin a tattoo that glows when you're in darkness, speaking of magical tattoo murder sims, I enjoy Dishonored being totally playable sans the HUD, makes for amazing screenshots and adds to the feeling of immersion.
Also there's that Jurassic Park game where you look at your own boobs to see your health (represented as a tattoo.) Just thought everyone should know that's a thing and is great.
HUD UI is especially important in strategy games, where being able to make informed decisions easily is key-- your cognitive load is less stressed by quick action and more taken up by how to optimize your next choice. Amplitude's Endless games have always excelled at clean, readable design (as well as sometimes being absolutely beautiful to experience)
Agree, also related to the size off the screen. I think this one of the biggest problems in games like Stellaris, so many ressources and stuff, and so small ... Its like they want to kill your eyes wtf... I think this one of the reason hearts of iron 4 is superior to stellaris, even though Stellaris has better concepts. The UI of HoI4 is just that much better.
Sadly HoI4 has a forced alliance/ declare war system, that makes your playthroughs to similar often. Also the AI is to stupid often.
I think even though some of the other games maybe be better, Hearts of iron 4 has probally the best UI of the paradox games.
The animation is especially clean on this one
The no-HUD display in Dead Space is a stroke of genius. It's a technical marvel.
If you listen to how Glen Schofield achieved it with the technology at the time, you can hear his voice telling you, I put my heart and soul into this game.
Ubisoft achieved the whistling enemies with Far Cry 4 back in 2014 but Ubisoft is on the bad side of everyone apparently so no credits were given.
... technical marvel? I don't see it as such. You could claim creative leap, but... Like the man said, the earliest versions of showing the player their hp through their player model... Was in Super Mario Bros.
Like, I can see how putting a gauge onto a player model could be finicky, but... I still don't see technical marvel.
@@plzletmebefrank K
I saw a video that made my favorite UI element be Breath of the Wild's stamina wheel.
the gist of the video is that being a circle makes it less obtrusive that a bar, and by having it only pop up when you use it, it is very effective. Especially because it pops up next to Link, not in the corner of the screen, because your stamina is vital, need-to-know information.
So I've started playing SMT Strange Journey and I love how the first time you encounter an enemy its a blob of data, giving a lot of fuel to the "stranded in another dimension" storyline the game has. Also the UI elements are represented as part of the visor in the character's suit.
I saw a persona on the thumbnail and I didn't even need to read the title to know what it was about
YYYYYEP!
How people can fall in love with such a hideous and migraine-inducing UI is one of the great mysteries of gaming.
@@expendableround6186 poor taste mate
I know I’m late to be leaving a comment on this video. I’ve been catching up on some of my favorite content creators. I have to say though, Mark, I absolutely LOVE this video and the subject matter. This aspect of game design is positively FASCINATING to me. From what kind of experiences for the player can be created by removing information or adding it. To the whys and reasons a game developer chose what to display and what not to display. I even enjoyed the concept of making the information diegetic (a nice word that I didn’t know existed and now can use when I can try to explain stuff to friends) and making the player choose between whether they want to use a motion tracker tool or a weapon. I adored this video. I am biased though because my field is in psychology and I have ALWAYS been fascinated by how games affect a person’s perspective, experience, and behaviors/choices. Thank you for making this video. I’ve always enjoyed your content, Mark. This just so happen to ring a bell closer to home for me. :)
Such an important subject that, as you pointed out, often gets relegated to an afterthought. Glad to see you covering it in the same amount of depth and detail as other, more obvious topics. Keep up the great work!
2:58 i am surprised you did not include the iconic "press f to pay respect"
Press X to Jason!
You have an Odd Head.
Activision would probably have DMCA'd the video.
GMTK: ”Press Y to open door
Press X to get into vehicle”
Me: Now please say press F to pay respects
GMTK: ”Press E to jump into mass grave”
Me: ...
Even better!!! :D
Always fun to play with people's expectations ;)
@@GMTK, sometimes it's nice to have some unpredictability, indeed. ^_^
I also want to highlight the opposite situation that can be seen in RPGs, where a robust UI is actually critical to the gameplay, because a big part of the gameplay is optimizing stats.
Awesome explanations! Some of these concepts can be very tricky to explain concisely.
mate what the hell? this editing is so great it's hard to believe
3:01 I laughed so much there. Never heard you so confused before.
Great video though. I love the word document or text editor style throughout the video!
THE ARROW TO THE SHOULDER AFTER THE WHISTLE JUMPSCARED ME SO HARD IWJDIWJDJWIDJIWJD
I like Splatoon's HUD. The amount of enemy ink coloring you shows your HP, as well as ink covering the edge of your screen. When an enemy Octarian sees you, they get ? and ! to say they found you. In Turf War, your team's little Squid and Octopus symbols go rainbow if they have a Special ready, go grey and get an X is they are splatted, and get bigger/smaller depending on turf inked. In PvP/Campaign, your in-game ink tank tells you how much ink you have without going in your ink in Squid/Octo form. If someone has a fully charger Charger, the back starts glowing and shining. Rollers lose their ink coating if the user doesn't have enough ink to fling an attack. There is bar on your ink tank indicating if you can throw a bomb. In Campaigns, your lives appear as little squid or octopi in the upper-left corner.
I love how botw calls it "Pro-mode" when it hides the games map and other HUD-elements. It makes me check out every nook's cranny and not just areas that look interesting on the map.
I was astounded how many little meters BOTW has bc I turned all that sh*t off instantly. Like, a stealth meter? That's active all the time??
I'm allergic to minimaps so I turned it off on my first playthrough, the moment I got access to the settings. I'm glad I did because BotW is one of the few games that you can actually play without that information, if you pay attention to the instructions you're given by NPCs you can identify everything just by looking at the environment, the map is well done enough that even after all these years I can still tell where a picture of a forest was taken just by looking at it. I only realized how much effort that must've been for Nintendo when I went on to play other open world games without a minimap. Some don't even let you turn it off, but the ones that do are nearly unplayable without it.
Yeah I turned pro mode on the moment I started playing. The game is so much more immersive as a result!
Every time I read BOTW I think of RedletterMedia's Best of the Worst...
@@thekiss2083 Little meter like that are necessary for people who want to play in a certain way. Like someone who prefer to play sneaky or want to do it can use that info. BotW's UI is just having all the tool you need and it's up to you to use it or not, I'd say.
This video proves there are some people in the video game industry who really care about their work, yet those people are not the one in control unfortunately.
Each video from GMTK makes me want to drop everything and start making games, cheers. Best Game UIs are the customizable ones
I like how risk of rain 2 shows you the difficulty curve alongside the time in your run, you begin to panic once the difficulty steps up and also begin to hear your heartbeat as you see the length of your current run, really adds to the tension
I like the HUD from Splatoon 1 & 2, for your ink (ammo) have you a tank on the back of character and only diving in the ink show it as 2D element.
On the map you can see in with direction youre teammates or visible opponents look.
If your special is ready, not only the HUD scream, also your character glow and can even seen by the opponent.
I love how Astroneer embeds the ui into the game world. You always see your inventory on your backpack. And you see the inventory of the other players. I wouldn't be supprised, if the ui lead to smaller numbers of necessary items for building stuff which changes the game balance. Also your oxygen level and power level are part of your visual equipment. I love it.
I thought of this example as well, especially when Mark referred to Dead Space. Astroneer is such a great game, it's UI is well thought out and it adds to the atmosphere of the game
In Sunless Skies I love how the journal entries appear on the screen around your train
The production value of this video is just unreal! I love that the informational elements are shown as if in a drafting mode of a game designer. Totally slick
13:23 Growing up my brother, mom and I all LOVED playing Peggle! It was one of the games we "bonded" over, like Soul Calibur IV
5:51 “Do you feel lucky punk?”
Replayed Nier Automata recently and shout out to that game's UI. 10/10
I was thinking about that game all through the video. Definitely an expert in diagetic UI, and that one part near the end is one of my favorite examples. You know the one.
He did not mention NeiR:Automata. THIS CANNOT CONTINUE. I mean, you can have as little or as much UI as you want but you sacrifice chip slots you can use for something else to add UI data. Brilliant design.
I like how in Titanfall and Apex all the guns have some sort of bullet counter. Even though I don’t really use it that often, its nice to have.
For me I'd say some of the little touches in Rain World work quite well.
The HUD only shows the rain timer, karma level, and food bar, but only when relevent or if tapping the spacebar. There's no health bar to speak of but the rest is generally conveyed by your character, slugcat.
- If you do a crouch-jump, you know it's charged when slugcat arches it's back
- What hand is holding what tells you which item will be thrown first
- the animation for storing an item in your crop differes from spitting it out
- after being underwater a while, slugcat shakes as it catches it's breath back (and while underwater you have a visual indication for when your breath is running low)
and so on.
Even the various over creatures in the game have clear signals as to where there attention is, if they've sensed you, and so on (if that doesn't necessarily help you to survive should things go awry).
It cou'd be shown by a HUD, but seeing how it physically affects you and the other entities is more meaningful, and keeps you focused on them also.
Can we take a minut to appreciate the quality of this editing
There's a lot of interesting ways VR games present information without a HUD, which would otherwise break the immersion of the experience. Half Life: Alyx did it really well by integrating it onto the gloves, something you'll look at a lot as you move them through the space. The ammo count on the guns had a little bit of a learning curve, and i feel like it was designed to be easy enough to read when in a quiet part of the game. But, during a long tense fire fight, the cognitive load of tracking enemies in a 3D space and finding cover made it harder to keep track of your ammo, which increased the tension. Alyx would say how many magazines you had left when you pulled them out of your backpack, and it always felt really felt dire when i'd hear "Last mag," as i reloaded my pistol.
Now would you look at the INSANE production quality of this video! Well done, Marc, well done!
When you mentioned diagetic HUDs, my mind instantly jumped to VR games. Diagetic information is crazy useful in VR, since having a HUD stuck to your face breaks the immersive and realistic qualities of the medium. Half-Life: Alyx did a great job going from the series' usual HUD to one that is (almost) completely located on your hands. Health, resin, ammo; everything important is visible just by looking at the Russells (or your gun, for your loaded ammo count, but that's almost the exact same as hands). The only non-diagetic elements are quick floating messages that teach you the controls or what to do with new things. I really think they did a great job on delivering info to a VR player smoothly.