Паттерны дизайна пустых состояний, которые уменьшают неясность и ведут пользователя к следующему успешному шагу настройки — с готовыми текстами, версткой и чек‑листами, которые можно быстро применить.
Пустой экран — это не нейтрально. Он создаёт паузу, в которой люди начинают гадать, что делать дальше, не пропустили ли они шаг или вообще работает ли продукт. В момент настройки такая пауза стоит дорого: «я только начинаю» превращается в «я вернусь позже».
Пустое состояние — это то, что видит пользователь, когда ещё нечего показывать: они не создали, не импортировали и не подключили ничего. Это не экран загрузки, не сообщение об ошибке и не предупреждение о разрешениях. Это момент прямо перед первой ценностью, когда приложение должно помочь пользователю получить первый значимый результат.
У хорошего пустого состояния одна задача: перевести пользователя к следующему успешному действию с минимальными размышлениями. Важен именно «успешный» результат: следующий шаг должен давать реальный исход (первый проект, подключённый источник данных, созданный элемент), а не приводить в никуда или к расплывчатой экскурсии по продукту.
Такие моменты возникают чаще, чем команды думают: первый вход после регистрации, новый рабочий пространство, вкладка фичи без элементов (проекты, клиенты, файлы) или путь настройки, где импорт был пропущен и ничего не создано.
Когда пустое состояние выполняет свою задачу, оно быстро отвечает на три вопроса:
Пример: в Koder.ai новый пользователь может открыть пустое рабочее пространство и не увидеть приложений. Сильное пустое состояние прямо говорит, что ничего не создано, предлагает одно очевидное следующее действие вроде «Создать первое приложение» и добавляет небольшую заметку безопасности (например, что экспорт исходного кода и снимки состояния появятся после начала работы). Цель — превратить «ничего нет» в «я могу получить первый рабочий результат».
Для новичка пустой экран может ощущаться как зависание приложения или как собственная ошибка. Разум быстро заполняет пробелы, и чаще всего не в вашу пользу.
Большинство людей тихо задают одни и те же вопросы:
Эмоции, стоящие за этими вопросами, двигают поведение. Неопределённость заставляет людей колебаться. Страх ошибиться — избегать основной кнопки. Нетерпение — закрыть приложение, если явного шага не видно за несколько секунд.
Пустые состояния для новых и опытных пользователей решают разные задачи. Новичкам нужен контекст и ощущение безопасности — они ещё не знают вашу лексику. Возвращающимся пользователям важна скорость: быстрый способ создать ещё один элемент, импортировать данные или повторить знакомое действие.
Пустые состояния при настройке отличаются от ошибок и загрузок. Загрузка говорит «подождите, что‑то происходит». Ошибка — «что‑то не получилось, вот почему». Настройка — «здесь ещё ничего нет, и это нормально. Вот как начать».
Конкретный пример: если кто‑то открыл новое рабочее пространство в Koder.ai и видит пустую страницу «Проекты», они не думают о функциях. Они думают: «Начать с подсказки, импортировать код или взять шаблон — и не сломается ли что‑то?» Ваше пустое состояние должно ответить на это, не отправляя их в документацию.
Хорошее пустое состояние не кажется пустым. Оно действует как указатель: «Вот что это и вот следующий клик».
Структура, подходящая для большинства потоков настройки, состоит из трёх частей:
Держите объяснение коротким. Если нужно целое абзацное объяснение — вы просите пользователя думать слишком много. Стремитесь к 1–2 коротким предложениям простыми словами: «Добавьте ваш первый проект» или «Создайте первое рабочее пространство».
Затем сделайте следующий шаг очевидным одной основной кнопкой. Если показывать три равные кнопки, вы просите пользователя выбрать путь до того, как он понял страницу. Если альтернативы обязательны (импорт, шаблон, пропустить), сделайте их визуально тише, чем основное действие.
Используйте строку успокоения, чтобы убрать частые страхи: боязнь ошибиться, потратить время или отсутствие технических навыков. Небольшие подсказки о том, что будет дальше и что можно отменить, помогают больше, чем лишние объяснения.
Пример текста для первого экрана «Проекты»:
Заголовок: Начните ваш первый проект
Объяснение: Проекты хранят настройку приложения и релизы.
Основное действие: Создать проект
Успокоение: Займёт около 2 минут. Можно переименовать в любой момент.
Если ваш продукт поддерживает несколько способов старта (построить из чата, импортировать или шаблон, как у таких инструментов, как Koder.ai), оставьте «Создать» по умолчанию, а «Импорт» и «Использовать шаблон» сделайте вторичными действиями ниже.
Пустые состояния проваливаются, когда текст рассказывает о функциях вместо того, что пользователь получит. Ваши слова должны быстро ответить: что это за экран? зачем что‑то делать здесь? что делать дальше?
Простой формулой для заголовка будет Результат + объект. Назовите результат и то, что пользователь создаст, а не внутреннее название фичи.
Для основного текста используйте «что это + почему это важно» в одном‑двух предложениях:
"Клиенты — это люди, которым вы продаёте. Добавьте одного сейчас, чтобы отправлять счета и отслеживать платежи."
Кнопки CTA должны начинаться с понятного глагола и включать конкретное существительное. Избегайте расплывчатых «Начать» или «Поехали», если есть несколько путей.
Добавьте микро‑копию рядом с выбором, который кажется рискованным. Небольшие успокаивающие заметки зачастую полезнее длинных объяснений:
Если ваш продукт генерирует вывод для пользователя (как Koder.ai), установите ожидания, чтобы человек понимал, что он не привязан к финальной версии: "Мы создадим первый черновик. Вы сможете просмотреть и отредактировать перед развёртыванием."
Хорошее пустое состояние читается как указатель, а не как постер. Верстка должна давать порядок, чтобы пользователь мог одним взглядом понять ситуацию и действовать.
Используйте простую иерархию, соответствующую тому, как глаза сканируют страницу: заголовок, одно короткое предложение, основная CTA, затем тише — вторичное действие (импорт, шаблон, пропустить).
Держите основную кнопку рядом с сообщением. Если пользователь должен читать, скроллить и только потом решать, он часто остановится. Часто используют компактный блок (заголовок + текст + CTA) и больше пустого пространства вокруг него (между этим блоком и навигацией, футером, боковыми панелями).
Иконки и небольшие иллюстрации помогают сканированию, но только если они добавляют смысл. Иконка папки рядом с «Нет проектов» полезна. Случайный талисман — нет. Если используете иллюстрацию, держите её небольшой и ставьте над заголовком, чтобы она не отвлекала от CTA.
Один из сильнейших паттернов — показать мини‑превью успеха: пример карточки, демонстрационная строка в таблице или бледный демонстрационный элемент. В инструменте вроде Koder.ai экран «Приложения» может показать один примерный тайл приложения (имя, статус, время обновления), чтобы пользователь сразу понял, что ему предстоит создать.
Когда пользователь попадает на пустой экран, он обычно хочет одно из трёх: начать с нуля, подтянуть данные или быстро стартовать с отправной точки. Хорошие пустые состояния делают эти пути понятными, не заставляя изучать продукт.
Ставьте «Создать» в приоритет, когда первый реальный успех — это создание нового объекта: проект, рабочее пространство, страница или первая запись. Это работает, когда пользователь может закончить быстро и действие обратимо.
Если создание занимает больше времени, разбейте его на меньший первый шаг (например, «Создать черновик»), чтобы они могли двигаться дальше, не чувствуя себя в ловушке.
Ставьте «Импорт» в приоритет, когда большинство новых пользователей приходят с другой системы, файлом или аккаунтом для подключения. Пустое состояние должно объяснять, что поддерживается при импорте и что пользователь получит после (например, сопоставленные поля и созданные элементы).
Практичный способ выбрать основную CTA — учитывать контекст. Если пользователь пришёл с миграционной страницы, выделите Импорт. Если он нажал «новый проект», выделите Создать. Если настройка сложная, выделите Шаблон.
Выбирайте шаблоны, когда у продукта есть распространённые стартовые точки и пользователи в основном хотят адаптировать, а не проектировать. Называйте шаблоны по результату («Воронка продаж», «Еженедельный планировщик»), а не по функциям.
Безопасный вариант «Попробовать с примерными данными» снижает страх. Ясно укажите, что образец можно удалить. В chat‑first билдере вроде Koder.ai примерный проект покажет форму работающего приложения до того, как пользователь напишет собственную подсказку.
Пустые экраны не нейтральны. Лучшие заставляют следующее успешное действие выглядеть очевидным, безопасным и быстрым.
Выберите одну веху настройки. Выберите единственное действие, которое докажет, что пользователь получил ценность (создать первый проект, добавить первого коллегу, подключить первый источник данных). Когда пытаетесь одновременно поддержать три цели, пользователи замирают.
Сведите вводы к минимуму. Оставьте только то, что нужно для достижения вехи. Дополнительные поля можно показать после первого успеха через «Добавить детали».
Напишите ключевые элементы в таком порядке:
Добавьте успокоение и запасной выход. Ответьте на тихую тревогу: «Я что‑то сломаю?» Короткая строка вроде «Можно изменить позже» плюс очевидный способ отменить, редактировать или удалить уменьшает колебание.
Протестируйте с 3 людьми, затем отслеживайте завершение. Наблюдайте, где они останавливаются и что нажимают первым. После запуска отслеживайте просмотры пустого состояния, клики по основной CTA и процент завершения вехи.
Пример: если кто‑то открыл CRM и видит пустую вкладку «Контакты», самый быстрый успех — «Добавьте ваш первый контакт». Оставьте только имя + email, предложите «Импорт CSV» как запасной вариант и успокойте, что поля можно будет обновить позже.
Большинство «застрявших» пустых состояний проваливаются по одной причине: они делают следующий шаг рискованным или непонятным.
Если показывать три одинаковые по важности кнопки, пользователи замирают. Выберите одну основную и одну вторичную. Всё остальное спрячьте за тихой ссылкой «Больше опций».
«Мощные дашборды, гибкие роли, продвинутые настройки» не подскажет, что делать прямо сейчас. Замените это на результат, который получит пользователь после клика.
Примеры:
Длинные формы в пустом состоянии воспринимаются как обязательство. Если нужны данные — заработайте их позже. Начните с минимального шага, который даст что‑то видимое.
Вместо запроса имени, размера компании, роли и целей до загрузки, попросите только «Имя проекта» и сделайте остальное опциональным после появления первого экрана.
Юмор — допустим, но не там, где нужна ясность. «Здесь ничего нет» — промашка. Скажите точно, что произойдёт после клика и чего не случится.
Некоторые пользователи не могут создать с нуля. Предложите реальную альтернативу: импорт, шаблон или пример. Например, если у человека нет идеи для Koder.ai, «Начать с примера приложения» даст рабочий экран без написания полного специфицированного запроса.
Новый пользователь должен понять, что это за экран, почему он важен и что делать дальше примерно за пять секунд.
Успокоение превращает колебание в действие. Добавьте небольшую строку возле CTA, снижающую страх: «Можно изменить позже» или «Ничего не публикуется без подтверждения». Держите её спокойной и конкретной.
Простой тест: попросите коллегу взглянуть на экран 5 секунд, затем рассказать, что произойдёт, если нажать основную кнопку. Если он не может ответить — упростите копию или иерархию.
Если вы строите потоки настройки в chat‑first билдере вроде Koder.ai, тот же чек‑лист применим. Пустое состояние должно пригласить к одному успешному следующему действию: старт с шаблона, импорт данных или генерация первой рабочей версии, которую можно спокойно редактировать.
Соло‑основатель регистрируется в Koder.ai и открывает новое рабочее пространство. Он попадает на экран «Проекты» с нулём приложений и без понимания, как выглядит «хорошо».
Вместо пустой таблицы пустое состояние показывает короткое обещание, ясный следующий шаг и небольшую заметку безопасности. Вот один пример копии и CTA (временные оценки — для проверки):
Your workspace is empty.
Create your first app in 5 minutes. Start with a template or describe what you want in plain English.
[Create your first app]
Secondary: Import existing code | Browse templates
Note: You can export the source code anytime.
После того как основатель нажмёт Create your first app, следующий экран задаст один простой вопрос: «Что вы строите?» с одним полем ввода и двумя примерами подсказок (например, «CRM для небольшого агентства» или «Лендинг с формой подписки»). Держите путь узким: одно очевидное поле, одна очевидная кнопка.
Экран два может быть быстрым обзором плана (фичи, страницы, данные), затем шаг сборки и рабочее превью. Первый момент успеха — когда пользователь может сделать реальное действие в превью, например добавить запись или отправить тестовую подписку.
После появления данных возвращающиеся пользователи не должны видеть тот же пустой экран. Страница «Проекты» может перейти в вид «последние приложения» с одной заметной кнопкой быстрого создания (например, Новое приложение) и меньшими действиями (например, Снимки или Развёртывание) в зависимости от их прошлого взаимодействия.
Чтобы понять, делает ли пустое состояние свою работу, отслеживайте несколько метрик:
Выберите один поток настройки для улучшения на этой неделе. Либо тот, где наибольший отток, либо тот, по которому проходят новые пользователи первым. Перепишите его пустое состояние так, чтобы оно быстро отвечало на три вопроса: что это, зачем это делать сейчас и какой следующий клик.
Держите изменение небольшим. Вы не переделываете весь onboarding. Вы делаете первый успешный шаг очевидным.
Простой план на неделю:
После первого успеха стандартизируйте. Создайте короткий внутренний паттерн для пустых состояний: отступы, стиль заголовков, правила иконок/иллюстраций и единая вёрстка CTA. Когда команды следуют одной структуре, пользователи учатся ей один раз и двигаются быстрее везде.
Если вы создаёте новое приложение и хотите быстро прототипировать шаги настройки, Koder.ai (koder.ai) поможет набросать поток в Planning Mode и сгенерировать первую версию для теста, затем итеративно улучшать по месту, где люди реально застревают.
Пустое состояние — это то, что видит пользователь, когда ещё нет чего показывать: он не создал, не импортировал и не подключил ничего. Оно должно объяснять, для чего этот экран, и указывать на следующее успешное действие, а не оставлять пользователя в догадках.
Экран загрузки говорит «подождите, что‑то происходит», а состояние ошибки — «что‑то пошло не так, вот почему». Пустое состояние при настройке говорит «здесь пока ничего нет, и это нормально», а затем направляет пользователя создать, импортировать или начать с шаблона, чтобы получить первый реальный результат.
Старайтесь быстро ответить на три вопроса: что это за экран, почему он пустой и что делать дальше. Если пользователи не поймут этого за несколько секунд, они остановятся, подумают, что сделали что‑то не так, или уйдут.
Простая структура: коротко объясните, для чего этот раздел, предложите одну очевидную основную кнопку и добавьте строку успокоения, снижающую страх или усилие. Текст должен быть коротким — пользователь не должен читать целый абзац, чтобы понять, куда нажать.
По умолчанию — одна основная кнопка, соответствующая наиболее распространённому следующему шагу, а все остальные действия — явно вторичные. Если показывать несколько равнозначных кнопок, люди часто замирают, не зная, какой путь «правильный».
Выводите «Создать», когда начать с нуля — самый быстрый путь к видимому результату (первый проект, первая запись). Выводите «Импорт», когда у новых пользователей уже есть данные в другом месте. Выводите «Шаблон», когда важнее скорость и готовая отправная точка.
Заголовки работайте по формуле «Результат + объект», например «Создайте ваш первый проект», а не внутренние названия фич. В теле — одна фраза: что происходит после клика, чтобы пользователь мог предсказать результат.
Расположите заголовок, одну короткую фразу и основную кнопку в компактном блоке с ясной иерархией. Вторичные действия должны быть визуально тише и находиться поблизости. Не прячьте основную кнопку далеко внизу, чтобы не заставлять пользователя искать её.
Добавьте короткую заметку рядом с действием: «Вы можете изменить это позже» или «Публикация не произойдёт без вашего подтверждения». В инструментах вроде Koder.ai полезно упомянуть обратимые операции: снимки состояния/откат или возможность экспортировать исходный код.
Отслеживайте, как часто пользователи видят пустой экран, нажимают основную CTA и достигают целевой вехи. Смотрите также время до первого успеха и отток между пустым состоянием и следующим шагом — пустое состояние может получать клики, но не приводить к реальным результатам.