NIC.RU
3907 subscribers

Как правильно настраивать попапы, чтобы они не раздражали: 8 правил от RU-CENTER

БЛОГ RU-CENTER

Попапы — это всплывающие окна на сайте.

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

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

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

Как правильно настраивать попапы, чтобы они не раздражали: 8 правил от RU-CENTER

Не показывать попап сразу

Не стоит показывать попапы сразу, как только пользователь зашел на сайт.

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

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

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

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

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

Персонализировать показы

Случается, что попапы показываются невпопад. Например, всплывает окно с предложением подписаться на email-рассылку, хотя человек уже подписан. Или один и тот же попап показывается пользователю несколько раз подряд за один визит на сайте.

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

Есть несколько популярных сервисов, в которых можно установить попап на сайт:

  • PopMechanic;
  • LeadGenius;
  • Getsitecontrol;
  • LeadPlan.

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

Настройка таргетинга в сервисе LeadPlan
Настройка таргетинга в сервисе LeadPlan

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

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

Сделать заметным крестик на попапе

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

Понятные способы закрыть попап:

  • нажать на крестик;
Попап, который закрывается кликом на крестик
Попап, который закрывается кликом на крестик
  • нажать на кнопку;
Попап, который закрывается кликом на кнопку
Попап, который закрывается кликом на кнопку
  • нажать на внешнюю область.
Попап, который закрывается кликом на крестик или внешнюю область
Попап, который закрывается кликом на крестик или внешнюю область

Не показывать сразу несколько попапов

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

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

Пример наложения попапов
Пример наложения попапов

Делать акцент на пользе для клиента

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

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

Примеры попапов с пользой для клиента

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

Адаптировать попап для всех устройств

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

Как правильно настраивать попапы, чтобы они не раздражали: 8 правил от RU-CENTER
Пример адаптированного попапа в мобильной версии и на десктопе
Пример адаптированного попапа в мобильной версии и на десктопе

Заменить часть попапов встроенными формами

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

Пример встроенной формы подписки на рассылку
Пример встроенной формы подписки на рассылку

Оповещать пользователя, что форма сработала

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

Пример второй страницы попапа, которая подтверждает, что данные отправлены
Пример второй страницы попапа, которая подтверждает, что данные отправлены

Признаки попапа, который не будет раздражать пользователей

  1. Появляется не сразу, а спустя некоторое время. Время показа попапа настраивают в зависимости от глубины просмотра сайта. Если она больше трех страниц, показывайте попап не раньше второй, а если больше шести страниц — не раньше третьей.
  2. Появляется логичным образом. Для этого настраивают таргетинг и условия показа.
  3. Легко догадаться, как закрыть форму попапа, а способов закрытия несколько. Например, можно нажать на крестик, кнопку, внешнюю область.
  4. Формы показываются по одной. Так они не перекрывают друг друга, и пользователь спокойно может прочитать предложение на форме.
  5. Полезен для пользователя. Форма рассказывает об акции, предлагает скидку, полезные материалы за подписку.
  6. Правильно отображается на всех устройствах и основных браузерах. Для этого нужно адаптировать попап под разные устройства и браузеры.
  7. Всплывающих форм не больше двух, остальные — встроенные. Так пользователь не устанет от внезапно появляющихся форм.
  8. Вторая страница попапа объясняет пользователю, что данные отправлены и что делать дальше. Например: «Мы сохранили ваши данные» и «Подтвердите подписку в почте».

Подписывайтесь на наш блог на сайте nic.ru