I
N
I
T
I
A
L
I
Z
I
N
G
.
.
.
Scroll
Down
Start
Over

DIeGeTIC
GAMe UI

An exploration of UI techniques in video games

Discover
what is
meant by
DIEGETIC UI?
Diegetic UI is the User Interface

Diegetic UI breaks the boundary by embedding information into the environment.

How DO User Interfaces Shape Our Experience in Digital Worlds?

Think about User interfaces as the silent narrators of your digital experiences. guiding, informing, and immersing the player without ever stealing the spotlight. While traditional UI elements often sit on top of the game world, diegetic UI breaks that boundary by embedding information directly into the environment itself. This approach doesn’t just enhance immersion, it allows itself to becomes part of the story.

Explore the four types of diegetic UI

How do they blur the line between player and world?
DIEGETIC
NON DIEGETIC
META
SPATIAL

Non-Diegetic UI

Non-diegetic UI is probably the most common, it refers to user interface elements in a game or experience that exist outside the story world. meaning the characters can’t see or interact with them, but the player can. Think of it as UI for players, not the character.

Non-diegetics are everywhere. think: Health bars, Ammo counters, mini maps, score displays and objective markers.

Why we use it?

We use Non-diegetic UI as It's an efficient way to quickly convey key inforomation to the player. It provides familiarity, Players are used to reading these cues, Making them great for complex systems such as RPGs, shooters, and strategy games.

Non-diegetic UI is the most traditional, functional style. perfect for delivering data clearly but less immersive than diegetic or spatial UI.

Dead Space:

A great example of this would be Dead Space, where you play as the main protagonist Isaac Clarke,
A ship engineer struggle to survive the Necromorph scourge. Throughout the game you get a
3rd person view of Isaacs suit.

The diegetics comes into play when you learn that your characters health bar,
is that glowing blue level on the back of his suit. And the amount of ammo he has left,
Is displayed on a screen ontop of his weapon.

These are both great examples of Diegetic UI, meaning both the player and the character
experience the UI at the same time.

THE HISTORY OF
DIEGETIC UI

The history of How diegetic & related UI types we know today, set their foundations
with a Non-Diegetic video game from the 1970's

Pre-1980's
Early games primarily used non-diegetic UI. Overlays showing score, lives, or time that exists outside the game world. At this stage, UI was completely separate from the game world, purely functional, with no narrative integration.
Space Invaders, 1978. Players lives, score, and level are overlaid on the screen
1980's
Games of the 1980's continued to dominate with the use of non-diegetic UI, but developers began experimenting with spatial and meta elements due to limited graphics.
Space Invaders, 1978. Players lives, score, and level are overlaid on the screen
Metal Gear
In 1987 Metal Gear introduced a Codec radio, used for communication between the player character and other characters in the game. Specific frequencies were used for different contacts. Giving narrative information, not physically present in the game world.
1990's
The mid 1990s saw the rise of Immersion and Early Diegetic Concepts. games were on the rise with Increased graphical capabilities. allowing for more immersive UI integration.
System Shock, 1994. An early attempt at immersive UI, integrating elements into in-game terminals and the player's helmet display.
Star Fox 64
In 1997 Spatial UI Started to Appear with the release of Star Fox 64. characters’ faces would pop up in the game space, floating next to ships, providing a deeper player perspective
The 2000's
Like everything else, the 2000's was a big time for video games. Diegetic UI was defined by Steve Benner, introduced the terminology Diegetic, Non-Diegetic, Spatial & Meta. while working at Sony, and developers begin explicitly designing diegetic UI to enhance immersion.

Dead Space (2008), Iconic use of Diegetic UI: Health bar on the character’s spine, Ammo count shown via holographic projection on the weapon. Inventory and menus are holograms that appear in- game space.

Halo: Combat Evolved (2001), took advantage of Non-Diegetic UI: minimaps, health bar, and weapon info in overlay HUD.

Meta UI became more prominent in Metal Gear Solids 2nd rendition in 2001, breaking the fourth wall with Codec and postmodern narratives.

Also in 2001 was Pikmin which took advantage of Spatial UI: numbers and icons would hover near characters but were not part of the physical game world.

2010's
The next 10 years saw a lot of refinement and Integration, Starting a trend of blending different UI types to support immersion, especially in VR, narrative, and cinematic games.

This created a shift where players now expected minimal UI clutter. Developers leaned on diegetic and spatial UI to achieve a more cinematic experience.

Far Cry 3, 2012 achieved this with maps and healing animations shown in-world.

Alien: Isolation, 2014 had terminals, motion trackers, and screens all in-world.

Battlefield 1, 2016 kept weapon UI and squad info integrated naturally.
Further Meta UI growth with Undertale, 2015. the game reacts to player’s actions outside the narrative, using game saves as story mechanics.

VR games such as Lone Echo, 2017 and Half-Life: Alyx, 2020 took their UI to be shown through wrist displays, holograms, and natural interactions.
2020-Present
Current diegetic UI and UX Innovation have taken a huge step forward. Some current trends include:

Hybridization of UI types for player immersion, use of narrative interfaces - UI that tells a story.

Games using UI for accessibility and narrative personalization.

With a new focus on UI as a storytelling device, not just information. UX researchers and narrative designers now collaborate with UI designers more than ever.

Some notable games would be:
Cyberpunk 2077, Having character enhancements and map interfaces embedded into the character’s cyberware.

Control, showcasing a seamless transitions between UI and the environment.

As well as Death Stranding, where world-building relies heavily on UI being part of the gear and surroundings.

Case Studies

Examining the UI, what it is, why it worked and why it didn't

Dead Space

Dead Space

Far cry 2

Far cry 2

CyberPunk 2077

CyberPunk 2077

Papers, Please

Papers, Please

DOOM

DOOM

Type
Description
Example games
Year
Diegetic
Exists in the game world and is visible to the player and the character.
Dead Space, Metroid Prime, Alien: Isolation
2002–2014
Non-Diegetic
Visible only to the player, not the character
Halo, Zelda, Pong
1972–Present
Meta
UI that references or interacts with game concepts/story outside the game world
Metal Gear Solid, Undertale
1987–2015
Spatial
UI elements placed within the game space but not acknowledged by the character
Star Fox 64, Pikmin
1997–2001

Diegetic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Non-Diegetic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Spatial

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Meta

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.