Considering the narrative in user interface design for video games

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 narrative, 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

Diegetic UI elements are linked to the story and visible to the avatar, they exist within the game’s geometry. The player and avatar can interact through visual, audible or haptic means. Well executed diegetic UI elements enhance the narrative experience for the player, providing a more immersive and integrated experience. This type of UI runs the risk of frustrating the player though slow response times but this forms part of the game mechanic.

One of the first games to use Diegetic UI elements through out was the Metro series. Metro Last Light uses the main character’s note book to list quest objectives
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
Grand Theft Auto used audible and haptic diegetic queues to prompt the user to access UI elements contained within the mobile phone that they player’s character is carrying

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


Non-diegetic elements

These UI elements are split in to three types. Two sit on the 2D pane between the player and game world; HUD and Meta elements. The third sits within the game world, though isn’t visible to the player’s avatar; called Spatial elements. While none of these elements are visible to game characters they vary in how much they support the game’s narrative.

HUD elements

Traditional UI elements are completely removed from the game’s narrative and geometry. They can adopt their own visual style (though influenced by the game’s art direction) and can allow the player to customise their appearance. They should be used for simple, familiar elements when speed and legibility are the highest priority. They don’t support the game narrative and 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 there for doesn’t play any role in the narrative

Meta elements

Meta elements also sit on the 2D pane but attempt to maintain some of the game’s narrative, though not visible to the game’s characters. A common example of a Meta UI element is blood the splatters on the screen, or colour that fades, as a form of 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 difficult to define in games without a strong narrative element, such as sport or racing games.

Spatial (geometric) elements

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

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

Last Of Us listen mode: UI elements in the game world that convey sound that the player’s character hears
Forza Horizon and other racing games often use a ‘racing line’ spatial UI element

Conclusion

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. Technology provides an opportunity for deeper levels of interaction with the addition of audio and haptic elements. This will mean less use of non-diegetic UI.

Game UI has a key advantage (or disadvantage from some perspectives) in that players are strongly engaged with the narrative and/or game mechanic enough so they are pushed to learn new interaction patterns, or forgive bad ones. This is likely the reason so many games have bad UI, as testing encompasses the core game mechanic while UI is seen as secondary.

This article is an update to an original post on my blog in 2010 (since removed) — which was republished on Gamasutra in 2014.