замовити дзвінок
+38 057 782-28-00
замовити дзвінок
Starting a new project?
отримати консультацію
Читайте наш Telegram 👈
179

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

Мета створення pop-up банерів - підштовхнути користувача до подальшої взаємодії з сайтом, зацікавити його зробити потрібну дію.

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

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


1. Функції спливаючих вікон

В середньому, показ pop-up вікна відбувається через 5+ секунд після відкриття сайту читачем.

Головне завдання – привернути увагу і змусити користувача зробити задану дію.
Наприклад, заповнити контактну форму або подивитися/купити товар.

Є багато функцій pop-up вікон, але ми виділимо 3 основні:

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

Гарним стимулом будуть знижки, корисний контент, подарунки. Тут важливий релевантний обмін і чіткий CTA.

Всплывающие окна бонус

Рис. 1 – Приклад бонусу за підписку

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

Всплывающие окна удержание

Рис. 2 – Спроба утримати клієнта

3. Взаємодія, комунікація з читачами. Діє, як додаткова можливість дізнатися вашу ЦА краще (питання, чати, пропозиції вітаються).

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

Рис. 3 – Різні формати взаємодії з читачем


2. Види

Усі pop-up форми можна розділити на кілька видів, відштовхуючись від часу показу:

  • entry pop-up вискакує відразу після входу на сайт або протягом кількох секунд. З його допомогою можна розповісти читачеві про будь-яке важливе оновлення, запросити підписатися, пригостити користувача плюшкою.

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

Рис. 4 – У якості плюшки в цьому прикладі виступає послуга безкоштовної доставки на наступне замовлення

  • scrolled, timed pop-up показуються через деякий час після того, як відвідувач зайшов на сайт, або в процесі прокручування сторінки. Можна показати форму для введення номера телефону, в процесі читання розділу FAQ або запропонувати знижку при перегляді прайс-листа. Найчастіше, показ вікна відбувається після перегляду половини сторінки.
  • exit pop-up або вікно прощання демонструється перед закриттям сайту і містить пропозицію зайти в інший розділ, подивитися додаткові товари, нагадає про те, що у вас є знижка. Іноді за переміщеннями курсора стежить програма і виводиться відповідне повідомлення, щоб зацікавити читача ще затриматися на сайті.
  • click pop-up з’являється після натискання на який-небудь елемент сторінки. Наприклад, при замовленні дзвінка. Зручність такого формату в тому, що читача не перекине на окрему сторінку, а значить, він повернеться в те саме місце, де зупинився до заповнення форми.

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

Рис. 5 – Вікно по натисканню. Після введення даних можна повернутися до споживання контенту з того місця, де зупинилися


3. Місця розміщення

Pop up вікна можуть знаходитися в будь-якій частині сайту:

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

Всплывающие окна два сразу

Рис. 6 – Два спливаючих вікна (одне закриває інше)

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

Спливаючі вікна Pop-up

Рис. 7 – Pop-upи зліва і справа або не закривають контент взагалі, або роблять це по мінімуму

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

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

Рис. 8 – Від стилю виконання спливаючого вікна може залежати реакція читача

Спливаюче вікно можна помістити в будь-яку частину сторінки та наповнити потрібним для вас вмістом.


4. Переваги та недоліки спливаючих вікон

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

Переваги pop-up вікон:

1. Можливість швидко привернути увагу. Будь-який елемент, який з’являється на сторінці, мимоволі перетягує на себе погляд користувача.

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

Всплывающие окна вебинар

Рис. 9 – Запрошення дізнатися більше про вебінар з контент-маркетингу

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

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

Рис.10 – Реклама телевізора з власного асортименту в інтернет-магазині техніки

Недоліки:

  1. Вікна стомлюють своєю нав’язливістю, іноді доводиться закривати кілька відразу. У підсумку, це може істотно знизити відвідуваність сайту.
  2. Якщо користувач встановлює в браузері розширення для блокування реклами (воно ж блокує і спливаючі повідомлення – Ad Blocker або ін.) або забороняє показ таких вікон через налаштування браузера, то користувач не побачить ваше повідомлення взагалі.
  3. Падіння рівня довіри, лояльності до порталу. Якщо спливаючих повідомлень занадто багато, то відвідувачі почнуть вважати їх спамом і будуть менше довіряти, як наслідок, рідше конвертуватися в ліди.

5. Поради щодо створення спливаючих вікон

Створити спливаюче вікно можна самостійно з використанням HTML, CSS, JavaScript. Ми дамо кілька порад, які допоможуть вирішити, яке оформлення і текст найкраще спрацюють.

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

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

Рис. 11 – Використання фірмових кольорів в шапці спливаючого вікна (праворуч знизу) викликає відчуття цілісності сторінки

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

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

Рис. 12 – Одразу зрозуміло, яка величина знижки

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

Всплывающие окна плохая форма

Рис. 13 – Форма виглядає непогано, але незрозумілі ні діапазон знижок, ні перелік товарів, на які знижки будуть поширюватися

Всплывающие окна полный экран

Рис. 14 – Повноекранна форма з пропозицією індивідуального плану дій по збільшенню трафіку від Ніла Пателя. Дуже приваблива пропозиція!

3. Креативність. Більшість спливаючих банерів повторюють один одного: оформлення та текст змінюються, але при цьому сказати, що ці елементи сильно відрізняються – не можна. Замість тривіальних повідомлень “підпишіться на наші оновлення”, проявіть увагу до відвідувачів сайту: персоналізуйте пропозицію, додайте інтерактивності у pop-up.

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

Рис. 15 – Виберіть зручний для себе час дзвінка від фахівця

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

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


6. Ставлення пошукачів до спливаючих вікон

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

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

З лютого 2018 року Google Chrome закриває від показу майже всі повідомлення, за винятком кількох видів. Це ще один крок компанії в напрямку поліпшення користувацького досвіду. Так, це досить агресивний метод, але Google категорично проти ресурсів, завалених рекламою, і яка заважає споживати контент.

За участю 100000+ осіб проводяться дослідження і виявлені 13 найбільш нав’язливих видів реклами.

До них відносяться:

  • повноекранні повідомлення;
  • спливаючі вікна;
  • великі повідомлення в нижній частині сайту, які займають більше 30% сторінки;
  • повноекранні pop-upи на мобільних до завантаження сайту та ін..

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

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

Рис. 16 – Святкова знижка на підписку


Висновок

У назві статті лунало запитання: корисні чи шкідливі спливаючі вікна? Однозначно вони корисні, але тільки при правильному виконанні. Пропозиція повинна зацікавлювати користувача, а не змушувати око сіпатися.

Впровадження спливаючих вікон може збільшити кількість контактів і конверсій у 2 і більше разів. З повноекранними банерами та місцем розміщення варто бути обережним, так як це може подобатися вам, але не вашій ЦА. А адже на неї й потрібно орієнтуватися. Тому потрібно впроваджувати різні варіанти спливаючих вікон, стежити за реакцією аудиторії, і пропонувати їм не тільки красиву картинку, але і чітку і, разом з тим привабливу пропозицію.


Як SEO-спеціалісту створити ідеальне резюме та супровідний лист?

Каннібалізація ключових запитів

Як стати сеошником?

Підпишіться на наші оновлення
Більше корисних статей та мануалів ще попереду. Будьте в курсі

Ви вже підписані на нашу розсилку!

Підтвердіть свій email для завершення підписки.

Замовити
просування
Більше корисних статей та мануалів ще попереду. Будьте в курсі

Дякуємо! Скоро з вами зв'яжеться наш менеджер.