Guide

Game UI and HUD design explained

The heads-up display (HUD) is everything on screen that tells you how the game is going without pausing play — health, ammo, objectives, cooldown timers, party status. Good HUD design is invisible until you need it: you glance at a corner, know you are low on shields, and react. Bad HUD design clutters the viewport, hides critical warnings behind decorative chrome, or forces you to open three nested menus to see a quest objective. Game UI spans more than the HUD — pause screens, inventory grids, settings panels, and storefronts are all part of the same information architecture. This guide covers diegetic vs screen-space layouts, the elements every action game needs, safe-zone rules for consoles and mobile, how UI connects to input handling and accessibility, and a production checklist so your interface survives a frantic boss fight.

HUD vs menus: two layers of game UI

Split game interface into two modes. In-game HUD elements stay visible (or fade in contextually) while the player has agency — movement, aiming, building. Modal menus pause or slow simulation and capture full focus: inventory, skill trees, map screens, settings. Mixing these layers causes friction. If your crafting UI opens over combat without pausing, players die while sorting materials. If every stat lives in a buried submenu, nobody checks buffs during a fight.

A useful rule: anything needed to survive the next five seconds belongs on the HUD or as a world-space overlay near the player. Anything needed once per minute can live behind a single dedicated input (Tab for scoreboard, M for map). Deep configuration — key rebinding, graphics presets — belongs in a main menu or pause overlay, not combat chrome. Tutorial prompts during the first hour are a third category: they should graduate out of the HUD as covered in onboarding design.

Persistent HUD: health, stamina, primary resource, equipped weapon, crosshair or reticle, minimal objective text.
Contextual HUD: interaction prompts ("Press E"), reload progress, ability cooldown pips — appear only when relevant.
Modal layers: inventory, full map, dialogue choices, pause menu — block or dim gameplay input.
Meta UI: lobby, matchmaking, battle pass — outside the core loop but must match visual language for trust.

Diegetic, non-diegetic, and spatial UI

Non-diegetic UI floats on the screen like a film subtitle — the character cannot see it. Classic health bars in screen corners are non-diegetic. Diegetic UI exists inside the fiction: a wrist-mounted Pip-Boy, a spaceship dashboard the pilot looks at, ammo readouts on the gun model itself. Diegetic UI sells immersion but costs readability; a tiny holographic health ring is harder to parse at a glance than a high-contrast bar.

Spatial UI (world-space canvases) attaches widgets to entities — nameplates over allies, damage numbers, quest markers above NPCs. These scale with distance and camera angle, so they need minimum font sizes and occlusion rules (fade when behind walls). Hybrid games often use diegetic ammo on the weapon model plus non-diegetic objective text at the top of the screen — that is fine if roles are consistent. Avoid duplicating the same stat in two places unless one is a detailed drill-down.

Camera coupling matters: HUD anchored to screen space never shakes when the camera kicks from explosions; diegetic panels may shake with the view for extra juice. Screen-space HUD usually wins for competitive readability; diegetic wins for narrative-heavy single-player titles.

Core HUD elements and what each must communicate

Health, shields, and resource bars

Use high-contrast fills with a dark backing plate so bars read on any background. Show numeric values optionally — many players prefer bars only until critical, then flash numbers. Chunked segments (ten pip squares) communicate discrete hits in tactical games; smooth gradients suit RPGs. Color alone is insufficient — pair green/yellow/red with shape or iconography for colorblind players.

Ammo, cooldowns, and ability rows

Primary and secondary ammo counts sit near the reticle or bottom-right — wherever the player's eyes rest after aiming. Ability cooldowns work best as radial wipes or horizontal bars under each icon; avoid tiny digit-only timers. Reserve screen-center for the reticle and telegraphed enemy attacks only.

Minimap and compass

Minimaps trade spatial awareness for screen space. Top-down rotating minimaps suit open worlds; fixed-orientation radar works in corridor shooters. Markers need a legend: hostile red, objective gold, teammate blue. If you remove the minimap for "immersion," provide a compass strip or quest beacon at minimum — players still need heading. Full-screen maps are modal; minimaps are HUD.

Objectives and quest trackers

One primary objective line visible at all times; secondary objectives collapse into a journal. Distance-to-waypoint and cardinal direction reduce wiki lookups. Fail states ("Defend the point — 0:42") need larger type than passive explore text. In multiplayer, separate personal goals from team callouts to avoid clutter.

Status effects and buffs

Icon rows above the health bar with duration sweeps beat scrolling text lists. Cap visible icons (six to eight) and overflow the rest into a "+3" badge with tooltip on focus. Poison, stun, and shield break should use distinct silhouettes, not only hue shifts.

Information hierarchy and safe zones

Players scan in an F-pattern on wide screens: top-left for objectives, bottom-right for ammo, center for action. Fighting game HUDs invert this — health at opposite top corners so both players' vitals are symmetric. Document a layout grid early and stick to it across modes.

Console safe zones inset UI 5–10% from each edge so overscan TVs do not crop bars. Ultrawide monitors expose another problem: stretching HUD to screen edges separates related stats. Anchor clusters to a 16:9 center column or use proportional margins rather than corner-pinning everything to 21:9 extremes.

Mobile thumb reach favors bottom corners for frequent taps; avoid top-only buttons for core actions. Touch targets need 44–48 px minimum. HUD opacity sliders help on small screens where glass panels obscure too much battlefield. Portrait mode may require a simplified HUD preset — not a scaled-down landscape layout.

Group related stats (health + shields + overheal) in one cluster.
Limit simultaneous animated widgets — pulsing quest markers plus low-health vignette plus hit indicators competes for attention.
Use typography scale: critical warnings 1.5x body HUD size, passive info 0.85x.
Test on minimum supported resolution (720p) and maximum (4K UI scale 125%).

Menu UX: inventory, pause flow, and navigation depth

Every extra click between "I want to equip a potion" and "potion equipped" is friction that kills flow. Inventory grids need sort filters, category tabs, and compare tooltips without nested full-screen transitions. Radial menus work for eight or fewer quick actions (weapon swap, emotes); grids win for hundred-item loot tables.

Pause menu depth should be shallow: Resume, Settings, Quit — with settings opening a sub-panel, not a maze. Returning from any submenu must land on Resume with one Back press. In multiplayer, pausing only halts local input; show that clearly so players know the match continues.

Focus and controller navigation require visible focus rings and logical tab order. PC mouse hover states do not translate to gamepad; design default focus on the most likely button. Search fields in 200-item crafting UIs save more time than prettier category icons.

Accessibility in game UI

Accessibility is not a post-launch toggle — it changes HUD layout from day one. Required patterns include UI scale sliders (100–200%), separate subtitle size, high-contrast HUD presets, and colorblind palettes that recolor minimap pings and rarity borders. See the full checklist in game accessibility explained.

Photosensitivity: avoid full-screen white flashes on menu transitions; offer reduced motion for HUD pulse effects.
Cognitive load: "clean HUD" mode hides non-critical widgets (XP gain popups, social feeds) during combat.
Screen readers: rare in real-time action, but menus and storefronts should expose accessible names on web-based launchers.
Remapping: UI hints must update when players rebind — show icon glyphs from the input system, not hard-coded "Press F."

Implementation patterns across engines

Unity uses Canvas in Screen Space — Overlay (HUD), Camera (world UI), or World Space (nameplates). Anchor presets pin widgets to corners; Canvas Scaler with "Scale With Screen Size" reference resolution 1920x1080 is the common baseline. UI Toolkit (USS/UXML) is replacing legacy uGUI for complex menus.

Godot Control nodes use anchor and margin layout; Theme resources centralize fonts and colors. SubViewport can render diegetic screens in 3D. Unreal Widget Blueprints with HUD classes and Z-order layers separate HUD from menus.

Browser and canvas games often draw HUD in a second canvas layer above the game world, or use DOM overlays for text-heavy menus (better font rendering, worse pixel alignment). Keep HUD draw calls batched — separate texture atlases for UI, avoid per-frame DOM reflow. State binding should read from the same simulation tick as gameplay to prevent one-frame desync on health bars.

Localization expands strings 30–40% in German; layout must flex or truncate gracefully. Bitmap fonts for HUD digits reduce atlas swaps; dynamic TTF for quest text. Right-to-left languages may mirror entire HUD clusters — plan mirrors in the layout grid, not as an afterthought.

Production checklist

Define a layout grid with persistent, contextual, and modal layers documented.
Prototype HUD on greybox gameplay before final art — readability first.
Playtest with HUD scale 100% and 150%; verify 720p and ultrawide safe zones.
Run colorblind simulators on minimap, rarity colors, and team markers.
Measure menu clicks to complete top five player tasks; cut depth where possible.
Bind UI hints to the live input map; verify gamepad focus order on every menu.
Ship a "minimal HUD" toggle and opacity slider in launch settings.
Profile UI draw cost separately — overdraw from fullscreen glass panels hurts mobile.
Localize longest strings early; fix overflow before voice-over lock.
Record blind playtests: can new players find health, objective, and map without asking?

Key takeaways

HUD is for the next five seconds; menus are for everything else — do not blur the boundary.
Diegetic UI sells fantasy; screen-space UI wins clarity — hybrid is fine if roles do not duplicate.
Safe zones and thumb reach matter as much as visual polish; cropped health bars lose games.
Accessibility presets (scale, contrast, motion) are layout constraints, not optional skins.
Input and UI must stay in sync — rebound keys, gamepad focus, and touch targets define whether the HUD is usable.