Всё о кнопках призыва к действию на мобильных устройствах

Мир стал мобильным. У некоторых пользователей, вероятно, даже нет настольного компьютера, и за исключением работы, они предпочитают мобильный телефон. И мы говорим «вероятно», потому что некоторые компании выдают сотрудникам планшеты. Так что давайте не будем забывать и о них. Нужно, чтобы каждый посетитель помогал достигать ваших целей конверсии, включая цели конверсии для мобильных устройств. Честно говоря, рекомендации для мобильных устройств отсутствуют. Все аудитории разные, и у нас есть тесты, которые доказывают: то, что работает для одной сферы бизнеса, не всегда работает для других. Существует практически бесконечное количество элементов сайта, которые можно тестировать. Однако многие из них не стоит рассматривать. Мы поделимся некоторыми идеями дизайна мобильных кнопок CTA (призыва к действию) для сайта, чтобы вы проверили их и узнали, что работает в вашем случае.

Руководство для кнопок призыва к действию на мобильных устройствах

Мы разделим все идеи на 3 основные категории:

• размещение
• текст на кнопке
• дизайн

Вы можете разработать собственный список идей (гипотез) на основе данных о посетителях и сайте. Подумайте, что могло бы привести к увеличению числа конверсий. Прежде чем углубиться в тему размещения, надписей и дизайна кнопок призыва, давайте рассмотрим основы тестирования для мобильных устройств. Посетители, зашедшие на сайт с мобильного устройства, находятся в принципиально ином контексте, чем их коллеги c настольной версии. Большинство мобильных сайтов имеет адаптивный дизайн, разработанный в первую очередь для настольных компьютеров. Это даёт вам только 50% успеха на пути к мобильному сайту с высокой конверсией. Почему? Потому что мобильные посетители погружены в контекст, который существенно отличается от контекста посетителей с настольных компьютеров. Они ждут, когда освободится столик, стоят в очереди в банке или отдыхают на диване. Они больше склонны начать разговор, чем завершить транзакцию. Это одна из причин, по которой мы часто видим, что показатели конверсии с мобильных устройств составляют половину или четверть конверсии с настольных компьютеров. По мере тестирования конверсии мобильная версия сайта развивается и будет больше отличаться от настольной версии. Нам придётся принимать различные решения: какие призывы к действию выбирать, каким из них отдавать приоритет, где их размещать, использовать текст или значки и т. д. Совершенно неясно, как создать мобильные кнопки призыва к действию, чтобы максимизировать конверсию.

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

Вспомните символ бесконечности. Существует почти бесконечное количество элементов сайта, которые вы можете протестировать. От операционной системы до типа посетителя и всего остального. Количество тестов, которые мы могли бы разработать, могло стать бесконечным. Размещение, размер, текст призыва к действию, «липкость» и частота повторения ー всё это в комбинациях увеличивает количество возможностей, что протестировать. И не забудьте учесть взаимодействие с другими элементами. Значок чата скрывает кнопку призыва к действию?

Как определить оптимальное размещение мобильных кнопок призыва к действию

«Большие пальцы посетителей тратят слишком много времени на прокрутку ваших экранов, и показатель конверсии на мобильных устройствах страдает», ー говорит Брайан Мэсси, исследователь конверсии. Команда Научных основ конверсии (далее НОК): лучшие рекомендации по размещению кнопок с призывом к действию на мобильных устройствах Мы нашли статьи, которые рекомендовали организовать призывы к действию в соответствии с их приоритетом. Например, на сайте интернет-магазина вы должны расположить следующие призывы к действию: «Продолжить покупки», «Перейти в корзину» и, наконец, «Оформить заказ». В литературе сказано, что их следует расположить по ходу движения глаз, сверху вниз. Правильно ли это и какие рекомендации вы бы дали относительно размещения кнопок с призывом к действию? Брайан Мэсси: То, о чём вы говорите, работает на экранах настольных компьютеров, но на мобильных устройствах ситуация другая. Для мобильных сайтов первый вопрос, который мы задаём: под какой призыв к действию оптимизируем сайт? Насколько сложно последовать призыву к действию на мобильном устройстве? Довольно сложно даже для цифрового поколения.   Формы сложнее заполнить на мобильном устройстве, чем с помощью клавиатуры. Это одна из причин более низких показателей конверсии для мобильных устройств. Как правило, чем больше полей в формах, тем ниже уровень конверсии. Эта проблема усиливается, если цифровая клавиатура небольшая. На одном сайте интернет-магазина, который мы исследовали, посетители должны были пройти четырёхэтапную процедуру регистрации, чтобы купить товар с настольной версии сайта. Если процесс входа в учётную запись требует, чтобы посетители нашли некоторую информацию, такую ​​как пароль или номер клиента, ваши показатели конверсии для мобильных устройств снизятся. На мобильных устройствах имеет смысл отдать приоритет чему-то более лёгкому для заполнения. Мы должны выяснить, какой призыв к действию оптимизировать. Например, мы можем обнаружить, что лучшим вариантом является оптимизация для сбора email.

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

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

Команда НОК: Можете ли вы рассказать нам больше об этих посетителях мобильных версий интернет-магазинов?

Посетители типа «мобильный–да». Их интересы учитываются благодаря призывам к действию и вашему адаптивному дизайну по умолчанию. Вы можете оценить этот сегмент по количеству завершённых мобильных транзакций. Посетители типа «мобильный–возможно». Им нужен призыв к действию, который не требует особых усилий. Вы можете получить только адрес электронной почты или разрешение написать им. Лучшим вариантом может быть предложение сохранить их корзину с товарами или предоставить скидку в обмен на разрешение связаться с ними. Этот сегмент оценивается по количеству оставленных корзин. То есть это те, кто начинает заполнять форму или нажимает кнопку «Добавить в корзину», но не завершает транзакцию. Посетители типа «мобильный–нет» могут следовать призывам к действию для «мобильный-возможно». Какой-то процент позвонит. В качестве призыва к действию протестируйте звонок по клику, особенно если вы предлагаете услугу или продукт, который сложно купить. Когда наши клиенты в качестве желаемого действия используют призыв позвонить, на мобильных устройствах они получают более высокие показатели конверсии, чем на настольных компьютерах. Вы можете оценить этот сегмент как число посетителей, которые проводят время на сайте, но не предпринимают действий. Какие сегменты самые большие в вашей ситуации ー мобильный-да, мобильный-возможно, или мобильный-нет? Эта информация поможет вам решить, какие призывы к действию попробовать в первую очередь. Если вы хорошо разбираетесь в email-маркетинге, у вас есть больше оснований для того, чтобы через призыв к действию собирать адреса электронной почты. Вот пример из жизни. Кто-то стоит в очереди в банке, и от скуки заходит в интернет-магазин. Вы ничего не продадите таким людям. Но если доход на одного получателя письма (доход от рассылки, разделённый на количество отправленных писем) выше, чем доход от мобильных посетителей в пересчёте на посетителя (доход от клиентов, зашедших с мобильных телефонов, разделённый на количество мобильных посетителей), у вас должно быть предложение получить скидку или сохранить выбор товаров. Позвольте людям просматривать товары и предложите подписаться на рассылку, чтобы превратить их в покупателей позже.

Команда НОК: Теперь мы знаем, какие призывы оптимизировать. Каков следующий шаг?

Мэсси: На мобильном сайте много кнопок призыва к действию. В конечном счёте мы должны ответить на вопрос, какие призывы будут постоянно оставаться на экране. Какие из них уходят с прокруткой, а какие видны постоянно. Какие из них находятся на закреплённом заголовке или закреплённом футере. Иногда срабатывает закреплённая шапка, а иногда футер. Шапка сайта выше в визуальной иерархии, но футер ближе к большому пальцу. Так что эти гипотезы вы должны протестировать.

Как отследить поведение пользователя и наметить места размещения кнопок призыва к действию

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

Команда НОК: Как вы узнаёте, где какой призыв к действию расположить на лендинге?

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

Команда НОК: ОК. В принципе, это противоречит всему, что мы читали раньше, верно?

Мэсси: А что все остальные говорили?

Команда НОК: Почти каждая статья повторяет одни и те же идеи. Убедитесь, что взгляд посетителя направлен на самый важный призыв к действию. Учитывайте естественное скольжение взгляда человека.

Мэсси: Визуальная иерархия важна для настольных компьютеров, но не играет роли для мобильных устройств. На настольной версии важно контролировать скольжение глаз. На мобильной версии важно контролировать большой палец. На настольной версии глаза ー «король». На телефонах большой палец ー «королева». На рабочем столе мы используем визуальную иерархию, чтобы помочь посетителю задержать взгляд в нужных местах. На мобильных телефонах мы повинуемся большим пальцам. Согласно исследованию, проведенному Стивеном Хубером, 75% пользователей касаются экрана только большим пальцем, хотя менее 50% держат телефон одной рукой. Большой палец всемогущ. Если вы посмотрите на тепловые карты с мобильных устройств, прокрутка вниз идёт намного дальше, чем на настольных сайтах. Пользователи мобильных телефонов с большей вероятностью прокручивают страницу вниз и закрывают её. Мы обнаружили, что конверсия увеличилась на 6%, когда вместо текста об авторских правах мы поместили призыв к действию внизу страницы. Мы называем это место «поддон». Если люди прокручивают всю страницу, то они довольно сильно вовлечены. Внизу вы всегда должны размещать призыв к действию. Мобильные посетители с большей вероятностью увидят футер вашего сайта. Они покидают страницу после быстрой прокрутки вниз. Для пользователей настольных компьютеров футер представляет собой кладбище, куда заглядывают только отчаявшиеся посетители.

Команда НОК: Мы читали, что по Гутенбергу из левого верхнего в правый нижний угол ー самое важное направление взгляда на мобильном телефоне.

Мэсси: поведение по Гутенбергу похоже на чтение. Это правило не относится к мобильным веб-страницам. «F-чтение», о котором вы слышали, больше относится к страницам результатов поиска на настольном компьютере. На мобильном телефоне люди больше склонны читать сверху вниз.

Команда НОК: Можете ли вы отслеживать поведение глаз на экранах мобильных устройств?

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

Команда НОК: Что происходит, когда люди делают паузу при прокрутке?

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

Команда НОК: Как мы можем использовать отслеживание прокрутки для улучшения конверсии мобильной версии сайта?

Мэсси: Давайте я покажу на примере. На странице справа есть проблема с прокруткой. Об этом можно говорить потому, что горячая белая область ー место, куда смотрит много людей, а тёмные области ー это места, куда смотрит мало людей. Вероятно, они не прокручивают дальше, потому что они вовлечены в контент, либо текст скучный, поэтому они уходят. На рис. Как мы используем отслеживание прокрутки для улучшения конверсии на мобильных устройствах. Пример из жизни Призыв к действию на этой странице видят менее 25% посетителей. Кроме того, на этой очень длинной странице есть несколько призывов к действию, которые также видят очень немногие. Отслеживание прокрутки помогает выявить эти проблемы конверсии. Чтобы ваш призыв к действию сработал, для начала люди должны его увидеть. Мы можем чётко понять, как люди читают мобильную страницу. На мобильном устройстве отслеживать движения глаз невозможно. Отслеживать прокрутку ー лучший способ.

Команда НОК: В большинстве статей говорится об определённой визуальной иерархии кнопок CTA для управления действиями посетителя. Это правда?

Мэсси: Это в основном касается настольных версий. Визуальная иерархия более важна для компьютеров, потому что мы смотрим на большое количество материала, и мы должны понимать приоритетность элементов на странице. На мобильном мы имеем дело с людьми, которые прокручивают всё вниз, и им нужно просто посмотреть, какие у них есть варианты, по мере того как они двигаются. Поэтому вы можете размещать мобильные кнопки призыва к действию рядом или закреплять их. Кнопкам, расположенным рядом, обычно уделяется одинаковое внимание, а с помощью закреплённых кнопок посетители могут выбирать, когда перейти к активным действиям.

Команда НОК: Всегда ли размещение закреплённой кнопки «Перейти в корзину» в меню гамбургера ー лучший вариант для интернет-магазина?

Мэсси: Возможно, но это не всегда лучшая комбинация. Если у вас есть сайт с большим каталогом товаров, вы можете поместить значок поиска в закреплённую шапку сайта. Если это сработает, там вы можете попытаться разместить поле поиска. Интуитивная понятность сайта и подписка на рассылку могут быть наиболее важными элементами для увеличения мобильных конверсий. Большинство идей не достигают вершины нашего списка гипотез, потому что они влияют на конверсию незначительно. Но закреплённые призывы к действию ー одни из первых элементов, которые мы тестируем на мобильных сайтах. Мы называем закреплённую шапку сайта «повязкой на голову», а закреплённый футер ー «липкими ботинками». Правильное размещение закреплённых элементов очень важно. Протестируйте оба варианта. Вы удивитесь тому, сколько всего можно включить в закреплённую шапку. У нас были успешные тесты с шапкой, которая содержала логотип компании, номер телефона для звонка по клику, призыв написать онлайн-консультанту, меню гамбургера и призыв запросить больше информации. На рис. Пример многочисленных призывов к действию в шапке сайта Если ваш доход на одного посетителя с мобильного телефона выше, чем доход на одного получателя имейла, то есть доход от электронной почты, тогда в закреплённом меню разместите вариант «Перейти в корзину». На страницах продуктов в закреплённую шапку вы сможете вынести вариант «Добавить в корзину».

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

Мэсси: Страница должна загружаться быстрее, чем за 3 секунды. Это верно для лидогенерации, но для интернет-магазинов не так важно, и это очень важно для страниц с контентом.

Команда НОК: Можем ли мы разместить более одного призыва к действию на одной мобильной странице?

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

Команда НОК: Где лучше всего разместить кнопки призыва к действию?

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

• Более частые призывы внизу страницы. Если человек быстро прокручивает страницу, вам понадобится призыв к действию, когда прокрутка даст ответ, который он искал. Это может быть один повторяющийся призыв к действию или призывы к действию, относящиеся к содержанию (например, слабенький «Подробнее»).
• Сохраняйте призывы к действию на странице. Закреплённая шапка и закреплённый футер должны быть первыми элементами, которые вы оптимизируете.
• «Поддон». Размещайте призыв к действию внизу страницы, когда посетитель хочет уйти.

Команда НОК: Прежде чем мы перейдём к дизайну мобильных кнопок, межстрочному интервалу и цвету кнопок, какой самый важный совет вы дадите для мобильных кнопок призыва к действию?

Мэсси: Первым делом вам нужно определить, что будет располагаться в закреплённой шапке. Должна ли это быть закреплённая шапка или закреплённый футер? Затем определите, какой из этих элементов должен располагаться в шапке или футере: На рис. Список вариантов призыва к действию, которые можно разместить в закреплённой шапке сайта Затем вы сможете определить, как расположить эти элементы. Другими словами, речь пойдёт о дизайне.

Создание текста призыва к действию

Надпись на кнопке должна быть описательной. Кнопка призыва к действию сообщает посетителям, что произойдёт, когда они нажмут на неё. Это должно быть актуально, понятно и соблазнительно. Например, «Получить мгновенный доступ» ー убедительно и понятно. Некоторые исследования показывают, что если вы напишете «мой» вместо «ваш», то коэффициент конверсии повысится. Но это не всегда происходит. Попробуйте создать ощущение срочности и протестируйте это. Размещение политики конфиденциальности под мобильными кнопками призыва к действию называется аннулированием риска и может помочь в привлечении потенциальных клиентов. Существует целая наука об аннулировании риска возле кнопки призыва. Доверьтесь символам, рейтингам и обзорам, звёздам, отзывамー всему, что заставляет человека чувствовать себя более комфортно, нажимая кнопку призыва. Рекомендации этого раздела, касающиеся текста призыва к действию, действительны как для кнопок на мобильном устройстве, так и для настольной версии.

Дизайн кнопок призыва к действию

Размер кнопок действительно важен, особенно на маленьких экранах. Проверьте, чтобы ваш адаптивный дизайн не уменьшал их, и следуйте стандартам IOS по размеру кнопок. В Руководстве по интерфейсу пользователя Apple рекомендует минимальный размер ー 44 пикселя в ширину и 44 пикселя в высоту. Старайтесь избегать текстовых кнопок, поскольку они слишком малы и неудобны для нажатия и могут недостаточно контрастировать с фоном. Соблюдение стандартов поможет вам не только с конверсией, но и с пользовательским опытом и SEO. Следующее, что нужно принять во внимание, это контраст. Не цвет кнопки как таковой, а контрастность цветов. Кнопка на мобильном устройстве должна выглядеть как кнопка, и, если это не так, вы можете добавить закруглённые углы, рельефные границы, тени и т. д. И если есть какие-либо сомнения, что это кнопка, добавьте стрелку, которая указывает на кнопку. Наш опыт показывает, что кнопки, которые выглядят как настоящие кнопки, как правило, работают лучше. Мы также обнаружили, что призрачные кнопки ー те, чей фон такой же, как у страницы ー кажутся невидимыми. Как обычно, вы должны всё протестировать, чтобы узнать истину. Если несколько кнопок размещены рядом, призывы к действию выделяйте более ярко, в зависимости от приоритета. Если вы работаете с платформами вроде Magento, Shopify или WordPress, адаптивный дизайн темы вас может ограничивать. В этих случаях вы должны поставить любую тему, которая позволяет показывать два разных дизайна ー один для посетителей с большим экраном и один для маленьких экранов. Возможно, вам удастся изменить шаблон темы, чтобы предоставить различные возможности устройствам с небольшим экраном. На рынке есть инструменты, которые позволяют изменять адрес сайта в браузере посетителя с помощью JavaScript. Похожую методику мы используем для A/B-тестирования. Сервер обслуживает ту же страницу, но он вносит коррективы в браузер посетителя, поскольку тот зашёл с мобильного телефона. Я думаю, важно понимать, что мобильные посетители не хотят читать сжатую версию вашего сайта. Они хотят лёгкого перемещения по сайту. Если вы тестируете типы и дизайн призывов к действию на мобильных телефонах, вы можете сократить разрыв между конверсией посетителей с настольной версии и посетителей с мобильных телефонов. Оригинал публикации: https://conversionsciences.com/mobile-call-to-action-buttons-best-guidelines-for-placement-copy-design/ Перевела Татьяна Пушкина специально для Convert Monster Подпишись и следи за выходом новых статей в нашем монстрограмме Остались вопросы? Не нашли ответ на интересующий Вас вопрос? Или не нашли интересующую Вас статью?  Задавайте вопросы и темы статей которые Вас интересуют в комментариях.