Пустое состояние интерфейса: как продумать экран, если данных ещё нет

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

Опорные решения для пустого состояния

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

Выясните, почему данных ещё нет

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

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

Определите задачу экрана: объяснить, направить или предложить действие

Для работы понадобятся описание пользовательского сценария, перечень причин отсутствия данных и согласованные действия, которые доступны на экране. Уточните у владельца продукта, какие права нужны для этих действий и что произойдёт после нажатия.

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

Сведите интерфейс к одному ясному следующему шагу

Выстройте экран от объяснения ситуации к действию. В UX/UI дизайне пустое состояние должно помогать продолжить сценарий, а не заставлять пользователя разбираться в интерфейсе.

1. Назовите причину.

   Сформулируйте коротко и конкретно: например, "В списке пока нет задач". Не обвиняйте пользователя и не создавайте впечатление, что данные потерялись.

2. Объясните пользу.

   Одной фразой опишите, что изменится после действия: например, "Добавьте задачу, чтобы отслеживать её срок и статус".

3. Выберите основное действие.

   Оставьте заметным один главный призыв, например "Создать задачу". Дополнительные ссылки добавляйте только тогда, когда они действительно нужны для продолжения сценария.

4. Продумайте безопасный переход.

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

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

Быстрый режим

1. Установите причину отсутствия данных.
2. Напишите короткое объяснение ситуации.
3. Оставьте одно подходящее основное действие.
4. Проверьте переход и состояние после действия.

Покажите ценность продукта до появления контента

Проверьте экран по этому списку перед передачей в разработку:

• Причина отсутствия данных понятна без дополнительных объяснений.
• Текст соответствует конкретному сценарию, а не повторяет общую фразу вроде "Здесь пока пусто".
• Основное действие названо глаголом и описывает ожидаемый результат.
• Пользователь понимает, зачем выполнять действие.
• Иллюстрация, если она есть, не отвлекает от сообщения и не дублирует его без пользы.
• Экран не обещает функций или результатов, которых нет в продукте.
• Сообщение и действие доступны людям, у которых есть нужные права.

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

Отличите первый запуск от пустой выдачи и ошибки загрузки

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

• Показываете предложение создать данные, когда список пуст из-за фильтров.
• Используете пустое состояние вместо сообщения о сбое или недоступности сервиса.
• Показываете призыв к действию, которое недоступно пользователю по его роли.
• Скрываете причину отсутствия данных за декоративной иллюстрацией.
• Добавляете несколько одинаково заметных кнопок и затрудняете выбор.
• Не объясняете, что произойдёт после нажатия.
• Предлагаете повторить действие, хотя проблема не связана с действиями пользователя.

Проверьте сценарий на мобильном экране и с клавиатуры

Выберите способ проверки под этап работы и тип интерфейса:

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

Если интерфейс создаётся в рамках услуги UX/UI дизайна, передайте разработчикам тексты и правила переходов вместе с макетом. Так смысл пустого состояния сохранится и после реализации.

Разбор практических ситуаций при проектировании пустого состояния

Нужно ли добавлять иллюстрацию?

Только если она помогает объяснить ситуацию или поддерживает понимание действия. Если иллюстрация отвлекает от сообщения, достаточно текста и ясной кнопки.

Что показать, если пользователь ничего не добавил?

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

Как поступить, если пустой результат вызван фильтром?

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

Можно ли использовать пустое состояние при ошибке загрузки?

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

Как проверить, понятен ли следующий шаг?

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

Что проверить для пользователей клавиатуры?

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