8 przykładów map cieplnych dla zarządzania produktem opartym na danych

Discover how to lead product teams and build better products. Create a Free Account

Przyjrzyjmy się 8 najważniejszym rodzajom map cieplnych, poznajmy sposób ich działania oraz dowiedzmy się, jak można ich używać do analizowania zachowań użytkowników.

Heatmap examples for data driven product management standard editorial post 22618

Prawdopodobnie najważniejszą cechą dobrego menedżera produktu jest umiejętność wczuwania się w sytuację użytkowników. Aby ją rozwijać, menedżerowie produktu spędzają wiele godzin na wywiadach z użytkownikami i analizowaniu danych dotyczących ich zachowań.

Istnieje jednak inny sposób na wyostrzenie intuicji dotyczącej użytkowników — analiza sposobu, w jaki użytkownicy korzystają z produktu za pomocą map cieplnych.

Mapy cieplne to tylko jedno z wielu narzędzi do badań użytkowników, które pomagają odkrywać punkty tarcia, intencje i możliwości na całej ścieżce użytkownika. Wchodzą również w zakres analityki produktu, pomagając wyjść poza wskaźniki próżności i zobaczyć, co użytkownicy faktycznie robią.

Jeśli tutaj trafiłeś, prawdopodobnie już interesują Cię korzyści płynące z map cieplnych — albo szukasz przykładów z życia wziętych, aby uzasadnić tę inwestycję.

Tak czy inaczej, jesteś we właściwym miejscu. Omówmy różne rodzaje map cieplnych i sposoby ich wykorzystania do osiągania celów związanych z produktem.

#1: Mapy kliknięć i mapy dotknięć

Zaczynamy od najpopularniejszego rodzaju — mapy kliknięć (dla interfejsów komputerowych) lub dotknięć (dla interfejsów mobilnych).

Mapy kliknięć to wizualna reprezentacja sposobu, w jaki użytkownicy klikają poszczególne elementy interfejsu użytkownika. To po prostu zrzut ekranu interfejsu użytkownika, na którym wybrane części są wyróżnione różnymi kolorami.

Jeśli narzędzie do tworzenia map cieplnych wyróżnia określony element interfejsu użytkownika, oznacza to, że użytkownik (lub wielu użytkowników) go kliknął. Kolor z kolei pokaże liczbę kliknięć otrzymanych przez konkretny element.

Narzędzia do tworzenia map cieplnych zwykle korzystają z kolorów skali temperatury.

skala temperatury kolorów

Obszary, które uzyskują wiele kliknięć, będą oznaczone cieplejszymi kolorami z tego gradientu, a obszary przyciągające niewiele uwagi — chłodniejszymi.

Tak wygląda wizualizacja danych z mapy dotknięć dla aplikacji mobilnej, która umożliwia zarządzanie finansami.

wizualizacja mapy dotknięć dla aplikacji mobilnej
Źródło: Smartlook

Widzimy, że obszary określające kwotę wydaną w ramach każdej transakcji są wyróżnione na czerwono. Oznacza to, że wiele osób je klika (prawdopodobnie aby rozwinąć transakcję i zobaczyć szczegóły).

Saldo konta u góry jest natomiast wyróżnione na zielono — co wskazuje, że niewiele osób ostatecznie je klika.

Jak korzystać z mapy kliknięć

Mapy kliknięć dostarczają wielu praktycznych informacji. Analizując obszary, które użytkownicy klikają, można dowiedzieć się bardzo wiele o ich zachowaniu.

Na przykład jeśli zarządzasz aplikacją schroniska dla psów, która ma stronę darowizn umożliwiającą użytkownikom finansowe wspieranie schroniska, możesz użyć mapy kliknięć, aby sprawdzić, która opcja darowizny działa najlepiej.

mapa kliknięć na urządzeniu mobilnym
Źródło: Smartlook

Analizując powyższą mapę dotknięć, możemy stwierdzić, że opcje $10 i „Inna” są zdecydowanie najpopularniejszymi wyborami przy określaniu kwoty darowizny.

Ważnym wnioskiem, który możemy z tego wyciągnąć, jest to, że na liście najprawdopodobniej brakuje pewnej kwoty darowizny (np. $1), a użytkownicy klikają opcję „Inna”, aby ją wprowadzić.

Dobrym pomysłem może więc być sprawdzenie, jakie kwoty użytkownicy wprowadzają w sekcji „Inna”, znalezienie najpopularniejszych z nich i dodanie ich do naszej listy.

#2: Mapy przewijania

Jak sugeruje sama nazwa, ten rodzaj mapy cieplnej pozwala analizować sposób przewijania treści przez użytkowników.

Mapy przewijania również wykorzystują oznaczenia kolorami zgodnie ze skalą temperatury. Zamiast jednak wyróżniać punkty interfejsu, które użytkownicy kliknęli, wyróżniają całe sekcje strony na podstawie liczby osób, które przewinęły stronę do danego miejsca i zobaczyły tę sekcję.

Podobnie jak w przypadku innych map cieplnych, sekcje, które przewija i ogląda wiele osób, są wyróżnione ciepłymi kolorami, a te, do których dociera niewiele osób — chłodnymi.

Get Free Access to the Product Vault
We’ve collected the goods — AI prompts, exclusive deals, and a library of resources for product leaders. Unlock your account for access.
Get Free Access

Have an account? Log In

Jak korzystać z mapy przewijania

Mapy przewijania świetnie nadają się do optymalizowania położenia określonych elementów lub sekcji na stronie oraz rozwiązywania problemów związanych z korzystaniem z tych sekcji i zaangażowaniem użytkowników.

Przeanalizujmy typowy przypadek rozwiązywania problemów, badając mapę przewijania strony cennika usługi SaaS o nazwie Nelio.

mapa przewijania firmy Nelio
Źródło: Nelio

Wyobraź sobie, że masz problem z konkurencyjnością. Z jakiegoś powodu ludzie wolą rejestrować się u twoich konkurentów. Gdy pytasz ich dlaczego, odpowiadają, że inne narzędzie miało funkcję śledzenia wielu celów, a ty jej nie miałeś.

Cóż, problem polega na tym, że ta funkcja jest dostępna również u ciebie, więc musisz teraz zrozumieć, dlaczego ludzie na nią nie trafiają.

Patrząc na mapę przewijania strony cennika, widzisz, że zdecydowana większość użytkowników w ogóle nie przewija strony. Następnie zauważasz, że opis funkcji śledzenia wielu celów znajduje się poniżej widocznego obszaru i w niebieskiej strefie. Oznacza to, że tylko kilku użytkowników przewija stronę i czyta o tej funkcji, co może dotyczyć większości narzędzi do analizy zachowania użytkowników.

Problem zidentyfikowany! Aby go rozwiązać, możesz rozważyć dodanie funkcji z sekcji „Wszystkie plany obejmują” jako dodatkowych elementów na listach planów cenowych — upewniając się, że pojawiają się powyżej widocznego obszaru i że użytkownicy widzą je bez przewijania.

#3: Mapy cieplne najechania kursorem

Ten rodzaj mapy cieplnej, znany również jako mapa ruchu, śledzi położenie myszy, umożliwiając wizualizację zachowania użytkowników związanego z „poruszaniem się” po interfejsie.

W większości przypadków, korzystając z map cieplnych najechania kursorem, zakładamy, że użytkownicy najprawdopodobniej patrzą na element, nad którym znajduje się ich kursor. Śledząc ruchy myszy, korelujemy je więc ze śledzeniem tego, na co ludzie patrzą podczas przeglądania naszego interfejsu.

Wizualnie mapa składa się z wyróżnionych punktów (ponownie z użyciem kolorystyki temperaturowej) oznaczających części interfejsu, nad którymi kursor myszy użytkownika znajdował się najdłużej. Ponadto niektóre narzędzia do tworzenia map cieplnych pokazują również „ślad” wskazujący, gdzie użytkownicy zazwyczaj zaczynają i jak poruszają się po interfejsie.

Tak wyglądają te ślady.

przykład mapy cieplnej najechania kursorem
Źródło: Staticflickr

To mapa cieplna śledzenia myszy prawdopodobnie jednego z najlepiej zaprojektowanych pod kątem UX interfejsów na świecie — witryny Apple (w końcu to właśnie tam pracowali pierwsi projektanci UX w historii). Ślady pokazują, że ludzie zaczynają poznawanie strony docelowej MacOS Snow Leopard od przyjrzenia się fascynującemu kotu, a dopiero potem czytają tytuł i przechodzą do pozostałych elementów strony docelowej.

Jak korzystać z mapy najechania kursorem

Jednym z interesujących sposobów wykorzystania mapy ruchu jest identyfikowanie czynników rozpraszających użytkowników.

Jeśli na przykład odpowiadasz za optymalizację strony wyników wyszukiwania Amazon (twoim celem jest skłonienie użytkowników do kliknięcia produktu znalezionego dla nich przez Amazon), możesz spojrzeć na mapę cieplną najechania kursorem i zauważyć, że większość użytkowników najpierw ogląda jeden z twoich banerów (np. pewnego rodzaju ogłoszenie), zanim przejdzie do analizowania wyników wyszukiwania.

To duże rozproszenie dla użytkowników i może zmniejszyć prawdopodobieństwo kliknięcia przez nich wyników wyszukiwania. Dlatego usuniesz ten baner albo sprawisz, że będzie mniej wyróżniał się wizualnie w interfejsie.

#4: Mapy cieplne uwagi

Do tej pory omówiliśmy trzy narzędzia analityczne, które pozwalają wizualnie analizować użytkowników — za pomocą kliknięć, ruchów myszy i przewijania strony.

Każde z powyższych narzędzi może dostarczyć nam cennych informacji, jednak poleganie tylko na jednym z nich może prowadzić do błędnych wniosków. Analizowanie zachowania użytkowników w oderwaniu od właściwego kontekstu może nie zapewnić wystarczająco szerokiego obrazu tego, co naprawdę się dzieje.

Dlatego zespoły produktowe zwykle korzystają jednocześnie ze wszystkich tych typów i łączą spostrzeżenia zebrane z każdego z trzech narzędzi, zanim je przeanalizują i wyciągną wnioski. To rozwiązanie również nie jest jednak idealne, ponieważ przeprowadzenie pełnej analizy prawdopodobnie zajmie trzy razy więcej czasu.

Na szczęście, wraz z pojawieniem się modeli AI i zaawansowanych algorytmów, nowoczesne narzędzia do wizualizacji map cieplnych mogą łączyć informacje zebrane na podstawie kliknięć użytkowników, najechania kursorem myszy i przewijania w jedną mapę cieplną.

Ten czwarty typ nazywa się mapą cieplną uwagi, ponieważ zasadniczo pokazuje, które części interfejsu przyciągają największą uwagę użytkowników. Wizualnie przypomina mapę kliknięć, na której określone elementy interfejsu są wyróżnione różnymi kolorami z palety temperaturowej, zależnie od poziomu uwagi użytkowników.

#5: Geograficzne mapy cieplne

Mapy cieplne były używane na długo przed tym, zanim zaczęto stosować tę technikę w interfejsach użytkownika. Jednym z najbardziej znanych tradycyjnych rodzajów map cieplnych jest mapa geograficzna.

W tym przypadku wyróżniasz określone obszary na mapie na podstawie rodzaju wybranego punktu danych. Na przykład, jeśli chcesz przeanalizować geograficzne rozmieszczenie miejsc turystycznych we Francji, możesz użyć tej geograficznej mapy cieplnej.

mapa geograficzna
Źródło: Ministerstwo Transformacji Ekologicznej Republiki Francuskiej

Na powyższej mapie przedstawiono liczbę miejsc noclegowych w hotelach (głównie przeznaczonych dla turystów) na kilometr kwadratowy. Jak widać, Korsyka, Alpy Francuskie i Lazurowe Wybrzeże są zdecydowanymi liderami w tej kategorii.

Jak korzystać z geograficznej mapy cieplnej

Analizowanie danych dotyczących turystyki we Francji jest ciekawe, ale czy te mapy cieplne mogą pomóc mi w analizie mojego produktu cyfrowego? Pokażę Ci przykład.

Pozostańmy przy temacie turystyki (i Francji) i wyobraźmy sobie, że prowadzisz internetową usługę wynajmu krótkoterminowego (coś podobnego do Airbnb). Wpadłeś na pomysł przygotowania i dystrybucji materiałów promocyjnych dotyczących lokalnych festiwali we francuskich miastach, aby zachęcić więcej osób do rezerwowania za pośrednictwem Twojej usługi hoteli w tych miejscach.

Pierwsze pytanie, które przychodzi Ci do głowy, brzmi: od którego miasta lub festiwalu powinieneś zacząć?

Aby uzyskać odpowiedź, możesz utworzyć geograficzną mapę cieplną pokazującą rozmieszczenie wynajmowanych domów i mieszkań korzystających z Twojej usługi.

Źródło: InsideBnB

Patrząc na mapę, zauważysz, że Twoja usługa jest dość popularna w południowej Francji. Być może warto więc rozważyć rozpoczęcie promocji festiwali w Prowansji i na Lazurowym Wybrzeżu.

#6: Mapy kliknięć frustracyjnych

Jest to podtyp map kliknięć, który odfiltrowuje i pokazuje tylko przypadki, gdy użytkownicy klikali coś w przypływie frustracji. Narzędzia do tworzenia map cieplnych zazwyczaj identyfikują coś jako kliknięcie frustracyjne (lub martwe kliknięcie), jeśli użytkownik wielokrotnie z rzędu klika ten sam element.

Jak korzystać z mapy kliknięć frustracyjnych

Mapy kliknięć frustracyjnych są świetnymi narzędziami do identyfikowania problematycznych doświadczeń użytkownika. Przyczyną może być element, który wygląda na klikalny, ale taki nie jest, jest nieintuicyjny lub jest po prostu niedziałającym przyciskiem.

Na przykład, gdybyśmy przeprowadzili analizę danych dotyczących kliknięć frustracyjnych na jednej ze stron Iterate, z pewnością znaleźlibyśmy takie kliknięcia w co najmniej dwóch miejscach — oto dlaczego:

Czy zauważyłeś dwa elementy tekstowe wyróżnione na niebiesko? Zgadnij co — to nie są odnośniki. To zwykły tekst pokolorowany na niebiesko. Wielu odwiedzających Iterate (w tym ja) próbowało kliknąć te elementy tekstowe, oczekując przekierowania na inną stronę.

Oczywiście po ich kliknięciu nic się nie wydarzy, co może doprowadzić do frustracji użytkownika i rozpoczęcia przez niego „klikania z frustracji”.

Wniosek z analizy mapy kliknięć frustracyjnych tej strony jest taki, że należy na przykład upewnić się, iż tekst nie wygląda jak odnośniki. Możesz też przeprowadzić test A/B z użyciem różnych kolorów i sprawdzić, czy Twoje założenie, że niebieski tekst powoduje kliknięcia frustracyjne, jest prawdziwe, czy fałszywe.

#7: Mapy cieplne śledzenia wzroku

Do tej pory korzystaliśmy z map najechań, aby zrozumieć, na co patrzyli użytkownicy podczas przeglądania naszej strony internetowej. Zakładamy, że przez większość czasu wzrok użytkowników jest skierowany na kursor. Zatem ruch kursora w obrębie interfejsu może wskazać, na czym skupiają wzrok użytkownicy.

Jest to powszechny sposób analizowania uwagi. Jednak dane z mapy cieplnej, które uzyskujemy, nie są idealne, ponieważ użytkownicy nie zawsze patrzą na kursor.

Jeśli chcesz uzyskać precyzyjne dane dotyczące lokalizacji i wartości liczbowych elementów, na które patrzą użytkownicy, rozważ użycie mapy cieplnej śledzenia wzroku.

W przeciwieństwie do pozostałych rodzajów map, mapy cieplne śledzenia wzroku wymagają, aby użytkownicy korzystali ze specjalistycznego sprzętu, który rejestruje ruch ich oczu i identyfikuje położenie oglądanych przez nich elementów.

Oznacza to, że będziesz musiał zaprosić użytkowników na specjalne sesje testowe, skłonić ich do założenia tych urządzeń śledzących i rozpoczęcia korzystania z Twojego produktu. Chociaż jest to znacznie bardziej czasochłonne i kosztowne, jakość uzyskanych danych jest zdecydowanie wyższa niż w przypadku jakichkolwiek innych rodzajów map cieplnych witryny.

Jak korzystać z mapy cieplnej śledzenia wzroku

Biorąc pod uwagę koszt organizacji sesji testowych ze śledzeniem wzroku, prawdopodobnie będziesz korzystać z tej metody wyłącznie w obszarach optymalizacji UX o dużym wpływie.

Badania śledzenia wzroku są bardzo powszechne w przypadku produktów dużych firm technologicznych, gdzie poprawa użyteczności produktów o 1% może przełożyć się na dziesiątki milionów przychodów i zwrotu z inwestycji.

Wyobraź sobie, o ile wzrosną dodatkowe roczne przychody cykliczne Amazona, jeśli firma przeprowadzi badanie śledzenia wzroku i umieści banery promujące produkty w taki sposób, że współczynnik konwersji zwiększy się o 1%.

#8: [Bonus] Mapy konfetti

Mapy cieplne konfetti są podtypem zwykłych map kliknięć, które pokazują poszczególne kliknięcia zamiast wyróżniać ogólny obszar, w którym użytkownicy klikali.

Zaletą analizowania poszczególnych kliknięć jest możliwość filtrowania ich na podstawie różnych złożonych punktów danych.

mapy konfetti
Źródło: CrazyEgg

W tym przypadku pogrupowaliśmy na przykład kliknięcia wezwania do działania dotyczącego wyszukiwania według dnia tygodnia, w którym nastąpiło kliknięcie.

Na podstawie danych możemy zobaczyć, że najwięcej kliknięć przypada na wtorki, podczas gdy osoby odwiedzające witrynę w poniedziałki są najbardziej rozproszone (wykonują wiele kliknięć w różnych miejscach interfejsu).

Jak korzystać z mapy cieplnej konfetti

Mapy cieplne konfetti są szczególnie przydatne, gdy trzeba analizować zachowania użytkowników na bardzo szczegółowym poziomie. W przeciwieństwie do tradycyjnych map cieplnych, które pokazują dane zagregowane, mapy konfetti umożliwiają filtrowanie poszczególnych kliknięć na podstawie takich parametrów jak typ urządzenia, źródło odesłania czy nawet pora dnia.

Ten typ mapy cieplnej świetnie nadaje się do wykrywania wzorców, które w przeciwnym razie pozostałyby niezauważone. Jeśli na przykład przycisk finalizacji zakupu odnotowuje więcej kliknięć w piątki, ale znacznie mniej w poniedziałki, Twoi użytkownicy mogą być impulsywnymi kupującymi kierującymi się dniem wypłaty, a osoby odwiedzające witrynę w poniedziałki mogą wciąż dochodzić do siebie po weekendzie i bezmyślnie wpatrywać się w stronę cennika zamiast dokonać konwersji.

Mapy konfetti mogą również wskazywać nieoczekiwane czynniki rozpraszające. Jeśli użytkownicy klikają w całej witrynie zamiast w wybranym przez Ciebie miejscu, mogą być zdezorientowani — albo po prostu desperacko szukać oznak życia. Jeśli menu nawigacyjne uzyskuje więcej kliknięć niż Twoje wezwanie do działania, może to oznaczać, że użytkownicy się zgubili i mają nadzieję uciec, zamiast się zaangażować. Możesz wykorzystać wnioski z map cieplnych do udoskonalenia swojej mapy ścieżki użytkownika, zwłaszcza podczas identyfikowania punktów tarcia. Filtrowanie według segmentu użytkowników może pomóc Ci zobaczyć, które grupy mają największe trudności i w których miejscach należy usprawnić doświadczenie.

Mapy cieplne wzmacniają empatię wobec użytkowników

Każdy rodzaj mapy cieplnej, który wspólnie tutaj poznaliśmy, może dać Ci wgląd w to, jak użytkownicy odkrywają Twoje produkty i z nich korzystają. Jeśli działasz w sposób oszczędny, mapy cieplne oferują szybki i niewymagający dużych zasobów sposób na prowadzenie badań UX przed zainwestowaniem w dokładniejsze testy użyteczności. Dzięki nim będziesz w stanie zobaczyć i odczuć trudności, z którymi mierzą się użytkownicy, a następnie przystąpić do ich rozwiązania.

W połączeniu z narzędziami analityki produktu mapy cieplne mogą zapewnić wyraźniejszy obraz tego, jak użytkownicy wchodzą w interakcje z produktem i w których miejscach rezygnują. Na przykład połączenie map cieplnych z narzędziami do nagrywania sesji zapewnia zarówno odpowiedź na pytanie „co”, jak i „dlaczego” w kontekście zachowań użytkowników.

Mapy cieplne są świetne, ale to tylko jedno z wielu narzędzi, których możesz użyć do budowania empatii. Aby dowiedzieć się więcej o pozostałych, zapisz się do naszego newslettera.

Suren Karapetyan
Suren Karapetyan, MBA, is a principal product manager focused on AI-driven SaaS products. He thrives in the fast-paced world of early stage startups and finds the product-market fit for them. His portfolio is quite diverse, ranging from background noise cancellation tools for work-from-home folks to customs clearance software for government agencies.
Follow the author:

You may also like