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

Содержание
  1. Что такое всплывающее окно и как его создать самостоятельно
  2. А такая ли гадина эти ваши всплывающие окна?
  3. Средства борьбы
  4. Создание всплывающих окон с помощью javascript
  5. Создание всплывающего окна с помощью CSS
  6. Обзор остальных технологий
  7. Какой вариант лучше?
  8. Создание простых всплывающих подсказок на HTML5, CSS и jQuery
  9. Решение
  10. 10 классных сервисов для создания всплывающих окон
  11. Читайте нас в Telegram
  12. Матчасть
  13. Способ 1: свой разработчик
  14. Способ 2: попап как модуль в другом сервисе
  15. Способ 3: отдельный сервис по формам на сайте
  16. Как сделать всплывающее окно на сайте и поднять количество заявок?
  17. Содержание
  18. А зачем мне всплывающее окно?
  19. 1. Сбор лидов
  20. 2. Информирование
  21. 3. Информирование + навигация по сайту
  22. 4. Удержание пользователя на сайте
  23. Преимущества и недостатки всплывающих окон
  24. Преимущества:
  25. Недостатки:
  26. Элементы всплывающего окна
  27. Идеи эффективных всплывающих окон
  28. Скидки с перемещением в раздел каталога
  29. Скидки и бонусы с запросом Email
  30. Подписка на рассылку
  31. Отправка бесплатных материалов
  32. Игровые механики для получения подарков
  33. Квизы для запроса индивидуального предложения
  34. Сценарии показа всплывающих окон
  35. Ошибки при создании всплывающих окон
  36. Заключение
  37. Всплывающие окна на сайте: 9 типов и крутые примеры
  38. Секрет успеха всплывающего окна
  39. Технические особенности всплывающих окон
  40. Аналитика: эффективность всплывающих окон
  41. Отношение поисковых систем к pop-up
  42. Каким бывает pop-up на сайте?
  43. Тип №1. Креативные и не очень всплывающие окна
  44. Тип 2. С аккуратным дизайном и заставляющие страдать
  45. Тип 3. Лаконичные и скучные всплывающие окна
  46. Тип 4. Информативные и непонятные
  47. Тип 5. Минималистичные и стильные всплывающие окна
  48. Тип 6. Однотипные и тематические
  49. Тип 7. Огромные и не только
  50. Тип 8. Стоковые и оригинальные всплывающие окна
  51. Тип 9. Всплывающие окна с цепляющим текстом, а не картинкой
  52. Вместо итогов

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

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

А такая ли гадина эти ваши всплывающие окна?

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

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

Есть два вида рекламных окон:

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

Средства борьбы

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

Основной программой для пользования интернетом являются браузер. Поэтому основной способ блокировки действия рекламных окон реализован именно в браузере:

Создание всплывающих окон с помощью javascript

Действие всех трех методов и вызываемые ими разновидности диалога показаны на изображении:

Вот полный синтаксис метода:

На изображении ниже показано действие метода и приведен упрощенный скрипт всплывающего окна:

Создание всплывающего окна с помощью CSS

Обзор остальных технологий

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

Код приведен в варианте « для ленивых ». Вставив его в любой редактор и запустив на выполнение, вы получите готовый пример всплывающего окна на основе jquery :

Какой вариант лучше?

Источник

Создание простых всплывающих подсказок на HTML5, CSS и jQuery

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

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

Решение

Способ, который я вам предложу, достаточно прост и эффективен. Работает во всех браузерах, даже в ІЕ 6 (Многократно тестировано мной). Легко изменим и удобен. Не загромождает код и делает его наглядным. Его можно легко изменить по свои нужды. Например, сделать задержку вывода подсказки через setTimeout или другое.

Предположим у нас есть HTML-страница со ссылкой, при наведении на которую нам нужно вывести подсказку:

Как вы уже могли заметить из листинга, я использую css-препроцессор LESS.
Мы подключили в отдельные файлы CSS-стили и скрипты. Еще у нас есть одна ссылка и блок div, который и будет контейнером для подсказки.
Спецификация HTML5 разрешает использовать пользовательские атрибуты типа data-atribute, в которых можно сохранять некую информацию об элементе или блоке. Именно в data-атрибутах мы будем сохранять текст всплывающих подсказок.

Для хранения я использую атрибут data-tooltip.
C HTML закончили — можно перейти к стилям.

Я использую библиотеку LESS Elements и всем советую, поэтому некоторые свойства я напишу с использованием данного фреймворка.

С листинга понятно, что в первой строчке мы подключаем LE, задаем блоку div#tooltip абсолютное позиционирование и скрываем его. Дальше мы задаем блоку фоновый цвет и цвет текста, делаем скругление уголки (5px) и устанавливаем значение прозрачности на 50%.

jQuery

Ну а теперь самое интересное — jQuery.

Теперь мы добавляем в выборку все элементы с атрибутом data-tooltip и при наведении на нужный элемент мышью получаем значение подсказки и сохраняем его в переменной. Дальше добавляем текст подсказки в блок #tooltip, задаем ему координаты курсора от края станицы + 5 px и наконец выводим блок с подсказкой в нужном месте. После ухода мыши с элемента мы прячем блок #tooltip, чистим его содержимое и возвращаем в 0;0;.

Вот и все!
В итоге мы получим что-то такое: Демо

Благодаря такому простому скрипту все элементы на странице, у которых будет атрибут data-tooltip, получат подсказку.

Источник

10 классных сервисов для создания всплывающих окон

Читайте нас в Telegram

Рассказываем про инструменты для email-рассылок. Обсуждаем лучшие примеры и механики. Говорим о деньгах. Публикуем вакансии.

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

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

Матчасть

Какие способы создания попапов существуют ↓

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

Способ 1: свой разработчик

Теоретически можно создать что угодно Ресурсы разработки

Нужно задействовать несколько специалистов сразу: дизайнера, верстальщика, разработчика

Сложно анализировать форму и проводить A/B-тесты

Сложно вносить изменения

Способ 2: попап как модуль в другом сервисе

Например, модули всплывающих форм в сервисах рассылок: UniSender, SendPulse, GetResponse, Mailganer, MailerLite, Carrotquest, Convead.

Читайте также:  Как сделать приманку для рыб своими руками
Плюсы Минусы
Бесплатно для пользователей сервиса

Не нужно настраивать интеграции

Ограниченный выбор форм

Обычно нет A/B-тестов

Ограниченность функционала таргетинга, условий показа

Способ 3: отдельный сервис по формам на сайте

Из русскоязычных: Popmechanic, CartProtector, Witget, JumpOut, MailGet, Keplerleads, LeadPlan, Энвибокс, enPop, Leadgenic.

Зарубежные: Sleeknote, Wisepops, Сonvertful, Privy, Sumo, Optinmonster.

Плюсы Минусы
Большой выбор форм.

Наличие игровых и интерактивных механик.

Комбинированные формы (для подписки в мессенджерах и email)

Расширенные настройки таргетинга и условий показа форм

Отдельная оплата за сервис

Может не быть интеграции с нужным вам сервисом рассылок

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

Как пользоваться сервисами для создания попапов ↓

Все эти сервисы работают по примерно одинаковому принципу:

Регистрация → выбор тарифа → выбор формы и дизайна → кастомизация (не везде) → настройки появления на сайте → таргетинг → интеграция с сервисом рассылки (не везде) → вставка готового кода на сайт.

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

Источник

Как сделать всплывающее окно на сайте и поднять количество заявок?

Привет, дорогие читатели блога.

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

Содержание

А зачем мне всплывающее окно?

Есть 4 основных задачи, которые решаются с помощью всплывающего окна:

1. Сбор лидов

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

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

2. Информирование

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

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

3. Информирование + навигация по сайту

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

Навигационное всплывающее окно

4. Удержание пользователя на сайте

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

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

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

Всплывашки на сайте обладают как преимуществами, так и недостатками. Давайте рассмотрим и то и другое.

Преимущества:

Недостатки:

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

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

Любое всплывающее окно состоит из основных элементов:

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

Обязательными являются только Заголовок и Кнопка закрытия окна. Остальные элементы используются опционально.

Идеи эффективных всплывающих окон

Скидки с перемещением в раздел каталога

Вы предлагаете скидку и сразу указываете ссылку, для перехода в раздел каталога со скидочными товарами:

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

Скидки и бонусы с запросом Email

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

Пример всплывающего окна с запросом Email

Подписка на рассылку

Это форма подписки на что угодно: новости, статьи блога, обычная email-рассылка и т.п. Рассылка сама по себе уже является довольно сильном инструментом digatal-маркетинга.

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

Отправка бесплатных материалов

В обмен на контакты посетителя предложите какой-то полезный контент: документ, видео, подборку материалов и т.п.

Пример всплывающего окна с запросом полезной статьи

Игровые механики для получения подарков

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

Пример всплывающего окна с «колесом удачи»

Пример всплывающего окна с «одноруким бандитом»

Квизы для запроса индивидуального предложения

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

Вопрос внутри квиза

Форма запроса контактов в квизе

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

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

Самые распространенные варианты настройки:

Просмотр страницы до определенного места. При скролле до определенного элемента или определенной части страницы пользователь — появляется окно.

Время, проведенное на странице. Когда пользователь провел на странице 5-15-30 секунд — появляется окно.

Бездействие. Пользователь ничего не делает на странице какое-то время — появляется окно.

Уход с сайта. Пользователь быстро «дернул» курсор мыши в правый верхний угол, где находится кнопка закрытия вкладки браузера — появляется окно.

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

Ошибки при создании всплывающих окон

Любая из этих ошибок скорей всего приведет к уходу пользователя с вашего сайта. Обратите на них внимание.

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

Всплывающее окно со звуком — изобретение сатаны. Не надо так делать. Просто запомните.

Убедитесь, что кнопка закрытия доступна и работает.

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

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

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

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

Заключение

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

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

И еще. Не забудьте про аналитику. Настройте цели в Яндекс Метрике и в Гугл Аналитикс на взаимодействие с вашим всплывающим окном. Следите за статистикой, контролируйте поведение пользователей. Считайте реальный эффект от «всплывашки» и делайте выводы.

Источник

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

Сегодня говорим о pop-up (так называют всплывающие окна на сайте). Равнодушных к этому инструменту интернет-маркетинга нет. Люди, которые их видят, разделились на три лагеря. Первые – те, кого откровенно бесят любые всплывающие окна, вторые относятся к ним нейтрально, а последние и вовсе им рады, так как это хороший способ получить какой-нибудь бонус.

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

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

Секрет успеха всплывающего окна

Секрет успеха хорошего поп-апа состоит из 3-х элементов:

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

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

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

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

Добавить всплывающие окна на сайт можно:

Основные варианты настройки:

Еще совет: не пытайтесь обойти системы блокировки. Если клиент использует Adblock или другие блокировщики рекламы, то это его право.

Аналитика: эффективность всплывающих окон

Чтобы понять, насколько ваш поп-ап эффективный или неэффективный, перед запуском настройте цели.

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

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

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

Отношение поисковых систем к pop-up

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

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

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

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

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

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

Каким бывает pop-up на сайте?

Тип №1. Креативные и не очень всплывающие окна

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

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

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

А теперь другое всплывающее окно, которое должно понравится посетителям сайта:

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

Тип 2. С аккуратным дизайном и заставляющие страдать

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

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

А теперь перейдем к не менее яркому, но уже эстетичному примеру:

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

Давайте рассмотрим еще один интересный поп-ап, где основная фишка в заголовке и фоне:

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

Тип 3. Лаконичные и скучные всплывающие окна

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

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

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

А вот еще один хороший пример поп-апа в стиле звездных воин:

Не только оформление делает всплывающее окно привлекательным, но еще и кнопки «Сила уже со мной» и «Да пребудет!». Так что этот pop-up можно как минимум назвать оригинальным.

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

Тип 4. Информативные и непонятные

Качественный pop-up – это не только тот, что хорошо оформлен, но и у которого есть конкретика, а не «получи то, не зная что». Как, например, тут:

В целом pop-up кажется неплохим. Конечно, акция – это прекрасно, но, помимо чего-то эфемерного в виде «много полезных подарков», хотелось бы узнать, какие именно бонусы компания дает. Поэтому необходимо прописать в тексте конкретику – так посетители сайта будут понимать ценность предложения.

А здесь с конкретикой проблем нет:

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

Тип 5. Минималистичные и стильные всплывающие окна

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

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

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

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

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

А вот этому поп-апу +10 баллов привлекательности добавляет котик. Хоть всплывающее окно и кажется простым и незамысловатым, оно все же цепляет внимание.

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

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

Тип 6. Однотипные и тематические

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

Поп-апы, представленные ниже, взяты с интернет-магазинов одежды:

Можете ли вы назвать отличительную особенность одного pop-up от другого? Я точно нет, для меня они, словно близнецы. Везде в качестве предложения представлена скидка, а в качестве картинки взята девушка. На этом, пожалуй, все.

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

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

Еще один вариант отойти от тривиальности и обыденности – сделать pop-up под тематику бизнеса. Как здесь:

Pop-up взят с интернет-магазина спортивных товаров. Благодаря изображению велосипедиста наглядно показано, куда попал посетитель.

Или другой вариант – всплывающее окно в интернет-магазине обуви:

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

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

Тип 7. Огромные и не только

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

Примерно 60% всплывающего окна занято соглашением об обработке персональных данных. Согласна, что ФЗ №152 необходимо соблюдать, а то велик риск получить штраф в крупную сумму. Но можно было бы избежать такой портянки и оставить просто галочку, а само соглашение разместить на отдельной странице, где при желании пользователь мог с ним ознакомиться.

Поэтому такой вариант реализации поп-апа гораздо удачнее:

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

Тип 8. Стоковые и оригинальные всплывающие окна

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

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

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

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

Это не все. У поп-апа ниже, например, картинка была взята явно из фотостоков. Но от этого всплывающее окно не стало выглядеть шаблонным. Наоборот, сначала смотришь на кота, а потом на все остальное. Так что в полной мере pop-up справился со своей задачей – зацепил взгляд.

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

Тип 9. Всплывающие окна с цепляющим текстом, а не картинкой

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

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

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

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

А в примере ниже основной акцент сделан на заголовке «Будь котиком». Хоть картинка и стоковая, но служит подтверждением к словам и усилением.

Вместо итогов

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

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

А если нужна помощь в создании креативных всплывающих окон, то наш дизайнер уже готов творить!

По логотипу встречают, по услугам провожают!

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

© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна.

Интернет-маркетолог сервиса 1PS.RU

Понравилась статья?

Спасибо, мы старались!

Кстати, вы подписаны на нашу рассылку? Если нет, то самое время познакомиться с Катей.

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

33 чел. оценили, средняя оценка 4,8

33 бесплатных инструмента
для интернет-маркетолога

Источник

Оцените статью
Как сделать своими руками
Adblock
detector