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

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

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

Очень многое зависит от оптимизированного дизайна всплывающего окна на вашем сайте.

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

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

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

Готовы узнать лучшие практики дизайна и получить полное руководство по созданию всплывающих окон для вашего сайта? Давайте приступим!

>> Свяжитесь со мной, если вам нужна профессиональная помощь с вашим сайтом на WordPress , я разрабатываю брендинг и создаю сайты на WordPress, чтобы вы могли сосредоточиться на том, что любите!

Что такое всплывающее окно на сайте

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

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

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

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

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

В группу поп–апов эти модальные окна попали из–за своего «поведения» при посещении сайта пользователем — для них тоже характерно внезапное возникновение в поле зрения посетителя сайта.

>> Подробнее: Как получить больше лидов с помощью сайта

Виды поп–апов по месту размещения на экране сайта

1) Лайтбокс 

Этот вид поп–апов те самые всплывающие окна на сайте собственной персоной, самый распространенный тип модальных окон на сайте.

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

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

Чтобы вызвать закрытие или сворачивание поп–апа, нужно или совершить основное действие, или кликнуть по специальному значку в виде крестика.

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

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

2) Боковые уведомления (слайды)

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

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

Для закрытия окна есть «крестик», кнопка CTA или ссылка на согласие с политикой сайта или ее отклонением.

Всплывающие окна с боковым размещением на сайте — экологичный способ ненавязчиво обратиться к вашим посетителям.

3) Плавающая полоса (hello bar)

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

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

При этом, баннер не прокручивается, а остается в верхней части экрана при скролле страницы сайта («липкое» окно).

На таких баннерах, как правило, размещают уведомления рекламного характера.

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

4) Полноэкранный режим всплывающего окна

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

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

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

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

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

Давайте посмотрим, как это выглядит на сайте.

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

>> Подробнее: 11 способов улучшить работу сайта

>> Подробнее: Самые распространенные причины, почему пользователи уходят с сайта

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

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

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

В конце концов, вы получаете более теплые лиды и более высокую конверсию на сайте.

Давайте посмотрим, как эти поп–апы выглядят на сайте.

1. Триггер входа вызывает всплывающее окно–приветствие на сайте (Entry Pop-Up) — появляется при первом посещении сайта, может содержать вопрос с уточнением геолокации (наверняка, вы встречали такие вопросы: «Ваш город Москва?») или какие–то приятные предложения для посетителя, например, скидки или уведомления об акциях на сайте.
2. Триггер выхода вызывает всплывающее прощальное окно на сайте (Exit Pop-Up) — всплывающее окно появляется перед намерением пользователя покинуть страницу сайта, такой тип всплывающего окна — хороший способ удержать посетителя на сайте. Печально–пугающая статистика говорит, что около 70% посетителей уже никогда не вернутся на ваш сайт. Поэтому применение таких всплывающих окон на сайте имеет смысл.
3. Триггер прокрутки (скролла) страницы вызывает всплывающее окно на сайте (Scroll Pop-Up) — заранее устанавливается значение процента просмотренного контента на сайте (например, после 50% контента страницы) для запуска этого вида поп–апа. Такое всплывающее окно удобно своей возможностью синхронизировать просматриваемый контент на странице сайта и соответствующее предложение на баннере поп–апа. Такие всплывающие окна на сайте эффективны, потому что они отображаются для пользователей, которые явно заинтересованы в теме вашего сайта.
4. Триггер проведенного времени на странице вызывает всплывающее окно на сайте (Timed Pop-Up) — здесь принцип похож с предыдущим видом поп–апа с разницей в том, что заранее устанавливается время пребывания на странице, после которого будет активирован поп–ап, например,когда посетитель находится на вашей странице в течение определенного времени (обычно от 10 до 60 секунд). Всплывающие окна времени на странице появляются только для пользователей, которые показывают, что у них достаточно интереса, чтобы оставаться на вашей странице.Поскольку ваши пользователи более заинтересованы в содержании вашей страницы, они с большей вероятностью будут действовать в соответствии с вашим призывом к действию на поп–апе.
5. Триггер посещения заданной страницы на сайте — такое всплывающее окно задано только для определенной страницы вашего сайта, оно не является общим для всех страниц сайта. Отлично подходит для сегментации посетителей сайта. Например, такой поп–ап можно запустить для персонализации ваших предложений в соответствии с просматриваемым контентом на сайте.
6. Триггер клика вызывает всплывающее окно на сайте (Click Pop-Up) — здесь логика очень проста. С такими всплывающими окнами вы можете получить действительно горячих лидов, поскольку этот вид поп–апов требует приложения усилий и совершения активных действий пользователями. Например, такое окно может появиться на сайте, если предложить посетителям сайта заказать обратный звонок, чтобы более подробно узнать о ваших предложениях или услугах, или попросить о персональном предложении.

Отчасти мы с вами уже немного затронули тему преимуществ использования поп–апов на сайте.

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

>> Подробнее: Как провести полный редизайн сайта

>> Подробнее: Основные этапы разработки с нуля

>> Подробнее: Как убедиться в готовности дизайна и функционала сайта

>> Подробнее: 50+ причин сделать свой сайт на Вордпресс

Преимущества использования поп–апов на сайте

• Гарантированное привлечение внимание посетителей сайта,
• Продвижение контента,
• Генерирование новых лидов,
• Уменьшение числа брошенных корзин в магазине,
• Получение большего числа подписчиков,
• Привлечение трафика на целевые страницы,
• Регулирование поведения посетителей на сайте,
• Удержание посетителей на сайте,
• Снижение показателя отказов на сайте,
• Сегментация лидов,
• Персонализация предложений для посетителей сайта.

>> Подробнее: Почему у сайта высокий показатель отказов

>> Подробнее: О чем писать в блоге для привлечения клиентов

Недостатки использования поп–апов на сайте

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

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

>> Подробнее: Как улучшить юзабилити сайта

>> Подробнее: Как улучшить скорость сайта на Вордпресс

Структура поп–апа

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

Тем не менее, есть общие характерные компоненты поп–апов:

• Заголовок CTA,
• Подзаголовок и поясняющий текст,
• Кнопка CTA,
• Микротекст,
• Иконка «Х» для закрытия окна.

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

>> Подробнее: Что такое шаблон Вордпресс и как его выбрать

>> Подробнее: Что важно при выборе хостинга для сайта

Если со структурой pop–up понятно, давайте посмотрим, что же можно предложить посетителям сайта, чтобы удержать их на сайте, повысить конверсии, получить больше клиентов, уведомить о новых товарах или сделать персональное предложение.

Иными словами, мы с вами рассмотрим содержание всплывающих окон. А их содержание определяется вашими маркетинговыми целями.

>> Подробнее: Как создать воронку продаж на Вордпресс

Цели использования всплывающих окон на сайте

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

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

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

Такой подход отлично подходит для увеличения числа просмотров страниц за счет перенаправления читателей на соответствующий контент.

3) Сбор статистических данных

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

4) Сбор контактных данных

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

5) Регистрация на мероприятие

Онлайн или оффлайн мероприятия — хороший инструмент в вашей маркетинговой стратегии. На сайте вполне можно организовать сбор слушателей на вебинар или курс с помощью поп–апа с контактной формой для заполнения.

6) Предзаказ продукта

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

7) Рекламные уведомления

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

Так вы способствуете распространению и продвижению рекламных кампаний на сайте.

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

8) Предложение о подписке

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

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

9) Увеличение чека покупки (допродажи и распродажи)

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

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

>> Подробнее: Как оформить прайс на свои услуги и товары

>> Подробнее: Как включить сайт в состав воронки продаж

>> Подробнее: Что написать в брифе на создание сайта

>> Подробнее: Ошибки страницы контактов сайта, которые стоят вам клиентов

Что у нас с дизайном поп–апов?

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

13 советов по дизайну всплывающих окон

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

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

>> Подробнее: Приемы веб–дизайна для увеличения конверсии сайта

>> Подробнее: Основные элементы брендинга для любого бизнеса

>> Подробнее: 9 советов при выборе шрифтов для бренда

#2. Сформулируйте четкий и привлекательный призыв к действию — ваш призыв к действию не должен трактоваться иначе или двусмысленно, и обязательно включите в заголовок глагольную конструкцию, и чтобы ваш заголовок действительно выглядел как призыв к действию, глагольная конструкция должна быть в повелительном наклонении. Для маленького примера, какой призыв вы бы выбрали: «Подписаться на обновления сайта» и «Подпишитесь на обновления сайта»? Чувствуете разницу?

>> Подробнее: Основные правила в дизайне сайта

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

>> Подробнее: 9 правил цветовой палитры сайта

>> Подробнее: Онлайн–генераторы цветовой гаммы для сайта

>> Подробнее: Готовые гармоничные палитры для дизайна сайта

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

>> Подробнее: Как исправить ошибки в брендинге

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

>> Подробнее: Что такое адаптивность сайта и почему она вам нужна

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

>> Подробнее: 17 лайфхаков для ускорения создания сайта WordPress

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

>> Подробнее: Типичные ошибки в дизайне и работе сайта

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

>> Подробнее: Как удержать пользователя на сайте с помощью страницы 404

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

>> Подробнее: 11 признаков, что пора провести ребрендинг

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

>> Подробнее: Как брендировать сайт для узнаваемости бренда

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

>> Подробнее: Пастельные цветовые сочетания для дизайна сайта

>> Подробнее: Яркие цветовые сочетания для веб–дизайна

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

>> Подробнее: Сайты с бесплатными качественными фото

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

>> Подробнее: Как составить портрет целевой аудитории блога

Почему дизайн всплывающего окна на сайте имеет значение?

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

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

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

Вы же знаете, что «картинка стоит тысячи слов». Человеческий мозг обрабатывает изображение в 60 000 раз быстрее, чем текст, а 90% информации, передаваемой в мозг, является визуальной.

Вот почему отличные визуальные эффекты могут значительно повысить эффективность всплывающего окна на сайте. 

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

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

>> Подробнее: Что такое оптимизация изображений и как ее провести онлайн

>> Подробнее: SEO для фото и графики перед загрузкой на сайт

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

Рассмотрим несколько шагов для повышения эффективности поп–апов на вашем сайте:

1. установите цели настройки поп–апа на сайте, для чего он вам нужен,
2. сформулируйте четкое основное сообщение и призыв к действию
3. подберите доказательства для подтверждения  ценности вашего предложения для пользователей (в том числе и убедительное изображение), 
4. уберите возражения и страхи посетителей сайта,
5. установите ограничения (время акции, сроки регистрации, количество единиц товара для предзаказа и т.д.),
6. тестируйте оптимальное время показа всплывающего окна на сайте.
7. практикуйте переход по кнопке CTA на целевую страницу для демонстрации доказательств ценности продукта и его преимуществ, обработки возражений и снятия страхов посетителей сайта.

>> Подробнее: Как повысить эффективность целевой страницы

Зачем нужно использовать поп–апы на сайте?

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

С помощью всплывающих окон на сайте можно решать множество задач:

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

>> Подробнее: Как спланировать и сделать лид–магнит для сайта

>> Подробнее: Как повысить эффективность сайта личного бренда

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

Для вставки поп–апа на сайт Вордпресс в репозитории представлено большое разнообразие плагинов, например плагин Popup Builder . Перед установкой ознакомьтесь с функциональными возможностями плагина, его совместимостью с ядром Вордпресс и вашей темой оформления сайта. Важно убедиться в его безопасности для сайта и безконфликтности с другими плагинами.

Другой плагин WordPress для вставки всплывающих уведомлений на сайт — компоновщик страниц Elementor Pro. В бесплатной версии плагина, которую также можно установить на сайт из официального репозитория Вордпресс, такой возможности нет.

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

>> Подробнее: Онлайн–сервисы при работе с блогами

>> Подробнее: Из чего складывается безопасность сайта на Вордпресс

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

Для повышения результативности вашего поп–апа на сайте необходимо периодически анализировать полученные данные.

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

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

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

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

 Сплит-тестирование — это долгосрочная постоянная стратегия, которая поможет вам узнать, на что ваши посетители реагируют лучше всего.

>> Подробнее: С чего начать разработку стратегии электронного маркетинга

Спасибо, что дочитали до конца! Публикация вышла приличная, но оно того стоило, не так ли?

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

>> Свяжитесь со мной, если вам нужна профессиональная помощь с вашим сайтом на WordPress , я разрабатываю брендинг и создаю сайты на WordPress, чтобы вы могли сосредоточиться на том, что любите!

Заключение

Всплывающие окна — это эффективные инструменты привлечения внимания посетителей сайта и повышения конверсии на вашем сайте. 

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

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

Новое в блоге

• Анатомия целевой страницы: 13 ключевых элементов
• Как завоевать доверие пользователей к сайту
• Всплывающие окна на сайте: 13 правил дизайна поп–апов
• Как получать больше клиентов с помощью сайта
• Как сделать сайт частью воронки продаж