Что такое пустое состояние — и почему это первый экран каждого пользователя

Ты собрал приложение. Открыл, добавил пару задач, всё красиво. Показываешь другу — а у него на экране пусто. Ни одной задачи, потому что он только что зарегистрировался.

И вот тут неожиданная вещь: первый экран, который видит каждый новый пользователь, — пустой. Всегда. Это буквально самый посещаемый экран твоего приложения, и обычно он же — единственный, который никто не проектировал.

Пустой экран называется пустым состоянием, и это не «нет данных». Это разговор.

Три разные пустоты, которые все делают одинаково

Слово одно, ситуации совсем разные — и текст в них должен быть разный.

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

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

Всё сделано. Список пуст, потому что задачи закончились. Это не проблема, а награда — и текст должен звучать соответственно.

Если во всех трёх случаях написано «Нет данных», два экрана из трёх работают против тебя. Человек на первом запуске решит, что приложение сломалось; человек с фильтром решит, что база пустая.

Главная ошибка: пустота вместо загрузки

Самый частый и самый вредный вариант — когда «Ничего не найдено» показывают, пока данные ещё летят с сервера.

Выглядит так: экран открылся, компонент отрисовался с пустым массивом, показал «Записей нет», через полсекунды пришли данные и подменили сообщение списком.

Человек за эти полсекунды успел прочитать, что записей нет. И либо ушёл, либо решил, что приложение врёт. Исследователи Nielsen Norman Group разбирают ровно этот сценарий: интерфейс сообщает ложный статус системы, а потом молча его заменяет — доверие падает сильнее, чем от честного ожидания.

Лечится одной проверкой. У списка не два состояния, а минимум три:

• loading — идёт запрос, показываем скелетон или спиннер;
• empty — запрос завершился, данных правда нет;
• error — запрос упал, и это вообще не пустота.

Ошибка новичка в том, что loading и empty схлопываются в одно items.length === 0. Разведи их явным флагом — и половина проблемы исчезнет.

Что писать на пустом экране

Рабочая структура — три элемента, ни одного лишнего:

1. Что это за место. Одна строка: «Здесь будут твои сохранённые статьи».
2. Почему пусто именно сейчас. «Ты ещё ничего не сохранил» — это не то же самое, что «По фильтру «за неделю» ничего нет».
3. Одно действие. Кнопка, которая создаёт первый элемент. Ровно одна: два равнозначных предложения на пустом экране — это выбор, которого человек делать не готов.

Чего не надо: длинного онбординга на весь экран, трёх ссылок «Документация / Видео / Сообщество» и большой печальной картинки без текста. Иллюстрация не отвечает ни на один вопрос, а место занимает.

Полезный побочный эффект: пустой экран — почти единственное место, где уместно показать неиспользуемые возможности. Человек тут не занят задачей, он осматривается. Именно поэтому в зрелых продуктах на пустом экране предлагают шаблоны и демо-данные.

Демо-данные: помогает или мешает

Соблазнительный ход — заполнить пустой список примерами, чтобы человек увидел, «как будет». Иногда это отличная идея, иногда — источник багов.

Работает, когда: примеры явно помечены как примеры, их можно удалить одним действием, и они не попадают в статистику.

Ломается, когда: демо-задачи неотличимы от настоящих. Человек начинает их редактировать, потом не понимает, почему счётчик показывает семь задач вместо трёх, а ты потом полдня ищешь, откуда в базе взялись записи, которых никто не создавал.

Для первого проекта — на уровне MVP — проще обойтись текстом и кнопкой. Демо-данные добавляй, когда уже понятно, что именно людям непонятно.

Как проверить свои пустые состояния за пять минут

Открой приложение в режиме инкогнито и пройди путь совсем нового человека — без единой записи. Потом введи в поиск заведомо несуществующее слово. Потом отключи сеть и перезагрузи страницу.

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

Нужна ли иллюстрация на пустом экране?

Необязательно. Текст и кнопка работают всегда, картинка — только как акцент. Если рисунок вытесняет объяснение вниз экрана, лучше без него.

Что показывать, если запрос упал?

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

А если данные приходят частями?

Тогда пустое состояние показывать нельзя до конца загрузки — иначе оно мигнёт и пропадёт. Тот же принцип, что и в оптимистичном интерфейсе: показывай уверенно только то, в чём уверен.