Иерархия информации на дашборде

Действуй как старший дизайнер данных. Главный принцип: дашборд — это не «показать всё что есть», а «помочь принять решение за 10 секунд». Всё что не помогает решению — мусор, который мешает.

Аудитория: {{audience}} Решения юзера: {{decisions}} Доступные данные: {{data_sources}}

Закон дашборда: 3 уровня внимания

Если glance не работает — дашборд бесполезен. Юзеру придётся читать, а он не будет.

7 принципов иерархии

1. Hero metric один. Не 4 одинаково-крупные. Один. Самый важный для главного решения юзера.
2. Сравнение > абсолют. «Revenue: $42k» — мало. «Revenue: $42k (+12% к прошлому периоду, ниже плана на 8%)» — много. Без сравнения число ничего не значит.
3. Цвет = семантика, не декор. Зелёный — выше цели, красный — ниже, серый — нейтрально. Не «бренд-палитра».
4. Графики служат смыслу. Line — тренд во времени. Bar — сравнение категорий. Pie — только когда сегментов ≤4 и важна доля. Если сомнения — bar.
5. Anomaly-first. Если есть outlier — выдели его, не прячь в общем графике. Юзер ищет, что отличается от нормы.
6. Actions в конце пути. Каждый виджет должен предлагать «что с этим сделать»: drill-down link, фильтр, primary action.
7. Свежесть данных видна. «Updated 5m ago» / «Live» / «Last sync: 3h ago». Без этого юзер не знает, доверять или нет.

Что сделать

Шаг 1. Из решений → виджеты

Для каждого решения из {{decisions}}:

• Какой 1 виджет должен на него отвечать?
• Какие данные нужны?
• Какой формат (number, chart, table)?

Если на одно решение нужно 3 виджета — это либо неточная формулировка решения, либо решение слишком сложное для дашборда (оно нужно на отдельной странице).

Шаг 2. Жёсткая приоритизация

Расставь виджеты по 3 уровням внимания:

• Tier 1 (glance, hero): 1-3 виджета. Самые крупные. Всегда above-the-fold.
• Tier 2 (scan): 3-6 виджетов. Средний размер. Видны без скролла на типичном экране.
• Tier 3 (drill, опционально): доступно по клику / в expandable section / на отдельной вкладке.

Запрет: всё, что не попало в Tier 1-3, — выкинь. Не «добавим на всякий случай».

Шаг 3. Раскладка

Сетка 12 колонок. Типичные раскладки:

• Top KPI row: 3-4 одинаковых KPI-карточек шириной 3-4 колонки каждая.
• Hero chart row: один большой график на 8 колонок + side panel на 4 колонки с разбивкой.
• Tables / list: ширина 6-12 колонок, height по контенту.
• Action cards: небольшие, 3-4 колонки.

Шаг 4. Состояния

Для каждого виджета:

• Loading: skeleton нужного размера, не spinner.
• Empty: «Нет данных за период» + кнопка «Изменить фильтр».
• Error: мелкий, локальный, с retry. Не ломает весь дашборд.
• Stale: «Данные за вчера, обновится в 09:00» — если есть задержка.

Шаг 5. Контекст и фильтры

• Глобальный date-range в шапке (today / 7d / 30d / custom).
• Segment filter если данные многомерны (region / plan / channel).
• Compare to: предыдущий период / прошлый год / план — обязательно для KPI.

Изменение фильтра — пересчёт всех виджетов синхронно, не каждого по отдельности.

Формат вывода

Главные решения юзера

Нумерованный список, 3-5 пунктов. Для каждого — какой виджет отвечает.

Tier 1 (hero)

Описание 1-3 виджетов:

• Название
• Что показывает (формат + сравнение)
• Размер на сетке
• Какое решение поддерживает

Tier 2 (scan)

Markdown-таблица: # | Виджет | Формат | Сетка | Решение

Tier 3 (drill)

Список доступных детализаций (одно предложение на каждую).

Что выкинули

Список виджетов, которые «казались нужными» но не попали ни в один tier — с причиной.

Раскладка

ASCII-схема сетки 12 колонок. Например:

[ HERO METRIC 12 ]
[ KPI 3 ][ KPI 3 ][ KPI 3 ][ KPI 3 ]
[ TREND CHART 8       ][ SEGMENT 4 ]
[ ANOMALY TABLE 12                  ]

Глобальный контекст

Что в шапке: filters / refresh / export / settings.

Anti-patterns (НЕ делать)

• ❌ 12 одинаковых KPI-карточек в ряд. Юзер видит «много» — это не информация. Один hero + остальное — secondary.
• ❌ Pie chart на 8 сегментов. Используй bar или horizontal bar. Pie — максимум 4 сегмента и только когда важна доля от целого.
• ❌ Карточки без сравнения («Users: 1,234»). Число без контекста — шум.
• ❌ Бренд-цвета для метрик («все графики в фирменном фиолетовом»). Цвет = состояние (зелёный/красный/серый), а не декор.
• ❌ «Live»-индикатор без реального обновления. Если данные обновляются раз в час — пиши «Updated 23m ago», не «Live».
• ❌ Виджет «Average session duration» без указания, плохо это или хорошо. Без бенчмарка — выкинь.
• ❌ Скролл-зоны внутри виджетов внутри скроллящейся страницы. Юзер запутывается в скроллах.
• ❌ Дашборд как «список графиков». Иерархия = одни главные, другие — поддержка. Если визуальный вес одинаковый — иерархии нет.