Поп ап на сайт: Что такое всплывающие окна (pop-up) на сайте |

Posted:

Июл 21, 2021

Comments:

Поп ап на сайт: Что такое всплывающие окна (pop-up) на сайте

Содержание

Что такое всплывающие окна (pop-up) на сайте

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

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

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

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

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

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

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

К счастью, негатив вокруг попапов постепенно стихает. При правильном применении всплывающие окна — ценный инструмент маркетинга. SUMO проанализировали 2 млрд всплывающих окон и выяснили, что их конверсия может достигать 40+%. Главное — использовать pop-up правильно.

BlogMarketingAcademy заявляет, что всплывающие окна на сайте показали наилучшую кликабельность в сравнении с другими видами рекламы — около 2%. А BitNinja, В2В-стартап, внедрили pop-up и в результате увеличили конверсию посетителей в подписчиков на 114%.

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

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

привлечь подписчиков;
сообщить новости;
оказать техподдержку;
показать рекламу;
получить заявки от клиентов.

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

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

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

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

Типы попапов

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

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

Пример hello-board

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

Пример page-stop

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

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

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

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

Когда появляется. Всплывает сразу при загрузке страницы и блокирует контент до того, как посетитель его увидит.

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

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

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

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

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

Когда появляется. Всплывает через определённое время после того, как пользователь зашел на страницу.

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

Недостатки. По поводу точного времени показа нет единого мнения. Оптимальный вариант — показывать окно не раньше, чем через 60 секунд после загрузки сайта. Этого времени достаточно, чтобы пользователь оценил сайт и решил, остаться ему или уйти. Но все-таки лучшее время показа определит только тест. Например, A/B-тестирование, проведённое сервисом LeadGenic, показало, что показ попапа через 2 секунды после входа принес больше конверсий, чем более поздние показы.

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

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

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

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

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

Преимущества. Можно показывать пользователю предложение, максимально релевантное просматриваемому контенту.

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

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

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

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

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

Когда появляется. Отображается в момент, когда посетитель собирается покинуть сайт.

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

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

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

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

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

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

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

Недостатки. Если пользователь не выполнит нужное действие для показа попапа, то он его и не увидит.

Когда лучше использовать. Такой тип окон можно использовать для показа формы подписки или обратной связи. В click pop-up также можно показывать подсказки или уточнения. Например, пользователь кликает по кнопке «Перезвоните мне». Сразу всплывает окно с формой заказа обратного звонка.

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

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

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

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

Заголовок. Он должен пояснять содержание и быть понятным. Лучше использовать простые слова и короткие фразы. Пользователю должно быть с первых секунд ясно, что это за форма. Например, «Подпишитесь на рассылку», «Получите скидку».
Основная часть. Это может быть текст или форма. К примеру, текстом можно рассказать о текущей акции, выгодном предложении или подарке. Форму обычно используют, чтоб собрать пользовательские данные: имя, email, номер телефона.
Призыв к действию. Например, кнопка или подпись со ссылкой. Этот элемент мотивирует клиентов совершить целевое действие. Например, вы можете предложить подписаться на рассылку, заказать обратный звонок или скачать pdf-книжку.

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

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

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

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

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

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

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

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

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

При создании всплывающих окон нужно учитывать, что попапы — это форма рекламы. Поэтому, следует соблюдать требования 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.

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

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

Специальные сервисы по созданию всплывающих форм. Например, Hellobar, GetSiteControl, Plerdy, WisePops, Keplerleads. В блоге мы рассказывали о 10 лучших сервисах, чтобы сделать попап.
Сервисы рассылки со встроенным редактором всплывающих форм (например, Unisender).
Аутсорс. Нанимаем верстальщика, который соберет попап вручную и поставит код на сайт.

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

ConvertPlug.
Ultimate Modal Windows.
Popups Generator.
Layered Popups.
Ninja Popups for WordPress.

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

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

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

Главные мысли

Что такое всплывающие окна (pop-up) на сайте

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

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

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

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

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

привлечь подписчиков;
сообщить новости;
оказать техподдержку;
показать рекламу;
получить заявки от клиентов.

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

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

Типы попапов

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

Пример hello-board

Пример page-stop

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

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

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

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

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

Когда появляется. Всплывает через определённое время после того, как пользователь зашел на страницу.

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

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

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

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

Когда появляется. Отображается в момент, когда посетитель собирается покинуть сайт.

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

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

Недостатки. Если пользователь не выполнит нужное действие для показа попапа, то он его и не увидит.

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

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

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

Заголовок. Он должен пояснять содержание и быть понятным. Лучше использовать простые слова и короткие фразы. Пользователю должно быть с первых секунд ясно, что это за форма. Например, «Подпишитесь на рассылку», «Получите скидку».
Основная часть. Это может быть текст или форма. К примеру, текстом можно рассказать о текущей акции, выгодном предложении или подарке. Форму обычно используют, чтоб собрать пользовательские данные: имя, email, номер телефона.
Призыв к действию. Например, кнопка или подпись со ссылкой. Этот элемент мотивирует клиентов совершить целевое действие. Например, вы можете предложить подписаться на рассылку, заказать обратный звонок или скачать pdf-книжку.

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

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

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

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

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

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

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

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

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

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

Специальные сервисы по созданию всплывающих форм. Например, Hellobar, GetSiteControl, Plerdy, WisePops, Keplerleads. В блоге мы рассказывали о 10 лучших сервисах, чтобы сделать попап.
Сервисы рассылки со встроенным редактором всплывающих форм (например, Unisender).
Аутсорс. Нанимаем верстальщика, который соберет попап вручную и поставит код на сайт.

ConvertPlug.
Ultimate Modal Windows.
Popups Generator.
Layered Popups.
Ninja Popups for WordPress.

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

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

Главные мысли

20 типов всплывающих окон для использования на вашем веб-сайте [+10 новых примеров всплывающих окон]

Вы рассматривали возможность использования конструктора всплывающих окон для своей целевой страницы?

Вас беспокоит, что риск перевешивает награду?

Я тебя чувствую — ты не один волнуешься.

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

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

Поехали!

Вы хотите максимизировать потенциал своего присутствия в Интернете, да?

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

Тогда вам нужно использовать то, что доказало свою эффективность.

Тематические исследования наводняют многие компании, которые отмечают снижение показателя отказов на своих веб-сайтах до 40%. Мы видим, что коэффициент конверсии лидов составляет 6,39%, а 2000 лидов зафиксировано всего за три месяца.

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

Итак, давайте рассмотрим пять способов их эффективного использования…

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

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

Вот как мы используем всплывающие окна (и как вы должны использовать):

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

Почему это лучше, чем отправка трафика на целевую страницу генерации лидов?

Что ж, вам придется попробовать это самим, но наши тесты A/B в настоящее время показывают, что у нас более высокий коэффициент конверсии во всплывающем окне электронной книги, чем на наших целевых страницах электронных книг. Добавление всплывающего окна пропускает этап открытия другой вкладки (и ее последующей загрузки). Это означает, что трафик нашего блога быстрее получает доступ к нужному контенту. Ускорение процесса также побуждает наш трафик к принятию решения.

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

Имеет смысл?

Всплывающие окна по времени появляются на целевой странице или веб-сайте после того, как посетитель остается там в течение определенного периода времени. Некоторые провайдеры позволяют устанавливать его только с шагом в несколько секунд (например, 10 секунд, 30 и 60 секунд). Другие (такие как Wishpond, кашель, кашель) позволяют вам проверить время, которое лучше всего подходит для вас, позволяя вам увидеть, что лучше всего работает: 26 секунд, 47 или 183.

Timed Pop-Ups лично мне не нравятся (ниже я объясню почему). Если вы хотите их использовать, я рекомендую вам очень тщательно проверить время появления всплывающих окон. Первоначально не опускайтесь ниже 30 секунд на страницах вашего блога и не превышайте 60 секунд на страницах вашего продукта.

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

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

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

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

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

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

Вот как я рекомендую настроить:

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

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

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

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

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

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

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

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

Звучит схематично, не так ли?

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

Вот что я рекомендую;

Запустите эксклюзивный онлайн-конкурс или рекламную акцию (например, скидка 50% на первый месяц подписки на ваш инструмент).
Держите этот эксклюзивный конкурс при себе, продвигая его меньше, чем раньше.
Когда трафик веб-сайта приходит на вашу главную страницу и проходит через ваши инструменты, направьте его на страницу с ценами (как обычно).
Вместо того, чтобы позволить посетителям вашего веб-сайта видеть вашу обычную страницу с ценами, внедрите всплывающее окно входа, которое появляется, как только они заходят на страницу.
Всплывающее окно для входа должно выглядеть примерно так: «Только ограниченное время! Получите скидку 50% на первый месяц подписки на [ваш инструмент]. Акция заканчивается сегодня в полночь!» с четкой и яркой кнопкой «Нажмите здесь, чтобы получить скидку» внизу.

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

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

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

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

И это их прерывает.

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

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

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

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

Вот что я рекомендую:

Разместите всплывающее окно Exit Pop-Up на целевых страницах продукта и страницах привлечения потенциальных клиентов, а также в блоге.
Создайте разные всплывающие окна для каждой страницы: предложите бесплатную демо-версию для страниц вашего продукта, «Вы уверены? всплывающее окно для ваших страниц привлечения потенциальных клиентов и всплывающее окно с рекламой электронной книги для вашего блога.
Убедитесь, что вы не забрасываете своих читателей или посетителей всплывающим окном выхода каждый раз, когда они посещают ваш сайт. Проверьте, появляются ли всплывающие окна не более трех раз в неделю.
Убедитесь, что вы не рассылаете спам существующим лидам или клиентам с помощью всплывающих окон, так как ничто не приводит к более быстрой отписке.
Если вам нужно вдохновение, ознакомьтесь с этими примерами, чтобы узнать, как создать хорошее всплывающее окно выхода.

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

15 типов всплывающих окон, которые вы можете использовать

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

1. Всплывающие лайтбоксы

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

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

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

Изображение: Wisepops

2. Плавающие всплывающие окна

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

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

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

Изображение: Optinly

3. Да/Нет всплывающих окон

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

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

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

Изображение: Тассос Маринос

4. Да/Да всплывающие окна

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

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

Изображение: Оптинмонстр

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

5. Геймифицированные всплывающие окна

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

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

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

Изображение: SiteKit

6. Полноэкранные всплывающие окна

Это самые агрессивные всплывающие окна. Как следует из названия, эти всплывающие окна занимают экран пользователя, закрывая все окно, которое он просматривает. Они могут закрыть всплывающее окно, но они не могут его пропустить.

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

7. Информационные всплывающие окна

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

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

8. Всплывающие окна лид-магнита

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

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

Изображение: business2community

9. Купоны/рекламные всплывающие окна

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

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

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

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

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

Изображение: Scarlettos.com.au

11. Всплывающее окно для регистрации на вебинар

Всплывающие окна входа ставят вас на опасную территорию. Они прерывают посетителя, заходящего на вашу страницу — чертовски агрессивно.

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

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

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

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

Почему это всплывающее окно работает?

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

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

Разбивка всплывающих окон выхода:

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

14. Всплывающее окно прокрутки подписки на блог

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

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

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

15. Всплывающее окно отчета по отрасли

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

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

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

Заключение

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

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

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

Но они работают хорошо, так что дерзайте.

Готовы начать работу со всплывающими окнами? Для начала ознакомьтесь с инструментом создания всплывающих окон Wishpond.

П.С. Приложения Wishpond для конкурса Facebook позволяют легко создавать лотереи, фотоконкурсы, конкурсы хэштегов в Instagram и многое другое. Ищете вдохновение? Ознакомьтесь с 25 творческими идеями конкурса Facebook, которые вы можете использовать сегодня.

Wishpond

45 Примеры всплывающих окон веб-сайтов, которые получают клики

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

Или вы можете ненавидеть их, несмотря ни на что. Справедливо. Но правда в том, что они работают над привлечением потенциальных клиентов, конверсия составляет около 9,3%. В противном случае, зачем ведущим брендам продолжать использовать их, рискуя оттолкнуть некоторых посетителей?

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

Что такое всплывающие окна на веб-сайте?

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

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

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

Стоит ли использовать всплывающие окна на вашем сайте?

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

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

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

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

Лучшие примеры всплывающих окон на веб-сайтах

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

Всплывающие окна со скидками
Всплывающие окна для подписки по электронной почте
Всплывающие уведомления о файлах cookie
Другие интересные примеры всплывающих окон

Примеры всплывающих окон на веб-сайте со скидкой

1. Pipsnacks

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

2. Бонобо

Что нам нравится: Чистое и простое, это всплывающее окно сразу переходит к делу и не требует лишних слов или места. Копия «Бесплатная доставка и возврат» также является приятным штрихом.

3. Wild Souls

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

4. Absolution Cosmetics

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

5. Tommy Hilfiger

Что нам нравится: Этот модал использует культовый красно-синий логотип бренда Tommy Hilfiger в качестве фона. Копия модального окна также хорошо показывает преимущества вступления в «клуб».

6. Студия Maybell

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

7. Blue Apron

Что нам нравится: Blue Apron, один из первых брендов наборов для еды, который действительно набирает популярность, предлагает посетителям скидку 110 долларов на заказ, если они отправят электронное письмо. Если вы проголодались, пикантные изображения справа сделают предложение еще более заманчивым.

8. Fable and Mane

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

9. Partake Foods

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

10. Повторный сбор

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

11. Chillhouse

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

12. Kinfield

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

13.

Mr Blackman’s

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

14. Slugg

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

15. Всегда подходит

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

16. Kind Socks

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

17. Сеулбокс

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

18. Дюжина кузенов

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

19. Numa Foods

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

20.

Unsun Cosmetics

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

21. Marlow

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

22. Yes You Can Drinks

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

23. Uniqlo

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

Примеры всплывающих окон на веб-сайте с подпиской по электронной почте

24. Книжный магазин с запятой

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

25. Peak Moods

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

26. Noodz

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

27. New Yorker

Что нам нравится: Этот призыв к действию на веб-сайте New Yorker использует аналогичный подход, задавая простой вопрос и требуя от пользователей только ответа «да». Как только вы это сделаете, он снимет необходимую информацию на другой странице.

28. Портрет Кофе

Что нам нравится: Год бесплатного кофе? Звучит здорово, где мне зарегистрироваться?

29. Vibrate Higher Daily

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

30. Omsom

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

31. Bukky Baldwin

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

32. Соус из сиены

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

33. С уважением, Tommy

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

Уведомление о файлах cookie Примеры всплывающих окон на веб-сайте

34. Proweb

Что нам нравится: С тех пор как GDPR вступил в силу в 2016 году, мы видели, что веб-сайты так часто внедряют уведомления о файлах cookie, что они стали нормой. . Это не значит, что вы не можете проявить творческий подход к ним. Возьмем этот пример от цифрового агентства Proweb, которое привносит в смесь немного юмора.

35. Кастор и Поллукс

Что нам нравится: Эта цифровая консалтинговая группа не скрывает уведомление о файлах cookie. Скорее, это делает уведомление большим и четким (и его легко подтвердить и закрыть), а также, опять же, пробует немного юмора.

36. Lunchbox.io

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

37. Смеющаяся корова

Что нам нравится: Чтобы посетители знали об использовании вами файлов cookie, вы можете превратить свое уведомление о файлах cookie в полноэкранное модальное окно, как это делает здесь The Laughing Cow. Нам нравится, что отклонить или настроить файлы cookie так же просто, как и принять.

38. Moooi

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

Другие примеры всплывающих окон на веб-сайтах

39. Блог Hubspot

Что нам нравится: Сюрприз, наш блог тоже использует всплывающие окна! А именно, у нас есть всплывающее окно с намерением выйти, чтобы захватить всех посетителей, собирающихся покинуть страницу. Скажем, вы только что прочитали несколько статей — одним нажатием кнопки (или двумя) вы можете подписаться и получать новые сообщения прямо в свой почтовый ящик.

40. Coschedule

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

41. Briogeo

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

42. Startward Consulting

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

43. Madewell

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

44. Studio Viola

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

This entry was posted in Популярное