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