Що таке теплові карти та яка їх роль у маркетингу?
Щоб сподобатися користувачам та поліпшити досвід взаємодії, бізнеси чимало уваги приділяють розробці вебсайту. Сьогодні на сайті, окрім цільового вмісту (асортимент товарів чи послуг), обов’язково повинні бути зручний інтерфейс, цікавий та корисний контент, зрозумілі форми та привабливі Call to Action (CTA або кнопки заклику до цільової дії — тобто конверсії). Виявити, на скільки користувачам цікавий той чи інший елемент, можна за допомогою теплових карт сайту.
Що таке теплова карта?
Теплова карта вебсайту — це інструмент вебаналітики, який показує, як саме користувачі взаємодіють з вашим вебресурсом, як переміщуються між вебсторінками та на які розділи, блоки або кнопки натискають найчастіше.
Теплова карта (heatmap) візуалізує зібрані статистичні дані дій відвідувачів на площині сайту. Різними кольорами на ній виділені холодні (з меншою) та гарячі (з більшою кількістю взаємодій).
У маркетингу також розрізняють теплові карти території. Вони визначають популярність геофізичної локації серед вашої ЦА. Їх використовують для прогнозування попиту у локальному чи мережевому магазинах на певній місцевості, салонах краси, фінансових організаціях або інших бізнесах, які мають фізичну представленість.
У контексті цієї статті ми будемо розглядати лише теплові карти сайту як аналітичні інструменти.
Приклад теплової карти кліків з сервісу Mouseflow
Навіщо використовувати теплові карти у маркетингу?
Найбільше значення heatmaps відіграють саме для CRO, допомагаючи виявити «сильні» та «слабкі» місця вебсайту. Розуміння поведінки користувачів дозволяє:
- Виявити місця з низькою конверсією — елементи, які відвідувачі оминають або клікають найменше.
- Покращити UX/UI-дизайн — карти допомагають знайти неочевидні недоліки або помилки, які ускладнюють інтерфейс сайту та заважають користувачам виконати бажану дію, побачити потрібну інформацію.
- Визначити найкраще місце для розміщення CTA.
- Дослідити послідовність кліків — наприклад, які ланцюжки частіше приводять до конверсії.
- Проаналізувати динамічні елементи — чи привертають вони очікувану увагу користувачів.
- Виявити слабкі зони вебсторінки, тобто ті, на яких відвідувачі найчастіше залишають сайт.
- Детальніше інтерпретувати результати A/B-тестування.
Типи теплових карт
Залежно від даних, які візуалізують на карті, розрізняють різні види heatmaps:
- Теплова карта кліків (Click Heatmaps) показує, на які елементи сторінки клікають користувачі. Це найпоширеніший вид карт. Він допомагає вивчити популярні частини вебсторінки, проаналізувати кліки на конкретний банер, розділ меню або кнопку цільової дії. На карті кліків з навчальних матеріалів Microsoft червоними плямами позначено елементи, на які найчастіше натискають. Бокова ліва панель ранжує ці елементи за кількістю кліків.
Приклад карти кліків з бази знань Microsoft
- Карта скролінгу (Scroll Heatmaps) дозволяє дізнатися, наскільки далеко вниз відвідувачі прогортали вашу сторінку, чи дочитали матеріал до кінця. Метрика корисна для лендінгів (де вся інформація розміщена послідовно на одній сторінці), блогів та інших інформаційних ресурсів. На відміну від карти кліків, де виділено лише популярні області (на малюнку справа), Scroll Heatmaps демонструє зонований розподіл. Червоний колір показує найбільшу кількість переглядів, а зелено-блакитні відтінки – найменшу (на малюнку зліва).
Приклад-порівняння карт кліків і скролінгу з сервісу Hotjar
- Карта активності мишки (Mouse Movement Heatmaps) візуалізує дані наведення курсора без здійснення кліку. Це допомагає перевірити, чи користуються відвідувачі додатковими елементами вебдизайну — наприклад, можливістю збільшити фото при наведенні на нього, прочитати додаткову інформацію, яка схована під спеціальною позначкою тощо. На прикладі з сервісу Fulsession зображені кольоровими плямами місця, на які найчастіше наводять користувачі.
Приклад карти активності мишки з сайту fullsession.io
- Відеозапис сесії — це запис сеансу користувача зі всіма його діями на сайті. Може тривати від кількох секунд до годин (наприклад, якщо вкладку забули закрити). Метод використовують рідше у порівнянні з попередніми метриками. Аналіз відеозаписів потребує багато часу.
- Карта уваги (Attention Heatmaps) — це загальна візуалізація розподілу уваги користувачів по площині вебсторінки. Найчастіше певним кольором виділяють області, на які звертали менше або більше увагу. Метрика заснована на різних показниках та прогностичному аналізі ШІ. Карта уваги дає зрозуміти, в яких частинах вебсайту краще розміщувати важливу інформацію. На карті сервісу AttentionIngsight кольорами від теплих до холодних показано області, які привертають найбільше уваги. Алгоритм на основі ШІ також визначає, який відсоток уваги отримує кожна ділянка.
Приклад карти уваги з сайту AttentionInsight
Як впровадити теплову карту на сайт?
Щоб відстежувати дані, у сервісні файли сайту прописують спеціальну програму (скрипт), який надають сервіси візуалізації теплової карти:
Огляд кожного сервісу для створення heatmaps читайте в окремій статті.
Після встановлення скрипт може уповільнювати завантаження, як мобільної, так і десктопної версій. Також варто враховувати, що навантаження на сайт можуть збільшувати інші програми для вебаналітики, зокрема Google Tag Manager, Facebook Pixel.
Як уникнути сповільнення сайту:
- Спробувати інший скрипт (у кожного сервісу для створення карт сайту своя програма);
- На деякий час відмовитися від іншого інструменту аналітики;
- Під’єднати кешування (збереження сторінок, які часто відвідують на сервері вебсайту або у браузері клієнта);
- Підібрати скрипт, який буде завантажуватися асинхронно відносно інших елементів сторінки.
Важливо! Подивитися карту кліків сайту конкурентів неможливо, оскільки потрібно мати доступ до головних файлів на сервері вебсайту.
Наостанок: інсайти CRO, виявлені за допомогою теплових карт
Теплові карти — інструмент для аналізу та узагальнення поведінки користувачів на сайті. Вивчаючи Heatmaps на різних вебресурсах, фахівці з CRO та SEO-спеціалісти виявили закономірності, які можна використовувати для оптимізації сайту.
- Розміщуйте важливу інформацію у верхній частині сторінки. 57% свого часу перегляду сторінок відвідувачі витрачають на верхню частину. На перші два екрани в цілому йде 74%.
- Використовуйте «правило літери F» («F-layout») під час наповнення сайту. Користувачі починають читати горизонтально по верхній частині області вмісту, утворюючи верхню панель літери «F», далі переміщуються вниз до другої смуги, а наостанок переходять до вертикальної основи.
Приклад вигляду F-layout на тепловій карті з сайту writefulcopy
- Уникайте типових рекламних місць, щоб передати важливу інформацію. Найчастіше банери розміщують зверху і справа, тому на ці місця користувачі звертають найменше уваги. Дослідження Nielsen Norman Group показує, як виглядає банерна сліпота на тепловій карті.
- Намагайтесь не використовувати анімовані заголовки. Ще одне дослідження NN/g розповідає, що людей дратують заголовки з анімацією та каруселі з автоматичною зміною банерів. Шанс побачити потрібний товар або послугу пропорційно зменшується до кількості зображень в каруселі.
- Використовуйте принцип контрастного дизайну (інша колірна гама, додаткові елементи), щоб привернути увагу відвідувачів до потрібного продукту на сторінці.
