UI Design in Games

Summary

UI design in games is the practice of presenting controls, feedback, and information so the player can understand the game quickly and act with confidence. Students often arrive here asking “what is a HUD?”, “what makes a UI readable?”, or “what is the difference between diegetic and non-diegetic UI?” The answer is that UI includes far more than menus: it includes HUD elements, prompts, objective markers, inventories, and the wider visual language through which the game communicates state and possibility.

Good UI design is the bridge between the player and the game world: when it works, players forget it is there. When it fails, it becomes the game’s most visible problem.

(course lecture series, see source-player-psychology-lectures)

Interface taxonomy

Game interfaces exist on a spectrum based on their relationship to the fiction of the game world.

A more precise way to sort them is to ask two questions of each element: is it part of the game’s fiction, and is it located in the game’s 3D world? The four combinations give the four types below: diegetic (both), meta (fiction only), spatial (world only) and non-diegetic (neither). These categories describe how information is presented, not what is presented, so the same objective can be shown in any of the four ways (course diagram on interface types, see source-four-types-of-game-interface). The full model, a worked example and Unity implementation notes are on game-interface-types.

The two questions come from Fagerholt and Lorentzon’s 2009 thesis on first-person shooter interfaces. The thesis uses its own names: geometric elements for what is now called spatial UI, and two kinds of “meta”, meta-representations and meta-perception. It also treats signifiers as a sub-group of diegetic elements (Fagerholt and Lorentzon, Beyond the HUD, pp. 51–52, see source-beyond-the-hud). The subsections below use the familiar four labels and note where the thesis differs.

Non-diegetic

Non-diegetic interfaces exist only for the player; they are not visible to or acknowledged by the player’s in-game character. They are the traditional “HUD layer” overlaid on the game world.

Examples:

• Health bars and ammunition counts (Call of Duty health bar, ammo indicator)
• Scoreboards and point counters (Tetris score display)
• Objective markers — glowing arrows pointing toward mission goals
• Pause menus and inventory screens
• Skill trees and upgrade systems
• Narrator voices

Strength: Maximum information density; easy to read; no design constraint on placement. Weakness: Can break immersion; clearly artificial; players may ignore over time.

Diegetic

Diegetic interfaces exist inside the game world and are visible to both the player and the game’s characters. The interface is part of the fiction.

Examples:

• Dead Space — health bar represented as a glowing tube on Isaac’s spine; ammo count displayed as a hologram projected from the weapon. Both are visible to the character.
• Far Cry 2 — the player physically pulls out and holds a paper map and compass in-game
• Bioshock — vending machines, audio diaries, and in-world screens are all diegetic information sources

Strength: High immersion; integrates UI into the world’s fiction; can be aesthetically distinctive. Weakness: Readability can be sacrificed for aesthetics; difficult to communicate dense information.

Fagerholt and Lorentzon describe the Dead Space spine tube as a “fully diegetic” health bar. They describe Far Cry 2’s navigation as a map, and a GPS device, that the character holds in real time without pausing the game. They caution that “a fully diegetic user interface is not automatically more immersive”, and that what can be made diegetic depends on the setting: Dead Space-style holograms “would feel awkward in a medieval fantasy-themed game” (Beyond the HUD, pp. 36–38, 75, see source-beyond-the-hud).

Spatial

Spatial interfaces exist in the game world but are only visible to the player — they are in-world in position but are not acknowledged by characters as real objects.

Examples:

• Damage indicators showing the direction of incoming fire
• Interaction prompts appearing over interactive objects (“Press E to open”)
• Target indicators and waypoint arrows placed in 3D space
• Tutorial overlays attached to world objects

Fagerholt and Lorentzon call this quadrant geometric elements. Their examples are Left 4 Dead’s teammate outlines, Mirror’s Edge’s Runner Vision and checkpoint beacons, and objectives projected onto walls in Splinter Cell: Conviction. Because these elements are free of the fiction, they suit navigational and environmental information (Beyond the HUD, pp. 52, 74, see source-beyond-the-hud). Not every example above sits neatly here: a damage-direction indicator drawn at the screen edge is arguably non-diegetic, or meta-perception, rather than placed in the 3D world.

Meta

In the four-label version of Fagerholt and Lorentzon’s (2009) model, meta interfaces are part of the game’s fiction but are not placed in the game’s 3D space: they sit on the screen, yet they represent something the character experiences.

The thesis itself splits this into two categories. Meta-representations are fictional objects shown off-world, such as the Grand Theft Auto IV phone drawn as an overlay. Meta-perception covers full-screen effects that stand in for the avatar’s internal senses: red tint, tunnel vision, heartbeat audio, pulsing vibration. The authors say meta-perception is “conventionally” not connected to the fiction; Killzone 2’s blood on the “lens” is their example of tying it to the fiction (Fagerholt and Lorentzon, Beyond the HUD, pp. 52, 73–74, see source-beyond-the-hud). So, strictly, a red damage vignette is meta-perception rather than a fictional meta element.

Examples:

• Blood spatter or a red vignette at the screen edges when the character is hurt (Call of Duty)
• A cracked visor or rain on the “lens” of a first-person view
• A phone screen overlaid on the view when the character takes a call (GTA IV)

Note on usage: “meta” is also used informally for interfaces that acknowledge the player directly or break the fourth wall (a character telling you to “press X”, Undertale addressing the player by name). That is a different idea from Fagerholt and Lorentzon’s category. A tutorial overlay that speaks to the player is outside the fiction, so in their model it is non-diegetic (or spatial, if attached to a world object), not meta.

Norman’s principles of interaction design

Don Norman’s three core principles (from The Design of Everyday Things, 2013) apply directly to game UI:

Principle	Definition	Application	Example
Visibility	Make possible actions and system states clear to the player	Show interactable objects with visual or audio cues; provide immediate feedback when actions are taken	The Last of Us: environmental cues highlight pathfinding options
Mapping	Ensure intuitive relationships between controls and outcomes	Player input should align with expected, natural responses	Portal 2: logical cause-and-effect puzzle mapping
Feedback	Provide immediate and perceivable responses to player actions	Use sound, animation, or visual changes to confirm success or failure	Hades: responsive combat feedback through sound and animation

How these support flow:

When Visibility is clear, players know what they can do. When Mapping is intuitive, controls feel natural. When Feedback is immediate, players trust the system. Together, these reduce cognitive load — less mental energy on “how to play” means more on “playing.” That cognitive ease is a prerequisite for the flow state. (see flow)

Information hierarchy

Information hierarchy determines what the player sees first, second, and last. A well-hierarchied UI allows players to identify critical information at a glance — within two seconds.

Principles:

• Scannable — players should not need to search; priority information is immediately visible
• Progressive disclosure — secondary information is hidden until needed; not everything visible all the time
• Grouping — related information is visually clustered; spatial organisation communicates relationship
• Visual weight — critical information has the highest visual weight (size, brightness, contrast, animation)

Anti-pattern (from lectures): A UI with many overlapping elements competing for attention, poor visual hierarchy, and insufficient use of progressive disclosure causes cognitive overload. Players miss important information and make worse decisions.

State transition design

State transition design concerns how the game moves between states — menu → gameplay → pause → cutscene → game over. Poor transitions break immersion and player trust.

Principles:

• Logical and fluid — transitions should make sense in context; sudden jumps are disorienting
• Clear trigger — players should understand what caused the transition
• Feedback cues — visual and audio signals accompany transitions
• Responsive — transitions should not delay player action more than necessary

Examples: Hades and Zelda — menus fade naturally into gameplay. Unity manages transitions through Animator Controllers or Game State Managers.

Visual design principles

Colour

• Colour theory: hue, saturation, and value communicate mood and urgency
• Colour coding: consistent assignment (red = danger/health; green = safe/resource) reduces learning time
• Contrast and accessibility: sufficient contrast ratios; colour-blind modes for accessibility
• Emotional impact: warm colours (orange, red) signal urgency; cool colours (blue) signal calm or information

Typography

• Readability — UI text must be legible at typical viewing distance; minimum size guidelines apply
• Hierarchy and emphasis — font size, weight, and colour distinguish headings from body from labels
• Consistency — the same font family and sizing rules throughout; avoid mixing more than two typefaces
• Interactive text — button labels and prompts must be distinguishable from environmental text

Visual feedback loops

Subtle animation reinforces cause-and-effect: health bar animate on damage rather than snap; item pickups fly to the inventory. These feedback animations confirm the player’s action registered and communicate the consequence.

Affordance in UI

An affordance is a property of an object — visual, auditory, or spatial — that suggests how it can be used. Good UI design uses affordances to communicate interaction possibilities without explicit instruction.

Type	Example
Visual affordance	A glowing handle implies it can be pulled; a cracked wall suggests it can be broken
Auditory affordance	A soft chime when approaching a collectible signals it can be picked up
Spatial affordance	Low walls or ledges imply they can be climbed or vaulted
Cultural/learned affordance	Red barrels explode; health pickups glow

Schema alignment: The most effective affordances align with player schemas — expectations built from prior games and real-world experience. (see game-atoms — Schema theory section)

Accessibility considerations

UI design must consider the full range of players:

• Colour-blind modes: do not rely solely on hue to convey meaning; use shape and pattern redundancy
• Haptic feedback: provides tactile channel for players with hearing impairments
• Captions and subtitles: audio-to-text for hearing-impaired players; should include speaker identification
• Adjustable text size: particularly relevant for mobile games
• Motor accessibility: consider control remapping, adjustable input timing, and reduced-precision interaction options

Unity implementation routes

In Unity, there are currently two main implementation routes for runtime UI:

• UGUI / Unity UI for the older Canvas-based workflow still seen in many tutorials and existing projects
• unity-ui-toolkit for the newer retained-mode workflow using UXML, USS, and UI Builder

Unity’s newer UI guidance frames this less as a strict replacement story and more as a question of project context: existing Canvas-heavy games may stay with UGUI, while newer tool-rich or interface-heavy projects can benefit from UI Toolkit’s clearer structure and stylesheet-based approach. The important design point is that implementation choice affects iteration speed, layout discipline, and maintainability, not just visual style. (Unity, User interface design and implementation in Unity, see source-unity-ui-design-and-implementation)

Practice

Audit the HUD of a game you know well. Take three screenshots at different moments: calm exploration, a tense or busy moment such as combat, and a menu or inventory screen. For each screenshot:

• list every UI element and rank them by visual weight: what you notice first, second and third
• show the screenshot to a peer who has not played the game for two seconds, then ask what the most important information was
• note any information that is grouped, and any that appears only when needed (progressive disclosure)
• check whether any meaning is carried by colour alone

Then, from playing or watching the game, find one example each of Visibility, Mapping and Feedback working well, and one place where one of them fails.

Success test:

• each screenshot has a ranked list of elements
• the peer’s two-second answer is recorded and compared with your ranking
• Visibility, Mapping and Feedback each have one clear example, and at least one failure is identified
• you propose one concrete change (resize, regroup, hide until needed, add a shape or pattern cue alongside colour) and name the principle it serves

Extension:

• mock up your change, either by painting over the screenshot or by rebuilding the HUD in Unity, and repeat the two-second test with a different peer

Self-test

1. What are Norman’s three principles as this page applies them to game UI?
2. How do those three principles support the flow state?
3. What is progressive disclosure?
4. What target does the page set for a well-designed information hierarchy?
5. Why should a game not rely on colour alone to convey meaning?
6. What is the difference between a diegetic and a non-diegetic interface? Give one example of each from the page.

Answers

1. Visibility (make possible actions and system states clear), Mapping (intuitive relationships between controls and outcomes) and Feedback (immediate, perceivable responses to actions).
2. Together they reduce cognitive load, so the player spends less mental energy on how to play and more on playing. That cognitive ease is a prerequisite for flow.
3. Secondary information stays hidden until the player needs it, so not everything is visible all the time.
4. Players should be able to identify critical information at a glance, within two seconds.
5. Colour-blind players may not distinguish the hues, so meaning should also be carried by shape or pattern.
6. A non-diegetic interface exists only for the player, such as a health bar or ammunition count in Call of Duty. A diegetic interface exists in the game world and is visible to the characters, such as the health tube on Isaac’s spine in Dead Space.

Related

• source-player-psychology-lectures

• game-atoms — Affordance and feedback as atomic components of interaction

• interaction-loops — UI mediates the feedback loop between player action and game state

• flow — Clarity in UI reduces cognitive load and enables the flow state

• presence-and-immersion — Diegetic UI supports spatial presence; non-diegetic UI can break it

• affordance — Glossary definition of Norman’s affordance concept

• diegetic — Glossary definition of diegetic vs non-diegetic UI

• narrative-design — Thematic coherence requires UI style to match game tone

• game-feel — Micro-feedback in UI (animations, sounds) contributes directly to game feel

• playtesting — UI problems are best discovered through observation of real players

• unity-ui-toolkit — Unity’s newer retained-mode UI workflow

• source-player-psychology-lectures

• gestalt-principles-ui

• game-interface-types — The two-question model (fiction × 3D world) behind the four interface types, with Unity examples

• source-four-types-of-game-interface

• source-beyond-the-hud — Fagerholt and Lorentzon’s 2009 thesis behind the interface taxonomy