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.
(CRE342 Lectures, see source-cre342-lectures)
Interface taxonomy
Game interfaces exist on a spectrum based on their relationship to the fiction of the game world.
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.
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
Meta
Meta interfaces blend the game world and the player’s world — they acknowledge the player directly or break the fourth wall.
Examples:
- Tutorial overlays clearly addressing the player, not the character
- Characters speaking directly to the player (“You should try pressing X”)
- The player in Undertale being acknowledged as having a name beyond the protagonist’s name
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)
Related
-
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