t1k:designer:ux:core

Field	Value
Module	`ux`
Version	`1.7.2`
Effort	`high`
Tools	—

Keywords: design, game UX, user experience, UX

How to invoke

/t1k:designer:ux:core

Game UX Design

When This Skill Triggers

Designing HUD, health bar, cooldown indicators, minimap, or damage numbers
Laying out mobile game UI (touch targets, thumb zones, portrait/landscape)
Designing onboarding flow, tutorial, or first-time user experience (FTUE)
Adding accessibility support (colorblind modes, text sizing, remapping)
Deciding what information to show on-screen and at what priority

Core Principles

Information Hierarchy

Three tiers — always visible vs on-demand vs menu-only:

Critical (always visible): HP, active threat, objective marker
Important (contextual): mana/stamina, cooldowns, mini-map
Optional (in menu): detailed stats, inventory, map

Clarity Over Beauty

Every UI element must answer: “What does the player need to DO with this information?”
If removing an element doesn’t hurt decision-making, remove it
Contrast ratio ≥ 4.5:1 for text legibility (WCAG AA minimum)

Muscle Memory

Primary actions → same screen position every session (never move HUD elements)
Consistent button meanings across all screens (B/Circle = cancel, universally)
Feedback within 100ms of input (see game-feel-juice for input responsiveness)

HUD Layout Patterns for RPG

┌─────────────────────────────────┐
│  [Minimap]          [Quest/Obj] │  ← Top corners: orientation info
│                                 │
│           [World]               │  ← Center: unobstructed
│                                 │
│  [HP Bar]    [Skill Bar] [Lvl]  │  ← Bottom: action info
│  [MP/Stamina]          [Inv SH] │  ← Bottom row: resource + shortcuts
└─────────────────────────────────┘

HP bar: bottom-left; always visible; color shifts red below 30%
Minimap: top-right; tap-to-expand on mobile; show only within 50m radius
Skill bar: bottom-center; 4–6 slots; cooldown overlay on each icon
Inventory shortcut: bottom-right corner; opens bag without leaving game world
Boss HP: top-center, appears only during boss encounter

Mobile Touch UX

Minimum touch target: 44×44 pt (88×88 px at 2×); increase to 56pt for primary actions
Thumb zone (portrait): safe primary actions within bottom 40% of screen; avoid top corners
Thumb zone (landscape): left thumb = movement/camera; right thumb = actions; never cross
Gesture conflicts: swipe-to-dodge must not conflict with scroll; assign separate screen regions
Button spacing: 8pt minimum gap between adjacent touch targets to prevent mis-taps
Dual-thumb dead zone: center 20% of screen — avoid placing any interactive element here

Input Feedback Hierarchy (Mobile)

Priority order: visual > audio > haptic — never skip visual.

Action	Visual	Audio	Haptic
Button press	Scale 0.9× → 1.0× (80ms)	Click sfx	Light impact
Skill activate	Icon glow + cooldown start	Cast sfx	Medium impact
Damage received	Red vignette flash	Hit grunt	Heavy impact
Level up	Full-screen particle	Fanfare	Long buzz

Accessibility Basics

Colorblind modes: Deuteranopia (red-green), Protanopia (red), Tritanopia (blue); recolor HP/enemy indicators
Never color-only: HP = color bar + icon + number; enemy type = color + shape icon
Font size scaling: minimum 28sp body, 24sp secondary; provide 3 scale presets (S/M/L)
Auto-battle option: mandatory for mobile RPG — reduces fatigue for farming sessions
Subtitle options: speaker name + dialog text; separate toggle for combat callouts
Reduce motion: disable screen shake and particle excess; respects OS-level preference on iOS/Android

Onboarding Tutorial Flow

Arrive — player spawns in safe zone; no enemies; no timers
Discover — single clear prompt: “Move to the marker” (movement only)
Interact — contextual prompt when in range: “Press [A] to attack dummy”
Compound — combine: “Use skill, then attack” — max 2 inputs per tutorial beat
Graduate — practice arena with easy enemies; player can replay anytime from menu

Rules:

Teach one mechanic per screen; never stack 3+ prompts simultaneously
Always offer skip after step 1; show “Tutorial in Settings if you want it back”
Progressive disclosure: hide advanced mechanics (combo, status effects) until level 5+
Never lock player in tutorial room — allow menu access throughout

Quick Reference

Design Area	Key Rule	Reference
HUD layout	Critical info bottom-left, secondary top-right	`references/hud-patterns.md`
Mobile touch	Min 44×44pt targets, bottom-60% for primary actions	`references/mobile-touch-ux.md`
Tutorial	Learn-by-doing, always allow skip	`references/onboarding-tutorial.md`
Accessibility	Shape+color (never color alone), scalable text	`references/accessibility-basics.md`

Anti-Patterns

#	Anti-Pattern	Problem	Fix
1	HUD clutter	Cognitive overload, player ignores everything	Apply 3-tier hierarchy — show only critical info by default
2	Forced tutorials	Experienced players churn immediately	Always provide skip; teach through optional challenge rooms
3	Invisible affordances	Player doesn’t know what’s interactable	Glow, outline, or color-code interactables consistently
4	Color-only encoding	Colorblind players lose critical info	Add shape/icon/pattern alongside color for every indicator
5	Moving HUD	Breaks muscle memory	Lock UI positions; let player customize once, keep forever
6	Text too small on mobile	Unreadable under 28sp	Enforce minimum sizes; test on 5-inch screen

Cross-References

game-visual-design — color palettes, typography, rarity tiers for game screens
game-ui-animation — screen transitions, menu animations, micro-interactions
game-ui-wireframe — layout planning, screen templates, navigation flows
game-feel-juice — input responsiveness, feedback timing, hit flash patterns
game-level-design — tutorial encounter design (spatial teaching)
engine UI toolkit skills (auto-activated via registry) — UI implementation patterns
UI framework skills (auto-activated via registry) — drag-and-drop, cell grids
engine mobile skills (auto-activated via registry) — safe area, notch handling
engine inventory skills (auto-activated via registry) — polyomino grid UX patterns

Gotchas (from demo experience)

Overlapping action buttons + reward trays: When building bottom-panel UIs (FIGHT button + reward tray + inventory), calculate cumulative Y offsets: buttonY = padding + trayHeight + padding. Never anchor multiple interactive elements at the same Y — players WILL mis-tap.
First-person corridor parallax: Horizontal UV scrolling does NOT create “walking forward” feel. Use perspective-baked static backdrop + animated perspective lines (Outrun-style) for forward-into-screen motion.
Touch target minimum: 44x44pt for iOS, 48x48dp for Android. BackpackCrawler FIGHT button is 160x50 — good. But reward slots at 70x70 should have 8px spacing minimum.
Mobile font size minimums (CanvasScaler 1080×1920 ref): Headers ≥28, body ≥24, secondary ≥16, captions ≥14. BackpackCrawler had 12 of 14 text elements below minimums (11-16f range). Also increase container heights (HP bars, encounter bars, telegraph) when increasing font sizes to prevent text clipping.
Container heights must scale with font sizes: When increasing font sizes, ALWAYS also increase container heights (HP bars, encounter bars, telegraph containers). Formula: height >= fontSize * 1.5 + padding * 2. BackpackCrawler HP bar was 20px for 12px text — after bumping text to 16px, bar needed 26px.

Reference Files

File	Coverage
`references/hud-patterns.md`	Health bars, minimap, cooldowns, damage numbers, inventory grid UX, resource counters
`references/mobile-touch-ux.md`	Thumb zones, touch target sizes, gesture vocabulary, portrait/landscape, haptics
`references/onboarding-tutorial.md`	4-phase tutorial, progressive disclosure, contextual hints, skip patterns, anti-patterns
`references/accessibility-basics.md`	Colorblind modes, text sizing, remapping, difficulty options, subtitles, motion sensitivity
`references/mobile-font-sizing-guide.md`	Font size tiers (1080×1920), container height formula, HP bar sizing, grid cell sizing, CanvasScaler setup