Как спроектировать правильный экран-заглушку
Сейчас все большее внимание уделяется смысловой части интерфейсов, UX-дизайнеры продумывают все, вплоть до надписей на кнопках. В Apple, Google, Microsoft, Dropbox и других крупных компаниях уже появились отдельные специалисты — UX-писатели, следящие не столько за грамотностью формулировок, сколько за смысловой частью и логикой повествования.
И тем удивительней до сих пор встречать пустые экраны с банальными надписями об ошибке, которые скорее раздражают и дезориентируют пользователя, нежели помогают разобраться в ситуации.
Представьте, что вы открываете только что скачанное мобильного приложение с ресторанами, заходите в «Избранное», а вместо контента видите пустой экран. Какая ваша первая мысль? Наверное, «Оу, что-то сломалось?» или «Что за ерунду они написали?». А на самом деле причина в том, что в раздел «Избранное» вы просто ещё не успели добавить любимые рестораны.
Пользователь всегда должен чётко понимать, на какой странице он находится и что он видит. А если не видит, то почему. И стандартными фразами вроде «Нет данных», так любимых консервативными айтишниками, тут не отделаться.
Здесь возможны следующие варианты
- Что-то сломалось.
- Контент должен создать сам пользователь.
- Контент должны добавить другие пользователи системы.
- Пустые результаты поиска.
Посмотрим, что можно с этим сделать
Что-то сломалось
Как бы качественно ни был написан продукт, баги будут всегда. Это нужно принять как факт. И постараться продумать все возможные причины их появления. Может, пропал интернет, может, завис сервер, а может, разработчик забыл закрыть переменную.
Здесь нужно аккуратно продумать все ветки возможных развитий событий. И для каждого подготовить текст, который будет рассказывать пользователю, что могло произойти и что делать.
Контент должен создать сам пользователь
Вернёмся к примеру, который был в начале. Есть страница «Избранное» в мобильном приложении с ресторанами, которое только что скачал пользователь. И чтобы на ней появился контент, пользователю нужно сохранить места, которые ему понравились. Но до этого момента там ничего не будет.
Чтобы у пользователя не было негативных эмоций, когда он увидит пустой экран, нужно его успокоить и вернуть ему чувство контроля над ситуацией. Для этого нужно объяснить, что именно он отвечает за наполнение этой страницы. И сразу же предложить ему действие.
В нашем случае — перейти в список ресторанов и отправиться в гастрономическое путешествие, чтобы найти любимые места. А чтобы пользователь чувствовал ещё большую заботу — здорово было бы предложить подборку лучших мест в его городе.
Контент должны добавить другие пользователи системы
Бывают случаи, когда контент зависит от других участников. Возьмём, к примеру, сервисы, где нужно получить инвайт, чтобы присоединиться к группе или проекту. В таком случае пользователь увидит экран, блокирующий его дальнейшие действия. И будет неправильно просто написать «У вас нет прав!».
В этой ситуации он не может напрямую повлиять на содержимое страницы. Но всё равно ему нужно предложить действие. Например, запросить инвайт у администратора или предложить аналогичные группы со свободным доступом.
Пустые результаты поиска
Возможно, пользователь ошибся при вводе, а может, у вас в базе нет данных, подходящих под запрос пользователя. Но в любом случае, одинокая строка «Данных не найдено» — это недружелюбное поведение системы. Если пользователь ошибся в букве, не надо за это его наказывать.
Используйте «умный» поиск и на программном уровне исправьте ошибку. Или хотя бы добавьте милую картинку. Если система не может подобрать контент под запрос пользователя — напишите об этом и предложите аналогичные продукты.
В любом случае важно, чтобы пользователь чувствовал, что он владеет ситуацией. Иначе у него начнёт копиться негатив.
Не останавливайте путь пользователя
Пустая страница или страница с технической ошибкой — это такой же элемент интерфейса, как и обычная страница. И она не должна быть последней точкой на пути пользователя.
Вот как обычно выглядит путь пользователя:
И здесь пустая страница является тупиком в движении пользователя. А можно его направить на следующее действие.
Советы по проектированию правильной страницы-заглушки
Объясните ситуацию
Самое главное — расскажите пользователю, почему нет контента. Избегайте длинных формулировок. Не пишите очевидные вещи и не используйте технические термины. Представьте, что пользователь не знает, как работают приложение, сервера, интернет.
Предложите действие
Вовлечение — главный принцип взаимодействия с интерфейсом. И мы помним, что пользователь не должен останавливаться в движении по интерфейсу. Предложите наполнить страницу, посмотреть аналоги или сообщить о проблеме в техподдержку. Вариантов много. Но это должно быть простое действие.
Не надо писать огромную инструкцию аля: нужно пойти в настройки, там найти такой-то пункт и нажать на такую-то кнопку. Добавьте эту кнопку на экран с заглушкой или ошибкой. Должен быть всего один клик, чтобы начать новое действие.
Добавьте картинку
Аккуратная милая графика разрядит обстановку и понизит градус недовольства. А ещё с помощью картинки будет проще запоминать текст, потому что к нему прибавится визуальный образ. Используйте фирменные иллюстрации или котиков.
Всё зависит от конкретной ситуации. Но картинка не должна перетягивать на себя все внимание. Не забывайте о действии. А если добавите ещё и анимацию, то сами влюбитесь в этот экран.
Будьте краткими
Используйте как можно меньше слов, но не теряйте смысл. Убедитесь, что каждое слово на экране действительно работает.
Всегда начинайте с цели
Сначала назовите цель, а уже потом опишите, какими действиями её достичь.
Будьте ближе к пользователю
Люди не используют дату, говоря о вчерашнем дне — они говорят «вчера». Применяйте тот же принцип в интерфейсе. Используйте существительные вместо числительных. Если в календаре на сегодня нет планов, так и напишите: «На сегодня еще нет планов», а не «13.02.2019 ничего нет». Так пользователю не придётся вспоминать, какое сегодня число. Но не забывайте учитывать часовые пояса и местное время пользователя.
Добавьте юмор
Немного юмора всегда спасает ситуацию. Не думайте, что банкиры, юристы, врачи не умеют шутить. Но тут тоже важны мера и контекст. Если ваше приложение или сайт нацелены на узкую ЦА, то можно добавить немного жаргона. В остальных случаях лучше его не использовать.
Упрощайте конструкции
Избегайте глаголы, если они не несут смысловой нагрузки.
Используйте соответствующий платформе язык
Термины, которые мы используем в описании десктопного приложения, могут не подходить к мобильным. Например, в случае с iOS-приложением мы говорим не «кликнуть», а «нажать» на иконку. (В английском click и tap). И наоборот.
Эти правила актуальны не только для мобильных приложений, но и для веба. Будь это сайт-визитка, интернет магазин или веб-платформа. Везде бывают случаи, когда наш продукт показывает пользователю экран без контента.
Важно не забывать об этом и проектировать такие экраны ещё на этапе прототипов. Ведь основная задача интерфейса и текста в нём — направлять пользователя и помогать ему взаимодействовать с продуктом.
А если вы ещё сомневаетесь, нужно ли вам заморачиваться с текстами, посмотрите, как одна маленькая фраза увеличила конверсию на 17%:
Во время конференции Google I/O 2017 Мэгги Стэнфил рассказала, как новый подход к написанию текста на интерфейсе улучшил их показатели.
Это доказывает, что умение понять чувства и намерения пользователей может серьёзно влиять на их взаимодействие с интерфейсом, а значит, и на бизнес. И таких примеров очень много.
Помните, что вы можете потерять пользователя, если он увидит пустую страницу или не разберётся в вашем интерфейсе. Проведите тест: поменяйте название на кнопке и посмотрите сами, как изменится поведение пользователей.
Надеюсь, это статья поможет вам создавать качественные интерфейсы и дружелюбные тексты.
Источники:
"Люди не используют дату, говоря о вчерашнем дне — они говорят «вчера». Применяйте тот же принцип в интерфейсе."
Но не злоупотребляйте, пожалуйста. Бесит, когда пытаешься, например, в истории мессенджера понять в какой день на прошлой неделе было сообщение. Мессенджер по-человечески пишет "среда", а мне надо лезть в календарь, чтобы понять, какое число было в среду.
Алексей, согласен! Речь идет только о сегодняшнем, завтрашнем или вчерашнем днях. Остальные дни - нужно писать цифрами.
А подписи дней недели тоже бывают полезными, но их обязательно нужно писать вместе с датой - "19 фев 2019, вторник". Иначе да, то это сбивает с толку.
На позапрошлой неделе.
И пойди, пойми, когда это было. Жалко нет переключателя форматирования даты на строгое ДД.ММ.ГГГГ.
Очень понравилась статья! Спасибо!
Дополню нашим кейсом. Если поиск по каталогу интернет-магазина нашего клиента не дал результатов, раньше мы так и писали и просили изменить запрос или воспользоваться каталогом. При очередном обновлении платформы внедрили форму запроса для безрезультатного поиска (имя, телефон, товар) — владельцы интернет-магазинов стали спрашивать, откуда к ним приходят запросы. Т.е. кейс рабочий ))
Николай, спасибо! Вы молодцы, интересный кейс!
Один из классных примеров текста при отсутствии интернета (Яндекс.Погода):
А что, очень даже неплохо)
Раз уж разговор зашел о мелочах, то не бывает белой рамки с челкой на iPhone, она всегда черная, в отличие от ваших скриншотов.
Вот это да
Хм, а я то, дурак, думаю, куда деваются данные из переменной! Она, оказывается, не закрыта. А крышек для переменных такого размера у меня в хранилище нет. Что делать?
Отличная статья спасибо! Скажите а в чем делались иллюстрации? Что за сервис прототипирования
Арслан, спасибо! Для иллюстраций обычно использую Adobe Illustrator или Sketch. Но не обязательно все их рисовать. Есть очень много классных бесплатных векторов, которые можно легко допилить под задачу.
А для прототипирования инструментов еще больше - Invision, Marvel, Prott, тот же Sketch. Пробуйте и выбирайте любой.
А к статье схемки с пояснениями то есть в Скетче и Иллюстраторе делали?
Их в Скече
А отлично)
Но если нужно реальную схему сделать, то лучше использовать Xmind или Realtimeboard. Там связи между блоками фиксируются. можно их легко двигать
Отличная полезная статья. Как разработчик приложений мы регулярно думаем о различных мелочах из которых состоит крутое приложение. Жаль, что люди с каждым годом становятся тупее - зашёл в приложение, а в избранном ничего нет - а они думают, что оно не работает ))
Алексей, спасибо! Согласен пользователь нынче пошел ленивый, хочет как можно меньше думать. Так что надо о них заботиться)
Сначала вы делаете всё так, чтобы человек перестал думать (стремитесь к идеалу интерфейса продумывание логику, разжовываете пользователю и всё такое), а потом говорите, жаль, что люди с каждым годом становятся тупее. А чего вы хотели))) человек встречая "непонятки" начинает думать, а когда ему всё разживали и в рот положили зачем ему думать. Замкнутый круг((
Сергей, мир ускоряется. Десять лет назад люди еще могли ждать по паре минут, пока их диалапный интернет подгрузит страницу. А сейчас за минут нужно успеть сделать кучу дел. У пользователей часто просто нет времени разбираться в интерфейсе. Если он не нашел через поиск свой товар в одном интернет-магазине, то он просто закроет вкладку и пойдет в другой.
Интересная статья. Всегда думал о таких мелочах, но не всегда очевидно было как правильно написать текст для заглушки.
Евгений, вы молодец! Поверьте, таких людей очень мало, к сожалению( Рад, что статья вам пригодилась.
Хорошая полезная статья, лайк 👍
Artyom, cпасибо! Рад, что статья понравилась 😀
Отличный, годный материал. Обожаю такой уровень внимания к деталям. Игорь, вы на практике все это применяете?
Руслан, спасибо! Стараюсь все это применять на практике. И из-за этого у нас постоянно стычки с разработчиками и аналитиками) Собственно поэтому и я написал эту статью - чтобы объяснить важность правильных текстов.
Комментарий недоступен
Очень интересная статья. После прочтения, вспомнил как сталкивался с подобными ситуациями.
Вроде бы, все очевидно и просто, но мало кто использует. А статья полезная👍🏿
Илья, спасибо! Надеюсь теперь больше людей будут этотприменять.
Кратко. Основная цель пустого экрана сделать так, чтобы его не было. И желательно, чтобы эта функция была сразу на этом пустом экране.
Вдохновиться ещё подборкой пустых экранов можно тут http://emptystat.es или в наших мобильных приложениях ;)
"Основная цель пустого экрана сделать так, чтобы его не было." - здесь не совсем согласен. Минимизировать количество пустых экранов - это задача команды. А экраны-заглушки должны направлять пользователя дальше по приложению, чтобы увидев пустой экран не уходил из приложения или с сайта. И как можно скорее. Здесь я с вами полностью согласен.
И спасибо за ссылку. Хорошая подборка!
Я как раз это и имел ввиду - чтобы пользователь уходил от экрана заглушек и делал этот экран наполненным)
"«Рокетбанк» (iOS) объясняет пользователям..."
- это стандартное сообщение iOS, а не объяснение, созданное разработчиками приложения.
Олег, да это стандартное окно iOs. Но это не автоматическое действие приложения. Команда Рокетбанка продумала, что может возникнуть такая ошибка, и что пользователю нужно дать возможность быстро ее исправить. Написали текст, а разработчики обработали эту ошибку.
Так что это пример правильного проектирования приложения. Пользователя не оставили одного с проблемой, объяснили суть и предложили действие.
Например, в Тинькофф решили не заморачиваться в такой ситуации, а просто дублировать сообщение о потере связи. Да ещё и сделали окно с одной кнопкой.
В приложении рокетбанка, как раз таки, не очень понятно. Пользователю сообщают, что нужно сделать, для доступа к данным, но может ввести в ступор кнопка ОК. Что произойдет, если он ее нажмет? Включится WiFi, выключится авиарежим, закроется приложение, закроется диалоговое окно? Нужно называть кнопки действиями, а ОК – это плохая практика.
Полезно, спасибо