Візуальна ієрархія та пріоритет

1) Що таке візуальна ієрархія

Візуальна ієрархія - це система розстановки акцентів в інтерфейсі, яка розподіляє увагу користувача і робить шлях до цільової дії (signup, депозит, пошук гри, фільтр, висновок) швидким і безконфліктним. Ієрархія будується через контраст, масштаб, позицію, колір, щільність інформації, рух і білий простір.

Мета: скоротити «когнітаційні витрати» і збільшити частку First Meaningful Click на потрібні елементи.

2) Бізнес-ефект і KPI

• Конверсію цільових CTA (реєстрація, депозит, додати в обране)
• Швидкість завершення завдань (Time to Value)
• Зниження показника плутанини (Confusion Rate)
• Зменшення відмов (Bounce), зростання глибини скролла і утримання

• FMC (First Meaningful Click): % користувачів, які клікнули по ключовому CTA ≤ N секунд після завантаження.
• TTV (Time to Value): час від входу до досягнення ключової цінності (наприклад, знайти і запустити слот).
• CTR ключового CTA на екранах: домашній, каталог, сторінка гри, каса.
• Відношення первинних/вторинних кліків (дисципліна уваги).
• Scroll Depth до блоку з оффером/турніром.

3) Принципи візуальної ієрархії (ядро)

1. Контраст і масштаб: важливіше - крупніше і контрастніше.
2. Позиція та порядок читання: верх/ліво і «перший екран» отримують пріоритет.
3. Білий простір: повітря = важливість. Занадто тісно - втрачається пріоритет.
4. Колір і насиченість: колірний акцент - «валюта уваги»; заощаджуємо її.
5. Форма та іконографія: форма кнопок, маркери, значки статусів підсилюють різницю.
6. Рух і мікроанімація: рідкісні, короткі, цілісні акценти; уникати «ярмарку».
7. Угруповання (гештальт): близькість, схожість, замкнутість, вирівнювання, загальна область.
8. Щільність інформації: на критичному шляху - тільки потрібне, інше в «слабких» шарах.

4) Матриця пріоритетів (P1-P4)

P1 (Критично-первинне): 1-2 СТА/елемента на екран. Великий розмір, яскравий контраст, фіксована позиція.
P2 (Важлива підтримка): фільтри, швидкі теги, вторинні CTA. Середній контраст, поруч з P1.
P3 (Допомагає/контекст): підказки, рейтинги, міні-картки. Спокійний стиль, компактно.
P4 (Фонове/референс): довідка, футер, юридичні посилання. Малий контраст і розмір.

Правило: на одному екрані не більше одного P1. Якщо P1 конкурують - вони вже не P1.

5) Шари ієрархії

Глобальний: навігація верхнього рівня, глобальний пошук, сповіщення.
Сторінковий: герой-блок, H1/H2, ключові банери/оффери.
Компонентний: картки ігор, форми каси, турнірні таблиці.
Внутрішньокомпонентний: порядок полів, підписи, статуси, мікро-підказки.

6) Типові сценарії (iGaming-примірка)

• P1: «Створити акаунт «/» Увійти »(велика кнопка, фіксована позиція).
• P2: Соц-логіни, «Показати пароль», політика пароля.
• P3: Лінки "Забули пароль? ", підказки безпеки.

• P1: «Поповнити «/» Вивести »+ обраний метод.
• P2: Сума, швидкі пресети, комісії/ліміти поруч.
• P3: Приховується докладний опис методу, терміни.

• P1: Пошук + ключові фільтри (Провайдер, Волатильність, RTP, Нові/Хіт).
• P2: Сегменти/теги (Megaways, Jackpot, Buy Feature).
• P3: Вторинне сортування, карткові бейджі (новинка, хіт, турніри).

• P1: Приєднатися/Подробиці призу.
• P2: Таблиця лідерів (перші 5), таймер зворотного відліку.
• P3: Повні правила по кліку/розвороту.

7) Типографіка та сітка

Модульна шкала: 12-14 (текст), 16 (основа), 20-24 (підзаголовки), 28-40 (H1/Hero).
Лінія базису: 4/8px кроки; вертикальний ритм = читаність.
Довжина рядка: 45-75 символів для тексту; 20-40 для описів карток.
Міжрядкові: 120-150% для тексту, 110-120% для заголовків.

8) Колір і контраст

Контраст тексту: не нижче орієнтирів рівня AA для текстів на ключових шляхах.
Колірні ролі: Primary (CTA), Accent (увага), Info/Success/Warning/Danger (статуси).
Дарк-тема: посилити контрасти меж і текстів, зменшити насиченість великих кольорових площин; уникати «неон-болю».
Стани елементів: default/hover/focus/active/disabled - помітні.

9) Акценти і кнопки

Primary CTA: один на екран, помітний колір/масштаб, достатні поля (min-tap 44 × 44px).
Secondary/tertiary: гладкі тони, контурні стилі.
Спінер ≠ ієрархія: прогрес дає зворотний зв'язок, але не повинен перебивати P1.

10) Механіки уваги і швидкість

F-/Z-патерни: розміщуйте P1 там, де погляд очікувано проходить.
Закон Хіка: менше дорівнює швидше - скорочуйте варіанти першого кроку.
Закон Фіттса: крупніше і ближче - простіше клік; збільшуйте hit area важливого.
Серійні підказки: навчайте за кроками, а не «стіною тексту».

11) Домашній екран/лендінги

Герой-блок: короткий оффер + єдиний P1.
Візуальні «рейки»: 3-4 секції максимум до першого скролла (категорії, новинки, турнір).
Соціальний доказ: бейджі провайдерів, «хіти тижня» - P2, не перебивають P1.

12) Дашборди і таблиці

Перший екран: 1-2 ключових KPI великими, спарклайни + тренд-бейджі.
Таблиця: вирівняти за важливістю стовпці, «заморозити» ключові колонки, використовувати density перемикач (компакт/стандарт).
Порожні стани: пояснити наступний крок (P1-кнопка + підказка).

13) Мобільний vs Desktop

Мобайл: один P1 строго вище лінії скролла, таб-бар ≤5 пунктів, floating CTA допустимо для каси/гри.
Десктоп: ширина контейнера 1200-1440px; обмежте довжину рядків; уникайте «розтяжки» P1.

14) Локалізація, цифри, RTL

Враховувати довжину рядків (німецький/турецький), різні валюти і розряди.
RTL: дзеркалити сітку і порядок акцентів, але зберігати P1-домінування.

15) A/B і метрики ієрархії

• Збільшення розміру/контрасту P1 на 12-16% → зростання FMC і CTR.
• Перенесення фільтрів (P2) ближче до пошуку → зниження TTV пошуку гри.
• Скорочення варіантів на першому кроці каси → вище завершення.

Відстежувати: FMC (N секунд), CTR P1, Scroll Depth до цільового блоку, TTV, Confusion Rate (помилки/повернення), Rage Clicks.

16) Процедура аудиту (чек-лист)

1. Назвіть P1 на кожному ключовому екрані - їх рівно один?
2. P2-елементи підтримують P1, не сперечаються з ним за кольором/контрастом?
3. Шлях погляду: P1 потрапляє в перші 3 фокусу?
4. Контраст тексту/СТА достатній у світлій/темній темах?
5. Мінімальні hit areas дотримані?
6. Шум: можна видалити 20% елементів без втрати конверсії?
7. Порожні стани ведуть до дії?
8. Стани (hover/focus/active) помітні і доступні?
9. На мобайлі P1 видно без скролла?
10. Метрики підключені і читаються в воронці?

17) Анти-патерни

Два і більше Primary на одному екрані.
«Кричущі» банери, що перекривають P1.
Сірий на сірому (недостатній контраст).
Іконки без тексту на критичному шляху.
Перевантажені картки: 6 + бейджів, 4 рядки опису.
Анімації без мети (миготливі/нескінченні).

18) Дизайн-система: специфікація пріоритетів

Токени: `color. primary`, `color. accent`, `elevation. p1`, `radius. lg`, `space. 8/12/16`.
Розмірні ролі: `btn. p1. lg`, `btn. p2. md`, `text. h1/h2/body`, `badge. status`.
Шари/Z-index: P1 поверх модулів контенту, але нижче системних модалок.
Стани: таблиця станів з прикладами (скрін-гайд).

19) Алгоритм пріоритизації (псевдо)

1. Визначте мету екрану (одне речення).
2. Призначте P1 (один елемент), оформіть як найпомітніший.
3. Сформуйте P2 (2-5 елементів) поруч/після P1.
4. Сховайте/згорніть P3-P4.
5. Пройдіть чек-лист доступності та мобільності.
6. Перевірте шлях погляду і time-to-P1 (клік ≤3 сек).
7. Запустіть A/B, спостерігайте FMC/TTV/CTR.

20) Мікрокопія і тексти

Заголовки H1 - короткі, дієслово/цінність: «Почніть грати за 10 секунд».
CTA - дія і результат: «Поповнити за хвилину», «Грати зараз».
Підказки - по справі, максимум один рядок, без жаргону.

21) Acceptance Criteria для завдань з ієрархії

На екрані визначено єдиний P1; бачимо без скролла (мобайл/десктоп).
Контраст P1 відповідає гайдлайнам; розміри hit area ≥44×44px.
P2 візуально слабкіше P1 (на 1-2 ступені контрасту/масштабу).
Стани елементів помітні; є фокус-стилі клавіатури.
Підключені події аналітики для FMC/TTV/CTR/Scroll Depth.

22) Коротке резюме (TL; DR)

Ієрархія - це дисципліна уваги. Один явний P1 на екран, підтримка через P2, менше шуму, достатній контраст і читана типографіка. Перевіряйте себе чек-листом, вимірюйте FMC/TTV/CTR і підтверджуйте гіпотези A/B-тестами.