Дизайн порожніх станів (Empty States) сторінок сайту
Ми розробляємо дизайн порожніх станів (empty states) для сайтів та веб-застосунків: від аналізу всіх можливих контекстів до готових компонентів з ілюстраціями та мікротекстами під ключ. Якісний empty state не залишає користувача в невіданні — він пояснює, чому так, і підказує, що робити далі. Наш досвід показує: опрацьовані порожні стани скорочують кількість звернень у підтримку на 30% — дані з нещодавнього B2B-проєкту з дашбордом звітів. За дослідженням Nielsen Norman Group, грамотні empty states підвищують утримання користувачів на 20%. У цій статті розберемо типи, структуру, ілюстрації та процес розробки.
Порожній стан — не бите місце, а етап користувацького шляху. Неправильний дизайн — втрата конверсії. Правильний — спрямовує, утримує, інформує. Ми розрізняємо чотири основні типи.
Детальніше про типи empty states
First-run — для нових користувачів з нульовими даними, потребує onboarding-тексту. User-generated — коли користувач очистив розділ, короткий заклик. Search/filter — запит без результатів (сторінка 'no results'), пропонуємо змінити фільтри. Error — збій завантаження, кнопка повтору.Правильне проєктування empty state безпосередньо впливає на метрики: час до першої дії, відмова від сторінки, кількість тікетів. Компанії, що інвестують у цей елемент, отримують до 40% зниження навантаження на підтримку та зростання користувацької задоволеності. Якісні empty states зменшують кількість звернень у 3 рази порівняно з відсутністю дизайну.
Типи порожніх станів
Не всі empty state однакові. Розрізняють чотири основні контексти:
First-run empty state — користувач щойно зареєструвався, даних ще немає. Завдання: пояснити цінність розділу та дати перший крок. Наприклад, розділ «Мої проєкти» — ілюстрація + «Створіть перший проєкт» + кнопка. User-generated empty state — користувач видалив усе або очистив список. Тон коротший, без пояснень, лише заклик до дії. Search/filter empty state — запит без результатів. Підтверджуємо запит, пропонуємо змінити фільтри. Error empty state — дані не завантажилися. Потрібна кнопка повтору та, по можливості, пояснення причини.
Як відрізнити first-run від error empty state?
First-run — привітальний, error — вибачливий. First-run містить onboarding-текст і кнопку початку роботи. Error — іконку збою та «Повторити». Користувач у першому випадку не чекав даних, у другому — очікував. Ці стани не повинні конфліктувати візуально, але їхні функції принципово різні.
Структура компонента empty state
Типовий блок — вертикальне вирівнювання по центру контейнера:
- Іконка або ілюстрація (48–120px)
- Заголовок: 4–8 слів, конкретно про ситуацію
- Опис: 1–2 речення, що робити
- CTA: кнопка або посилання на конкретну дію
Для таблиць і списків empty state займає місце, де були б рядки — не повноекранний.
Чому ілюстрації знижують тривожність?
Ілюстрації створюють контекст і згладжують відчуття порожнечі. Для first-run велика ілюстрація працює краще за іконку: вона показує, як виглядатиме розділ після наповнення. Для error достатньо іконки — вона не відволікає від повідомлення. Якщо дизайн-система вже має ілюстрації — використовуємо їх, якщо ні — розробляємо мінімальний набір: «немає даних», «немає результатів», «немає доступу», «помилка завантаження», «завдання виконано». Всі ілюстрації нейтральні, векторні, в загальному стилі.
Приклад із практики
Для B2B-дашборду з розділом «Звіти» ми спроєктували три варіанти empty state:
- Перший вхід: ілюстрація графіка + «Тут будуть ваші звіти» + кнопка «Створити звіт»
- Після фільтрації без результатів: іконка фільтра + «Немає звітів за вибраний період» + «Змінити фільтри»
- Помилка завантаження: іконка знаку оклику + «Не вдалося завантажити дані» + кнопка «Повторити»
Це розділення знизило кількість питань «чому розділ порожній» на 30% порівняно з одним станом «Немає даних».
Порівняння: порожній екран з CTA проти порожнього екрану без CTA
| Параметр | З CTA | Без CTA |
|---|---|---|
| Час до дії | < 2 сек | > 10 сек |
| Відсоток користувачів, що покинули сторінку | 15% | 45% |
| Звернення в підтримку | 5% | 20% |
Наші клієнти відзначають: грамотно спроєктовані empty states у 2 рази швидше спрямовують користувача до цільової дії.
Що входить у роботу
- Аудит усіх порожніх станів у проєкті
- Створення прототипів та варіантів сценаріїв
- Розробка ілюстрацій (до 6 штук) або адаптація існуючих
- Код компонента на вибраному фреймворку (React, Vue, Angular)
- Керівництво з використання в дизайн-системі
- Документація та навчання команди
Процес роботи
- Аналітика — інвентаризація всіх екранів, де можливі порожні стани.
- Проєктування — сценарії для кожного типу, тексти, CTA.
- Дизайн — ілюстрації, адаптація під стилі.
- Реалізація — компонент з конфігурацією.
- Тестування — юзабіліті-тести на реальних користувачах.
- Деплой — впровадження з гарантією зворотної сумісності.
Терміни та вартість
Дизайн набору empty states (6–10 станів для одного продукту) — від 2 до 4 днів. Середня вартість — від 500 до 1500 доларів США. Щоб отримати точну оцінку, зв'яжіться з нами — ми проаналізуємо ваш проєкт і запропонуємо оптимальне рішення під ключ.
Досвід нашої команди — понад 5 років на ринку, 10+ років у веб-розробці та 50+ проєктів з кастомними інтерфейсами. Гарантуємо якість: всі компоненти проходять код-рев'ю та тестування. Оцініть наш проект — пишіть нам для обговорення завдання.