Game UI Design: Principles and Component Types
UI in games is aimed at designing components that are for player engagement. These components are what the player interacts with:
Navigating through the game.
Finding the information they need.
Accomplishing in-game goals that the game designer has created for them.
These interactions are fundamental for a fulfilling and rich experience for the player. A lack of good design for these components can create a frustrating experience for the user and create a game space that is not immersive.
Therefore, UI must be considered highly significant in games, as it is the foundation of the player’s interaction with the game. The UI designer must ensure that the UI is readable, attractive, and playable. This addition is an important consideration the designer must take for their UI components to have maximum engagement from the gamer.
The key consideration for UI in games
UI in games has some common considerations as UI for web applications or mobile applications. Both UIs should aim to be intuitive, responsive, decipherable, and visually appealing. However, UI in games also has some special consideration due to its different nature, being part of a playable medium. Due to the playable nature of games, there are some extra evaluation metrics for UI in games. Here are some of those metrics:
Immersion: UI in games should aim to enhance the fantasy of the gaming experience. This task can be achieved by creating a UI that either stays out of the way of the gameplay (or is integrated into it) or by matching the game’s aesthetics. The aim is to enhance the fantasy of the game; in some cases, overlays and
HUDs Head-up display Unintrusive: The UI should not get in the way of the user and should always facilitate the gameplay rather than hinder it.
Clear: The UI should be decipherable for the gamer. It should not frustrate players by being overly complex.
Convenient: The UI should be organically implemented in the game and not stand out. It should be natural to use.
Accessibility and inclusivity: The game’s UI should be tailored for diverse audiences and create a more welcoming and accommodating gaming experience.
Adaptability across platforms: The game UI should function properly and be easily used across various platforms and devices (assuming the game is playable across platforms).
Let’s discuss the principles for designing UI in games.
Developing UI for games
Before developing UI components for games, a few concepts are important to learn. These concepts help distinguish UI design for games from web and mobile applications. These concepts are as follows:
Narrative: This is the game’s story being communicated to the player.
The fourth wall: It’s an imaginary wall separating the player from the game’s world. UI in games helps to break this wall by providing a means of interaction to the player.
These two concepts are imperative in figuring out the nature of the UI components that the designer would design. Both these concepts provide the designer with two important questions that they need to address for every component they design.
The concept of the narrative asks, “Does the component exist in the game’s story?” This question aims to resolve the component’s relationship to the story and, therefore, the game’s characters. Figuring out this relationship informs whether the component should be as such that is visible or connected to the character’s experience in the game. These components connect the player to the characters of the game.
The second concept, the fourth wall asks, “Does the component exist in the game’s space?” This question aims to resolve the relationship between the component and the game’s world. Figuring out this relationship answers whether the component exists inside the 3D world of the game or outside of it.
Let’s see the types of components formed from the answers to the aforementioned questions.
Types of UI components in games
The diagram below shows the types of components that can be made from answering the questions about the narrative and the fourth wall:
Note: A component can shift from one type of UI component to another.
Let’s look at these types of components in more detail.
Non-diegetic
These types of components answer the questions posed above as follows:
Does the component exist in the game’s space? No.
Does the component exist in the game’s story? No.
Non-diegetic components are disconnected from the narrative and do not reside beyond the fourth wall. These components are present only for the player; the characters inside the game can not see these components. These components include things like HUDs, health and stamina bars, etc.
Let’s look at one example that shows a player character fighting an opponent. The non-diegetic UI shows their health, special points, and companions.
Non-diegetic components have their benefits and shortcomings. These components are great at conveying complex information to the player since the game’s story or space does not limit them. However, this comes at the cost of immersion. These components often exist disjointed from the rest of the game space, increasing the player’s disconnect. Consequently, some game developers have them fade out during non-combat or action scenarios to increase immersion. Therefore, they should be used in games that can comprise immersion and need to convey complex information succinctly to the gamer, like strategy games.
Diegetic
These types of components answer the questions posed above as follows:
Does the component exist in the game’s space? Yes.
Does the component exist in the game’s story? Yes.
Diegetic components are components that are the direct opposite of non-diegetic. These components are connected with the game’s narrative and reside beyond the fourth wall inside the game space. The characters inside the game are related to or can see these components. These components include speedometers, paper maps, integrated health bars, etc.
Let’s look at one example that shows the interior of a car. The speedometer UI for the car is diegetically included in the interior itself.
Diegetic components are useful to increase immersion. These components seamlessly integrate into the game and feel a part of the game world. They often are a material element in the game’s space itself. However, this immersion comes at the cost of clarity. These elements struggle to use
Spatial
These types of components answer the questions posed above as follows:
Does the component exist in the game’s space? Yes.
Does the component exist in the game’s story? No.
Spatial components are not connected with the game’s narrative; however, they do exist beyond the fourth wall in the game space. These components utilize the 3D environment of the game and are integrated into said environment. These components are not observable or related to the characters inside the game. These elements integrate into the game world and guide the user. These components include racing lines, object text labels, selection auras, etc.
Let’s look at one example. The example below shows a selection aura that allows the player to select the clothes of the character.
Spatial components aim to balance immersion, clarity, and convenience. Because these components are in the 3D environment of the game, they are more immersive than non-diegetic components. However, they break some immersion due to their disconnect from the narrative. These components can also utilize affordances better than diegetic elements.
Meta
These types of components answer the question posed before as follows:
Does the component exist in the game’s space? No.
Does the component exist in the game’s story? Yes.
Meta components are connected with the game’s narrative or experience. However, they are not present in the game space. These components are connected to the character in the game but do not exist in the game world itself. They translate the character’s subjective experience in the game for the player. Meta components include colored overlays to depict changing health, grime, scrolling text, etc.
Let’s look at one example. The example below shows a low-health UI indicator where the screen goes red when the player character takes damage.
Meta components are aimed to increase immersion by translating the characters’ experience in the game for the player. They also feel less organic than spatial or diegetic components (more than non-diegetic ones) because they do not exist in the game’s space. They also lack clarity in the information being portrayed and often fail to provide a precise understanding of the game state.
Conclusion
UI in games is essential for creating gaming experiences that feel rewarding and engaging rather than frustrating. UI in games aims to increase usability, similar to UI in web or mobile applications. However, UI in games also has metrics to judge itself by, such as facilitating immersion and being unintrusive, clear, and convenient. The principles that deal with the narrative and fourth wall help categorize components and inform the type of component for each use case. This categorization between meta, diegetic, non-diegetic, and spatial components creates better gaming experiences.
Free Resources