Всплывающее окно (попап) — это элемент интерфейса, который отображается поверх веб-страницы в браузере. Внезапно «всплывает» без запроса пользователя по заранее настроенному сценарию.
Запустили курс о том, как связать email, CRM, сегментацию, триггеры и аналитику в систему, которая влияет на бизнес-показатели.
Полезно для тех, кто отвечает
за рост, удержание и коммуникации
с клиентами. Учитесь самостоятельно или под руководством экспертов.
Показ можно настроить по времени, клику, прокрутке или действию посетителя. Например, после чтения статьи предложить подписку на материалы по этой же теме.
Пример попапа с подпиской на рассылку
Зачем нужны попапы
Попапы нужны, чтобы пользователь совершил целевое действие.
Пользователю предлагают оставить свой email для рассылки, номер телефона для звонка или зарегистрироваться в сервисе. На всплывающем окне размещают кнопку СТА.
Попапы применяют, чтобы достичь следующих целей:
- Привлечь подписчиков. С помощью всплывающих окон компании предлагают подписаться на email-рассылки.
- Сообщить новости. Например, рассказать об апдейтах сервиса или обновлениях в тарификации.
- Показать рекламу. Рассказать об акциях, скидках, новых товарах и услугах.
- Получить заявки от клиентов. Пользователю предлагают оставить свой телефон или почту, чтобы менеджер перезвонил для консультации. В обмен на контакты часто дарят лид-магнит — чек-лист, подборку или электронную книгу.
- Собрать обратную связь. Например, предложить оценить полезность статьи или назвать причину отказа от покупки.
- Удержать уходящего посетителя. Предложить помощь с выбором или бонус при попытке закрыть окно сайта.
Всплывающие окна: за и против
Отношение аудитории к всплывающим окнам неоднозначное.
Долгое время инструмент использовали слишком агрессивно. Например, окна снова открывались автоматически после закрытия, их нельзя было убрать до выполнения целевого действия. Также раньше с помощью всплывающих окон мошенники внедряли вредоносные программы, например вирус-вымогатель, полностью блокирующий экран.
Вредоносное всплывающее окно требует оплаты для восстановления доступа к системе
При этом средний коэффициент конверсии всплывающих окон составляет около 11%, а отдельные наиболее эффективные попапы демонстрируют конверсию до 42%.
При таких показателях попап — это хороший инструмент маркетинга, который можно и нужно использовать, но важно делать это грамотно. Окна, которые перекрывают контент, повторяются после закрытия или мешают выполнить задачу, могут раздражать посетителей.
Типы попапов
По назначению
В зависимости от задачи попапы можно разделить на три основные группы.
Конверсионные попапы. Помогают получить заявку, подписку или заказ. Например, интернет-магазин предлагает скидку 10% за подписку на рассылку, а образовательная платформа — бесплатный чек-лист в обмен на email. Такие окна используют для привлечения потенциальных клиентов и увеличения конверсии.
Информационные попапы. Сообщают посетителям важные новости и изменения. Например, предупреждают о технических работах, новых условиях доставки или изменении графика работы. К ним также можно отнести уведомления об использовании cookies, хотя технически они не всегда являются попапами.
Попапы для сбора обратной связи. Помогают узнать мнение пользователей о сайте, товаре или услуге. Например, после прочтения статьи посетителю предлагают оценить её полезность, а после оформления заказа — ответить на короткий вопрос об удобстве покупки.
Один попап может решать сразу несколько задач. Например, окно со скидкой помогает удержать уходящего пользователя и одновременно мотивирует его завершить покупку.
По формату
По формату различают окна, блокирующие остальной интерфейс, и неблокирующие окна или плашки.
Hello-board (неблокирующие попапы). Не мешают пользователю просматривать страницу и взаимодействовать с сайтом. Обычно занимают небольшую часть экрана и располагаются у его краёв — например, в виде узкой полосы сверху или снизу. Пользователь может закрыть такое окно или просто проигнорировать его.
Пример hello-board
Page-stop (модальные, или блокирующие, попапы). Появляются поверх содержимого страницы и временно ограничивают взаимодействие с сайтом. Обычно располагаются по центру экрана, а фон страницы затемняется. Чтобы продолжить работу с сайтом, пользователь должен закрыть окно или выполнить предложенное действие.
Пример page-stop
Hello-board раздражают пользователей меньше, чем page-stop, поскольку они менее навязчивы и их можно просто проигнорировать. Но page-stop считаются более эффективными, поскольку заставляют пользователей остановиться и ознакомиться с информацией.
Например, компания AWeber провела исследование сайта клиента и выяснила, что page-stop принесли в 14 раз больше регистраций, чем форма сбоку.
Комментарий экспертаДа, попапы hello-board менее заметные. Кроме того, очень часто встречаются абсолютно серые попапы, за которые в принципе не цепляется внимание, поэтому да, их очень часто игнорируют.
Page-stop эффективнее, но — при соблюдении отдельных правил. Например, крестик должен действительно закрывать попап, а не просто быть :).
Виды всплывающих окон по условиям показа
В зависимости от условий показа выделяют 5 самых популярных видов попапов:
- приветсвенное окно;
- окно с временной отсрочкой;
- окно по пролистыванию;
- окно прощания;
- окно со всплытием по клику.
Далее расскажем, в чем плюсы и минусы каждого варианта и в каких ситуациях его лучше использовать.
Приветственное окно (entry pop-up)
Когда появляется. Всплывает сразу при загрузке страницы. Модальный вариант перекрывает контент до закрытия.
Преимущества. Гарантированно привлекает внимание пользователей. Чтобы убрать окно, посетитель должен выполнить требуемое действие или закрыть попап вручную.
Недостатки. Ранний показ прерывает знакомство с сайтом. Для подписки или заявки стоит проверить более поздний триггер: посетителю нужно время, чтобы оценить предложение.
Когда лучше использовать. Чаще приветственные окна применяют для экстренной связи с посетителями. Например, чтобы уведомить о технических проблемах, пригласить на вебинары, рассказать о масштабном обновлении. Если вы решили применить приветственное окно для привлечения подписчиков или получения заявки, предложите взамен какую-либо выгоду.
Окно-приветствие не даёт ознакомиться с контентом до закрытия
Окно с временной отсрочкой (timed pop-up)
Когда появляется. Всплывает через определённое время после того, как пользователь зашел на страницу.
Преимущества. Легко настроить, через какое время будет всплывать pop-up. Пользователь уже успеет познакомиться с контентом, получить ценную информацию.
Недостатки. Задержку легко выбрать неудачно: ранний показ мешает чтению, поздний — не успевает сработать.
Есть мнение, что оптимальный вариант — показывать окно не раньше, чем через 60 секунд после загрузки сайта. Однако лучшее время покажут тесты на вашей аудитории и нише.
Например, в результате A/B-теста LeadGenic выяснилось, что попап, который показали через 2 секунды после входа принес больше конверсий, чем более поздние.
Когда лучше использовать. Предложите подписаться на рассылку или посмотреть другой раздел сайта. С помощью timed pop-up часто привлекают лиды, собирают заявки, предоставляют демо-доступ к сервису.
Чтобы выбрать исходную задержку, изучите время взаимодействия со страницей и поведение посетителей в системе аналитики. Затем сравните варианты показа в A/B-тесте. Долю среднего времени на странице можно использовать как гипотезу, но не как готовую настройку.
Окно по пролистыванию (scroll pop-up)
Когда появляется. Всплывает, когда пользователь пролистает определённый процент страницы. Порог выбирают по данным страницы и проверяют тестом: глубина прокрутки не означает, что текст прочитан.
Преимущества. Можно показывать пользователю предложение, максимально релевантное просматриваемому контенту.
Недостатки. Сложно выбрать правильный процент пролистывания.
Когда лучше использовать. Scroll pop-up позволяет поделиться контентом, рассказывать пользователям о новостях и текущих акциях, предлагать подписку на рассылку.
Руководствуйтесь статистикой о средних доскроллах страницы, чтобы определить лучшее время для показа попапа. Используйте данные тепловизоров для сайтов (например вебвизора «Яндекс Метрики»), когда будете задавать условия для появления окна. С помощью тепловизоров можно посмотреть, как ведут себя посетители на сайте и до какого момента в среднем прокручивают страницу.
Вебвизор «Яндекс.Метрики» показывает видео поведения пользователей на странице
Окно прощания (exit pop-up)
Когда появляется. Отображается в момент, когда посетитель собирается покинуть сайт.
Срабатывает по сигналам предполагаемого ухода. На компьютере это может быть движение курсора к верхней границе браузера; на мобильных устройствах применяются другие сигналы, зависящие от сервиса. Это прогноз поведения, а не точное знание намерения пользователя.
Преимущества. Позволяет вернуть пользователя на сайт, зацепить внимание.
Недостатки. Иногда его применяют, чтобы просто задержать посетителя и не предлагают взамен ничего ценного. Например — «Вы уже уходите. Вы нашли ответ на свой вопрос?».
Когда лучше использовать. Задача exit pop-up — удержать внимание. Поэтому окно используют, чтобы предложить дополнительный релевантный материал, пригласить в другой раздел сайта или получить email для рассылки.
Не лучший пример окна-выхода: непонятно, почему пользователь должен остаться
Окно со всплытием по клику (click pop-up)
Когда появляется. Всплывает, когда пользователь совершит определенное целевое действие. Например, кликнет по ссылке или кнопке.
Преимущества. Такой тип окна экономит место на странице, не перегружает пользователя и позволяет организовать удобный интерфейс.
Недостатки. Если пользователь не выполнит нужное действие для показа попапа, то он его и не увидит.
Когда лучше использовать. Такой тип окон используют, чтобы показать форму подписки или обратной связи, подсказки по интерфейсу и функционалу сайта. Например, пользователь кликает по кнопке «Перезвоните мне», в итоге сразу всплывает окно с формой заказа обратного звонка.
Попап всплывает после клика по кнопке «Перезвоните мне»
Другие условия показа попапов
Всплывающие окна можно запускать не только по времени, клику или прокрутке страницы, но и в зависимости от поведения посетителя.
При повторном визите. Если человек уже заходил на сайт, ему можно показать специальное предложение или напомнить о просмотренных товарах.
После бездействия. Если пользователь некоторое время не взаимодействует со страницей, попап может предложить помощь или консультацию. Но важно не мешать тем, кто просто внимательно читает материал.
После добавления товара в корзину. Интернет-магазин может предложить сопутствующий товар или рассказать, как получить бесплатную доставку.
При выполнении другого действия. Например, после скачивания бесплатного материала предложить подписаться на рассылку, а после оформления заказа — оставить отзыв.
Выбор условия показа зависит от цели попапа. Например, предложение скидки при попытке уйти с сайта может быть уместнее, чем такое же окно сразу после открытия страницы.
Элементы всплывающего окна
Любая форма попапа состоит из трёх частей:
- Заголовок. Он должен пояснять содержание и быть понятным. Пользователю должно быть с первых секунд ясно, что это за форма. Лучше использовать простые слова и короткие фразы. Например, «Подпишитесь на рассылку», «Получите скидку».
- Основная часть. Это может быть текст или форма. Форму обычно используют, чтобы собрать данные: имя, email, номер телефона. А в тексте важно показать выгоду от предложения, чтобы мотивировать к действию
- Призыв к действию. Например, кнопка или подпись со ссылкой. Этот элемент мотивирует клиентов совершить целевое действие: подписаться на рассылку, заказать обратный звонок или скачать pdf-книжку.
Правильная форма не оставляет вопросов о том, зачем с ней взаимодействовать
Если вы собираете информацию о пользователе, например имя, фамилию, телефон или email, нужно запросить согласие на обработку персональных данных.
Его оформляют отдельно от других подтверждаемых документов. Ссылка на политику конфиденциальности не заменяет согласие. Для рекламной рассылки требуется предварительное согласие адресата на получение рекламы. Важно, чтобы в попапе были все необходимые галочки и ссылки.
Комментарий экспертаХорошо работают попапы, в которых в основной части есть не только форма сбора контактов, но и перечислены выгоды клиента. Мы рекомендуем именно такой вариант, потому что, по опыту, условное «подпишитесь на рассылку» работает хуже, чем «подпишитесь на рассылку и получите что-нибудь».
А ещё в попапах, которые собирают контакты, отлично работает соцдоказательство — количество подписчиков, которые уже читают рассылку. Создаётся ощущение, что ты один не курсе, когда все остальные уже ее читают :).
Как создать pop-up
Для создания попапов используйте следующие способы:
11 лучших сервисов, чтобы сделать попап
- Специальные сервисы, например Hellobar, GetSiteControl, Plerdy, WisePops, Keplerleads.
- Сервисы рассылки со встроенным редактором, например Unisender.
- Аутсорс. Нанять верстальщика, который соберет попап вручную и поставит код на сайт.
Кроме того, создавать попапы можно с помощью различных плагинов, например, Popup Maker из официального каталога WordPress. Перед установкой нужно проверить дату обновления, совместимость с сайтом и доступные условия показа.
Как правильно оформить pop-up
При создании всплывающих окон главная цель — создать pop-up, который будет решать поставленные задачи и при этом как можно меньше раздражать пользователей.
Вот несколько правил хорошего попапа:
Понятный интерфейс. У пользователя должна быть возможность сразу принять решение, а не разбираться с функционалом. Текст, поля и кнопки должны быть крупными и заметными.
Выгода. Пользователь должен сразу понимать, зачем ему взаимодействовать с попапом. Например, «Получите чек-лист по запуску рекламы» звучит конкретнее, чем «Подпишитесь на наши новости».
Адаптивность. Учитывайте, что немалая часть трафика приходится на мобильную аудиторию. Всплывающее окно должно полностью помещаться на экране смартфона, но не закрывать весь полезный контент. Кнопка закрытия должна быть хорошо видна, а текст и поля формы — удобны для чтения и заполнения.
Уместность. Нужно учитывать логику показа окна и ее релевантность текущим действиям пользователя. Например, нецелесообразно показывать форму подписки тем, кто уже оставил свой email или предлагать подписку на новые статьи сразу после перехода в блог.
Ненавязчивость. Если пользователь закрыл окно, оно не должно открываться вновь. Также не стоит несколько раз подряд предлагать одно и то же. Нужно предусмотреть на окне надпись «Я уже подписан» или «Не показывать больше».
После закрытия не показывайте то же предложение сразу на следующей странице. Настройте паузу и предел числа показов. Подписавшихся исключите из показа формы подписки, оставивших заявку — из повторного предложения той же заявки.
Для этого сервису нужно запомнить событие закрытия или отправки формы — например, в cookie либо профиле пользователя. В другом браузере или после очистки данных посетитель может снова попасть в аудиторию показа.
Один основной призыв к действию. Пользователю нужно понимать, какого действия от него ожидают. Например — «Подписаться на рассылку», «Перейти в каталог товаров», «Читать блог».
Рекламные требования зависят от содержания попапа. Информационное сообщение, форма обратной связи и реклама — разные ситуации. Если содержание признаётся интернет-рекламой, нужно использовать маркировку.
Как оценить эффективность попапа
Сначала определите целевое действие: подтверждённую подписку, заявку или покупку.
Конверсия попапа = число уникальных посетителей с целевым действием через окно / число уникальных посетителей с показом окна * 100%.
Например, за неделю окно увидели 1000 человек, а подписку подтвердили 50.
Считаем: 50 / 1000 × 100% = 5%.
Чтобы провести A/B-тест, нужно случайно разделить посетителей сайта и закрепить вариант за каждым. При этом важно менять только один параметр: офер, дизайн окна или условие показа. Если меняем триггер, сравним также результат среди всех распределённых посетителей: поздний показ может дать высокую конверсию окна, но мало подписок в целом. Проверим качество заявок и завершение покупки, чтобы рост кликов не скрывал ухудшение результата. Победителя выбираем по достаточным данным, а не по первым нескольким заявкам.
Главные мысли
