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