UX-дизайн всплывающих окон: лучшие практики, советы и примеры

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

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

• Kiss My Keto снизили процент отказа от корзины на 20%.
• Christopher Cloos улучшил их коэффициент конверсии на 37%
• БУМ! Синди Джозеф увеличила свой доход от электронной торговли на 148 297 долларов США всего за один месяц

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

Если вы сможете реализовать это на своем сайте, вы не только не нарушите UX, но и улучшите его .

В этой статье мы рассмотрим 5 способов сделать это, начиная с…

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

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

Входные всплывающие окна также:

• Запретить посетителям доступ к желаемому контенту
• Часто содержат нерелевантный контент
• Запутать посетителей

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

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

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

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

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

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

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

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

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

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

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

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

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

Подумайте о своем «путешествии клиента»: как люди впервые узнают о вашем бренде, как они попадают на вашу целевую страницу и как находят продукты, которые хотят купить.

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

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

2.1. Холодные и горячие перспективы

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

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

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

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

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

Давайте посмотрим, как это работает в действии. Вот отличный пример из нескольких кампаний BOOM!

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

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

2.2. Геотаргетинг

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

Сегментирование ваших посетителей на основе их местоположения позволяет вам предлагать им специальные предложения для конкретной страны, например, предложения по доставке. Вот пример:.

2.3. Таргетинг на посетителей в зависимости от их стадии в процессе покупки

Каждый из ваших клиентов проходит следующие этапы осознания:

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

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

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

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

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

2. Осведомленные о решении посетители знают, какой тип продукта решит их проблему, и активно взвешивают свои варианты (что делает их более «горячими» потенциальными клиентами, чем осведомлённые о проблемах посетители, которых мы только что обсуждали). Это делает вашу цель простой: помочь им найти лучший продукт для них на вашем сайте.

Один проверенный подход включает в себя показ им самых популярных продуктов (или «трендовых» продуктов) в категории, которую они просматривают.

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

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

2.4. Расширенная сегментация

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

Для дальнейшего сегментирования посетителей можно использовать следующие пользовательские действия:

• Были на текущей подстранице не менее X секунд
• Из определенного источника трафика
• В настоящее время просматривают определенную страницу
• Ранее посещали определенные страницы
• Иметь определенные товары в своей корзине
• Иметь стоимость корзины выше определенного порога

Это позволяет:

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

Как мы уже говорили: «Если вы продаете всем, вы не продаете никому». Вы можете поднять это на следующий уровень с персонализацией.

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

Например, если вы продаете электронику и знаете, что конкретный посетитель интересуется смартфонами, «СКИДКА 25% на смартфоны» будет гораздо более эффективным сообщением, чем «СКИДКА 25% на выбранные товары».

Существует четыре основных уровня настройки сообщений во всплывающих окнах:

1. Все получают одно и то же сообщение: Другими словами, вы транслируете общее предложение всем посетителям вашего сайта. Это не рекомендуется.
2. Вы делаете два разных предложения для горячих и холодных потенциальных клиентов: то есть вы делите свою аудиторию на два основных сегмента в зависимости от их вовлеченности. Даже эта простая сегментация может иметь значение.
3. Существует несколько предложений для каждой из основных групп посетителей: в этом случае вы делите своих посетителей на несколько разных групп на основе соответствующих переменных и повторно вовлекаете их с помощью индивидуальных сообщений для каждой группы.
4. Каждый получает индивидуальное сообщение с помощью динамической замены текста: это самый высокий уровень персонализации ваших всплывающих окон. Каждое сообщение предназначено для конкретного человека, который его видит.

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

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

Возвращаясь к нашему примеру выше, магазин электроники рекламирует «Скидка 25% на смартфоны», когда посетитель пытается покинуть свой сайт со страницы категории смартфонов или со страницы отдельного продукта в категории смартфонов.

Однако, когда посетитель просматривает аксессуары для ноутбуков и пытается покинуть сайт, слово «смартфон» автоматически меняется на «аксессуары для ноутбуков», что напрямую соответствует потребностям этого клиента.

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

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

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

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

Вот некоторые распространенные цели электронной коммерции:

1. Увеличение продаж
2. Создание списка адресов электронной почты
3. Сокращение количества отказов от корзины
4. Допродажи и кросс-продажи
5. Улучшение качества обслуживания клиентов

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

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

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

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

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

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

Во всплывающем окне Oodie была вторая страница, где они также запрашивали номер телефона:

Эта стратегия, используемая The Oodie, называется «методом троянского коня», и всего за 30 дней она принесла The Oodie дополнительный доход в размере 1,9 миллиона долларов.

Если вы хотите «украсть» их стратегию, посмотрите наше бесплатное обучение.

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

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

Следуя этим передовым методам, вы можете улучшить взаимодействие с пользователем на своем сайте, улучшив при этом свои усилия по созданию списков и одновременно повысив продажи!

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