fcsouza/design-ui-ux-game

UI/UX Game Design

Purpose

HUD patterns, menu systems, feedback loops, onboarding, and accessibility for any game type. Genre-agnostic — the same principles apply whether you're building an idle clicker, an MMO, or a puzzle game.

When to Use

Trigger: game UI, game UX, HUD, menu system, game feedback, onboarding, tutorial, accessibility, game interface, notification system, settings menu, inventory UI, tooltip, progress bar, game menu

Prerequisites

• game-design-fundamentals — feedback loop and player motivation context

Core Principles

Fumito Ueda: "Minimalism amplifies emotional impact. Remove everything that doesn't serve the experience." Jenova Chen: "The interface should be invisible — players should feel, not read." Shigeru Miyamoto: "Good UI teaches through interaction, not instruction."

1. Less is more — show only what the player needs right now; progressive disclosure for complex systems (Ueda)
2. Feedback is instant — every player action produces immediate visual + audio response (Chen)
3. Teach by doing — tutorials should be interactive, not text walls; the best tutorial is no tutorial at all (Miyamoto)
4. Consistency breeds intuition — same patterns everywhere: same button = same action, same color = same meaning
5. Accessibility is not optional — colorblind modes, scalable text, remappable controls, screen reader support
6. Mobile-first responsive — design for smallest screen first, scale up; touch targets minimum 44px
7. State is always visible — player should never wonder "what's happening?" — show health, progress, currency, status

Key UI Patterns

| Pattern | Use Case | Implementation | |---------|----------|---------------| | HUD overlay | Always-visible game state | Fixed position, minimal footprint | | Radial menu | Quick action selection | Triggered by hold/right-click | | Tab navigation | Multi-system management | Tabs with badge indicators | | Modal dialog | Confirmations, important info | Blocks game, requires action | | Toast notification | Non-critical updates | Auto-dismiss, stackable | | Tooltip | Contextual details | Hover/long-press, positioned smart | | Progress bar | Show advancement | Linear or radial, with milestones | | Inventory grid | Item management | Drag-drop, sort, filter, search |

Onboarding Flow

1. First interaction → teach core mechanic (no text, just do it)
2. First reward → show feedback system (number go up, sound, visual)
3. First choice → teach decision-making (two options, clear difference)
4. First failure → teach recovery (low stakes, quick retry)
5. First system unlock → teach progressive disclosure (new tab appears)

Cross-References

• game-design-fundamentals — feedback loops and reward schedules
• level-design — tutorial level integration
• elevenlabs-sound-music — audio feedback integration

Pitfalls & Anti-Patterns

• "UI soup" — too many elements on screen at once; players can't focus
• "Text tutorial" — pages of instructions before the player does anything
• "Hidden information" — critical game state not visible; player feels lost
• "Inconsistent controls" — same button does different things in different screens
• "No feedback" — player clicks and nothing visually happens for 200ms+
• "Accessibility afterthought" — adding colorblind mode after launch; it should be designed in

Designer Philosophy

Fumito Ueda (ICO, Shadow of the Colossus): The best UI is invisible. In ICO, there's no HUD — the player grips Yorda's hand, and that IS the interface. Every UI element you add should justify its existence against the alternative of removing it entirely.

Jenova Chen (Journey, Flower): UI should create emotional connection, not information overload. In Journey, the entire "multiplayer UI" is another player's presence. No health bars, no names, no chat — just shared experience through minimal interface.

Shigeru Miyamoto (Mario, Zelda): The best tutorials are the ones players don't notice. World 1-1 of Super Mario Bros teaches running, jumping, enemies, power-ups, and secrets — all without a single line of text.

Sources

• "The Invisible Interface" — Fumito Ueda, GDC 2006
• "Designing Journey" — Jenova Chen, GDC 2013
• "Game Feel" — Steve Swink
• "Don't Make Me Think" — Steve Krug (applies to game UI too)
• WCAG 2.1 accessibility guidelines adapted for games