Рассылка по интернет-маркетингу:
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных

Как заставить поп-ап работать на вас: 20+ вариантов от TexTerra

Все поп-апы внутри кейса верстались и работали на страницах блога TexTerra или на сайте TeachLine.

Задача:

Разработка дизайна всплывающего окна (pop-up).

Сложность:

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

Чтобы преодолеть это, при работе с всплывающими окнами мы учитываем наличие нескольких моментов:

Убедительный посыл

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

Совместное обсуждение

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

Несколько концепций

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

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

Статистику можно отсматривать внутри системы администрирования сайта. Это выглядит вот так:

Актуальность

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

Разнообразие

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

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

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

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

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

Для удобства мы разбили по категориям.

Поп-апы старого образца

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

sample2
sample3
sample4
sample5
sample5

Яркие образы

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

sample2
sample3
sample4
sample5
sample5
sample5

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

sample2
sample3
sample4

Тематические pop-up окна

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

sample2
sample3
sample4
sample5
sample5

Анимированные pop-up окна

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

Записаться
Подробнее
Подробнее
Подробнее

Продвижение услуг

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

sample2
sample3

Закладывали в основу наши кейсы и результаты по проектам.

sample2
sample3

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

sample2
sample3
sample3

Экспериментальные pop-up

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

sample2
sample3
sample3
sample2
sample3
sample3
sample2
sample3
sample3

Для учебного центра

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

sample2
sample3
sample3
sample3

Также пробовали делать акценты на акционных предложениях

sample2
sample3
sample3

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

Texterra – продвижение в интернете x
Заказать звонок:
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных
Texterra – продвижение в интернете x
Заказать услугу:
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных