Пустые состояния

Если на странице нет контента, нужно правильно показать это состояние, чтобы пользователь быстро понял, что произошло и какие действия ему доступны. В этом гайде собраны основные виды пустых состояний.

Если данных ещё нет — используйте серую заглушку.

Убирайте со страницы такие элементы как фильтр, поиск, заголовки таблицы и т.д. Без контента эти элементы теряют функциональность и только перетягивают внимание пользователя на себя.

Иконку и текст уводите на второй план. Такой внешний вид не будет перетягивать на себя внимание и быстрее сообщит пользователю, что на странице пусто.

Когда от пользователя требуется что-то включить, купить или активировать, то пустое состояние должно побуждать к этому. Используйте цветную иконку.

Если пользователь сам сделал список пустым, например закрыл все задачи или сдал все отчёты, то используйте цветную иконку и напишите эмоциональный текст.

Если сервис не смог загрузить контент, покажите сообщение об ошибке.

А когда пользователь успешно закончил сложный сценарий, покажите ему в награду яркую иконку и напишите эмоциональный текст.

Если поиск или фильтрация дали нулевой результат, покажите короткое текстовое сообщение. Заглушка с иконкой в этом случае избыточна — она отвлекает от сценария поиска.

Основные действия на странице должны оставаться на своем обычном месте — это формирует привычку.

Заглушка пустого состояния позиционируется по центру контентной области.

Заголовок — Medium 16 Bold, текст ниже — Small 14.

Иконки из Kontur Icons. Размер 64 × 64 px. Стиль — Regular для пустых состояний и Solid для статусов.

На мобильных экранах размер заглушки не меняется.