Что можно и чего нельзя делать при добавлении всплывающих окон на ваш сайт + примеры

Четверг, 9 часов вечера, и вы потягиваете чай — или, может быть, вино, если день был тяжелым — и небрежно делаете покупки на своем любимом веб-сайте. Вы начинаете зевать и понимаете, что пора готовиться ко сну. Как только вы собираетесь закрыть вкладку, БАМ! Всплывающее окно с намерением выйти показывает следующее сообщение: «Подождите! У тебя есть вещи в сумке». Призыв к действию предлагает вам «оформить заказ сейчас», и в итоге вы покупаете новый кошелек.

Мы все были там, потому что эти проклятые всплывающие окна с намерением выйти работают. Фактически, всплывающие окна с намерением выйти имеют коэффициент конверсии от 3 до 5%. Хотя это и не так уж много, этого все же достаточно, чтобы увеличить количество потенциальных клиентов, продаж и взаимодействия с сайтом без затрат времени на разработку. Всплывающие окна являются стандартной практикой на веб-сайтах, но знаете ли вы, что лучше всего делать и чего не делать при добавлении их на свой собственный сайт?

Не втискивайте слишком много информации.

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

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

Собирайте информацию о пользователях .

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

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

Совет: если вы не хотите, чтобы посетители угадывали классический «Welcome10» в качестве кода скидки 10%, используйте вместо этого пользовательские коды.

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

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

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

Еще один плохой пример — двойной всплывающий дисплей NFL.

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

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

Предлагайте купоны в обмен на электронные письма (лиды).

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

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

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

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

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

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

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

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

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

• Отклонить предложение
• Закрывать
• В следующий раз
• Напомни мне позже
• Спасибо, не надо
• Спасибо за информацию

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

Вы продаете такие продукты, как никотин или алкоголь, которые требуют, чтобы покупатель был определенного возраста? Используйте простое всплывающее окно, такое как Rogue Brewery, чтобы убедиться, что контент, который они видят, соответствует их возрасту.

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

Сообщите своим клиентам о серьезных изменениях.

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

Любой, кто ищет дополнительную информацию об этой новой функции, может нажать кнопку CTA для более подробного объяснения. Точно так же, если клиент не хочет узнавать об этой функции или уже знает информацию, возможность закрыть всплывающее окно четко указана в двух местах: значок корзины и надпись «Спасибо за информацию!» вариант.

Заключение

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