Game user interface (UI) design is the planning and creation of everything players use to understand and control a game: menus, buttons, the heads-up display (HUD), icons, prompts, maps and feedback effects. The UI design process is the sequence of steps designers follow to create it. Good UI lets players focus on playing; bad UI gets in the way, confuses or frustrates.

This lesson builds on Module 1’s User Experience (UX) Factors and the Five Key Principles of Interaction Design and How to Wireframe a Game User Interface. Now we look at the process specific to games and at how to judge a UI.

The process of UI design for games

1. What are the inputs and outputs? List everything the player must do (inputs: move, jump, pause, choose items) and everything the game must tell them (outputs: health, score, objective, danger). Also decide which devices you support – touch, controller, keyboard.
2. Prioritise. Rank the outputs by importance and frequency. Critical, constantly changing information (health, timer) goes in easy view; rarely used options go in menus.
3. Find affordances. Choose shapes, icons and behaviours that suggest their function – a glowing door looks enterable, a raised button looks pressable. Use familiar conventions wherever possible.
4. Give immediate feedback for your inputs. Every press needs a visible and audible reaction within a fraction of a second: a button animates, a sound plays, the character responds.
5. Reduce everything. Remove anything unnecessary. Can two screens become one? Can a number become a simple bar? Can information appear only when it matters (for example, the ammo counter showing only when you are low)?
6. Prototype. Build quick wireframes and clickable or playable mock-ups.
7. Playtest. Watch players use the UI, note where they hesitate, and repeat the process.

Heuristics of user interface design

A heuristic is a rule of thumb. Jakob Nielsen’s ten usability heuristics are widely used to evaluate interfaces, including game UIs:

Heuristic	In a game
1. Visibility of system status	Show loading progress, whether the game saved, and current health or objectives.
2. Match between system and the real world	Use words and symbols players know: a heart for health, a map icon for the map.
3. User control and freedom	Allow players to go back, cancel, skip cut-scenes they have seen and undo mistakes.
4. Consistency and standards	The same button confirms everywhere; icons keep one meaning.
5. Error prevention	Ask “Are you sure?” before deleting a save; grey out actions that are not possible.
6. Recognition rather than recall	Show button prompts and item icons instead of making players memorise them.
7. Flexibility and efficiency of use	Shortcuts and quick menus for experienced players; remappable controls.
8. Aesthetic and minimalist design	Show only what matters now; keep the HUD clean.
9. Help users recognise, diagnose and recover from errors	Clear messages: “Not enough coins – you need 20 more.”
10. Help and documentation	A tutorial, a help menu, and tips that can be revisited.

Guidelines for game UI

• Keep the centre of the screen clear for gameplay; put HUD elements near the edges.
• Make text readable from the player’s viewing distance (a TV across the room needs larger text than a phone).
• Support the platform: full controller navigation on consoles, large touch targets on phones.
• Use colour, shape and sound together so information is not lost (colour-blind and deaf players).
• Match the style of the UI to the game’s art and theme, so it feels part of the world.
• Let players adjust settings: text size, subtitles, volume, control layout.

Good and bad UI: examples

Good UI	Bad UI
Health bar that flashes and beeps when low.	Health shown only as a small number in a corner.
Inventory sorted by type with clear icons and names.	Long unsorted list of text with tiny font.
Pause menu opens instantly and stops the game.	Pause takes several seconds or does not stop the action.
Button prompts match the controller the player is using.	Keyboard prompts shown to a controller player.
Objective marker appears when players seem lost.	No indication of where to go; objectives hidden in a sub-menu.
Settings let players remap controls and resize text.	Fixed controls and tiny text that cannot be changed.

This short PixelUX video summarises five UI principles that professional game designers use every day:

Example

A student applies the UI process to a tower-defence game for tablets. Inputs: tap to place towers, drag to scroll, tap to upgrade. Outputs: coins, lives, wave number, tower range. After prioritising, coins and lives go top-left, the wave counter top-right, and tower range only appears while placing a tower (reduce everything). Towers that cannot be afforded are greyed out (affordance and error prevention). Each tower placement plays a “thunk” and a dust puff (feedback). In the first playtest, players could not find how to upgrade towers, so the designer added a small arrow icon that appears above towers when an upgrade is affordable – then tested again.

Exercise

1. List the inputs and outputs for a game you play, then rank the outputs from most to least important.
2. Evaluate that game’s UI using Nielsen’s ten heuristics. Give each a score out of 5 and identify its best and worst features.
3. Find one example of good UI and one of bad UI in any game or app. Explain why using a heuristic or guideline from this post.
4. Redesign one bad UI screen using the seven-step process. Sketch the before and after versions.

Next: Game Camera Views: Static, Scrolling, Parallax, First-Person, Third-Person, Isometric and Top-Down

Syllabus link: This post is relevant to the CAPE® Animation and Game Design Syllabus, Unit 2: Interactive Design and Game Development, Module 2: Game Design and Development – Specific Objective 14 (“state the process of User Interface design for games”); Specific Objective 15 (“distinguish between good and bad user interface design for games”).

Attributions to media used in this post:

Star Fox interface (English).png – Jean-Frédéric – CC BY-SA 4.0 (via Wikimedia Commons)

Lunar Lander (1979 video game) Interface (French).png – FR – CC BY-SA 4.0 (via Wikimedia Commons)

SuperTuxKart in-race (2018).png – QwertyChouskie – CC BY-SA 4.0 (via Wikimedia Commons)

© 2026 Vedesh Kungebeharry. All rights reserved.