CodeChangers STEM Blog post

Video Game UI Made Simple With Case Studies

  • Sydney
  • September 14, 2020
  • News

Several months ago, we went into depth about video game User Interface (UI). To review, UI is kind of like the dashboard of a car. It gives you information about the environment around you and tells how you should react (e.g., shifting gears, fixing the car when the engine light is on). In video games there are four basic types of UI: Spatial, Non-Diegetic, Diegetic and Meta. However identifying which UI category the elements are in can be very difficult! So to help, we’ll take a look at the chart above with some case studies to practice analyzing UI.

Star Wars Battlefront II

Alright young Padawans, looking at the circled elements here, what category do you think these fall under?

First ask yourself, are these elements in the game space (e.g., is it hovering around your avatar; is it placed in the 3D space)?

Well… It does not look like it is in the 3D space of the game itself. Instead, it lays on top of your screen or Heads Up Display (HUD). So lets say no. These elements are not in the game space.

Is the element in the game space? No.

Let’s look at our chart again. Since that first answer was no, we are either looking at Non-Diegetic or Meta UI. Good work!

Let’s move onto the next question. Is it in the game story or would the characters maybe know about it? Well… I kind of doubt usernames such as “pinkflowerprinces8000” would really exist on a war-torn Tatooine. Game stats are also a dead give away that the elements would not exist in the fictional world. So let’s give this question a “no” as well.

Is the element in the game story? No.

The second answer was a no, so we are looking at Non-Diegetic UI!

Nice job! First one down.

The answer is Non-Diegetic UI.

Persona 5

Persona 5 is often hailed as one the most visually pleasing video game ever. Its UI is groundbreaking in its style and function. Speaking of UI, let’s analyze what kind of category the circled elements fall under.

First Question—Is it in the game space? Yes! The menu is hovering around our avatar, and the health gage is near an enemy. So looking at our chart, we are going to be considering Spatial or Diegetic UI.

Is the element in the game space? Yes.

Second Question—Is it in the game story? Would the characters know of the elements around them? It is pretty doubtful that the avataar would know about a menu attached to them — let alone a health bar. So let’s say no.

Is the element in the game story? No.

Since that second answer was a no, let’s look at our chart again. We are looking at Spatial UI!

The answer is Spatial UI!

Metroid Prime

The advantage of futuristic games is that you get to make up new technology—even ones that look like an extreme Google Glass. In the game Metroid Prime, the main character, Samus, has an HUD that she runs around with in her helmet. The screens tells her things such as health stats and where she is on a map. However, these elements aren’t just communicating to Samus, but they are giving the player information as well. Let’s dive in.

Is it in the game space? Yes! It is interacting with the game’s environment. It is literally attached to Samus’ face. Let’s take a look at our chart… Ah. We are looking at either Spatial or Diegetic UI.

Is the element in the game space? Yes.

Now, is it in the game story? Samus’ character would be looking at this data regardless if the player was there or not. So, yes! With two yeses, we are looking at Diegetic UI!

Is the element in the game story? Yes.

The answer is Diegetic UI!

Sonic Chronicles: The Dark Brotherhood

Like many Role Playing Games (RPG) before it, Sonic Chronicles: The Dark Brotherhood gives the player information through its character’s dialogue bubbles. So let’s see what kind of UI this is.

Is it in the game space? Although this could be argued against (as these function similar to cutscenes), no. The rest of the game is in a 3D environment while the dialogue is a 2D overlay of the game itself. Now we know it is either a Non-Diegetic UI or Meta UI.

Is the element in the game space? No.

Now, is it in the game story? Yes. Although the characters would not likely see a dialogue bubble pop up next to them, the dialogue propels the story forward. The characters are interacting with each other. So that would be a yes!

Is the element in the game story? Yes.

The answer is Meta UI!

Conclusion

Video game UI can be hard to figure out and don’t always fit into one category neatly. However, whenever you are analyzing video game UI, take a look at this chart. It can help you narrow down the answer. Congratulations, young padawan. You are now a UI Master!

Take a look at this helpful infographic if you want more examples of UI in video games!> InfographicInfographic by Toptal

Works Cited

Bowers, M. (2020, January 14). Level up–A guide to game UI (with infographic). In Designers. Retrieved from https://www.toptal.com/designers/gui/game-ui