Empty states і UX-підказки

1) Навіщо потрібні порожні стани

• пояснює, чому порожньо,
• показує, що робити далі,
• пропонує безпечний перший крок,
• знижує тривогу і економить час підтримки.

2) Типологія empty-станів

1. Перший запуск (first-time) - користувач ще нічого не зробив.
2. Немає даних (zero data) - сутності не створені або список порожній.
3. Фільтри/пошук (no results) - умови виключили всі.
4. Помилка/тимчасова недоступність - мережа/сервер, але дані є в принципі.
5. Немає прав/обмеження - доступ заборонений, потрібно КУС/роль/ліміт.
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 Помилка/недоступність

"Ми зіткнулися з проблемою. Спробуйте пізніше" + "Повторити "/" Статус системи".