Ієрархія контенту в UI

1) Навіщо потрібна ієрархія

• відповідає на три запитання за 3-5 секунд: що це? → що важливо? → що робити?;
• робить інтерфейс передбачуваним і легко сканованим;
• зменшує помилки і підвищує конверсію.

Принципи: сигнали> шум, послідовність> різноманітність, контекст> абсолютні правила.

2) Рівні важливості та структура

1. Навігаційний контекст (бренд, розділ, крихти/хлібні крихти).

2. H1 - мета екрану (максимально коротка, дієслівна при необхідності).

3. Lead/підзаголовок (один рядок вигоди або статусу).

4. Primary actions (1-2 ключові CTA).

5. Primary data (основні KPI, картки «першої лінії»).

6. Secondary data (деталі, фільтри, допоміжні таблиці).

7. Meta/Help (підказки, примітки, юридичний текст).

Правило: на одному екрані - один H1, не більше двох primary CTA.

3) Типографіка і ритм

Шкала шрифтів: H1 28-32, H2 22-24, H3 18-20, body 14-16, micro 12 (px/pt еквівалент в веб).
Міжрядкові інтервали: 1. 3–1. 5 для body, 1. 2–1. 3 для заголовків.
Ритм відступів: кратний базовій одиниці (4/8 px). Zagolovok↔blok: 16–24; абзаци: 8–12.
Контраст: мінімум WCAG AA; заголовок завжди контрастніший, ніж підписи/metа.
Колір vs вага: колір - акцент, не «милиця» замість розміру/жирності.

4) Сітка і макет

Сітка 12 колонок (desktop )/4-6 (mobile) з фіксованими гаттерами.
Visually first = first in DOM: допомагає скрінрідерам і SEO.
Вісь читання: зліва направо (LTR) або справа наліво (RTL) - дзеркалюйте порядок сигналів.
«Зони уваги»: верхня ліва/центр - заголовок і lead; «смуга дій» - поруч/під ним.

5) Візуальні сигнали пріоритету

Розмір і вага (типографіка) - первинний сигнал.
Позиція (вище/лівіше = важливіше при LTR).
Колір (акцент для CTA, статуси - по фіксованій палітрі).
Іконографія (тільки як підтримка тексту).
Відступи/обрамлення (картка з великим «повітрям» сприймається важливіше).
Динаміка (анімація ≤ 200 мс для залучення уваги без роздратування).

6) Прогресивне розкриття

• Above the fold - тільки контекст, мета і первинна дія.
• Розділи-акордеони/таби - вторинні дані.
• Деталізація по кліку (drill-down): картка → панель → модал.
• Інлайн-підказки замість перевантажених «хелпів».
• Скелетони/плейсхолдери зберігають структуру на час завантаження.

7) Ієрархія в типових екранах

7. 1 Дашборд

H1 + тимчасовий фільтр вгорі.
Смуга KPI (3-5 карток) - перша лінія.
Графіки/таблиці - друга лінія, сортування/фільтри поруч.
Аномалії/алерти - окрема колонка/стрічка, не змішувати з KPI.

7. 2 Каталог/лобі

H1 + швидкі фільтри/чіпи.
Сортування ближче до заголовка, CTA «Грати/Купити» в картці.
Мітки (нове/топ/джекпот) - візуально вторинні щодо назви.

7. 3 Картка сутності (гра/товар)

Герой-зона: назва (H1), ключові факти (RTP/волатильність/рейтинг), primary CTA.
Деталі: вкладки «Опис/Характеристики/Відгуки».
Метадані: мітки і юридичний текст - внизу.

7. 4 Форми/майстри

Заголовок кроку + короткий lead («2 хвилини, карта не списується»).
Порядок полів за частотою/обов'язковістю.
CTA справа/знизу, допоміжні дії - посиланнями внизу/зліва.
Помилки - поруч з полем, коротко і по справі.

8) Пріоритизація станів

• Норма → Завантаження → Успіх/Порожньо → Помилка.
• У завантаженні - зберігайте каркас (скелетони), CTA не скаче.
• У помилці - H1 змінюється на «що сталося», CTA - «повторити/зв'язатися».

9) Контент-токени та дизайн-система

• `font. heading. xl`, `font. body. md`, `space. 200`, `radius. md`, `elevation. sm`.
• Ролі тексту: `text. title`, `text. lead`, `text. secondary`, `text. meta`, `text. helper`.
• Ролі кольору: 'accent/neutral/success/warn/danger'+ «рівні» (100-900).
• Компоненти: `KPI. Card/Section. Title/Inline. Help/Meta. Line`.

10) Вимірювання та якість

• Scan Time (медіана до першого осмисленого кліка/дії).
• Focus Order Errors (скільки разів користувач «промахується» поглядом).
• CTA Visibility% (скільки бачили CTA vs клікнули).
• INP/CLS (ієрархія не повинна «стрибати» при завантаженні).
• A/B: крупніше H1 vs сильніше контраст; чіп-фільтри зверху vs в бічній панелі.

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

11) Практики для iGaming (приклад)

Лобі казино: H1 «Лобі», чіпи «Нові/Live/Джекпоти/Улюблені», потім плитки. У кожній картці - назва, іконка провайдера, CTA «Грати»; мітки «нове/джекпот» - вдруге.
Дашборд оператора: перший рядок - NGR/GGR/DAU/CR, другий - тренди і аномалії, третій - таблиці.
Платіжний крок: H1 «Поповнення», lead «Без комісії, миттєво», список методів з конверсії, мінімум метатексту зверху.

12) Антипатерни

Десять однакових за силою акцентів на екрані («візуальний крик»).
Заголовки як картинки/іконки без тексту (ламає доступність і пошук).
«Підсумки дрібним шрифтом», а повідомлення гігантськими банерами.
Допоміжні посилання поруч з primary CTA тією ж візуальною вагою.
Неузгоджений порядок: сьогодні «фільтри зверху», завтра «зліва».

13) Чек-лист впровадження

1. Визначте мету екрану (H1 + 1-2 первинних дії).
2. Розмітьте рівні: primary/secondary/meta; закріпіть в токенах DS.
3. Зберіть шкалу типографіки і базовий ритм відступів.
4. Налагодьте стану (завантаження/порожньо/помилка) без стрибків СТА/заголовків.
5. Проведіть 5-хв «скан-тест» з 3-5 людьми: що помітили, куди клікнули.
6. Підключіть телеметрію (exposure CTA, scan time, focus order).
7. Зафіксуйте патерн в гайдлайнах з прикладами «до/після».

14) Підсумок

Ієрархія контенту - це не «великий шрифт для головного», а система рішень: типографіка, сітка, колір, ритм відступів, порядок в DOM і поведінка в різних станах. Коли кожен рівень має свою роль і вагу - інтерфейс стає зрозумілим, швидким і передбачуваним, а користувачі - впевненими у своїх діях.