Пустые состояния интерфейса: что показать, когда данных ещё нет

Новый пользователь открыл раздел проектов и увидел белый экран. Непонятно, где он оказался, завершилась ли загрузка и что нужно сделать дальше. Так выглядит незапланированное пустое состояние: данные отсутствуют, а интерфейс не объясняет причину. Исправление начинается с сценария, а не с выбора красивой картинки.

В этой статье соберём пустые состояния для вымышленного сервиса командных проектов. Разберём первый запуск, поиск без результатов, слишком узкие фильтры и очищенный список. Если нужен краткий разбор понятия, начните с термина Empty state. Здесь сосредоточимся на решениях, которые можно перенести в свой макет.

Сначала выясните, почему экран пуст

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

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

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

Первый запуск: объясните результат первого действия

В новом аккаунте человек ещё не знает, зачем нужен раздел. Заголовок «Здесь пока пусто» сообщает мало. В нашем учебном примере используем «Создайте первый проект», пояснение «Соберите задачи и файлы команды в одном месте» и кнопку «Создать проект». Текст связывает действие с будущим содержимым раздела.

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

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

Пустой поиск: сохраните запрос и помогите его изменить

Человек уже совершил действие и ждёт результат. Поэтому здесь уместна обратная связь: «По запросу „план запуска“ ничего не найдено». Сам запрос остаётся в поле, чтобы его можно было поправить. Удалять введённый текст после неудачного поиска неудобно: пользователю придётся вспоминать и набирать его снова.

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

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

Фильтры без результатов: покажите, что можно сбросить

Нулевой результат после фильтрации не означает, что раздел пуст. Сохраните выбранные фильтры видимыми и объясните связь: «Нет проектов с выбранными фильтрами». В нашем примере можно оставить название проекта в поиске и предложить «Сбросить фильтры». Это точнее, чем «Начать заново».

Зафиксируйте, что именно сбрасывает кнопка. Только статус и исполнителя? Ещё и диапазон дат? Сохраняется ли сортировка? Пользователь не должен узнавать об исчезновении поискового запроса после нажатия. Если действие очищает всё, подпись «Сбросить поиск и фильтры» честнее описывает результат.

Очищенный список: подтвердите завершение

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

Для раздела уведомлений отсутствие элементов может быть нормой. Фраза «Новых уведомлений нет» уже объясняет ситуацию. Дополнительная иллюстрация и призыв к действию здесь необязательны. Оценивайте пользу каждого элемента: помогает ли он понять состояние или продолжить работу?

Соберите текст из трёх коротких частей

Начните с ответа на вопрос «Что произошло?». Затем добавьте причину или описание будущего содержимого, если без этого смысл неясен. Последним сформулируйте действие. В рекомендациях Carbon об empty states заголовок, пояснение и возможное действие образуют основу сообщения; изображение остаётся необязательным.

Читайте текст вместе с окружающим интерфейсом. Если над блоком уже написано «Проекты», повторять это слово в каждом предложении не нужно. Вместо «В разделе проектов пока отсутствуют созданные вами проекты» достаточно «Создайте первый проект». При этом в отрыве от контекста подпись кнопки всё равно должна описывать действие.

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

Добавьте иллюстрацию, если она помогает

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

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

Смысл сообщения должен оставаться доступным без картинки. Декоративную иллюстрацию при реализации можно исключить из озвучивания; смысловую информацию нужно передать текстом. Кнопки, ссылки и сообщение проверяйте с клавиатуры. Если результаты обновляются без перезагрузки, согласуйте с разработчиком, как пользователь узнает об изменении, сохранив текущий фокус.

Опишите переходы, а не только внешний вид

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

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

Проверьте решение коротким сценарием

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

Перед передачей проверьте четыре вещи: причина отсутствия данных названа верно; основное действие доступно текущей роли; пользователь может вернуться к работе; сообщение не конфликтует с загрузкой или ошибкой. Для дальнейшей практики используйте урок о пустых состояниях и соберите в одном файле варианты для вашего продукта. Результатом должна стать понятная система поведения, а не коллекция одинаковых заглушек.