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.
