A brief guide to UI in video games
Game UI covers everything players use to understand and control a game, including heads-up displays, menus, inventories, maps, tutorials and settings. Designers choose between diegetic, non-diegetic, spatial and meta interfaces, balance information with immersion, design for controllers, touch and keyboards, and build accessibility options so more people can play.
What game UI includes
In video games, the user interface is everything that helps players understand what is happening and control their experience. It includes the heads-up display, or HUD, showing health, ammunition, maps or objectives during play, as well as menus, inventories, skill trees, dialogue choices, shops, settings and tutorials. Good game UI gives players the information they need at the right moment while keeping them immersed in the game world.
Game UI shares many principles with app and web design, such as clarity, consistency and feedback, but it has unique challenges. Players may be under time pressure, looking at a television several metres away, using a controller instead of a mouse, or fully absorbed in a virtual world where traditional interface elements can feel out of place. Our post on the metaverse and spatial computing explores related challenges in immersive environments.
Four types of game UI
| Type | Description | Example |
|---|---|---|
| Diegetic | UI that exists inside the game world and characters can see it | A health bar shown on a character’s suit |
| Non-diegetic | Traditional overlays seen only by the player | A health bar in a screen corner |
| Spatial | Elements placed in the 3D world but not part of the story | Floating markers showing objectives |
| Meta | Effects representing the character’s state on the screen | Screen edges turning red when injured |
Many games mix these types. Diegetic and meta interfaces can increase immersion, while non-diegetic interfaces are often clearer and faster to read. The right balance depends on the game’s genre, pace and style.
Designing the HUD
- Show only information players need in the current moment
- Place key elements at screen edges, away from the action
- Use size, colour and position to signal importance
- Hide or fade elements when they are not needed
- Keep text large enough for television viewing distances
- Let players customise or hide HUD elements
A cluttered HUD distracts from gameplay and can overwhelm new players. Many modern games use contextual HUDs, where elements appear only when relevant, such as showing ammunition while aiming or health when it changes.
Menus, inventories and maps
Menus are where players manage their game: changing settings, organising inventories, upgrading characters and viewing maps. They need clear navigation, quick access to frequent actions and consistency across screens. Inventories should make items easy to compare and sort. Maps should show the player’s position, objectives and points of interest clearly, with filtering for busy worlds.
Visual style and readability
Game UI often reflects the game’s art style, from minimalist sci-fi panels to hand-drawn fantasy scrolls. A strong visual identity makes the interface feel part of the world, but readability must come first. Text needs enough contrast against busy backgrounds, icons must be recognisable at a glance and important information should remain clear during fast action. Testing on different screens and in different lighting conditions helps catch problems early.
Designing for input methods
- Controller: Navigation with directional input; clear focus states; button prompts.
- Keyboard and mouse: Precise pointing; hotkeys; hover states.
- Touch: Large targets; thumb-friendly layouts; minimal on-screen controls.
- Motion and VR: Hand tracking or controllers; UI placed in comfortable view.
Cross-platform games must adapt UI to each input method, for example showing the correct button prompts for each controller and adjusting layouts for touchscreens.
Onboarding and tutorials
Teaching players how to play without overwhelming them is a key UI challenge. Effective tutorials introduce mechanics gradually, let players learn by doing, use contextual prompts at the moment they are needed and allow experienced players to skip ahead. Our post on engaging mobile experiences covers onboarding principles that also apply to mobile games.
Feedback and juice
Games rely heavily on feedback: sounds, animations, vibrations and visual effects that confirm actions, such as hits, pickups and achievements. Designers sometimes call this extra layer of satisfying feedback "juice". Used well, it makes games feel responsive and rewarding. Too much can become noisy or tiring, so it should support the game’s rhythm. Our guide to microinteractions explains similar ideas in apps.
Accessibility in game UI
- Adjustable text size and HUD scale
- Subtitles with speaker names and background options
- Colour-blind modes and patterns in addition to colour
- Remappable controls and alternative inputs
- Options to reduce motion, flashing and camera shake
- Difficulty and assistance settings
Accessibility options let more people enjoy games and are increasingly expected by players. Guidelines from organisations such as the Game Accessibility Guidelines project offer practical recommendations.
Testing game UI
- Playtest early: Watch players use menus and HUDs in rough builds.
- Observe, do not explain: See whether players understand without help.
- Test on target devices: Check readability on TVs, monitors and phones.
- Measure: Track where players get stuck or quit.
- Iterate: Refine layouts, prompts and feedback based on findings.
Frequently asked questions
What is a HUD in games?
A heads-up display: on-screen elements such as health, ammunition, maps and objectives shown during gameplay.
What is diegetic UI?
Interface elements that exist inside the game world, such as a map the character holds or a display on their equipment.
How is game UI different from app UI?
Game UI must balance information with immersion, support controllers and TV distances, and often uses more motion and feedback.
Why is accessibility important in games?
It allows more people, including disabled players, to enjoy games and is increasingly expected by players and platforms.
Which tools are used to design game UI?
Designers often use Figma or similar tools for layouts, then build interfaces in game engines such as Unity or Unreal Engine.