Дизайн пустых состояний: как превратить пустой экран в подсказку
Практика4 минРедакция Innovialabs
Коротко
Пустое состояние должно объяснить, что появится на экране, почему сейчас пусто и что сделать дальше, с одним понятным действием; первому запуску, пустому поиску, ошибке и очищенному экрану нужны разные сообщения.
Зачем нужно пустое состояние
Пустой экран — момент, когда пользователь не знает, что делать. Хорошее пустое состояние отвечает на три вопроса:
- Что это за место? Что здесь появится.
- Почему пусто? Данных ещё нет, ничего не нашлось, что-то сломалось или всё сделано.
- Что дальше? Одно понятное действие.
Простая формула закрывает большинство случаев: заголовок + одно предложение + основная кнопка. Иконка или иллюстрация — по желанию.
Четыре типа
| Тип | Когда возникает | Что сказать | Действие |
|---|---|---|---|
| Первый запуск | Пользователь ещё ничего не создал | Что здесь появится и чем это полезно | Создать первый элемент, импорт, шаблон |
| Нет результатов | Поиск или фильтры ничего не нашли | Что совпадений нет и как расширить поиск | Сбросить фильтры, изменить запрос |
| Ошибка | Данные не загрузились, нет связи, нет доступа | Что пошло не так, простыми словами | Повторить, запросить доступ |
| Очищено | Пользователь всё выполнил или удалил | Что это нормальное или хорошее состояние | Часто ничего или мягкий следующий шаг |
Частая ошибка — смешивать их: тот, кто отфильтровал список до нуля, не должен видеть «Создайте свой первый проект».
Первый запуск
Это первое впечатление пользователя от функции, поэтому экран работает почти как онбординг.
[ иконка ]
Проектов пока нет
Создайте проект, чтобы собрать задачи, файлы и людей в одном месте.
[ Создать проект ] Импортировать из файла
- Показывайте пользу, а не только отсутствие.
- Предложите короткий путь: шаблон, демо-данные или импорт.
- Одна основная кнопка, второстепенные варианты — ссылками.
Нет результатов
По запросу «настольная лампа» ничего не найдено
Проверьте написание или попробуйте более общее слово.
[ Сбросить фильтры ]
- Повторите запрос, чтобы было видно, что искали.
- Покажите активные фильтры и дайте снять их в одно касание.
- По возможности предложите альтернативы: популярные товары, похожие категории, исправленное написание.
Ошибки
Не удалось загрузить заказы
Проверьте подключение к интернету и попробуйте ещё раз.
[ Повторить ]
- Объясните, что произошло, простым языком и не обвиняйте пользователя.
- Технические детали и коды ошибок — мелким текстом ниже, а не в заголовке.
- При отсутствии прав назовите следующий шаг: «У вас нет доступа к этой папке» — Запросить доступ.
- Оставьте навигацию и шапку на месте, чтобы пользователь не оказался в тупике.
Очищено или выполнено
Всё прочитано
Новые сообщения появятся здесь.
- Подойдёт спокойный позитивный тон, но без перебора с шутками.
- Действие нужно не всегда. Если есть естественный следующий шаг, предложите его мягко.
Правила макета
- Показывайте пустое состояние внутри области, где был бы контент, а не на весь экран. Шапка, вкладки и фильтры остаются на месте.
- Порядок элементов: иконка или иллюстрация (по желанию, умеренного размера) → заголовок → одна-две строки текста → основная кнопка → второстепенная ссылка.
- Иллюстрация не должна выталкивать кнопку за пределы экрана, особенно на мобильных.
- Загрузка — это не пустота. Пока данные грузятся, показывайте скелетон или спиннер. Мелькающее на секунду «Нет данных» перед появлением контента сбивает с толку.
Правила текста
- Конкретно: «Счетов пока нет» вместо «Нет данных».
- Причину и следующий шаг — в одном-двух коротких предложениях.
- Текст кнопки начинайте с глагола: «Создать счёт», «Сбросить фильтры».
- В ошибках держите нейтральный и полезный тон; игривые тексты оставьте для первого запуска и выполненных задач.
Частые ошибки
- Голое «Нет данных» без объяснения и действия.
- Одно и то же сообщение для первого запуска и пустого поиска.
- Пустое состояние, показанное во время загрузки.
- Огромная иллюстрация и крошечная или отсутствующая кнопка.
- Тупики: нечего нажать и некуда вернуться.
- Спрятанные фильтры, из-за которых нельзя отменить то, что привело к нулю результатов.
Частые вопросы
Нет. Иллюстрация может добавить характера экрану первого запуска, но основную работу делают заголовок, текст и кнопка. В ошибках и пустом поиске маленькая иконка или её отсутствие часто лучше.