100 примеров поп-апов, которые зацепят клиентов

Содержание материала

  1. Что такое Pop-up?
  2. Видео
  3. Основные правила эффективного попапа
  4. Будьте лаконичными
  5. Не используйте виджеты с призывом к действию преждевременно
  6. Не скрывайте элемент управления окном – «крестик»
  7. Проверьте свой Pop-Up на соответствие правил
  8. Правила создания pop-up окна
  9. Правило : Положение на сайте – важно
  10. Позитивные стороны всплывающих окон
  11. Типы всплывающих окон по цели
  12. Информационное оповещение
  13. Перенаправление страницы
  14. Обход AdBlock
  15. Опрос
  16. Правило : Дайте пользователю время
  17. Зачем нужны попапы
  18. Сбор контактных данных (лидов)
  19. Информирование клиентов
  20. Удержание посетителя на сайте
  21. Опросы клиентов
  22. Формирование базы подписчиков
  23. Типы поп-апов
  24. Как правильно оформить pop-up
  25. Когда показывать всплывающее окно: изучаем поведение пользователя
  26. Преимущества попапов
  27. Три качества хорошего всплывающего окна
  28. Три правила отличного поп-апа
  29. Как сделать всплывающее окно

Что такое Pop-up?

В переводы с английского «pop up» означает «неожиданно возникать» или «всплывать». Изначально термин появился в сфере Интернет-рекламы. Так назывались всплывающие окна, неожиданно появляющиеся при открытии сайта. Постепенно стилистика Pop-up проникла в fashion-индустрию, мир дизайна и event-бизнес. Вот уже более пятнадцати лет маркетологи западного мира успешно применяют Pop-up-технологии с целью завоевания внимания публики. В России Pop-up-культура только набирает свои обороты.

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

Основные правила эффективного попапа

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

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

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

Не используйте виджеты с призывом к действию преждевременно

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

Не скрывайте элемент управления окном – «крестик»

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

Проверьте свой Pop-Up на соответствие правил

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

Что однозначно нельзя делать:

  • использовать видео с автопроигрыванием и звуком
  • запускать обратный отсчет без возможности сразу закрыть поп-ап
  • фиксировать поп-ап внизу страницы так, чтобы он занимал более 30% экрана
  • запускать агрессивные эффекты, например, мигание

Видео

Правила создания pop-up окна

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

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

Практически во всех сервисах для создания pop-up окно можно настроить вышеперечисленные моменты. О самих сервисах поговорим ниже.

Правило : Положение на сайте – важно

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

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

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

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

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

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

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

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

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

Обход AdBlock

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

Опрос

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

Правило : Дайте пользователю время

Один из секретов «мэтров копирайтинга» звучит как keep it simple, или чем проще, тем лучше. Это правило применимо и к попапам. Сделайте так, чтобы всплывающее окно выглядело лаконично, а посыл был читабельным. Добавьте одно изображение, небольшой текст, поле для ввода email-адреса и кнопку.

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

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

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

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

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

Как это увеличит продажи? У вас появится база заинтересованных потенциальных клиентов. Удачная автоматическая воронка продаж или специалист по продажам простимулируют их стать вашими клиентами.

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

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

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

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

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

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

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

Как это увеличит продажи? Увидев скидку, посетитель сайта все же останется на нем и ознакомится с продуктами более детально. Так может возникнуть желание сделать покупку, ведь хороший продукт + скидка = выгодное предложение.

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

Такая форма коммуникации с клиентами поможет узнать их отношение к продукту и компании. 

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

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

С помощью поп-апа можно предложить посетителям подписаться на вашу рассылку, а также соцсети.

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

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

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

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

Пример hello-board

Пример hello-board

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

Пример page-stop

Пример page-stop

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

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

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

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

  1. Понятный интерфейс. У пользователя должна быть возможность сразу принять решение, а не разбираться с функционалом. Текст, поля и кнопки должны быть крупными и заметными. 
  2. Адаптивность. Учитывайте, что немалая часть трафика приходится на мобильную аудиторию. Всплывающее окно должно полностью помещаться на экране смартфона и быть удобным для просмотра. С закрытием pop-up не должно возникать сложностей. 
  3. Уместность демонстрации. Нужно учитывать логику показа окна и ее релевантность текущим действиям пользователя. Например, нецелесообразно показывать форму подписки тем, кто уже оставил свой email или предлагать подписку на новые статьи сразу после перехода в блог. 
  4. Pop-up не должен быть навязчивым. Если пользователь закрыл окно, оно не должно открываться вновь. Также не стоит несколько раз подряд предлагать одно и то же. Можно предусмотреть на окне надпись «Я уже подписан» или «Не показывать больше». 
  5. Чёткий призыв к действию. Пользователю нужно понимать, какие действия от него ожидают. Например — «Подписаться на рассылку», «Перейти в каталог товаров», «Читать блог». 

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

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

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

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

Полный текст требований Coalition for Better Ads можно изучить на сайте коалиции. Кроме того, отчет о качестве рекламы доступен в сервисе Google Search Console. Владелец сайта с подтверждёнными правами может изучить отчёт и выявить нарушения стандартов Coalition for Better Ads. 

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

Показ окна можно настроить по десяткам разных сценариев. Например, пользователю, который с телефона Samsung вбил в поиск «купить iPhone» и перешел по контекстной рекламе, мы можем показать pop-up «Поменяй свой Samsung на iPhone» — это настраивается на основе UTM-метки.

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

Попапы можно:

  • выводить на определенной странице или в конкретном месте при скролле;
  • показывать сразу или с временной отсрочкой;
  • демонстрировать после действия пользователя. 

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

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

  • Беззвучное.
  • Неагрессивное.
  • Легко закрываемое.

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

Три правила отличного поп-апа

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

  • быть своевременным,

  • релевантным по содержанию,

  • его можно закрыть.

Казалось бы, все понятно с условием «закрыть»: разместите хорошо заметных крестик в верхнем правом углу. Только так, и никаких фраз, вроде «Нет, спасибо». Это снижает конверсию. А предложения вроде «Введите email, и мы вышлем вам новую книгу по маркетингу» — «Нет, спасибо, я и так умный» унижают аудиторию и вызывают неприязнь к компании.

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

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

Witget
  1. Перейдите по ссылке сервиса и зарегистрируйтесь. Вам предложат код, который необходимо добавить в шаблон вашего сайта.
  2. Перейдите в Галерею шаблонов и выберите подходящий для вас.
  3. Если ваш поп-ап из разряда “подружиться”, то можно выбрать соцсети, которые будут размещены на всплывающем окне.
  4. Выберите картинку-реакцию на действие подписчика.
  5. Создайте текст и отредактируйте его.
  6. Здесь же во вкладке “Всплывающее окно” настройте цвет, затемнение сайта и ширину pop-up.
  7. Потом перейдите во вкладки “Частота и условия показа” и “Время и место показа” и настройте необходимые параметры.
  8. Посмотрите результат. Если нравится, кликайте “Сохранить”.
  9. Вот такой поп-ап получается.

Теги

Adblock
detector