Дизайн пустих станів (Empty States) сторінок сайту
Empty state — це те, що бачить користувач, коли даних ще немає, список порожній, пошук нічого не знайшов або трапилася помилка. Більшість проектів додають цей дизайн в останню мить, і це помітно: порожній білий екран або єдиний рядок «Нічого не знайдено» — упущена можливість спрямувати користувача.
Типи пустих станів
Не всі empty state однакові. Важливо розрізняти контекст:
First-run empty state — користувач щойно зареєструвався, даних ще немає. Завдання: пояснити цінність розділу та дати перший крок. Наприклад, у розділі «Мої проекти» — ілюстрація + «Створіть перший проект» + кнопка створення.
User-generated empty state — користувач видалив все або очистив список. Тон інший: коротший, без пояснень, просто заклик до дії.
Search/filter empty state — запит не дав результатів. Підтверджуємо, що зрозуміли запит, пропонуємо змінити фільтри або подивитися інше.
Error empty state — дані не завантажилися через помилку. Потрібна кнопка «Повторити» та, якщо можливо, пояснення причини.
Структура компонента
Типовий empty state — вертикально вирівняний блок у центрі контейнера:
- Іконка або ілюстрація (48–120px залежно від контексту)
- Заголовок: 4–8 слів, конкретно про ситуацію
- Опис: 1–2 речення, що робити
- CTA: кнопка або посилання, конкретна дія
Для таблиць і списків empty state вписується в область даних — не повноекранний, а займаючий місце, де були б рядки.
Ілюстрації та іконки
Для first-run станів — ілюстрація працює краще, ніж іконка: створює контекст та знижує тривогу «чому тут порожньо». Для error та search — достатньо іконки.
Якщо дизайн-система вже має набір ілюстрацій — empty states будуються з них. Якщо ні — розробляємо мінімальний набір з 4–6 ілюстрацій: «немає даних», «немає результатів», «немає доступу», «помилка завантаження», «завдання виконано» (success empty state, коли все оброблено).
Ілюстрації повинні бути нейтральними: ніяких конкретних людей (стать, національність), векторний стиль, що відповідає загальному стилю сайту.
Приклад з практики
Для B2B-дашборду з розділом «Звіти» пусте стан проектували в трьох варіантах:
- Перший вхід: ілюстрація графіка + «Тут будуть ваші звіти» + кнопка «Створити звіт»
- Після фільтрації без результатів: іконка фільтра + «Немає звітів за вибраний період» + «Змінити фільтри»
- Помилка завантаження: іконка вигукового знака + «Не вдалося завантажити дані» + кнопка «Повторити»
Таке розділення убрало запитання підтримки «чому розділ порожній» на 30% порівняно з єдиним станом «Немає даних».
Строки
Дизайн набору empty states (6–10 станів для одного продукту) — 2–4 дні: інвентаризація всіх пустих станів у проекті, розробка компонента та варіантів, створення ілюстрацій або адаптація готових.