НАПИСАТИ НАМ
26
.
06
.
2023

Попапи для сайту: як зробити, щоб вони працювали, а не дратували

ЗМІСТ

Зізнайтеся, вас дратують ці нав'язливі спливаючі вікна на сайті. Вони дратують усіх, починаючи з 90-х. З'являються в той момент, коли ви тільки починаєте читати статтю або вивчати товар, перекривають увесь екран, а шукати хрестик закриття — це все одно, що голку в копиці сіна. 

Для будь-якого бізнесу важливе утримання і залучення користувачів на сайті. Що довше користувач залишається на сайті, то вище ймовірність того, що він зробить покупку. 

Отже, сама концепція попапів суперечить цим цілям. Тоді чому бізнеси продовжують їх використовувати?

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

Що таке якісний попап і чим він може бути корисним вашому бізнесу (без дратування ваших потенційних клієнтів) розбиралися зі Світланою Фурса, Head of Retention Marketing в Promodo і Владом Лободою, Team Lead Email Marketing в Promodo.

Що таке попап?

Попапи, інформери, веблеєри, «спливайки» — як тільки digital-фахівці не називають повідомлення на сайті. Наприклад, онлайн-сервіси eSputnik та Claspo використовують визначення «інформер», а B2B-платформа Bloomreach називає їх — «веблеєрами», хоча технічно все це — віджети. У нашій статті ми вирішили називати всі спливаючі вікна попапами. 

Отже, попап — це спливаюче вікно різних розмірів, яке зазвичай з'являється поверх основного контенту сайту, іноді збоку або знизу, і потребує уваги користувача. 

Важливу роль у розвитку та популяризації попапів відіграв Ітан Цукерман, директор Центру з вивчення громадянських медіа при Массачусетському технологічному інституті.

Саме він понад 30 років тому написав код для першої «спливайки». Цікаво, що у 2014 році Цукерман вибачився за свою роль у розвитку попапів, як найбільш нав'язливої форми інтернет-реклами. 

Сучасні попапи далекі від своїх прабатьків з 90-х, а їхнє використання статистично довело підвищення коефіцієнта конверсії (про що мова піде трохи пізніше).

Але, ось вам спойлер: 

Середній коефіцієнт конверсії спливаючих вікон становить 11,09%.

Типи попапів

Найчастіше на сайтах використовують «тимчасовий» попап. Він з'являється через певний час — від 3 до 10 секунд.

Другий за популярністю тип спливаючих вікон — «при вході» або «при виході». Перше вікно з'являється, коли користувач заходить на сайт, тоді як останнє спрямоване на те, щоб зупинити користувача на виході з сайту.

Ось основні типи попапів, які, наприклад, використовують у Claspo:

  • Popup

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

Як саме працювати з попапами  для збільшення продажів з каналу email, ми детально розповіли в кейсі Promodo із Retention marketing для маркетплейса WEINTIME.

Приклад попапу для WINETIME
  • Floating Box

Боковий попап, який можна використовувати для підписки. Іноді на ньому можуть бути інпути для збору контактів (імейла або телефону), або інформація про знижку.

  • Launcher

Плашка, яка відображається за замовчуванням та при натисканні на неї, спливає Floating Box. Це мінімізує розмір елемента та менше дратує користувача, але може трохи знижувати конверсію.

  • Content Blocking Widgets

Попап, який з'являється під час взаємодії відвідувача з сайтом, де є контент 18+. Користувачеві треба підтвердити свій вік. Якщо він, наприклад, натисне Enter, то підтверджує, що повною мірою бере на себе відповідальність за те, що він бачить на сайті. Алкоголь, наприклад.

  • Floating Bar

Попап, який закріплюється в нижній частині екрана. Може використовуватися як для форми підписки, так і для інформування користувачів. Найчастіше використовується для збору імейлів. Під час скролінгу залишається статичним, поки відвідувач сайту його не закриє.

За нашим досвідом, у розрізі конверсії найбільш ефективними є варіанти Popup та Floating Box.

Мета попапів

Хоча попапи використовуються для різних цілей, основне їхнє призначення — збір інформації про відвідувачів. Наприклад, електронної пошти або номера телефону. Вони також ефективні, якщо ви хочете підвищити впізнаваність бренду, просунути новий продукт, запустити рекламну кампанію, сформувати базу для електронної розсилки, збільшити продажі, підвищити конверсію, виміряти NPS тощо.

Часто попапи використовують для збору NPS про роботу з сайтом. Що це може бути? Наприклад, NPS про замовлення. Користувач зробив замовлення і наступного разу при відвідуванні сайту йому показується попап з CTA оцінити досвід оформлення замовлення: Сподобалося (👍)-Не сподобалося (👎).

Світлана Фурса
Керівниця відділу Retention marketing в Promodo

Використовувати попапи на сайті потрібно так, щоб вони закривали необхідні KPI та цілі бізнесу:

  • підвищення продажів (пропозиція зробити покупку зі знижкою, бонусом або іншою вигідною пропозицією);
  • генерація лідів (ebook, курси або знижка в обмін на контактні дані).
Зазвичай попапи для генерації лідів піддають A/B-тестуванню.
  • Підтримка клієнтів (поліпшення користувацького досвіду через попапи з чат-ботами).
  • Заохочення до дій (заохочення підписатися на соцмережі, приєднатися до реферальної програми, підказки про покинуті кошики тощо).
У попапів з інформацією про покинутий кошик коефіцієнт конверсії 17,12%.
  • Цільові пропозиції (кожен меседж для попапа підбирається індивідуально, залежно від поведінки користувача. Наприклад, жінку, яка проводить кілька хвилин на сторінці сайту в розділі косметики, може мотивувати до покупки попап з обмеженою за часом акцією або спливаюче вікно про раніше переглянуті товари, якщо вона відвідує сторінку повторно).
  • Просування кроспродажів (попапи націлені на користувачів, які додали товари в кошик, але пішли, не завершивши купівлю, оскільки щось зупинило їх від оплати. Наприклад, висока вартість доставлення).

Але найвищі показники конверсії ми спостерігаємо у брендів, які пропонують користувачам певний стимул до оформлення покупки, наприклад, безкоштовне доставлення, знижку або інтерактив.

У гейміфікованих попапів коефіцієнт конверсії вищий за звичайні.

Детальний розбір того як працюють гейміфіковані попапи ми зробили у нашому кейсі для Stylus

Рулетка або «колесо фортуни» — це гейміфікований попап, який дає можливість відвідувачам «грати» в обмін на імейли. Механіка класична — на сайті спливає інформер із CTA випробувати удачу. Користувач клікає і переходить на сторінку гри.

Світлана Фурса
Керівниця відділу Retention marketing в Promodo

Попапи для десктопа та мобайла

Понад 5 млрд користувачів мобільних пристроїв мають доступ до інтернету, тому ваші попапи мають бути адаптивними.

Це той випадок, коли розмір має значення. 

Попап у версії мобайл може взагалі не відображатися або відображатися за іншою механікою, тому SEO-фахівці Promodo відзначали таку тенденцію: аби не падати в рейтингу в SEO-видачі, попапи повинні займати не більше 25% екрана.

Як швидко попап повинен з'являтися на сайті

Все індивідуально, але краще призначити затримку до показу попапів на 10-15 секунд з моменту потрапляння користувача на сайт, залежно від того, що це за попап. Якщо йдеться про підписку, то інтервал можна збільшити до 30+ секунд. 

По-перше, це додає сайту час повністю прогрузитися. По-друге, попап може, наприклад, пропонувати знижку на замовлення, а користувач на сайті вперше і поки що нічого для себе не вирішив, а йому одразу пропонують підписку, знижки та інше. Дратує!

Про що свідчить закриття попапів:

  • нерелевантна пропозиція;
  • нецікавий контент;
  • попап перекриває сторінку сайту та контент.

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

Якщо середній час перебування на сайті — 20 секунд, то попап можна показувати через 10 секунд. Користувач заходить, починає ознайомлення з сайтом, щось вивчає, а ми йому — пропозицію. Або, замість попапа розміщуємо Launcher. Цей маленький елемент завжди помітний, але не дратує. Користувач у будь-який момент може підписатися на розсилку, і неважливо, скільки триває сеанс.

Влад Лобода
Team Lead Email Marketing в Promodo

При правильному відображенні попап може знизити bounce rate. Припустимо, користувач вирішив покинути сайт. 

У Claspo можна вибрати частоту відображення попапа користувачеві — раз за сесію, раз на кілька днів, хвилин, годин, без ліміту і так далі. Наприклад, користувач вирішив закрити вкладку після того, як: провів на сайті 20 секунд, вивчав контент на одній або декількох сторінках, був неактивний на сайті понад хвилину. Він переводить курсор на закриття вкладки. У момент перетину області до рядка url, за правилами показу (попередньо налаштованими) може з'являтися попап із меседжем «Не йди, залиш імейл, ми тобі дамо знижку і все що завгодно, аби тільки ти залишився та купив», у такий спосіб відволікаючи користувача від виходу з сайту.

Влад Лобода
Team Lead Email Marketing в Promodo

Додатково можна вибрати після якої кількості показів демонстрація конкретного попапа потрібно залишити зовсім або замінити на інший віджет. Крім того, дуже важливим є коректне налаштування інтервалів між показами попапів

Один попап за певний проміжок часу. Загалом на сайті їх може бути хоч 100, але не всі відразу. Наприклад, у нашому кейсі Stylus є віджет-гра з формою для підписки та 3-5 попапів, для яких було налаштовано систему приоритизації показів. Як вона працювала? Користувач не бачив акційні попапи, поки не залишив свій імейл у грі або у формі підписки.

Світлана Фурса
Керівниця відділу Retention marketing в Promodo

Тобто bounce rate може знижуватися завдяки тому, що відбувається утримання користувача на сайті за допомогою якогось унікального меседжу попапа.

Як визначити ефективність попапа

Ефективність будь-якого попапа вимірюється доходом. Тут важлива модель атрибуції. У нашому випадку — last click. Є клік — є замовлення. Крім того, наявний момент канібалізації чужого трафіку. Якщо користувач, наприклад, прийшов із контекстної реклами й побачив попап, — його можна «забирати» собі.

Наприклад, у кейсі Promodo для Concert ua, де ми через Bloomreach налаштовували інформаційний попап без форми, але з динамічним контентом. Як це працювало? Наприклад, користувач вивчає інформацію про якийсь івент (концерт), додає (або не додає) його в кошик і йде з сайту, не зробивши покупку. Наступного разу під час повернення на сайт користувач бачить попап з інформацією про те, що він дивився минулого разу, про покинутий кошик (якщо в нього було щось додано) плюс CTA зробити покупку чи забронювати квитки вже зараз. Для такого попапа ми використовували наступну модель атрибуції — дохід у цей інструмент рахували тільки за умови, якщо протягом години після кліка на цей попап про покинутий перегляд користувач здійснював бронь. Якщо броні не було або була, але пізніше, ніж за годину, — це не зараховувалося в інструмент попапа.

Світлана Фурса
Керівниця відділу Retention marketing в Promodo

Як зробити так, щоб попапи працювали, а не дратували

Почніть з оптимізації, а саме: 

  1. Використовуйте привабливий заголовок.
  2. Показуйте тільки один попап за або встановіть часові інтервали між показами.
  3. Пропонуйте щось цінне в обмін на заповнення форми.
  4. Зберігайте простоту з мінімальною кількістю обов'язкових полів у формі. Їх має бути не більше двох:
  • імейл + номер телефону;
  • ім'я + імейл;
  • просто імейл.

Зверніть увагу на сторінки сайту, на яких показується попап. Якщо в 90% випадків користувачі здійснюють покупки на певних сторінках, їх не потрібно відволікати попапами. І, навпаки, на сторінках із високим показником відмов варто розміщувати віджети, інформери, попапи для збору імейлів, знижки тощо.

Світлана Фурса
Керівниця відділу Retention marketing в Promodo

Наприклад, попапи на тему алкоголю слід налаштовувати лише на релевантних сторінках, а саме, на сторінках з алкоголем. 

Релевантність попапа на прикладі кейсу «Винний гайд»

При заході на сторінку з категорії «Алкоголь» користувач бачив лончер «Винний гайд». 

Коли користувач клікав на нього, то відкривався попап із CTA «Хочешь розбиратися у вині краще?» та формою для електронної адреси та запитаннями, відповівши на які на пошту надсилали той самий «Винний гайд».

Коли користувач клікав на нього, то відкривався попап із CTA «Хочеш розбиратися у вині краще?» та формою для електронної адреси та запитаннями, відповівши на які на пошту надсилали той самий «Винний гайд».

Обов'язково налаштуйте показ попапів для тих користувачів, які вже є у вашій базі. Наприклад, попап, що збирає базу за мотивацію до покупки, ніколи не повинен відображатися для користувачів, які вже підписані на вас. Чому? Це може викликати негатив і зіпсувати клієнтський досвід. 

Користувач спробує підписатися і, наприклад, отримати 5% знижки, але замість цього отримає повідомлення «Вибачте, ви вже є в базі, знижка вам недоступна». Неприємно, погодьтеся?

Але, наприклад, під час збору бази для оповіщення старту продажів на Чорну п'ятницю 2023 — це можна і потрібно робити як для поточних, так і для нових користувачів.

І, звісно, варто приділяти увагу візуальному контенту для форми підписки та робити попапи візуально привабливими. Як це зробити?

  • Використовуйте ваші фірмові кольори та зображення високої якості.
  • Зберігайте простоту макетів.
  • Використовуйте шрифти, які легко читаються на декстопі та мобайлі.
  • Тестуйте різні варіанти дизайну, щоб зрозуміти, що найкраще підходить вашій аудиторії.
A/B-тестування має вирішальне значення для оптимізації стратегії використання спливаючих вікон.

Цей метод оптимізації допоможе визначити, де користувачі сумніваються або відмовляються від процесу, що в кінцевому підсумку вплине на підвищення конверсії. Наприклад, у Claspo є вбудований функціонал для A/B-тестування ─ діляться користувачі всього сайту або конкретної сторінки 50/50, або ж залежно від того, яку кількість попапів потрібно тестувати. Зазвичай тестується два варіанти, зі зміною в них одного елемента, після чого проводиться аналіз результатів.

Висновок

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

Попапи у 2023 році — це попапи з інтерактивними елементами: гейміфікація та чат-боти вже зараз мають вищий коефіцієнт конверсії. 

І, останнє, попап — це потужний інструмент залучення потенційних клієнтів і збільшення продажів, головне, щоб він був в умілих руках.

Підпишіться
на розсилку
Дякуємо за підписку!
Упс! Щось пішло не так. Спробуйте ще раз

Чому важливо робити попапи менш нав'язливими?


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

Як оптимізувати час появи попапів?


Щоб оптимізувати час, враховуйте такі фактори, як поведінка користувача, глибина скролінгу або намір покинути сторінку. Впровадження відкладених спливаючих вікон або тригерів, заснованих на певних діях, може допомогти підвищити ймовірність того, що користувачі будуть взаємодіяти з ними.

Які елементи дизайну слід враховувати при створенні попапів?


Попапи повинні мати чіткі та лаконічні повідомлення та візуально привабливий дизайн, що поєднується з брендингом вашого сайту. Крім того, їх має бути легко закривати.

В закладки

Захочете отримати юзабіліті-аудит і персональні рекомендації для свого інтернет-магазину — напишіть нам.

Обговоримо ваш проєкт?
Надіслати заявку
Ваше повідомлення відправлено
Наш менеджер зв‘яжеться з вами найближчим часом.
Назад
Упс! Щось пішло не так. Спробуйте ще раз
ДОЛУЧАЙСЯ ДО КОМАНДИ PROMODO ❤️
Надіслати заявку
Ваша заявка відправлена
Наші рекрутери звʼяжуться з вами найближчим часом!
Назад
Упс! Щось пішло не так. Спробуйте ще раз