«У вас нет новых писем»: Как сделать «пустые» экраны привлекательными

Дизайнер Дина Чайфетц опубликовала в блоге Invision советы по заполнению так называемых «пустых» экранов — экранов, на которых не требуется действий от пользователя по тем или иным причинам (например, пустые «Входящие» в мессенджере, очищенная корзина в «Почтe», еще не созданные задачи в таск-менеджере).

Digital-агентство
Red Collar подготовило для рубрики «Интерфейсы» перевод заметки.

«Пустые» экраны (или экраны нулевого состояния) как дизайнерское решение возникли достаточно поздно. Это такая вещь, на которую обращают внимание в последнюю очередь, если вообще обращают. И всё по причине того, что она считается временной или второстепенной частью UI.

Но не обманывайтесь названием этого приёма. У «пустых» экранов большой потенциал в вовлечении пользователя в работу с сайтом. Они доставляют ему эстетическое наслаждение и удерживают в решающие моменты, например, когда кто-нибудь скачивает приложение, удаляет весь свой контент или сталкивается с проблемой.

«Пустые» экраны обычно можно увидеть при первом использовании приложения, при намеренном удалении контента пользователем и при возникновении ошибок. Но посмотрим на эти моменты с позиции пользователя:

первое впечатление;
момент успеха;
момент неудачи.

Эти переломные моменты в UI могут привести к двум разным сценариям:

временный или постоянный отказ от использования приложения;
повышенный уровень вовлечённости и лояльности.

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

Продолжительное влияние первого впечатления

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

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

Предприниматель Эндрю Чен недавно работал с Quettra — стартапом о мобильном интеллекте под руководством Энкита Джэйна, который был главой отдела поиска и исследований. Их задачей было собрать и проанализировать процент сохранения клиентов для 125 миллионов мобильных устройств. Они обнаружили настораживающие результаты.

В среднем, приложение теряет 77% активных пользователей в день (DAUs) через 3 дня после установки приложения. Что ещё хуже: через 30 дней
теряется примерно 80% активных пользователей.

Является ли низкий показатель активных пользователей результатом посредственно сделанных и даже ненужных приложений? В каких-то случаях да. Но не всегда.

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

— Энкит Джейн

Хоть эти данные и относятся к мобильным приложениям, есть похожая информация и для десктопных сайтов. И вот какой возникает вопрос: «Если вы знаете, что пользователь прямо-таки ищет причину, чтобы покинуть ваш ресурс, то как же нужно работать с «пустыми» экранами для сохранения клиентов?»

Эта статья опишет способы управления самым опасным моментом в «пустых» экранах: первое использование.

Как заполнять «пустые» экраны

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

Удачная страница сайта достигает следующих целей:

обучает;
доставляет удовольствие;
побуждает.

1. Обучайте вашего пользователя

Ваша первая задача — научить людей, как пользоваться вашим приложением. Если они не поймут его функциональность, они быстро соскочат.

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

При хорошей реализации первого использования «пустого» экрана вы передаёте пользователю следующую информацию:

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

Представьте эту информацию в формате show-or-tell. «Show» (покажите) пользователю, как будет выглядеть экран, когда он заполнен данными, или «tell» (расскажите) им об этом в письменном виде.

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

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

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

— Джошуа Портер

2. Доставьте пользователю удовольствие

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

Хорошее первое впечатление — это не о юзабилити, это также и об индивидуальности. Спросите себя о следующем:

Можете ли вы создать что-то свежее и непредсказуемое?
Можете ли вы заставить пользователя улыбнуться?
Можете ли вы правильно представить ему ваш бренд?

Из-за распространённости бесплатных сервисов и бесплатных пробных версий пользователи пробуют сразу несколько похожих продуктов и сравнивают их между собой.

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

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

Вооружившись этой информацией, вы можете радовать пользователя, если вы:

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

Ваша цель — сделать приятный сюрприз, не бойтесь даже мягко перейти некоторые границы.

3. Побуждайте на действия

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

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

Чтобы побудить пользователя к действиям на «пустом» экране, используйте эти 3 компонента:

Мотивируйте. Вооружитесь мотивирующим языком и дизайном, подходящим вашей целевой аудитории. Например, «Get started now!» («Начать прямо сейчас!») или «Let’s do this» («Сделаем это»).
Убеждайте. «Предлагаемые преимущества» подходят не только для лендингов. Напомните пользователю о пользе от взаимодействия с вашим продуктом.
Направляйте. Советуйте и покажите им один лучший способ начать пользоваться приложением. Обеспечьте их кнопкой CTA или укажите стрелкой на кнопку нужного действия. Сейчас не лучшее время давать пользователю выбор. Также сделайте всё как можно проще. Если в начале пользователю необходимо создать контент, дайте им какой-нибудь пример, который они могут позаимствовать.

Люди очень часто бросают приложения по причинам, находящимся не в нашей власти: всё потому что они не воспринимают ценность пользования софтом.

— Патрик Маккензи Mckenzie