Statystyki mówią Ci, że strona ma sto wizyt dziennie i konwersję na poziomie dwóch procent. Nie mówią, dlaczego tylko dwa. Nie mówią, czy ludzie nie zauważają przycisku, nie rozumieją oferty, czy może strona na ich telefonie po prostu nie działa. Analityka odpowiada na pytanie ile. Heatmapy i nagrania sesji odpowiadają na pytanie co się dzieje.
To jedna z najtańszych metod diagnozy strony, bo podstawowe narzędzia są bezpłatne, a pierwsze wnioski pojawiają się po kilku godzinach oglądania nagrań. Wiele firm instaluje je, patrzy na kolorowe mapy raz i nigdy nie wraca, bo nie wiedzą, jak czytać to, co widzą. Ten przewodnik pokazuje metodę: od wyboru narzędzia po konkretne wzorce, które warto wyłapywać.
Heatmapy i nagrania - czym się różnią
Obie techniki pokazują zachowanie użytkowników, ale na innym poziomie szczegółowości.
Heatmapy agregują dane z wielu wizyt na jednej podstronie. Najczęściej spotkasz trzy typy:
- Mapa kliknięć - gdzie użytkownicy klikają lub stukają. Pokazuje, które elementy przyciągają uwagę i czy ludzie klikają w miejsca, które nie są linkami.
- Mapa scrolla - jaki odsetek użytkowników dociera do danego miejsca strony. Pokazuje, gdzie kończy się zainteresowanie.
- Mapa ruchu kursora - na desktopie, jak przesuwa się kursor. Przybliża, na co patrzą użytkownicy, choć to wskaźnik pośredni.
Nagrania sesji to odtwarzalne zapisy pojedynczych wizyt: ruch kursora, kliknięcia, scroll, wpisywanie w formularze. Pozwalają zobaczyć, jak człowiek faktycznie używa strony, w tym momenty zawahania i frustracji.
Heatmapa mówi, że 70% użytkowników nie dociera do formularza. Nagrania pokazują, że część z nich zatrzymuje się tuż przed nim, bo nie rozumie, co dokładnie dostanie w zamian.
Narzędzia - co wybrać
| Narzędzie | Cena | Mocne strony | Dla kogo |
|---|---|---|---|
| Microsoft Clarity | Bezpłatne | Heatmapy, nagrania, wykrywanie frustracji, brak limitu sesji | Start i małe firmy |
| Hotjar | Wersja darmowa z limitami, plany płatne | Ankiety, opinie, lejki, dobra segmentacja | Zespoły marketingowe |
| Smartlook | Wersja darmowa, plany płatne | Zdarzenia, lejki, aplikacje mobilne | Produkty cyfrowe |
| Lucky Orange | Plany płatne | Czat na żywo, lejki, ankiety | Sklepy |
| Mouseflow | Wersja darmowa, plany płatne | Heatmapy formularzy, lejki | Sklepy i formularze |
Warunki mogą się zmieniać, więc przed wyborem sprawdź aktualny cennik i limity.
Rekomendacja dla większości małych firm: zacznij od Microsoft Clarity. Instalacja zajmuje kilkanaście minut, nie kosztuje nic i daje wszystko, czego potrzeba do pierwszej diagnozy. Jeśli później potrzebujesz ankiet w stronie lub zaawansowanych lejków, dołóż drugie narzędzie.
Jak przygotować dane
Zła konfiguracja daje mylące wnioski. Kilka zasad, które oszczędzają czasu:
- Zdefiniuj pytanie. Co chcesz sprawdzić: czy ludzie widzą przycisk kontaktu, dlaczego porzucają formularz, czy strona produktu jest zrozumiała?
- Wybierz konkretną podstronę. Zacznij od jednej, która ma ruch i znaczenie dla biznesu.
- Rozdziel urządzenia. Mobile i desktop to dwa różne produkty. Nie analizuj ich razem.
- Zbieraj minimum dwa tygodnie albo kilka setek wizyt na podstronę.
- Wyklucz ruch wewnętrzny - swoje wejścia, wejścia zespołu i boty.
- Segmentuj źródła ruchu. Użytkownik z reklamy zachowuje się inaczej niż z wyszukiwarki.
Czego szukać w mapach kliknięć
Mapa kliknięć to najszybsze źródło odkryć. Patrz na kilka wzorców.
Kliknięcia w elementy nieklikalne. Ludzie klikają w zdjęcia, nagłówki, ikony i podkreślone słowa, które nie są linkami. To znak, że projekt sugeruje interakcję, której nie ma. Rozwiązanie: zrób z nich link albo zmień styl, żeby nie wyglądały na klikalne.
Ignorowane główne CTA. Przycisk, na którym Ci zależy, ma mało kliknięć, a inne elementy dużo. Przyczyny: słaby kontrast, tekst niewiele mówiący, miejsce poza polem widzenia.
Kliknięcia w nawigację zamiast w treść. Jeśli użytkownicy od razu przechodzą do menu, treść na stronie może nie odpowiadać na ich pytanie.
Rozproszona uwaga. Wiele elementów ma podobną liczbę kliknięć, żaden nie dominuje. Strona nie prowadzi do jednego celu.
Kliknięcia w niedziałające elementy. Rozwijana lista, która nie otwiera się na jednym typie urządzenia, zdjęcia bez powiększenia, przycisk zablokowany przez baner cookies.
Czego szukać w mapach scrolla
Mapa scrolla ma zwykle charakterystyczny kształt: czerwony na górze, który stopniowo przechodzi w niebieski. Najbardziej interesują Cię nagłe zmiany.
- Fałszywe dno. Miejsce, gdzie kolor nagle spada. Użytkownicy myślą, że strona się kończy, na przykład po białym pasie albo dużym zdjęciu pełnoekranowym. Rozwiązanie: sygnały kontynuacji, zmiana układu.
- Kluczowa treść poniżej linii spadku. Jeśli formularz kontaktowy widzi 15% użytkowników, nie tracisz klientów na formularzu, tylko wcześniej.
- Zbyt długa strona z dużym odpływem już w pierwszej trzeciej. Warto skrócić lub przenieść najważniejsze rzeczy wyżej.
- Różnica mobile i desktop. Na telefonie ta sama treść jest kilkakrotnie dłuższa i ogląda ją dużo mniej osób.
Wniosek praktyczny: ważne elementy - korzyść, dowód, CTA - powinny być w miejscach, które widzi większość odwiedzających.
Nagrania sesji - jak oglądać, żeby nie utonąć
Nagrań są setki. Nikt nie obejrzy wszystkich. Dlatego filtruj.
Filtry, które działają:
- sesje z rage clicks i dead clicks,
- sesje, które zakończyły się porzuceniem formularza,
- sesje z błędami JavaScript lub wolnym ładowaniem,
- sesje mobilne o długim czasie bez interakcji,
- sesje z konwersją i bez niej na tej samej podstronie - porównanie pokazuje różnicę.
Co zapisywać podczas oglądania:
- Gdzie użytkownik się zatrzymuje i jak długo.
- Czy wraca do wcześniejszej części strony, szukając informacji.
- Które pola formularza wypełnia z trudem lub poprawia.
- W którym momencie opuszcza stronę.
- Czy kliknął w coś, czego nie zaplanowałeś.
Zasada 15-20 nagrań. Po obejrzeniu kilkunastu sesji zaczynają się powtarzać te same problemy. Zapisz je na liście i zlicz, ile razy każdy się pojawia. To prosta, ale skuteczna priorytetyzacja.
Sygnały, że coś jest nie tak
- Seria szybkich kliknięć w to samo miejsce (rage click)
- Klikanie w elementy, które nie są linkami (dead click)
- Powroty w górę strony zaraz po dotarciu do formularza
- Wielokrotne poprawianie tego samego pola formularza
- Zatrzymanie kursora nad ceną lub warunkami bez przejścia dalej
- Wejście i wyjście bez żadnej interakcji
- Błędy walidacji, które wracają przy każdej próbie
- Przewijanie w górę i w dół w poszukiwaniu informacji
Formularze - najczęstsze miejsce strat
Formularz to zwykle moment, w którym strata konwersji jest największa. Heatmapy formularzy i nagrania pokazują, w którym polu użytkownicy rezygnują. Wzorce:
- Pole, które wywołuje porzucenie - zwykle numer telefonu, adres lub pytanie o budżet.
- Niejasny komunikat błędu - użytkownik poprawia dane kilka razy i rezygnuje.
- Zbyt długi formularz na telefonie - brak automatycznego uzupełniania, niewłaściwa klawiatura.
- Niejasny efekt wysłania - użytkownik nie wie, czy formularz poszedł.
Konkretne zasady projektowania formularzy omawiamy w osobnym artykule o formularzach konwersyjnych. Nagrania pozwalają sprawdzić, które z nich Twoja strona łamie.
Od obserwacji do testu
Najważniejsza zasada: obserwacja nie jest wnioskiem. To, że ktoś nie klika w przycisk, nie znaczy, że trzeba go pomalować na inny kolor. Dobry proces wygląda tak:
- Obserwacja: 70% użytkowników mobilnych nie przewija strony do formularza.
- Hipoteza: formularz jest zbyt nisko, a użytkownicy nie wiedzą, że istnieje.
- Zmiana: dodajemy przycisk przewijający do formularza w górnej części oraz skracamy treść nad nim.
- Test: porównujemy odsetek wysłanych formularzy i dotarcia do sekcji przed i po zmianie, a przy większym ruchu - w teście A/B.
- Decyzja: wdrażamy, odrzucamy albo poprawiamy.
Przy mniejszym ruchu pełny test A/B nie zawsze jest możliwy. Wtedy porównuj okresy z zachowaniem ostrożności i nie wyciągaj wniosków z krótkich serii. O zasadach rzetelnego testowania piszemy w artykule o A/B testingu landing page.
Prywatność i RODO
Nagrania sesji i heatmapy zbierają dane o zachowaniach użytkowników, więc podlegają przepisom o ochronie danych. Praktyczne minimum:
- Zgoda, jeśli narzędzie wykorzystuje cookies lub podobne technologie niezbędne do analityki, i uruchamianie skryptu dopiero po jej udzieleniu.
- Maskowanie pól tekstowych, haseł, danych płatniczych i wszystkiego, co może zawierać dane osobowe.
- Wyłączenie nagrywania na stronach z wrażliwymi informacjami (panel klienta, płatności).
- Umowa powierzenia z dostawcą narzędzia.
- Opis w polityce prywatności - cel, podstawa, okres przechowywania.
- Ograniczenie czasu przechowywania nagrań do niezbędnego minimum.
Pełny przegląd obowiązków znajdziesz w artykule o RODO na stronie firmowej. Tu warto zapamiętać: nie nagrywaj więcej niż potrzebujesz i nie ustawiaj nagrywania na stałe bez celu.
Najczęstsze błędy
- Wnioski z kilkudziesięciu odsłon traktowane jak fakty.
- Mieszanie mobile i desktopu w jednej analizie.
- Zmiany bez hipotezy - kolor przycisku zamiast przyczyny problemu.
- Brak filtrowania nagrań i oglądanie przypadkowych sesji.
- Instalacja i zapomnienie - narzędzie zbiera dane, nikt do nich nie zagląda.
- Ignorowanie prywatności - brak maskowania i zgód.
- Analiza w oderwaniu od celu biznesowego - ładna mapa nie jest wynikiem.
- Za dużo naraz - zmiana pięciu elementów, po której nie wiadomo, co zadziałało.
Prosty plan na pierwszy tydzień
Dzień 1. Zainstaluj narzędzie przez menedżer tagów z uruchomieniem po zgodzie, ustaw maskowanie pól i wykluczenie swojego adresu IP.
Dni 2-14. Zbieraj dane. W tym czasie nie zmieniaj analizowanych podstron.
Dzień 15. Wybierz jedną podstronę z największym znaczeniem biznesowym. Obejrzyj mapę kliknięć i scrolla osobno dla mobile i desktop.
Dzień 16. Obejrzyj 15-20 nagrań z filtrem frustracji lub porzuconych formularzy. Spisz powtarzające się problemy.
Dzień 17. Sformułuj trzy hipotezy, uporządkuj je według wpływu i trudności wdrożenia, wybierz jedną.
Dzień 18 i dalej. Wdróż zmianę i mierz efekt. Wróć do danych po kolejnych dwóch tygodniach.
Taka rutyna, powtarzana co kilka tygodni, jest jednym z najbardziej opłacalnych sposobów poprawy strony. Nie wymaga budżetu reklamowego ani przebudowy serwisu. Wymaga uwagi i dyscypliny w zamianie obserwacji na testy. Szersze techniki podnoszenia konwersji, z których hipotezy wynikają, zebraliśmy w artykule o zwiększaniu konwersji na stronie, a o konkretnych zmianach projektowych - w tekście o UX strony.
Potrzebujesz strony, która naprawdę sprzedaje?
Zrobimy ją od zera, ręcznie, pod Twój biznes — szybką, mobilną i zoptymalizowaną pod konwersję.
Zamów darmową wycenęNajczęściej zadawane pytania
Szybkie odpowiedzi na pytania, które najczęściej słyszymy.
Heatmapa to wizualizacja zachowań użytkowników na konkretnej podstronie. Pokazuje, gdzie klikają (mapa kliknięć), jak daleko przewijają stronę (mapa scrolla) i gdzie przesuwają kursor lub dotykają ekranu. Dzięki niej widzisz, czy ludzie zauważają Twój przycisk, czy klikają w elementy, które nie są klikalne, i w którym miejscu tracisz uwagę. To narzędzie diagnostyczne - odpowiada na pytanie, co się dzieje na stronie, a nie dlaczego. Do tego służą nagrania sesji i rozmowy z klientami.
Przeczytaj również
Inne artykuły, które mogą Cię zainteresować.