Рекомендации по созданию всплывающих окон/pop-up

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

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

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

1. Заголовок

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

2. Подзаголовок

Подзаголовок редко используется в поп-апах. Может быть представлен в виде объяснения предложения, описание курса или акции.

3. Основной текст

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

4. СТА-кнопка

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

«Подпишитесь на рассылку — подписаться».

«Скачайте список лучших инструментов — скачать».

«Участвуйте в марафоне — участвовать».

5. Уточнение

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

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

6. Визуальное сопровождение

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

7. Кнопка, закрывающая окно

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

Pop-up могут классифицироваться по целям, расположению на экране и по триггеру появления. Ниже представлены наиболее распространенные варианты. По расположению на экране:

Полноэкранный поп-ап

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

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

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

Лайтбокс

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

Плавающий поп-ап

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

По триггеру:

Приветственный поп-ап

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

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

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

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

Поп-ап с таймером

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

При скроллинге страницы

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

По клику

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

Составные поп-апы

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

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

Используйте геймификацию

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

Адаптируйте под мобильные устройства

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

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

Не стоит активно использовать поп-апы, как только пользователь зашел на сайт. Как правило, идеальное время — 15–30 секунд. Клиент уже успел быстро просканировать страницу, ознакомиться с заголовками, подзаголовками и визуальным контентом. Стоит отметить про глубину контента. Лучшие результаты показывают те всплывающие окна, которые появляются, если пользователь прокрутил страницу минимум на 35%.

Персонализируйте контент

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

При сегментации аудитории персонализируйте контент поп-апов по полученным данным: возраст, пол, интересы, локация и т.д.

Поп-ап предлагает пользователю товары, похожие на те, что он уже покупал.

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

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

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

Соответствуйте дизайну бренда

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

Тестируйте

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

Подтвердите, что данные получены

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

Помните о психологии

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

Ошибки в проектировании разных элементов интерфейса — это не редкость. Мы собрали наиболее распространенные, которых следует избегать при создании поп-апов:

1. Отсутствует кнопка закрытия

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

2. Окно перекрывает контент

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

3. Поп-ап не соответствует контенту

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

4. Чересчур много поп-апов

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

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

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