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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источники: