Determine Whether a Diegetic or Non-Diegetic User Interface Is More Suitable
When designing your GUI, it is essential to ensure that players remain as immersed in the game world as possible. One factor that significantly supports immersion is the type of GUI employed—whether diegetic or non-diegetic—both of which can be effective. While one approach may be more suitable for certain games, the other may better complement different game designs. It is also possible to implement a combination of both types. Ultimately, the choice depends on the intended gameplay experience, and the selected approach should be evaluated based on how well it serves its intended purpose.
Non-Diegetic User Interface
A non-diegetic user interface consists of elements that appear to exist outside the game world. These components can still contribute to an immersive experience, provided they do not obstruct the player’s view excessively and remain discreet when possible. However, the use of non-diegetic elements may reduce the overall realism, as players are more likely to become consciously aware that they are interacting with a game.
Non-diegetic elements include, for example:
State of Characters and Objects
These elements may represent various statuses, such as:
Status bars.
In Evil Genius 2: World Domination, each minion has three distinct status bars representing vitality, smarts, and morale.
Credit: Rebellion Developments. Screenshot captured by the author.
Broken helmet visors in action games.
Icons.
In Evil Genius 2: World Domination, when minions become tired, a bed icon appears above their heads. Shortly thereafter, they proceed to a designated room to rest.
Credit: Rebellion Developments. Footage captured by the author.
In Tacoma, players attach a data transfer device to a clearly marked terminal to download important data. Once the transfer is complete, a large red non-diegetic arrow, accompanied by a short message, appears to direct players’ attention back to the terminal.
Credit: The Fullbright Company. Screenshot captured by the author.
Progress Indicators
These elements may reflect various forms of progress, such as:
Construction progress.
In Evil Genius 2: World Domination, players dispatch minions to initiate schemes at selected locations. Progress is then visually represented both on the world map and in the top-left corner of the screen. Upon completion, the scheme may yield a new scientist.
Credit: Rebellion Developments. Footage captured by the author.
Accumulated virtual experience.
Event activation progress.
In Evil Genius 2: World Domination, players activate the lair’s high alert mode by holding the left mouse button. A progress indicator, overlaid on the high alert button, displays how long the button must be held before activation is complete.
Credit: Rebellion Developments. Footage captured by the author.
Effects
These elements can include:
Weather effects.
In Frostpunk, snow overlays appear on the screen during gameplay, enhancing the atmosphere.
Credit: 11 bit studios S.A.. Screenshot captured by the author.
In Frostpunk, in the game’s photo mode, ice overlays can be applied to the screen, with adjustable intensity.
Credit: 11 bit studios S.A.. Footage captured by the author.
- Health-related visual effects.
Examples:
Tunnel vision when health is low.
A bright flash following an explosion.
Blood splatter upon taking damage.
Blurred vision resulting from an impact.
In Sniper Elite 4, a vignette effect resembling tunnel vision appears when the player character suffers serious injury.
Credit: Rebellion Developments. Footage captured by the author.
- Artifacts emulating real-world camera effects.
Menus with Options
These may represent:
Construction options.
In Stronghold Crusader 2, when no units or buildings are selected, a construction menu is displayed in the bottom-left corner of the screen.
Credit: Firefly Studios. Screenshot captured by the author.
- Action options for active selections.
In Stronghold Crusader 2, selecting one or more units displays a compact menu with six action options in the bottom-left corner.
Credit: Firefly Studios. Screenshot captured by the author.
Statistics
These elements may include:
Resource inventories.
In This War of Mine, players access a separate menu to view the complete list of in-game items they possess.
Credit: 11 bit studios S.A.. Screenshot captured by the author.
In Stronghold Crusader 2, statistics regarding available resources are displayed in the bottom-left corner.
Credit: Firefly Studios. Screenshot captured by the author.
- Selected options.
When combat units are selected in Stronghold Crusader 2, a menu in the bottom-left corner displays the chosen units and their count.
Credit: Firefly Studios. Screenshot captured by the author.
Active Selections
These may include:
Selected buildings or units in strategy games.
In Frostpunk, selected buildings are highlighted with a white outline to indicate active selection.
Credit: 11 bit studios S.A.. Screenshot captured by the author.
Navigation Aids
These can be represented by:
Mini-maps.
In Stronghold Crusader 2, a mini-map is continuously displayed in the bottom-left corner during gameplay.
Credit: Firefly Studios. Screenshot captured by the author.
- Global maps.
In Gone Home, players begin with a basic house plan showing only a few rooms. As players explore, they can gradually expand the plan by uncovering additional rooms.
Credit: The Fullbright Company. Screenshot captured by the author.
In Sniper Elite 4, the global map communicates critical information such as the player’s position, primary and optional objectives, and cartographic details like bodies of water, pathways, vegetation, and structures.
Credit: Rebellion Developments. Screenshot captured by the author.
Navigation routes.
Text projected over game-world objects.
In Tacoma, text blocks can be projected onto various objects. These appear only when the player character is nearby, improving readability and minimizing screen clutter.
Credit: The Fullbright Company. Screenshot captured by the author.
Diegetic User Interface
A diegetic user interface comprises elements that appear to exist naturally within the game world. Incorporating diegetic UI elements can enhance the realism of gameplay, making players feel more immersed and less aware that they are engaging with a game. Additionally, if such elements are positioned in areas where players typically focus their attention, they can significantly reduce unnecessary eye movement, allowing players to concentrate more effectively on the gameplay itself.
If you choose to implement diegetic elements, it is important to recognize that they may also introduce potential drawbacks that could negatively impact gameplay. These include:
Slowing down gameplay:
Consider a fast-paced first-person action game in which players must frequently and quickly access a diegetic map from their inventory. The process would typically involve an animation depicting the character pulling out the map, which may take one second or more. In a high-intensity game, repeatedly watching such animations would likely frustrate players. One possible solution is to shorten the animation, though it must still appear natural even when executed more quickly.Reduced legibility:
Imagine the instrument panel of a vehicle featuring numerous buttons, switches, and small displays. Players may struggle to interact with or read such a panel if it is presented as a single, complex visual element on the screen. Several solutions may help address this issue, including but not limited to:Providing a zoom functionality that allows players to temporarily enlarge specific parts of the panel.
Increasing the size of both interactive and non-interactive elements beyond their real-world proportions.
Dividing the panel into multiple segments and displaying only one section at a time.
Obstructed view of the game world:
If a diegetic element occupies a substantial portion of the screen, it can significantly obscure the player’s view of the game world. This becomes problematic when players need to simultaneously observe both the game environment and the diegetic interface. Several possible solutions may mitigate this issue, such as:Dividing the large element into several smaller components placed around the center of the screen.
Reducing the element’s size and level of detail while maintaining legibility.
Diegetic elements include, for example:
State of Characters and Objects
These may represent, for example:
The condition of the player character or vehicle.
In Jotun, the player character turns green when poisoned, providing a visual indicator of health status.
Credit: Thunder Lotus. Footage captured by the author.
The condition of weapons and tools currently held by the player character.
The state of interactive objects.
In Gone Home, players can intuitively determine whether a tape can be inserted into a tape recorder simply by observing the recorder.
Credit: The Fullbright Company. Screenshot captured by the author.
In Stronghold Crusader 2, it is visually evident what tasks non-playable characters are performing inside their buildings.
Credit: Firefly Studios. Screenshot captured by the author.
In Tacoma, a red-lit lock clearly indicates that it cannot be opened.
Credit: The Fullbright Company. Screenshot captured by the author.
- The condition of non-interactive objects.
In Tacoma, the quantity of available food supplies is displayed using a color-coded bar: red signifies low supply, yellow indicates a moderate amount, and green denotes an ample supply.
Credit: The Fullbright Company. Footage captured by the author.
Progress Indicators
These may represent, for example:
Construction progress.
In Frostpunk, players can discern whether a building is under construction or completed simply by observing its shape and structure.
Credit: 11 bit studios S.A.. Footage captured by the author.
Modes of Electronic and Mechanical Devices
In Tacoma, the player’s data transfer device visually indicates the amount of data that has been transferred. To assess progress, players must physically inspect the device at the docking station where it was inserted.
Credit: The Fullbright Company. Screenshot captured by the author.
Holographic Projections
In Tacoma, certain information, such as interactive keyboards and labels, appears to be integrated into the game world through the use of ARdware—an augmented reality module worn by the player character.
Credit: The Fullbright Company. Footage captured by the author.
Tacoma allows players to access personal details and other information that is projected directly in front of them.
Credit: The Fullbright Company. Footage captured by the author.
Navigation Aids
In Tacoma, players utilize an in-game augmented reality device—ARdware—to display a map of the space station.
Credit: The Fullbright Company. Screenshot captured by the author.
In Gone Home, players can discover a hand-drawn paper map of the house, which helps them navigate the environment as the story unfolds.
Credit: The Fullbright Company. Footage captured by the author.
Statistics
In Stronghold Crusader 2, players can identify the resources stored on the stockpile simply by observing it visually, without needing to access additional stockpile details.
Credit: Firefly Studios. Screenshot captured by the author.