Author
By Arran D'AubignyManaging Director
23/10/2014
GAME UI: Heads-Up Displays PART1
HELLO! HUDs, UI what’s it all about and why is it important?
One of my main areas of focus here at Mind Orchard is making sure the User Interfaces (UI) in our games are functional and clear. I do lots of other stuff, of course. But UI is something I’m passionate about.
I’d like to talk about some of the theory behind Heads-Up Display (HUD) design in games. Its use, the pros and cons, the reasoning behind choosing one kind over another, and knowing the difference.
The 6 Rules.
There are 6 key areas to focus on when considering how information will be displayed in a game. They are:
1) Present relevant information
Think about what the player needs to know at any given point in your game. Refer back to your Game Design Doc (GDD). Once you’ve thought it all through, you’ll know the details your player will need to play and (hopefully) complete your game.
Try and cut the amount of information displayed down to just what is necessary.
2) Use Minimal Screen Space
Don’t steal too much room from the actual game. A screen is the window into your game world. Players want to see as much of it as possible. The HUD should be a subtle extension of that world.
Also the placement of your HUD elements is important. Using minimal space doesn’t mean tuck the score into a tiny corner. Minimal doesn’t have to mean hidden. Thinking about the type of game you’re making will inform the way you design your HUD.
3) Be Unobtrusive
The HUD shouldn’t distract the player from playing the game. It should support the player not drag the eye or demand attention – unless it’s vital to player success.
4) It doesn’t need to be permanently visible
Does a health bar need to be on screen all the time, or only when you take damage? Does a timer only need to appear when you’re into the last 30 seconds? Asking questions will help you find the best solution.
5) Adapt and Evolve.
Depending on what type of game it is, and where you are within the game, the details the player needs to know might change. How about an oxygen tank for sudden sub-aquatic adventures instead of shield power gauge?
6) Simplicity is King
Be clear and concise in how you communicate with the player. In the heat of battle, or as they’re power-sliding through the apex of a hairpin, they will flick their eyes to the HUD for a split second and need to glean all they need in that time. If you’ve not presented the information clearly, it becomes frustrating.
To be fair, these 6 principles are true for most design work and can be applied to everything from Web Design to print design. But when your user is competing within a world you’ve created for them, the information you’re giving them should support them in the fullest way. It should help them win, not cheat them by being clunky or frustrating to understand.
Using the 6 rules to decide: DIEGETIC, META OR SPATIAL?
Whoa… hold on there, what?
It’s OK, I didn’t really know what Diegetic meant until recently.
The term ‘Diegetic’ originally refers to sound. For example; the roar of the Tiger in a nature documentary is Diegetic sound, it echoes through the Asian valley. Whereas, David Attenborough’s narration about the Tiger is Non-Diegetic sound – the sound doesn’t exist in the jungle, the Tiger can’t hear Sir Attenborough.
Here’s a breakdown of the terminology and how it applies to UI design:
Diegetic UI:
This is an interface that is included in the game world – i.e. it can be seen and heard by the game characters.
A superb example of Diegetic UI is the holographic interfaces in Dead Space (EA Redwood Shores, 2008). The developers have brilliantly placed a traditional menu system into the game world by presenting them to the Avatar as a hologram. Both the Avatar and the player read and navigate through this virtual UI. By doing so they have integrated the UI and the game for a more seamless gaming experience.
Along with the holographic interface, Dead Space also places traditional HUD elements on the Avatar; the health bar and weapon status are on the spine of the suit. A very cool solution for third person games.
Dead Space (EA Redwood Shores, 2008). Holographic Diegetic Menu Systems.
Non-diegetic UI:
This is an interface that is rendered outside the 3D/2D game world. It is only visible and audible to the Players in the real world. Think of most classic HUD elements; Score boxes, Timers, Lap counters, on screen buttons etc…
PONG, Established the classic Non-Diegetic Score Box
Spatial UI:
Spatial HUD Elements are presented in the game’s 3D space, but do not affect the virtual world.
NOTE: You can have diegetic and non-diegetic Spatial UI elements. But for simplicities sake I’ll refer to ‘Non-Diegetic Spacial UI’ as ‘Spatial’ and ‘Diegetic Spacial UI’ as ‘Diegetic’.
A classic example of Spatial UI would be glowing outlines of interactive items. The glows can’t be seen by the characters in game. They only exist so the player knows they are important. Things that are in the 3D world, but can’t be ‘seen’ by the avatars are Spatial UI elements.
So the Friendly AI/Character outlines in Left 4 Dead (Valve Software, 2008) are Spatial UI – the characters can’t see the outlines, only the player can.
Left 4 Dead (Valve Software, 2008), The use of Spatial UI elements to assist in finding your team-mates.
Meta UI:
Representations can exist in the game world, but aren’t necessarily visualised spatially for the player; these are meta representations. An example is effects rendered on the screen, such as blood spatter on the camera to indicate damage, a vignette of gore, the ‘Red Halo of Death’ common to many First Person Shooters today.
Call Of Duty, using a red vignette to represent the blood shot eyes of a wounded soldier.
Here’s a simple diagram to help identify the different UI types. Just ask these two questions and you’ll know what kind of HUD element you’re using: Is the information visualised for the player in the game space? And, does the UI element exist within the fictional game world?
The terminology I’m using here is from Fagerholt, Lorentzon (2009) “Beyond the HUD – User Interfaces for Increased Player Immersion in FPS Games”. Master of Science Thesis, Chalmers University of Technology.
I credit their work for the content of this blog. If I’ve peaked your interest in the theory of game UI, then I’d suggest you check out their paper. It’s much more in depth and gives a great insight into the theory and philosophy of HUD design.
In the next part of my HUD Blog, I’ll talk a little more about what all this means and how it affects my approach to UI design for games.
KMP