Content hierarchy in UI

1) Why hierarchy is needed

• answers three questions in 3-5 seconds: what is it? → what is important? → what to do?;
• Makes the interface predictable and easy to scan
• reduces errors and increases conversion.

Principles: signals> noise, sequence> diversity, context> absolute rules.

2) Importance levels and structure

1. Navigation context (brand, section, crumbs/bread crumbs).

2. H1 - screen target (as short as possible, verb if necessary).

3. Lead/subtitle (one line of benefit or status).

4. Primary actions (1-2 key CTAs).

5. Primary data (main KPIs, first-line cards).

6. Secondary data (parts, filters, auxiliary tables).

7. Meta/Help (hints, notes, legal text).

Rule: on one screen - one H1, no more than two primary CTA.

3) Typography and rhythm

Font scale: H1 28-32, H2 22-24, H3 18-20, body 14-16, micro 12 (px/pt equivalent in web).
Line spacing: 1. 3–1. 5 for body, 1. 2–1. 3 for titles.
Indentation rhythm: multiple of the base unit (4/8 px). Zagolovok↔blok: 16-24; paragraphs: 8-12.
Contrast: WCAG AA minimum; the title is always more contrasting than the captions/meta.
Color vs weight: color - accent, not "crutch" instead of size/fat.

4) Grid and layout

Grid 12 columns (desktop )/4-6 (mobile) with fixed gatters.
Visually first = first in DOM: helps screen readers and SEOs.
Reading axis: left to right (LTR) or right to left (RTL) - mirror the order of the signals.
"Attention zones": upper left/center - title and lead; "action bar" - near/below it.

5) Visual priority signals

Size and weight (typography) is the primary signal.
Position (above/to the left = more important in LTR).
Color (accent for CTA, statuses - according to a fixed palette).
Iconography (as text support only).
Indents/frames (a card with a lot of "air" is more important).
Dynamics (animation ≤ 200 ms to attract attention without irritation).

6) Progressive disclosure

• Above the fold - only context, purpose and primary action.
• Accordion/tab sections are secondary data.
• Drill-down: card → panel → modal.
• Inline hints instead of overloaded "helps."
• Skeletons/placeholders retain structure for the duration of the load.

7) Hierarchy in typical screens

7. 1 Dashboard

H1 + time filter at the top.
KPI bar (3-5 cards) - first line.
Graphs/tables - second line, sorting/filters side by side.
Anomalies/alerts - separate column/tape, do not mix with KPI.

7. 2 Catalogue/Lobby

H1 + fast filters/chips.
Sorting closer to the title, CTA "Play/Buy" in the card.
Tags (new/top/jackpot) - visually secondary to the name.

7. 3 Entity Card (Game/Item)

Hero zone: name (H1), key facts (RTP/volatility/rating), primary CTA.
Details: Description/Characteristics/Feedback tabs.
Metadata: labels and legal text - at the bottom.

7. 4 Forms/wizards

Step header + short lead ("2 minutes, the card is not decommissioned").
Order of fields by frequency/mandatory.
CTA right/bottom, supporting actions - links bottom/left.
Errors - next to the field, briefly and on the case.

8) State prioritization

• Norm → Load → Success/Empty → Error.
• In loading - keep the frame (skeletons), CTA does not jump.
• In error - H1 changes to "what happened," CTA - "repeat/contact."

9) Content tokens and design system

• `font. heading. xl`, `font. body. md`, `space. 200`, `radius. md`, `elevation. sm`.
• Text roles: 'text. title`, `text. lead`, `text. secondary`, `text. meta`, `text. helper`.
• Color roles: 'accent/neutral/success/warn/danger' + 'levels' (100-900).
• Components: 'KPI. Card/Section. Title/Inline. Help/Meta. Line`.

10) Measurement and quality

• Scan Time (median to first meaningful click/action).
• Focus Order Errors (how many times the user "misses" the look).
• CTA Visibility% (how many saw CTA vs clicked).
• INP/CLS (hierarchy should not "jump" when loading).
• A/B: larger H1 vs stronger contrast; chip filters on top vs in the side panel.

• `first_focus_target`, `primary_cta_exposed/clicked`, `section_collapse_toggle`, `help_shown`.

11) Practices for iGaming (example)

Casino lobby: H1 "Lobby," "New/Live/Jackpots/Favorite" chips, then tiles. Each card contains a name, provider icon, CTA "Play"; new/jackpot tags - secondary.
Operator's dashboard: the first line - NGR/GGR/DAU/CR, the second - trends and anomalies, the third - tables.
Payment step: H1 "Replenishment," lead "No commission, instantly," list of conversion methods, minimum metatext on top.

12) Antipatterns

Ten accents of the same strength on the screen ("visual scream").
Titles as pictures/icons without text (breaks accessibility and search).
"Results in small print," and notifications in giant banners.
Auxiliary links next to the primary CTA with the same visual weight.

Inconsistent order: today "filters from above," tomorrow "from the left."

13) Implementation checklist

1. Define the screen target (H1 + 1-2 primary actions).
2. Mark the levels: primary/secondary/meta; pin to DS tokens.
3. Collect the typography scale and basic indentation rhythm.
4. Debug states (boot/blank/error) without STA/header jumps.
5. Conduct a 5-minute "scan test" with 3-5 people: what you noticed, where you clicked.
6. Connect telemetry (exposure CTA, scan time, focus order).
7. Fix the pattern in guides with before/after examples.

14) The bottom line

The content hierarchy is not a "large font for the main," but a system of solutions: typography, grid, color, indentation rhythm, order in the DOM and behavior in different states. When each level has its own role and weight, the interface becomes clear, fast and predictable, and users are confident in their actions.