Дизайн Игорь Васильев
19 044

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

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

В закладки
Аудио

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источники:

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Игорь Васильев", "author_type": "self", "tags": [], "comments": 37, "likes": 100, "favorites": 281, "is_advertisement": false, "subsite_label": "design", "id": 58918, "is_wide": false, "is_ugc": true, "date": "Tue, 19 Feb 2019 12:58:34 +0300" }
{ "id": 58918, "author_id": 251887, "diff_limit": 1000, "urls": {"diff":"\/comments\/58918\/get","add":"\/comments\/58918\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/58918"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

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

Популярные

По порядку

Написать комментарий...
10

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

Ответить
2

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

Ответить
0

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

Ответить
4

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

Ответить
0

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

Ответить
3

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

Ответить
0

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

Ответить
2

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

Ответить
1

Вот это да

Ответить
2

разработчик забыл закрыть переменную.

Хм, а я то, дурак, думаю, куда деваются данные из переменной! Она, оказывается, не закрыта. А крышек для переменных такого размера у меня в хранилище нет. Что делать?

Ответить
1

Отличная статья спасибо! Скажите а в чем делались иллюстрации? Что за сервис прототипирования

Ответить
2

Арслан, спасибо! Для иллюстраций обычно использую Adobe Illustrator или Sketch. Но не обязательно все их рисовать. Есть очень много классных бесплатных векторов, которые можно легко допилить под задачу.
А для прототипирования инструментов еще больше - Invision, Marvel, Prott, тот же Sketch. Пробуйте и выбирайте любой.

Ответить
0

А к статье схемки с пояснениями то есть в Скетче и Иллюстраторе делали?

Ответить
0

Но если нужно реальную схему сделать, то лучше использовать Xmind или Realtimeboard. Там связи между блоками фиксируются. можно их легко двигать

Ответить
1

Отличная полезная статья. Как разработчик приложений мы регулярно думаем о различных мелочах из которых состоит крутое приложение. Жаль, что люди с каждым годом становятся тупее - зашёл в приложение, а в избранном ничего нет - а они думают, что оно не работает ))

Ответить
1

Алексей, спасибо! Согласен пользователь нынче пошел ленивый, хочет как можно меньше думать. Так что надо о них заботиться)

Ответить
0

Сначала вы делаете всё так, чтобы человек перестал думать (стремитесь к идеалу интерфейса продумывание логику, разжовываете пользователю и всё такое), а потом говорите, жаль, что люди с каждым годом становятся тупее. А чего вы хотели))) человек встречая "непонятки" начинает думать, а когда ему всё разживали и в рот положили зачем ему думать. Замкнутый круг((

Ответить
1

Сергей, мир ускоряется. Десять лет назад люди еще могли ждать по паре минут, пока их диалапный интернет подгрузит страницу. А сейчас за минут нужно успеть сделать кучу дел. У пользователей часто просто нет времени разбираться в интерфейсе. Если он не нашел через поиск свой товар в одном интернет-магазине, то он просто закроет вкладку и пойдет в другой.

Ответить
1

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

Ответить
1

Евгений, вы молодец! Поверьте, таких людей очень мало, к сожалению( Рад, что статья вам пригодилась.

Ответить
1

Хорошая полезная статья, лайк 👍

Ответить
1

Artyom, cпасибо! Рад, что статья понравилась 😀

Ответить
1

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

Ответить
1

Руслан, спасибо! Стараюсь все это применять на практике. И из-за этого у нас постоянно стычки с разработчиками и аналитиками) Собственно поэтому и я написал эту статью - чтобы объяснить важность правильных текстов.

Ответить
1

Кратко. Основная цель пустого экрана сделать так, чтобы его не было. И желательно, чтобы эта функция была сразу на этом пустом экране.
Вдохновиться ещё подборкой пустых экранов можно тут http://emptystat.es или в наших мобильных приложениях ;)

Ответить
0

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

Ответить
1

Я как раз это и имел ввиду - чтобы пользователь уходил от экрана заглушек и делал этот экран наполненным)

Ответить
1

Очень, очень годно!

Ответить
1

Очень интересная статья. После прочтения, вспомнил как сталкивался с подобными ситуациями.

Ответить
1

Вроде бы, все очевидно и просто, но мало кто использует. А статья полезная👍🏿

Ответить
0

Илья, спасибо! Надеюсь теперь больше людей будут этотприменять.

Ответить
0

"«Рокетбанк» (iOS) объясняет пользователям..."
- это стандартное сообщение iOS, а не объяснение, созданное разработчиками приложения.

Ответить
1

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

Например, в Тинькофф решили не заморачиваться в такой ситуации, а просто дублировать сообщение о потере связи. Да ещё и сделали окно с одной кнопкой.

Ответить
0

В приложении рокетбанка, как раз таки, не очень понятно. Пользователю сообщают, что нужно сделать, для доступа к данным, но может ввести в ступор кнопка ОК. Что произойдет, если он ее нажмет? Включится WiFi, выключится авиарежим, закроется приложение, закроется диалоговое окно? Нужно называть кнопки действиями, а ОК – это плохая практика.

Ответить
0

Полезно, спасибо

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления
{ "page_type": "default" }