Player UX Concepts
Four structurally divergent takes on the player-facing MMOIST frontend — spec 106-player-ux-design-work, issue #294.
All four run against the same mock state (mock-data.js: you are Thessa, the GM just dropped the Broken Keep spoils). No build, no network. Each supports light + dark and half-screen width. Press / anywhere to search. Organization uses the hybrid model: containers are real items (Backpack, Coin Purse, Belt Pouch — contents travel with them), while Worn / At the Ready are group: tags rendered as Title-Case shelves; untagged loose items are Carried.
ETile DeckACTIVE — iteration 1
A's interactions × B's tile language
Synthesis of A and B: command bar + scope chips up top, gear grouped by Worn / At The Ready / Carried shelves of alpha-sorted, tag-colored tiles. Clicking a tile expands an interaction panel in place in the grid — no bottom-sheet eye travel. Search removes non-matches instead of graying. Default view only so far; other scopes and the merchant experience come once the visual language settles.
nav: search + shelvesdensity: tilesregister: warm ember, bolder than A
ACommand Deckfeeding E
Search-first — the query line is the app
One command bar answers across your gear, the vaults, the drop, and every shop; each result row is directly actionable (use / give / move / claim / buy). Idle state is a quick-belt of consumables plus the hoard banner.
nav: searchdensity: list rowsregister: dark instrument panel
BPack Shelvesfeeding E
Container-first — gear lives on labeled shelves
Worn / At the Ready / Carried as shelves of chunky name-first tiles (shelves are group: tags; the Backpack is a real container item). Moving is pick-up-and-put-down: tap an item, destinations light up, tap a shelf — a group shelf retags, a stash shelf moves. Search dims non-matching tiles in place.
nav: spatialdensity: tilesregister: warm, tactile, game-y
CField LedgerON HOLD — GM UX candidate
Places rail → dense list → provenance pane
The whole world in one glance: places on the left, contents in a compact ledger, and everything about the selected entry — including where it came from — on the right. Editorial serif register; the most information-dense of the four.
nav: tree-lite raildensity: compact rowsregister: editorial ledger
DSession HUDON HOLD
Verb-first — screens ordered by how often you do things
USE / CLAIM / GIVE / PARTY / SHOP as dedicated screens sized for seconds-between-turns: a quick-belt with giant use buttons, a claim screen with per-item destinations, a two-step give flow. Game-HUD register, chamfered panels.
nav: verb tabsdensity: slabs & cardsregister: modern game HUD
Evaluating against the spec: in each concept try — find the Health Potions with / and use one (SC-002/003) · claim the Dragon-etched Dagger and take a coin share (US2) · give a potion to Aldric (US3) · check the dagger's provenance and what Mira is carrying (US4) · buy from Ironhold Market (US5) · toggle the theme and resize to half-screen (SC-004) · move the Everburning Match from At The Ready to Worn (group retag) · tuck something into the Backpack, then hand the whole Coin Purse to Aldric (containers).