mapa kliknięć (heatmap)

Heatmapa kliknięć to graficzne przedstawienie natężenia aktywności w poszczególnych obszarach wiadomości.

Mapa kliknięć jako zapis aktywności na stronie

Mapa kliknięć, określana także angielskim terminem heatmap, przedstawia rozkład interakcji użytkowników z elementami interfejsu. Najczęściej wykorzystuje kolorową warstwę nakładaną na zrzut ekranu albo widok strony. Obszary z większą liczbą zarejestrowanych kliknięć otrzymują zwykle intensywniejszy kolor, a miejsca bez aktywności pozostają chłodniejsze lub przezroczyste. Taki wykres nie pokazuje obrazu widzianego przez jedną konkretną osobę, lecz agreguje dane z wielu sesji zdefiniowanych przez narzędzie analityczne.

Rejestrowane zdarzenie może zawierać między innymi położenie wskaźnika, identyfikator strony, czas wystąpienia oraz typ urządzenia lub szerokość widoku. W przypadku ekranów dotykowych kliknięcie może być odwzorowaniem dotknięcia palcem, natomiast na komputerze jest to zwykle zdarzenie wywołane przyciskiem myszy albo gładzikiem. Mapa ma sens tylko wtedy, gdy współrzędne są odnoszone do właściwego układu strony. Zmiana rozmiaru okna, responsywny układ CSS, przewijanie i różna długość treści mogą sprawić, że ten sam punkt odpowiada innemu elementowi na ekranie.

Jak narzędzie wiąże kliknięcie z elementem interfejsu

Typowy system heatmap umieszcza na stronie skrypt śledzący, który nasłuchuje zdarzeń interfejsu i przekazuje je do usługi analitycznej albo zapisuje je w danych sesji. W prostym ujęciu narzędzie zapamiętuje współrzędne kliknięcia względem widocznego obszaru lub dokumentu, a następnie nanosi wiele punktów na wspólny obraz. W bardziej szczegółowym modelu może dodatkowo rozpoznawać element HTML, na przykład odnośnik, przycisk, pole formularza albo obszar menu. Dzięki temu można odróżnić kliknięcie w aktywny przycisk od kliknięcia w tekst, grafikę lub puste tło.

Sama intensywność koloru nie jest dowodem, że użytkownik wykonał pożądaną akcję. Duże skupisko punktów może oznaczać poprawne użycie przycisku, ale również wielokrotne klikanie elementu, który nie reaguje. Użytkownik może też wybierać obraz lub nagłówek, oczekując przejścia do innej podstrony, mimo że element nie zawiera odnośnika. Taki wzorzec wskazuje na rozbieżność między wyglądem interfejsu a jego działaniem, lecz wymaga sprawdzenia kodu strony i innych danych, aby ustalić przyczynę.

Interpretacja danych z uwzględnieniem widoku i urządzenia

Jedna mapa może łączyć dane z telefonów, tabletów i komputerów, jednak różne układy responsywne powinny być analizowane osobno. Na wąskim ekranie menu może być ukryte pod ikoną, a przyciski mogą zostać przeniesione poniżej tekstu. Na szerokim ekranie ten sam odnośnik może znajdować się w górnym pasku nawigacji. Połączenie tych sesji w jedną warstwę może rozmyć skupiska i utrudnić przypisanie aktywności do konkretnego elementu.

Przy analizie trzeba uwzględnić również przewijanie. Kliknięcie jest dowodem interakcji, ale nie mówi samo w sobie, czy użytkownik przeczytał treść znajdującą się obok. Jeśli narzędzie zapisuje także widoczny obszar lub sesję odtworzeniową, można sprawdzić, czy dany fragment był wcześniej dostępny na ekranie. Warto porównać heatmapę z kodem HTML, stylami CSS, raportem błędów JavaScript oraz zdarzeniami nawigacji. Jeżeli punktów jest dużo przy przycisku, ale po jego użyciu nie występuje zmiana adresu, wysłanie formularza ani inna oczekiwana akcja, możliwy jest problem z obsługą zdarzenia, walidacją lub komunikatem interfejsu.

Nie należy traktować mapy kliknięć jako pomiaru wartości biznesowej pojedynczego elementu. Liczba kliknięć zależy od liczby odwiedzin, położenia elementu, długości strony, powtarzalnych interakcji i sposobu zbierania próby. Do oceny działania interfejsu potrzebne są również dane o odsłonach, przejściach między adresami, błędach formularzy, czasie sesji oraz zakończeniu konkretnego zadania. Heatmapa pomaga wskazać miejsce wymagające sprawdzenia, ale nie zastępuje testu funkcjonalnego ani porównania wariantów interfejsu.

Wykorzystanie heatmapy przy problemach z komputerem

Na laptopie lub komputerze PC mapa kliknięć może pomóc odtworzyć nieprawidłowości występujące w przeglądarce, na przykład brak reakcji przycisku, niewidoczne menu albo błędne rozmieszczenie elementów po zmianie skali strony. Diagnostyka powinna obejmować konkretną przeglądarkę, szerokość okna, poziom powiększenia, rodzaj urządzenia wskazującego i wersję strony. Trzeba też rozróżnić błąd aplikacji internetowej od problemu lokalnego, takiego jak uszkodzony gładzik, wadliwa mysz, nieprawidłowy sterownik lub zakłócenia połączenia urządzenia bezprzewodowego.

Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC oraz podzespołów, dlatego w przypadku problemów z obsługą strony można sprawdzić zarówno działanie urządzeń wejściowych, jak i konfigurację systemu oraz przeglądarki. Sama heatmapa nie diagnozuje uszkodzenia sprzętu: pokazuje wzorzec zarejestrowanych interakcji po stronie aplikacji. Dopiero zestawienie jej z testem myszy lub gładzika, konsolą przeglądarki i obserwacją rzeczywistego zachowania strony pozwala oddzielić błędną interpretację danych od usterki komputera.