Пустые состояния (empty states): как проектировать экраны, которые помогают

Пустые состояния часто воспринимают как мелочь: «покажем иконку, напишем “данных нет” и пойдем дальше». Но именно в empty states пользователь впервые попадает в новый продукт, ничего не находит после поиска, удаляет последний объект или не понимает, что делать дальше.

В 2026 дизайн всё сильнее смещается в сторону контекстной помощи, персонализации и уменьшения когнитивной нагрузки. Поэтому пустое состояние уже нельзя считать декоративным экраном. Это полноценный UX-элемент, который либо помогает пользователю продолжить сценарий, либо обрывает его.

В этой статье: как проектировать пустые состояния, какие типы empty states бывают, что в них писать, какие действия давать, как делать их полезными на мобильных устройствах и как измерять эффект от таких экранов.

1. Что такое пустое состояние и почему оно важно

Пустое состояние — это экран или блок интерфейса, который показывается, когда в текущем контексте нет данных, результатов, объектов или доступного содержимого.

Пустое состояние — это не отсутствие интерфейса. Это момент, когда продукт должен объяснить пользователю, что происходит и что делать дальше.

Если этого объяснения нет, человек сталкивается с тупиком.

2. Какие типы empty states встречаются чаще всего

3. Какая задача у хорошего пустого состояния

Правильный empty state должен выполнять сразу несколько функций:

• объяснить, почему экран пустой;

• снизить тревожность и ощущение ошибки;

• подсказать следующий шаг;

• при необходимости обучить сценарию;

• сохранить мотивацию пользователя двигаться дальше.

Главный вопрос дизайнера: что пользователь должен понять и сделать после этого экрана?

4. Из чего состоит сильный empty state

5. Какой текст писать в пустом состоянии

Самая частая ошибка — технический или слишком абстрактный текст. Пользователю не нужен текст «No data available». Ему нужна человеческая подсказка.

Плохо

• «Нет данных»

• «Результаты не найдены»

• «Список пуст»

Лучше

• «Вы пока не создали ни одной задачи. Начните с первой»

• «По этим фильтрам вакансий не нашлось. Попробуйте расширить условия»

• «Здесь появятся ваши отчеты после первого импорта данных»

Хороший текст не просто называет пустоту, а объясняет причину и действие.

6. Какой CTA давать на empty state

Главная кнопка должна быть логичным продолжением ситуации.

Если действие отсутствует, пустое состояние легко превращается в мертвый экран.

7. Когда нужно давать starter content, а не просто пустой экран

В ряде продуктов пустой экран можно заменить стартовым содержимым. Это особенно полезно, когда пользователь пока не знает, как выглядит «нормальное» состояние интерфейса.

• пример дашборда с демонстрационными данными;

• шаблоны задач, документов, досок;

• предзаполненные категории или рекомендованные элементы;

• подборка популярных фильтров или готовых поисковых запросов.

Пример: в аналитическом сервисе пустая таблица мало чему учит. А демонстрационный отчет с пометкой «пример» быстрее показывает ценность продукта и снижает барьер входа.

8. Как работать с иллюстрацией, иконкой и тоном

Визуальная часть empty state должна поддерживать смысл, а не заменять его.

• иллюстрация помогает, если усиливает контекст, а не спорит с ним;

• юмор уместен не везде: для финтеха, медицины и ошибок доступа нужна сдержанность;

• анимация допустима, если она не мешает восприятию текста и CTA;

• пустое состояние должно оставаться частью дизайн-системы, а не случайным арт-объектом.

9. Как делать пустые состояния полезными на мобильных устройствах

10. Доступность empty states: что проверить обязательно

• достаточный контраст текста и кнопок;

• понятные подписи, а не смысл только через иллюстрацию;

• корректный порядок фокуса с клавиатуры;

• текст без лишней двусмысленности и слишком сложных конструкций;

• не использовать цвет как единственный способ объяснить состояние.

Если пустое состояние непонятно без картинки, оно уже плохо работает для части пользователей.

11. Какие метрики показывают, что empty state реально помогает

12. Чек-лист проектирования пустого состояния

1. Понятно ли, почему экран пустой?

2. Есть ли один главный следующий шаг?

3. Дает ли текст пользу, а не просто констатирует пустоту?

4. Не перегружен ли экран иллюстрацией?

5. Подходит ли тон продукта и сценария?

6. Проверена ли мобильная версия?

7. Понятен ли экран без дополнительных объяснений саппорта?

Мини-шаблон empty state

Заголовок: кратко объясняем ситуацию
Текст: почему здесь пусто и что это значит
Главное действие: что делать дальше
Доп.подсказка: как быстрее получить результат

Антипаттерны пустых состояний

• слишком много юмора там, где пользователь ждет помощи, а не шутки;

• несколько равносильных CTA без одного главного следующего шага;

• абстрактная иллюстрация без объясняющего текста;

• поиск без результатов, но без предложения убрать фильтры или изменить запрос;

• состояние «нет доступа», где не сказано, как этот доступ получить;

• экран, в котором на мобильном кнопка оказывается далеко ниже первого экрана.

Готовые паттерны микрокопирайта для empty states

13. Частые вопросы

Нужна ли иллюстрация в каждом empty state?

Нет. Если она не помогает понять контекст или отвлекает от действия, лучше обойтись без нее.

Чем empty state отличается от error state?

Empty state описывает отсутствие данных или объектов как нормальную ситуацию. Error state сообщает о проблеме, сбое или невозможности выполнить действие.

Можно ли использовать empty states для обучения продукту?

Да, особенно в first-use сценариях. Но обучение должно быть коротким и привязанным к следующему действию, а не превращаться в длинную инструкцию.

Когда вместо пустого состояния лучше показать пример данных?

Когда продукт сложный, а пустой интерфейс не объясняет ценность. Пример данных помогает быстрее понять, зачем вообще нужен экран.

Как часто пересматривать пустые состояния?

После заметных изменений сценария, навигации, продукта или onboarding-пути. Empty state должен развиваться вместе с интерфейсом, а не жить как забытый статичный экран.

14. Итог: хороший empty state не говорит «здесь пусто», а помогает сделать следующий шаг

Главный вывод: пустое состояние — это часть сценария, а не украшение. Если экран помогает понять контекст и сделать следующий шаг, он работает. Если просто сообщает, что данных нет, он мешает.

Сильный дизайнер проектирует empty states так же внимательно, как главные экраны продукта. Потому что именно в момент пустоты пользователь особенно нуждается в понятном и спокойном интерфейсе.

А лучшие вакансии для ux/ui, графических и продкутовых дизайнеров ищите на hirehi.ru