UI Design - Function

What Makes User Interface Work? 

To understand what makes UI work, we must first look at the two key elements, narrative and the fourth wall. 

Toptal.com defines narrative as: 
'the story that a video game tells'. ⁽¹⁾ 

Toptal.com defines the fourth wall as: 
'an imaginary barrier between the game player and the space in which the game takes place'. ⁽¹⁾ 

These aspects create two questions that have to be answered in every UI component: 
- 'does the component exist in the game story?' 
- 'does the component exist in the game space?' 

This then creates four categories of UI Design. 

Non-Diegetic 

Does the component exist in the game space? No 
Does the component exist in the game story? No 

Non-Diegetic UI exists outside of both the story and space of a game, this means that non of the player characters or non-playable characters (NPCs) are aware of the existence of the UI. 

Toptal explains that 'in fast-paced games, non-diegetic components may interrupt a player's sense of immersion' ⁽¹⁾ as they distract from their goals and limit their success. However 'in strategy-heavy games, they can provide players with a more nuanced assessment of resources and actions', ⁽¹⁾ therefore assisting the player in making informed decisions and aiding their success. 

The most common use of Non-Diegetic UI is for stat meters. These will be used to keep track of time, damage, health and other various resources that the player needs during gameplay. 

Diegetic 

Does the component exist in the game story? Yes 
Does the component exist in the game space? Yes 

Diegetic UI exists in both the story and space of a game, this means that the player characters and (NPCs) are aware of the existence of the UI. 

Toptal explains that 'even though they exist within the game story and space, poorly considered Diegetic components are still capable of distracting or frustrating players' ⁽¹⁾ in much the same way as Non-Diegetic components. Ultimately for UI to function properly, it must always be well designed. 

Toptal also states that 'scale makes Diegetic components tricky. For instance, an in-game speedometer that resides on a vehicle's dashboard will likely be too small for players to see clearly'. ⁽¹⁾ In most games, this speedometer will also be present in a corner of the screen along with a small map (or minimap). But these 'can [usually] be toggled to a 2D, fullscreen view, making them Non-Diegetic'. ⁽¹⁾ 

The line between Diegetic and Non-Diegetic UI becomes blurred with a simple use of a button making it potentially difficult for designers to find a balance between the two styles used by each category. 

Spatial

Does the component exist in the game story? No 
Does the component exist in the game space? Yes 

Spatial UI exists in the game space but is not in the game story. This means that player characters and NPCs don't know that they exist while still working as a visual aid to the player themselves. They are usually there to help the player to select targets or to highlight points of interest. 

Toptal states that 'text labels are a classic example of spatial UI components'. ⁽¹⁾ This is often seen in sports games during matches and allow the player to identify which characters they are controlling and where they can move. Toptal uses the example of fantasy and adventure games where 'players may encounter important objects that are unfamiliar in appearance. Text labels quickly remove ambiguity and keep players immersed in the gaming experience'. ⁽¹⁾ 

This type of UI, when done well, should be really informative to the player without distracting from their experience. It should aim to give them easy to read, simple information that improves their ability to play the game. 

Meta

Does the component exist in the game space? No 
Does the component exist in the game story? Yes 

Meta UI exists in the game story but not in the game space. Player characters and NPCs may not be aware that this UI exists despite it being involved in the story. 

Toptal explains that meta components can be as simple as 'a slowly accumulating layer of dirt on the game's 2D plane'. ⁽¹⁾ These details are very subtle and almost go unnoticed by the player. But they can be made much more obvious in genres such as action and adventure games, where the 'field of view is sometimes shaken, blurred or discoloured to show that a player has taken on damage'. ⁽¹⁾ 

This use of UI affecting the players' camera is a quick and easy way to inform the player of factors such as damage taken without forcing them to take their eyes off the gameplay to look at their healthbar.

Summary

There are many different aspects to be considered when creating UI and all must be carefully balanced in order to create an accessible, attractive interface for players.

Categorising UI is not as simple as it first seems and will vary from game to game. Toptal explains that categories may vary 'depending on a game's narrative and its players' relationship to the fourth wall'. ⁽¹⁾ Categorising UI may also be largely down to the aesthetic of the game too. As stated in my previous post, UI should match and blend with the art style for the game so as not to reduce immersion or playability.

The image below summarises the categories listed above in a more concise way and will allow me to refer back for information quickly in the future.

References 

(1) Micah Bowers. (2019). Level Up – A Guide to Game UI (with Infographic). 
Available: https://www.toptal.com/designers/gui/game-ui#:~:text=What%20is%20a%20game%20user,Diegetic%2C%20Meta%2C%20and%20Spatial
Last accessed 2nd Oct 2020.