The four horsemen of game UI design

Diegesis is a style of fictional storytelling. In it the participating narrator offers an on-site, interior, view of the scene to the reader, viewer, or listener. They subjectively describe the actions and, sometimes, thoughts, of one or more characters (used in films, television programmes, etc.) It occurs within the context of the story and characters can hear it too, rather than just the people watching.

What is diegetic UI?

We commonly find and can apply Diegetic UI to the user interface in games, especially video games to maintain immersion. It allows information to be communicated without overlaying a traditional UI on the screen. This is particularly popular in games focusing strongly on realism or immersion.

We may not use traditional UI elements and components, such as buttons, icons, labels, and menus, in the manner you usually see in apps or websites. For example, as overlay modals or separate elements on the screen. 

Diegetic UI elements inhabit the game’s environment, or the world of a narrative itself, existing within the story’s reality. This means both player and characters in the game are aware of these components. They can see or interact with them rather than as something external to that world. 

The UI uses the game environment, story and/or characters, via audio or visual means to convey information to players. Here, the character can see or hear UI elements which fit within the story’s context. 

Designers do this in order to make the experience more engaging and immersive for the player and to enhance experience.

It is much easier to believe that the character is a real person in a real situation when we don’t clutter the screen with inexplicable icons representing health, lives, ammo, etc.

This reduction of clutter and distractions from the screen, helps to not hinder the player’s game. Importantly it means they don’t need to move away from the experience. The increase in the screen area also allows the player to see more of the game-world rendering. 

Example UIs

A holographic HUD (Heads-Up Display) a character might use, or a phone with a visible screen. Perhaps a watch on the character’s wrist showing the player how much time remains. Holograms, and other futuristic gadgets. A wounded character might limp instead of having a bar that shows you that you lost a life.

 
Limitations

Despite diegetic UI existing within the game story and space, poorly considered diegetic components can distract or frustrate players. Scale can also make diegetic components tricky. For example, a speedometer on a vehicle’s dashboard may be too small for players to see clearly. In some games, players can toggle handheld diegetic components (e.g. maps) to a 2-D, full-screen view, making them non-diegetic.

The major limitation is that diegetic UI is not always accessible, and may be limited to gaming. It may not be the best and most inclusive user experience and doesn’t follow the usability heuristics. However, we don’t mean diegetic UI to be inclusive and we don’t design it for novices. We usually include it as a niche experience that pro and expert players or gamers can enjoy.

Non-diegetic UI is external to the game world. We usually represent them as 2-dimensional elements that exist outside and don’t appear within the game or story. Only the player can see them and they exist solely for the player’s benefit. The characters in the game are not aware of these. 

Non-diegetic components usually appear as stat metres showing points or score counters, time, lives or health bars. Additionally they show maps, collectibles or resources the player has achieved or lost during the gameplay. We normally display them around the screen’s edges in games. Non-diegetic elements don’t exist in the game world but are key to allowing players quick access to crucial information. They are there to make players aware of their performance during the game. 

This type of UI is most widespread and we usually use it for information players need constant access to. It’s a practical approach to provide information that would be difficult to integrate diegetically. It’s often the most accessible and explicit way of all the UI methods to display information, especially for novice users.

Example UIs

Most menus and game displays use multiple non-diegetic UI elements, as pills or modals or overlays. For example, menu screens, quest windows, health bars, score counters, stamina bars, and pop up texts. Additionally, items display, maps or compass, ammo or other resources, and collectibles indication.

Limitations

Design, placement, and context of non-diegetic components are very important and we must do this correctly to avoid hindering game-play. Depending on the game, non-diegetic components may interrupt a player’s sense of immersion.

We find Spatial UI components positioned within the game’s environment. The characters within the game don’t see them; we include them only for the players. These may often hover near objects or characters, providing context without being “in-world”. Spatial components often work as visual aids, and help players in game.

We use Spatial UI to communicate context-sensitive information directly in the game world. It helps players navigate without breaking the immersive environment. It’s commonly used to reduce friction keeping it to a minimum. That is to keep the UI from being intrusive while still being useful. Spatial UI helps remove confusion and ambiguity while keeping players immersed in the gaming experience, a best of both worlds.

Example UIs

We often use Spatial UI for pathfinding lines or arrows, and character outlines to indicate an enemy. Also highlighting objects or items, or hovering icons that indicate interaction (e.g. when a player approaches a door). Additionally arrows or targets showing players where their thrown object will land, health bars or nameplates above enemies or characters.

Limitations

Spatial UI can help streamline and guide gameplay to novice players. It can help them understand what they can interact with or where they should go. This can help give a lot of gameplay specific or story information within the game. However, it is more like a UI element and as such might not allow for player immersion as easily. The overuse of helpful spatial elements can cause more experienced players to get frustrated. To solve this, some game designers include the option to disable UI elements to cater to both types of players.

Meta UI elements are contextual to the game and form part of the game story. They are not however part of, or represented within, the game environment itself. The game character is usually — but not always — unaware of these components. Traditionally, they have been used to signify damage to a player’s avatar.

Meta UI creates an emotional and physiological link between the player and the character’s condition. It’s often used to enhance immersion and empathy, giving players feedback on their character’s physical or mental state.

This type of UI represents the character’s state. They often reflect elements that aren’t directly in the character’s awareness but are still tied to their condition.

Meta UI can help in visually representing information, such as damage taken, in a simple way on the game screen. It does this by employing effects such as a see-through overlay, border on screen, etc, without obstructing the screen permanently.

Example UIs

Visual effects like blood splatters, bloody clothing, or red edges around the screen to indicate low health. A blurred screen to show exhaustion or the screen’s edges flash or pulse when the character is close to death. Blurring, shaking, or discolouring the field of view to show that a player has taken a hit. A slowly accumulating layer of dirt in a racing game showing reduced visibility. Scrolling text or coloured overlays that show a change in the player’s health status.

Limitations

Meta UI can sometimes be vague or non-specific. This affects novice users who rely solely on it, and struggle to infer from visual cues, rather than explicit information. Experienced users however may be familiar with these cues and may interpret them easily. 

Accessibility may be a concern. Meta UI may be difficult for players with visual or hearing impairments, or colour blindness, to perceive. Effects like screen blurring, shaking or flashing may be an issue for some players causing distress or making them uncomfortable. Sometimes meta UI may also interfere with gameplay, which might make it more difficult for some players. We can solve these issues by adding the option to turn this UI feature on or off.