7 уроков о всплывающих окнах для мобильных, которые мы выучили благодаря A/B-тестам

< >

Всем привет. Я контент-маркетолог сервиса Carrot quest, который занимается сбором данных о посетителях сайта и настройкой коммуникаций с ними.

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

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

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

Многие маркетологи боятся ставить на свои сайты попапы, потому что считают, что людей они раздражают. Это, конечно, неспроста. По запросу «ненавижу всплывающие окна» Google выдает 96 500 страниц.

Пришлось вырезать нецензурную лексику, но вы можете повторить эксперимент самостоятельно.

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

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

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

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

Давайте посмотрим, как можно улучшить мобильные всплывающие окна.

1. Сегментируйте предложения

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

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

1. Собирайте информацию о посетителях сайта.
2. Делите аудиторию по сегментам.
3. Показывайте в попапах только те предложения, которые заинтересуют клиентов.

2. Адаптируйте попапы под мобильные

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

В среднем 52% мирового трафика приходится на мобильный интернет (а в Кении — 83%).

Адаптировать сайт под мобильные устройства — это давно уже не новшество и даже не тренд, а необходимость. Еще в 2015 Google заявил, что в поисковой выдаче приоритет отдается сайтам, которые адаптированы под мобильные. А с 2018 Google Chrome пригрозил, что будет блокировать назойливую рекламу на сайтах. Но если в попапах вы не рекламируете товары и услуги третьей стороны, вам нечего бояться.

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

У вас есть варианты:

1. Сделать разные попапы для мобильной и десктопной версии сайта.
2. Адаптировать попап под разные устройства.

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

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

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

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

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

3. Выберите удобный для пользователя размер попапа

Мобильное всплывающее окно может быть маленьким и не закрывать основное содержание сайта, а может быть на весь экран, тогда его трудно не заметить. Давайте устроим баттл (точнее, А/Б тест).

Как провести A/B-тест сайта: инструменты и популярные гипотезы Как и во всех А/Б тестах, аудитория делится пополам случайным образом, и одна половина видит вариант А, а вторая — вариант Б. Затем мы сравниваем конверсии (процент людей, оставивших телефон) обоих попапов и оставляем самый удачный.

Вот какие результаты мы получили:

Вариант А — 1,2%.
Вариант Б — 1,7%.

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

35 ошибок при А/В-тестировании Свою роль еще играет заголовок «Оставьте телефон», который есть только в большом попапе — четкие указания к действию никогда не помешают. Если оставить только этот текст в маленьком всплывающем окошке, потеряется ценность — зачем оставлять, поэтому в маленьком лучше оставлять информацию о том, зачем это делать.

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

4. Объясните клиентам, что будет после заполнения формы

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

Чтобы подтвердить эту гипотезу, мы провели А/Б тест: в одном варианте автосообщения просили оставить телефон для оформления заявки, а в другом — добавляли информацию, что менеджер перезвонит через две минуты.

Конверсия варианта А — 1,5%.
Конверсия варианта Б — 2,1%.

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

5. Покажите пример заполнения

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

Мы снова провели А/Б тест. Одна половина аудитории видела попап с обычным полем для ввода (вариант А), а другая — с полем с маской (вариант Б).

Конверсия варианта А — 2,7%.
Конверсия варианта Б — 3,3%.

Глядя на маску, человек сразу понимает, чего от него хотят (можно даже не читать сообщение) и не задается вопросами в духе «надо писать через восьмерку или +7».

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

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

Спасибо нашим клиентам, которые сказали, что у них возникли проблемы. Ситуацию мы быстро поправили, но если бы клиент не был так заинтересован и не написал нам, мы бы не узнали, почему теряем слушателей.

6. Собирайте не только номер телефона

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

Посмотрите на это мобильное всплывающее окошко.

Прайс — это не то, что удобно обсуждать по телефону. Его логично отправить на почту, а потом уже обговорить.

Конверсия в email составила 3% (а аналогичный сценарий для десктопной версии принес 4,5%). Конверсия с десктопа еще долго будет выше, чем с мобильных (потому что на них бaнaльно удобнее набирать), но это не значит, что надо игнорировать телефоны и планшеты — не упускайте клиентов.

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

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

Конверсия в email — 26,3%, а этот же сценарий с десктопа — 40,5%.

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

7. Проводите собственные эксперименты

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

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

Вариант А — 4,9%.
Вариант Б — 3,7%.

На этом сайте победило зеленое всплывающее окно. Значит ли это, что в вашем случае ситуация будет точно такая же? Конечно нет. Запускайте собственные А/Б тесты, следите за статистикой и выбирайте решения, которые подходят именно вам.

И конечно, делитесь мнениями по А/Б-тестам в комментариях.

---

Мнение авторов гостевого поста может не совпадать с позицией редакции и специалистов агентства Netpeak.