Иерархия контента в UI

1) Зачем нужна иерархия

• отвечает на три вопроса за 3–5 секунд: что это? → что важно? → что делать?;
• делает интерфейс предсказуемым и легко сканируемым;
• уменьшает ошибки и повышает конверсию.

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

2) Уровни важности и структура

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

2. H1 — цель экрана (максимально короткая, глагольная при необходимости).

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

4. Primary actions (1–2 ключевые CTА).

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). Заголовок↔блок: 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. Отладьте состояния (загрузка/пусто/ошибка) без скачков CTA/заголовков.
5. Проведите 5-мин «скан-тест» с 3–5 людьми: что заметили, куда кликнули.
6. Подключите телеметрию (exposure CTA, scan time, focus order).
7. Зафиксируйте паттерн в гайдлайнах с примерами «до/после».

14) Итог

Иерархия контента — это не «крупный шрифт для главного», а система решений: типографика, сетка, цвет, ритм отступов, порядок в DOM и поведение в разных состояниях. Когда каждый уровень имеет свою роль и вес — интерфейс становится понятным, быстрым и предсказуемым, а пользователи — уверенными в своих действиях.