заказать звонок
+38 057 782-28-00
заказать звонок
Starting a new project?
получить консультацию
Читайте наш Telegram 👈
339
2

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

Цель создания pop-up баннеров - подтолкнуть пользователя к дальнейшему взаимодействию с сайтом, заинтересовать его сделать нужное действие.

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

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


1. Функции всплывающих окон

В среднем, показ pop-up окна происходит через 5+ секунд после открытия сайта читателем.

Главная задача — привлечь внимание и заставить пользователя сделать заданное действие.
Например, заполнить контактную форму или посмотреть/купить товар.

Есть много функций pop-up окон, но мы выделим 3 основных:

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

Хорошим стимулом будут скидки, полезный контент, подарки. Здесь важен релевантный обмен и четкий CTA.

Всплывающие окна бонус

Рис. 1 — Пример бонуса за подписку

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

Всплывающие окна удержание

Рис. 2 — Попытка удержать клиента

3. Взаимодействие, коммуникация с читателями. Действует, как дополнительная возможность узнать вашу ЦА лучше (вопросы, чаты, предложения приветствуются).

Всплывающие окна взаимодействие

Рис. 3 — Разные форматы взаимодействия с читателем


2. Виды

Все pop-up формы можно разделить на несколько видов, отталкиваясь от времени показа:

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

Всплывающие окна доставка

Рис. 4 — В качестве плюшки в этом примере выступает услуга бесплатной доставки на следующий заказ

  • scrolled, timed pop-up показываются через некоторое время после того, как посетитель зашел на сайт, или в процессе прокрутки страницы. Можно показать форму для ввода номера телефона, в процессе чтения раздела FAQ или предложить скидку при просмотре прайс-листа. Чаще всего, показ окна происходит после просмотра половины страницы.
  • exit pop-up или окно прощания демонстрируется перед закрытием сайта и содержит предложение зайти в другой раздел, посмотреть дополнительные товары, напомнит о том, что у вас есть скидка. Иногда за перемещениями курсора следит программа и выводится соответствующее сообщение, чтобы заинтересовать читателя еще задержаться на сайте.
  • click pop-up появляется по нажатию на какой-либо элемент страницы. Например, при заказе звонка. Удобство такого формата в том, что читателя не перебросит на отдельную страницу, а значит, он вернется в то же место, где остановился до заполнения формы.

Всплывающие окна нажатие

Рис. 5 — Окно по нажатию. После ввода данных можно вернуться к потреблению контента с того места, где остановились


3. Места размещения

Pop-up окна могут находиться в любой части сайта:

  • по центру страницы. Элемент может занимать как часть пространства, так и весь фон страницы целиком. В первом случае основной контент затемняется.

Всплывающие окна два сразу

Рис. 6 — Два всплывающих окна (одно закрывает другое)

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

Всплывающие окна Pop-up

Рис. 7 — Pop-upы слева и справа либо не закрывают контент вообще, либо делают это по минимуму

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

Всплывающие окна исполнение

Рис. 8 — От стиля исполнения всплывающего окна может зависеть реакция читателя

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


4. Преимущества и недостатки всплывающих окон

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

Преимущества pop-up окон:

1. Возможность быстро привлечь внимание. Любой элемент, появляющийся на странице, невольно перетягивает на себя взгляд пользователя.

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

Всплывающие окна вебинар

Рис. 9 — Приглашение узнать больше о вебинаре по контент-маркетингу

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

Всплывающие окна реклама

Рис.10 — Реклама телевизора из собственного ассортимента в интернет-магазине техники

Недостатки:

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

2. Если пользователь устанавливает в браузере расширение для блокировки рекламы (оно же блокирует и всплывающие уведомления — Ad Blocker или др.) или запрещает показ таких окон через настройки браузера, то пользователь не увидит ваше сообщение вообще.

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


5. Советы по созданию всплывающих окон

Создать всплывающее окно можно самостоятельно с использованием HTML, CSS, JavaScript.
Мы дадим несколько советов, которые помогут решить, какое оформление и текст лучше всего сработают.

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

Всплывающие окна фирменные цвета

Рис. 11 — Использование фирменных цветов в шапке всплывающего окна (справа снизу) вызывает ощущение целостности страницы

2. Подберите правильный CTA. Пользователи оценят что-нибудь значимое. Для покупки подойдет скидка или бесплатный подарок, книга или методичка.

Всплывающие окна скидка

Рис. 12 — Сразу понятно, какая величина скидки

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

Всплывающие окна плохая форма

Рис. 13 — Форма смотрится неплохо, но непонятны ни диапазон скидок, ни перечень товаров, на которые скидки будут распространяться

Всплывающие окна полный экран

Рис. 14 — Полноэкранная форма с предложением индивидуального плана действий по увеличению трафика от Нила Пателя. Очень заманчивое предложение!

3. Креативность. Большинство всплывающих баннеров повторяют друг друга: оформление и текст меняются, но при этом сказать, что эти элементы сильно отличаются — нельзя. Вместо тривиальных сообщений “подпишитесь на наши обновления”, проявите внимание к посетителям сайта: персонализируйте предложение, добавьте интерактивности в pop-up.

Всплывающие окна выбор времени

Рис. 15 — Выберите удобное для себя время звонка от специалиста

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

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


6. SEO и всплывающие окна

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

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

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

При участии 100000+ человек проводятся исследования и выявлены 13 самых навязчивых видов рекламы.

К ним относятся:

  • полноэкранные сообщения;
  • всплывающие окна;
  • большие уведомления в нижней части сайта, которые занимают более 30% страницы;
  • полноэкранные pop-upы на мобильных до загрузки сайта и др..

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

Всплывающие окна подписка

Рис. 16 — Праздничная скидка на подписку


Вывод

В названии статьи звучал вопрос: полезны или вредны всплывающие окна? Однозначно они полезны, но только при правильном исполнении. Предложение должно заинтересовывать пользователя, а не заставлять глаз дергаться.

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


Англоязычное локальное SEO

Как настроить страницы пагинации

Как голосовой поиск влияет на SEO?

Подпишитесь на наши обновления
Больше полезных статей и мануалов еще впереди. Будьте в курсе!

Вы уже подписаны на нашу рассылку!

Подтвердите свой Email для завершения подписки.

Заказать
продвижение
Больше полезных статей и мануалов еще впереди. Будьте в курсе!

Спасибо! Скоро с Вами свяжется наш менеджер.