Visual hierarchy and priority

1) What is the visual hierarchy

Visual hierarchy is a system of emphasis in the interface that distributes the user's attention and makes the path to the target action (signup, deposit, game search, filter, output) fast and conflict-free. The hierarchy is constructed through contrast, scale, position, color, information density, motion, and white space.

The goal: to reduce "cognitive costs" and increase the share of First Meaningful Click by the necessary elements.

2) Business impact and KPIs

• Target CTA conversion (registration, deposit, add to favorites)
• Time to Value
• Confusion Rate
• Bounce, scrolling depth and hold

• FMC (First Meaningful Click):% of users who clicked on the key CTA ≤ N seconds after loading.
• TTV (Time to Value): time from login to key value (e.g. find and run slot).
• CTR of the key CTA on the screens: home, catalog, game page, box office.
• Ratio of primary/secondary clicks (discipline of attention).
• Scroll Depth to block with offer/tournament.

3) Principles of visual hierarchy (core)

1. Contrast and scale: more important - larger and more contrasting.
2. Position and reading order: top/left and "first screen" receive priority.
3. White space: air = importance. Too tight - priority is lost.
4. Color and saturation: color accent - "attention currency"; save her.
5. Form and iconography: Button shape, markers, status icons enhance distinctiveness.

6. Motion and microanimation: rare, brief, whole accents; avoid "fair."

7. Grouping (gestalt): proximity, similarity, closure, alignment, common area.
8. Information density: on the critical path - only the right one, the rest is in the "weak" layers.

4) Priority Matrix (P1-P4)

P1 (Critical-Primary): 1-2 CTA/items per screen. Large size, bright contrast, fixed position.
P2 (Important supporting): filters, quick tags, secondary CTAs. Medium contrast, next to P1.
P3 (Help/Context): hints, ratings, mini-cards. Calm style, compact.
P4 (Background/Reference): help, footer, legal links. Small contrast and size.

Rule: no more than one P1 on one screen. If P1s compete, they are no longer P1s.

5) Layers of hierarchy

Global: top-level navigation, global search, notifications.
Page: hero-block, H1/H2, key banners/offers.
Component: game cards, box office forms, tournament tables.
Intra-component: field order, signatures, statuses, micro-hints.

6) Typical scenarios (iGaming-fitting)

• P1: "Create account "/" Log in "(large button, fixed position).
• P2: Social logins, "Show password," password policy.
• P3: Links "Forgot your password? , "security tips.

• P1: Top Up/Display + selected method.
• P2: Amount, quick presets, fees/limits nearby.
• P3: Concealed detailed method description, timing.

• P1: Search + key filters (Provider, Volatility, RTP, New/Hit).
• P2: Segments/Tags (Megaways, Jackpot, Buy Feature).
• P3: Secondary sorting, card badges (new, hit, tournaments).

• P1: Join/Prize Details.
• P2: Leaderboard (first 5), countdown timer.
• P3: Complete click/turn rules.

7) Typography and grid

Modular scale: 12-14 (text), 16 (stem), 20-24 (subheadings), 28-40 (H1/Hero).
Basis line: 4/8px steps; vertical rhythm = readability.
Line length: 45-75 characters for text; 20-40 for card descriptions.
Line-to-line: 120-150% for text, 110-120% for titles.

8) Colour and contrast

Text contrast: not lower than AA level landmarks for texts on key paths.
Color roles: Primary (CTA), Accent (attention), Info/Success/Warning/Danger (statuses).

Dark theme: to strengthen the contrasts of borders and texts, to reduce the saturation of extensive color planes; avoid "neon pain."

The states of the elements: default/hover/focus/active/disabled - are distinguishable.

9) Accents and buttons

Primary CTA: one per screen, noticeable color/scale, sufficient fields (min-tap 44 × 44px).
Secondary/tertiary: smooth tones, contour styles.
Spinner ≠ hierarchy: progress gives feedback, but should not interrupt P1.

10) Attention mechanics and speed

F-/Z-patterns: Place P1 where the gaze is expected to pass.
Hick's Law: Less is Equal Faster - Shorten First Step Options.
Fitts' law: bigger and closer is easier to click; increase hit area important.

Serial prompts: Teach by steps, not by "wall of text."

11) Home screen/landing pages

Hero block: short offer + single P1.
Visual "reiki": 3-4 sections maximum to the first scroll (categories, new items, tournament).
Social proof: provider badges, "hits of the week" - P2, do not interrupt P1.

12) Dashboards and tables

First screen: 1-2 key KPIs large, sparklines + trend badges.
Table: align columns by importance, "freeze" key columns, use the density switch (compact/standard).
Empty states: explain the next step (P1 button + prompt).

13) Mobile vs Desktop

Mobile: one P1 is strictly above the scrolling line, tab bar ≤5 points, floating CTA is acceptable for checkout/play.
Desktop: container width 1200-1440px; Limit the length of rows avoid "stretching" P1.

14) Localization, numbers, RTL

Take into account the length of the lines (German/Turkish), different currencies and grades.
RTL: Mirror the grid and accent order, but retain P1 dominance.

15) A/B and hierarchy metrics

• A 12-16% increase in P1 size/contrast → an increase in FMC and CTR.
• Moving filters (P2) closer to search → reducing game search TTV.
• The reduction of options in the first step of the cash register → the completion above.

Track: FMC (N seconds), CTR P1, Scroll Depth to target block, TTV, Confusion Rate (errors/returns), Rage Clicks.

16) Audit procedure (checklist)

1. Name P1 on each key screen - are there exactly one?
2. P2 elements support P1, do not argue with it in color/contrast?
3. Path of Sight: P1 hits the first 3 focuses?
4. Is text/ACTA contrast sufficient in light/dark themes?
5. Minimum hit areas met?
6. Noise: can you remove 20% of the elements without losing conversion?
7. Empty states lead to action?
8. Are the states (hover/focus/active) distinguishable and accessible?
9. Is the P1 visible without scrolling on the mobile?
10. Are the metrics connected and readable in the funnel?

17) Anti-patterns

Two or more Primary on one screen.
"Flashy" banners overlapping P1.
Gray on gray (insufficient contrast).
Icons without text on the critical path.
Overloaded cards: 6 + badges, 4 lines of description.
Animations without a target (flashing/endless).

18) Design system: specification of priorities

Tokens: 'color. primary`, `color. accent`, `elevation. p1`, `radius. lg`, `space. 8/12/16`.
Dimension roles: 'btn. p1. lg`, `btn. p2. md`, `text. h1/h2/body`, `badge. status`.
Layers/Z-index: P1 over content modules, but below system models.
States: State table with examples (screen-guide).

19) Prioritization algorithm (pseudo)

1. Define the purpose of the screen (one sentence).
2. Assign P1 (one element), design as the most noticeable.
3. Form P2 (2-5 elements) next to/after P1.
4. Hide/collapse the P3-P4.
5. Complete the affordability and mobility checklist.
6. Check the path and time-to-P1 (click ≤3 sec).
7. Start A/B, observe FMC/TTV/CTR.

20) Microcopies and texts

H1 headings - brief, verb/value: "Start playing in 10 seconds."

CTA - action and result: "Replenish in a minute," "Play now."

Tips - on the case, maximum one line, without jargon.

21) Acceptance Criteria for Hierarchy Tasks

A single P1 is defined on the screen; see without scrolling (mobile/desktop).
P1 contrast corresponds to guidelines; dimensions hit area ≥44×44px.
P2 is visually weaker than P1 (by 1-2 contrast/scale steps).
The states of the elements are distinguishable; there are keyboard focus styles.
Connected analytics events for FMC/TTV/CTR/Scroll Depth.

22) Short Summary (TL; DR)

Hierarchy is the discipline of attention. One explicit P1 per screen, support via P2, less noise, sufficient contrast and readable typography. Test yourself with a checklist, measure FMC/TTV/CTR, and confirm hypotheses with A/B tests.