Empty states и UX-подсказки

1) Зачем нужны пустые состояния

• объясняет, почему пусто,
• показывает, что делать дальше,
• предлагает безопасный первый шаг,
• снижает тревогу и экономит время поддержки.

2) Типология empty-состояний

1. Первый запуск (first-time) — пользователь еще ничего не сделал.
2. Нет данных (zero data) — сущности не созданы или список пуст.
3. Фильтры/поиск (no results) — условия исключили все.
4. Ошибка/временная недоступность — сеть/сервер, но данные есть в принципе.
5. Нет прав/ограничения — доступ запрещен, требуется KYC/роль/лимит.
6. Техническое обслуживание — плановые работы, ожидание.

3) Структура карточки empty

Иконка/иллюстрация (не перегружать; контраст ≥ AA).
Заголовок в одну строку: «Здесь пока пусто».
Причина/контекст: «Вы еще не добавляли…» / «Фильтр не нашел совпадений».
1–2 действия (CTA): первичное (основной сценарий), вторичное (альтернатива).
Линк на помощь (опционально).
Уровень страницы: сохраняйте привычную навигацию и фильтры — не превращайте экран в тупик.

html
<section class="empty" role="region" aria-labelledby="empty-title">
<svg aria-hidden="true" class="empty__icon"><!-- … --></svg>
<h2 id = "empty-title "> It's empty for now </h2>
<p> Create the first campaign or change the filters. </p>
<div class="actions">
<button class =" btn btn--primary "> Create campaign </button>
<button class =" btn btn--ghost "> Reset Filters </button>
</div>
<a class =" help" href = "/help/campaigns "> How it works </a>
</section>

4) Тон и текст (UX-копирайтинг)

Четко и доброжелательно. Избегайте «Ошибка 0x…».

Причина → действие. «Фильтр “VIP” исключил все записи. Сбросить фильтр?»

Без вины. Не обвиняйте пользователя в пустоте.
Одна мысль — одно предложение.
Локализация: избегайте культурных метафор; закладывайте +20–30% длины текста.

5) Иллюстрации и визуал

Нейтральные, ненавязчивые; в dark-теме повышайте светлоту иллюстраций.
Не используйте иллюстрации как единственный носитель смысла.
Масштаб фиксирован; не ломайте сетку и базовую линию.

6) CTA и альтернативы

Первичный CTA — главный следующий шаг (создать/депозит/подписаться).
Вторичный — «посмотреть демо», «импорт», «сбросить фильтры».
Лимит на выбор: до 2 CTA; остальное — в «Еще».
При рисках/платежах — прозрачный текст про последствия и отмену.

7) Пустые состояния по сценариям

7.1 Первый запуск

Гайд-чеклист из 3–5 шагов: «Добавьте способ оплаты», «Выберите провайдера».
Кнопка «Пропустить» + ссылка на гайд.

7.2 Нет данных

Короткое объяснение «почему пусто» + CTA «Создать» / «Импортировать».
Подсказка: «Можно загрузить CSV» (линк на шаблон).

7.3 Фильтры/поиск

Покажите какие фильтры активны и кнопку «Сбросить».
Предложите близкие совпадения или альтернативные запросы.

7.4 Ошибка/недоступность

«Мы столкнулись с проблемой. Попробуйте позже» + «Повторить» / «Статус системы».