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

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

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

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

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

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

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

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

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

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

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

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