Pop-up: техніки, приклади та стратегії використання

Що таке Pop-up

Pop-up – це елемент інтерфейсу, який відображається поверх решти елементів у вікні браузера. Він може з'являтися без запиту користувача або за кліком на певний елемент сторінки.

Приклад вітального попапа зі знижкою за реєстрацію на сайті онлайн-магазину magnolia.com:

Для яких цілей використовують попапи:

• залучення нових підписників;
• збір даних про користувача (емейл, телефон, кукі та інше); 
• повідомлення про новини; 
• надання техпідтримки; 
• показ реклами; 
• збір заявок клієнтів;
• отримання зворотнього зв'язку (опитувальники). 

Але все ж таки основна мета попапа – збір нових контактів для подальшого використання у комунікації за допомогою retention-каналів. Часто для мотивації залишити дані користувачам пропонується натомість бонус або знижка. 

Яку б мету ви не мали, головне завдання попапа – збільшення конверсії.

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

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

Чому попапи працюють

Попапи – досить популярний інструмент, який показує високу ефективність, незважаючи на історію появи та асоціації у користувачів.

Вся справа в тому, що за їх допомогою користувач може вирішити відразу кілька своїх завдань, а саме:

• отримати бонус/знижку до покупки;
• підписатися на новини (уникнувши необхідності довгої реєстрації або пошуку де це можна зробити);
• якщо дозволяє логіка попапа, вказати додаткові дані про себе, тим самим дозволивши маркетологам використовувати сегментацію та готувати більш релевантний контент для користувача;
• та багато інших завдань, які розглянемо пізніше.

Також нижче наведено дослідження різних сервісів щодо використання попапів.

Сервіс SUMO провів низку досліджень та тестів на основі понад 2 млрд. спливаючих вікон. У середньому конверсія у підписника була на рівні 3,1%, а у деяких випадках – близько 9,3%. За таких показників навіть 100 відвідувачів сайту на день конвертуватимуться від 92 до 274 передплатників на місяць за допомогою попапа.

Aweber з'ясував, що заміна форми підписки з бічної панелі на спливающе вікно збільшила кількість підписників на 1375%.

А Sleeknote надав вичерпні дослідження різних попапів, нижче представлений ​​короткий виклад за кількома параметрами:

1. Попап з картинкою ефективніший на 83,57%, ніж без картинки;
2. Використання таймера перед показом попапа показало ефективність на 112,93% порівняно з попапом, що показується одразу при завантаженні сайту;
3. Рекомендується використовувати до 2 полів для заповнення у спливаючій формі. Таке рішення обумовлено тим, що менша кількість полів ефективніша в середньому на 206,48%;
4. Спливаючі вікна конвертують краще на мобільних пристроях, ніж на десктопі. Ефективність вища на 48,37%.

Кейси агентства Promodo також доводять, що попапи ще не віджили своє. Розглянемо статистику використання попап-інтерактивів у Ecommerce. Їх проводили у різні місяці та на різні періоди, тривалістю до 2 місяців. 

Наприклад, активність "Рулетка" до розпродажу Black Friday:

Ціль: збір емейлів за можливість виграти приз, покрутивши рулетку.

За місяць проведення інтерактиву кількість підписників збільшилася на 10%, дохід зріс на 25% (щодо середніх щомісячних показників поточного року).

Реалізація такого попапа, крім рулетки, має інші варіанти, наприклад:

• скрині 1 з 3;
• GiftBox;
• скретч-карта та інші формати ігрових механік.

Подібні pop-up активності викликаються на сайті за кліком на невеликий елемент сайту – плашку зі зрозумілим закликом до дії, наприклад:

Стратегії використання Pop-up

Розрізняють 2 основних види попапів:

1. Hello-board – який перекриває лише частину контенту сайту, не блокуючи взаємодію з сайтом. Користувач може відреагувати або закрити спливаюче вікно, що менш дратівливо.
2. Page-stop – який повністю перекриває собою сторінку, не даючи взаємодіяти з сайтом, поки відвідувач не здійснить цільову дію або не закриє вкладку. Такий попап викликає значно більше роздратування, але з тим самим досить ефективно конвертує.

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

1. Welcome Pop-up

Спливає відразу після завантаження сторінки. Попапи такого типу можна застосовувати для оповіщення про щось важливе. У цьому прикладі George повідомляє про можливість доставки товарів у країну покупця.

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

2. Timed Pop-up

З’являється через певний час після того, як користувач зайшов на сторінку. За допомогою такого попапа можна пропонувати підписку, відвідати інші розділи сайту, надавати демо-доступи тощо. Zara Home радить підписатися на їх розсилку, щоб отримувати останні новини з перших вуст.

Переваги. Можливість налаштування періоду до появи попапа. Попапи такого типу ефективні за рахунок того, що дають можливість показати форму через деякий час, коли користувач вже трохи ознайомився з сайтом і, можливо, перейшов на сторінку потрібної категорії/товару. У такий спосіб можна реалізувати категорійні попапи і надалі сегментувати базу. Головне пам'ятати, що час до появи попапа не повинен бути занадто затягнутим. 

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

3. Scroll Pop-up

Попап з'являється під час пролистування сторінки, коли відвідувач досягає певного місця. Або, як у випадку PrettyLittleThing, замінює банер при скролінгу сайту. Такий попап рекомендується закріплювати на екрані. Інакше при швидкому скролінгу є ризик не помітити пропозицію.

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

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

4. Exit Pop-up

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

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

Недоліки. Занадто часто поява такого вікна може викликати негатив у користувача, тому необхідно обмежувати частоту показу на одного користувача, наприклад через cookie.

5. Click Pop-up

Спливає після того, як користувач клікне на відповідний елемент на сайті. Попапи такого типу можна поєднувати з Timed Pop-up або Scroll Pop-up.

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

Недоліки. Використання занадто великої кількості елементів на попапі може збивати з пантелику користувача, відволікати від оформлення покупки. Також користувач може не помітити елемент, на який необхідно клікнути.

6. Slide-In Boxes Pop-up

Цей тип попапа розміщується збоку екрана та висувається при наведенні на нього.

Переваги. Ненав'язливий попап, до якого можна додати вигідну пропозицію.

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

Практичні поради щодо використання Pop-up

При підготовці попапа рекомендуємо дотримуватися кількох простих правил:

1. Зрозумілий заклик. Користувач із перших секунд повинен зрозуміти суть пропозиції та яких дій очікують від нього. Немає потреби перевантажувати форму зайвими полями. Зазвичай попап має невеликий розмір, необхідно розумно використовувати його. Наприклад: залишити емейл в обмін на знижку.
2. Коректне відображення на всіх пристроях. Важливо передбачити, що більшість користувачів відвідує сайт з мобільних пристроїв. Тому всі елементи повинні бути помітними, зручними для заповнення, коректно відображатися і перебудовуватися під пристрій будь-якого розміру.
3. Логіка показу. Показ форми у потрібний час у потрібному місці з релевантним контентом дасть найкращу ефективність. Налаштовуйте виключення показу форми на окремих сторінках для користувачів, які раніше залишали дані.
4. Гармонійний візуал. Витримуйте єдиний стиль, не намагайтеся привернути увагу яскравими контрастами. Зробіть елементи зрозумілими та читабельними, щоб користувачеві ніщо не заважало взаємодіяти з формою.
5. Також рекомендуємо уникати нав'язливості, повторних, нерелевантних показів, які будуть лише дратувати та відволікати користувача. Ніщо не повинно заважати користувачеві закрити вікно та продовжити взаємодію з сайтом.

Висновок

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

Кожен бізнес є унікальним. Немає єдиного способу вирішення того чи іншого завдання, який працюватиме скрізь однаково ефективно. Тому необхідно постійно проводити А/В тестування, доопрацьовувати логіку показу, пробувати нові механіки та комбінувати їх задля досягнення найбільш якісного результату. І не забувайте аналізувати поведінку користувачів на сторінці: скільки часу провели, куди натискали, чим цікавилися та на якому моменті закрили вікно.