Heatmapa: co to jest?

Co to jest heatmapa

Heatmapa, czyli mapa ciepła (po angielsku „heatmap”), to obraz Twojej strony, na którym kolorem widać, gdzie ludzie klikają i jak daleko przewijają. Na czerwono to, co przyciąga uwagę i kliknięcia, na niebiesko to, co wszyscy pomijają.

Przykład z życia firmy

Właściciel warsztatu samochodowego ma na stronie duży przycisk „Cennik”, a niżej mały numer telefonu. Heatmapa pokazuje coś odwrotnego niż myślał: prawie nikt nie klika w cennik, za to wszyscy klikają w numer telefonu, klikają nawet w sam napis, choć to nie link. Przenosi telefon na samą górę i robi z niego klikalny przycisk. Liczba połączeń rośnie o jedną trzecią, bo dał ludziom to, czego naprawdę szukali.

Dlaczego to dla Ciebie ważne

Bez heatmapy projektujesz stronę na wyczucie, a wyczucie właściciela rzadko pokrywa się z tym, co robi klient. Mapa ciepła pokazuje realne zachowanie, nie Twoje założenia, i wyłapuje miejsca, gdzie tracisz ludzi, choć strona wygląda dobrze.

Jak to wykorzystać

Włącz heatmapę na najważniejszej stronie, tej, która ma sprzedawać albo zbierać kontakt. Zobacz, dokąd ludzie docierają i w co klikają. To, co wszyscy pomijają, przenieś wyżej albo wywal; to, w co klikają najmocniej, zrób większe i wygodniejsze.

Heatmapa po angielsku i rodzaje

Heatmapa to po angielsku heatmap, czyli mapa cieplna. To obraz strony, na którym kolory pokazują, gdzie użytkownicy najczęściej klikają, jak daleko przewijają albo gdzie przesuwają kursor. Ciepłe kolory oznaczają dużo aktywności, zimne mało. Najczęstsze rodzaje:

• Mapa kliknięć: gdzie ludzie klikają, także w elementy, które nie są klikalne.
• Mapa przewijania: jaki odsetek osób dociera do kolejnych części strony.
• Mapa ruchu kursora: gdzie przesuwa się mysz na komputerach.

Narzędzia i prywatność

Popularne narzędzia to Microsoft Clarity, które jest darmowe, oraz Hotjar. Zbierają one dane o zachowaniu użytkowników, dlatego w UE wymagają zgody w banerze cookies, a Clarity od 2025 roku wymaga przekazywania sygnału zgody w regionie EOG. Warto też maskować pola formularzy, żeby narzędzie nie zapisywało wpisywanych danych.

Przykłady z różnych branż

• Sklep internetowy. Mapa kliknięć pokazuje, że klienci klikają w zdjęcia produktów w oczekiwaniu na powiększenie, którego nie ma. Sklep dodaje galerię.
• Usługi. Mapa przewijania na stronie gabinetu pokazuje, że tylko co piąta osoba dociera do cennika na dole. Cennik trafia wyżej.
• Firma B2B. Na stronie oferty dużo kliknięć trafia w podkreślony nagłówek, który nie jest linkiem. Firma zamienia go na link do specyfikacji.

Jak korzystać z heatmap krok po kroku

1. Zainstaluj narzędzie, na przykład Microsoft Clarity, z obsługą zgód.
2. Poczekaj na kilkaset sesji na stronach, które chcesz analizować.
3. Oglądaj mapy osobno dla telefonów i komputerów.
4. Szukaj wzorców: kliknięć w nieklikalne elementy, miejsc, gdzie ludzie przestają przewijać, pomijanych przycisków.
5. Uzupełnij wnioski nagraniami sesji i danymi z GA4.
6. Wprowadź zmianę i porównaj mapy przed i po.

Najczęstsze błędy

Najczęstszy błąd to wnioski z kilkunastu sesji, które nie są reprezentatywne. Drugi to jedna mapa dla wszystkich urządzeń, choć telefon i komputer wyglądają zupełnie inaczej. Trzeci to brak zgody i maskowania danych, co narusza RODO.

Ile danych potrzeba

Heatmapa zbudowana na kilkunastu wizytach może wprowadzać w błąd, bo pojedyncze osoby mocno zmieniają obraz. Zwykle warto zebrać przynajmniej kilkaset odsłon danej strony, zanim wyciągnie się wnioski. Przy małym ruchu pomaga dłuższy okres zbierania albo skupienie się na nagraniach sesji, które pokazują zachowanie konkretnych osób.

Heatmapy na telefonie i komputerze

Zachowanie użytkowników na telefonach i komputerach często bardzo się różni. Na telefonie ludzie przewijają dalej, ale rzadziej klikają w małe elementy. Oglądaj heatmapy osobno dla obu typów urządzeń. Mieszanie ich w jednym obrazie może ukryć problem, który występuje tylko na telefonie.

Co szukać na heatmapie

• kliknięcia w elementy, które nie są linkami, na przykład zdjęcia lub nagłówki,
• ważne przyciski, w które prawie nikt nie klika,
• miejsce, w którym większość osób przestaje przewijać,
• wielokrotne szybkie kliknięcia w jedno miejsce, które mogą oznaczać frustrację.

Heatmapy a prywatność

Narzędzia do map kliknięć i nagrań sesji zbierają dane o zachowaniu użytkowników, więc w Unii Europejskiej zwykle wymagają zgody na pliki cookie. Ustaw maskowanie pól formularzy, żeby nie nagrywać wpisywanych danych, i poinformuj o narzędziu w polityce prywatności.

Heatmapa a test A/B

Heatmapa pokazuje, gdzie jest problem, a test A/B sprawdza, czy rozwiązanie działa. Najlepiej używać ich razem: najpierw obserwacja, potem zmiana i pomiar.

Pierwszy krok

Włącz mapę kliknięć na stronie z największym ruchem i po dwóch tygodniach sprawdź, czy główny przycisk jest w ogóle klikany.

Mapa przewinięć

Pokazuje, do którego miejsca dociera większość odwiedzających. Ważne treści umieszczone poniżej tej granicy warto przenieść wyżej.

Wyjaśnienie na prostym przykładzie

Gdy po zimie odśnieżasz chodnik przed sklepem, widzisz, gdzie śnieg jest najbardziej zdeptany. To tam ludzie chodzą najczęściej. W tych miejscach warto postawić tablicę z ofertą.

Heatmapa to taki ślad na stronie internetowej. Kolorami pokazuje, gdzie ludzie najczęściej klikają, jak daleko przewijają i gdzie zatrzymują wzrok. Czerwone pola są gorące, niebieskie zimne. Często okazuje się, że klienci klikają w coś, co nie jest linkiem, albo nie przewijają do najważniejszego przycisku.

Trudne słowa z tego hasła

• UX. Łatwość korzystania z produktu. Zobacz UX.
• CRO. Poprawianie strony tak, żeby więcej osób robiło to, co chcesz. Zobacz CRO.
• Above the fold. Część strony widoczna bez przewijania. Zobacz above the fold.
• Sesja. Jedna wizyta na stronie od wejścia do wyjścia. Zobacz sesja.

Ćwiczenie na 15 minut

1. Załóż darmowe konto w Microsoft Clarity i dodaj kod na stronę, połączony z banerem zgody na cookies.
2. Poczekaj, aż zbierze się kilkaset wizyt.
3. Otwórz heatmapę strony głównej i zapisz trzy zaskakujące obserwacje.
4. Popraw jedną rzecz, na przykład przenieś ważny przycisk wyżej.

Widzisz stronę oczami klientów; to, co widać od razu, opisuje hasło above the fold.

Najczęstsze pytania

Co to jest heatmapa?

Mapa ciepła strony: kolorami pokazuje, gdzie ludzie klikają i jak daleko przewijają.

Jak zrobić heatmapę strony za darmo?

Na przykład w Microsoft Clarity, które jest darmowe. Instrukcję krok po kroku opisałem w tekście o Clarity.

Co pokazuje heatmapa przewijania?

Do którego miejsca strony dociera ilu ludzi. Jeśli najważniejszy przycisk jest tam, gdzie dochodzi mało osób, trzeba go przenieść wyżej.

Co to jest heatmapa?

To obraz strony, na którym kolory pokazują, gdzie użytkownicy najczęściej klikają, jak daleko przewijają i gdzie przesuwają kursor.

Jakie narzędzia do heatmap są popularne?

Na przykład darmowy Microsoft Clarity i Hotjar. Oba pokazują mapy kliknięć i przewijania oraz nagrania sesji.

Czy heatmapy wymagają zgody na cookies?

Tak, w UE narzędzia analizujące zachowanie użytkowników wymagają zgody w banerze cookies. Warto też maskować dane wpisywane w formularze.

Powiązane pojęcia

CRO  ·  UX  ·  Współczynnik odrzuceń (bounce rate)