What Are Your UI Choices
While working on a VR (virtual reality) project for a class, one of my many roles was UI designer. Knowing nothing about how to design a UI for VR, I began researching. Soon after, I stumbled upon a short blog post about diegetic UI design. While looking at this subject, I also began looking into other UI implementation patterns. I particularly have been looking into Diegetic UI, Non-Diegetic UI, Spacial UI, Meta UI. With all these options, though, it becomes quite hard to choose a UI that works for your game. So what are each of these patterns and what are the differences in their effects?
Diegetic
[Diegesis] refers to the information related by the narrator and many times is comprised of characters thoughts and actions. This excludes dialogue, which is categorized under mimesis. In addition, diegesis can be characterized as the narrator’s commentary on the thoughts and actions of characters.” (source)
Diegesis was a concept explored by Plato and Aristotle and used in Greek theater. Over time, it has now become a tool used in the analysis of media and a common term when discussing how immersive some form of media is. After my first experience learning about it, I began noticing it in more games. So, why is it there?
The Effect
Diegetic elements implemented in games increases the player’s immersion, taking advantage of the visual language of the game, it’s world, fiction and the universe of the character. (source)
The most recent diegetic elements I have interacted with were in Hellblade. One is the voices that Senua hears. Rather than just a narrator for the camera or a HUD (Heads-up display) letting the player know when hits are coming or what your goals are. Everything is communicated in. Additionally, Senua carries a mirror that shines when she is ready to focus on a fight and attack the shadow Northmen.
The result for me was that there wasn’t much meta-game for me. I was focused entirely on how I (Senua) was going to handle the situation in front of me. The split-second warning between the voices whispering ‘watch out’ and an enemy attack landing on you felt more like I was in a fight and barely dodging hits and quickly focusing when the mirror began to shine and the voices whispered ‘the mirror’.
A badly done diegetic UI can be very confusing to a player and possibly disorienting. In Skyrim VR, you float above the map of the work with icons indicating the locations of various things. This point of interaction doesn’t offer much in the way of context, though. Everything is gray and there is no explanation of why you are floating so high above the world when flying is not part of a Dragonborn’s power set (unless your taming and flying).
Diegetic UI Examples
- Metroid Prime (the HUD is part of Samus’s suit helmet)
- Firewatch (navigation using only a map and a compass)
- Metro 2033 (watch menu & status information)
- Syndicate (DART overlay mode)
- Fallout 4 (eagle vision)
- Goldeneye 007 (watch menu & weapon selection)
- Overwatch (guns showing status)
- Human Fall Flat (ending credits)
- Forza (car’s working dashboard)
A few of these use a combination of diegetic and non-diegetic UI elements.
One of the most notable game franchises that pushed its use of diegetic UI elements in an interesting way is Dead Space. Isaac’s health and stasis are represented on the characters back, build into their suit. Because the player is always seeing his back and the character is usually the man focus point of a game, it works beautifully. Menus in the game are also diegetic. They take the form of holograms that Isaac interacts with and are a part of the world. If an enemy is near you when you try to check your inventory, they aren’t going to freeze in place and wait, they’ll continue attacking! It’s an interesting way to make checking your bag stressful and fit into the overall mood of the game.
Non-Diegetic UI
Non-Diegetic elements are the elements of the game that exist only for the player of the game. They are not elements of the story or acknowledged by the characters in the game. These are your main menus, ammo counters, health and mana bars, and cooldown timers. Like in Forza, these UI elements can be really cool. Suggested lines on the road help you judge whether you’re going too fast on a turn or if you’re taking the most efficient route. Detail shots like the one below give you more information about your ride that ends up being a part of how your car drives. In Mass Effect 3, you have the non-diegetic elements appearing at the bottom. Giving you information about your character’s selected weapon and power.
The Effect
In most video games, the menus and player stats are non-diegetic. This UI is familiar to players. They don’t feel completely foreign to the world of the game because they usually borrow from them and incorporate the visual style Of the game. Utilizing a non-diegetic UI allows for more information to be communicated to the player quickly and clearly, like being able to check the contents of your bag while your character does something else in Runescape. It also allows for the more easy and clear inclusion of text as part of the UI. These UI elements are best used when the other types of UI present restrictions or changes that affect the gameplay negatively or the player's ability to understand what is being communicated to them.
In some strategy games, it harkens back to the feeling of being a master control room. I mention this remembering my experience playing Age of Empires growing up. Where my interactions with the game were akin to that of a king or general looking over their plans, laying out the new ones, and watching as their people executed those plans.
Non-Diegetic UI Examples
Non-diegetic UI is a very traditional and familiar approach. These are the UI that exist only for the player and are completely removed from the world of the game.
- World of Wizards
- Runescape (In-game overlay)
- Overwatch (team matchups, battle information, player status)
- Ori and the Blind Forrest (pause and start menu)
- Human Fall Flat (pause and start menu)
- Forza (driving overlay showing speed, traction, and race status)
- Mass Effect 3 (weapon selections and character status)
Spacial UI
Spacial UI are UI elements that are presented as part of the games 3D space but are not part of the game's world. Characters are entirely unaware of the existence of these elements and they exist only for the player's information. This UI form takes advantage of 3D environments and the dimensionality of them. In some cases, they may cast a shadow or light into the environment.
The Effect
Spacial UI usually fits more closely into the context and world of the game. Similar to diegetic and meta UI elements, they offer a boost in player immersion. They offer a way to guide the player or give information to the player in a way that makes sense in the game's narrative. I often play Forza and, when I first began, the guiding lines on the track were a massive help. The lines turn red on turns to let you know if you're approaching too fast and visually indicate the most efficient route.
Spatial UI Examples
- Runescape (players names and speech)
- World of Warcraft (player names)
- Forza (car stats when examined and when customizing a car)
- Splinter Cell Conviction (mission assignments)
- Dragon Age: Inquisition (player locations in top-down mode)
- Forza (the guiding line of the best path to drive)
Meta UI
Meta UI is similar to diegetic UI. Both elements are justifiable as existing in the world of the game, but Meta UI exists on a 2D plane for the player, usually on their HUD. Similar to spacial and non-diegetic UI, the character is unaware of this UI element existing. In Call of Duty, the soldier makes to attempt to wipe the vision-obscuring blood from his eyes.
The Effect
Similarly to the diegetic UI, Meta UI helps create a stronger sense of immersion in the world and character. The UI brings the player more into the world of the game by giving them access to in-game elements. It's a good way to include UI elements without interrupting the world and narrative of the game. In Call of Duty, a health bar is replaced in part by the thickness of blood splashing on the HUD and obscuring your view. Meta UI takes a character experience and maps it to a UI element on screen for the player to more easily view and interact with it.
Meta Examples
- Watch Dogs (phone view)
- Call of Duty (Blook splash as a health bar)
- Grand Theft Auto 4 (phone view)
- Halo 4 (what gun you can pick up and kill spree info)
Non-game examples
- Sherlock (clues having a line pointed to them from a description)
- House of Cards (text messages being shown on screen)
How to Pick One
Some Suggestions
So, with all of these great sounding options with various strengths, how do you choose one? Well, there aren't many hard and fast rules on this. A lot of it is based on experience or touch-and-go experimentation. I have some suggestions, though.
When working in VR or AR (augmented reality), diegetic UI elements make a lot of sense. You are being ported into a new world and expect to interact with it following similar rules to the world you came from. There is not much of a reason why you shouldn't be able to read the output from a machine instead of seeing a text bubble appear (unless you are going for a style in which text bubbles are part of the game).
Meta UI brings the world to the player in a clean and smooth way. It fits in smoothly in cases when your character might interact with something small or detailed that the player should have control over or have a clear view of. Meta UI might be too limited or complicated in some cases, though. In Forza I only need to see my speed, I don't need a zoomed in version of my fuel gauge or RPM (although RPM is shown in the diegetic dashboard view).
Non-diegetic interfaces work very well with much more complex games like Age of Empires and Civilization. Using non-diegetic UI elements does not make a game any less innovative, fun, or ‘cool’. As mentioned before, they allow for more information to be relayed to the player quickly and facilitate text-heavy UI.
Spacial UI allows for a visually interesting way to communicate information to the player that fits within the world presented to them. It works really well for guiding players to a goal or calling attention to something existing in the world. Spacial UI only works in due to its three-dimensionality, and so may not be a good choice for a 2D platformer or other 2D game.
Not Picking Just One
Sometimes you don’t have to pick! You may have noticed that Forza was listed in the example list of all of these UI options. The game incorporates all of them and included the added bonus of making most of them optional. If a player does not want the dashboard view, you can switch to a view from the hood of the car, in front of the car, or slightly behind the car. If a player doesn’t want the guiding lines, they can be turned off in the settings menu. The non-diegetic and Meta UI’s can be adjusted to the player's preferences to show the amount of information wanted.
What works best in a game depends on a lot of factors. In many cases, more one type of UI may be needed for different features in the game. Another game listed multiple times is Human Fall Flat. The game utilizes diegetic and non-diegetic UI. It primarily uses non-diegetic UI in the form of its various menu screens. However, loading screens are diegetic. Your character is literally falling between the two levels and the player maintains control of them the entire way. The credits are also diegetic. The character falls through the credits instead of the player simply watching them scroll by. The act of reading credits becomes fun as the player attempts to interact with them, dragging some letters down with them or trying to cleanly fall through the hole of an opportunistically placed ‘O’.
Whichever UI you implement, the choice is up to you.
