CodeChangers STEM Blog post

User Interface Elements in Video Games Part 3—Diegetic UI

  • Sydney
  • March 02, 2020
  • News

You mean there is more UI in video games? Oh yes. Yes there is indeed. We have covered two (Meta and Spatial UI). Now, with there being four general categories to put video game UI in, we have two more types of UI to cover. So let’s review… what is User Interface (UI)? Essentially in video games, the “UI’s goal is to make sure that it helps you find everything you need to have or know (e.g., settings, menus, maps, weapons, life points), but doesn’t get in the player’s way (e.g., pop-up menu obstructing views of the game play)” (Sydney, 2020). UI is like an invisible map or set of instructions. Now out of all of the UI elements previously talked about, this UI element is probably the most subtle: Diegetic UI.

Diegetic UI is UI made to look like it is entirely part of the game’s narrative. It is something that the character would interact with in their world. If it exists in the physical space of the video game, and is something the character could interact with, it is considered Diegetic UI (Andrews, 2010).

Let’s jump in.

(Image from: https://medium.com/the-space-ape-games-experience/ui-breakdown-metroid-prime-c22cdfbce0bc)

Since TV shows like Star Trek, depictions of space and future technology often include holograms. This kind of technology can be seen in video games such as Metroid Prime. When Samus puts on her power suit, she can see a hologram in her helmet that displays her health meter, map… Wait a second...

This HUD (Heads-Up Display— “Any transparent display that presents data without requiring users to look away from their usual viewpoints” [Wikipedia, n.d.].), is displayed in a holographic style that Samus would probably see in her daily life. You (and she) both rely on what is displayed in her helmet. Video games like Metroid Prime, have an advantage as “Many games get away with using Diegetic patterns because their narrative is set in the future, where UI overlays in daily life are commonly accepted” (Stonehouse, 2014). Samus’ holographic, Diegetic display keeps the player immersed in the game. The player receives feedback or instructions directly from the character’s equipment—something the character interacts with and is considered state-of-the-art technology in this video game’s narrative. In other words, you are literally interacting with Samus’ world.

Image from: https://www.gamasutra.com/view/feature/132674/game_ui_discoveries_what_players_.php?page=2

Speaking of UI of the future, Dead Space has a suit for that. When playing a third-person shooter game, you are always looking at the back of your character, right? So the designers of this video game had an ingenious idea. What if you put the health meter on the back of the character’s (Isaac Clarke’s) suit? This seamlessly integrates the information the player needs (e.g., health meter) into the narrative of the game (Andrews, 2010). Now that’s UI of the future.

Image from: https://blog.prototypr.io/the-ux-ui-greatness-hidden-within-the-legend-of-zelda-ocarina-of-time-46fd876f5ffd

“Hey listen!” This might be a stretch, but Navi, in a way, is a Diegetic UI element. To review, Navi is a character that brings instructions to Link throughout his adventures. Instructions are typically displayed in a text box (Definitely NOT Diegetic UI), but the instructions are brought to you by Navi— where “she is used by the game designers to educate players about the new control options available to them without being non-diegetic in the proces” (Lewis, 2019). You see, if you only had text boxes to rely on for game instructions, it would be a pretty jarring reminder that you are playing a video game—not exploring this magical world. This is where Navi steps (er—flies) in. She is the one that conveys the information and guides you as a player—making the transition between your game controller and Link’s world much smoother.

Whether you know it or not, you are getting instructions from your video game on how you should and should not play the game. Video game UI is important in all video game design. Without it… You might not have a video game at all.

Works Cited

Andrews, M. (2010, Feb 23). Game UI discoveries: What players want [Blog post]. In Gamasutra:The art & building of making games. Retrieved from https://www.gamasutra.com/view/feature/132674/game_ui_discoveries_what_players_.php

Lewis, A. (2019, June 30). The UX & UI greatness hidden within The Legend of Zelda: Ocarina of Time [Blog post]. Retrieved from https://blog.prototypr.io/the-ux-ui-greatness-hidden-within-the-legend-of-zelda-ocarina-of-time-46fd876f5ffd

Stonehouse, A. (2014, February 27). User interface designs in video games [Blog post]. In Gamasutra:The art & building of making games. Retrieved from https://www.gamasutra.com/blogs/AnthonyStonehouse/20140227/211823/User_interface_design_in_video_games.php

Sydney. (2020). User Interface elements in video games part 1—Meta UI [Blog post]. In CodeChangers.

SYH. (2016, October 24). UI breakdown: Metroid Prime [Blog post]. In Space Ape. Retreived fromhttps://medium.com/the-space-ape-games-experience/ui-breakdown-metroid-prime-c22cdfbce0bc

Cover Image by Andrzej Rembowski from Pixabay