Попап что это

Способы создания окон PopUp

Введение

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

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

Очень удобно использовать PopUp окна в связке с ajax, но это уже тема другого урока.

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

Вконтакте

Facebook

Twitter

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

Постановка задачи(ТЗ)

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

Решение

Способ 1

Результат:

Очень часто предлагают использовать:

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

Способ 2

Этот способ не отличается кардинально от Способа 1, но я считаю его более удобным.

Html (без изменений)

Результат аналогичный

Благодаря свойству: min-height:100%; наш блок «затемнение» обрел ширину в 100% и минимальную высоту в 100% экрана.

Единственным минусом данного способа является то, что Internet Explorer поддерживает данное свойство только с версии 8.0.

Добавление магии на Jquery

Теперь добавим ссылки для скрытия/отображение нашего всплывающего окна.

Для этого необходимо подключить библиотеку JQuery и небольшой скрипт:

Также необходимо обновить Html:

Результат

Теперь при загрузке страницы всплывающее окно PopUp скроется.

Если мы нажмем на ссылку «Show popup», у нас появится всплывающее окно. А если нажать на ссылку «Hide popup», то всплывающее окно вновь скроется.

Источник

8 принципов создания идеального попапа для интернет-магазина

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

Как найти золотую середину? Стоит ли вообще использовать всплывающие окна? Если да, то для каких целей? На эти вопросы мы ответим в статье.

В переводе с английского «pop up» означает «неожиданно возникать» или «всплывать». Так, всплывающие окна – это элементы пользовательского интерфейса, которые отображаются поверх веб-страницы в браузере. Названы они так, потому что «всплывают» без запроса пользователя или появляются по клику.

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

Попапы помогают увеличить продажи, так как концентрируют внимание целевой аудитории в направлении конверсионного действия, что подтверждается множеством практических кейсов. В среднем, коэффициент конверсии подписки на email-рассылку посредством попапов составляет от 1,95% до 2,9%. Это означает, что из 100 человек, которые увидят всплывающее окно на вашем сайте, вы можете получить 2-3 адреса электронной почты.

Несомненно, есть и более впечатляющие примеры. Некоторым удавалось поднять продажи на 162% посредством попапов (случилось это, правда, в 2005 году). А в 2012 году один из клиентов AWeber в результате экспериментов со всплывающими окнами получил + 1,375% подписок.

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

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

Источник

Следуйте рекомендациям, чтобы создать эффективный pop-up, и узнайте, как это сделать в SendPulse

Pop-up — это всплывающее окно, которое появляется во время посещения страницы. Маркетологи используют его для лидогенерации, а также для рекламы услуг и продуктов компании. В сервисе SendPulse вы можете бесплатно создать pop-up всего за несколько минут.

Содержание

Следуйте этой пошаговой инструкции, чтобы создать pop-up в вашем корпоративном стиле абсолютно бесплатно!

Pop-up — это эффективный способ привлечения внимания посетителей сайта. Главное при подключении всплывающего окна — думать об интересах пользователей. Если pop-up будет появляться из ниоткуда, то вероятнее всего вызовет раздражение у посетителя, так как прервет его деятельность на сайте. Важно, чтобы всплывающее окно было к месту и являлось функциональным дополнением, которое в нужный момент поможет пользователю выполнить необходимое действие. Только так с помощью pop-up вы сможете продвигать клиентов вниз по воронке продаж.

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

Возможности pop-up

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

Давайте посмотрим на несколько примеров и визуализируем некоторые возможности pop-up.

Примеры pop-up

Mango мотивирует посетителей сайта стать подписчиками с помощью скидки и эксклюзивных предложений. Выгодное предложение — это результативный способ перевести пользователя на следующий этап пути покупателя. Далее с помощью email рассылок вы можете взращивать лиды и конвертировать их в клиентов.

Farfetch использует максимально простой дизайн pop-up. На первый взгляд — ничего особенного. Однако, присмотритесь, помимо скидки и описания выгод подписки компания использует чек-бокс для сегментации по полу. Согласитесь, отличный ход, чтобы уже первую рассылку сделать более релевантной.

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

Готовы попробовать создать свой первый pop-up?

Как создать pop-up в SendPulse?

Следуйте этой простой инструкции, чтобы создать pop-up форму для мотивации пользователя к подписке.

Шаг 1. Зарегистрируйтесь в SendPulse

SendPulse — это маркетинговая платформа, которая предоставляет разные инструменты и каналы для успешного построения взаимоотношений с клиентами. Вы можете создать креативную pop-up форму менее, чем за полчаса. Используйте ее, чтобы увеличить базу подписчиков и отправлять им массовые рассылки. Регистрируйтесь прямо сейчас.

Шаг 2: Выберите шаблон pop-up

Перейдите во вкладку “Формы подписки” и нажмите “Создать форму подписки”. Вы можете выбрать один из четырех шаблонов, включая pop-up как на скриншоте ниже.

Шаг 3: Настройте дизайн pop-up

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

В SendPulse вы также можете создать мультиканальную форму подписки, чтобы пользователи могли контактировать с вашим брендом через Facebook Messenger, Telegram и ВКонтакте. Для этого лишь нужно перетянуть иконку нужного мессенджера в вашу форму и добавить ссылку. Смотрите, как выглядит такая форма.

Шаг 4: Установите условия показа

В правом верхнем углу нажмите “Опции формы” и выберите условия показа pop-up, время, а также страницу для отображения. На скриншоте ниже вы видите доступные опции.

Теперь, когда вы знаете, как создать pop-up с помощью SendPulse, ознакомьтесь с некоторыми полезными советами.

Как создать эффективный pop-up

Рекомендации по использованию pop-up

Мы собрали основные рекомендации, которые помогут вам эффективно применять pop-up.

Пробуйте, экспериментируйте и помните, pop-up станет эффективным инструментом для бизнеса только в том случае, если будет нести пользу вашей аудитории.

Источник

Что такое попап, примеры всплывающих окон и сервисы для их создания

Попап (Pop Up) — это элемент интерфейса, который может вызываться по клику или всплывать без запроса пользователя поверх основной страницы сайта в браузере, простыми словами — это всплывающие окна на сайте.

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

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

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

Так, в 2019 году компания SUMO проанализировала почти 2 миллиарда всплывающих окон и выяснила, что их конверсия может достигать 9,28 %, а средняя конверсия составляет 3,09 %, что тоже совсем неплохо. SUMO за 2 года собрала с помощью pop-up огромную базу контактов потенциальных и действующих клиентов: 23 645 948 адресов электронной почты.

В целом попапы решают три глобальные задачи:

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

Попап-окна: примеры практического применения

Попап-окна всегда предлагают посетителям сайта совершить какие-то действия, направленные на решение этих задач. Мы насчитали как минимум 18 вариантов таких действий. Вот что часто предлагают пользователям:

Выбор попапа для сайта

Попап-окна делятся по условиям показа, целям и количеству касаний с пользователями.

Эти окна точно привлекают внимание (но не обязательно в позитивном ключе), блокируют доступ к контенту сайта и остаются открытыми до тех пор, пока посетитель не совершит конверсионное действие или не закроет попап принудительно.

Если такое окно перекрывает практически весь контент сайта, оно называется page-stop.

Приветственный page-stop считается одним из наиболее агрессивных и раздражающих видов всплывающих окон.

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

Приветственные окна могут помочь сегментировать целевую аудиторию. Например, функционал pop-up может включать выбор пола («Выберите интересные вам товары — Мужское — Женское») для точной настройки последующей рассылки.

Также приветственные окна могут быть персонализированными и демонстрировать максимум внимания к пользователю.

А еще с помощью попап-окон пролистывания можно приглашать заинтересованных пользователей.

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

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

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

Используются такие попап-окна для подсказок пользователям.

Можно использовать скроллбоксы и для сбора подписной базы.

Еще возможный вариант использования — как pop-up для обратной связи.

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

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

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

В exit pop-up можно предложить…

Часто в возвращающих попап-окнах пользователям предлагают и скидки. Можно предложить также авторизацию для тех, кто заполнил корзину, но не завершил оформление заказа.

Можно использовать возвращающие попап-окна для получения быстрой обратной связи.

Еще один вариант — предложить пользователю пройти небольшой опрос.

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

Используют многошаговые попап-окна и для тестирования.

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

Наиболее распространенный вариант геймифицированных многошаговых всплывающих окон называется «колесо удачи». С помощью такого колеса пользователю предлагают испытать удачу и выбрать размер скидки.

Создание попапа: подборка российских сервисов

Leadgenic

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

JumpOut

Этот российский сервис для создания попап-окон отлично работает с «Яндекс.Метрикой», что важно для настройки сквозной веб-аналитики. Требуется установка кода сервиса на сайт.

Mindbox (бывший PopMechaniс)

Сервис, а точнее, отдельный модуль Mindbox по персонализации, которым стал PopMechanic, предоставляет пользователям статистику по показам попап-окон и их заполнению. Требует установки на сайт кода. Заявлены более 150 шаблонов.

Вместо вывода. 10 ошибок при создании попапов

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

Источник

Попап: что это такое, как сделать и примеры

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

Поп ап – что это

Pop Up (поп-ап, попап) – это всплывающее окно, отображаемое поверх веб-страницы сайта в браузере. Оно может появляться двумя способами:

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

Поп-ап состоит из 3-х основных элементов:

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

Зачем нужен попап

Поп-ап выполняет следующие функции:

Типы и виды поп-апов

Существует два основных типа поп-апов:

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

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

В зависимости от целей применения и условий показа можно выделить 5 видов попапов:

1. Поп-ап со всплытием по клику

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

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

2. Приветственный поп-ап

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

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

3. Поп-ап с временной отсрочкой

Появляется спустя определенное время после того, как посетитель откроет сайт. Вы можете самостоятельно установить таймер показа. Такой попап менее навязчивый, поскольку демонстрируется пользователю не в первую же секунду. Однако возникает вопрос – через сколько показывать поп-ап? Если сделать это сразу, вы можете вызвать негативную реакцию, если поздно – пользователь покинет сайт. Чтобы узнать наверняка, придется провести А/В-тестирование.

Такие поп-апы обычно применяют для подписки на рассылку, привлечения лидов, предоставления лид-магнитов и т.д.

4. Поп-ап по пролистыванию

Появляется после того, как пользователь пролистает определенную часть страницы сайта. Например, 50-70% от ее объема. Благодаря этому вы сможете продемонстрировать пользователю информацию, релевантную просматриваемому контенту.

Попапы по пролистыванию можно использовать для информирования о новых акциях и скидках, новостях и т.д.

5. Прощальный поп-ап

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

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

Подключите виджеты МТТ вместе с телефонией Создавайте нативные виджеты и привлекайте клиентов

Как сделать поп-ап

Поп-ап можно сделать следующими способами:

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

Источник

Попап (всплывающее окно)

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

Пример pop-up с подпиской на рассылку

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

По данным Statista, в 2019 году примерно 25,8% интернет-пользователей блокировали рекламу на своих устройствах и, соответственно, блокировали и всплывающие окна. Ожидается, что востребованность блокировщиков будет только расти. Уже сейчас практически четверть попапов не достига ет своей аудитории.

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

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

Зачем нужны попапы

Попапы применяют для следующих целей:

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

Конверсионные попапы позволяют:

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

Типы попапов

Все попапы делятся на 2 основных вида: hello-board и page-stop.

Как использовать всплывающие окна

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

Приветственное окно (entry pop-up)

Окно-приветствие не даёт ознакомиться с контентом до своего закрытия

Окно с временной отсрочкой (timed pop-up)

Чтобы определить время отсрочки, изучите отчёты Google Analytics. Посмотрите, каково среднее время пребывания на странице и настройте появление pop-up примерно на 50% от этого времени.

Сколько времени люди проводят на странице. Отчет в Google Analytics. Считается, что если настроить время появления попапа на 50% от этого показателя, то окно не будет раздражать и сможет хорошо конвертировать

Окно по пролистыванию (scroll pop-up)

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

Вебвизор Яндекс.Метрики показывает видео поведения пользователей на странице

Окно прощания (exit pop-up)

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

Окно со всплытием по клику (click pop-up)

Pop-up всплывает после клика по кнопке «Перезвоните мне»

Это только несколько возможных вариантов использования pop-up. Однако всплывающие окна можно применять и для иных целей. Например, после заполнения пользователем формы подписки можно показать pop-up с текстом благодарности. При выборе определённой услуги может всплывать окно с кратким рассказом о сути услуги и о текущих акционных предложениях.

Элементы всплывающего окна

Любая форма попапа состоит из трёх частей:

Правильная форма не оставляет вопросов о том, зачем с ней взаимодействовать

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

Нет каких-то стандартов по оформлению содержания pop-up. Есть лишь рекомендация: всплывающее окно не должно быть сложным для восприятия. Планируя создание попапа, ответьте на следующие вопросы:

Как правильно оформить pop-up

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

Вот 5 правил хорошего попапа:

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

При создании всплывающих окон нужно учитывать, что попапы — это форма рекламы. Поэтому, следует соблюдать требования Coalition for Better Ads — « Коалиции за лучшую рекламу », созданную ведущими международными торговыми ассоциациями и компаниями. Требованиями Coalition for Better Ads руководствуется Google Chrome, когда решает, нужно ли блокировать сайт и в каком виде его увидит пользователь.

Согласно Coalition for Better Ads нельзя:

Как создать pop-up

Для создания попапов можно использовать следующие способы:

Кроме того, создавать попапы можно с помощью различных плагинов. Например, с помощью плагинов попапов для WordPress:

В Unisnder все зарегистрированные пользователи могут бесплатно создавать всплывающие окна с формой подписки. Чтобы создать попап, нужно:

В результате на вашем сайте появится всплывающая форма с настройками, которые вы задали в Unisender.

Источник

Попап: что это такое и как он поможет увеличить конверсию

Попап – один из инструментов email-маркетинга для привлечения клиентов, увеличения заказов и подписок. Но использовать его нужно вдумчиво, иначе попап превратится в навязчивую рекламу, которая раздражает пользователя и разрушает доверительные отношения с ним. Как и где правильно использовать попап, чтобы продажи росли – расскажем в статье.

Что такое попап

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

Зачем нужен попап

Pop Up окно для сайта помогает бизнесу наладить контакт с аудиторией, а в перспективе – сформировать теплую базу клиентов и увеличить прибыль.

Сбор контактных данных (лидов)

Информирование клиентов

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

Большинство клиентов предпочитает звонить. Определите, какая реклама приносит целевые заявки, а какая – тратит бюджет с помощью Коллтрекинга Calltouch.

Удержание посетителя на сайте

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

Опросы клиентов

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

Формирование базы подписчиков

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

Преимущества попапов

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

Акции для привлечения клиентов: как эффективно привлечь покупателей

Акции для привлечения клиентов: как эффективно привлечь покупателей

Типы всплывающих окон по внешнему виду

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

Лайтбокс

Лайтбокс – всплывающее окно, которое затемняет фон браузера, привлекая внимание. Обычно используется для увеличения базы email-адресов.

«Да/Нет» или «Да/Да»

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

В окне «Да/Нет» выбор варианта «Нет» ведет к закрытию попапа. У окна формата «Да/Да» обе кнопки приводят пользователя в одно место — на конкретную страницу сайта.

Геймифицированные

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

Небольшое окно сбоку

Попап — не всегда новое окно, иногда это – небольшой боковой баннер. Это отличная альтернатива назойливой рекламе. Баннер не раздражает посетителей и не мешает просматривать контент.

Плавающая панель

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

Полноэкранный попап

Типы всплывающих окон по цели

Теперь расскажем о их назначении, какие функции выполняют разные попапы.

Информационное оповещение

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

Перенаправление страницы

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

Обход AdBlock

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

Вход пользователя в систему

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

Опрос

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

Типы всплывающих окон по триггеру или таргету

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

Приветствие

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

Намерение уйти со страницы

Exit-popup – способ удержать аудиторию на сайте. Он предлагает пользователям пользу или выгоду, которая может заинтересовать их.

Прокрутка как триггер

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

Время, проведенное на странице

Окно возникает, когда пользователь находится на сайте от 10 до 60 секунд. Когда посетитель долго изучает страницу, это говорит о его заинтересованности. Попап предлагает выполнить целевое действие, чтобы подогреть внимание и закрепить результат.

С привязкой к странице

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

С привязкой к местонахождению

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

С привязкой к cookie

Повторное вовлечение неактивных

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

Запланированное

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

Follow-up на сайте

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

Возникающее по клику

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

Как правильно оформить pop-up

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

Заголовок и текст

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

Изображение

Внимание пользователей привлекают небольшие и яркие изображения, которые дополняют предложение компании. Можно дополнить картинкой лид-магнитом : добавить обложку книги или иллюстрацию к курсу.

Детали

В зависимости от задачи попапа, можно добавить:

Хорошо, если всплывающее окно будет простым: пользователь не будет заполнять сложную форму.

Поле ввода почты

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

CTA кнопка

СТА кнопка – продолжение текста попапа, поэтому надпись на ней должна быть логичной. Допустим, заголовок попапа – «Подпишитесь на рассылку», значит, надпись на кнопке – «Подписаться», если «Скачайте бесплатный гайд» – то «Скачать».

Почему лучше не делать несколько попапов на странице

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

Как сделать всплывающее окно

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

Сервисы

Это конструкторы, которые позволяют установить всплывающее окно себе на сайт, настроить дизайн и посмотреть статистику. Большинство сервисов с бесплатным пробным периодом – на английском языке:

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

Источник

Как сделать поп-ап, который не раздражает, а приносит конверсии

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

Что такое поп-ап

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

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

Преимущества поп-апов

По данным исследования Sumo, конверсия среднего поп-апа — 3,1%. Самые эффективные поп-апы показывают средний результат в 9,3%. Вполне неплохо: если на вашем сайте в месяц бывает 3 тысячи человек, то вы за это время получите примерно 93 новых подписчика рассылки!

Поп-апы можно гибко настроить под конкретный сайт и цель. Например, показывать:

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

Структура всплывающего окна: как правильно оформить поп-ап

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

Заголовок и текст

В поп-апе краткость — ваша лучшая подруга. Чтобы создать эффективный текст для поп-апа, сначала сформулируйте полезное для пользователя действие. Каким оно может быть:

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

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

Изображение

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

Уточняющие детали

Если вам нужно сегментировать нового подписчика, при создании поп-апа добавьте:

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

Например, в этом всплывающем окне явно лишнее поле «Телефон». Готова поспорить, что большая часть пользователей оставляет ненастоящий телефон, чтобы не получать SMS рекламу.

Поле ввода почты

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

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

CTA кнопка

Формулируйте фразу на кнопке исходя из текста поп-апа, она должна быть его логичным продолжением:

В этом примере всплывающего окна заголовок с кнопкой «дружат»: «Подписаться на блог — Подпишите меня».

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

Как увеличить эффективность поп-апа

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

Контекст

Смысл в том, чтобы поп-ап подходил к контенту, который просматривает пользователь. Тогда гораздо выше шанс, что он заинтересуется. Как отмечает исследование Sumo, конверсия поп-апа в правильном контексте превысила 40%.

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

Компания Sumo в статье про подкасты на тему ecommerce предлагает книгу о бизнесе:

Тайминг

Дайте время познакомиться с контентом, прежде чем врываться с просьбами и предложениями. Необязательно много: за 15-20 секунд человек уже прочтет заголовок страницы и пару первых абзацев и оценит качество материала. Поп-ап в правильном месте и в правильное время принес Sumo 38,4% конверсии.

Чтобы точно продумать тайминг появления эффективного поп-апа и охватить больше посетителей сайта, нужно узнать среднее время, которое они проводят на страницах. С этим помогут инструменты аналитики — Google Analytics или «Яндекс.Метрика».

Простота и польза

Не переборщите с количеством элементов и текста. Судьбу поп-апа определяют секунды: чем проще и полезнее будет ваше предложение, тем быстрее его можно прочитать и понять. Вот правильное оформление всплывающего окна от издания «Такие дела».

Обратите внимание на интересную кнопку «Больше не показывать». Это хороший вариант не раздражать пользователей всплывающими окнами, если вы работаете с куками на сайте. Один раз отказался — больше не показываем.

Как правильно оформить поп-ап, чтобы не отпугнуть людей

Тут три типа поп-апов, которые раздражают. Читайте внимательно, чтобы ваши поп-апы не были такими :).

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

Многослойные поп-апы. Таким грешат новостные сайты, которые зарабатывают на рекламе. На странице появляется миллион всплывающих окон: разрешите уведомления, подпишитесь на рассылку, посмотрите рекламный ролик. Все это надо закрыть, чтобы добраться до контента, а через минуту окно появляется снова. Спасибо, но я лучше пойду!

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

Что еще сделать, чтобы поп-ап был эффективным и дружелюбным:

Как сделать поп-ап в SendPulse

В редакторе SendPulse вы можете создавать все виды форм, которые понадобятся на сайте:

Покажу, как создать поп-ап в SendPulse. Заходим в раздел «Формы подписки», жмем «Создать форму подписки» и выбираем вариант «Попап-окно». Можно использовать готовые шаблоны, изменяя их под свой вкус, или создать форму с нуля. На последнем этапе нужно выбрать адресную книгу, куда будут попадать данные из формы.

Первые шаги к созданию поп-ап формы в SendPulse

Теперь наполняем свою форму нужными элементами: полями, чекбоксами, радиокнопками, CTA кнопкой. Каждый элемент можно настроить в панели справа:

Настройка внешнего вида поп-ап формы

Когда внешний вид формы готов, перейдем к настройкам окна. Жмем на кнопку «Опции формы» вверху справа и последовательно заполняем все нужные поля.

Здесь мы настраиваем:

Обратите внимание, что на этом этапе можно изменить тип формы и вместо поп-апа выбрать встроенную или плавающую форму. Подробнее об этих типах вы можете прочитать в статье «Создаем форму подписки, как у известных брендов».

Настройка появления формы, подтверждающих окон и писем, статистики

Чтобы сделать эффективный поп-ап, не нужно быть крутым дизайнером или маркетологом 80 lvl. Делайте форму простой и понятной, показывайте ее в уместном контексте. Предлагайте полезные вещи и не будьте назойливыми. Остальное за вас сделает SendPulse :).

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

Источник

Зачем нужны всплывающие окна: изучаем сценарии настройки и критичные ошибки

Какими бывают всплывающие окна

8 задач, которые решают pop-ups

Когда показывать всплывающее окно: изучаем поведение пользователя

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

Время на сайте

Другое дело — hello-board окна. Они сопровождают пользователя, не мешая ему изучать страницу, поэтому можно показать и сразу.

Например, Lamoda показывает такой pop-up в первую же секунду на сайте. А еще просит подтвердить локацию — это в интересах покупателя, поэтому не бесит даже наличие на странице двух всплывающих окон разом. Ну, или почти не бесит.

Отдельная история — всплывающие подсказки. Они уместны в первую секунду пользователя на сайте.

Прокрутка страницы

Бездействие

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

Как сделать pop-up релевантным для каждой страницы сайта

Всплывающее окно должно максимально подходить содержанию страницы и поведению пользователя. Так мы показываем, что знаем об интересах или проблеме человека, и готовы ее решить. Но настраивать уникальный page-stop под каждую страницу сайта, продумывать дизайн, текст, CTA — утомительно и не нужно, особенно если у вас интернет-магазин с однотипными товарами. Его лучше настроить под модель поведения, а под контекст приспособить всплывающее окно чата на сайте (если вы, конечно, им пользуетесь).

Как поднять конверсию на 32%, ничего не меняя на сайте

Вредные советы по эксплуатации

Ловец лидов Callibri: версия 1.0

Так как использовать pop-up окна?

Для начала решить, зачем всплывающие окна вам нужны (если для красоты или «чтоб как у всех», то лучше не надо).

А дальше тестировать по алгоритму, традиционному для любого инструмента интернет-маркетинга:

Следить за реакцией пользователя на ваши pop-up окна поможет Вебвизор в Яндекс.Метрике, в нем же можно найти слабые места на ваших посадочных страницах, определить потребности посетителей сайта. Не забывайте следить за конверсией всплывающего окна — обычно эти данные есть в интерфейсе сервиса-разработчика.

Протестируйте работу pop-up окон на вашем сайте с МультиЧатом Callibri. В нем есть и page-stop окна, и крючки. Повысьте конверсию своего сайта! А заодно получите онлайн-консультант, обратный звонок и мессенджеры на сайт. Повысить конверсию сайта

Источник

«Если уж угораздило» или «каким должен быть Pop-up»

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

Сейчас для создателя сайта есть целых две причины использовать Поп-апы в своих проектах:

— Так сказано в ТЗ;

— Как бы пользователи ни относились к ним, они работают. Особенно, если речь идет о подписке, регистрации и прочих вещах, не требующих незамедлительной покупки. По данным econsultancy.com сайт, использующий «накладываемые блоки», в 4 раза эффективней с точки зрения конверсии (но это не значит, что добавление этих блоков гарантирует вам профит по умолчанию).

Сегодня существует два основных вида поп-апов: Page-Stop и Hello-Board. Первый вариант – это окно, которое временно ограничивает функционал сайта и требует от пользователя совершения конкретных действий или закрытия окна. Hello-Board – менее агрессивный вариант, который имеет горизонтальную или вертикальную ориентацию, и закрывает незначительную часть экрана, несколько сокращая функционал. Внимание пользователя привлекается за счет визуального эффекта движения.

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

— Делает сайт бесполезным и заставляет посетителя взаимодействовать с чем-то, против его воли, что чревато появлением негативных эмоций.

Немного о Hello Bar

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

Минусы Hello Bar

— Все еще занимает часть пространства и ухудшает взаимодействие пользователя с контентом;
— Менее эффективен и менее функционален чем Page-Stop в силу своего размера и месторасположения.

Немного базовых советов

1. Не будьте фамильярны

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

2. Не переусердствуйте

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

И, конечно же, не стоит размещать окна на каждой странице.

3. Не в том месте, не в то время

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

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

4. Не забывайте о персонализации

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

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

5. Не прячьте крестик

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

6. Не мешайте пользователю… насколько это возможно

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

Отличный пример реализации этого правила.

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

7. Будьте конкретны

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

8. Будьте лаконичны

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

9. Взвесьте риски и хорошенько все обдумайте. Используйте поп-апы только тогда, когда у вас нет других вариантов.

Источник

Pop-up: 10 сервисов + 25 примеров всплывающей рекламы

Содержание

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

Программы для поп ап

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

В этой таблице я собрала 5 топовых софтов для создания поп-ап на веб-ресурсе. Они все одинаково функциональны, выбирайте, какой больше понравится.

Помимо специальных плагинов и сервисов для pop-up функцию его настройки можно поискать у конструкторов типа PlatformaLP, Ukit, Flexbe.

Типы всплывающих окон

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

Поп-ап по центру экрана Поп-ап на весь экран Поп-ап внизу экрана Поп-ап вверху экрана Поп-ап с таймером Поп-ап, блокирующий контент

Цели поп-ап

1. Приветствие

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

2. Подписка на email-рассылку

Этой формой можете предложить клиенту стать постоянным получателем email-рассылки. Но, при этом важно показать, какую пользу получит пользователь после постоянного получения Ваших писем.

Подписка на email-рассылку

3. Подписка на push-уведомления

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

Подписка на пуш

4. Регистрация на сайте

Pop up поможет Вашим гостям завести личный кабинет на web-ресурсе для более удобного управления покупками. Форма будет открываться только для тех, кто не зарегистрировался.

5. Подтверждение локации

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

Подтверждение локации

6. Подписка на соцсети

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

Подписка на соцсети

7. Информирование о скидках и акциях

Информация такого рода в поп-ап повышает эффективность рекламных кампаний и привлекает внимание к маркетинговым мероприятиям.

Информирование о скидках и акциях

8. Реклама мероприятия/события

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

Реклама мероприятия/события

9. Помощь при взаимодействии

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

Помощь при взаимодействии с сайтом

10. Получение обратной связи

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

Получение обратной связи

11. Заказ обратного звонка

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

Заказ обратного звонка

12. Сбор вопросов

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

Сбор вопросов

13. Проведение опроса

Ответы конкретного пользователя на такую форму позволят Вам адаптировать контент под него. Кроме того, она будет способствовать получению обратной связи от посетителей.

Проведение опроса

14. Заполнение заявки

15. Удержание клиента

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

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

Удержание клиента

16. Формы с кнопкой

Форма с кнопкой

17. Встроенная форма (сбор данных)

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

Встроенная форма

18. Брошенная корзина/напоминание о покупке

Такой поп-ап напоминает пользователю, посетившему интернет-магазин, о просмотренных им товарах и отложенных в корзину. Подталкивает клиента к покупке.

Напоминание о покупке

19. Геймификация

Советы для всплывающих окон на сайте

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

Коротко о главном

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

Нашли ошибку в тексте? Выделите фрагмент и нажмите ctrl+enter

Источник

Всё о поп-апах: что это такое и как с ними работать

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

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

17 октября 2019 г.

Глава 1. Что такое поп-ап и зачем он нужен

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

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

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

Кроме того, что поп-ап собирает данные или информирует о чём-то (cookie-соглашение — тоже поп-ап), у него есть ещё одна важная функция. Представьте: вы нашли сайт с интересными товарами или классными статьями. В каком случае вы точно вернётесь к нему — когда найдёте его в своих закладках спустя пару месяцев или когда сам магазин начнёт присылать вам подборки товаров? Пользователи могут не вернуться на сайт, потому что просто не запоминают, как он называется.

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

Глава 2. Виды поп-апов

Поп-апы различаются по назначению.

Бонус взамен на контакты

Это самый распространенный вид поп-апов. Работает он так: пользователю предлагают скидку, бонус, особый статус или подарок взамен на контакты — чаще всего, это email и имя. В итоге пользователь получает свой бонус, а вы — лояльный адрес в базу контактов. Хороший пример у Lamoda:

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

Оставь почту, чтобы узнать результат

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

Подписка на рассылку

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

Vnukovo Outlet Village предлагает подписчикам первыми узнавать новости и предложения:

Подписка на соцсети

Часто иконки соцсетей находятся в футере или шапке сайта, но есть вариант поп-апов, которые предлагают пользователю «дружить».

Акционные

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

Объявления

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

Уточняющие

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

Возвращающие

Всплывают, когда пользователь собирается закрыть вкладку: «Уже уходите? Неужели вы закроете сайт, не воспользовавшись нашей скидкой?» и плачущие котята. Такие поп-апы всё ещё можно найти где-то в недрах поисковой выдачи.

Перезвоним вам

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

Помощники

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

Шпионы

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

Функциональные

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

Глава 3. Из чего состоят поп-ап окна

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

Рассмотрим все элементы на примере поп-апа, который появляется в блоге Email Soldiers:

Политика конфиденциальности

Без неё поп-ап не имеет права (да, всё так серьезно) существовать. Чтобы не вываливать весь огромный текст пользовательского соглашения, его обычно прикрепляют гиперссылкой.

Под текстом — галочка «Принимаю», которую кто-то уже ставит заранее, а кто-то оставляет на выбор пользователя. Однако не нажав на эту галочку, нельзя подписаться.

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

Заголовок

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

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

Текст

В небольшом тексте нужно рассказать, что ждёт пользователя после подписки. Это должно быть что-то полезное или интересное. Хорошо работают скидки, подарки, закрытые акции, важные новости.

Чтобы читатель точно это прочёл, лучше уместить информацию в пару недлинных предложений. Большой текст утомит пользователя: а обычно поп-ап хочется быстро или закрыть, или заполнить, поэтому будьте краткими.

Кнопки

Кнопка «Подписаться» должна стать дополнительной мотивацией к тому, чтобы пользователь оставил свой email. Поэтому текст на ней можно менять на «Получить скидку», «Узнавать новое» и так далее.

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

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

Изображения

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

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

На поп-апе Email Soldiers — милый монстрик, который появляется в иллюстрациях к статьям блога:

Анимация

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

Анимация на форме не должна сильно расходиться по стилю и смыслу со всем сайтом. Например, если на сайте продаются шуруповёрты, странно будет использовать на поп-апе танцующих детей.

Слишком тяжёлая анимация может не загрузится на мобильных устройствах — и вместо поп-апа пользователи увидят только пустое пространство. Кстати, это касается не только форм, но и самого сайта, а также рассылок.

Глава 4. Язык и tone of voice поп-апов

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

Tone of voice помогает как минимум:

Если в компании есть TOV, не стоит о нём забывать на любом этапе коммуникации с клиентом — и всплывающие окна не исключение.

Поп-ап должен быть в тех же тональности и стиле, что и сайт. На ярком сайте с косметикой для студенток будет странно выглядеть окно: «Пожалуйста, заполните эту форму для дальнейшей коммуникации с вами». И наоборот — окно «Хей, давайте вместе обнимать нарисованных альпак!» вызовет недоумение пользователей, которые зашли на нейтральный сайт.

Тональности бренда должен соответствовать не только текст на поп-апе, но и визуал.

Глава 5. Лидмагниты

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

Примеры лидмагнитов

Unisender предлагает небольшую электронную книгу, которая будет полезна всем, кто интересуется email-маркетингом:

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

Где найти нужную тему для лидмагнита?

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

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

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

Глава 6. Поп-апы, которые раздражают пользователей

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

Появляется почти сразу

Не стоит показывать поп-ап через несколько секунд после того, как пользователь зашёл на сайт. За это время он точно не успел найти нужную информацию. Не отвлекайте пользователя в первую минуту — пусть он сначала осмотрится.

И уж тем более не надо писать на поп-апе: «Вы нашли, что вам нужно, за 10 секунд? НЕТ? Тогда мы уже перезваниваем вам».

Выплывает даже после действия

Если пользователь заполнил вашу форму, не надо показывать её второй раз. Это раздражает. Запоминайте cookie, чтобы так не делать.

Закрывает всю страницу

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

Манипулирует вашими эмоциями

Есть поп-апы с ультиматумами. Например, на вопрос «Вы хотите выиграть скидку 50% на первый заказ?» предлагаются ответы «Да, конечно» и «Нет, я неудачник».

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

Сложно закрывается

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

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

Не адаптируется под смартфоны

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

Адаптируйте форму, и люди только скажут спасибо.

Ведёт на другие рекламные страницы

Есть поп-апы, которые не собирают данные, а показывают рекламу. И бывает, что на них есть обманный «крестик» — нажимаешь на него в надежде закрыть, но оказываешься на рекламной странице.

Welcome to Hell.

Глава 7. Как бороться с баннерной слепотой

Баннерная слепота — феномен, при котором пользователь осознанно или неосознанно игнорирует некоторую рекламу: баннеры или поп-апы.

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

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

Так, на сайте с прогнозом погоды пользователи обычно смотрят только на привычный блок в центре и редко интересуются тем, что есть вокруг него:

Как с этим бороться

Несколько советов, которые помогут обойти баннерную слепоту.

Выберите правильное расположение

Взгляд пользователей, которые исследуют сайт, напоминает буквы «F», «Х» и «Г». Поэтому самое выгодное расположение рекламного блока — это верхний левый угол.

Но не стоит ожидать, что кто-нибудь подпишется на рассылку, как только зайдёт на сайт и посмотрит на этот блок. Поэтому пробуйте разные варианты. Главное — поместить форму на видное место на сайте.

Делайте рекламу естественной

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

Настройте грамотный таргетинг

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

Проведите A/B-тестирование

Чтобы рассчитать, какое место для поп-апа будет самым подходящим, стоит потестировать:

Глава 8. Что дальше?

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

Источник

Всплывающие окна на сайте: 9 типов и крутые примеры

Сегодня говорим о pop-up (так называют всплывающие окна на сайте). Равнодушных к этому инструменту интернет-маркетинга нет. Люди, которые их видят, разделились на три лагеря. Первые – те, кого откровенно бесят любые всплывающие окна, вторые относятся к ним нейтрально, а последние и вовсе им рады, так как это хороший способ получить какой-нибудь бонус.

Но все-таки давайте определимся для чего можно использовать поп-апы:

Как видите, вариантов много – все зависит от вашей фантазии и целей. А теперь переходим к главному блоку, который поможет сделать pop-up эффективным.

Секрет успеха всплывающего окна

Секрет успеха хорошего поп-апа состоит из 3-х элементов:

Вот типичный пример всплывающего окна:

Здесь есть и интересное предложение, и неплохая визуальная часть, и понятный текст.

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

Технические особенности всплывающих окон

Добавить всплывающие окна на сайт можно:

Основные варианты настройки:

Еще совет: не пытайтесь обойти системы блокировки. Если клиент использует Adblock или другие блокировщики рекламы, то это его право.

Аналитика: эффективность всплывающих окон

Чтобы понять, насколько ваш поп-ап эффективный или неэффективный, перед запуском настройте цели.

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

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

Кроме эффективности и технических моментов не могли обойти стороной такой вопрос, как поисковики относятся к всплывающим окнам.

Отношение поисковых систем к pop-up

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

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

Google тоже сообщил, что нужно аккуратнее использовать всплывающие окна, особенно на мобильных. Попадают в зону риска баннеры на весь экран и те, что мешают изучению основной информации на сайте. Еще можно отметить рекомендации от Coalition for Better Ads, на которые ориентируется Google Chrome при блокировке рекламы.

В целом поисковые системы не против всплывающих окон, если они полезны для пользователя.

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

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

Каким бывает pop-up на сайте?

Тип №1. Креативные и не очень всплывающие окна

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

Вот пример всплывающего окна, сделанного на коленке:

Предложение для целевой аудитории вполне актуальное, также в тексте расписаны все нюансы. Главная беда этого поп-апа – это оформление. Далеко не все потенциальные клиенты способны оценить полет фантазии этого горе-дизайнера, поэтому в качестве картинки стоит выбирать либо серьезное нестоковое тематическое фото, либо делать концепцию более целостной и обыденной. В любом случае, прямой путь к хорошему дизайнеру. Кстати, мы поп-апы рисуем, цена от 600 рублей, детали Google тоже сообщил, что нужно аккуратнее использовать всплывающие окна, особенно на мобильных. Попадают в зону риска баннеры на весь экран и те, что мешают изучению основной информации на сайте. Еще можно отметить рекомендации от тут.

А теперь другое всплывающее окно, которое должно понравится посетителям сайта:

Несмотря на то, что поп-ап выглядит ненавязчиво, большое количество девяток притягивает взгляд. Хорошо подобраны цвета и нет эффекта «вырви глаз» – этому всплывающему окну можно поставить оценку «годно».

Тип 2. С аккуратным дизайном и заставляющие страдать

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

Этот pop-up пользователи постарается закрыть как можно быстрее, ведь никто не хочет портить свое зрение. Как вы могли заметить, серый текст на темно-розовом фоне добавляет +50 баллов к страданиям. Поэтому если вы любите своих подписчиков, то не стоит над ними издеваться и размещать текст на неконтрастном фоне. Кроме того, здесь не мешало бы выделить отдельно заголовок и прописать в нем суть предложения. Например: скидка 50% за подписку.

А теперь перейдем к не менее яркому, но уже эстетичному примеру:

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

Давайте рассмотрим еще один интересный поп-ап, где основная фишка в заголовке и фоне:

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

Тип 3. Лаконичные и скучные всплывающие окна

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

Этот поп-ап привлечет внимание за счет ядовито зеленого цвета. И на этом все. Сам текст и визуальная часть выглядят скучно и совсем не цепляют.

Другое дело тут:

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

А вот еще один хороший пример поп-апа в стиле звездных воин:

Не только оформление делает всплывающее окно привлекательным, но еще и кнопки «Сила уже со мной» и «Да пребудет!». Так что этот pop-up можно как минимум назвать оригинальным.

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

Тип 4. Информативные и непонятные

Качественный pop-up – это не только тот, что хорошо оформлен, но и у которого есть конкретика, а не «получи то, не зная что». Как, например, тут:

В целом pop-up кажется неплохим. Конечно, акция – это прекрасно, но, помимо чего-то эфемерного в виде «много полезных подарков», хотелось бы узнать, какие именно бонусы компания дает. Поэтому необходимо прописать в тексте конкретику – так посетители сайта будут понимать ценность предложения.

А здесь с конкретикой проблем нет:

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

Тип 5. Минималистичные и стильные всплывающие окна

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

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

Если вы не хотите заморачиваться с дизайном, но планируете сделать что-то интересное, то может подойти и такой вариант:

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

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

А вот этому поп-апу +10 баллов привлекательности добавляет котик. Хоть всплывающее окно и кажется простым и незамысловатым, оно все же цепляет внимание.

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

К слову, сам pop-up выглядит лаконичным и определенно заслуживает внимания.

Тип 6. Однотипные и тематические

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

Поп-апы, представленные ниже, взяты с интернет-магазинов одежды:

Можете ли вы назвать отличительную особенность одного pop-up от другого? Я точно нет, для меня они, словно близнецы. Везде в качестве предложения представлена скидка, а в качестве картинки взята девушка. На этом, пожалуй, все.

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

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

Еще один вариант отойти от тривиальности и обыденности – сделать pop-up под тематику бизнеса. Как здесь:

Pop-up взят с интернет-магазина спортивных товаров. Благодаря изображению велосипедиста наглядно показано, куда попал посетитель.

Или другой вариант – всплывающее окно в интернет-магазине обуви:

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

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

Тип 7. Огромные и не только

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

Примерно 60% всплывающего окна занято соглашением об обработке персональных данных. Согласна, что ФЗ №152 необходимо соблюдать, а то велик риск получить штраф в крупную сумму. Но можно было бы избежать такой портянки и оставить просто галочку, а само соглашение разместить на отдельной странице, где при желании пользователь мог с ним ознакомиться.

Поэтому такой вариант реализации поп-апа гораздо удачнее:

Все лаконично и по делу: окно не перегружено лишними деталями и текстом, что добавляет ему привлекательности.

Тип 8. Стоковые и оригинальные всплывающие окна

Еще один вопрос, который решают многие владельцы сайтов при создании поп-апов – использовать стоковые фотографии и картинки или сделать что-то свое. Здесь каждый для себя решает самостоятельно.

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

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

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

Это не все. У поп-апа ниже, например, картинка была взята явно из фотостоков. Но от этого всплывающее окно не стало выглядеть шаблонным. Наоборот, сначала смотришь на кота, а потом на все остальное. Так что в полной мере pop-up справился со своей задачей – зацепил взгляд.

Фотографии, взятые со фотостоков – это не плохо. Самое главное – обыграть их текстом или найти интересный снимок. К слову, вот подборка бесплатных ресурсов, которые будут полезны не только дизайнеру, но и любому маркетологу.

Тип 9. Всплывающие окна с цепляющим текстом, а не картинкой

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

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

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

Еще одно приятное исключение, когда текст – главная фишка, а не оформление. Новостной портал предлагает сделать небольшое пожертвование, чтобы издание существовало и продолжало писать о том, о чем другие не хотят. И кнопка тут весьма говорящая: «Стать соучастником».

А в примере ниже основной акцент сделан на заголовке «Будь котиком». Хоть картинка и стоковая, но служит подтверждением к словам и усилением.

Вместо итогов

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

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

А если нужна помощь в создании креативных всплывающих окон, то наш дизайнер уже готов творить!

По логотипу встречают, по услугам провожают!

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

© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна.

Интернет-маркетолог сервиса 1PS.RU

Понравилась статья?

Спасибо, мы старались!

Кстати, вы подписаны на нашу рассылку? Если нет, то самое время познакомиться с Катей.

Сожалеем, что не оправдали ваши ожидания ((
Возможно, вам понравятся другие статьи блога.

35 чел. оценили, средняя оценка 4.8

33 бесплатных инструмента
для интернет-маркетолога

Источник