6 принципів, як розробити дизайн спливаючого вікна, а також приклади попапів
13.02.2023
Спливаюче вікно на сайті або поп-ап із заманливою пропозицією може збільшити коефіцієнт конверсії в рази. Але потрібно продумати дизайн спливаючого вікна. Головна функція pop-up — привернути увагу, «зачепити» потенційного клієнта.
Існують думки, що спливаюче вікно викликає роздратування у аудиторії. Проте доля потенційних клієнтів все таки позитивно реагує на «спокусливі» пропозиції. Варто зосередитися на власному досвіді, створити попап та проаналізувати результат, в також переконатися, що це дійсно працює.
Якщо ви ще не усвідомили усі переваги попапу, тоді пропонуємо ознайомитися з ключовими принципами створення та розробки спливаючого вікна, які допоможуть збільшити продажі та поповнити базу контактів. Розбираємо приклади спливаючих вікон на українських сайтах.
Зміст:
1. Чому це важливо? Цілі pop-up
2. Ключові фактори при розробці спливаючого вікна
- Переконлива чітка пропозиція та простий меседж
- Чіткий заклик до дії (CTA)
- Правильно підібрані кольори
- Візуальні засоби
- Менше полів для заповнення форми
- A/В тестування
3. Висновок
Чому це важливо? Цілі pop-up
Чому важливо витрачати час на розробку дизайну спливаючого вікна, адже головне тут пропозиція, а не дизайн. Але так відповідають недосвідчені маркетологи.
Звичайно повідомлення має велике значення, тому в пропозиції зосереджена цінність. При цьому, спливаюче вікно з’являється нізвідки і має лише 1-2 секунди для того, щоб зачепити. Справити приємне враження та підкорити користувача сьогодні — задача не з простих, тому що пропозицій в інтернеті безліч, а аудиторія стає більш вимогливою та примхливою. Тому яскравий та гарний дизайн може підвищити ефективність будь-якого повідомлення.
Цілі спливаючого вікна pop-up:
- Лідогенерація. Спливаюче вікно — це простий спосіб розширити базу контактів, а далі постійних клієнтів. В обмін на знижки, спеціальні пропозиції або цікаві статті, ви отримуєте дані користувачів для подальшої комунікації. Спливаюче вікно — один із ефективних інструментів для генерації лідів на сайті.
- Інформування. За допомогою попапу можна розміщувати важливу інформацію про компанію, новини, заходи, які плануються.
- Утримання клієнта на сайті. Будь-які деталі, які можуть зацікавити потенційного клієнта, працюють вам на руку. Спливаюче вікно з персональною знижкою «тільки для вас і саме сьогодні» дозволить бренду виграти час перед тим, як користувач вийде з сайту ні з чим.
- Збільшення продажів. Усі подібні «маніпуляції» зводяться до кінцевого підрахунку фінансів. У випадку зниження об’ємів продажів, спробуйте зробити попап на сайті і побачите, як зміниться ситуація на краще. Обмеженні пропозиції, безкоштовні вебінари або пробні уроки у спливаючому вікні — все це дає результат.
Якщо на сайті є унікальне та яскраве спливаюче вікно, це можливість значно підвищити коефіцієнт конверсії.
Достатньо оформити вже існуючу пропозицією зі знижкою наприклад у 10% в поп-ап. Ви отримаєте з цього значно більше прибутку, підписників та бажаючих спробувати. Але головне — правильний дизайн!
Ключові фактори при розробці дизайну спливаючого вікна
Розберемо найважливіші складові попапу. Як їх правильно задизайнити, оформити та розташувати, враховуючи обмеження місця спливаючого вікна?
Переконлива чітка пропозиція та простий меседж
Вікно з пропозицією «Підписати на розсилку» вже нікого не дивує. Інструмент давно використовують більшість маркетологів для збору бази контактів. Тому треба включати фантазію та додати оригінальності, оживити його за допомогою переконливої цікавої пропозиції, яка точно зачепить майбутнього клієнта.
Постає питання, що робить пропозицію переконливою? Поставте себе на місце користувача та запитайте, що він отримає, підписавшись на вашу пропозицію. Наприклад, унікальний промокод зі знижкою на курс навчання таргетованої реклами.
Оскільки у вас обмежений час на те, щоб привернути увагу та зацікавити, повідомлення спливаючого вікна має бути максимально простим і зрозумілим. Прибирайте неважливі елементи та ріжте кожне зайве слово. Головна цінність дизайну попап — пропозиція та кнопка с закликом до дії CTA. Більшість користувачів прочитають лише кілька слів перш ніж закрити вікно. Саме тому дизайн та меседж дають такий же ефект та вплив, як і заголовок. Приклад лаконичного спливаючого вікна від Аптека 9-1-1:
Чіткий заклик до дії (CTA)
CTA або call to action повідомляє користувачу, яку саме дію він повинен виконати. У спливаючому вікні pop-up це зазвичай кнопка або коротка форма. Для того, щоб CTA працював, візьміть до уваги наступні умови:
- Використовувати командні слова, які відповідно і дають завдання. Це найпростіші слова, наприклад заповнити, купити, отримати та підписатися. Але вони дійсно спонукають до дії.
- Лаконічний CTA. Ідеальний заклик спливаючого вікна — чим менше, тим краще. Зокрема, коли мова заходить про CTA, кілька слів допомагають надіслати чітке повідомлення — 2-5 слова буде достатньо.
- Чіткий та розбірливий CTA, який легко читається. Підбирайте читабельний шрифт.
- Терміновість. Застосовуйте FOMO (fear of missing out — синдром втраченої можливості) та обмежте кількість реєстрацій або встановіть кінцевий термін пропозиції тощо. Якщо ви проводите сезонні розпродажі, радимо оновлювати повідомлення сезонами. Релевантність і своєчасність створює відчуття, що пропозиція обмежена в часі.
Hillel IT School скористався можливістю для розробки тематичного попапу до Дня Святого Валентина. CTA спливаючого вікна вказує на дію «Пройти тест» для отримання знижки до 1000 грн на навчання. При цьому мотивує, чим більше правильних відповідей, тим більше знижка:
Правильно підібрані кольори
На жаль, немає єдиного рецепту як комбінувати відтінки, які на 100% конвертують. Тому обираючи колір для pop-up, треба зважати на кілька факторів:
- враховуйте стилістику всього сайту, бренду загалом. Краще підібрати відповідні кольори, щоб створити послідовний та плавний досвід у користувача. Попап — це не окремий елемент, а частина вашого сайту. Потрібно зберігати напрямок та підібрати схожі форми, які можливо вже використовуються, наприклад шрифти чи логотип представлених брендів. Приклад попапу на нашому сайті Webpromo:
- створити контраст, за допомогою чого привернути увагу до найважливіших елементів. Незважаючи на єдину стилістику, дизайн спливаючого вікна має контрастувати на фоні іншого контенту. Переконайтеся, що колір кнопки CTA виділяється, а сама кнопка велика та розбірлива. Заголовок і CTA — це два найважливіших елементи спливаючого вікна, які повинні мати яскравий контраст. Якщо плануєте створити дизайн для кількох кнопок, можна використовувати різні кольори для кожної з них, щоб підкреслити основний заклик до дії, непомітно вказуючи користувачам, який варіант є кращим для них. Приклад школа англійської Green Forest:
Візуальні засоби
Згідно дослідженню, людський мозок обробляє зображення в 60 тис. разів швидше, ніж текст. Тому візуальні елементи підвищують ефективність обміну повідомленнями. Мета полягає в тому, щоб вибрати правильні візуальні елементи для посилення написанного повідомлення. Слід лише підібрати правильне зображення, релевантне вашому повідомленню.
Якщо на фотографіях в pop-up товари виглядають цікаво чи корисно, люди з більшою ймовірністю купуватимуть їх або підпишуться на розсилку через email або SMS в обмін на знижки.
Використання різних розмірів шрифту — це також найпростіший спосіб зосередити увагу аудиторії на суті спливаючого вікна. Навіть якщо у вас є кілька типів тексту в одному спливаючому вікні, використовуйте розмір шрифту, кольори та інші методи, щоб підкреслити основну цінність повідомлення.
Також спробуйте повноекранну версію спливаючого вікна, що покриває 100% екрана. Таким чином спливаюче вікно буде видимим.
Вставлення додаткових елементів дизайну pop-up, наприклад стрілки, які вказують на кнопку заклику до дії також дієвий спосіб. Це можуть бути яскраві, намальовані від руки об’єкти спрямованості, щоб підкреслити заклик до дії.
Ще один спосіб підкреслити свою пропозицію за допомогою дизайну спливаючих вікон — це використовувати незвичайні форми шаблонів, наприклад створити кругле спливаюче вікно. Такий метод порушує шаблони типових прямокутних спливаючих вікон, які люди постійно бачать, що привертає інтерес за рахунок унікальності.
Інтернет-магазин Stylus електроніки розробила спливаюче вікно у вигляді коробки з подарунком.
Натиснувши на нього ви потрапите на окрему сторінку з пропозицією підписатися та зіграти у гру.
Менше полів для заповнення форми
Не випадково, що більшість прикладів спливаючих вікон вимагають лише адреси електронної пошти для підписки. Один-два поля означають менше зусиль для відвідувачів, що робить процес вибору швидким і безболісним. Збереження кількох дорогоцінних секунд із меншою кількістю полів може бути різницею між новим підписником і потенційним клієнтом, який повернувся. Приклад повноекранного попапу на сайті інтернет-магазину білизни Intimo:
A/В тестування
Як говорили раніше, не існує ідеального дизайну спливаючого вікна, яке буде подобатися усім. Є процент аудиторії, яка не звертає уваги на попап та одразу закриває його. Проте ви можете тестувати окремі елементи дизайну спливаючого вікна, зокрема:
- Заголовки;
- Вид кнопки CTA;
- Пропозиція — що ви насправді пропонуєте у спливаючому вікні.
Висновок
Попап на сайті це хороший спосіб для швидкого збору бази контактів, підвищення коефіцієнту конверсії та залучення аудиторії. Спливаюче вікно стимулює користувача зробити додаткову дію: підписатися на розсилку, отримати знижку в обмін на номер телефону або email. Все це наближає його до покупки.
Дизайн спливаючого вікна pop-up допомагає привернути увагу. Більшість попапів користувач закриває на перших секундах. Створення яскравого та унікального спливаючого вікна дає шанс на те, що користувач все таки затримується, прочитає пропозицію та натисне кнопку купити, підписатися, отримати тощо.
