Heatmapy i nagrania sesji stały się jednym z najgorętszych tematów dyskusji w społeczności projektantów. Podczas gdy niektórzy specjaliści kwestionują kwestie związane z prywatnością, inni uważają, że sposób działania map cieplnych doskonale pozwala zachować prywatność i bezpieczeństwo danych użytkowników.
Jest jednak jedna rzecz, co do której wszyscy się zgadzają — wartość, jaką Ty (projektant UX) zyskujesz dzięki korzystaniu z narzędzia do tworzenia map cieplnych.
Dziś chcę, abyśmy wspólnie przyjrzeli się temu tematowi i zrozumieli, jak możesz wykorzystywać mapy cieplne do ulepszania sposobu projektowania doświadczeń użytkowników.
Czym są mapy cieplne?
Mapy cieplne to narzędzia do śledzenia i wizualizacji danych, których możesz używać, aby zrozumieć, jak Twoja grupa docelowa korzysta z produktu lub witryny.
Mapy cieplne to dwuwymiarowe wykresy, które wyróżniają określone części obszaru za pomocą konkretnych kolorów, aby przekazywać przydatne informacje. Na przykład władze Helsinek uruchomiły niedawno mapę czasu rzeczywistego pokazującą, które części miasta są najbardziej zatłoczone.
Aby zobrazować liczbę osób w poszczególnych dzielnicach, stworzyły mapę cieplną miasta.
Im więcej osób znajduje się w danej części miasta, tym „cieplej” jest ona wyróżniona na mapie. Jeśli nic nie zostało wyróżnione, oznacza to, że dana dzielnica nie jest zatłoczona.
Jako narzędzia wizualizacji mapy cieplne są bardzo wszechstronne. Oprócz wizualizowania „gorących punktów” na fizycznej mapie (jak w przypadku Helsinek powyżej lub map pogodowych, które oglądamy w telewizji) możesz umieszczać je również na swoim interfejsie użytkownika.
W takim przypadku możesz wyróżnić części interfejsu, z którymi użytkownicy najczęściej wchodzą w interakcję. Następnie możesz połączyć je z nagraniami sesji, aby szczegółowo przeanalizować ścieżkę użytkownika i przeprowadzić badania UX, które pomogą Ci:
- Uzyskać cenne informacje na temat tego, jak użytkownicy korzystają z Twojej witryny lub aplikacji mobilnej.
- Zrozumieć, co możesz zrobić, aby skuteczniej przyciągać uwagę użytkowników.
- Zidentyfikować nowe możliwości optymalizacji UX i poprawy kluczowych wskaźników (zwiększenie współczynnika konwersji, CTR przycisków wezwania do działania itp.).
Mapy cieplne są więc świetnym narzędziem zarówno dla projektantów UX, jak i menedżerów produktu, którzy chcą analizować sposób korzystania z produktów przez użytkowników i je ulepszać.
Popularne narzędzia do tworzenia map cieplnych
Przyjrzyjmy się teraz temu, jak możesz utworzyć mapę cieplną dla swojego produktu. Internet jest pełen narzędzi analitycznych, które mogą śledzić interakcje użytkowników z projektem interfejsu i wyróżniać elementy strony przyciągające największą uwagę.
Do najbardziej znanych należą Hotjar, Mouseflow, Fullstory, Crazy Egg i inne.
Nie chcę jednak szczegółowo zagłębiać się w ten temat, ponieważ przygotowaliśmy osobną wyselekcjonowaną listę narzędzi do tworzenia map cieplnych, z którą możesz się zapoznać.
Have an account? Log In
4 najważniejsze typy map cieplnych dla projektantów produktów
To, co nazywamy „mapą cieplną”, nie jest jednym rodzajem informacji wizualnej używanej do analizy UX. „Mapa cieplna” to ogólne określenie różnych narzędzi wizualnych, które działają zgodnie z tą samą ogólną zasadą — wyróżniają określone obszary UX za pomocą różnych kolorów.
Nie chcę omawiać wszystkich różnych typów map cieplnych, ponieważ wiele z nich jest zupełnie nieprzydatnych dla projektantów produktów i UX. Zamiast tego przyjrzyjmy się czterem typom, które mój zespół projektowy uznał za najbardziej użyteczne.
1. Mapy kliknięć
Mapy kliknięć to prawdopodobnie pierwsza rzecz, która przychodzi Ci na myśl, gdy mowa o mapach cieplnych. Jest to najpopularniejszy typ mapy cieplnej, który znajdziesz niemal we wszystkich narzędziach do tworzenia map cieplnych i narzędziach analitycznych (z wyjątkiem Google Analytics i narzędzi opartych na zdarzeniach).
Mapa kliknięć (inaczej cieplna mapa kliknięć) pokazuje, co użytkownicy klikali w Twoim interfejsie (np. na stronie głównej witryny). Wizualizuje aktywność kliknięć odbiorców, wyróżniając odpowiednie obszary i wykorzystując kodowanie kolorami do wskazania, które części UX są „gorące”, a które „zimne”.
Tak wygląda mapa kliknięć strony z ofertami pracy Hotjar.
Analizując tę mapę kliknięć, możemy zauważyć następujące kwestie:
- Czerwony „gorący” obszar w pobliżu głównego CTA — „Zobacz dostępne stanowiska”.
- Niewielka „ciepła” (żółta) aktywność wokół przycisku prawej strzałki, który zmienia wyróżniony obraz na stronie.
- Również niewielka aktywność (niebieska) na lewej strzałce.
Na pozostałej części ekranu nie ma żadnych wyróżnień, co oznacza, że jest ona „zimna” i nikt nie klikał w te obszary.
Z drugiej strony „gorące” wyróżnienie na głównym CTA pokazuje, że klika je wielu użytkowników (prawdopodobnie większość z nich, sądząc po „intensywności”). Następnie mamy ciepłe obszary wokół przycisków strzałek, które wskazują, że niewielka część użytkowników przegląda również wyróżnione obrazy.
Jak korzystać z map cieplnych tego typu? Testy A/B CTA!
Mapy kliknięć mają bardzo szeroki zakres zastosowań. Można ich używać na przykład do zrozumienia skuteczności rozmieszczenia CTA, tekstu i innych elementów. Ja i moi projektanci produktu uwielbiamy jednak korzystać z map cieplnych z innego powodu — do testowania A/B naszych CTA i innych elementów projektu.
Posłużę się przykładem, aby zilustrować to zastosowanie. Wyobraź sobie, że odpowiadasz za aplikację internetową ChatGPT i masz problem z użytkownikami, którzy nie tworzą nowych czatów, lecz rozmawiają ze sztuczną inteligencją w ramach jednej sesji czatu.
Po sprawdzeniu mapy cieplnej widzisz, że przycisk „Nowy czat” znajdujący się u góry paska bocznego jest zimny (nic nie zostało wyróżnione).
Szybko zakładasz, że przyczyną jest kolor CTA, który jest taki sam jak tło paska bocznego. Przeprowadzasz więc eksperyment A/B, w którym zmieniasz kolor tła na zielony w wariancie A, a w wariancie B pozostawiasz kolor „bez zmian”.
Gdy odpowiednia liczba użytkowników wejdzie w interakcję z oboma wariantami, możesz otworzyć mapę cieplną kliknięć dla każdego z nich i porównać je obok siebie, aby sprawdzić, który przycisk „Nowy czat” jest „gorętszy”.
Następnie wybierasz wariant, w którym CTA uzyskało więcej kliknięć, na podstawie analizy mapy cieplnej.
2. Mapy przewijania
Mapowanie kliknięć użytkowników jest świetne, ale nie zawsze pokazuje pełny obraz sytuacji.
Jeśli na przykład mapa kliknięć pokazuje, że przycisk znajdujący się gdzieś na dole ekranu osiąga słabe wyniki, nie musi to oznaczać problemu z tekstem CTA, jego kolorem ani innymi czynnikami. Być może Twoje CTA jest całkiem dobre, ale ludzie po prostu nie przewijają strony i go nie widzą.
W tym miejscu pojawiają się mapy przewijania (czyli mapy cieplne przewijania). W przeciwieństwie do poprzedniego typu, który wyróżnia kliknięcia użytkowników w interfejsie, mapy przewijania pokazują czas spędzany przez użytkowników w każdej sekcji interfejsu oraz ich zachowania związane z przewijaniem.
W zależności od czasu spędzonego w każdej sekcji strona będzie wyróżniona na czerwono (dużo czasu), pomarańczowo/żółto (umiarkowana ilość czasu) oraz zielono/niebiesko (mało czasu).
Pokażę to na kolejnym przykładzie z narzędzia Hotjar.
Obraz powyżej przedstawia jedną ze starszych wersji strony „o nas” narzędzia Hotjar. Analizując dane mapy cieplnej przewijania tej strony, możemy stwierdzić, że:
- Wszyscy użytkownicy zobaczyli górną część strony (wyróżnioną na czerwono). Oczywiście, prawda?
- Następnie widzimy, że około 75% z nich przewinęło stronę nieco niżej, aby zobaczyć logo firm korzystających z Hotjar (sekcja z logo jest żółta).
- Wreszcie dolna część strony jest zielona, co oznacza, że tylko część użytkowników przewinęła tak daleko. Linia tuż nad logo Glassdoor pokazuje, że tylko 57% użytkowników przewinęło stronę do tego punktu.
Był to klasyczny przypadek, w którym góra jest czerwona, środkowa część żółta, a dół zielony. W rzeczywistości można jednak spotkać mapy przewijania, na których konkretna sekcja w dolnej części ekranu osiąga dobre wyniki (np. sekcja z planami cenowymi), podczas gdy użytkownicy ignorują treści powyżej i poniżej.
Jak projektanci produktu korzystają z map przewijania: optymalizacja treści
Podobnie jak mapy kliknięć, mapy przewijania są wszechstronnymi narzędziami, których można używać z różnych powodów. Najpopularniejszym zastosowaniem jest jednak optymalizacja rozmieszczenia treści.
Jak już wspomniałem, sekcje z cenami na stronie osiągają bardzo dobre wyniki. Oznacza to, że użytkownicy szybko przewijają treść, zauważają sekcję z cenami, zatrzymują się, czytają ją, a następnie kontynuują przewijanie.
Ten schemat zachowania pozwala nam strategicznie umieścić sekcję z cenami w środkowej lub dolnej części strony. Robimy to, aby zapewnić, że użytkownicy przewiną całą stronę (i zauważą niektóre ważne komunikaty, które dla nich przygotowaliśmy), zanim znajdą informacje o naszych planach cenowych.
Nasza strategia jest tutaj podobna do tej stosowanej przez supermarkety przy rozmieszczaniu nabiału i produktów piekarniczych. Zazwyczaj są to rzeczy, które kupujesz dość często. Dlatego umieszczają je po przeciwnej stronie budynku, zmuszając cię do przejścia przez cały supermarket, aby je znaleźć.
Logika jest taka, że najprawdopodobniej zauważysz inne produkty na alejkach i kupisz je po drodze do działu z nabiałem.
3. Mapy ruchu
Mapy przewijania zapewniają ogólny przegląd sekcji, na które patrzą użytkownicy. Z kolei mapy kliknięć są nieco bardziej szczegółowe, jeśli chodzi o wskazywanie konkretnego elementu, w który kliknął użytkownik.
Istnieje jednak potrzeba czegoś „pośredniego”, co będzie w stanie pokazać, jak ludzie poruszają się po informacjach i elementach interfejsu użytkownika wewnątrz konkretnej sekcji strony.
W tym miejscu możesz skorzystać z map ruchu. Jak sugeruje nazwa, ten typ mapy cieplnej śledzi ruchy kursora myszy w obrębie interfejsu.
Podobnie jak w przypadku innych map, obszary interfejsu są wyróżniane za pomocą szeregu kolorów (od niebieskiego do czerwonego), gdzie niebieski oznacza niewielki ruch myszy nad danym obszarem (a czerwony — duży).
Zobaczmy, jak wygląda to w artykule na blogu.
Ta mapa pokazuje, że niewielka część użytkowników przesuwa kursor myszy nad tytułem i pierwszym nagłówkiem artykułu. Większość jednak trzyma kursor w pobliżu obszaru wyszukiwania w prawym górnym rogu.
Jak projektanci produktów korzystają z map ruchu: śledzenie uwagi poświęcanej określonym elementom
Dość często zdarza się, że niektóre elementy naszego interfejsu użytkownika nie są klikalne, ale nadal są bardzo ważne i chcemy mieć pewność, że nasi użytkownicy je zauważyli.
Przykładem może być nasza lista funkcji na stronie cennika. Możemy chcieć zrozumieć, którym funkcjom użytkownicy poświęcili najwięcej uwagi podczas przeglądania naszej tabeli cenowej.
W tym celu możemy wykorzystać ludzką tendencję do przesuwania kursora nad rzeczami, które w danym momencie czytamy lub skanujemy wzrokiem, i utworzyć mapę ruchu myszy, która pokaże nam, na które funkcje użytkownicy patrzą najczęściej na naszej stronie cennika.
4. Mapy impulsywnych kliknięć
Istnieją zwykłe kliknięcia oraz impulsywne kliknięcia.
Dzieje się tak, gdy błędy w UX doprowadzają do frustracji użytkowników, którzy zaczynają agresywnie i wielokrotnie klikać jeden z elementów interfejsu użytkownika, ponieważ:
- Myślą, że jest to element klikalny, ale tak nie jest.
- Jest klikalny, ale produkt nie wykonuje żadnej czynności po kliknięciu.
Główną przyczyną pierwszego przypadku jest projektowanie elementów interfejsu użytkownika, które nie są przyciskami ani linkami, ale wyglądają jak one.
Jeśli chodzi o drugi przypadek, mogło dojść do:
- Błędu lub awarii, przez które produkt nie wykonał czynności, do której przeznaczony był dany przycisk.
- Wszystko działa poprawnie, ale brakuje informacji zwrotnej UX. Nawet jeśli użytkownik pomyślnie wykonał za pomocą przycisku to, co chciał, nie poinformowaliście go o tym.
- Produkt wykonuje czynność żądaną przez użytkownika, ale działa powoli. Użytkownicy są tym zirytowani albo nie poinformowaliście ich, że praca jest w toku.
Chociaż zwykłe mapy kliknięć również rejestrują impulsywne kliknięcia (w końcu są to po prostu kliknięcia), nie będzie można odróżnić impulsywnych kliknięć od zwykłych. Doprowadzi to do wyciągania błędnych wniosków z danych.
Na przykład jeśli przycisk nie działa, a ludzie klikają go impulsywnie, zwykła mapa kliknięć pokaże, że aktywnie korzystają z tej funkcji, podczas gdy rzeczywistość jest odwrotna.
Wizualnie mapy impulsywnych kliknięć wyglądają tak samo jak zwykłe mapy kliknięć. Jedyna różnica polega na tym, że duża liczba czerwonych obszarów na zwykłej mapie kliknięć jest dobrym sygnałem, natomiast na mapie impulsywnych kliknięć oznacza złe wieści.
More Articles
Jak projektanci produktów korzystają z map ruchu: identyfikowanie złego UX
Nie istnieje produkt z idealnym UX. Zawsze znajdą się w nim kiepskie elementy lub doświadczenia (nawet jeśli wydaje ci się, że jest inaczej).
Mapy impulsywnych kliknięć świetnie pomagają identyfikować różne rodzaje takich złych doświadczeń, w tym nieprawidłowe informacje zwrotne UX, niewłaściwe projektowanie elementów i inne problemy.
Mapy cieplne są najlepszymi przyjaciółmi projektantów UX
Na podstawie doświadczeń moich oraz mojego zespołu projektowania produktów mapy cieplne stron internetowych należą do najbardziej przydatnych narzędzi do przeprowadzania testów użyteczności i badania zachowań użytkowników.
Dzięki nim możesz uzyskać ilościowe informacje (w tym o tym, jak korzystają z niej na komputerach stacjonarnych i urządzeniach mobilnych) na temat skuteczności projektu swojej strony internetowej.
Następnie możesz przeanalizować te informacje i zidentyfikować luki w projekcie i funkcjonalności, które musisz uzupełnić, aby mieć pewność, że Twój produkt, strona internetowa, platforma e-commerce lub strona docelowa są przyjazne dla użytkownika.
Nie zapomnij zapisać się do naszego newslettera, aby otrzymywać więcej materiałów i przewodników dotyczących zarządzania produktem, a także najnowsze podcasty, wywiady i inne informacje od liderów i ekspertów branży.