Как сделать хороший pop-up, который не будет раздражать пользователей

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

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

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

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

Содержание
  • Что такое pop-up
  • Для чего можно использовать pop-up
  • Какие виды pop-up бывают
  • Как сделать pop-up
  • Как правильно оформлять поп-апы: советы

Что такое pop-up

Скорее всего, вы замечали: стоит только зайти на какой-то сайт, и вас уже встречают всплывающие окна с предложениями подписки или скидки в обмен на контакты или звонок. Эти баннеры на языке маркетологов называются поп-апами (в переводе с английского pop up означает «возникнуть неожиданно» или «всплыть»).

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

Как сделать поп ап
Вот так выглядит типичный поп-ап. Источник: Skillbox

Для чего можно использовать pop-up

Эти элементы интерфейса сайта используют для:

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

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

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

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

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

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

Как создать всплывающее окно
Вот пример использования лид-магнита во всплывающем баннере — в обмен на подписку с рассылкой магазина пользователю предлагают получить весенний плейлист для настроения. Источник: 12storeez.com
  • Удерживать внимание пользователей и снижать процент отказов. Отказ — это ситуация, когда пользователь открыл сайт, но не увидел для себя ничего интересного и быстро его закрыл. Чтобы этого не случилось, владельцы сайтов настраивают pop-up, которые появляются в тот момент, когда клиент собирается покинуть сайт.
  • Подталкивать к целевому действию. Настраивать можно не только содержание баннеров, но и время и место их появления. Предположим, клиент изучает страницу с товаром. Когда время просмотра превысит заранее установленный лимит, на экране всплывёт поп-ап с предложением купить товар по сниженной цене или небольшой скидкой по промокоду.

Какие виды pop-up бывают

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

1. Приветственный. Появляется сразу после открытия страницы. Такие баннеры гарантированно привлекают внимание пользователей, но очень раздражают. Мы рекомендуем использовать приветственные поп-апы в случаях, когда до клиента нужно донести важную новость. Например, что сейчас на сайте действует акция «2+1». Собирать контакты через такие поп-апы или перенаправлять на другие разделы сайта не имеет смысла — человек только попал на сайт и ещё не знаком с информацией на нём.

2. Со всплытием по клику. Баннер всплывает только в случае, если пользователь нажал на ссылку или кликнул в определённое место страницы. Эти поп-апы менее навязчивы, чем приветственные. Однако есть риск, что часть аудитории, которая не выполнит целевое действие, так и не увидит поп-ап с интересным предложением.

Как сделать pop-up
Такой баннер открылся на сайте Randewoo.ru при клике на товар на главной странице

3. По пролистыванию. Такие детали интерфейса всплывают на экране, когда посетитель пролистывает страницу где-то на 50–80%. Логика такая: клиент уже ознакомился с контентом на сайте, теперь можно продемонстрировать релевантную информацию — предложить подписку на лучшие материалы недели, скидку или бесплатную консультацию. По такому же принципу настраивают всплывающие окна по времени пребывания пользователя на сайте. Как понять, какое время и место долистования идеально для показа поп-апа? Чтобы узнать наверняка, нужно провести A/B-тестирование.

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

Как сделать pop-up

Поп-апы можно делать несколькими способами:

  • Сверстать вручную, например на онлайн-платформе для создания сайтов Tilda или с помощью плагинов для WordPress, а затем добавить код баннера на сайт. Этот метод требует наличия знаний HTML или CSS, поэтому если в штате компании нет верстальщика или веб-мастера, то лучше отдать выполнение этой работы на аутсорс.
  • Воспользоваться возможностями специальных сервисов для создания поп-апов. Например, Hellobar, Plerdy, GetSiteControl. На площадках представлены различные конструкторы и шаблоны, с помощью которых можно настроить внешний вид баннера. Вот только услуги сервисов платные, а бесплатный тестовый период ограничен по функционалу.
  • Если ни первый, ни второй способ вам не подходят, а догнать аудиторию, которая посетила сайт, нужно, можно использовать инструменты от МТС Маркетолога. Мы установим наш пиксель на ваш сайт, и Big Data найдёт абонентов МТС среди посетителей. Сможете отправить этим пользователям SMS или любую другую рассылку, показать баннер или даже позвонить с помощью инструмента «Таргетированный обзвон».
    Чтобы запустить такую рекламную кампанию, оставьте заявку на сайте. Подберём подходящий инструмент и всё настроим.

Как правильно оформлять поп-апы: советы

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

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

  • У всплывающего окна обязательно должна быть кнопка закрытия. Лучше, чтобы она была заметной, а не полупрозрачной или расположенной в нестандартном месте. У пользователя должна быть возможность не только прочитать, но и закрыть поп-ап. Если он не поймёт, как убрать баннер, то просто покинет сайт.
Как сделать поп ап в тильде
На тёмном фоне кнопка закрытия хорошо заметна. Пользователю достаточно одного взгляда, чтобы её отыскать. Источник: Лэтуаль
  • Рядовой пользователь сталкивается с рекламой каждый день, завоевать его внимание и выделиться среди конкурентов становится всё сложнее. Поэтому маркетологи часто используют яркие, насыщенные цвета и картинки в оформлении всплывающих окон. Но сама по себе необычная реклама не работает, если она не сочетается с посылом. Сейчас тренд на сдержанные поп-апы — минимум изображений и спокойная цветовая гамма.
Как сделать popup окно
Вот пример минималистичного поп-апа — одна картинка, призыв к действию и две кнопки. Источник: MTS
  • Чем меньше информации на первом этапе знакомства вы просите у пользователя, тем охотнее он с ней расстаётся. Поэтому не стоит размещать в одном баннере несколько других для ввода информации, максимум два — имя и адрес электронной почты. Также не нужно писать громоздкие послания, чтобы не отпугнуть пользователя обилием текста.
Создавать попап
Пример поп-апа с одним полем. Здесь пользователя просят указать только номер телефона. Этих данных достаточно, чтобы компания смогла наладить контакт, а пользователю не нужно много печатать для заполнения формы. Источник: Skillbox 
  • Ещё один совет по оформлению поп-апа. Крайне непривлекательно выглядят всплывающие окна, которые отличаются от общего интерфейса и дизайна сайта, такое оформление похоже на плохую рекламу из середины 2000-х. Следите за тем, чтобы все элементы сайта были выполнены в одном дизайне.
Popup создать
Пример оформления поп-апа. Здесь заметно, что дизайн всплывающего окна выполнен в той же цветовой гамме, что и остальной сайт. Источник: TexTerra
  • Доля мобильного трафика в интернете продолжает увеличиваться каждый год. Чтобы клиент легко мог закрыть баннер или нажать на нём на кнопку и не уменьшать для этого экран, позаботьтесь, чтобы поп-ап хорошо выглядел как на десктопных, так и на мобильных версиях сайта.
  • Хороший поп-ап содержит призыв к целевому действию: пользователь сразу понимает, какую выгоду ему предлагают и что он должен сделать в обмен на полезный бонус — подписаться на рассылку, оставить контакт для обратного звонка и так далее.

 

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

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

МТС МаркетологТаргетированные SMS-рассылки,
реклама в соцсетях, баннеры,
CPA-реклама и programmatic
О сервисеТаргетированные SMSSMS по своей базе PROТаргетированный обзвонБаннерная рекламаРеклама в соцсетяхProgrammatic-рекламаCPA-рекламаИсследованияRCSМедиаСправкаКонтактыРаскрытие информацииДокументы ПАО «МТС»Политика обработки cookiesКомплаенс и деловая этика