Improve trade CTA hierarchy, progressive disclosure, and onboarding IA #417

New issue

Closed

opened 2026-06-25 14:12:49 +00:00 by PlasticDigits · 14 comments

PlasticDigits commented

2026-06-25 14:12:49 +00:00

(Migrated from gitlab.com)

Parent

#411 — Updated Gap Analysis (recommendations 9 + 10)

Current codebase

Three peer trade entry points in navItems.ts: / Swap, /trade Pro workspace, /limits limit book — no onboarding map.
CTA hierarchy inverted: Swap CTA uses py-3.5 text-base; trade place/market buttons use !text-xs / !text-[10px] in TradeOrderTicket.tsx, TradeMarketOrderPanel.tsx, LimitOrderLadderPanel.tsx.
TradePage desktop layout: resizable chart + book + tape + wallet history + full ticket — no simple mode.
LimitsPage duplicates /trade limit tab + ladder + history.
Slippage presets on market panel below 44px touch target.

Why needed

Retail users landing on /trade face information overload and undersized primary actions. Without IA guidance, CEX migrants cannot choose between Swap, Trade, and Limits.

Constraints / guardrails

Do not remove pro features — use progressive disclosure (collapsed panels, first-visit hints).
Persist "simple mode" / panel layout prefs in localStorage if added.
Mobile bottom nav (MOBILE_BOTTOM_NAV_ITEMS) already surfaces Swap/Trade/Pool/Limits — onboarding should respect mobile layout.
Match Swap CTA sizing (btn-primary scale) for trade money actions; maintain data-testid hooks.

Relevant files

frontend-dapp/src/components/common/navItems.ts
frontend-dapp/src/pages/TradePage.tsx
frontend-dapp/src/components/trade/TradeOrderTicket.tsx
frontend-dapp/src/components/trade/TradeMarketOrderPanel.tsx
frontend-dapp/src/components/trade/LimitOrderLadderPanel.tsx
frontend-dapp/src/pages/LimitOrdersPage.tsx
frontend-dapp/src/pages/SwapPage.tsx (CTA reference)
frontend-dapp/src/components/common/Layout.tsx

Recommended direction

Add dismissible onboarding strip on first visit: "New here? Start with Swap" + one sentence on hybrid vs pool-only / when to use Trade vs Limits.
Enlarge trade Place limit, Market buy/sell, and ladder CTAs to Swap-equivalent sizing (py-3, text-sm minimum).
Default Trade workspace to collapsed secondary panels (tape, wallet history) on first visit; remember expansion.
Optional: "Simple" toggle hiding chart resize handles / ladder on Limits.

Acceptance criteria

First-visit onboarding strip with links to / and brief Trade vs Limits guidance.
Primary trade CTAs ≥ Swap CTA visual weight (font size + padding).
Slippage presets on market panel meet ~44px touch target.
Progressive disclosure reduces default visible panels on /trade (document which).
Screenshot: /trade default first-visit layout.
Screenshot: Trade order ticket — enlarged Place limit / Market CTA vs Swap CTA side-by-side.
Screenshot: Onboarding strip on Swap or Trade.

Test plan

TradePage.test.tsx — update if default tab/panel state changes.
make test-frontend
Manual: first visit + return visit (localStorage).
Manual: mobile bottom nav — onboarding does not obscure tabs.

Attack / abuse test plan

Onboarding dismiss must not block wallet connect or swap submit.
Simple mode must not hide pause/blacklist banners (#395, #388).

Verification criteria

axe CI routes still pass (make lint-frontend / existing a11y job).
Playwright trade specs unchanged or updated intentionally.

## Parent [#411 — Updated Gap Analysis](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/work_items/411) (recommendations 9 + 10) ## Current codebase - Three peer trade entry points in `navItems.ts`: `/` Swap, `/trade` Pro workspace, `/limits` limit book — no onboarding map. - **CTA hierarchy inverted:** Swap CTA uses `py-3.5 text-base`; trade place/market buttons use `!text-xs` / `!text-[10px]` in `TradeOrderTicket.tsx`, `TradeMarketOrderPanel.tsx`, `LimitOrderLadderPanel.tsx`. - `TradePage` desktop layout: resizable chart + book + tape + wallet history + full ticket — no simple mode. - `LimitsPage` duplicates `/trade` limit tab + ladder + history. - Slippage presets on market panel below 44px touch target. ## Why needed Retail users landing on `/trade` face information overload and undersized primary actions. Without IA guidance, CEX migrants cannot choose between Swap, Trade, and Limits. ## Constraints / guardrails - Do not remove pro features — use **progressive disclosure** (collapsed panels, first-visit hints). - Persist "simple mode" / panel layout prefs in `localStorage` if added. - Mobile bottom nav (`MOBILE_BOTTOM_NAV_ITEMS`) already surfaces Swap/Trade/Pool/Limits — onboarding should respect mobile layout. - Match Swap CTA sizing (`btn-primary` scale) for trade money actions; maintain `data-testid` hooks. ## Relevant files - `frontend-dapp/src/components/common/navItems.ts` - `frontend-dapp/src/pages/TradePage.tsx` - `frontend-dapp/src/components/trade/TradeOrderTicket.tsx` - `frontend-dapp/src/components/trade/TradeMarketOrderPanel.tsx` - `frontend-dapp/src/components/trade/LimitOrderLadderPanel.tsx` - `frontend-dapp/src/pages/LimitOrdersPage.tsx` - `frontend-dapp/src/pages/SwapPage.tsx` (CTA reference) - `frontend-dapp/src/components/common/Layout.tsx` ## Recommended direction 1. Add dismissible **onboarding strip** on first visit: "New here? Start with Swap" + one sentence on hybrid vs pool-only / when to use Trade vs Limits. 2. Enlarge trade **Place limit**, **Market buy/sell**, and ladder CTAs to Swap-equivalent sizing (`py-3`, `text-sm` minimum). 3. Default Trade workspace to **collapsed** secondary panels (tape, wallet history) on first visit; remember expansion. 4. Optional: "Simple" toggle hiding chart resize handles / ladder on Limits. ## Acceptance criteria - [ ] First-visit onboarding strip with links to `/` and brief Trade vs Limits guidance. - [ ] Primary trade CTAs ≥ Swap CTA visual weight (font size + padding). - [ ] Slippage presets on market panel meet ~44px touch target. - [ ] Progressive disclosure reduces default visible panels on `/trade` (document which). - [ ] **Screenshot:** `/trade` default first-visit layout. - [ ] **Screenshot:** Trade order ticket — enlarged Place limit / Market CTA vs Swap CTA side-by-side. - [ ] **Screenshot:** Onboarding strip on Swap or Trade. ## Test plan - `TradePage.test.tsx` — update if default tab/panel state changes. - `make test-frontend` - Manual: first visit + return visit (localStorage). - Manual: mobile bottom nav — onboarding does not obscure tabs. ## Attack / abuse test plan - Onboarding dismiss must not block wallet connect or swap submit. - Simple mode must not hide pause/blacklist banners (#395, #388). ## Verification criteria - axe CI routes still pass (`make lint-frontend` / existing a11y job). - Playwright trade specs unchanged or updated intentionally.

PlasticDigits commented

2026-06-25 14:13:22 +00:00

(Migrated from gitlab.com)

mentioned in issue #411