Дизайн пустих станів (Empty States) екранів мобільного додатка
Пустий стан—це не декоративний екран. Це момент, коли користувач опинився в тупику: контенту нема, й незрозуміло, що робити далі. Правильно спроектований empty state дає напрямок. Погано спроектований—просто білий екран або фраза «Нічого не знайдено».
Три види пустих станів, які путають
Важливо їх розділити, тому що у кожного різний CTA та різний тон:
First-time empty—користувач вперше потрапив на екран, даних ще нема. Приклад: розділ «Улюблене» у нового користувача. Задача: пояснити, що буде тут, показати, як це заповнити. CTA: «Перейти в каталог», «Додати перший товар».
User-generated empty—користувач сам щось зробив й отримав пустий результат. Класика: пошук без результатів. Задача: допомогти змінити запит. CTA: «Очистити фільтри», «Спробувати інший запит».
Error-caused empty—дані є, але не завантажилися через помилку мережі або сервера. Це вже ближче до error state (вони перетинаються). CTA: «Спробувати ще раз».
Не можна змішувати ці три типи—різна ілюстрація, різний текст, різна кнопка.
Ілюстрації
Для empty states оптимальні векторні ілюстрації або Lottie-анімації. Розмір: не більше 40% висоти екрана, щоб не домінувало над текстом та кнопкою. Стиль ілюстрації повинен відповідати загальному дизайн-мові додатка.
На практиці: замовляємо набір ілюстрацій під всі основні екрани одразу. Дешевше, ніж по одній. SVG-формат для експорту в React Native через react-native-svg, або в Flutter через flutter_svg, або PDF-вектор для iOS/Android нативки.
Структура компонента
[Ілюстрація/Іконка]
[Заголовок—коротко, що сталось]
[Підзаголовок—що робити]
[CTA Button—конкретна дія]
Кнопка повинна бути одна. Два CTA в empty state—це нерішучість у дизайні, яку користувач відчуває як путаницу.
Висота компонента—не фіксована, а центрована за вертикаллю в доступній зоні екрана (за вирахуванням navigation bar та tab bar).
Термін—1 день на повний набір empty states для всіх основних екранів додатка. Вартість індивідуально.