Раскройте потенциал pop-up окон на вашем сайте, создавая контекстные и персонализированные сообщения, которые улучшат взаимодействие и повысят конверсию.
22 декабря 2023
Pop-up-окна для сайта: 15 способов сделать их полезными, а не раздражающими
Pop-up-окна для сайта: 15 способов сделать их полезными, а не раздражающими
Попапы на сайте раздражают, потому что всплывают независимо от желания пользователя. В то же время попапы — это конверсионный инструмент продаж. По данным маркетинговой платформы OptiMonk, коэффициент конверсии самых эффективных окон может достигать 42,35%.
Вместе с «ЯКласс», «Ведьмино счастье» и «Музторг» расскажем, как использовать попапы с пользой для бизнеса.
Вместе с «ЯКласс», «Ведьмино счастье» и «Музторг» расскажем, как использовать попапы с пользой для бизнеса.
1. Предложить выгоду, которая интересна клиенту
Pop-up-окна на сайте раздражают, когда в них нет пользы. Если компания просто предлагает клиенту оставить email, то, скорее всего, он откажется. А если предложить скидку или подарок в обмен на контакт, то клиент может заинтересоваться.
Birkenstock протестировал конверсию попапа для сбора email с промокодом и без него. Конверсия окна без промокода — 1,5–2%, а с промокодом — 6%. Это доказывает, что клиенты компании готовы оставлять контакт в обмен на скидку.
Evita Store вместо скидки предлагает клиентам гид по базовому уходу за кожей в обмен на контакт. Конверсия попапа — 4%.
Интернет-магазин OCTAVE999 собирает даты рождения клиентов в обмен на подарок. Конверсия попапа — 4,3%
Evita Store отправляет гид по базовому уходу за кожей в обмен на email
2. Понятно объяснить в попапе, как получить выгоду
Идеальной структуры попапа не существует, но важно, чтобы клиент сразу понимал, что ему предлагают и как можно принять предложение.
Попап обычно состоит из трех частей:
- Заголовок, который озвучивает главное предложение. Например, «Получи подарок» или «Скачайте чек-лист путешественника».
- Основная часть, которая поясняет заголовок. В ней может быть текст с условиями акции, изображение подарка и форма для сбора контактов потенциальных клиентов. Считается, что изображения в попапе помогают увеличить его конверсию. OptiMonk выяснил, что у форм с изображениями коэффициент конверсии составляет 11,09%, а без изображений — 11,08%. Компания считает, что изображение само по себе неважно. Исследования Getsitecontrol, напротив, утверждают, что у форм с изображениями на 28,69% выше конверсия, чем без них. То есть необходимо тестировать разные варианты.
- Призыв к действию, который поясняет, что нужно сделать для получения бонуса. Обычно это кнопка с призывом подписаться на рассылку, заказать обратный звонок, скопировать промокод или скачать подарок.
В форме Fitmost есть заголовок, основной текст с картинкой и призыв перейти в чат-бот. Так клиенту сразу понятно, что ему предлагают, зачем и как это получить
3. Сделать попап ненавязчивым
Всплывающее окно не должно мешать просмотру сайта, поэтому его лучше показывать сбоку страницы. На экране компьютера форма одинаково хорошо выглядит слева и справа. На экране мобильного устройства лучше размещать ее в нижнем левом углу. Так клиенту удобно закрыть попап пальцем правой руки.
Формы, которые появляются в центре страницы, обычно раздражают пользователей. В то же время OptiMonk подтвердил, что у полноэкранных форм конверсия лучше, чем у небольших. Если компания хочет воспользоваться этим преимуществом, то стоит учитывать два момента:
- Всплывающее окно должно легко закрываться нажатием на крестик. Крестик лучше размещать в правом верхнем углу формы — это привычно для пользователей.
- Большие попапы лучше показывать только тем клиентам, которые, скорее всего, заинтересуются предложениями в попапах. Например, предложить скидку на товары, которые клиент только что положил в корзину
Форма на сайте «Алеана» показывается в правом углу, не мешая просмотру страницы. Клиент может скрыть его или оставить
Форма на сайте «Алеана» посередине страницы привлекает внимание к распродаже. Попап мешает просмотру сайта, но его легко закрыть, нажав на красный крестик в правом углу
Попап со скидкой можно улучшить, добавив в него кнопку «скопировать промокод». Клиент нажмет на нее, и промокод в один клик скопируется в буфер обмена. Это удобнее, чем выделять его мышкой.
Попап для сбора данных можно улучшить, добавив в поле ввода маску для его валидации. Она проверит корректность email и подсветит ошибку, если клиент введет адрес некорректно.
4. Персонализировать контент под разные клиентские сегменты
Персонализировать pop-up-окна можно по разным данным: полу, интересам, географии, поведению на сайте и другим.
«Алеан» персонализирует контент в попапах по интересам пользователя. Если он ищет конкретный отель или просматривает определенную категорию отелей, то ему предлагают интересную информацию именно о них.
Всплывающая форма «Понравившийся отель»
Email-рассылка об отеле «Славянка»
MOON-Trade сегментирует клиентов по месту проживания и по истории поведения на сайте. Так, жителям разных регионов показывают разные всплывающие окна. А если новый клиент добавляет товар в корзину, ему показывается форма с предложением заморозить цену в обмен на адрес электронной почты.
Всплывающее окно MOON-Trade появляется только для новых посетителей из Воронежа
Всплывающее окно для сохранения корзины видят клиенты с полной корзиной
«ЯКласс» готовит разные попапы для взрослых и детей. Взрослым предлагают обучающие вебинары, чтобы быстрее освоиться на платформе. Похожие формы есть и для школьников, только подача и дизайн сильно отличаются.
Попап «ЯКласса» с записью на вебинар для взрослых выглядит строго и сразу обозначает тему
Форма «ЯКласса» для записи на стрим для школьников более веселая, без конкретики в теме
В Mindbox можно персонализировать попапы под конкретного пользователя. Например, показывать форму ко дню рождения. Если клиент заходит на сайт в преддверии праздника, то ему показывается поздравительный попап с промокодом. Обычно такие промокоды работают неделю до и неделю после праздника.
5. Размещать разные попапы на разных страницах сайта
Одни и те же попапы на каждой странице сайта могут работать по-разному. Окно с рекомендациями в карточке товара может мотивировать клиента положить в корзину рекомендованные товары. Такое же всплывающее окно в корзине может, наоборот, отвлечь пользователя от оформления заказа. На некоторых страницах попапы лучше вообще не показывать: например, на странице с информацией о доставке не стоит отвлекать пользователя от контента, предлагая совершить покупку.
United Colors of Benetton показывает персонализированные формы в каждой карточке товара. В ней появляется блок с информацией о том, сколько клиентов в течение дня купили такой же товар. АБ-тесты подтвердили, что форма увеличила количество заказов на 10%. На других страницах сайта такой попап не появляется.
Персонализация в карточке товара на сайте Benetton
Intimshop настроили попапы с товарными рекомендациями в карточке товара, которые всплывают, если клиент пытается закрыть вкладку.
Всплывающее окно с рекомендациями на сайте Intimshop
6. Геймифицировать попапы
Игровые попапы вызывают интерес пользователей, потому что подарок из них надо заслужить. В этом случае скидка кажется более желанной. OptiMonk говорит, что конверсия у игровой формы с «Колесом фортуны» — 13,23%, а средняя конверсия других форм — 11%.
FOAM использует «Колесо фортуны» для сбора email-адресов. Оно появляется на всех страницах сайта, кроме карточек товаров и корзины. Так клиенты не отвлекаются от покупок, если уже определились с выбором.
Конверсия игрового попапа FOAM в оставленный контакт — 8,8%
Orby подтвердил, что конверсия игрового попапа выше, чем у статичного: 5,4% против 4%.
Всплывающее окно с «Колесом фортуны» на сайте Orby
До внедрения «Колеса фортуны» на сайте была статичная форма для сбора email-адресов, но многие посетители сайта до нее просто не доходили — наша активная подписная база прирастала медленно. Мы с коллегами тестировали разные механики, однако они тоже не приносили результата.
Наш менеджер Mindbox Александра Солодянкина предложила протестировать попап «Колесо фортуны», и мы очень быстро его настроили и запустили. Все сложилось не сразу, но мы внесли правки в настройки и первые результаты не заставили себя ждать: конверсия в email-адреса выросла на 35% относительно конверсии статичного попапа. Посетители сайта участвовали в игре и применяли свои скидки и бонусы сразу, не откладывая.
Внедренной механикой остались довольны: настройка не занимает много времени и не вызывает трудностей, а положительные результаты можно видеть уже на следующий день.
Кожгалантерея «Верфь» выяснила, что в игровых попапах лучше предлагать бонусы, а не подарки. Раньше в «Колесе фортуны» предлагали клиентам скидку, бесплатную доставку или просто подарок: ключницу или картхолдер. Чтобы получить подарок, не нужно было ничего покупать. Со временем стало понятно, что это неэффективно — некоторые клиенты забирали подарки по несколько раз, ничего не покупая. Сейчас в форме просят регистрироваться в программе лояльности в обмен на бонусные баллы на первую покупку. Это оказалось экономичнее, чем подарки, а конверсии при этом не хуже.
Конверсия «Колеса фортуны» от «Верфи» — 4%
7. Подобрать лучший момент показа попапа
Если форма всплывает, как только пользователь зашел на сайт, это раздражает. Если не успеет появиться до ухода клиента, то покупка не состоится.
Чтобы избежать обоих сценариев, стоит подобрать лучший момент для показа попапа. Его можно найти самостоятельно или скопировать опыт других компаний. Момент может быть привязан ко времени, которое пользователь провел на сайте, или к объему просмотренных страниц.
Birkenstock протестировал два времени показа попапа: через 15 и 30 секунд после захода пользователя на сайт. Выиграла форма, которая появляется на сайте через 30 секунд: коэффициент транзакций — 3,07% против коэффициента 15-секундного варианта — 2,21%.
Getsitecontrol протестировал разницу в конверсиях попап-окон для сайта, показанных в разное время. Оказалось, что конверсия формы, которая появляется через 5 секунд после захода на сайт, — 5,26%, а через 2–5 секунд — 3,46%. Оптимальным значением для показа компания считает 8 секунд.
Что касается глубины просмотра контента, то лучшие результаты показывают попапы, которые появляются, если клиент прокрутил страницу минимум на 35%.
Форма на сайте интернет-магазина «Ведьмино счастье» учитывает разные модели поведения клиента и появляется при выполнении минимум одного условия:
- прочитал страницу на 60%,
- провел на странице 30 секунд,
- провел на сайте две минуты,
- посетил две страницы.
Всплывающее окно для сбора контактов на сайте «Ведьмино счастье» за пять месяцев собрало почти 6,7 тысячи активных контактов
Магазин «Кант» показывает форму после 25 секунд, проведенных клиентом на сайте. Конверсия в оставленный контакт — 0,14%.
Всплывающая форма на сайте «Кант» привлекает внимание клиентов, которые провели на сайте достаточно времени
Лучшее время появления попапа зависит от его задачи. Если он нужен, чтобы подсветить скидку, то лучше его показать сразу, как только клиент зашел в карточку товара. Еще лучше сделать это аккуратно — сбоку, чтобы не сильно отвлекать пользователя.
Если он используется для сбора данных, то показывать его надо не сразу. Вначале надо дать клиенту освоиться на сайте, посмотреть товары, заинтересоваться чем-то и только потом предложить оставить контакты для коммуникации.
8. Ограничить количество форм для одного клиента
Количество попапов, которые стоит показывать одному клиенту, каждая компания выбирает сама. Обычно показывают три попапа за сессию, чтобы внимание клиента не рассеивалось.
Zolla считает, что не стоит мучить клиентов всплывающими окнами, потому что это слишком агрессивная коммуникация. Их подключают по мере необходимости, например при старте распродажи, запуске самовывоза и других изменениях.
Постоянно работает только один попап — подписка. Он показывается не чаще одного раза в неделю и только тем, кто еще не подписался на рассылки бренда.
Форма подписки Zolla не раздражает клиентов, потому что появляется не чаще одного раза в неделю
Бренд женской одежды YOU, наоборот, считает, что попапы помогают увеличить выручку, поэтому запустил более ста вариантов попапов. Форма с промокодом 15% на первый заказ помогает новичкам решиться на покупку. Механика состоит из двух шагов: предложение подписаться на рассылку и напоминание о промокоде. Первый шаг видят клиенты без подписки и без заказа не чаще одного раза в семь дней. Второй видят раз в пять дней те, кто получил промокод, но так и не совершил заказ. Частота подобрана интуитивно.
Всплывающие окна на сайте YOU показываются с ограничением в пять и семь дней, чтобы не раздражать клиентов без покупок слишком частыми показами
Можно выстроить коммуникацию на сайте таким образом, что клиента не будут раздражать даже 10 попапов за одну сессию. Например, если они показываются каждый в свое время, со своими условиями, на разных страницах сайта и их не нужно закрывать для продолжения просмотра. Небольшой блок «социальное доказательство» может быть в карточке каждого товара. Так клиент будет видеть на разных страницах разные формы с социальным доказательством и не считать их навязчивыми.
9. Использовать психологические триггеры
Триггеры — это дополнительные стимулы, которые мотивируют клиентов купить товар или совершить нужное компании действие. Один из самых эффективных триггеров — социальное доказательство. Обычно под ним понимают отзывы клиентов, количество покупателей товара и другие. Согласно данным StatistaQ, 86% клиентов предпочтут купить товар, у которого уже есть отзывы, вместо малоизвестной новинки.
«Столплит» используют две формы с триггером «социальное доказательство» — «Хит продаж» и «Высокий спрос» в карточке товара.
Попапы «Хит продаж» и «Высокий спрос» на сайте «Столплит» показываются сбоку, чтобы не отвлекать клиента от просмотра
Таймер обратного отсчета в попапе — это триггер срочности. Обычно его используют во время распродаж, которые привязаны к определенной дате. OptiMonk говорит, что средний коэффициент конверсии форм с таймером обратного отсчета — 14,41% по сравнению с 9,86% у окон без таймера.
Магазин 3Dplitka.ru подтвердил эффективность таймера с промокодом на своем сайте. Триггер срочности помог увеличить выручку магазина на 2,7 млн рублей, а доход за каждый сеанс — на 37,16 рубля: с 106,3 до 143,46 рубля.
Окно с таймером и промокодом на сайте магазина 3Dplitka.ru отсчитывает время до окончания действия скидки
10. Использовать сторис в мобильной версии сайта
Попап в мобильной версии сайта чаще всего занимает весь экран, потому что окно на телефоне более узкое, чем на компьютере. Это может не нравиться клиентам, поэтому для мобильного телефона сторис — важный инструмент. Они заметны на экране, но не отвлекают от основного контента.
Кожгалантерея «Верфь» использует сторис вместо попапов в мобильной версии сайта, чтобы привлекать внимание к определенным изделиям. В сторис выводят самые популярные товары, новинки или информацию о распродажах. Из каждой сторис клиент может перейти в карточку товара для покупки.
Конверсия в заказ из сторис в мобильной версии сайта кожгалантереи «Верфь» — 5%
Косметический бренд Oriflame персонализирует сторис. Если клиент смотрел тушь или парфюм, в сторис выводится соответствующее предложение:
Персонализированная сторис для клиентов, которые просматривали тушь на сайте
11. Использовать ML-алгоритмы
ML-алгоритмы могут самостоятельно решать, какую форму показать клиенту в зависимости от его поведения. Например, Mario Berluссi использует ML-алгоритм, чтобы определить: предлагать клиенту скидку или нет. Если алгоритм считает, что клиент купит без скидки, попап не появится. Если он считает, что клиент уйдет с сайта без покупки, то появится попап со скидкой.
Блок со скидкой на сайте Mario Berluссi работает на основе алгоритмов машинного обучения. Алгоритм сам определяет, каким клиентам показать попап, а каким — нет
12. Проводить АБ-тесты
Универсального попапа, который будет работать в любой индустрии, не существует. Можно копировать удачные кейсы других компаний, но лучше проводить тесты, чтобы выбрать самый эффективный вариант для себя.
MOON-Trade протестировали два вида попапов для сбора контактов клиентов: c единой для всех скидкой и «Колесом фортуны», в котором можно выиграть разные скидки. Конверсия игрового — 2,8%, а обычного — 0,8%.
Статичная форма со специальным предложением на сайте MOON-Trade
Всплывающее окно с интерактивными элементами на MOON-Trade
Музыкальный магазин «Музторг» выяснил, что персонализированные попапы приносят на 125% больше контактов, чем обычные. Их показывают в зависимости от того, какие музыкальные инструменты смотрел посетитель сайта.
Пример формы «Музторг», которую показывают тем, кто смотрел гитары
Пример формы «Музторг», которую показывают тем, кто смотрел рояли
12 STOREEZ проверила два варианта попапов с предложением получить плейлист для утренних пробежек. У одной группы клиентов попросили почту сразу, а второй сначала предложили плейлист. Варианты формы отличаются только дополнительной кнопкой «Прислать плейлист», текст и картинка одинаковые. В результате попап с дополнительной кнопкой собрал больше контактов — 2,6% против 0,98%.
Форма, в которой сразу просят электронную почту
Форма, в которой сначала предлагают плейлист, затем просят подписаться на рассылку
Тестировать можно содержание попапа, его дизайн, таргетинг и другие сценарии.
Так можно проверить, в каком дизайне попап работает лучше: например, с красной кнопкой или с зеленой. Для достоверности нужно, чтобы попапы появлялись в одном месте сайта, по одному таргетингу и с одинаковыми условиями показа. Различаться они должны только цветом кнопки. Кроме дизайна, еще тестируют контент или процентную скидку против денежной.
Можно протестировать таргетинг одинаковых по содержанию и дизайну попапов. Например, одним клиентам предложить скидку сразу при входе на сайт, а другим спустя какое-то время. Так можно определить лучшее время показа попапа.
13. Создавать видеопопапы
«Нетология» попробовала использовать видеовиджеты, чтобы улучшить конверсию в запись на бесплатные вебинары. Компания предположила, что короткие видеоролики с рассказом о пользе вебинаров повысят интерес студентов к обучению. Гипотеза оправдалась, сlick rate видеовиджета на лендинге платного курса — 19,95%, конверсия в заявку — 4,07%.
У видеоконтента есть преимущества перед текстом: лучше привлекает внимание, быстрее вовлекает пользователя и требует меньше усилий для обработки информации. Поэтому для увеличения конверсии мы решили использовать именно видеовизитки курсов продолжительностью до минуты. Они появляются в начале страницы и должны мотивировать пользователя дойти до конца, чтобы оставить заявку. Если он этого не сделал, позже мы постараемся вернуть его с помощью рассылок и звонка консультанта из отдела продаж.
14. Делать попапы составными
Некоторые компании используют многошаговые попап-окна, чтобы собрать больше данных по клиентам. В первой форме предлагают ввести имя, чтобы получить скидку. Потом просят ввести email, потом дату рождения и так далее. Так клиент видит поля для заполнения не сразу, а постепенно. С одной стороны, это может вызвать раздражение. С другой — может завлечь как в игру, где скидку надо заслужить. Если же показать большую форму для заполнения сразу, то клиент может уйти, не захотев тратить время.
Простой пример многошагового попапа сделал SeasonMarket. В первой форме клиент просто отвечает на вопрос, во второй вводит свои данные, в третьей получает благодарность от бренда.
Попапы SeasonMarket появляются не чаще одного раза в пять дней. Из 13 тысяч пользователей, которые видели их, контакты оставили 2100 человек
Intimshop использует многошаговый попап для получения данных от новых клиентов. После того как клиент указал адрес почты, открывается второе окно, в котором просят указать пол и предпочтения. В обмен на информацию клиент получает скидку от бренда.
Форма для сбора email и данных от новых клиентов на сайте Intimshop
15. Придумывать необычные попапы
Шаблонные попапы, которые появляются на каждом сайте, уже примелькались клиентам. Они часто закрывают окна на автомате, несмотря на выгодное предложение. Для таких клиентов DIY-ритейлер «Петрович» встроил на сайт центр уведомлений, где хранятся все скрытые клиентом окна. При желании пользователь может в любой момент вернуться к ним, нажав на виджет.
Виджет для открытия скрытых попапов размещен в левом нижнем углу на сайте «Петровича»
При нажатии на виджет открываются все скрытые ранее попапы, чтобы клиент не потерял выгодные предложения
Еще иногда бывают попапы нестандартной формы, например, с размытым фоном. Это выглядит как светящийся шар со скидкой. Такая форма выглядит довольно интересно, поэтому контент на ней привлекает внимание.
Три интересные идеи попапов от клиентов Mindbox
1. SeasonMarket увеличивает средний чек, показывая в попапе сумму, которую нужно добавить к заказу для получения скидки. Клиент может легко отказаться от нее или вернуться в корзину, чтобы добавить товары.
SeasonMarket предлагает купить больше товаров в обмен на скидку
2. Сеть «КОЛЕСО.ру» использует попапы, чтобы сгладить сезонные колебания спроса на шиномонтаж. Если клиент записывается на сайте в пиковое время, например в апреле, в попапе предлагают отложить визит до середины мая. Взамен автовладелец получает скидку 40%.
Окно с предложением перенести визит в салон в обмен на скидку в 40% от «КОЛЕСО.ру»
3. НАДПО сегментирует клиентов по интересам с помощью попапа. В нем клиент может выбрать понравившиеся темы рассылок: одну, две или все сразу. Так он будет получать только интересные ему письма и вряд ли захочет отписаться.
Попап c выбором тем можно увидеть, только если перейти на сайт из welcome-письма после подписки на рассылку НАДПО
