Дизайн пустого состояния интерфейса: как спроектировать каталог или личный кабинет

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

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

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

Определите, почему данных нет: первый запуск, фильтр или сбой

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

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

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

Сохраните контекст пользователя и объясните причину пустоты

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

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

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

Выберите одно безопасное действие для продолжения сценария

Перед выполнением шагов проверьте риски и ограничения:

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

1. Определите состояние. Сопоставьте причину пустоты с подтверждёнными данными: первый запуск, отсутствие совпадений или ошибка загрузки. Не объединяйте их в один универсальный экран.
2. Назовите причину простыми словами. Укажите, что именно пользователь видит: например, записей пока нет или по заданным условиям ничего не найдено. Не сообщайте о сбое как о пустом результате.
3. Выберите одно основное действие. Для первого запуска это может быть создание записи, для пустой выдачи - изменение условий поиска, для ошибки - повторная загрузка. Не предлагайте несколько одинаково заметных кнопок, если они ведут к разным сценариям.
4. Сохраните введённые параметры. При возврате в каталог оставьте поисковый запрос и фильтры. Если действие может изменить или удалить данные, сначала предупредите пользователя и запросите подтверждение в рамках принятого сценария.
5. Проверьте результат перехода. Убедитесь, что основное действие ведёт в ожидаемое место, а после возврата пользователь понимает, изменилось ли состояние. Повторный запрос не должен незаметно создавать дубликат.

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

Напишите текст, который не обвиняет пользователя и не обещает лишнего

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

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

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

Предусмотрите возврат после ошибки и проверьте доступность экрана

Частые ошибки, которые стоит исключить при ревью:

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

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

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

Выберите способ проверки по типу продукта и риску сценария:

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

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

Автор

Марина Крылова

Разбор спорных сценариев пустого интерфейса

Нужно ли показывать пустое состояние, если каталог впервые открыт?

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

Стоит ли очищать фильтры, если по ним ничего не найдено?

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

Как отличить пустую выдачу от ошибки загрузки?

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

Что делать, если повторная загрузка может отправить действие второй раз?

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

Должны ли каталог и личный кабинет использовать одинаковый пустой экран?

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

Достаточно ли одной иллюстрации, чтобы объяснить пустое состояние?

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