Game UI

game-ui

Core Philosophy

User Interface (UI) design for video games is fundamentally different from web or SaaS design. Game UI exists in service of immersion, situational awareness, and gameplay flow. A cluttered, opaque web-style dashboard pasted over a 3D game world shatters immersion. Game UI requires strict classification across diegetic and non-diegetic layers, controller-first spatial navigation (the 10-foot television rule), rapid glanceability during high-stress combat, and responsive resolution scaling.

4-Step Game UI & HUD Architecture

Step 1: The 4 Interface Immersion Layers

1. UI Layer Classification:
   • Diegetic UI: Exists inside the physical 3D game world and is experienced by the character (e.g. Dead Space holographic health spine, Pip-Boy wrist computer, physical map held in character hands).
   • Non-Diegetic UI: Traditional 2D screen overlay completely invisible to the character (e.g. Health bar at top-left, floating minimap, pause menu).
   • Spatial UI: UI elements positioned in the 3D world but invisible to the character (e.g. floating waypoint markers over mission objectives, player name tags).
   • Meta UI: Visual effects representing character state on screen (e.g. blood splatters on screen when injured, water droplets on camera lens).

Step 2: The 10-Foot Television Rule & TV Safe Zones

1. Console & TV Legibility (The 10-Foot Rule):
   • A player sitting 10 feet away from a 55-inch television cannot read 12pt web fonts.
   • Minimum Font Sizing: Body text must be at least 24pt to 28pt on a 1080p canvas (scaled up proportionally for 4K).
2. Action Safe & Title Safe Margins:
   • Television bezels crop screen edges (overscan). Keep all critical HUD elements (health, ammo, minimap) within the Title Safe Zone (minimum 10% margin from screen edges).

Step 3: Controller-First Spatial Navigation

1. Deterministic D-Pad / Thumbstick Focus:
   • Gamepad navigation does not have a mouse cursor. Moving the analog stick must jump focus deterministically to the next spatial neighbor.
2. Visual Focus Feedback:
   • The currently focused menu item must be unmistakably obvious: high-contrast outline border, subtle scale-up (1.05x), and distinct audio navigation clicks.
3. Dedicated Gamepad Button Legends:
   • Always display controller button prompts on screen matching the active hardware (e.g. (A) Select, (B) Back, (X) Reload). Automatically swap prompt icons between Xbox, PlayStation, and Keyboard when input devices switch.

Step 4: Combat Glanceability & HUD Hierarchy

1. The F-Pattern Combat Glance:
   • In high-speed combat, players have $< 100text{ms}$ to check vital signs.
   • Anchor vital telemetry (Health, Shield, Primary Ammo) close to the screen periphery or clustered near the center reticle.
   • Use high-contrast color coding: Green/Blue (Shields), Red (Low Health), Flashing Amber (Low Ammo).

Deliverable Format: Game UI / HUD Specification (GAME-UI-SPEC.md)

# Game Interface & HUD Specification: [Game Title]

## 1. UI Layer Taxonomy & Immersion Strategy
- **Combat HUD**: Non-Diegetic minimalist HUD (Fades out when out of combat)
- **Inventory System**: Spatial Diegetic backpack inspection
- **World Waypoints**: Spatial floating 3D markers with distance meters

## 2. Television Safe Zones & Resolution Scaling
- **Reference Canvas**: 1920x1080 (Scales dynamically via UI Canvas Scaler to 4K)
- **Title Safe Margin**: 10% inset (96px horizontal, 54px vertical)
- **Minimum Body Typography**: 26pt bold font
- **Color Contrast**: All HUD text uses 2px dark drop shadow (`rgba(0,0,0,0.85)`) to ensure legibility against bright skyboxes.

## 3. Controller Navigation Map (Main Menu / Inventory)
| Input Button | Action Triggered | Visual Feedback | Audio Cue |
|---|---|---|---|
| D-Pad Up / Down | Jump focus to neighbor | 1.05x scale + 2px gold border | `ui_focus_move.wav` |
| Face Button South (A / Cross) | Select / Confirm | Button depress + white flash | `ui_select_confirm.wav` |
| Face Button East (B / Circle) | Back / Close Menu | Instant screen pop | `ui_cancel_back.wav` |
| Left Trigger / Right Trigger | Switch inventory tabs | Sliding tab indicator | `ui_tab_switch.wav` |

## 4. Combat HUD Glancing Layout
- **Top-Left**: Player Level & Team Health Bars
- **Bottom-Right**: Active Weapon Silhouette, Magazine Counter (Huge 48pt text), Grenade icons
- **Bottom-Center**: Ultimate Ability readiness ring (Glows when 100% charged)

Worked Example: Fixing Tiny Text in a Console Port

• Problem: PC game was ported to Steam Deck and Xbox; playtesters complained they could not read weapon stats or inventory descriptions.
• Remediation: Implemented a responsive UI scaling mode for handheld/TV screens. Increased minimum body text from 14pt to 26pt; added a high-contrast dark backing card behind weapon comparison tooltips.
• Outcome: Steam Deck verified status achieved; zero negative reviews regarding text legibility.

Verification Checklist

• All critical HUD telemetry placed within the 10% Title Safe boundary.
• Typography adheres to the 10-foot rule (minimum 24pt+ on 1080p).
• Gamepad navigation supports deterministic D-pad focus hopping with clear visual selection state.
• Button prompts dynamically update when switching between Xbox, PlayStation, and Keyboard.
• HUD text includes drop shadows or backings to remain readable against bright 3D backgrounds.

Anti-Patterns

• Microscopic PC Text on TV: Forcing console players to squint at 11pt inventory text.
• Mouse-Only Menu Design: Requiring console players to drag an artificial virtual mouse cursor with an analog stick.
• HUD Clutter: Covering 60% of the game screen with static meters, blocking the player's view of the game world.