Спливаючі вікна на сайті: як зацікавити ваших користувачів

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

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

І ось тепер змушені визнати – ми були не праві. Не зовсім праві, якщо бути точними. Інструмент ефективний і має місце бути, але треба вміти його правильно використовувати. =)

Для початку розберемося в основних моментах. Існує дві технології спливаючих вікон:

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

Попандер (Pop-Under) – коли при переході на сайт з’являється банер, але не заважає відвідувачу взаємодіяти з сайтом.

Багато плутають і називають всі спливаючі вікна попапами, але тепер-то ви знаєте, що до чого, і не помилитеся.

Для чого можна використовувати:

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

Основні елементи, які має містити спливаюче вікно:

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

Приклад спливаючого вікна:

Рекомендації по контенту

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

1. Корисним. Знижка 5% або 100 рублів на баланс навряд чи когось притягнуть, тому пропонуйте цікаві бонуси.

Від такої пропозиції важко відмовитися:

2. Доречним. Не потрібно в книжковому розділі пропонувати купити купальники або автозапчастини. Також сумнівно виводити спливаюче вікно на Головній, коли користувач тільки зайшов на сайт. Дайте йому час вивчити основну інформацію, перейти на потрібну сторінку.

Хороші варіанти

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

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

Наша форма підписки, яка з’являється внизу статті:

3. Зрозумілим. Коротко і прозоро викладіть суть пропозиції. Довгі повідомлення і невиразні умови відштовхують. Обов’язково вкажіть вигоду для клієнта.

Лаконічні речення:

• «Даруємо 1 000 рублів за підписку на наші новини» + форма підписки.
• «Знижка 20% на перший замовлення» + форма реєстрації.
• «Подивіться схожі товари зі знижкою» + посилання на відповідний розділ.

Пропозиція занадто загальне:

Приклад лаконічного тексту:

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

Напис внизу не відразу помітна:

Симпатично і по справі:

5. З можливістю відмовитися. Кнопка «Закрити» повинна бути помітна і зручна для кліка.

Кнопка закриття не відразу помітна:

Помітна невелика кнопка:

6. Ненав’язливим. Показуйте пропозицію кожному користувачу один раз. Можна повторювати показ не частіше разу на тиждень.

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

Занадто великий і яскравий банер, та ще друге вікно нижче:

Теж яскравий, але ненав’язливий приклад спливаючого вікна на сайті:

Технічні особливості

Додати спливаючі вікна на сайт:

• За допомогою HTML і JavaScript.
• Застосовуючи плагіни для вашої CMS. Наприклад, якщо у вас сайт на WordPress, то для нього є готові плагіни ITRO Popup Plugin, Optinmonster, YITH Newsletter Popup та ін.
• Використовуючи готові сервіси: Witget, PopMechanic, CartProtector та ін.

Основні параметри:

• Показ вікна після певного часу. Оптимальний час – 30-90 секунд, коли користувач вже вивчив основну інформацію на сторінці.
• Повідомлення для нових користувачів. Як і для попереднього способу, краще почекати трохи часу, щоб не відштовхувати відвідувача. Рекомендуємо пропонувати великий бонус за реєстрацію або перший замовлення. Такий варіант особливо підійде для Головної сторінки.
• Висновок вікна після прокручування до певного місця сторінки. Хороший варіант для статті, коли користувач прочитав її повністю, або для сторінки каталогу, коли користувач дійшов до кінця списків товарів і нічого не вибрав. Можна показувати повідомлення трохи раніше, після прокручування 50-70% сторінки.
• Показ перед закриттям сайту. Коли курсор прямує в бік закриття вкладки можна також показати спливаюче вікно.
• Повідомлення для повернулися користувачів. Відвідувач вже явно зацікавлений у вашому продукті, тому чому б не розповісти йому про додаткові можливості.

Ще порада: не намагайтеся обійти системи блокування. Якщо клієнт використовує Adblock або інші блокувальники реклами, то це його право.

Аналітика

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

Ще рекомендуємо тестувати різні варіанти, щоб зрозуміти інтереси вашої аудиторії, наприклад, можна пропонувати різні бонуси за підписку. Рекомендуємо інструмент Google Analytics – «Експерименти», але для установки знадобиться залучити програмістів.

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

Відношення пошукових систем

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

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

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

В цілому пошукові системи не проти спливаючих вікон, якщо вони корисні для користувача.

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

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