Как спроектировать правильный экран-заглушку

Сейчас все большее внимание уделяется смысловой части интерфейсов, UX-дизайнеры продумывают все, вплоть до надписей на кнопках. В Apple, Google, Microsoft, Dropbox и других крупных компаниях уже появились отдельные специалисты — UX-писатели, следящие не столько за грамотностью формулировок, сколько за смысловой частью и логикой повествования.

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

Как спроектировать правильный экран-заглушку
<p>Примеры неправильно спроектированных экранов</p>

Примеры неправильно спроектированных экранов

AliExpress (iOS) показывает пустую страницу, если в «Избранном» нет товаров. И непонятно: то ли это я не выбрал товары, либо приложение ещё не загрузило данные.

«Яндекс.Еда» (iOS) ограничилось при поиске фразой «Ничего не найдено». Хотя можно было бы показывать рестораны поблизости или варианты кухонь мира, чтобы пользователь мог дальше продолжить поиск.

«Спасибо от Сбербанка. Путешествия» (веб) тоже не использует UX-подход проектированию заглушек. И даже спрятал текст «Поиск не дал результата» под фильтр, где его сложно заметить.

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

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

Якоб Нильсен, эвристика «Информационность о состоянии системы»

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

Как спроектировать правильный экран-заглушку

Здесь возможны следующие варианты

  1. Что-то сломалось.
  2. Контент должен создать сам пользователь.
  3. Контент должны добавить другие пользователи системы.
  4. Пустые результаты поиска.

Посмотрим, что можно с этим сделать

Что-то сломалось

Примеры правильно спроектированных экранов, где правильно отработаны ошибки
Примеры правильно спроектированных экранов, где правильно отработаны ошибки

«Яндекс.Транспорт» (iOS) показывает сообщение о потере соединения, чтобы пользователь понимал, что он не сможет сейчас построить маршрут.

DocDoc (iOS) также выводит сообщение об ошибке, предлагает повторить попытку соединения, а картинка снижает градус недовольства.

Аналогично поступает и приложение «Яндекс.Расписания» (iOS) при неудачной попытке загрузить расписание.

«Рокетбанк» (iOS) объясняет пользователям, что без интернета невозможен доступ к данным, и предлагает два пути решения проблемы.

Как бы качественно ни был написан продукт, баги будут всегда. Это нужно принять как факт. И постараться продумать все возможные причины их появления. Может, пропал интернет, может, завис сервер, а может, разработчик забыл закрыть переменную.

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

Контент должен создать сам пользователь

Примеры правильно спроектированных экранов, где контент зависит от других пользователей
Примеры правильно спроектированных экранов, где контент зависит от других пользователей

«Сбербанк» (iOS) показывает текст, призывающий совершить действие, картинку и кнопку, чтобы пользователь сразу смог начать диалог.

Aviasales (iOS), запрашивая разрешение на уведомления, рассказывает об их ценности для пользователя и картинкой снимает напряжение.

SmartMed (iOS) рассказывает, о чём этот раздел, и предлагает его наполнить.

Lamoda (iOS) также объясняет, почему экран пуст, и предлагает перейти в каталог для выбора товаров.

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

Чтобы у пользователя не было негативных эмоций, когда он увидит пустой экран, нужно его успокоить и вернуть ему чувство контроля над ситуацией. Для этого нужно объяснить, что именно он отвечает за наполнение этой страницы. И сразу же предложить ему действие.

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

Контент должны добавить другие пользователи системы

Примеры правильно спроектированных экранов, где контент зависит от других пользователей
Примеры правильно спроектированных экранов, где контент зависит от других пользователей

RemsMed (iOS) объясняет, почему на экране нет контента и что врач должен сначала составить вопросы для пользователя-пациента. В этом случае нет возможности предложить действие, но у пользователя есть понимание ситуации.

Сервис «Google Документы» (веб) не даёт увидеть документ, если у тебя нет прав, и сразу предлагает запросить доступ.

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

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

Пустые результаты поиска

<p>Примеры правильно спроектированных экранов с пустым результатом поиска</p>

Примеры правильно спроектированных экранов с пустым результатом поиска

AirBnb советует пользователю, как изменить поисковый запрос, если ничего не получилось найти. И показывает кнопку, чтобы можно было сразу совершить действие.

«Беру» при пустых результатах поиска показывает каталог товаров, чтобы помочь пользователю.

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

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

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

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

Не останавливайте путь пользователя

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

Вот как обычно выглядит путь пользователя:

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

И здесь пустая страница является тупиком в движении пользователя. А можно его направить на следующее действие.

Как спроектировать правильный экран-заглушку

Советы по проектированию правильной страницы-заглушки

Объясните ситуацию

Как спроектировать правильный экран-заглушку

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

Предложите действие

Как спроектировать правильный экран-заглушку

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

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

Добавьте картинку

Как спроектировать правильный экран-заглушку

Аккуратная милая графика разрядит обстановку и понизит градус недовольства. А ещё с помощью картинки будет проще запоминать текст, потому что к нему прибавится визуальный образ. Используйте фирменные иллюстрации или котиков.

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

Будьте краткими

Пример правильно построенного текста, который начинается с цели
Пример правильно построенного текста, который начинается с цели

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

Всегда начинайте с цели

<p>Пример правильно построенного текста, который начинается с цели</p>

Пример правильно построенного текста, который начинается с цели

Сначала назовите цель, а уже потом опишите, какими действиями её достичь.

Будьте ближе к пользователю

<p>Пример привычного для пользователя написания даты</p>

Пример привычного для пользователя написания даты

Люди не используют дату, говоря о вчерашнем дне — они говорят «вчера». Применяйте тот же принцип в интерфейсе. Используйте существительные вместо числительных. Если в календаре на сегодня нет планов, так и напишите: «На сегодня еще нет планов», а не «13.02.2019 ничего нет». Так пользователю не придётся вспоминать, какое сегодня число. Но не забывайте учитывать часовые пояса и местное время пользователя.

Добавьте юмор

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

Упрощайте конструкции

Пример текста без лишних глаголов
Пример текста без лишних глаголов

Избегайте глаголы, если они не несут смысловой нагрузки.

Используйте соответствующий платформе язык

Термины, которые мы используем в описании десктопного приложения, могут не подходить к мобильным. Например, в случае с iOS-приложением мы говорим не «кликнуть», а «нажать» на иконку. (В английском click и tap). И наоборот.

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

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

А если вы ещё сомневаетесь, нужно ли вам заморачиваться с текстами, посмотрите, как одна маленькая фраза увеличила конверсию на 17%:

Пример того, как правильно подобранный текст может сильно повлиять на бизнес и взаимодействие пользователей с интерфейсом
Пример того, как правильно подобранный текст может сильно повлиять на бизнес и взаимодействие пользователей с интерфейсом

Во время конференции Google I/O 2017 Мэгги Стэнфил рассказала, как новый подход к написанию текста на интерфейсе улучшил их показатели.

Мы обнаружили, что на этапе поиска жилья кнопка Book a Room как будто к чему-то обязывает. Поэтому мы поменяли её на Check availability — и оказалось, что именно этого хотят пользователи, когда просматривают отели. Они всё ещё рассматривают варианты, и они хотят узнать, на какие даты жильё свободно и сколько оно будет стоить.

Мэгги Стэнфил, Senior UX Writer в Google

Это доказывает, что умение понять чувства и намерения пользователей может серьёзно влиять на их взаимодействие с интерфейсом, а значит, и на бизнес. И таких примеров очень много.

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

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

Как спроектировать правильный экран-заглушку

Источники:

75
37 комментариев

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

11
Ответить

Алексей, согласен! Речь идет только о сегодняшнем, завтрашнем или вчерашнем днях. Остальные дни - нужно писать цифрами.
А подписи дней недели тоже бывают полезными, но их обязательно нужно писать вместе с датой - "19 фев 2019, вторник". Иначе да, то это сбивает с толку.

2
Ответить

На позапрошлой неделе.
И пойди, пойми, когда это было. Жалко нет переключателя форматирования даты на строгое ДД.ММ.ГГГГ.

Ответить

Очень понравилась статья! Спасибо!
Дополню нашим кейсом. Если поиск по каталогу интернет-магазина нашего клиента не дал результатов, раньше мы так и писали и просили изменить запрос или воспользоваться каталогом. При очередном обновлении платформы внедрили форму запроса для безрезультатного поиска (имя, телефон, товар) — владельцы интернет-магазинов стали спрашивать, откуда к ним приходят запросы. Т.е. кейс рабочий ))

4
Ответить

Николай, спасибо! Вы молодцы, интересный кейс!

Ответить

Один из классных примеров текста при отсутствии интернета (Яндекс.Погода):

3
Ответить

А что, очень даже неплохо)

Ответить