Пустые состояния — первый экран, который видит новый человек

Ты долго проектировал главный экран: графики, списки, фильтры. В макете он заполнен аккуратными демо-данными. Новый пользователь этот экран не увидит. Он увидит то же самое, только пустое: оси без линий, таблицу из одной строки заголовков и надпись «Нет данных».

Пустое состояние — это не исключение, а первый экран продукта для каждого нового человека. И нередко последний.

Что не так с «Нет данных»

Надпись «Нет данных» сообщает факт, который человек и так видит. Она не объясняет, почему здесь пусто, нормально ли это и что делать дальше. А пустой экран без объяснения легко принять за поломку: наверное, не загрузилось.

Ещё хуже пустые состояния, которые никто не задумывал: график, рисующий ровный ноль, пагинация «страница 1 из 0», фильтр с «0 результатов» и без кнопки сброса.

Что положить на пустой экран

Хорошее пустое состояние отвечает на три вопроса: что здесь будет, почему сейчас пусто и что сделать, чтобы появилось.

Одна строка о том, что здесь появится: «Здесь будут счета, которые ты отправил клиентам».
Одно главное действие: «Создать первый счёт». Одно, а не четыре.
При необходимости второе, тихое: импорт, пример, справка.

Иллюстрация допустима, но не заменяет текст и кнопку. Если убрать картинку и экран перестал быть понятным, проблема не в картинке.

Пусто бывает по-разному

У пустоты разные причины, и на каждую нужен свой ответ.

Первый раз. Человек ещё ничего не создал. Здесь работают объяснение и главное действие. Можно показать, как экран выглядит с данными: пример, честно помеченный как пример, или кнопку «заполнить демо-данными», которые потом легко удалить.

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

Всё сделано. Пустой список задач или входящих — хорошая новость, а не провал. Тут уместно спокойное «всё разобрано» без призыва немедленно что-то создать.

Ошибка или нет доступа. Это не пустота, и показывать её как пустоту нельзя. Если данные не загрузились, человек должен узнать, что произошла ошибка и можно повторить, а не решить, что у него ничего нет. Особенно в продуктах с деньгами: пустой список платежей вместо ошибки пугает сильнее, чем честное «не получилось загрузить, попробуй ещё раз».

Пустота внутри экрана

Пустыми бывают не только целые страницы. Пустой блок на дашборде, пустая вкладка в карточке клиента, пустой список комментариев. Каждому хватит одной строки текста вместо голой рамки. Для маленьких блоков достаточно «Комментариев пока нет» — без кнопок и иллюстраций.

Как найти все пустые состояния

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

Таких мест обычно больше, чем экранов в макетах. Особенно в приложениях, собранных с ИИ: генератор рисует экран с данными, потому что в запросе описан экран с данными. О пустом варианте его никто не просил.

Самое главное

Пустые состояния делаются за день-два, а смотрит на них каждый новый человек. Это одна из самых дешёвых правок, которая заметно влияет на то, сколько людей доходят до первого полезного действия.

SUBXCAT проходит продукт свежим аккаунтом, находит пустые и сломанные состояния и закрывает их понятным текстом, действиями и честными ошибками.