Как пустые состояния улучшают опыт взаимодействия.
Пустое состояние — это просто пустой экран (или страница), верно?
Зачем же тогда я пишу эту статью?
Во-первых, потому что даже если приложению или системе нечего показать пользователю в данный момент, его все равно необходимо об этом оповестить. Вопрос в подаче: просто сказать «нет данных» и отправить людей в самостоятельное плавание или объяснить им, что происходит и подсказать следующие шаги.
А во-вторых, пустые состояния могут быть невероятно полезными.
Пустые состояния помогают:
- Начать использовать приложение и получать ценный опыт сразу после запуска;
- Понять, как использовать систему;
- Выполнять больше действий и использовать больше функций продукта — следовательно, извлекать максимум пользы из него;
- Быстрее находить нужный контент и достигать целей.
Типы пустых состояний и их особенности
Давайте рассмотрим 7 наиболее распространенных пустых состояний, и узнаем, как превратить “тупик” в “скоростное шоссе”. Различия между этими состояниями хоть и незначительные, но они очень важны.
Встречаются ли какие-либо из этих состояний в вашем продукте?
Тип 1: Поехали!
Пользователи еще не создали или не собрали элементы, которые должны отображаться на этом экране (обычно мы видим такое пустое состояние при первом применении продукта, но оно может появляться и позднее).
В конечном итоге, на этой странице будут отображаться элементы, созданные или собранные пользователем.
Примеры:
- Вы еще не сохранили ни одного товара в Избранное
- Вы еще не добавили ни одного пациента для отслеживания
- Вы еще не настроили серверы для системы
- Вы по-прежнему не предоставили разрешения этому пользователю
- Вы еще ничего не добавили в Корзину
- Вы еще не загрузили ни одного видео
- Вы еще не выбрали виджеты для отображения на дашборде
- Вы еще не создали ни одной папки
- Вы еще не написали свой первый пост
- Вы еще не создали ни одного напоминания
- Вы еще не отметили свои любимые места
- Вы еще не создали ни одного альбома
- Вы еще не пригласили друзей и т.д.
Формулировка «пока нет [элементов, товаров и т.д.]» бессмысленна. Что же следует написать вместо этого?
1. Заголовок, который описывает состояние и информирует вас, что вы еще не начали совершать действия, необходимые для того, чтобы этот экран не был пустым.
Пример: Вы еще не создали ни одного напоминания.
Или: Создайте свое первое напоминание.
2. Мотивация — почему пользователь должен сохранить или создать этот элемент, какую пользу он ему принесет или как это сделать.
Пример: Напоминания помогают не забывать о задачах, поэтому вам не придется беспокоиться о том, что вы можете упустить что-то важное.
3. CTA — привлекающая внимание кнопка или ссылка для создания первого элемента.
Пример: Создать напоминание.
Еще один пример:
Заголовок: Вы еще не добавили в Избранное ни одной книги.
Мотивация: Сохраните книгу, которая привлекла ваше внимание, чтобы вернуться к ней позже, нажав на иконку сердца.
Кнопка: Посмотрите наши бестселлеры.
И еще несколько примеров:
Этот пример немного отличается от остальных, но соответствует тем же принципам, затрагивая слабые места и побуждая пользователей к действию. Сервис Semplice предназначен для создания портфолио:
Почему это важно?
1. Вовлеченность
Это отличный шанс побудить людей совершить целевое действие при первом использовании приложения: не просто рассказать им, на что способен продукт, а предоставить возможность испытать это. Чем раньше клиенты начнут получать реальную пользу от продукта, тем больше вероятность того, что они продолжат им пользоваться.
2. Юзабилити
Иногда люди хотят приступить к использованию продукта, но не знают с чего начать. Несколько слов и кнопка — беспроигрышный вариант. Этот паттерн укажет им верный путь.
Тип 2: Я здесь, жду тебя
Данные, которые должны автоматически отображаться на этой странице, еще не созданы. Пользователи должны совершить те или иные действия, чтобы информация начала поступать.
Как только данные будут автоматически сгенерированы, они появятся на этом экране вместо пустого состояния. В данном случае не пользователи активно собирают или создают элементы, а система создает, собирает и представляет их по результатам действий пользователя.
Примеры:
- Сведения о кликах на ваши объявления недоступны [поскольку пользователь еще не создал ни одного объявления]
- Угрозы данным не обнаружены [поскольку пользователь пока не указал, какие данные нуждаются в защите]
- Данные о количестве открытых писем рассылки недоступны [поскольку пользователь еще не запустил ее]
- Нет данных о просмотрах видео [поскольку пользователь еще не загрузил ни одного видео]
- Журнал активности недоступен [поскольку пользователь еще не совершил ни одного действия в системе]
- Результаты анализа недоступны [поскольку пользователь еще не загрузил ни одного теста для анализа]
- Отзывов о товарах пока нет [поскольку пользователь еще ничего не продал]
Что следует написать вместо «нет данных»?
1. Заголовок, который описывает текущее состояние и информирует о том, что данные пока отсутствуют (но в скором времени появятся).
Пример: В журнале активности еще нет данных.
2. Объяснение, как работает функция + мотивация и ценность, если это уместно.
Пример: После того, как вы пригласите пользователей и предоставите им разрешение, вы сможете отслеживать, как часто они входят в систему и какие действия выполняют.
3. CTA — привлекающая внимание кнопка или ссылка для выполнения необходимого действия.
Пример: Пригласить пользователей.
Другой пример:
Заголовок: Сколько средств у вас осталось?
Объяснение: Определите финансовые цели, чтобы контролировать свои расходы и принимать более взвешенные финансовые решения.
Кнопка: Создайте свою первую цель.
И еще один:
Почему это важно?
1. Юзабилити
Когда пользователи решаются попробовать новый цифровой продукт, они пытаются интуитивно понять, как он работает, где находится каждый элемент и как все элементы сочетаются друг с другом. Пустое состояние автоматически заполняется по мере взаимодействия с продуктом и помогает понять, что происходит, показывая, какие действия запускают другие действия и как все работает вместе.
2. Ценность
Этот тип пустого состояния четко демонстрирует пользователям, какую ценность для них представляет система. Другими словами: вы выполняете свою часть работы, а мы позаботимся об извлечении и отображении важных данных.
Тип 3: Возвращайтесь скорее
Данные, которые должны появиться здесь автоматически, еще не созданы. Системе нужно время, а пользователи не могут на это повлиять.
Иногда бывает так, что пользователи сделали все от них зависящее, но для получения данных требуется больше времени. В основном это происходит с продуктами, которые выполняют статистические вычисления или собирают данные о производительности.
Например, если запустить платную рекламную кампанию, данные, полученные в течение первых 24 часов, скорее всего, будут недостоверными, потому что реклама еще не успела охватить достаточно широкую или релевантную аудиторию. По этой причине пользователь увидит пустое состояние с подписью “Данные о производительности пока не доступны”.
Другой пример: дашборд, который отображает данные за текущий месяц в сравнении с показателями за предыдущий месяц, а пользователь начал использовать систему только на прошлой неделе. Конечно, данных для сравнения не будет.
Что следует написать вместо «данные недоступны»?
1. Заголовок, который описывает ситуацию и информирует, что страница пока пуста, но предлагает пользователю вернуться позднее.
Пример: Вернитесь позже, чтобы ознакомиться с данными о производительности.
2. Объяснение, как работает функция + мотивация и ценность, если это уместно.
Пример: Системе требуется не менее 24 часов для сбора достоверных данных.
CTA-кнопка в таких пустых состояниях обычно отсутствует, потому что пользователи не могут повлиять на скорость работы системы. Можно добавить ее в том случае, если есть что-то, чем пользователи могут заняться в это время (например, поделиться рекламой с другими людьми, чтобы увеличить охват). Подумайте, как вы можете помочь пользователям помочь самим себе. Иногда невозможно ничего сделать, и все, что остается — просто ждать.
Другой пример:
Данных для сравнения пока нет
Через 10 дней мы покажем вам, насколько сильно показатели этого месяца отличаются от показателей предыдущего, чтобы вы могли отследить свой прогресс и оптимизировать свои действия.
И еще несколько примеров:
Почему это важно?
1. Юзабилити
Сообщение с текстом «данные недоступны» оставляет пользователя в неведении: что-то не так? Могу ли я что-то сделать, чтобы исправить ситуацию? И если нет, то когда появятся данные? Хорошо написанное сообщение на экране пустого состояния должно отвечать на все эти вопросы.
2. Обучение и ценность
Хорошо написанный текст пустого состояния не только избавляет пользователей от вопросов и разочарований — он также учит их тому, как работает система, дает ощущение контроля и подчеркивает ее надежность.
Тип 4: Все выполнено, пора двигаться дальше!
Пользователи удалили все элементы списка, потому что продукт работает именно таким образом.
Пример — приложение-планировщик задач для повышения производительности.
При первом входе в систему пользователи увидят пустое состояние первого типа, потому что они еще не создали ни одной задачи. Текст на странице пустого состояния будет выглядеть примерно так: “Вы еще не добавили ни одной задачи в свой список. Чтобы сделать свой день продуктивным, добавьте как минимум три важные задачи, которые необходимо выполнить. CTA: Добавьте свою первую задачу”.
При регулярном использовании приложения люди будут:
- Добавлять задачи;
- Удалять их одну за другой после выполнения;
- Снова видеть пустое состояние.
Но на этот раз все совсем по-другому. Теперь вы можете сказать что-то вроде:
Отлично! Вы выполнили все задания.
Отправляйтесь на вечеринку или, если вы сегодня в ударе,
[CTA] добавьте новое задание.
Другие примеры:
- Все входящие сообщения прочитаны и отсортированы;
- Все документы изучены;
- Программа обучения завершена и т.д.
Что мы должны написать?
Вместо того, чтобы возвращаться к пустому состоянию первого типа, мы можем поблагодарить наших пользователей за продуктивность. На самом деле нет необходимости добавлять что-либо, кроме похвалы, если только вы не хотите, чтобы люди предприняли какие-то дополнительные действия.
Примеры:
Почему это важно?
1. Персональный опыт
Стандартное, неуместное пустое состояние выглядит механически. Пустое состояние, относящееся к ситуации, дает пользователям возможность почувствовать, что о них заботятся, их цели важны, а их успех — повод отпраздновать.
2. Воодушевление
Увидев похвалу, пользователи почувствуют себя компетентными. Было установлено, что комплименты укрепляют связь между пользователями и продуктами, которые их хвалят. Кроме того, они помогают нам достигать целей!
Тип 5: Выберите другой тарифный план
Пользователи не видят данные, поскольку эта функция недоступна в их тарифном плане. Им нужно выбрать другой план, чтобы получить доступ к данным.
На самом деле, это не совсем пустое состояние, потому что у системы есть нужные данные. Но сходство есть, поскольку информация недоступна для пользователей.
Пустые состояния такого рода — отличная возможность мотивировать пользователей к покупке и повышению тарифного плана, ведь если они попали на эту страницу — соответствующая информация должна их заинтересовать.
Такие сообщения, как «Эти данные доступны только в плане PRO, обновите свой тарифный план сейчас» — неэффективны.
Вместо этого следует применить принципы продуктового маркетинга и продемонстрировать ценность конкретной функции, о которой идет речь, — как именно она может помочь пользователю.
Вот несколько примеров:
Тип 6: Отсутствуют результаты поиска (фильтров нет)
Пользователь ввел запрос в строку поиска, и система не дала никаких результатов.
Что следует написать вместо «нет результатов»?
1. Заголовок, в котором вы берете на себя ответственность. Например: «Нам не удалось найти то, что вы искали».
2. У нас есть несколько вариантов дальнейших действий, в зависимости от ситуации и продукта:
- Начните сначала: предложите исправить или изменить введенный текст;
- Представьте другие результаты, связанные с запросом пользователя, которые могут быть ему интересны;
- Предложите расширенный поиск;
- Пообещайте сообщить им, как только появится нужный товар / услуга / информация;
- Пообещайте добавить товар (информацию), который они искали, на ваш сайт (в приложение).
Примеры:
Тип 7: Отсутствуют результаты поиска (фильтры есть)
Пользователи настроили фильтры, и система не смогла найти результаты, соответствующие запросу.
Что следует написать вместо «нет результатов»?
1. Заголовок, в котором вы берете на себя ответственность. Например: «Нам не удалось найти результаты, соответствующие критериям поиска».
2. У нас есть несколько вариантов дальнейших действий, в зависимости от ситуации и продукта:
- Начните сначала: предложите убрать некоторые фильтры или расширить диапазон поиска;
- Предоставьте наиболее релевантные результаты (автоматически расширьте диапазон и предложите другие связанные результаты, которые могут быть интересны пользователям);
- Пообещайте сообщить им, как только появится нужный товар / услуга / информация.
Примеры:
Кто-нибудь, позвоните разработчикам!
Вы, наверное, заметили, что нам не обойтись без разработчиков:
- Чтобы в нужный момент отразить подходящее пустое состояние,
- Чтобы определить, является ли пустое состояние результатом первого использования продукта (тип 1) или оно возникло после удаления элементов (тип 4),
- Чтобы уведомить пользователей о том, сколько времени потребуется для получения данных (тип 3),
- Чтобы предложить пользователям что-то релевантное, когда поиск не дает результатов (типы 5 и 6).
Стоит ли оно того?
Если ваша цель состоит в том, чтобы люди получили максимум пользы от продукта и выполнили как можно больше действий, создающих ценность, а также если вы хотите, чтобы они чувствовали себя комфортно, уверенно и понимали, что о них заботятся —
Тогда да, это того стоит.
.webp)
.svg)
.svg)
