Using the narrative when designing the user interface for video games

Anthony Stonehouse
Dec 20, 2016 · 5 min read

Modern user interface design in games inherits an additional layer for consideration — the game’s narrative. The designer chooses whether the UI is visible to the player’s character (avatar) and linked to the story, based on how story-driven the game is. The player assumes an invisible role in the narrative, much like a narrator in a novel or film.


Diegetic elements

UI elements connected to the story and visible to the avatar are called diegetic. They exist within the game’s geometry. Diegetic patterns are often used where the narrative is set in the future, where UI overlays in daily life are commonly accepted, such as this example Mass Effect.

Both the player and the avatar interact with them through visual, audible or haptic means. Grand Theft Auto used audible and haptic diegetic queues to prompt the user to access UI elements contained within the mobile phone that the player’s character is carrying.

Well executed diegetic UI elements enhance the narrative experience for the player, providing a more immersive integrated experience. However, they also run the risk of frustrating the player. They need to work within the game’s world physics, which usually means they have slower response times. For examples, a character having to take a notebook out of his/her pocket to look at a map. One of the first games to use Diegetic UI elements throughout was the Metro series. The character’s notebook is used to list quest objectives in Metro Last Light in this screenshot.

There are cases when diegetic UI elements aren’t appropriate. Either because they aren’t legible within the geometry of the game world, or there’s a need to break the fiction to provide the player with more information than the character should or does know.


Non-diegetic elements

There are three types of non-diegetic UI elements. Two sit on the 2D pane between the player and game world; called HUD and Meta elements. And a third that lies within the game world but isn’t visible to the player’s character; called Spatial elements. While these elements aren’t visible to game characters, they vary in how much they support the game’s story.

HUD elements

These are the more traditional UI elements that have nothing to do with the game’s narrative or geometry. They embrace their own visual style (influenced by the game’s art direction) and sometimes allow the player to customise their appearance. They should be used for simple, familiar elements when speed and legibility are the highest priority. As they don’t support the game narrative, they should be limited in strongly story-driven games.

Most UI elements in World of Warcraft sit on the 2D hub plane, some elements sit within the world’s geometry such as the player names however the character isn’t aware of any of the UI and therefore doesn’t play any role in the narrative

Meta elements

Meta elements sit on the 2D pane like HUD elements but attempt to maintain some of the game’s narrative, though not visible to the game’s characters. A typical example of a Meta UI element is blood the splatters on the screen, or colour that fades, as a form of a health bar.

The colour in the Uncharted series fades out to black and white on the 2D HUD plane to tell the player that the character is losing health

Meta UI elements can be challenging to define in games without a strong narrative element, such as a sport or racing game.

Spatial (geometric) elements

Spatial elements sit within the game world’s geometry and are the non-diegetic elements that best link to the narrative. They only break the narrative because the characters can’t see them, but they may be in-the-mind or leverage other senses of the player’s character.

The Last Of Us uses it’s ‘listen mode’, UI elements in the game world that convey a sound that the player’s character hears.

They help to immerse the player and prevent them from breaking the experience by overlaying or jumping to menu screens. The closer these follow the rules of the game’s fiction, the more they can help immerse the player.

Forza Horizon and other racing games often use a ‘racing line’ spatial UI element.


Applying this to your game

Consider which type of UI would best suit your game and the player. Designing game interfaces presents a significant advantage over other interface design. Players are actively engaged with the narrative and mechanics, so they are compelled to learn new interaction patterns and overcome bad ones, likely the reason why so many games still work with poor UI. Don’t forget that when testing games to test the UI along with the core game mechanics.

Physical interaction methods and immersive technology such as VR headsets promise to challenge game UI design, allowing for a stronger connection between the avatar and character as both engage in similar actions at the same time. This technology provides an opportunity for more profound levels of interaction, including the addition of audio and haptic elements, leading to less use of non-diegetic UI.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade