Пустые состояния EmptyState
Если на странице нет контента, нужно правильно показать это состояние, чтобы пользователь быстро понял, что произошло и какие действия ему доступны. В этом гайде собраны основные виды пустых состояний.
Данных ещё нет
Если данных ещё нет — используйте серую заглушку.
Убирайте со страницы такие элементы, как фильтр, поиск, заголовки таблицы и т.д. Без контента эти элементы теряют функциональность и только перетягивают внимание пользователя на себя.
Неправильно
Правильно
Иконку и текст уводите на второй план. Такой внешний вид не будет перетягивать на себя внимание и быстрее сообщит пользователю, что на странице пусто.
Неправильно
Правильно
Начало настройки
Когда от пользователя требуется что-то включить, купить или активировать, то пустое состояние побуждает к этому. Используйте цветную иконку.
Закрытые списки
Если пользователь сам сделал список пустым, например закрыл все задачи или сдал все отчёты, то используйте цветную иконку и напишите эмоциональный текст.
Статусы
Если сервис не смог загрузить контент, покажите сообщение об ошибке.
А когда пользователь успешно закончил сложный сценарий, покажите ему в награду яркую иконку и напишите эмоциональный текст.
Ничего не нашлось
Если поиск или фильтрация дали нулевой результат, покажите короткое текстовое сообщение. Заглушка с иконкой в этом случае избыточна — она отвлекает от сценария поиска.
Действия
Основные действия на странице должны оставаться на своём обычном месте — это формирует привычку.
Неправильно
Правильно
Расположение
Заглушка пустого состояния позиционируется по центру контентной области.
Дизайн
Заголовок — Medium 16 Bold, текст ниже — Small 14.
Иконки из Kontur Icons. Размер 64 × 64 px. Стиль — Regular для пустых состояний и Solid для статусов.
Адаптивность
На мобильных экранах размер заглушки не меняется.
