Guide

Game HUD and heads-up display design explained

Harbor Ruins' first ARPG combat build shipped with a portrait health bar, a numeric HP overlay on the character, a party strip across the top, a rotating minimap, ability cooldown diamonds, and a scrolling quest ticker — all visible during boss dodge windows in the lower third of the screen. Playtesters missed telegraphed sweeps not because animation was unclear, but because eye travel bounced between redundant widgets. Designers rebuilt the heads-up display (HUD) around a single survivability readout, contextual combat chrome, and exploration-only panels that fade when swords are drawn. A game HUD is the persistent interface layer between the player and the world: it surfaces health and resources, objectives, and input prompts without stealing attention from the action that earns those numbers. This guide covers information hierarchy and layering, diegetic vs screen-space UI, core widget families, safe zones and clutter budgets, combat vs exploration modes, accessibility presets, the Harbor Ruins refactor, a genre decision table, pitfalls, and a production checklist alongside our floating combat text guide and interaction systems guide.

What a HUD is responsible for

The HUD answers three questions the player asks dozens of times per minute: Am I safe? What should I do next? Can I act? Everything on screen competes for the same foveal real estate as enemy tells, platforming gaps, and readable lighting. Good HUD design treats pixels as a scarce budget: each element must justify its presence at the moment it appears.

Unlike menus (deliberate, pausable) or modal overlays, the HUD is ambient. Players glance, not read. That implies:

Glanceable encoding — color, fill level, and icon shape carry meaning faster than digits.
Stable anchors — health always lives in the same corner so muscle memory builds.
Contextual visibility — exploration clutter hides during combat; boss-only widgets appear on aggro.
Non-duplication — one authoritative readout per stat; secondary views are optional in settings.

HUD layers from back to front

Layer	Examples	When it dominates
Diegetic	Wrist watch health, ammo on weapon model, ship cockpit gauges	Immersion-first sims; camera must frame props
Spatial world UI	Enemy health bars, nameplates, objective markers in 3D	Action RPGs, MMOs, co-op readability at distance
Screen-space HUD	Corner health, minimap, ability bar, compass strip	Most genres; reliable under camera motion
Transient feedback	Damage numbers, hit markers, combo counters, level-up toasts	Peak moments; must pool and fade quickly
Meta / debug	FPS counter, netcode ping, damage log overlay	PC players, competitive modes, QA builds

Information hierarchy and widget placement

Western players scan top-left to center for threats and bottom-center for their character's feet and dodge space. Console safe zones (overscan) and notched phones trim edges further. A practical layout convention:

Top-left — primary survivability (HP, shields, lives).
Top-right — navigation (minimap, compass, objective distance).
Bottom-center — abilities, consumables, context actions; keep vertical profile thin.
Bottom-right — secondary resources (ammo, stamina, super meter segments).
Center — reserved for reticle, subtle telegraphs, and transient callouts only.

Core widget families

Health and mitigation. Prefer a single bar with segmented breakpoints (25/50/75%) over raw integers. Shields as a distinct color layer communicate “damageable now” without a second widget. Tie low-HP pulse to accessibility options so photosensitive players can disable flashing.

Resources and cooldowns. Stamina, mana, and super meter segments share the same visual grammar: empty vs ready states, radial sweeps for short cooldowns, numeric countdowns only when precision matters (MOBA ult timers).

Objectives and navigation. Quest text belongs off the combat plane — pin to a journal hotkey or a slim compass strip. Minimaps should rotate with player facing only when navigation is the core loop; otherwise north-up reduces cognitive load.

Interaction prompts. Delegate placement to your interaction system: one prompt anchor near the reticle or target, not a second button legend in every corner. Hold vs tap progress rings belong on the prompt itself, not duplicated in a tutorial panel.

Combat mode vs exploration mode

The highest-leverage HUD feature Harbor Ruins added was not a new widget — it was a mode switch. When the player draws a weapon or enters an arena trigger, the HUD animates through a 200ms transition:

Quest ticker and vendor notifications slide off-screen.
Minimap shrinks to a corner dot with facing wedge only.
Enemy nameplates and boss HP bar promote to higher contrast.
Ability bar gains 12% vertical size and cooldown ready pulses.

Exiting combat reverses the stack after a short delay so players looting a cleared room still see combat feedback fade naturally. Implement modes as a state machine (HudMode.Exploration, Combat, Boss, Cinematic) rather than toggling individual widgets ad hoc — otherwise designers cannot reason about total clutter.

Clutter budget

Assign each widget a priority score (0–100) and a maximum simultaneous footprint in percent of safe-area width. At runtime, sort by priority and drop or collapse widgets until the budget is met. Boss encounters may raise the ceiling; cutscenes force priority below 10 for all non-subtitle elements. This pattern prevents feature creep from every department adding “just one more icon.”

Harbor Ruins ARPG refactor

Before refactor, Harbor Ruins tracked eleven always-on HUD elements during bridge boss fights. After:

Portrait HP + numeric overlay merged into one top-left bar with boss break segments mirrored on the boss bar only during phase two.
Party strip moved to co-op-only sessions; solo play hides ally portraits.
Quest ticker replaced with a compass ping; full text opens on pause journal.
Damage numbers routed through pooled world-space popups with merge rules documented in the combat text guide.
Super meter segments aligned bottom-right; EX spend flashes the segment, not the whole screen edge.

Metrics after two weeks: missed-dodge rate on the bridge sweep dropped 22%, average time-to-first-ultimate-use fell (players saw meter fill), and “UI too busy” survey responses fell from 41% to 9%. The art team recovered screen space for wider boss framing without shrinking telegraphs.

Genre decision table

Genre	HUD emphasis	Typical pitfall
Fighting game	Large meter segments, round timer, minimal center obstruction	Duplicate health in corners and above heads
FPS / tac-shooter	Reticle-centric, ammo corner, lean kill feed off-center	Full-screen hit markers obscuring targets
Action RPG	Mode switching, boss HP bar, ability bar, sparse minimap	MMO-style quest log during dodge-heavy fights
Survival / sim	Hunger, thirst, temperature; diegetic watch optional	Too many survival meters always visible
Racing	Speed, position, lap delta; track minimap on edge	Pop-up events blocking apex sight lines
Strategy / RTS	Selection panel, command card, resource strip	Unit health bars stacking unreadably in dense fights
Horde survivor	XP bar, level-up choice overlay, DPS-lite optional	Covering pickup magnet radius at screen center
Immersive sim	Diegetic maps, inventory on belt; optional minimal mode	Forcing screen HUD when players chose diegetic-only

Common pitfalls

Duplicate stat readouts — bar, number, and portrait badge showing the same HP trains scanning, not comprehension.
Center-screen stacking — objectives, damage, and prompts in the same band hide foot placement and enemy wind-ups.
Always-on minimap — navigation aid becomes wallpaper; shrink or hide when not moving.
Low-contrast glass — translucent panels over busy backgrounds fail WCAG; add backing plates in combat.
Font size arms race — every team enlarges their widget; enforce a typographic scale.
No HUD-less option — screenshot modes and streamers need clean frames; photo mode should respect mode machine.
Ignoring ultrawide and split-screen — anchored corners drift; test aspect ratios and split-screen safe splits.

Production checklist

Define HudMode states and which widget groups belong to each.
Publish a safe-zone template (console, mobile notch, ultrawide) in design docs.
Assign priority scores and a runtime clutter budget cap per mode.
Pick one authoritative widget per core stat; gate duplicates behind settings.
Prototype combat and exploration on the busiest boss arena before shipping widgets.
Wire health and resource widgets to the same data events as gameplay simulation.
Pool transient elements (damage numbers, toasts) with max on-screen limits.
Ship accessibility toggles: HUD scale, color-blind palettes, reduced motion, low-health pulse off.
Profile GPU overdraw from fullscreen HUD canvases; batch static chrome.
Record eye-tracking or heatmap playtests on first-time and expert cohorts.
Document localization overflow rules for German quest strings in compass strips.

Key takeaways

The HUD is a priority queue for attention, not a dashboard of everything the game tracks.
Stable anchors and glanceable encoding beat dense numeric panels during action.
Combat vs exploration modes prevent quest clutter from competing with dodge tells.
Clutter budgets and widget priorities scale better than per-feature visibility toggles.
Harbor Ruins cut missed-dodge rate 22% by merging redundant health UI and mode-stripping exploration chrome.