Как создавать эффективный попап
Использование popup для сайтов стал привычным инструментом маркетинга, позволяющим отображать во всплывающем окне поверх основной страницы сайта уведомления для клиентов. Однако не утихают дискуссии, насколько данный инструмент эффективен, и стоит ли его использовать. Это связано с тем, что всплывающий попап на сайте часто раздражает пользователей – отвлекает от основного контента или мешает просмотру. Однако опытные маркетологи знают, что все зависит от того, насколько правильно используется данная форма взаимодействия с клиентами, и достаточно правильно сделать всплывающий попап, чтобы он приносил пользу. Про правила и секреты эффективного использования попапов для вашего сайта.
Что такое попап, и почему раздражает клиентов?
С момента появления функции модальных окон, попапы стали частью маркетинга. Однако изначально многие сайты злоупотребляли данной функцией, что и послужило появлению негативного восприятия со стороны пользователей интернета.
Сейчас ситуация изменилась. Многие сайты используют попапы, но это не приводит к раздражению со стороны пользователей, если они используются правильно.
Попапы знакомы каждому пользователю интернета. Заходя на большинство сайтов, появляется всплывающее окно – это и есть попапы. Термин происходит от английского словосочетания pop up, что дословно переводится “всплыть” или “возникнуть неожиданно”.
Свое название эта форма взаимодействия с клиентами получила не просто так. Дело в том, что такие окна всплывают на экране не сразу после перехода на сайт, а через некоторое время.

Используются попапы для самых разных целей. Так, многие компании с помощью поп-апов предлагают оформить подписку на рассылку, заказать обратный звонок, или получить скидку на заказ, и многое другое. Именно из-за того, что окошко попап открывается не сразу, это часто приводит к раздражению со стороны пользователя, поскольку перекрывает контент сайта, и продолжить просмотр сайта можно только после закрытия попапа. Нередко попап может иметь техническую составляющую. Для примера, предупреждение о сборе файлов cookies, и будет появляться на каждой странице сайта, пока пользователь не согласится с условиями, или не выберет свои настройки.
Для чего использовать поп-ап
Функция носит универсальный характер, и может применяться для решения самых разных задач. Перечислим основные:
- Привлечение подписчиков к рассылкам с целью получения контактов;
- Показ рекламы, акций, спецпредложений;
- Предложение помощи при работе с сайтом – через чат или заказ звонка;
- Информирование о сборе данных в авторежиме – cookies;
- Новостные баннеры с информацией для клиентов.
Как видим, варианты использования функции самые разные, но это не означает, что использовать их нужно повсеместно. Чаще всего они используются для того, чтобы стимулировать посетителя сайта к целевому действию. Статистика показывает, что если не злоупотреблять инструментом, а также правильно вставлять попапы на сайт, то это принесет пользу, и не вызовет раздражения со стороны потенциальных клиентов.
Если не брать во внимание технические popup, позволяющие сделать использование сайта проще, то можно выделить три основные задачи конверсионных всплывающих окон.
- Сбор контактов и подписчиков для формирования теплой базы потенциальных клиентов;
- Удержание клиентов для снижения количества отказов;
- Побуждение потенциального клиента к совершению целевого действия.
Стоит учитывать, что появление попапов не случайное. Они могут появляться не только в случае, если посетитель сайта проводит на нем определенное время, но и на основе триггеров. Об этом стоит рассказать детально, чтобы вы могли оценить все преимущества использования данной функции.
Виды попапов для сайта
При внедрении попап на вашем сайте, можно использовать триггеры, позволяющие в автоматическом режиме показывать посетителям различные баннеры, в зависимости от требуемого результата.

Все попапы можно разделить на четыре основных вида:
- Приветственные – появляются сразу после открытия сайта.
- Появляющиеся по клику на определенную область страницы сайта.
- При пролистывании страницы на заданный процент.
- Прощальный появляется в случае перемещения мыши в правый верхний угол для закрытия вкладки браузера.
Каждый из этих видов pop up имеет свои особенности использования, чтобы решать поставленную задачу, и не раздражать посетителя сайта.
Приветственные всплывающие окна – наиболее проблемные, если говорить про фактор раздражения. Именно поэтому с ними стоит быть предельно осторожными. Так, имеет смысл их использовать, если у вас есть действительно весомый аргумент передать сообщение посетителю вашего сайта. К таким поводам относится донесение важной новости, или про доступность действительно выгодной акции.
Появляющиеся баннеры по клику на определенную область страницы относятся к попап с наименьшей степенью раздражения. Однако у них есть и существенный недостаток – если посетитель сайта не выполнит нужное действие, то не увидит всплывающее окно.
Максимальную эффективность показывает использование pop up по перелистыванию. Обычно окно с уведомлением появляется после того, как посетитель сайта просмотрел более пятидесяти процентов страницы. Эффект достигается за счет того, что потенциальный клиент уже ознакомился с большей частью размещенного контента, и ему показывается релевантная его интересу информация.
Ограничений на использование прощального попапа – нет. Такой баннер не вызывает раздражения, но может помочь в удержании потенциального клиента.
Как создавать попапы
Теперь когда вы знаете какие задачи решают, и как использовать попапы, перейдем к теме их создания
Для этого можно использовать ручную верстку через онлайн-платформы для создания сайтов или плагин в WordPress, после чего добавить полученный код в админку своего сайта. Для этой задачи потребуются знания принципов использования HTML и CSS, или можно выполнить заказ через аутсорсинговое агентство.
Альтернативой ручной верстке, является использование онлайн-сервисов для генерации попапов. Таких сервисов множество, и они позволяют на основе конструктора выбрать один из доступных шаблонов, настроить его. Однако стоит учесть, что использование таких конструкторов платное, а в бесплатных версиях вам будет доступен очень ограниченный функционал.
Правила оформления и использования popup
Независимо от выбранного способа создания, перед этим потребуется определиться с поставленной целью, разработать его структуры, а также подготовить заголовок и текст, выбрать цветовое решение, а также определить условия показа попапа.
Не стоит забывать, что ваша основная задача при создании и запуске попапа – создание эффективно работающего маркетингового инструмента. Именно поэтому необходимо создать баннер, позволяющий побудить посетителя сайта к нужному целевому действию, и не отпугнуть его при использовании попапа. Для этого он должен отвечать следующим требованиям.

- Pop up обязательно должен иметь кнопку скрытия! Она должна располагаться на видном месте, хорошо видна. Рекомендуется располагать ее в правом верхнем углу в виде “крестика”, по аналогии с закрытием страницы сайта. Обязательно учитывайте цветовое решение, чтобы не перекрывать элемент основным фоном баннера или фоном сайта/затемнением, если она расположена за пределами самого баннера.
- Цветовое решение баннера должно отвечать посылу. Часто маркетологи используют яркие и контрастные цветовые решения, мотивируя это большей заметностью для пользователя. Однако не стоит забывать, что реклама постоянно встречается посетителям вашего сайта в интернете, и ваша задача сделать свой баннер отличным от того, что он видит в сети каждый день. Рекомендуем использовать лаконичный дизайн с минимумом графики и спокойной цветовой гаммой.
- Минимум полей для заполнения. Баннер поп ап станет вашим первым этапом знакомства с новым потенциальным клиентом, поэтому ваша задача упростить этот путь максимально – предложите заполнить не более одного поля (это может быть номер телефона или адрес имейл), и кнопку подтверждения на подписку, рассылки, или обратный звонок.
- Дизайн баннера и сайта должны совпадать. Такое правило придает вашему уведомлению большую привлекательность и доверия к нему – попап не будет воспринят, как всплывающая реклама.
- Адаптация для разных типов устройств. Все больше пользователей интернет используют для просмотра сайтов мобильные устройства. Важно, чтобы не только ваш сайт имел адаптивный формат для разных типов устройств, но и попап одинаково хорошо читался как на компьютере, так и смартфоне – все элементы, включая кнопку закрытия, должны быть видны без изменения масштаба страницы и пролистывания.
- Внятный призыв к целевому действию. При появлении всплывающего окна, посетитель вашего сайта сразу должен считать свою выгоду от запрашиваемого вами действия. Поэтому важно не только грамотно составленный текст заголовка и основной, но и правильно оформленный.
Выводы
Попап на сайте может стать эффективным инструментом маркетинга, если к вопросу его создания подойти грамотно. Основная задача – избежать эффекта раздражения со стороны посетителя сайта при появлении всплывающего окна.
Для этого необходимо точно определить цель использования, и выбрать оптимальный вариант появления – при заходе на сайт, при его использовании, или при закрытии вкладки.
Чтобы попап не раздражал, а выполнял свою основную функцию, важно грамотно оформить его. Требуемое целевое действие должно быть кратко и понятно описано, а также должна быть возможность закрыть баннер, без необходимости поиска решения, как это сделать.