CodeChangers STEM Blog post

User Interface Elements in Video Games Part 4—Non-Diegetic UI

  • Sydney
  • March 16, 2020
  • News

As you explore UI in video games, one of the main goals is to make sure that the User Interface is so user friendly and intuitive that it doesn’t break the player’s focus on the gameplay. In other words, 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). Now… There are times when it is appropriate to create UI elements that would not appear naturally in the world of a video game. Situations that require more explicit instructions or feedback may require the designers to cross the line between real life and the world of the game. This is done with Non-Diegetic UI.

Non-Diegetic UI is elements that are made to not look like they would belong in the world of the video game. It exists to communicate solely to the player. These kinds of UI “elements have the freedom to be completely removed from the game's fiction and geometry and can adopt their own visual treatment, though often influenced by the game's art direction” (Stonehouse, 2014). Non-Diegetic UI probably functions as the oldest and most common type of UI, you see in the video game world.

The key to knowing if something is Non-Diegetic UI or not is to ask yourself: “Does the character know about the UI element?” or “Would this UI element exist in this fictional world?” No? Okay, then ask yourself: “Does the UI appear to exist inside in the 3D space of the video game?” If you answer “no,” to both of these questions, then you are most likely looking at Non-Diegetic UI.

(Image modified. Image from: https://www.youtube.com/watch?v=2g9kHqXGPKc)

Let’s look at Star Wars Battlefront II for example. This utilizes a lot of Non-Diegetic UI when its players take on the galaxy far, far away. Information such as the players’ names, who defeated who and instructions are displayed on what is called the Heads Up Display (HUD) (i.e., “Any transparent display that presents data without requiring users to look away from their usual viewpoints” [Wikipedia, n.d.]). Most likely, your force-wielding character would not see “PinkPonyNinja82 defeated CaptainSpace432,” right? It also does not appear to hover inside the 3D area of the game, but in a 2D space on your screen. Therefore, it is a Non-Diegetic UI element.

Image modified. Image from: https://www.gamesradar.com/new-super-mario-bros-u-deluxe-review/

Oh Mario. How could we not talk about these classic games? Not unlike its predecessors, the Super Marios Bros. U displays Non-Diegetic elements on the screen so the player can track points, characters, number of coins, items earned, lives and the level’s timer. Mario is not meant to see those elements, nor do they exist in the 3D space of the video game’s world. Classic Non-Diegetic UI.

Image modified. Image from: https://medium.com/super-jump/top-5-best-video-game-uis-db941d6a9357

Usually you don’t want to draw attention to the UI of a video game. Persona 5, however, breaks—no—beautifully shatters this rule. Much of this game relies on Non-Diegetic elements that do not function inside of Persona 5’s fictional world but to be only there for the player. The HUD elements of instructions, life points, playable characters, and dialogue point straight to Non-Diegetic UI elements. They would not exist in the fictional world of the video game and do not sit within the game’s 3D plane. Therefore these elements are Non-Diegetic.

Persona 5 is famous for its attention grabbing elements. So what keeps these UI elements from jarring the player back into reality? The animation, color scheme, shapes and choices of typeface keeps the menus and HUDs in sync with the overall aesthetics of the game. In a deeper sense, you could also say these menus personify the game itself as “A large part of the gameplay takes place in an alternate dimension, where everything is a manifestation of the distorted and twisted desires of a person’s mind. The menus to reflect [sic] this sense of disorder and chaos perfectly, with its punk-frenzy aesthetic morphing and streaking across the screen with extreme visual flair and elegance” (Dakinedi, 2018). It does not take an expert to realize the substantial thought, effort and love that went into the UI of this game. Probably the most appropriate summary of this video game’s UI would be this: “Regardless of whether or not you like the overall visual presentation of the game, there’s no denying that it certainly grabs your attention and begs you to play around and tinker with its interface elements” (Dakinedi, 2018). Wanna buy the Persona 5 game now? Yeah. Me too.

User Interface in video games are paramount for successful gameplay. It is the bridge between the player and the game itself. Without it,the player’s experience would not be natural and constantly interrupted by real-world reality—the very thing most players are trying to escape. Now that you know about UI elements, we are happy to say…

You will never look at video games the same way ever again.

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

Bowers, Micah. (n.d.). Level up—A guide to game UI (with infographic) [Blog post]. In Toptal. Retrieved from https://www.toptal.com/designers/gui/game-ui

Dakinedi, Akhil. (2018, May 20). Top 5 video game UIs: Celebrating the greatest user interface designs in gaming [Blog post]. In Medium. Retreived from https://medium.com/super-jump/top-5-best-video-game-uis-db941d6a9357

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.

Wikipedia. (n.d.). Head-Up Display. In Wikipedia. Retrieved from https://en.wikipedia.org/wiki/Head-up_display

Cover Image by Andrzej Rembowski from Pixabay