Контент

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

01 березня ~ 8 хв читати 1603 перегляди
оцінити
Claspo Blog 8 помилок попапів, або чому вам здається, що вони не працюють.

Вас дратують попапи? 73% користувачів стверджують, що негативно ставляться до спливаючих вікон. Але це не заважає маркетологам продовжувати використовувати їх. Чому? Відповідь досить проста – вони працюють!

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

Попапи з'явилися в середині 1990-х років із подачі дизайнера та програміста Ітана Цукермана, який на той час працював у компанії Tripod. Він і не підозрював, що розробив ефективну бізнес-модель, яка дозволила заробляти гроші за рахунок показу інтернет-реклами без безпосереднього розміщення повідомлення на веб-сторінці. І дивлячись на те, як використовують його дітище зараз, Цукерман щиро кається: «Я перепрошую. Ми мали добрі наміри».

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

8 помилок у використанні попапів + антикейси

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

Використання попапів

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

mango shop example.png

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

cocacolanderland example.png

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

Занадто багато даних

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

hellobc example.png

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

example adidas store.png

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

Невдалий час показу

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

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

1.png

 

thredup.png

oldnavygap.png

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

Перевантаженість попапами

Є кілька різновидів спливаючих вікон:

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

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

example puma shop.png

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

Під час досліджень було виявлено, що мобільна версія попапів конвертує краще ніж десктоп майже в 2 рази (5,8% проти 3,11%). Але зробити спливаючі вікна на мобільному user friendly завдання не з простих. Через невеликий розмір екрану будь-який попап займає відносно більше площі, ніж на робочому столі. Крім того, мобільні пристрої передбачають використання "на ходу", а будь-які елементи, що нагромаджують дисплей, будуть тільки заважати цьому.

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

example puma shop mobile.png

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

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

hsbc example.png

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

Недоречний дизайн попапа

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

trendgalleryart example.png

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

Крім того, цікавим висновком після аналізу спливаючих вікон поділилися Sleeknote – попап вікна з картинками конвертують набагато краще, ніж без картинок (3,8% проти 2,07%). Користувачі стають все більш вимогливими до оформлення та якості контенту. Не варто недооцінювати візуальну складову та єдність стилю на вашому сайті. 

Обмеження вибору користувача

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

designer example.png

designer example mobile.png

Навіть невеликий попап може викликати негативний відгук у аудиторії, якщо незрозуміло, як його закрити. 

Ви можете домалювати варіант із ледь помітним хрестиком або дуже дрібним шрифтом, дотримуючись прикладу, наведеного нижче з sumo.com.

example.png

Поганий таргетинг

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

Виключайте з показів форми підписки сторінки реєстрації та чекауту. Користувач і так вже згоден здійснити конверсійну дію, не змушуйте його передумати. 

example puma.png

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

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

Технічні помилки в реалізації попапов

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

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

winesonline example.png

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

Висновок

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

Любіть своїх клієнтів та робіть їх досвід взаємодії з вами максимально приємним. 

 

Вас також може зацікавити
Cart Abandonment.svg
Що таке Floating Bar: 10 прикладів та поради щодо використання

Що таке floating bar Floating bar — це pop-up, який закріплюється зверху або знизу сайту і залишається помітним при скролі сторінки. У Floating bar можна розмістити нагадування про закінчення розпродажу, форму передплати або направити трафік на певний лендинг.  Переваги використання floating bar Ненав'язливість Floating bar не відволікає користувачів від основного контенту сайту і не вимагає додаткових дій, щоб продовжити перегляд сторінки (наприклад, підписатися або закрити форму).  UX-friendly Floating bar містить мінімальну кількість контенту, який не закриває картки товарів, кнопки та...

05 березня 9 хв читати
10 Effective Ways to Grow Your Email List in 2022.svg
10 Ефективних способів розширити свою базу email адрес в 2022 році

В роботі маркетолога це завдання є напевно одним з найважливіших та найпріоритетніших, адже кожному з них зрештою доводиться зіштовхнутися з питанням, де і яким шляхом шукати email адреси для розсилки рекламних кампаній та інших матеріалів. Наведені нижче способи допоможуть Вам збільшити базу підписників використовуючи різноманітні дієві заходи: Створюйте виключно оригінальний контент Активно займайтеся соцмережами Створюйте відеоконтент Надавайте додаткові (бонусні) матеріали Проводьте вебінари Влаштовуйте розіграші  Пропонуйте прокомокоди, знижки, безкоштовну доставку тощо Не соромтесь просити фідбеки Співпрацюйте з блогерами та іншими інфлюенсерами...

25 лютого 13 хв читати