Всплывающие окна: как сделать их не раздражающими, а привлекающими?

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

Основные виды всплывающих окон

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

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

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

донесения сведений потенциальным клиентам об акциях, специальных предложениях;

продвижения нового товара или услуги;

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

напоминания о незавершённом заказе и находящихся в онлайн-корзине товарах.

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

Всплывающие окна: как сделать их не раздражающими, а привлекающими?

Каким должен быть контент окна?

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

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

Пример неудачного окна:

Всплывающие окна: как сделать их не раздражающими, а привлекающими?

Пример удачного окна:

Всплывающие окна: как сделать их не раздражающими, а привлекающими?
  • Понятной. Суть вашего предложения должна быть передана кратко и при этом ёмко. Длинные посылы и сумбурно поданные сведения оттолкнут посетителя. Не забудьте подчеркнуть, в чём состоит выгода для клиента. Формулировка может быть, например, такой: «Подарим 1000 рублей за оформление подписки на новости» + форма подписки.

Неудачно сформулированное размытое предложение:

Всплывающие окна: как сделать их не раздражающими, а привлекающими?

Пример хорошего текста:

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

Неудачное решение:

Всплывающие окна: как сделать их не раздражающими, а привлекающими?

Хороший вариант:

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

Технические особенности добавления всплывающего окна

Добавление всплывающего окна на веб-сайт может быть выполнено с использованием HTML и JavaScript, плагинов применяемой системы управления содержимым, готовых сервисов (например, Witget, PopMechanic, CartProtector).

Основными вариантами настройки являются:

  • Демонстрация всплывающего окна по прошествии определённого времени. Оптимальный промежуток − 30-90 секунд после того, как гость зашёл на сайт, вероятно, он уже успел ознакомиться с основной информацией.
  • Сообщения, показываемые новым пользователям. В этом случае окно тоже должно появиться не сразу, чтобы не оттолкнуть потенциального клиента. За первый заказ или регистрацию стоит предложить большой бонус, от которого будет просто невозможно отказаться. Такой баннер можно разместить даже на главной странице.
  • Появление окна после прокрутки страницы до определённого места. Такое решение подходит для статей, а также для каталога. Если человек долго изучает сведения, ему можно предложить рекламную информацию. Оптимальный вариант − 50-70% прокрутки страницы.
  • Показ перед уходом с сайта. Если курсор движется в зону закрытия вкладки, самое время показать окно, возможно, оно заинтересует и удержит пользователя.
  • Сообщение для ранее заходивших гостей. Если посетитель проявил заинтересованность в вашем предложении, можно предоставить ему больше информации.

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

Вопросы аналитики

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

Всплывающие окна: как сделать их не раздражающими, а привлекающими?

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

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

Всплывающие окна и поисковые системы

И попап, и попандер могут стать причинами попадания сайта под фильтр, но такой риск есть только при злоупотреблении данным рекламным инструментом.

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

Google тоже рекомендует осторожно использовать в работе всплывающие окна, особенно в мобильных версиях сайтов. Если баннер будет мешать изучению сведений, веб-ресурс попадёт в зону риска. При блокировке рекламы Google Chrome ориентируется на рекомендации, которые были даны Coalition for Better Ads, их тоже стоит изучить.

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

Больше интересных статей здесь: Новости.

Источник статьи: Всплывающие окна: как сделать их не раздражающими, а привлекающими?.