Empty state для dashboard в day-zero

Ты — product designer. Задача: спроектировать day-zero empty state для {{dashboard_type}}. Primary action: {{primary_action}}.

Empty state — самый недооценённый экран в продукте. Это первое впечатление 100% новых пользователей. "Welcome to your dashboard. No data yet." — это похороны activation rate.

Что не делать

Anti-patterns first — потому что они везде:

• ❌ "No data" с серой иконкой в центре экрана — нулевое объяснение, нулевая помощь
• ❌ "Add your first X" без объяснения, зачем это и что произойдёт
• ❌ Empty dashboard со всеми графиками-плейсхолдерами (зелёные линии в никуда) — нечего читать, непонятно что появится
• ❌ Дашборд закрытый модалкой "Let's get started!" на 5 шагов — пользователь хотел увидеть продукт, не tutorial
• ❌ Скрыть все элементы UI до первого data point — пользователь думает что продукт сломан
• ❌ Sample data без явной пометки — пользователь думает что это его данные, путается

Стратегия 1: Sample data (с явной пометкой)

Показать дашборд с демо-данными, обозначить что это пример.

Когда подходит:

• Аналитика, метрики, графики — пользователь не понимает, что увидит, без примера
• Сложный visualization — пример объясняет лучше чем текст
• Пользователь оценивает продукт ("если бы мои данные были здесь, как бы это выглядело?")

Как делать:

• Чёткая визуальная пометка "Sample data" в каждой карточке (badge, watermark, banner)
• Кнопка "Use my own data" в видном месте (top right или primary CTA)
• Данные realistic, не "lorem ipsum для чисел" (не 100, 200, 300)
• Сценарий правдоподобный (revenue растёт, потом плато, потом падение — realistic flow)
• Не показывать sample вечно — через X действий или Y дней автопереход на реальные

Anti-patterns:

• ❌ Sample data без пометки — пользователь путается, теряет доверие когда понимает
• ❌ Sample data с грустными цифрами (всё падает) — депрессивно для нового пользователя
• ❌ Sample data из чужой реальной компании ("Acme Inc Revenue") — выглядит как утечка

Стратегия 2: Placeholder + explainer

Показать пустой дашборд, но с объяснением что будет.

Когда подходит:

• Простой dashboard (1-3 ключевых блока)
• Понятная структура без сложной visualization
• Пользователь точно понимает domain (например, CRM для sales — все знают что такое pipeline)

Как делать:

• Каждый widget имеет своё empty state (не один общий)
• Иллюстрация / icon уместная (не generic spinner)
• Один-два sentence объясняющие что появится здесь
• Inline action для конкретного widget (не одна кнопка для всего дашборда)

Anti-patterns:

• ❌ Один общий empty state на весь дашборд — теряются нюансы
• ❌ "No projects yet" одно слово — что я должен сделать?
• ❌ Стоковая illustration на всё — нет связи с действием

Стратегия 3: Onboarding integration

Empty state — часть guided onboarding.

Когда подходит:

• Сложный продукт с multiple key actions
• Пользователю нужно пройти X шагов до первого value (slack: создать channel, invite team, send first message)
• Есть значимое разделение между "exploration" и "setup"

Как делать:

• Progress indicator ("3 of 5 steps to your first insight")
• Каждый шаг — конкретное действие (не "read this article")
• Можно skip каждый шаг (пользователь — не заложник)
• После завершения — celebration moment + transition в "real" dashboard
• Возможность вернуться к setup из main UI (не "теперь это потеряно")

Anti-patterns:

• ❌ Forced linear flow без skip — пользователь leaves
• ❌ Onboarding 10+ шагов — никто не дойдёт до конца
• ❌ "Tutorial mode" который нельзя выйти, пока не пройден — frustrating
• ❌ Без сохранения прогресса — после refresh всё с начала

Стратегия 4: Action vs explainer

Главный вопрос: что primary в empty state — кнопка или объяснение?

Action-first (когда первый шаг очевиден):

• Большая primary CTA в центре
• Объяснение secondary, короткое
• Пример: "Connect your first integration" + 1 sentence

Explainer-first (когда первый шаг неочевиден):

• Видео / GIF / animation объясняющее value
• CTA secondary, после explainer
• Пример: "Here's what your dashboard will show" + видео + "Get started"

Hybrid (когда оба важны):

• Split layout: explainer слева, action справа
• Или: explainer сверху, action снизу (mobile-first)
• Risk: визуальная конкуренция за внимание

Decision matrix

Используй эту таблицу для выбора стратегии:

Component checklist

Для каждого empty state в {{dashboard_type}}:

• Illustration / icon уместное (не stock)
• Headline понятный (не "No data")
• 1-2 sentence объяснение что появится здесь
• Primary CTA (один, не три)
• Secondary action (Learn more / Skip / See sample)
• Loading state (что показать пока подгружается)
• Error state (что показать если интеграция упала)
• Transition state (что показать когда данные начинают появляться)
• Real content preview (как будет выглядеть с данными)

Anti-patterns общие

• ❌ Empty state без CTA — что я должен сделать?
• ❌ Три equally weighted CTA — параllysis
• ❌ Sample data без disclaimer — потеря доверия
• ❌ Skip onboarding без возможности вернуться — пользователь потерян
• ❌ Не показывать ценность до setup ("setup first, see value later") — высокий drop-off
• ❌ Empty state с серьёзным тоном для playful продукта (или наоборот) — inconsistency

Output

Создай:

1. Empty state spec для каждого ключевого блока в {{dashboard_type}}
2. Decision document: какая стратегия и почему
3. Mockups для всех состояний (empty, loading, error, transition, populated)
4. Copy doc с финальными текстами
5. Metrics для отслеживания (activation rate, time-to-first-data, skip rate)
6. A/B test plan если возможно (Sample data vs Onboarding, например)

Целься в empty state, который не "извиняется за отсутствие данных", а "продаёт ценность того, что будет после {{primary_action}}".