Пустое состояние интерфейса должно объяснять, почему на экране нет данных, и показывать безопасное следующее действие. Сначала определите причину пустоты: пользователь ещё не создал контент, поиск ничего не нашёл или произошёл сбой. Затем предложите подходящий шаг, например создать запись, изменить запрос или повторить загрузку, не скрывая важных ограничений.
Что должно сообщать пустое состояние
- Почему контент отсутствует: это ожидаемо или возникла проблема.
- Что пользователь может сделать дальше и к какому результату приведёт действие.
- Как действовать безопасно: например, изменить запрос или повторить загрузку без потери введённых данных.
- Какая информация поможет продолжить, если подходящего действия сейчас нет.
Определите причину пустоты и доступный пользователю путь
Такой подход подходит для списков, каталогов, личных кабинетов, поиска и других экранов, где контент может отсутствовать по разным причинам. Он особенно полезен, если пользователь не сразу понимает, что произошло или как продолжить.
Не используйте единый пустой экран для обычного отсутствия данных и ошибки загрузки. Не предлагайте действие, которое недоступно пользователю, не соответствует его правам или может привести к потере данных.
В UX/UI дизайне интерфейса различайте как минимум три ситуации:
- Первое использование: данных ещё нет, потому что пользователь не создал их.
- Пустой результат: данные есть в системе, но не подходят под запрос или фильтры.
- Ошибка: данные не удалось загрузить или обработать.
Для каждой ситуации определите причину, доступное действие и запасной путь. Например, при пустом поиске предложите изменить запрос; при сбое - повторить загрузку и сохранить введённый текст.
Сформулируйте следующий шаг через действие, а не общую подсказку
До подготовки макета соберите требования от продуктовой команды и разработчиков. Нужны данные о причинах отсутствия контента, пользовательских правах, доступных действиях и поведении системы при ошибке.
- Проверьте, какие действия разрешены в конкретном состоянии и роли пользователя.
- Уточните, сохраняются ли поисковый запрос, фильтры и незавершённые данные после повторной попытки.
- Согласуйте, куда ведут кнопки и ссылки, и что происходит после нажатия.
- Подготовьте текст кнопки, короткое объяснение и сообщение о результате действия.
- Определите способ проверки: прототип, тестирование сценария и продуктовые события для аналитики.
В дизайне интерфейса приложения формулируйте действие конкретно: "Создать проект" понятнее, чем "Начать". Для разработки интерфейса сайта заранее согласуйте состояния загрузки, пустого результата и ошибки, чтобы макет соответствовал поведению продукта.
Подберите иллюстрацию, которая не отвлекает от задачи
Перед работой с графикой учтите риски и ограничения:
- Иллюстрация не должна заслонять объяснение или основное действие.
- Декоративная графика не должна передавать единственную информацию о причине пустоты.
- Анимация и крупные изображения могут отвлекать; проверьте, можно ли обойтись без них.
- Текст и интерактивные элементы должны оставаться заметными при увеличении и на узком экране.
- Зафиксируйте назначение экрана. Запишите, что пользователь должен понять и какое действие ему доступно. Иллюстрация должна поддерживать эту задачу, а не заменять текст.
- Выберите тип визуального решения. Для простого состояния достаточно иконки или ненавязчивой графики; если изображение не добавляет смысла, оставьте экран без него.
- Сохраните приоритет действия. Разместите объяснение рядом с кнопкой или ссылкой, чтобы связь между причиной и следующим шагом была очевидной. Не делайте иллюстрацию визуально заметнее основного действия.
- Проверьте доступность. Убедитесь, что смысл не передаётся только цветом или изображением, текст читаем, а кнопка понятна при навигации с клавиатуры. Для декоративной графики предусмотрите корректное поведение для вспомогательных технологий.
- Сверьте макет с реальным содержимым. Проверьте длинные подписи, локализацию, разные размеры экрана и появление ошибки. Для дизайн пустого состояния интерфейса важно, чтобы оформление не скрывало сообщения и не ломало порядок действий.
Проверьте сценарии: новый аккаунт, пустой поиск и сбой загрузки
Проведите проверку на прототипе или в готовом интерфейсе. Оцените, может ли пользователь понять причину и выбрать безопасный путь без подсказки специалиста.
- Для нового аккаунта объяснено, почему список пуст, и доступно создание первого элемента.
- Для пустого поиска указано, что совпадений нет, и предложено изменить запрос или фильтры.
- При сбое загрузки проблема названа прямо, а повторная попытка не удаляет введённые данные.
- Действие на кнопке соответствует её подписи и приводит к ожидаемому результату.
- Пользователь без нужных прав не видит недоступное действие как единственный путь.
- Текст, кнопка и ссылка доступны с клавиатуры, а фокус заметен.
- Сообщение понятно без иллюстрации, цвета и дополнительных пояснений.
- Экран остаётся читаемым при увеличении текста и на узкой ширине.
Предупредите о последствиях действий и защитите данные
Проверьте формулировки и поведение интерфейса: действие из пустого состояния не должно приводить к неожиданной потере информации или создавать ложное впечатление, что данные удалены.
- Не называйте ошибку загрузки отсутствием данных: пользователь может решить, что контент исчез.
- Не показывайте "Создать", если действие недоступно или требует дополнительных прав.
- Не используйте неопределённые призывы вроде "Попробуйте ещё раз" без объяснения, что именно повторится.
- Не очищайте запрос, фильтры или заполненные поля при ошибке, если их можно безопасно сохранить.
- Не обещайте результат, который интерфейс не гарантирует.
- Не делайте удаление или другое необратимое действие основным предложением без понятного предупреждения.
- Не полагайтесь только на цвет, пиктограмму или анимацию для передачи важного сообщения.
Оцените эффективность по переходам и успешному завершению сценария
Смотрите не только на нажатия кнопки. Проверьте, помог ли экран продолжить сценарий: пользователь завершил действие, изменил запрос или восстановил загрузку. Интерпретируйте метрики с учётом типа пустоты и не считайте повторное нажатие признаком успеха само по себе.
- Сравните варианты текста: используйте, если есть несколько ясных формулировок одного и того же действия.
- Проверьте экран без иллюстрации: уместно, когда графика конкурирует с текстом или не помогает понять причину.
- Проведите тестирование сценария: подходит, если команда не уверена, понимают ли пользователи разницу между пустым результатом и ошибкой.
- Разделите аналитику по состояниям: полезно, когда общий показатель скрывает, на каком именно экране пользователь не может продолжить.
Если вы планируете заказать UX/UI дизайн, передайте исполнителю сценарии состояний, ограничения по действиям и критерии проверки. Так результат будет оцениваться не только по визуальному оформлению, но и по тому, помогает ли интерфейс продолжить задачу.
Нюансы проектирования экранов без контента
Как отличить пустой результат от ошибки?
Пустой результат означает, что запрос обработан, но подходящих данных нет. Ошибка означает, что система не смогла выполнить запрос; сообщите об этом отдельно и предложите безопасную повторную попытку.
Нужно ли добавлять иллюстрацию?
Только если она помогает понять контекст или делает экран понятнее. Причина отсутствия данных и доступное действие должны оставаться ясными без графики.
Что писать при первом входе пользователя?
Объясните, что данных пока нет, и предложите конкретное действие для начала работы. Убедитесь, что оно доступно текущей роли пользователя.
Как оформить пустой поиск?
Сообщите, что совпадений не найдено, и предложите изменить запрос или фильтры. Сохраняйте введённый текст, чтобы пользователь мог его скорректировать.
Что делать, если загрузка завершилась ошибкой?
Назовите проблему и предложите повторить загрузку или вернуться к безопасному предыдущему шагу. Не очищайте введённые данные, если их можно сохранить.
Как проверить доступность пустого состояния?
Проверьте чтение текста, навигацию с клавиатуры, видимость фокуса и работу при увеличении. Смысл сообщения не должен зависеть только от цвета или изображения.
Как понять, что пустое состояние работает?
Оцените, понимает ли пользователь причину и завершает ли предложенное действие. Сопоставляйте переходы с успешным завершением сценария, а не только с нажатием кнопки.
Автор: Ирина Белова