Pop-up примеры, техники и стратегии использования

Что такое Pop-up

Pop-up — это элемент интерфейса, который отображается поверх всех остальных элементов в окне браузера. Он может появляться без запроса пользователя или по клику на определенном элементе страницы.

Пример попапа со скидкой за регистрацию на сайте онлайн-магазина magnolia.com:

Для каких целей используют попапы:

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

Но все же основная цель попапа — сбор новых контактов для дальнейшего использования в коммуникации с помощью retention-каналов. Часто для мотивации оставить данные пользователям предлагается взамен бонус или скидка. 

Какую бы цель вы ни преследовали, главная задача попапа — увеличение конверсии.

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

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

Почему попапы работают

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

Все дело в том, что с их помощью пользователь может решить сразу несколько своих задач, а именно:

• получить бонус/скидку к покупке;
• подписаться на новости (избежав необходимости долгой регистрации или поиска где это можно сделать);
• если позволяет логика попапа, указать дополнительные данные о себе, тем самым позволив маркетологам использовать сегментацию и готовить более релевантный контент для пользователя;
• и многие другие задачи, которые разберем позже.

Также ниже приведены исследования различных сервисов по использованию попапов.

Сервис SUMO провел ряд исследований и тестов на основе свыше 2 млрд. всплывающих окон. В среднем конверсия в подписчика была на уровне 3,1%, а в некоторых случаях — около 9,3%. При таких показателях даже 100 посетителей сайта в день будут конвертироваться от 92 до 274 подписчиков в месяц с помощью попапа.

Aweber выяснил, что замена формы подписки с боковой панели на всплывающее окно увеличила количество подписчиков на 1375%.

А Sleeknote предоставил исчерпывающие исследования различных попапов, ниже представлена краткая выжимка по нескольким параметрам:

1. Попап с картинкой эффективнее на 83,57%, чем без картинки;
2. Использование таймера перед показом попапа показало эффективность на 112,93% в сравнении с попапом, который показывается сразу при загрузке сайта;
3. Рекомендуется использовать до 2 полей для заполнения во всплывающей форме. Такое решение обусловлено тем, что меньшее количество полей эффективнее в среднем на 206,48%;
4. Всплывающие окна конвертируют лучше на мобильных устройствах, чем на десктоп. Эффективность выше на 48,37%.

Кейсы агентства Promodo также доказывают, что попапы еще не отжили свое. Рассмотрим статистику использования попап-интерактивов в Ecommerce. Их проводили в разные месяцы и на разные периоды, продолжительностью до 2 месяцев. 

К примеру, активность “Рулетка” к распродаже Black Friday:

Цель: сбор емейлов за возможность выиграть приз, покрутив рулетку.

За месяц проведения интерактива число подписчиков увеличилось на 10%, доход вырос на 25% (относительно средних ежемесячных показателей текущего года).

Реализация такого попапа, кроме “рулетки”, имеет другие варианты, например:

• сундуки 1 из 3;
• GiftBox;
• скретч-карта и другие форматы игровых механик.

Pop-up активности подобного рода вызываются на сайте по клику на небольшой элемент сайта — плашку с понятным призывом к действию.

Pop-up примеры и стратегии использования

Различают 2 основных вида попапов:

1. Hello-board — который перекрывает только часть контента сайта, не блокируя взаимодействие с сайтом. Пользователь может отреагировать или закрыть всплывающее окно, что менее раздражительно.
2. Page-stop — который полностью перекрывает собой страницу, не давая взаимодействовать с сайтом, пока посетитель не совершит целевое действие или не закроет вкладку. Такой попап вызывает значительно больше раздражения, но с тем же довольно эффективно конвертирует.

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

1. Welcome Pop-up

Всплывает сразу при загрузке страницы. Попапы такого типа можно применять для оповещения о чем-то важном. В данном примере George сообщает о возможности доставки товаров в страну покупателя.

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

2. Timed Pop-up

Всплывает через определённое время после того, как пользователь зашел на страницу. С помощью такого попапа можно предлагать подписку, посетить другие разделы сайта, предоставлять демо-доступы и т. д. Zara Home советует подписаться на их рассылку, чтобы получать последние новости из первых уст.

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

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

3. Scroll Pop-up

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

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

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

4. Exit Pop-up

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

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

Недостатки. Слишком частое появление такого окна может вызвать негатив у пользователя, поэтому необходимо ограничивать частоту показа на одного пользователя, например по cookie.

5. Click Pop-up

Всплывает после того как пользователь кликнет по соответствующему элементу на сайте. Попапы такого типа можно комбинировать с Timed Pop-up или Scroll Pop-up.

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

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

6. Slide-In Boxes Pop-up

Этот тип попапа размещается сбоку экрана и выдвигается при наведении на него.

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

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

Практические рекомендации по использованию Pop-up

При подготовке попапа рекомендуем соблюдать несколько простых правил:

1. Понятный призыв. Пользователь с первых секунд должен понять суть предложения и каких действий ожидают от него. Нет необходимости перегружать форму лишними полями. Обычно попап имеет небольшой размер, необходимо с умом использовать его. Например: оставить емейл в обмен на скидку.
2. Корректное отображение на всех устройствах. Важно предусмотреть, что большая часть пользователей посещает сайт с мобильных устройств. Поэтому все элементы должны быть заметны, удобны для заполнения, корректно отображаться и перестраиваться для любого размера устройства.
3. Логика показа. Показ формы в нужное время в нужном месте с релевантным контентом даст наилучшую эффективность. Настраивайте исключения показа формы на отдельных страницах для пользователей, которые ранее уже оставляли данные.
4. Гармоничный визуал. Выдерживайте единый стиль, не пытайтесь привлечь внимание броскими контрастами. Сделайте элементы понятными и читабельными, чтобы пользователю ничто не мешало взаимодействовать с формой.
5. Также рекомендуем избегать навязчивости, повторных, нерелевантных показов, которые будут только раздражать и отвлекать пользователя. Ничто не должно мешать пользователю закрыть окно и продолжить взаимодействие с сайтом.

Заключение

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

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