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

Говорят, всплывающие окна на сайте раздражают пользователей и не приносят бизнесу пользы. Но статистика утверждает обратное: продуманные попапы повышают конверсию веб-страницы и могут увеличить ее на 60%. Они позволяют привлечь больше лидов, расширить клиентскую базу и превратить посетителей веб-ресурса в покупателей. В этой статье мы разберем, как сделать всплывающее окно на сайте и использовать его с максимальной выгодой для e-commerce-бизнеса и аудитории.

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

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

«Pop-up» (в переводе с английского — «возникать неожиданно» или «всплывать») — элемент интерфейса, который отображается поверх открытой веб-страницы. Он возникает в ответ на действие пользователя, которое играет роль триггера. Примеры:

• Переход на сайт или конкретную страницу веб-ресурса;
• Прокрутка страницы до определенной глубины;
• Клик по иконке для заказа звонка;
• Длительное бездействие посетителя на сайте;
• Попытка закрыть веб-страницу.

Всплывающее окно — многофункциональный маркетинговый инструмент, который помогает достигать следующие цели:

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

Pop-up форма подписки

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

Окно для записи на прием 

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

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

Попап для покупки билета на мероприятие 

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

Всплывающая форма обратной связи

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

Попап с уведомлением о скидках

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

Реклама услуги в формате попапа

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

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

Cookies попап

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

Сообщение о неполадках на сайте в виде pop-up

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

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

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

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

• Привлечение внимания. Если у вас большой интернет-магазин или новостной портал, вероятность, что посетитель сможет досконально изучить предложенный контент, мала. Зато попап увидят все пользователи — это позволяет обратить их внимание на нужную вам информацию.
• Гибкая настройка. Владелец сайта указывает, в какой момент появляется попап, как долго он отображается, как выглядит и что на нем написано. Благодаря этому всплывающие окна подходят для разных целей.
• Уменьшение показателя отказов (bounce rate). Это метрика, которая отображает, как быстро посетители покидают сайт. Чтобы снизить данный показатель, настройте прощальный попап. Он появляется, когда пользователь хочет закрыть вкладку, и помогает удержать его внимание. Благодаря этому повышается время посещения сайта, а поисковые системы лучше ранжируют ресурс в выдаче.
• Лидогенерация. Одна из основных задач попапа — сбор контактных данных потенциальных клиентов для дальнейшей коммуникации с ними. Многие посетители, покинув сайт, больше туда не зайдут, потому что попросту забудут о его существовании. Имея телефон или email пользователя, бренд получает шанс напомнить ему о себе позже.
• Повышение конверсии сайта. Попапы увеличивают ее до четырех раз и способствуют росту прибыли компании. 

Однако у попапов есть и минусы:

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

Что касается клиентов, 73% аудитории не одобряет попапы на сайте. Причин несколько:

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

Тем не менее грамотно оформленный попап имеет плюсы для посетителей сайта:

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

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

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

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

Приветственные

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

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

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

Временная отсрочка

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

Время, спустя которое появляется попап, можно настроить. Универсального значения нет: все зависит от особенностей продукта, контента и назначения веб-страницы. Определить оптимальную длительность отсрочки поможет статистика Google Analytics или Яндекс.Метрики. Изучите среднюю продолжительность пребывания пользователей на странице и настройте pop-up, чтобы он появлялся спустя 50% этого времени.

Попап с временной отсрочкой

Блокирующие окна

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

Блокирующий попап

Данный тип попапов приносит в 14 раз больше регистраций на сайте, чем окна hello-board. Это попапы, которые закрывают только часть веб-страницы, не ограничивают ее функционал и не мешает просмотру контента. С их помощью посетителей информируют об использовании cookies или уточняют геолокацию пользователя. Pop-up появляется слева и выглядят как небольшой вертикальный блок, размещается вверху страницы в форме маленького окошка или внизу — в виде узкой полосы. 

Попап hello-board

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

Scroll pop up появляется, когда посетитель пролистал веб-страницу до определенной глубины — на 40-70%. Если человек просмотрел 50% каталога, предложите ему скидку. А когда пользователь прочитал больше половины статьи в блоге, попросите его поделиться материалом с друзьями в соцсетях.

Если выбирать момент, когда появится всплывающее окно, интуитивно, есть риск промахнуться. Средняя глубина пролистывания окажется ниже, и пользователь покинет сайт раньше, чем увидит попап. Чтобы решить, когда показывать pop-up, ориентируйтесь на данные о средней глубине просмотра страницы. Они доступны в Google Analytics и Яндекс.Метрике.

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

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

Выезжающий попап

Попап по клику

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

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

Попап, который появляется по клику

Прощальные всплывающие окна

Exit pop up открывается, когда пользователь хочет покинуть веб-ресурс. Он позволяет убедить более 10% посетителей остаться на сайте и совершить покупку.

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

Прощальное всплывающее окно

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

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

1. Заголовок. Это короткий, емкий текст, который располагается вверху попапа, привлекает внимание и сообщает пользователю основную информацию: УТП (уникальное торговое предложение), название акции и так далее.
2. Основной текст. Размещается под заголовком и поясняет его. Содержит больше деталей: условия акции, способы получения подарка, преимущества товара, темы рассылок. Задача этого элемента — заинтересовать пользователя, объяснить, какую выгоду он получит и что ему нужно сделать. Чтобы усилить посыл попапа, используйте в этом разделе социальные доказательства: укажите, сколько людей уже читает рассылку, или прикрепите отзыв клиента.
3. Изображение. Многие попапы содержат картинки: фотографии товаров или тематические иллюстрации. Они дополняют текст и облегчают восприятие информации. 
4. Призыв к действию. Call-to-action — обязательный элемент конверсионного всплывающего окна. Кнопку с надписью, которая поясняет, что произойдет после клика по ней, помещают под основным текстом. Формулировка CTA должна быть понятной и лаконичной: «подписаться на рассылку», «получить скидку», «забрать подарок».
5. Поле для ввода данных. Если цель попапа — сбор контактов пользователей, необходимо предусмотреть строку, куда они смогут ввести номер телефона или email.

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

Правила оформления pop-up

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

1. Легкость восприятия информации. Используйте простой язык и понятный дизайн, чтобы пользователи быстро считали и хорошо усвоили нужную вам информацию. Большое количество текста отпугнет посетителей: сократите его и оформите основные тезисы в виде списка.
2. Внимание к деталям. Подберите шрифты, которые будут сочетаться между собой, и гармоничную цветовую палитру. Помните, что дизайн попапа должен соответствовать оформлению всего веб-ресурса. Если на сайте присутствуют иллюстрации, нарисуйте картинки для баннера в таком же стиле.
3. Адаптивность. Учтите, что ваше всплывающее окно будет отображаться на разных устройствах, поэтому оно должно хорошо выглядеть и оставаться функциональным как на компьютере, так и на телефоне или планшете. Эффективность попапов на мобильных устройствах на 42% выше, чем на персональных компьютерах.
4. Кнопка закрытия. Хотите, чтобы посетители сайта остались вам благодарны? Поместите «крестик» в правый верхний угол всплывающего окна и убедитесь, что он заметен. Делать его полупрозрачным и располагать в нестандартном месте не рекомендуется. Если человек не поймет, как закрыть попап, он покинет сайт, а вы потеряете потенциального клиента.

Кнопка закрытия попапа

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

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

• Одна страница — один попап. Большое количество окон, всплывающих одновременно, рассеивает внимание пользователей, воспринимается как спам и вызывает желание поскорее сбежать с сайта. Если вам требуется несколько попапов, настройте их так, чтобы они появились поочередно.
• Чем меньше полей для ввода, тем лучше. Оптимальное количество — две строчки. Этого достаточно, чтобы человек указал свое имя и email. Конверсия таких попапов на 206% выше, чем окон с тремя полями для ввода.

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

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

Создание попапа — задача, которая включает в себя несколько шагов:

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

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

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

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

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

ТОП сервисов и плагины для создания всплывающих окон и попапов

1. Hellobar

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

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

Бесплатный тариф: создание 10 попапов и 1 А/В тестирование.

Сервис Hellobar

2. PopMechanic

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

Бесплатный тариф: 7 дней пользования, 5 шаблонов и подключение 1 сайта к сервису.

Сервис PopMechanic 

LeadGenic

Подходит для настройки попапов с целью сбора контактных данных посетителей и отзывов клиентов, информирования аудитории об акциях и выдачи им купонов со скидками. Помогает сократить количество брошенных корзин и уменьшить показатель отказов на сайте. Создать привлекательное оформление можно без дизайнера на основе готовых шаблонов. Сервис имеет встроенную CRM, куда попадают все лиды, а также интегрируется с Bitrix24, AmoCRM, Яндекс.Метрикой и Google Analytics.

Бесплатный тариф: доступ к профессиональным шаблонам и 3 таргетированных виджета.

Сервис LeadGenic

JumpOut

Сервис для создания попапов от российских разработчиков. Предлагает 10 опций для сегментирования аудитории, 10 триггеров для показа всплывающих окон и встроенный инструмент для А/В-тестов. Интегрируется с популярными CRM-системами и сервисами для создания рассылок.

Бесплатный тариф: 2 варианта дизайна, 5 триггеров и 1 условие для показа попапа.

Сервис JumpOut

My Popup

Плагин для создания всплывающих окон и их подключения к сайтам, разработанным на WordPress. Позволяет создавать неограниченное количество попапов разного типа с гибкими настройками. Сервис предлагает 14 встроенных пресетов, у которых можно менять фон, изображения, иконки, а также добавлять от 1-й до 2-х кнопок. 

Плагин My Popup

Ninja Popups

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

Плагин Ninja Popups

Master Popups. Инструмент для создания попапов, который поддерживает как функцию графического редактора, так и CSS-коды и JavaScript. Настройки триггеров и аудитории для всплывающих окон можно сохранять и использовать для разных проектов.

Плагин Master Popups 

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

Шаблоны попапов в конструкторе сайтов Craftum

Тестирование готовых попапов

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

• Функциональное тестирование. Проверьте, что окно открывается, легко закрывается, поля для ввода активны, а кнопки и ссылки кликабельны и ведут на правильные страницы или выполняют нужные действия.
• Оценка совместимости с различными браузерами и устройствами. Убедитесь, что попап отображается корректно во всех веб-браузерах (Chrome, Firefox, Safari) и на разных устройствах (компьютеры, планшеты, смартфоны), не перекрывая важные элементы контента и не вызывая проблем с прокруткой страницы.
• Тестирование времени появления и триггеров. Проследите, чтобы pop-up появлялся в нужный момент или в ответ на выбранное вами действие пользователя по истечении определенного времени.

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

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

Заключение

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

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