UX-фідбек в порожніх станах

1) Що таке порожні стани і навіщо вони потрібні

Порожній стан - це екран/віджет, де основний контент тимчасово відсутній: до першої дії, після очищення, при нульовому результаті, при помилці завантаження, при відсутності прав/доступу.

• пояснити «чому тут порожньо»;
• показати цінність розділу;
• запропонувати чіткий наступний крок (або дещо на вибір);
• знизити тривожність і запобігти догляду.

Хороший порожній стан = контекст + користь + дія.

2) Типологія порожніх станів

1. Первинний нуль (first-time empty): користувач ще нічого не створив/не налаштував.
2. Нульовий пошук/фільтр: запит не дав результатів.
3. Тимчасова порожнеча: дані вантажаться або черга виконується.
4. Обмеження/право: немає доступу, недостатньо рівня верифікації.
5. Очищено користувачем: кошик/історія очищені.
6. Технічна несправність: збій мережі/сервісу, ретрай.

3) Принципи дизайну

Контекстність: говоримо про конкретну причину порожнечі.
Цінність → дія: спочатку навіщо цей розділ, потім що зробити.
Один головний CTA: при необхідності - вторинний (learn more/FAQ).
Стислість і конкретика: 1-2 пропозиції + чітка кнопка.
Візуальна опора: іконка/ілюстрація підтримує сенс, не відволікає.
Запобігання тупиків: завжди є шлях вперед.
Узгодженість тону: доброзичливо і спокійно; без жартів у критичних кроках (платежі, безпека).
A11y та локалізація: читається скрінрідером, правильно схиляється, враховує довжину рядків.

4) Каркас порожнього стану (шаблон)

Заголовок (опціонально, 1 рядок) - затвердження цінності або причини.
Текст (1-2 речення) - «чому порожньо» + «що далі».
Первинний CTA - головна цільова дія.
Вторинний СТА/посилання - допомога/правила/документація.
Візуал (необов'язково) - легка ілюстрація 24-96 px, не перевантажувати.

5) Патерни за сценаріями

5. 1 Онбординг/перший нуль

Мета: привести до першої успішної дії.
Текст: «Щоб бачити персональні рекомендації, заповніть профіль і виберіть інтереси».
CTA: «Заповнити профіль »/« Вибрати інтереси».
Порада: додайте мікро-індикатор зусилля/часу: «Це займе ~ 1 хвилину».

5. 2 Пошук/фільтри = нульовий результат

Мета: допомогти скорегувати запит.

Текст: "Нічого не знайдено по "live blackjack". Спробуйте "blackjack" або приберіть фільтр "Провайдер: X”.»

CTA: «Скинути фільтри» вторинний: «Відкрити каталог».

5. 3 Платежі/гаманець порожній

Мета: стимулювати додавання методу/перше поповнення.
Текст: «Збережіть спосіб оплати - поповнення і висновки пройдуть швидше».
CTA: «Додати спосіб оплати» вторинний: «Правила і комісії».

5. 4 Верифікація/доступ

Мета: прозоро пояснити обмеження і шлях зняття.

Текст: "Цей розділ доступний після підтвердження особи. Зазвичай це займає до 2 хвилин"

CTA: «Пройти верифікацію» вторинний: «Чому це потрібно?»

5. 5 Дані в дорозі/тимчасова порожнеча

Мета: знизити тривожність очікування.

Текст: "Збираємо ваші дані. Зазвичай це займає до 30 секунд. Можете залишити сторінку - ми повідомимо, коли все буде готово"

CTA: «Зрозуміло» вторинний: «Що буде далі?»

5. 6 Після очищення/видалення

Мета: підтвердити дію і запропонувати наступний крок.

Текст: "Історія очищена. Нові операції з'являться після наступного поповнення"

CTA: «Поповнити рахунок».

5. 7 Помилка/ретрай

Мета: чіткий шлях відновлення.

Текст: "Не вдалося завантажити дані. Перевірте мережу або повторіть спробу"

CTA: «Повторити» вторинний: «Статус системи».

6) Мікротексти: готові шаблони

• "Тут з'являться обрані ігри, коли ви додасте першу. [Додати в обране"

• "За запитом "{query}" нічого не знайшлося. Уточніть запит або скиньте фільтри. [Скинути фільтри]"

• "У вас поки немає збережених методів. Додайте картку або гаманець, щоб прискорити виплати. [Додати спосіб]"

• "Функція недоступна без підтвердження віку. Це займе ~ 2 хвилини. [Підтвердити вік] [Навіщо це потрібно?]"

• "Вважаємо статистику за останні 24 години... Зазвичай це до 30 секунд. Ми покажемо повідомлення, коли все готово"

• "Сервіс недоступний. Ми вже чиним. Спробуйте пізніше або перевірте статус. [Повторити] [Статус системи]"

7) Візуальна мова та ілюстрації

Використовуйте легкі монохромні/двоколірні ілюстрації, щоб не сперечалися з CTA.
Розміри і відступи - як у картки контенту (візуальна узгодженість).
Не зображуйте гумористичні сцени в стресових сценаріях (платіж/безпека).

8) Локалізація та доступність

Закладіть запас на довжину рядків (DE/TR довше).
Переводьте числові формати, валюту, дати локально.
Для скрінрідерів: role = «status», aria-live = «polite/assertive» для динаміки.
Не вкладайте сенс тільки в зображення: дублюйте текстом.
Перевіряйте читаність на 320 px і контраст по WCAG.

9) Метрики та експерименти

• CTR по головному CTA порожнього стану;
• конверсія до «першого успіху» (activation event);
• час до першої дії;
• частота повернення до екрану без прогресу;
• частка нульових результатів пошуку;
• звернення на підтримку за сценарієм.

• конкретний vs загальний заголовок;
• CTA-дієслово дії vs нейтральний;
• додавання оцінки часу;
• наявність вторинного CTA (FAQ) і порядок кнопок;
• ілюстрація vs іконка vs без візуала.

10) Анти-патерни

«Тут порожньо» без пояснення і кроку.
Жарти в критичних кроках (платіж, безпека).
Один CTA «Дізнатися більше» без прив'язки до контексту.
Пасивна застава: «має бути додано». Пишіть активно: «Додайте»....
Довгі абзаци: 1-2 пропозиції максимум.
Плейсхолдер замість лейблу у формах - погіршує A11y і розуміння.
Приховані обмеження («миттєво», хоча можлива затримка).

11) Чек-лист перед релізом

• Зрозуміло, чому порожньо?
• Є цінність розділу в одному реченні?
• Є один головний CTA і, якщо потрібно, вторинний?
• Текст короткий (≤ 140 знаків) і конкретний?
• Додана оцінка часу/зусилля, якщо доречно?
• Тон відповідає сценарію (спокійний/підтримуючий)?
• Перевірено локалізацію та A11y (aria-атрибути, контраст)?
• Зображення не домінує над CTA?

12) Приклади «до/після»

Каталог ігор (перший нуль)

До: «Тут поки нічого немає»

Після: "Зберіть свою стрічку. Виберіть 3 улюблених жанру - почнемо рекомендувати. [Вибрати жанри]"

Нульовий пошук

До: «Нічого не знайдено»

Після: "Щодо "high-limit roulette" результатів немає. Приберіть фільтр «High-limit» або спробуйте «roulette». [Скинути фільтри]"

Платежі

До: «Немає способів оплати»

Після: "Збережіть карту або гаманець - поповнення і висновки стануть швидшими. [Додати спосіб] [Комісії та терміни]"

Верифікація

До: «Немає доступу»

Після: "Розділ доступний після підтвердження особи. Це займає ~ 2 хвилини. [Пройти верифікацію] [Чому це важливо]"

13) Вбудовування в дизайн-систему

• 'title'( рядок, опціонально)
• 'body'( короткий текст 1-2 речення)
• `primaryAction { label, onClick }`
• `secondaryAction { label, href/onClick }`
• 'icon/illustration'( опціонально)

Зберігайте тексти в i18n-файлах поруч з компонентом, підтримуйте ключі та описи, підключайте tone-map (тон і лексика з ситуацій).

14) Швидкий конструктор (скопіювати і використовувати)

• Заголовок: «Почніть з першого кроку»
• Текст: «Тут будуть рекомендації, як тільки ви виберете інтереси».
• CTA: «Вибрати інтереси»
• Вторинний: "Як це працює?"

• Текст: "По "{query}" нічого не знайшлося. Скиньте фільтри або уточніть запит"
• CTA: «Скинути фільтри»
• Вторинний: «Каталог»

• Текст: "Функція доступна після підтвердження віку. Зазвичай це до 2 хвилин"
• CTA: «Підтвердити вік»
• Вторинний: «Навіщо це потрібно?»

• Текст: "Збираємо дані за добу. Зазвичай це до 30 секунд. Ми повідомимо, коли все готово"
• CTA: "Добре"

Підсумкова шпаргалка

Контекст + цінність + дія - в одній «стопці».
Один головний CTA без конкуренції за візуальною вагою.
Коротко і конкретно: 1-2 пропозиції.
Завжди вихід з глухого кута: немає тупикових екранів.
Локалізація і A11y закладені на рівні компонента.