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 — главное целевое действие.
Вторичный 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) Встраивание в дизайн-систему
Добавьте в UI-кит компонент EmptyState с пропсами:- `title` (строка, опционально)
- `body` (короткий текст 1–2 предложения)
- `primaryAction { label, onClick }`
- `secondaryAction { label, href/onClick }`
- `icon/illustration` (опционально)
Храните тексты в i18n-файлах рядом с компонентом, поддерживайте ключи и описания, подключайте tone-map (тон и лексика по ситуациям).
14) Быстрый конструктор (скопировать и использовать)
Шаблон 1 — Первый нуль:- Заголовок: «Начните с первого шага»
- Текст: «Здесь будут рекомендации, как только вы выберете интересы.»
- CTA: «Выбрать интересы»
- Вторичный: «Как это работает?»
- Текст: «По “{query}” ничего не нашлось. Сбросьте фильтры или уточните запрос.»
- CTA: «Сбросить фильтры»
- Вторичный: «Каталог»
- Текст: «Функция доступна после подтверждения возраста. Обычно это до 2 минут.»
- CTA: «Подтвердить возраст»
- Вторичный: «Зачем это нужно?»
- Текст: «Собираем данные за сутки. Обычно это до 30 секунд. Мы уведомим, когда все готово.»
- CTA: «Хорошо»
Итоговая шпаргалка
Контекст + ценность + действие — в одной «стопке».
Один главный CTA без конкуренции по визуальному весу.
Коротко и конкретно: 1–2 предложения.
Всегда выход из тупика: нет тупиковых экранов.
Локализация и A11y заложены на уровне компонента.