Дизайн пустых состояний (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 дня: инвентаризация всех пустых состояний в проекте, разработка компонента и вариантов, создание иллюстраций или адаптация готовых.