Experience
& interface design
Designing for real players, and the screen that sits between them and the game
BSc (Hons) Game Design & Development
Name a game whose HUD you never noticed, and one whose HUD you hated.
What made the difference?
By the end of today you can…
Design for a player who isn't you
using a representative player, personas and their motivations.
Give players options
customisation, difficulty and accessibility settings that widen who can play.
Choose the right kind of UI
diegetic, non-diegetic, spatial or meta, and decide what shows when.
Make a HUD readable
with hierarchy, grouping, colour, contrast and type.
Six stops
Player-centric design
You are not your player
Options for every player
Customisation, difficulty, accessibility
Four kinds of UI
Diegetic, non-diegetic, spatial, meta
Information & states
Hierarchy, HUDs, menus, onboarding
Visual design
Gestalt, colour, contrast, type
HUD design task
One player type, one HUD
Who plays, what they feel… and what they see
Player types (Bartle, Hexad) describe different motivations. Most players are a mix.
Good feedback is immediate, clear and layered across at least two senses.
Norman: visibility, mapping, feedback. Affordances and signifiers show what's possible.
Turn those motivations into options, and turn feedback and signifiers into an interface players can read in two seconds.
Player-centric
design
Design with the player in mind, not for the system
“You are not your player”
Every feature is tested against one question: does it add to the player's enjoyment?
Imagine a representative player and judge every decision from their side of the screen.
“I am my own typical player.” Your tastes are a sample of one.
“The player is my opponent.” Hard isn't the same as fun; that's arcade coin-op thinking.
Ask three things: motivation (why play?), capability (what can they do?), feedback (how do they know?).
GDnD wiki · Player-Centric DesignDesign features for each motivation
| Player type | What they need | Features that serve them | UI that serves them |
|---|---|---|---|
| Achievers | Clear goals, progression, recognition | XP, levels, challenges, achievements | Progress bars, trackers, % complete |
| Explorers | Discovery, secrets, freedom to roam | Rich worlds, hidden content, lore | A map that fills in, a journal |
| Socialisers | Interaction, cooperation, community | Co-op, guilds, social hubs | Chat, team status, emotes |
| Killers | Competition, dominance, status | PvP, ranked modes, leaderboards | K/D, rank, kill feed |
Most players are a mix. Good design offers more than one route to engagement.
GDnD wiki · Bartle's TaxonomyGive your player a name
A persona turns a type into one believable person, with a context and a frustration. Design decisions get easier when you can ask “would Sam use this?”
- Who
- Sam, 34, nurse, plays on a phone and a Switch
- When
- 20 minutes on the train; often interrupted
- Motivation
- Explorer and completionist: loves filling a map
- Capability
- Plays one-handed; small screen; sound often off
- Frustration
- Losing progress; text too small to read
- So we…
- save anywhere, captions on by default, scalable text
Design for someone who isn't you.
One from the chips that neither of you is.
A feature or setting in a game you know.
And what you'd change for them.
Options for
every player
Let players tune the game to fit them
Four ways to fit the player
Who you are
Appearance, skills and skill trees, gear. A deeper connection to your persona.
How you play
Difficulty, controls and sensitivity, HUD and colour options.
What the game does
AI that adapts to skill; procedural content that keeps runs fresh.
What you tell us
Surveys, betas, community; analytics on what players actually do.
Each option says “your way of playing is welcome here”. Each also costs design, UI and testing time.
Visible choice, or hidden adjustment?
Easy, normal, hard. Simple and honest, but players must judge themselves before they've played.
Celeste's Assist Mode: game speed, infinite stamina, extra dashes, invincibility. You change exactly what blocks you.
The game reads your performance: Resident Evil 4's hidden difficulty scale, Left 4 Dead's AI Director.
The catch with hidden adjustment: if players notice, wins can feel unearned and losses rigged. Prefer legible adaptation: the player should feel the game understands them, not that it's cheating.
Four kinds of barrier
See it
Scalable text, high-contrast modes, colour-blind options, never colour alone.
Hear it
Subtitles with speaker names and a background; visual cues for sound.
Do it
Full remapping, hold-to-toggle, no rapid-press QTEs, adaptive controllers.
Follow it
Objective reminders, clear language, adjustable speed, no time pressure.
The Last of Us Part II (2020) shipped with more than 60 accessibility options, including a high-contrast display mode.
About 1 in 12 men and 1 in 200 women have a colour vision deficiency. That's likely someone in this room.
Red team, green team?
Switch filters, then add cues. Shape, icon, position and text carry the meaning when colour can't.
Simulations are rough approximations.
Four kinds
of UI
Is it in the story? Is it in the space?
Two questions, four kinds
1. Is it part of the game's fiction: could the character know about it?
2. Is it in the game's 3D space, or flat on the screen?
Most games mix all four. The question is which job each element does best.
Each kind, in a game you know
| Kind | Examples | Strength · weakness |
|---|---|---|
| Diegetic | Dead Space: health on Isaac's spine, holographic ammo. Far Cry 2: a paper map in his hands. BioShock: vending machines, audio diaries | Immersive · hard to fit dense information |
| Non-diegetic | Call of Duty's health, ammo and minimap. Tetris's score. Pause menus, inventories, skill trees | Clearest, fastest to read · can feel artificial |
| Spatial | Waypoint arrows, damage direction, “Press E” over a door, Splinter Cell: Conviction's objectives projected on walls | Information where you're looking · can clutter the world |
| Meta | Blood on the screen when hurt, a cracked visor, rain on the camera | Emotional, fast · imprecise |
Two meanings of “meta”. Therese and the wiki also use it for breaking the fourth wall: Undertale remembering your past save files, Metal Gear Solid's Psycho Mantis reading your memory card. Fagerholt & Lorentzon mean story-true but on the screen. Say which you mean.
Which kind of UI?
Information
& states
What the player sees first, and when
Readable in two seconds
No searching
Critical information is found in under two seconds.
Most important, most visible
Size, brightness, contrast and motion, in that order of priority.
Related things together
Health with shields; ammo with weapon; social with social.
Not everything, always
Show detail when it's needed, hide it when it isn't.
The anti-pattern: overlapping prompts, everything the same visual weight, scattered across the screen, all visible all the time. The result is cognitive overload: players miss what matters and break flow.
How much health do you have?
What was your health?
And what's your current objective?
Flash the cluttered HUD, ask the question, then flash the cleaned one.
Cleaned: one objective, a compass, health big and alone, ammo by the weapon hand. Chat, buffs, gold and the map wait until asked for.
Always, when it matters, or when asked
Only what every second depends on: health in a combat game, the timer in a race.
Appears when relevant: ammo when a weapon is out, stamina while climbing, a prompt near a door.
Behind a button: the full map, inventory, quest log, stats.
| Breath of the Wild | Minimal HUD; the stamina wheel only appears when you use stamina. A “Pro” mode removes almost everything. |
| Destiny 2 · The Witcher 3 | Contextual HUDs that change between combat and exploration. |
| Celeste · Hades | Almost no HUD; state is shown on the character (Madeline's hair colour shows her dash). |
Moving between states
A clear trigger, a short visual and audio cue, and no longer than needed. Hades fades menus into play.
Two or three presses to anything common. Back always works. Stardew Valley's menus are a model.
Teach in play, one idea at a time, before the text box. The first minute is a UI too.
Wireframe first, paint last
UX decides how it works: flow, logic, clarity. UI decides how it looks and feels. Both are iterative.
Grey boxes are cheap to change. A finished, animated menu isn't. Studios prototype wireframes before final art.
Visual
design
Shape, colour and type do the talking
The UI belongs to the game
Loud, angular, red and black. Every menu is a ransom note, and it still reads fast.
Soft, glowing, sparse. The UI is painted in the world's own light.
Thin type, soft gradients, responsive motion: high-tech tribal, like Aloy's Focus.
Same shapes, icons, spacing and button styles everywhere: once learned, always known.
Only what's needed, and every press answers: a highlight, a sound, a small motion.
The eye groups before it reads
Proximity
Close together reads as one group. Keep health beside shields, not across the screen.
Similarity
Same colour or shape reads as the same kind. All interactables share one look.
Enclosure
A panel or border makes a group, even across a gap. Inventory slots, party frames.
Figure & ground
Important things must stand off the background: contrast, outline, a backing plate.
Grouping is free information: players learn what belongs together before reading a word.
GDnD wiki · Gestalt Principles for Game UIColour codes, and contrast you can measure
Complementary for contrast, analogous for mood, a split-complementary accent for UI highlights.
Red: danger, health. Green: safe, success. Blue: calm, information, mana. Keep codes consistent.
Text at least 4.5 : 1 (large text 3 : 1); icons and UI parts 3 : 1.
Health 46
Press E to open the gate
Type that fits, and type you can read
Decorative serifs can suit fantasy titles; clean sans-serifs suit sci-fi. Use the character font for headings, a plain one for body.
Size, weight and colour separate titles, body and labels. Two typefaces at most.
Big enough from the sofa, on a phone and on a stream. Spacing between lines and letters. Let players scale it.
Buttons must look pressable: a plate, a highlight, a change on hover or focus.
Test text on the smallest real screen you'll ship on, not in the editor.
Five things to remember
You are not your player. Design for a representative player, and give them a name.
Options widen who can play: customisation, legible difficulty, accessibility planned in.
Two questions sort any UI: in the fiction? in the space? Diegetic, non-diegetic, spatial, meta.
Two seconds: hierarchy, grouping and progressive disclosure; always, contextual or on demand.
Never colour alone, and check contrast: 4.5 : 1 for text.
HUD design
task
One player type, one game, one HUD that serves them
Your game
Quest of Champions
Tasks, goals, rewards. Leaderboards, badges, milestones.
Mysteries of the Forgotten Lands
Open world, hidden secrets, puzzles, lore.
Gathering Realms
Co-op, communities, social hubs, group quests.
Arena of Conquest
PvP combat, tournaments, ranked matchmaking.
Click Deal: every game is used once before any repeats.
Five steps to a HUD
| Step | Time | Do | Make |
|---|---|---|---|
| 1 · Analyse | 10 min | Pick a game known for good UI (Celeste, Stardew Valley, Hades…). Usability, accessibility, visual design, which kinds of UI? | 3 things to steal, 1 to avoid |
| 2 · Motivations | 5 min | What does your player type need to see at all times? How should goals and feedback show? | A one-line persona |
| 3 · Wireframe | 20 min | Grey boxes first. Sort every element: always, contextual, on demand. Choose its kind of UI. | Wireframe + element list |
| 4 · Make it readable | 10 min | Hierarchy, grouping, colour codes with a second cue, type sizes. One accessibility option. | Annotated HUD |
| 5 · Swap & iterate | 10 min | Another group does the two-second test and the checklist. Change one thing. | Before → after note |
Mysteries of the Forgotten Lands
| Persona | Ana, plays long weekend sessions, hates map icon clutter, wants to find things herself |
| Always | A compass strip: ? marks unexplored places, nothing more |
| Contextual | Discovery stamp; health when hurt; scanner ring when used |
| On demand | Journal (lore found) and a map that fills in as you walk |
Making it readable, then testing it
- Hierarchy: the compass is the only always-on element, top centre where the eye rests
- Grouping: everything about finding lives top right; everything about surviving bottom left
- Colour + cue: gold = discovery, always with ✦; red health also shows a number
- Type: one display face for place names, one plain face for everything else
- Accessibility: scanner pulse also plays a rising tone and a controller rumble
- Two-second test: testers found health and the compass; missed the scanner ring on a bright beach
- Contrast: the gold ring on pale sand failed the 3 : 1 check for UI parts
- Change: the ring gets a dark outline (figure and ground), so it passes on any background
Kinds of UI used: non-diegetic compass and journal · spatial scanner ring · meta screen-edge frost when cold.
Two minutes each, then one question
- Your player type and persona line
- The HUD: always, contextual, on demand
- Which kinds of UI, and why
- The change you made after the swap
- Two-second test: what's my health, my goal?
- Is anything shown by colour alone?
- Does it serve this player type?
- Does it look like it belongs to the game?
“One thing on my HUD should be … instead of always on, because ….”
One sentence each, before you leave.
Adams, E. (2014) Fundamentals of Game Design. 3rd edn. Berkeley, CA: New Riders.
Bartle, R. (1996) 'Hearts, clubs, diamonds, spades: players who suit MUDs', Journal of MUD Research, 1(1).
Cooper, A. (1999) The Inmates Are Running the Asylum. Indianapolis: Sams.
Fagerholt, E. and Lorentzon, M. (2009) Beyond the HUD: User Interfaces for Increased Player Immersion in FPS Games. MSc thesis. Chalmers University of Technology.
Game Accessibility Guidelines. Available at: https://gameaccessibilityguidelines.com
Hunicke, R. (2005) 'The case for dynamic difficulty adjustment in games', Proceedings of ACE 2005, pp. 429–433.
Lidwell, W., Holden, K. and Butler, J. (2010) Universal Principles of Design. 2nd edn. Beverly, MA: Rockport.
Microsoft. Xbox Accessibility Guidelines. Available at: https://learn.microsoft.com/gaming/accessibility/guidelines
W3C (2018) Web Content Accessibility Guidelines (WCAG) 2.1. Available at: https://www.w3.org/TR/WCAG21/