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

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

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

А теперь, без лишних слов, давайте погрузимся прямо в них:

1. Армани

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

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

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

2. Гуччи

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

Мне нравится тот факт, что он начинается с теплого «Добро пожаловать в Gucci», а изображение, которое они выбрали для всплывающего окна, дает представление об их новой коллекции.

3. Тед Бейкер

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

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

4. Мастер блогов

Вероятно, это один из моих любимых примеров всплывающих окон от Blogging Wizard. Иллюстрация волшебника-дракона просто очаровательна, призыв к действию ясен — «расширяйте свой блог быстрее», а кнопка подписки «Да, я в деле!» очень заманчиво.

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

5. Райан Эйр

Хотя это не так наглядно, как другие, причина, по которой это всплывающее окно от Ryan Air настолько эффективно, заключается в его формулировке . Фраза «Узнай первым» дает ощущение эксклюзивности, а слово «известный» вызывает желание узнать больше.

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

6. Советник по поездкам

Примеры всплывающих окон: Trip Advisor

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

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

7. Беханс

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

Как и в случае с Trip Advisor, пользователи могут легко зарегистрироваться любым удобным для них способом — с помощью электронной почты, Apple, Facebook или Google. Очень хорошо сделано!

8. Вукоммерция

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

Формулировка проста и содержит всю необходимую информацию, необходимую для навигации по их веб-сайту.

9. Шеин

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

Короткая дата истечения срока действия создает ощущение срочности, а кнопка CTA столь же мощна, чтобы заставить пользователя совершить действие — «Собрать все».

10. Зара Хоум

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

Я думаю, если они добавят поощрение, например, скидку 5% или 10% в обмен на регистрацию, это будет еще эффективнее.

11. Хабспот

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

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

Кроме того, тонкий вопрос «Еще не используете Hubspot?» внизу дает им возможность представить себя и еще больше повысить узнаваемость бренда.

12. Будь фанки

Примеры всплывающих окон: BeFunky

Далее у нас есть это красивое всплывающее окно из виртуального фоторедактора BeFunky.

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

13. Шеин

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

Кроме того, они несколько раз усилили сообщение «зарегистрируйтесь и получите дополнительную скидку 10%» в купоне, чтобы вы не упустили эту возможность.

Написание слова «бесплатно» в «бесплатных покупках» огромными розовыми буквами — еще одна эффективная тактика — люди всегда любят бесплатные вещи!

14. Хутсюит

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

Сама 90-дневная пробная версия является отличным стимулом для регистрации, а обратный отсчет внизу создает чрезвычайно сильное ощущение срочности. Особенно учитывая тот факт, что до предложения осталось всего 5 минут!

(Что, конечно, не обязательно верно, но это очень эффективная маркетинговая тактика).

15. Пума

Примеры всплывающих окон: Puma

Далее у нас простое по дизайну, но довольно сложное в плане информации всплывающее окно от Puma. Он привлекает ваше внимание сообщением « Присоединяйтесь к поклонникам Puma », предлагая скидку 10% в качестве поощрения.

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

16. Конверс

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

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

17. Женский секрет

Далее у нас есть это красивое всплывающее окно от Women's Secret. С точки зрения структуры, он не так отличается и уникален, как другие примеры всплывающих окон в списке.

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

18. Троица

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

Хотя в этом нет ничего особенного, иногда простота работает лучше, чем причудливая и сложная.

19. Конвертировать корзину

Примеры всплывающих окон: Конвертировать корзину

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

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

20. Конвертировать корзину

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

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

21. Интерактивный код

Примеры всплывающих окон: Qode Interactive

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

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

22. Оптинмонстр

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

• Четкое маркетинговое заявление — «Конвертируйте и монетизируйте свой веб-трафик».
• Огромное количество , которое привлекает внимание – «Присоединяйтесь к 1 000 000+ сайтов»;
• И яркий и мощный призыв к действию — «Увеличьте мои конверсии».

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

23. Астра

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

24. Дэшли

Примеры всплывающих окон: Dashly

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

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

25. Мобильная Обезьяна

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

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

26. Бен и Джерри

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

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

27. Адидас

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

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

28. Совместное расписание

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

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

29. Бэклинко

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

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

Бесплатное руководство, которое Backlinko предлагает в обмен на подписку, — отличный продукт, повышающий ценность для аудитории. Кроме того, кнопка призыва к действию «Получить бесплатное руководство сейчас» указывает на срочность.

30. Алиэкспресс

Примеры всплывающих окон: Алиэкспресс

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

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

31. Кельвин Кляйн

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

Давайте будем честными – все мы любим дополнительный стимул что-то делать, особенно если он денежный.

32. Пруд желаний

Примеры всплывающих окон: Wishpond

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

Текст «Держись! Это Exit Intent» чуть не напугал меня, потому что я подумал, что это вирус, но, честно говоря, это было довольно умно с их стороны. Это сразу привлекает ваше внимание, а затем они объясняют причину этого таинственного сообщения.

33. Визз Эйр

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

Мне нравится тот факт, что они начинают фразу с «psst» — это привлекает внимание и добавляет юмора в традиционное маркетинговое заявление. Тот факт, что они говорят «для вас», также делает это более личным.

34. Мангулы

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

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

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

35. Ежедневные деловые новости

Примеры всплывающих окон: Business News Daily

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

36. Элементор

Мы еще не закончили! Далее в нашей подборке отличных примеров всплывающих окон у нас есть пример от Elementor.

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

37. Хостгатор

Примеры всплывающих окон: Hostgator

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

Кроме того, рассчитанная ими цена – «всего от 2,75$» в месяц – чрезвычайно привлекательна для услуги хостинга и сразу же привлечет внимание.

38. Ткацкий станок

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

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

39. Лореаль

Примеры всплывающих окон: L'Oreal

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

40. Мейлчимп

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

41. Маркетинговая инсайдерская группа

Этот пример всплывающего окна b2b от Marketing Insider Group очень уникален. Несмотря на то, что он не нагляден и не интересен с точки зрения дизайна, его уникальность заключается в подходе.

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

42. Адеспрессо

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

Яркий желтый цвет идеально подходит для того, чтобы выделить название вебинара.

43. Охладители

Примеры всплывающих окон: Coolors

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

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

44. Журнал поисковой системы

Говоря об удивительных примерах всплывающих окон, я не могу не упомянуть Search Engine Journal — они действительно отлично справляются со своими всплывающими окнами. Мне нравятся цвета в этом, все хорошо организовано и легко читается.

Кнопка призыва к действию была идеально спроектирована, чтобы привлечь внимание — контрастный красный цвет и текст «Да! Забронируйте мое место прямо сейчас!» сочетаются очень хорошо.

45. Герой ключевого слова

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

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

46. ​​Воспитание детей и зарабатывание денег

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

Далее у нас есть классические всплывающие окна из блога Raising Kids Making Money. Мне это нравится, потому что оно тонкое , в отличие от других всплывающих окон, которые используют более агрессивные цвета для привлечения внимания — что, конечно, неплохо, мы видели много отличных примеров из него.

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

47. Медиакикс

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

Упоминание крупных брендов , таких как TikTok, Squarespace, COVERGIRL и Dunkin', сразу же вызывает желание узнать больше.

48. Свободный B2B

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

49. Совместное расписание

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

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

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