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

В 2016 году я очень много общалась с маркетологами на тему низкой конверсии их мобильных посадочных страниц. Но когда речь заходила о стратегии оптимизации для мобильных устройств, всегда был кто-то, кто просто бросал микрофон со словами «отзывчивый дизайн»* или «mobile-friendly дизайн», показывая, что этим все сказано.

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

Стандартный ответ: «У нас уже есть отзывчивый дизайн! Ну что еще нужно для отдельной mobile стратегии оптимизации?!». Ничто не расстраивало меня так, как этот ответ. И на это есть две причины.

Причина №1

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

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

• Читаете почту на телефоне
• Меняете песни в плейлисте
• Отвечаете на СМС во время встреч
• Сидите в соцсетях

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

Причина №2

 Приведем свежую статистика по мобайлу:

Отчет компании Similar Web говорит, что более 56% трафика в США приходится на мобильники. Если говорить о России, то по исследованиям GfK, это 46,6% (56 миллионов россиян 16+). При этом аудитория мобильного интернета в России постоянно растет — за 2016 г. она выросла на 6 млн.  Но качественный уровень взаимодействия с сайтом у компьютеров остается выше: показатели «время на сайте» и «страниц за визит»  у них лучше, а «показатель отказов» для мобильников выше.

На смартфонах просмотр страницы «Корзина» в интернет-магазинах происходит только в 16% визитов, в то время как на ПК — в 26% случаях. (отчет Adobe 2016 Mobile Retail Report).

При этом  люди проводят 51% времени в телефонах, а 42% за стационарными компьютерами, если считать от общего количество времени, проведенного в Интернете в день.

 

Что отражают эти данные?

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

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

Как ведут себя пользователи телефонов?

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

Для удобства  все, что находится на пути пользователя к совершению конверсии, будем называть трением (или friction как на картинке выше). Можно разделить его на два вида трения: психологическое и физическое трение.

Психологическое трение

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

На примере ниже вы можете увидеть сразу сразу 3 кнопки  call to action, которые предлагают мне одновременно залогиниться, подписаться и запросить демо. Все они расположены на одном экране и мешают читать основной текст. Кроме того, в самом конце страницы уже нет других кнопок CTA, предлагающих мне подписаться. Ужасно неудобно.

Так что про«Ecommerce mails» я теперь уже так просто не почитаю…

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

HubSpot столкнулся с проблемой психологического трения, когда конверсия с их мобильного лендинга была на 20-30% ниже, чем конверсия с аналогичной десктопной версии.

Форма подписки на их мобильной версии была слишком длинной, дизайн не отформатирован и было слишком много текста на странице. Все это отталкивало пользователей.

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

Также они сократили форму подписки.

После оптимизации мобильного лендинга HubSpot удалось снизить  показатель отказов на 20-50% для формы подписки и на 10.7% для основной страницы с контентом.

Физическое трение

Физическое трение — это вторая категория трения, которая влияет на поведение пользователей и на конверсию.

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

Посмотрите на mobile friendly сайт компании Headspace, и вы увидите пример физического трения:

№1 Расположение кнопки сall to action:

Кнопка «Купить» («Buy now») на их мобильном лендинге расположена в правой части экрана вместо того, чтобы располагаться по центру. Возникают сложности: нужно время на то, чтобы отличить кнопку от остальных иконок, и при этом прервать естественное движение пальцев для привычного нажатия по центру экрана. Прерванное действие на мобильном устройстве влияет на процесс анализа информации нашим мозгом.

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

№2 Конкурирующий call to action:

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

№3 Цвета, «убивающие» конверсию:

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

№4 Нерелевантные calls to action:

На странице мы видим перегруз по количеству CTA — сразу 4 calls to action! Пространство вверху можно сэкономить, заранее определив тип используемого устройства, и предлагать только одну релевантную CTA.

№5 CTA слишком рано:

Главная страница сайта предлагает загрузить их приложение сразу при заходе на сайт, еще до того, как у посетителя появляется шанс впервые ознакомиться с продуктом. Многие проведенные мной A/Б тесты показали, что пользователи готовы устанавливать приложение только после того, как они ознакомятся с сайтом.

№6 Карусель изображений:

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

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

В следующей статье мы расскажем, как это сделать, и разберем 4 стратегии для создания mobile friendly веб-сайта, который будет конвертироваться.

Оригинал статьи How to Create a Mobile Friendly Website that Converts с сайта www.getuplift.co.

Перевод — Мария Рябухина, Adventum.