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

1. Определите, почему область пуста

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

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

2. Пишите текст в соответствии с причиной

Заголовок должен называть состояние, а дополнительный текст — объяснять его или дальнейшие действия. Заголовок должен легко считываться. Добавляйте предложение, только если оно отвечает на реальный вопрос. Руководство Apple по текстам рекомендует на пустых экранах ясные следующие шаги, подписи, называющие действие, и прямые сообщения об ошибках с объяснением исправления. Избегайте остроумия в ущерб смыслу, расплывчатых заголовков вроде «Здесь ничего нет» и текста, обвиняющего человека.

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

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

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

3. Предлагайте полезный, а не обязательный следующий шаг

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

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

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

• Выберите одно основное действие, которое напрямую устраняет причину.
• Добавляйте вторичный путь к справке, только если он отвечает на вероятный следующий вопрос.
• Используйте спокойное сообщение о завершении, когда пустой результат — хорошая новость.
• Убедитесь, что действие понятно пользователям клавиатуры и программы чтения с экрана.

4. Проверяйте всё состояние, а не только иллюстрацию

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

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

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