Пустое государство — это ваш продукт, а не второстепенный элемент.

Самый важный экран в вашем продукте — это тот, на котором ничего нет. Именно этот экран большинство команд выпускают последним, проектируют меньше всего, а потом забывают о его существовании.

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

Но это не одна и та же проблема. Это пять совершенно разных поверхностей дизайна, и вместе они определяют, продолжит ли кто-то использовать ваш продукт или тихо закроет вкладку.

Почему пустое состояние — это ваше настоящее первое впечатление

Люди судят о вашем продукте не по главной странице. Они судят о нем по второму экрану, тому, который появляется после регистрации, тому, где они ожидали чуда, а получили печальную иллюстрацию с надписью «Пока ничего нет».

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

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

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

Пять типов пустых состояний (и почему к ним нужно относиться по-разному)

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

1. Пустое состояние при первом запуске. Пользователь только что зарегистрировался, он никогда раньше не видел этот продукт, и на экране ничего нет, потому что он ничего не делал. Это самое рискованное пустое состояние в вашем продукте.

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

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

4. Ошибка — пусто. Экран пуст, потому что что-то пошло не так. Запрос прервался, соединение разорвано, интеграция настроена неправильно. Пользователь думает, что продукт сломан, даже если это не так.

5. Поиск — пусто. Пользователь ввёл запрос и получил нулевые результаты. У него есть намерение, он вложил усилия, а вы ничего не вернули. Это наиболее легко исправимое пустое состояние, если всё сделать правильно.

Для каждого типа требуется разное сочетание объяснения, действия и тона. Состояние первого запуска должно обучать, состояние после очистки — радоваться, состояние пустого поиска — предлагать варианты. Используйте один и тот же общий шаблон «Здесь ничего нет» для всех пяти состояний, и вы потратите четыре из них впустую.

Сравнение: что должно и чего не должно делать каждое пустое состояние

Различия становятся очевидными, когда вы сравниваете их. Вот шпаргалка.

| Тип пустого состояния | Когда оно появляется | Что оно должно делать | Чего следует избегать |

|---|---|---|---|

| Первый запуск | Пользователь только что зарегистрировался, еще ничего не сделал | Обучите основному действию с помощью примеров данных или управляемого первого задания | Грустное лицо плюс «Начать» без конечной точки |

| Нулевое состояние | Конкретная область нова, но пользователь знает продукт | Предложите 2 или 3 конкретных действия, намекните на шаблоны | Повторение всего ознакомительного тура |

| Состояние после очистки | Пользователь только что закончил, заархивировал или очистил список | Отпраздновать, а затем предложить следующее разумное действие | Имитация ошибки |

Ошибка - пусто | Не удалось загрузить или синхронизировать данные | Объяснить причину ошибки простым языком, предложить повторную попытку, дать ссылку на страницу состояния | Отображение общего пустого состояния и имитация, что все в порядке |

Поиск - пусто | Пользователь ввел запрос, получил ноль совпадений | Показать, что он искал, предложить связанные запросы, предложить создать | «Результаты не найдены» с тупиком |

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

Четыре дизайнерских приема, которые обеспечивают работу пустых состояний

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

1. Примеры данных. Предварительно заполните экран реалистичным примером контента, с которым пользователь сможет взаимодействовать, редактировать или удалять. Панель управления Stripe с переключателем «Просмотреть тестовые данные» — это классический пример.

2. Предлагаемые действия. Предложите два или три конкретных следующих шага в виде кнопок или карточек, а не расплывчатую кнопку «Начать». В Notion лучше использовать шаблонные предложения на новой странице.

3. Наглядная иллюстрация. Используйте визуальное представление, чтобы показать, как будет выглядеть заполненное состояние, а не грустный мультфильм. Небольшой предварительный просмотр того, как будет выглядеть почтовый ящик или доска после заполнения.

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

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

Реальные продукты, которые правильно это понимают (и что можно позаимствовать)

Самый быстрый способ усвоить это — изучить продукты, которые рассматривают пустое состояние как проблему дизайна. Краткий обзор некоторых из лучших.

Пустой почтовый ящик Linear. Linear рассматривает пустой почтовый ящик как небольшой момент отпуска. Текст сухой, слегка забавный, соответствует бренду, а визуальное оформление спокойное, а не извиняющееся. Нет кнопки «Начать», потому что она не нужна.

Предложения по шаблонам Notion. Новая страница Notion технически пуста, но она никогда не кажется пустой. Курсор находится в режиме готовности, команды слэша подсказываются, а предложения шаблонов появляются контекстно. Вы никогда не смотрите на пустую стену, вы смотрите на меню с вариантами выбора.

Стена черновиков Figma. В новой учетной записи Figma вам не отображается пустой список файлов. Вам показывается пространство черновиков с примерами файлов, подсказками о создании команды и четким путем к первому холсту. Вы изучаете продукт, просто глядя на него.

Cron, теперь уже календарь Notion Calendar, прошедший обучение. После завершения обучения календарь отображает ваши реальные связанные события, а также наложение сочетаний клавиш и несколько примеров событий, демонстрирующих возможности продукта. Вы ориентируетесь в течение десяти секунд.

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

Другие продукты, которые стоит позаимствовать (Granola, Superhuman, Stripe, Replit, ChatGPT)

Еще несколько, с акцентом на новые продукты и инструменты ИИ, потому что закономерности там еще только формируются.

Первая подсказка для расшифровки в Granola. Granola знает, что самый неловкий момент — это первая встреча, когда вам нечего расшифровывать. Поэтому она предлагает записать короткий тест или импортировать образец расшифровки, чтобы вы могли увидеть, что делает ИИ. Это устраняет проблему «курицы и яйца», которая иначе бы возникла у продукта.

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

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

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

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

Виды неудач, названные и разоблаченные

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

Грустная иллюстрация. Дружелюбный талисман с опущенными глазами рядом с надписью «Пока ничего нет». В Figma он выглядит мило, а в продукте — оскорбительно. Пользователь не грустит, он просто зарегистрировался.

Кнопка «Начать» ведет в никуда. Большой призыв к действию, который открывает стандартную форму создания без контекста, без шаблона, без примера. Пользователь кликает, видит пустую форму, и теперь пустое состояние простирается на два экрана.

Тупик. Поиск ничего не выдает, конец истории. Нет подсказок, нет связанных результатов, нет предложения создать то, что искал пользователь. Пользователь что-то напечатал, вы сказали «нет», и разговор окончен.

Бесконечная пустота. Распространенная проблема в продуктах на основе ИИ. Весь интерфейс — это одно пустое поле ввода, ожидающее подсказки. Нет примеров, нет настроек по умолчанию, нет направляющих. Пользователь набирает «привет» и уходит.

Математика активации: почему первые 60 секунд имеют наибольшее значение

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

Пустое состояние — это экран между регистрацией и активацией. Каждая секунда, которую пользователь проводит, глядя на «Пока ничего нет», — это секунда, которую он мог бы потратить на активацию, и отток пользователей очень резкий. Первые 60 секунд сессии коррелируют с удержанием пользователей сильнее, чем следующие 60 минут вместе взятые.

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

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

Подход ИИ: проектирование для бесконечного пустого состояния

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

ChatGPT, Claude, генераторы изображений, курсоры — каждый инструмент ИИ сталкивается с этим. Наивное решение — это огромное пустое текстовое поле с надписью «Спросите меня что угодно». Пользователь, столкнувшись с бесконечным количеством вариантов, вводит что-то несерьезное, получает общий ответ и делает вывод, что продукт находится на промежуточном этапе.

Исправление такое же, как и в обычных продуктах, только более четкое. Предлагаются подсказки, демонстрирующие диапазон возможностей ИИ, примеры диалогов или генерации, показывающие качество, несколько стартовых шаблонов, которые помогут пользователю преодолеть «холодный старт». Применительно к любой работе вашего ИИ, как в Granola, — «запись тестовой встречи».

Рассматривайте поле ввода как предложение, которое пользователь заканчивает, а не как предложение, которое он начинает. Дайте ему первую половину. Бесконечная пустота становится управляемым первым шагом, и ваша активность резко возрастает.

Тон и пост-очистка: пустые состояния с эмоциями

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

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

После завершения задачи следует отметить это событие небольшим праздником. Пользователь только что закончил список, заархивировал всё, достиг «нулевого количества входящих сообщений». Things 3 выводит небольшое сообщение о достижении, когда вы выполняете каждую задачу. Linear тихонько празднует пустую очередь сортировки. Дофамин действительно вырабатывается, и это один из немногих моментов, когда продукт искренне рад пользователю.

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

Ошибка и поиск: пустые состояния, которые укрепляют или подрывают доверие

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

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

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

Пустое состояние поиска — наиболее легко исправимое. Пользователь что-то ввел, вы точно знаете, что ему нужно, и сообщение «Результаты не найдены» с грустным смайликом — это ненадлежащая практика. Минимально жизнеспособная версия повторяет запрос и предлагает связанные поисковые запросы. Хорошая версия предлагает создать то, что искали. Отличная версия использует запрос, чтобы предложить шаблон, действие или статью справки.

В поиске GitHub часто предлагается создать задачу с заголовком, соответствующим запросу. Notion предлагает создать страницу. Linear предлагает сообщить об ошибке. Поиск с пустым состоянием — это единственное место, где «Начать работу» может оправдать себя, потому что конечная цель теперь очевидна.

Как проверить пустые состояния вашего продукта

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

Откройте каждую страницу вашего продукта в новой сессии в режиме инкогнито, войдя в систему как новый пользователь. Сделайте скриншоты каждого экрана, на котором есть хоть какое-то пустое пространство. Запишите их в электронную таблицу, по одной строке на каждый экран, с столбцами для типа, текущего текста, текущего визуального оформления и текущего действия.

Затем обозначьте каждое состояние одним из пяти типов: первое использование, нулевое состояние, после очистки, ошибка — пустое состояние, поиск — пустое состояние. Вы обнаружите, что у большинства продуктов от десяти до тридцати пустых состояний, и только одно или два были разработаны намеренно.

Для каждого состояния задайте три вопроса: объясняет ли оно, для чего предназначена эта поверхность, предлагает ли оно конкретное следующее действие, похоже ли оно на остальную часть продукта. Если ответ на все вопросы «да», оставьте его как есть; если ответ «нет», исправьте это действие и переходите к следующему.

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

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

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

В последние 30 минут назначьте ответственных и установите срок выполнения в одну неделю. Не превращайте это в квартальную инициативу. Пустые состояния небольшие, ограниченные и быстро реализуются. Запустите три на этой неделе, ещё три на следующей, и в течение месяца ваш график активации начнёт двигаться.

Пустое состояние — это язык тела продукта

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

Когда пользователь попадает на экран, на котором ничего нет, отображается каждый ваш выбор. Вы подумали о нём или выпустили вариант по умолчанию? Вы обучили его работе с продуктом или извинились за пустое состояние? Вы написали текст, который звучит как речь человека или как речь волшебника из 2008 года?

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

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