web design uiMay 1, 20269 min read

Пустые состояния и есть продукт

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

By Boone
XLinkedIn
Empty States Are the Product

Самый важный экран вашего продукта — тот, на котором ничего нет. Не дашборд. Не страница настроек. Экран, на который пользователь попадает, пока данных ещё нет. Этот экран сжимает весь продукт в один кадр, а большинство команд относятся к нему как к недоделке.

Пустые состояния отдают тому, у кого найдётся время. Им достаётся стоковая иллюстрация человека с лупой и фраза «Здесь пока ничего нет». Потом команда выкатывает релиз и удивляется, почему активация стоит на месте. Пустое состояние не было лоском. Оно было продуктом. Просто вы сделали не тот продукт.

Пустое состояние — это поверхность активации

Активация происходит не в дашборде. Она происходит в пустом состоянии. Именно там пользователь решает, стоит ли продукт второй сессии.

Новый пользователь не видит ваш роадмап и ваши кейсы. Он видит пустой экран с вашим логотипом и тихий голос внутри: «ну и что дальше?». Что бы экран ни сказал следом, это и становится продуктом. Пустое состояние — единственный продукт, которым он когда-либо пользовался.

Linear это понимает. Пустой инбокс у них не «Задач нет». Это аккуратно собранный холст с одним горячим сочетанием клавиш, одним понятным следующим действием и ощущением, что вы внутри инструмента, который сделали люди, которым не всё равно. Пустое состояние и есть активация. Дашборд — награда.

О чём говорит каждое пустое состояние

Пустое состояние — это система, которая говорит, когда ей больше нечего сказать. Что бы она ни сказала, это становится брендом и первым впечатлением пользователя о том, как продукт к нему относится.

Плохое пустое состояние извиняется за отсутствие данных. Хорошее исходит из того, что пользователь здесь не случайно, и подсказывает следующий ход. Разница в позиции. Одно говорит «извините, тут ничего нет». Другое говорит «вот как всё это начнётся».

Пустой документ в Notion — чистейший пример во всей индустрии. Мягкая подсказка, намёк на слэш-меню, мгновенный фокус клавиатуры. Ни иллюстраций, ни приветственного экрана. Сам набор текста и есть активация, а пустое состояние — продукт.

Пять архетипов, которые дизайнеры упорно делают неправильно

Большинство команд считают «пустое состояние» одной дизайнерской задачей. На деле их пять. Каждое появляется в свой момент, играет свою роль в удержании и проваливается по своей причине.

Воксельная диаграмма из пяти подписанных карточек в ряд, каждая обозначает один архетип пустого состояния: первый запуск, нет результатов, нет доступа, нет подключения и нет ответа ИИ
Воксельная диаграмма из пяти подписанных карточек в ряд, каждая обозначает один архетип пустого состояния: первый запуск, нет результатов, нет доступа, нет подключения и нет ответа ИИ

1. Ноль данных, первый запуск

Экран, который пользователь видит при первом открытии продукта. Ни проектов, ни документов, ни истории. Самое ответственное пустое состояние в приложении и обычно самое запущенное.

Состояние первого запуска в Cursor — урок. Одно окно редактора, мягкая подсказка, пример команды, готовый к вводу с клавиатуры. Никакого тура, парада тултипов, модалки «Добро пожаловать в Cursor». Пользователь уже внутри работы.

Новый холст файла в Figma делает то же самое в другом регистре. Чистый бесконечный холст, тулбар под рукой, курсор там, где вы его оставили. Сравните с продуктами, которые открываются чек-листом из пяти шагов и стеной «Подключите рабочее пространство». Одно ощущается как инструмент. Другое как домашка.

2. Ноль результатов по фильтру

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

Linear показывает активный фильтр, объяснение в одну строку и понятное действие «Сбросить фильтры». Дашборд платежей в Stripe делает то же самое, когда за выбранный период ничего нет. Страница не исчезает. Она объясняет, а потом предлагает.

Сценарий провала — тупик: «Результатов не найдено». Точка. Ни контекста, ни выхода. Пользователь застрял в состоянии, которое создал продукт, и продукт отказывается помогать ему выбраться.

3. Ноль доступа

Пустое состояние, которое никто не проектирует и все выпускают. Пользователь попадает на экран, к которому у него нет доступа, и продукт наказывает его за любопытство. 403, строка «У вас нет прав», тупик.

Хорошая версия уважает пользователя. Она объясняет, кто может выдать доступ, даёт кнопку «Запросить доступ» в один клик и говорит, что будет дальше. Slack делает так, когда вы заходите в приватный канал не будучи участником. Пустое состояние превращает стену в дверь.

4. Ноль подключения

Пользователь открыл ваш продукт, а тот ещё ни к чему не подключён. Stripe до первых платежей. Vercel до первого деплоя. Новое рабочее пространство Slack, где каналы ещё не настоящие. Самый высокий риск оттока в приложении: пользователь смотрит на пустой продукт и ещё не решился его наполнять.

Состояние «платежей пока нет» в Stripe Atlas — мастер-класс. Никакого пустого графика с грустным смайликом. Оно показывает, какую активность отобразит дашборд, подталкивает к первой интеграции и ведёт прямо к API-ключу, который понадобится следующим.

Пустой список проектов в Vercel — противоположность пустоты. Кнопка деплоя, опция импорта, пример шаблона на том же экране. Первый деплой — это событие активации, а пустое состояние — взлётная полоса.

5. Ноль ответа ИИ

Новинка, и большинство продуктов тут проваливаются. Пользователь отправил промпт, а системе нечего вернуть. Модель превысила время ожидания, ввода не хватило или сработал ограничитель вывода.

Плохая версия говорит «Извините, что-то пошло не так». Хорошая конкретна. Почему ничего не вернулось, что пользователь может изменить, есть ли путь для повтора. Поток первой записи в Loom решает похожую проблему хорошо: когда запись не загружается, пустое состояние объясняет сбой и сразу предлагает повторить, не теряя файл. Разбор дизайна онбординга AI-продукта показывает, как меняется форма онбординга, когда ИИ — это основная поверхность.

Что нужно каждому пустому состоянию

У сильных состояний есть пять общих элементов. Пропустите любой, и экран скатится обратно в режим извинений.

  1. Контекст. Назовите, на что смотрит пользователь и почему там пусто. «Задач пока нет» недостаточно. «В этом цикле нет задач. Добавьте первую клавишей C.» — это экран, который делает свою работу.
  2. Действие. Одно главное действие, одно нажатие, одна кнопка. Если вы пишете три предложения о том, что делать, дизайн неверен.
  3. Голос. Голос системы, когда ей больше нечего сказать, должен совпадать с остальным брендом. Стерильный тон ошибки внутри дружелюбного продукта разрушает чары.
  4. Иерархия. Заголовок, пояснение в одну строку, главное действие, необязательная вторичная ссылка. Четыре элемента, где работает настоящая визуальная иерархия. Всё остальное лишнее.
  5. Движение. Мягкий сигнал, что экран живой. Мигающий курсор, едва заметная пульсация CTA, маленькая анимированная стрелка. Знак того, что продукт ждёт пользователя.

Сценарии провала, которые убивают пустые состояния

Шесть паттернов убивают больше пустых состояний, чем всё остальное.

Отмахивающиеся иллюстрации. Мультяшка с планшетом. Телескоп. Парящий астронавт. Они подменяют работу, которую должен был делать экран, и сигналят, что продукт недостаточно серьёзен, чтобы написать настоящий текст.

Тупиковые состояния. «Здесь пока ничего нет» без следующего шага. 404 без выхода. 403 без пути к доступу. Каждое пустое состояние без следующего действия — это дыра в удержании.

Пустые состояния, которые читают лекции. Длинный абзац о том, что делает этот раздел. Пользователь пришёл пользоваться продуктом, а не читать туториал. Если пустому состоянию нужно три абзаца, продукту нужно меньше объяснений, а не экрану больше.

Ловушка inbox zero. Проектировать праздник «всё сделано» раньше потока «первое действие». Superhuman зарабатывает inbox zero месяцами реальной работы. Большинство продуктов копируют праздник, не заработав его, и пользователи чувствуют снисходительность в первый же день.

Отмазка «здесь пока ничего нет». Три слова, ни контекста, ни действия, ни голоса. Эквивалент пустого состояния для дизайнера, который сдался. Если эта строка выходит в вашем продукте, удержание у вас уже сломано.

Одно решение на все архетипы. Один компонент, переиспользованный для первого запуска, отсутствия результатов, доступа и подключения. У каждого архетипа свои ставки. Один компонент не может обслужить их все, не сплющив каждый.

Аудит пустых состояний

Воксельная визуализация вертикальной стопки карточек-чеклиста, наклонённой к камере: в каждой строке коралловый чекбокс и белая полоса текста, будто идёт аудит
Воксельная визуализация вертикальной стопки карточек-чеклиста, наклонённой к камере: в каждой строке коралловый чекбокс и белая полоса текста, будто идёт аудит

Пропустите каждое пустое состояние через эти семь вопросов. Если на все нельзя ответить чётким «да», экран не готов.

  1. Говорит ли экран пользователю, где он и почему тут пусто? Заголовок, объяснение в одну строку, причина. Если приходится гадать, экран провалился ещё до загрузки.
  2. Есть ли ровно одно главное действие? Не две конкурирующие кнопки. Одно действие, очевидное благодаря иерархии и контрасту, как hero-секция экрана, которой оно на деле и является.
  3. Совпадает ли голос с остальным продуктом? Прочитайте вслух рядом с заполненным экраном. Если тон сменился, пустое состояние носит другой бренд.
  4. Достижим ли следующий шаг одним нажатием или кликом? Не «зайдите в настройки, потом подключите, потом вернитесь». Один ход. Всё длиннее — работа, которую должно было взять на себя пустое состояние.
  5. Экран кажется живым, а не заброшенным? Курсор, пульсация, плейсхолдер, подсказка. Статичная пустота кажется сломанной, даже когда всё работает правильно.
  6. Специфичен ли экран для своего архетипа? У каждого архетипа свои ставки и свой текст. Переиспользованный универсальный компонент — это запах, а не система.
  7. Если пользователь увидит только этот экран, продаст ли он продукт? Если нет, пустое состояние не отрабатывает своё, а по этому экрану большинство новых пользователей и будет судить о продукте.

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

Выберите принцип, затем выпускайте экран

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

Перестаньте начинать с дашборда. Начните с экрана, на котором ничего нет. Дашборд — награда. Пустое состояние — сделка.

Часто задаваемые вопросы

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

В большинстве команд это одно и то же. «Zero state» обычно относится именно к сценариям первого запуска без данных. «Empty state» шире и охватывает любой экран, где нет ожидаемого контента, включая отфильтрованные результаты, стены доступа и сбои ИИ. Принципы одинаковы.

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

Нет. В большинстве не нужна. Иллюстрация оправданна, когда несёт информацию, задаёт нужный бренду тон или визуально поддерживает сложное объяснение первого запуска. Дружелюбная мультяшка с планшетом — это украшение, а не дизайн. Если экран работает без иллюстрации, выпускайте без неё.

Как писать текст для пустого состояния?

Максимум два предложения. Первое называет, на что смотрит пользователь и почему там пусто. Второе говорит, что делать дальше, в активном залоге, с глаголом. Вычеркните каждое прилагательное и каждое извинение. Прочитайте вслух. Если звучит как стоковый шаблон, перепишите.

Сначала проектируйте пустой экран

Экран, на котором ничего нет, решает всё. Дашборд и интеграции стоят на первом впечатлении, которое вы, возможно, не проектировали намеренно. Цена того, чтобы сделать этот экран правильно, — одна лишняя неделя. Цена ошибки — кривая удержания, которую никто не может объяснить.

Если вам нужна команда, которая проектирует пустые состояния как часть продукта, а не как уборку в конце, наймите Brainy. Мы выпускаем продукты, где первый экран, который видит пользователь, — тот, что он запоминает.

Want a product where the empty states do the selling instead of the apologizing? Brainy designs first-run flows and zero states as part of the product, not as cleanup.

Get Started

More from Brainy Papers

Keep reading