UI Design
Types of Game UIs: Diegetic, Non-Diegetic, Spatial, and Meta
Jan 7, 2026
Ever sat in a meeting where someone throws around the word "Diegetic" and everyone just nods while frantically Googling it under the table? We’re going to break down the four main ways to show information to players without making them feel like they’re reading a spreadsheet, and we’ll look at why mixing them up can result in a confusing mess.
Designers love fancy words for simple things. When you move from web design to game dev, terms like "Spatial UI" sound like they require a degree in astrophysics. They don't. It’s just jargon for "where do we stick the ammo counter?"
Let's keep it simple. You have four main ways to show a player what is going on.
First, Non-Diegetic. This is the classic "video game" stuff. Health bars, ammo counters, and mini-maps glued to the corners of the screen. It’s safe, it works, but it breaks the immersion. Imagine redesigning a HUD for a racing game to be "revolutionary" by removing the speedometer to make it look cinematic. It sounds cool in a pitch deck, but in reality, players just end up hating that they have to guess how fast they are going. Usually, the floating numbers come back within a week.
Second is Diegetic. This is the cool stuff that actually exists inside the game world. Think of a holographic display on a sci-fi suit. The character sees it, and the player sees it. It’s incredibly immersive but dangerous. Imagine working on a VR project where you put the quest log on a literal wristwatch the character wears. It looks amazing until players get tired of holding their real-world arm up for five minutes just to read the mission briefing. Their arms get tired, they get grumpy, and they quit.
Third is Spatial. This is UI that sits in the 3D world but isn't "real" to the character. Like a floating nameplate above an enemy’s head or a glowing line on the road showing you where to drive. The character doesn't see a giant floating name, but the player does.
Finally, Meta. This is the weird stuff. It’s like blood splatter on the screen when you get hit. The character isn't wearing a glass helmet, but the "camera" gets dirty. It’s a feeling, not a readout.
Non-Diegetic: 2D overlays. Practical, readable, but breaks the fourth wall.
Diegetic: Part of the world (clocks on walls, ammo on guns). Immersive but can be hard to read.
Spatial: 3D elements in the world (quest markers). Great for guiding the eye.
Meta: Screen effects (blood, mud). Good for feedback, bad for exact data.
Don't mix these randomly. If you go Diegetic, commit to it, but always have a "backup" option in the settings. If a player can't read the ammo counter on the gun because of the dark lighting, let them turn on a boring 2D HUD. Function beats cool every time.