Video game user interface design: Diegesis theory

Video game user interface design: Diegesis theory

 by Dave Russell on 2 February

Interface design is often one of the most challenging aspects of game development. There is a lot of information to convey to the player and little screen space with which to do it. When the interface is poorly designed, a good game concept can be reduced to a frustrating user experience.

There are several theories that can be used by designers to analyse a user interface and help them break down choices. The theory we will look at here is called diegesis theory. It is adapted from diegesis theory used in literature, film and theatre. Diegesis refers to the world in which the story is set, and hence it focuses on games as stories.

There are two concepts core to this theory: narrative and the fourth wall.

Narrative

Narrative is a message that conveys the particulars of an act or occurrence or course of events. In simple terms, it is the story the designer wishes to convey; be it the story of blocks falling from the sky which need to land in the right place (Tetris), or a journey through a strange land (Machinarium).

Not all elements of a game are part of the narration. For example, the game menus and the HUD, because the game’s characters are not aware of these elements. This does not mean these components do not support the narrative. For example, a futuristic game typically has GUI elements that also appear futuristic.

The fourth wall

The fourth wall is the imaginary divide between the player and the world of the game. In order for the player to immerse themselves in the game world, he needs to move through the fourth wall. The ease with which the player moves between the real world and the game world depends on the way the interface designer delivers information to the player.

Posting your latest game accomplishments on Facebook is an example of how a game extends beyond the fourth wall. To further delve into this concept, one should read Steven Conway’s interesting discussion of the fourth wall in games: A Circular Wall? Reformulating the Fourth Wall for Video Games.

Interface components

We can now ask ourselves two questions about any interface component:

• Is the component part of the game story? (Is it part of the narrative?)
• Is the component part of the game space? (Is it behind the fourth wall?)

Depending on the answers, we can classify the component into one of four classes: diegetic; non-diegetic; spatial; or meta.
The diagram below shows how the questions relate to the classes.

Diagram adapted from Gamasutra.

Diegetic Components

For diegetic components, we answer our two questions as follows:

• Is the interface component in the game story? YES
• Is the component in the game space? YES

Diegetic components provide the player with cues and information without distracting them from the narration of the world. These cues are something that the player’s avatar and other characters in the game world are aware of, and can interact with. This makes the experience more immersive and cinematic.

In Far Cry 2 an attempt is made to make the experience as diegetic as possible – there is no HUD. The use of numerous in-game gadgets and items allows the player to get information without referring to elements outside of, or superimposed over the reality of the game world.

While this is great for the immersion of the game, if it is not done correctly, it can have the opposite effect. For example, in the adventure game Grim Fandango the player is forced to search through their inventory one item at a time. This frustrating process breaks the player’s suspension of disbelief, and he pops back into reality.

Depending on the type of game you are designing, a completely immersive and realistic world may not be what you are looking to achieve, and this may in fact break the narrative of your story.

In Grim Fandango, the character’s head turns towards objects to indicate that they are interactive. Although it is perhaps a more realistic way to deliver information, the movement is awkward and unnatural. It is distracting and not as helpful as the glowing objects and mouse cursor changes traditional to adventure games.

Examples of diegetic interface

Designing diegetic interface components to replace common HUD elements requires a clever approach. Some examples follow:

In real time strategy games, diegetic components are elements such as the visual damage to units and buildings.

In Far Cry 2 the player can use a compass to help them navigate through the game world – far more immersive compared to the non-diegetic compasses that appear in HUDs of many other games.

In Dead Space, instead of providing a typical health bar overlay, the player’s health is indicated by the high-tech meter on the avatar’s suit.

Non-Diegetic Components

For non-diegetic components, we answer our two questions as follows:

• Is the interface component in the game story? NO
• Is the component in the game space? NO

We have all become very comfortable with the use of a heads up display (HUD) in games. This system provide us with key information in a fairly simple manner. If done correctly the player doesn’t even know it is there.

Some games, such as Gears of War, have a minimalist approach which limits the number of HUD items, while others, such as World of Warcraft, provide extensive HUD information.

An example a HUD being used poorly is the widget in Gears of War. The widget appears when the player selects a new weapon. This widget breaks the flow of the game, distracting the player from the world in which they have spent the last few minutes immersing themselves.
There are less intrusive user interface mechanisms one could use for a simple action such as selecting weapons. If the player is able to see the actual weapon in the game world there is little or no need to show a non-diegetic cue for swapping weapons.

World of Warcraft has a complicated but flexible and customisable user interface that allows players to optimise it to their personal play experience requirements. They can choose how much clutter fills the screen depending on their needs.

Although the game is often criticized for its complicated interface (by pointing out that the game cannot be played competitively without customizing it), it must be remembered that World of Warcraft is a complicated game that allows for many different types of play. The complexity of the interface is a result of the complexity of the game.
World of Warcraft has a rich user interface to support the vast amount of information given to the player. The interface is complex, because the game is complex.
It is not always clear whether a component is non-diegetic. Is the speedometer in the HUD of a racing game really a non-diegetic component? The speedometer is just a conveniently placed clone of the actual diegetic speedometer which is presumably inside the car.

The interface on the left is diegetic; the interface on the right is non-diegetic.

Spatial Components

For spatial components, we answer our two questions as follows:

• Is the interface component in the game story? NO
• Is the component in the game space? YES

These are components that are visualised within the game world but are not part of the game world. The game’s characters are also unaware of these spatial components. For example, the aura selection brackets around units in real time strategy games. They are used to provide extra information on a component in the world, although that information is not part of the narrative. The information is provided in the location on which the player is focused, reducing clutter in the HUD.

A good example of this are the auras in Warcraft 3. These indicate the gameplay effect that is currently in place and the range within which units will be effected. Another example are the icons that appear above the heads of characters in The Sims.

The selection brackets in Warcraft 3 immediately make it clear which units the player has control of. The brackets’ location in space makes selecting appropriate units much easier. Think of how difficult it would be the select them from a list in the HUD – it would be very difficult to see which units are closest to the action taking place in the game world.

Meta Components

For meta components, we answer our two questions as follows:

• Is the interface component in the game story? YES
• Is the component in the game space? NO

Meta representations are components that are expressed as part of the narrative, but not as part the game world. These can be effects that are rendered onto the screen such as cracked glass and blood splatters – effects that interact with the fourth wall are the most common examples.

These components aim to draw the user into the reality of the game by applying cues to the screen as if the game were directly interacting with the player. An example of this is the blood splatter on the screen used in Killzone 2. Note that this interface component also affects gameplay by reducing visibility.

Diegesis Theory in 2D Games

So far, we have only covered 3D games. The concepts we have discussed so far still apply to 2D games.

Think of a 2D game as a flattened representation of a 3D world. Take Pac-Man as an example. There is still the concept of a world, or narrative component, and components that are outside the narrative. The pills, walls and ghosts are all diegetic component of Pac-Man’s world. The scores and details around the game would are non-diegetic.

An example of a purely diegetic 2D game is Limbo. All user cues are presented within the world that the character perceives. The game leverages this pure in-world experience to help the user become immersed into the game. From the background to the foreground the entire world is part of your experience. There is nothing with which players interact that is not part of the narrative.

Spatial representations in 2D games are the auras or indicators, such as arrows, that are present in the game world, although the characters are unaware of them, and objects are unaffected by them. An examples of this are the paths and warning icons in Flight Control.

Although it is easy to imagine screen cracks and blood spatters against the screen in a 2D game, this is rarely done, and no examples of meta interface components come to mind. (If you think of anything, let us know in the comments!)