Diegetic UI Design Checklist for Roguelikes: When HUD Elements Should Live Inside the Game World

Diegetic UI can make a roguelike feel more coherent, but it can also make the game harder to read. The useful question is not "Should the UI be immersive?" The useful question is: which pieces of information should live inside the game world, and which pieces should stay in a clear HUD?

This guide is for developers designing health, status effects, inventory, shops, meta-progression, death screens, and run-summary interfaces for roguelikes.

The Four UI Layers

Most game UI decisions become easier when you separate the interface into four layers.

Layer	What it means	Roguelike examples
Non-diegetic UI	The player sees it, but the character does not	HUD, minimap, cooldown icons, inventory panels
Diegetic UI	The UI exists inside the game world	wounds on the character, a wrist device, a magical mirror
Spatial UI	The UI sits in world space but is not owned by the character	floating labels, shop signs, damage numbers, item prompts
Meta UI	The UI is explained by the fiction or structure of the game	death as a return ritual, save/load as memory, upgrades as a pact

Roguelikes usually work best as hybrids. A fully diegetic interface sounds elegant, but fast decisions often need stable, readable, non-diegetic information.

The Core Rule

Use diegetic UI when it strengthens meaning without hiding critical information.

Use a conventional HUD when the player needs speed, precision, or accessibility.

For example:

A poison state can appear as a green distortion on the character.
Exact remaining poison stacks may still belong in a tooltip or HUD panel.
A shop can be represented as a character or altar in the world.
The price list still needs to be clear, sortable, and readable.

The fantasy can carry the mood. The interface still has to carry the work.

Where Diegetic UI Helps Most

1. Health and danger states

Health is a strong candidate for partial diegetic treatment because it maps naturally to character condition.

Useful patterns:

armor damage as visual wear
low health as posture, breathing, or animation change
status effects as body, aura, or silhouette changes
danger states as screen-edge effects plus explicit fallback icons

Avoid relying on color alone. A poisoned character should not only become green; the state should also have shape, motion, icon, or text support.

2. Meta-progression

Roguelikes repeat death, return, unlocks, and upgrades. That loop is perfect for meta UI.

Instead of treating progression as an external menu, connect it to the world:

upgrades as rituals, contracts, training, or memories
run history as a journal, grave marker, archive, or prophecy
unlocks as recovered knowledge
death as return, reincarnation, debt, curse, or reset

This is one reason games like Hades feel unusually coherent: the menu flow is not just a menu flow. It is part of the fiction.

3. Shops and upgrade stations

Shops, fountains, altars, mirrors, benches, and terminals are good spatial UI anchors. They give menus a physical home.

The key is to make the interaction clear:

the object should visually signal its purpose
the interaction prompt should be readable
the menu should still preserve fast comparison
leaving the station should not cost unnecessary attention

Diegetic framing should reduce friction, not create a puzzle around basic navigation.

4. Status effects and build identity

Roguelikes often have many overlapping effects. Diegetic and spatial UI can help players feel a build instead of only reading it.

Examples:

fire builds leave ember trails
poison builds tint enemies and projectiles with a distinct pattern
shield builds add visible defensive geometry
curse builds distort UI, audio, or enemy labels

Use this for identity and quick recognition. Keep exact numbers available elsewhere.

Where Diegetic UI Usually Hurts

1. High-frequency combat decisions

If the player must make a decision in under a second, do not bury the answer in a beautiful metaphor.

Keep these readable:

remaining health
active cooldowns
lethal incoming damage
status cleanse availability
current target state

Diegetic treatment can support these signals, but it should not be the only way to read them.

2. Accessibility-critical information

Do not make accessibility depend on visual interpretation of the world.

Every critical state should have at least two readable channels:

color plus icon
animation plus label
sound plus text
spatial cue plus HUD fallback

For public-facing games, this is not polish. It is part of the interface contract.

3. Complex inventory comparison

Inventory and build screens often need numbers, sorting, filters, and comparison. These are usually better as clean interface surfaces with world-flavored framing.

Good compromise:

diegetic container: "Satchel", "Archive", "Contract", "Codex"
clear UI behavior: readable stats, sort order, comparison, tooltips

The label can belong to the world. The usability should belong to the player.

A Practical Decision Checklist

Use this before redesigning any HUD element.

[ ] Does the character have a believable way to perceive this information?
[ ] Does the player need an exact number or only a state?
[ ] Will the information be needed during fast combat?
[ ] Can the state be read without relying on color alone?
[ ] Is there a non-diegetic fallback for accessibility?
[ ] Does the diegetic version reduce UI clutter, or only move clutter into the world?
[ ] Does the metaphor stay understandable after 20 runs?
[ ] Can the team afford the art, animation, localization, and testing cost?

If more than three answers are uncertain, start with a hybrid UI instead of a fully diegetic one.

Hybrid Patterns That Work Well

Contextual anchoring

Place a small amount of status UI near the character while keeping it visually clean.

Use this for:

health warnings
current weapon state
short-lived buffs
nearby interaction prompts

Partial diegetism

Put the emotional signal in the world and the exact data in the HUD.

Example:

the character visibly limps at low health
the HUD still shows exact HP

Toggleable immersion

Let players choose between a clean HUD, a hybrid HUD, and a more immersive presentation.

This is especially useful for games that want both atmospheric play and serious build optimization.

Diegetic breaks

Use rare moments where the UI itself changes because of the fiction.

Examples:

a curse corrupts item labels
a memory-loss effect hides map certainty
a reality-break event glitches the cooldown layer

Use this carefully. If every system breaks the UI, the player stops trusting the interface.

Common Mistakes

Mistake	Why it fails	Better approach
Making everything diegetic	Critical information becomes harder to read	Keep precision in the HUD and meaning in the world
Overwriting clear terms with lore	Players waste time decoding basic actions	Use world language only where it remains obvious
Hiding state in color	Some players cannot read the state reliably	Add icon, shape, motion, text, or audio backup
Treating menus as pure fiction	Sorting, comparison, and scanning become slow	Use diegetic framing around a usable interface
Mixing styles randomly	The world feels inconsistent	Define the four UI layers before production

Engine-Agnostic Implementation Notes

For a small team, start with a UI classification pass before implementation.

List every UI element.
Assign each one to non-diegetic, diegetic, spatial, or meta.
Mark every critical element that needs a HUD fallback.
Build shared style rules for color, motion, icon shape, and typography.
Test the interface with new players before committing to more art-heavy treatment.

In Phaser, Unity, Godot, or Unreal, the exact UI framework will differ. The architecture decision is the same: separate the gameplay state from the presentation layer, so a status effect can drive both a world-space signal and a HUD fallback.

References

GDC Vault talks and material on diegetic and narrative interface design.
Game UI Database reference captures for Dead Space, Hades, Metro, and other interface-heavy games.
Nielsen Norman Group usability guidance for interface clarity and accessibility.
General diegesis theory as applied to games and media interfaces.