Zero-State экраны: как превратить пустое в момент удовольствия

Первые секунды в приложении решают всё. Когда данных ещё нет, именно Zero-State-экран («пустое состояние») формирует у новичка первое впечатление, а у опытного — чувство заботы. В статье покажу, как превратить Zero-State экраны в микромомент, который радует и мотивирует.

• Пользователь читает экран пустого состояния дольше, чем карточку c данными — используйте это окно внимания.
• Хороший Zero-State соединяет пользу (что дальше?) и эмоцию (почему мне это нравится?).
• Три слоя контента — метафора, инструкция, вызов — помогают разным типам пользователей.
• Метрики времени до первого целевого действия падают вдвое, если Zero-State включает интерактив.

Почему «пустота» может говорить громче данных?

Пятничным утром команда доставки заметила: 38 % новых курьеров уходят ещё до первой заявки. Мы изучили логи и увидели — в среднем 7 секунд они смотрят на серый «Нет заказов», затем закрывают приложение. Перерисовали Zero-State: добавили иллюстрацию с велосипедом, шорт-гайд из трёх шагов и кнопку «Проверить район». Через неделю retention D1 вырос на 12 %. Разве это не доказательство силы первого взгляда?

Список действий:

1. Проведите когортный анализ от установки до первого целевого события.
2. Отфильтруйте сессию, где пользователь видел Zero-State > 3 секунд.
3. Запишите гипотезу: «Эмоциональный контент + явный call-to-action снизят time-to-first-action на 25 %».
4. Набросайте 2-3 варианта иллюстраций, отражающих контекст задачи.
5. Запланируйте A/B-тест с контрольной группой.

// Skeleton Zero-State на SwiftUI
struct EmptyOrders : View {
 var retry : () -> Void
 var body: some View {
   VStack(spacing: 24) {
     Image(«bike»)
       .accessibilityLabel(«Весёлый курьер на велосипеде»)
     Text(«Пока заказов нет»)
       .font(.title3)
     Text(«Проверьте соседний район и заберите первый заказ быстрее»)
       .multilineTextAlignment(.center)
     Button(«Проверить район», action: retry)
       .buttonStyle(.borderedProminent)
   }
   .padding()
 }
}

Мини-вывод: данные безэмоциональны — именно поэтому Zero-State должен разговаривать как заботливый друг и подталкивать к первому действию.

ОНЛАЙН-ПРАКТИКУМ

ЗАПУСК DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ

ЧТО БУДЕТ НА ОБУЧЕНИИ?

• ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
• Где и как применять? Потестируем модель после установки на разных задачах
• Как дообучить модель под себя?

Участвовать бесплатно

Как добавить «три слоя смысла» в Zero-State-экран?

Пользователь может оказаться: а) новичком, б) вернувшимся после паузы, в) активным, но столкнувшимся с временной пустотой (например, фильтр вернул 0 результатов). Один экраны — три мотивации, и каждому нужен свой слой: метафора, инструкция, вызов. Метафора быстро создаёт эмоцию, инструкция убирает фрустрацию, вызов стимулирует действие.

Список действий:

1. Выпишите три персоны и их эмоциональное состояние.
2. Придумайте метафору, связанную с доменной областью.
3. Сформулируйте инструкцию одним предложением, ≤ 14 слов.
4. Добавьте вызов-кнопку, начинающуюся с глагола.
5. Проверьте, что текст читается за 5 секунд голосом TTS.
6. Протестируйте цветокоррекцию иллюстрации на WCAG 2.1.

Пустая деревянная полка будто шепчет: добавь первую книгу.

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

> Пересмотрите сегодня хотя бы один ваш экран «нет данных» — вы удивитесь, как быстро улучшится метрика вовлечения.

Как измерить успех и не потерять производительность?

Мы — инженеры, а не художники, и любим цифры. После редизайна Zero-State важно доказать, что креатив окупился. Установите события analytics.empty_state_viewed и analytics.empty_state_action_clicked. Сравните среднее время до первого meaningful-event. Не забудьте про производительность: тяжёлая SVG-анимация может добавить 200 мс к TTI, а это уже чувствительно.

Список действий:

1. Добавьте счётчик TTI (Time to Interactive) в performance-overlay.
2. Запишите lightweight PNG и heavy Lottie, сравните размер бандла.
3. Настройте отправку custom_user_property «saw_empty_state».
4. В отчёте Looker Studio постройте Box-plot времени до действия.

{
 "event": "empty_state_action_clicked",
 "user_id": 213,
 "screen": "orders_empty",
 "time_since_install": 482,
 "variant": "illustration_v2"
}

Мини-вывод: красота без скорости — ничто; метрика TTI < 100 мс и +25 % конверсии делают аргумент водонепроницаемым.

Финальный чек-лист Zero-State-экрана

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