Пустые состояния: краткое практическое руководство

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

Что такое пустые состояния, из каких элементов они состоят, как обычно применяются, каких видов бывают + советы по их реализации.

Пустые состояния нередко упускаются из виду при проектировании цифровых продуктов. Хотя с ними сталкиваются только 2–5% пользователей, продуманные пустые состояния могут повысить юзабилити, укрепить индивидуальность бренда и создать эмоциональную связь с аудиторией.

Что такое пустое состояние?

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

Анатомия

Хорошо структурированное пустое состояние обычно включает:

Визуальный элемент (опционально): изображение или иконка, которое/ая привлекает внимание к пустой области и визуально усиливает сообщение.

Заголовок: короткое сообщение, которое информирует о состоянии системы (например, «Нет сохраненных карт»).

Объяснение: короткий абзац, который:

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

Действие (опционально): призыв к действию (CTA), который подталкивает пользователей к заполнению пространства или изучению альтернатив.

Распространенные сценарии

Пустые состояния могут появляться в следующих сценариях:

Первое использование: Когда люди первый раз заходят в приложение, где еще нет данных. Пример: новая учетная запись Dropbox.

Очистка: Когда пользователи сами удаляют все элементы из списка. Пример: очищенный почтовый ящик или список задач.

Результаты не найдены: Когда фильтры или поисковый запрос не возвращают никаких данных. Пример: неудачный поиск отеля на сайте бронирования.

Пейволл: Когда контент доступен только для планов более высокого уровня. Пример: просмотр аналитики, доступной только для премиум-пользователей.

Типы пустых состояний

Пустое состояние всегда должно объяснять:

Что происходит
Почему это происходит
Что с этим делать

Существует несколько паттернов пустых состояний для разных сценариев:

(1) Базовое пустое состояние

Сценарий: Первое использование

Цель: Объяснить, почему экран пуст, и подсказать пользователям, что делать.

Есть 2 вариации этого сценария:

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

Лучшие практики:

Представьте раздел или объясните, что здесь будет отображаться.
Объясните преимущества, чтобы мотивировать пользователей.
Добавьте CTA, чтобы помочь пользователям сделать первый шаг.

Пример:

*Dropbox Paper объясняет, что такое раздел папок и как он работает*

Shopify использует пустое состояние, чтобы объяснить, что это за раздел (товарные запасы) и как он будет заполняться

Mailchimp использует пустые состояния в качестве целевых страниц, чтобы продемонстрировать новые функции, подчеркнуть преимущества и побудить клиентов к переходу на более дорогой тарифный план

B) Ожидание обновления системы: пользователь создал контент, но система еще не готова отобразить данные. Например, требуется не менее 24 часов, чтобы собрать достаточно информации, прежде чем она сможет заполнить диаграмму.

Лучшие практики:

Объясните, что происходит и когда появится контент.
CTA не требуется; попросите пользователей вернуться позже.

(2) Стартовый контент

Сценарий: Первое использование

Цель: Обучить пользователей и помочь им исследовать продукт.

Лучшие практики:

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

Пример:

Notion показывает на странице пустого состояния шаблоны, чтобы помочь пользователям изучить возможности продукта и быстро приступить к работе

Mailchimp предлагает новым пользователям краткое руководство на странице пустого состояния, чтобы провести их через процесс настройки

(3) Отсутствие элементов

Сценарий: Очистка пользователем

Цель: Отметить усилия пользователя по выполнению сложных задач и подарить ему ощущение эмоционального удовлетворения.

Лучшие практики:

Поздравьте пользователей с успешным завершением работы (например, «Вы сделали всё, что было запланировано!»).

Добавьте визуальные элементы, вдохновленные природой (эффект биофилии), чтобы вызвать чувство спокойствия и счастья — люди обладают врожденной склонностью искать связи с природой и другими формами жизни.

Пример:

Платформа для управления задачами использует успокаивающие иллюстрации, чтобы отметить достижения пользователя

(4) Отсутствие результатов поиска

Сценарий: Результаты не найдены

Цель: Проинформировать пользователя, что данные отсутствуют, и подсказать ему, что делать дальше, чтобы предотвратить разочарование.

Лучшие практики:

Объясните, что подходящие элементы не найдены, и предложите действия для решения проблемы:

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

Пример:

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

(5) Пейволл

Сценарий: Контент, доступ к которому ограничен платной подпиской

Цель: Конвертировать бесплатных пользователей в платных клиентов

Лучшие практики:

Объясните, почему контент недоступен
Расскажите, какие данные скрыты за пейволлом, или покажите тизер
Постарайтесь донести ценность платной подписки
Добавьте CTA-кнопку для апгрейда

Примеры:

Strava использует пустое состояние, чтобы показать превью статистики пользователя и объяснить, к чему можно получить доступ после обновления до уровня Premium

Заключение

Подведем итог:

Пустое состояние — это экран без контента или данных.

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

Пустые состояния обычно появляются (1) при первом использовании, (2) когда данные удалены, (3) когда результаты не найдены или (4) когда контент скрыт за пейволлом.

Хороший дизайн пустого состояния должен отвечать на вопросы: (1) что происходит, (2) почему это происходит, (3) что пользователи могут сделать дальше?