Duration tiers — design alternatives

Eleven alternative designs for duration-tiered swaps

Each button opens the same swap configuration dialog, but with a different UX approach for the duration tiers section. All variants support full CRUD operations (create, read, update, delete) on tiers. Compare them to find the best fit for your workflow.

V1: Inline table

Classic spreadsheet-style editing. All tiers visible at once with direct in-cell editing. Best for power users familiar with tabular data.

V2: Accordion cards

Each tier is a collapsible card with summary header. Expand to edit. Clear separation and scannability without noise.

V3: Stacked form rows

Each tier is a horizontal form row with all fields inline. Compact, self-contained rows with range indicators.

V4: Visual timeline

Horizontal bar segmented by duration ranges. Click a segment to edit. Communicates the progression of swap rates spatially.

V5: Chip popover

Tiers as compact badge chips in a horizontal wrap. Click a chip to open a popover editor. Minimal vertical space.

V6: Tabbed form

Each tier is a tab. Active tab shows focused edit form. Best when tiers have more fields or are conceptually separate profiles.

V7: Master-detail panel

Two-column split: left list of tiers, right edit form. Mirrors the parent dialog's symbols table pattern. Familiar and navigable.

V8: Vertical stepper

Tiers as connected vertical steps with a progress line. Visual escalation metaphor. Click pencil to toggle inline editing per step.

V9: Summary + sub-dialog

Read-only summary table in the main dialog. Click 'Manage tiers' to open a dedicated sub-dialog for full CRUD editing.

V10: Side-by-side columns

Kanban-style vertical cards laid out horizontally. All tiers visible and editable simultaneously. Left-to-right = increasing duration.

V11: Grid matrix

Pricing-matrix layout: columns are duration thresholds, rows are Long/Short. Maximum data density for comparing all values at once.