Wszystko, co musisz wiedzieć przed użyciem mapy ciepła strony docelowej

Oprogramowanie Cormaca Kinneya zaczęło się jako narzędzie, które pomagało traderom z Wall Street oszukiwać giełdę. Przekształcił dane finansowe w „świetliste mozaiki czerwonych i niebieskich kwadratów”, zwane „mapami cieplnymi”, które sygnalizowały handlowcom, kiedy kupować lub sprzedawać za pomocą koloru.

Ponad dwie dekady później nie tylko traderzy korzystają z map ciepła i dostarczanych przez nie informacji. Marketerzy (a teraz klienci Instapage) również z nich korzystają. Dzięki temu uczą się dokładnie, jak potencjalni klienci zachowują się na ich stronach internetowych.

Co to jest mapa cieplna?

Mapa cieplna to wizualizacja danych, która pokazuje, w jaki sposób odwiedzający wchodzą w interakcję ze stroną internetową za pomocą systemu kodowania kolorami. Spójrz na przykład na chyba najbardziej znaną mapę termiczną wszechczasów (przynajmniej przez marketerów cyfrowych), która pokazuje, że ludzie czytają w sieci we wzór w kształcie litery F:

Czerwona i żółta część mapy wskazują często oglądany obszar. Niebieski to miejsce, w którym odwiedzający wyglądali najmniej.

Te konkretne dane zostały zebrane przez Nielsen Norman Group z badania eye-trackingowego z 2006 roku, które monitorowało spojrzenia odwiedzających, gdy napotkali tekst na stronie internetowej. Ale testy takie jak te prawdopodobnie nie będą krążyć w sieci.

Mapy cieplne śledzenia wzroku a mapy cieplne śledzenia myszy

Mapy cieplne z eksperymentów ze śledzeniem ruchu gałek ocznych są najdokładniejsze, ale są też najbardziej kosztowne i niewygodne w produkcji. Badania, takie jak powyższe Nielsen Norman, zwykle odbywają się w kontrolowanym otoczeniu (laboratorium, w domu) z zespołem badawczym lub drogim sprzętem, który obserwuje oczy odwiedzających podczas interakcji z Twoją stroną internetową. Ich uruchomienie może kosztować nawet kilka tysięcy dolarów.

Ponieważ zatrudnienie całego zespołu badaczy nie wchodzi w rachubę dla większości firm, wiele z nich korzysta z oprogramowania do śledzenia myszy. W przeciwieństwie do monitorowania rzeczywistych ruchów gałek ocznych, oprogramowanie do śledzenia myszy monitoruje ruchy myszy odwiedzających , takie jak kliknięcia, przewinięcia i najechanie kursorem.

Ponieważ ta metoda nie wymaga formalnych warunków laboratoryjnych ani dużej części budżetu firmy, jest znacznie łatwiej dostępna. Dziś można zainstalować oprogramowanie do śledzenia myszy i natychmiast zacząć monitorować zachowanie odwiedzających — a niektóre badania pokazują, że prawie tak dokładnie, jak robią to formalne badania dotyczące śledzenia ruchu gałek ocznych.

Mapa cieplna po lewej stronie została stworzona na podstawie formalnego badania śledzenia wzroku, a mapa po prawej została wygenerowana za pomocą śledzenia myszy. Według ClickTale, eksperymenty, w których obie techniki były podawane jednocześnie, wykazały, że istnieje 84-88% korelacji między ich wynikami.

Zasadniczo, w niektórych przypadkach, gdy ludzie poruszają myszą i gdzie wyglądają, zwykle się pokrywają (więcej o tym później).

Dostępne są różne typy map cieplnych śledzenia myszy

Kiedy ludzie odnoszą się do „mapy ciepła”, mają na myśli wizualizację, która wyświetla zachowanie użytkownika. Ale to zachowanie użytkownika nie zawsze jest takie samo. Niektóre mapy cieplne pokazują, jak ludzie przewijają, podczas gdy inne typy mogą identyfikować, gdzie ludzie poruszają się za pomocą myszy na ekranie. Podstawowe typy map cieplnych śledzenia myszy są następujące:

Kliknij mapy ciepła

Mapy kliknięć pokazują, gdzie odwiedzający kliknął na Twojej stronie internetowej. Są one szczególnie cenne przy odkrywaniu popularnych linków lub obszarów, które użytkownicy mogą uważać za linki, ale nimi nie są.

Weźmy na przykład tę konkretną mapę, która ujawniła, że ​​najczęściej klikane elementy na stronie to zdjęcia produktu:

Założyciel Brothers Leather Supply Company, Adam Kail, wyjaśnia, w jaki sposób ta mapa zmieniła ukierunkowanie firmy na projekt strony produktu:

Mapy cieplne wzmocniły nasze zapotrzebowanie na wspaniałe obrazy na wszystkich naszych stronach produktów. Kiedyś zajmowaliśmy się odpowiednią kopią — ale teraz spędzamy czas na uzyskiwaniu odpowiednich obrazów. Każdy obraz przedstawia inne zastosowanie lub kąt dla naszych toreb… Przyszli klienci chcą wiedzieć, jak wygląda torba z laptopem w środku, gdy jest pełna, gdy ktoś ją nosi.

Ostatecznie jest to cel analizy mapy ciepła — odkrycie rzeczywistych zachowań odwiedzających, które można wykorzystać do optymalizacji doświadczenia użytkownika. Aby to zilustrować, spójrzmy na inną mapę kliknięć, która pochodzi ze strony docelowej po kliknięciu telefonu komórkowego:

Zaznaczony na czerwono, zauważysz, że najczęściej klikany telefon znajduje się znacznie poniżej zakładki i znajduje się pod kilkoma mniej popularnymi modelami. Jak więc wykorzystać tę mapę, aby poprawić wrażenia użytkownika?

Wymień jeden z mniej popularnych modeli nad zakładką na ten z czerwonym konturem. W ten sposób ludzie nie muszą polować, aby go znaleźć.

Być może najbardziej odpowiednia mapa cieplna do projektowania strony docelowej po kliknięciu pochodzi ze studium przypadku przeprowadzonego przez VWO na kliencie, Parze (obecnie Para).

Oto oryginalna strona główna aplikacji:

A oto jak wyglądała mapa popularności kliknięć tej strony głównej:

Czy zauważyłeś, co zrobił Lim Cheng Soon zajmujący się marketingiem wzrostu w tej mapie termicznej? On mówi:

Okazało się, że zbyt wiele osób klika w pasek nawigacyjny na górze zamiast w przycisk konwersji (link do AppStore i Google Play). Wymyśliłem więc teorię, że zbyt wiele „rozpraszaczy” wokół przycisku konwersji nie jest dobrym pomysłem.

Przeprowadzam więc kilka testów A/B w oparciu o teorię usuwania „rozpraszaczy” wokół przycisku konwersji.

Wyniki?

• Ukrycie tekstu „pobierz za darmo” nad przyciskiem zwiększyło współczynnik konwersji o 10%.
• Ukrycie menu nawigacyjnego zwiększyło współczynnik konwersji o 12%

Wkrótce teoria „zbyt wielu rozproszeń” w ogóle nie jest zmyślona. Jak pokazało kilka innych testów, linki nawigacyjne mogą drastycznie obniżyć współczynnik konwersji. Na swojej stronie docelowej po kliknięciu najlepiej je wykluczyć z projektu.

Mapy kliknięć, takie jak te powyżej, są szczególnie cenne ze względu na zamiar sygnalizowania kliknięcia – działanie jest bardziej celowe niż przypadkowe. Kiedy ktoś klika, robi to, ponieważ chce dowiedzieć się więcej o danym elemencie lub treści, której on dotyczy (przycisk CTA, link „o nas” itp.).

Przewiń mapy ciepła

„You don’t finish this article” to tytuł artykułu opublikowanego przez Slate w 2013 roku. droga przez artykuły.

Mimo że imponujące 86,2% zaangażowania miało miejsce poniżej części ekranu, tylko 25% osób przewinęło piksel o numerze 1600 (większość artykułów Slate ma około 2000 pikseli długości). Takie wglądy są pomocne w odkrywaniu map przewijanych — szczególnie na dłuższych stronach.

W terminach dotyczących strony docelowej po kliknięciu najprawdopodobniej jest to strona sprzedaży. Te fachowo opracowane przekonujące materiały marketingowe mogą urosnąć do gigantycznych rozmiarów. Ten na przykład ma ponad 5000 słów (kliknij tutaj, aby zobaczyć całą stronę):

Przewijana mapa na takiej stronie może powiedzieć jej twórcom, gdzie ludzie opuszczają proces czytania. Dzięki tym danym twórcy mogą postawić hipotezę o przyczynach rezygnacji — słaba kopia, irytujące reklamy, a nawet zmiana koloru tła, mówi Peep Laja:

Jeśli masz silne linie lub zmiany koloru (np. białe tło staje się pomarańczowe), nazywa się to „logicznymi końcami” – często ludzie myślą, że to, co następuje, nie jest już powiązane z tym, co było wcześniej.

Na tym etapie optymalizatorzy mogą przetestować potencjalne sposoby zachęcania ludzi do przeczytania całej strony — co z pewnością jest możliwe w jednym z eksperymentów Nielsen Norman Group:

To rzadkie, ale możliwe.

Pamiętaj, że powyższa mapa przedstawia ruchy oczu, a nie tylko głębokość przewijania. Oznacza to, że jest bardziej szczegółowy niż to, co zobaczysz na przewijanej mapie, która pokaże tylko, jak daleko zaszli Twoi użytkownicy w dół strony. Oto przykład z testu przeprowadzonego na stronie RJMetrics:

Najczęściej oglądane obszary na tej stronie, według koloru, to:

• biały
• czerwony
• Żółty
• Zielony
• Niebieski

Wiemy, o czym myślisz: w jaki sposób górna część strony może być wyświetlana mniej niż jej środek?

Cóż, badania przeprowadzone przez Chartbeat pokazują, że wiele osób zaczyna przewijać, zanim strona się załaduje, co oznacza, że ​​nie trafią na samą górę.

Z ich badań wynika również, że zaangażowanie osiąga szczyt tuż pod zakładką na wielu stronach:

I to może wyjaśniać, dlaczego obszar w pobliżu fałdy jest czerwony, podczas gdy znaczna część obszaru nad nim jest żółta.

Na tej mapie Stephanie Liu, były programista front-end w RJMetrics, wysunął następującą hipotezę:

Moja hipoteza była taka, że ​​przeniesienie przycisku do obszaru mapy z białym przewijaniem na gorąco spowoduje, że projekt będzie miał wyższy współczynnik konwersji w porównaniu z oryginalną stroną z cenami. Więcej osób zwróciłoby uwagę na przycisk po prostu dlatego, że ich oczy zatrzymywałyby się tam dłużej.

Oryginalna strona wyglądała tak:

Stworzona przez nią odmiana wyglądała tak:

Rezultatem był wzrost konwersji o 310%.

Dwa ważne wnioski z tego testu mapy przewijania to:

1. Z mapą przewijania nie będziesz wiedział, dlaczego ludzie przewijają się tak daleko, jak są. Ty i Twój zespół będziecie musieli przetestować hipotezę, aby to rozgryźć.

2. Czasami niekoniecznie musisz wiedzieć, dlaczego ludzie podrzucają tam, gdzie się znajdują. Celem nie zawsze jest skłonienie ludzi do głębszego przewijania. W przypadku Stephanie, zwykłe przesunięcie przycisku CTA do bardziej widocznego obszaru przyniosło duży wzrost konwersji dla RJMetrics.

Mapy cieplne najechania (inaczej mapy cieplne ruchu)

Twoje oczy poruszają się w miejscu, w którym porusza się kursor myszy — to ogólne założenie, na którym opierają się mapy cieplne po najechaniu kursorem, znane również jako mapy cieplne „ruchu”.

Dokładność tych map opiera się na korelacji między ruchem gałek ocznych a ruchem myszy, która, jak pokazuje wcześniejsze badanie, może wynosić około 84-88%. Inne źródła nie są jednak przekonane, że jest tak wysoki.

W 2010 r. dr Anne Aula z Google opublikowała swoje odkrycia dotyczące dokładności map cieplnych zawisu:

• 6% osób wykazało pionową korelację między ruchem myszy a ruchem gałek ocznych.
• 19% osób wykazało poziomą korelację między ruchem myszy a ruchem gałek ocznych.
• 10% osób unosiło się nad konkretnym elementem strony, spoglądając na obszary wokół niego.

W innym eksperymencie Google i Carnegie Mellon stwierdzono 64% korelację między ruchem myszy a ruchem gałek ocznych.

Nie trzeba dodawać, że badania nad mapami popularności ruchu są wszędzie. Ale co z prawdziwymi aplikacjami?

Cóż, to też jest wszędzie.

Oto mapa termiczna po najechaniu kursorem North Face, użyta do optymalizacji strony kasy:

Po lewej stronie Wersja A wydaje się pokazywać baner na prawym pasku bocznym, który przyciąga większą uwagę niż przycisk CTA (zakreślony na biało) pod nim. Wersja B bierze to pod uwagę i przełącza baner przyciskiem (znowu zakreślony na biało).

Rezultatem był wzrost współczynnika konwersji o 62%.

Oto kolejna mapa, która wydaje się pokazywać… Cóż… Przekonaj się sam:

Wydaje się, że z tej mapy nie ma wyraźnych wniosków. Dużo się unosi. Wszędzie.

Ogólnie rzecz biorąc, najważniejszą rzeczą, którą należy wyciągnąć z badań nad mapą cieplną i jej praktycznymi zastosowaniami, jest to:

Używaj map najechania do tworzenia projektów, ale według słów Rory'ego Gallaghera z EyeQuant: „nie uogólniaj nadmiernie”.

Jeśli twoja mapa wygląda jak ta wyprodukowana przez North Face, możesz mieć wartościową hipotezę do testów A/B, taką jak ta:

„Na podstawie mapy termicznej najechanej kursorem zauważyliśmy, że obszar nad przyciskiem wezwania do działania na stronie kasy wydaje się przyciągać więcej uwagi odwiedzających. Dlatego uważamy, że przełączając przycisk z umieszczonym nad nim banerem promocyjnym, możemy przyspieszyć realizację transakcji.”

Jeśli jednak rozwiniesz hipotezę testową na podstawie drugiej mapy cieplnej, prawdopodobnie jesteś winny błędu potwierdzenia — szukasz konkretnego wyniku z testu tylko dlatego, że potwierdza on twoją wiarę w coś. Źle poinformowany odcinek może wyglądać mniej więcej tak:

„Zauważyliśmy na podstawie mapy termicznej, że słowa „Jak to zrobić” wydają się przyciągać więcej uwagi niż cokolwiek innego nad zagięciem. Dlatego uważamy, że w przyszłości wszystkie nagłówki postów na blogu powinny zaczynać się od „Jak to zrobić”, aby przyciągnąć czytelników”.

„Jak” to świetny sposób na rozpoczęcie nagłówka, ale ten test na to nie wskazuje. Podejdź do wyników mapy popularności ze sceptycznym nastawieniem i testuj tylko wtedy, gdy masz ku temu wyraźny powód.

Odpowiedzialne korzystanie z map ciepła

Mapy ciepła są przydatne do odkrywania, w jaki sposób ludzie korzystają z Twojej strony internetowej, ale nie powinny być jedynym narzędziem, którego używasz do tego. W pojedynkę malują niepełny obraz Twoich użytkowników i poleganie na nich jako jedynym wskaźniku zachowania potencjalnego klienta może Cię wprowadzić w błąd. Zespół Optimizely podaje przykład:

Patrząc na mapę termiczną formularza, może to pokazać, że użytkownicy klikają pierwsze pole i że jest mniej kliknięć w kolejne pola.

Może to sugerować, że użytkownicy rezygnują z procesu po wypełnieniu pierwszego pola. Mapy cieplne nie pokazują jednak sytuacji, w których użytkownicy używali klawiatury do przechodzenia między polami formularzy, a nie myszy.

Z takich powodów połączenie map ciepła z informacjami z innych narzędzi, takich jak Google Analytics lub Instapage Analytics, da pełniejszy obraz tego, jak potencjalni klienci zachowują się na Twojej stronie docelowej po kliknięciu.

Ale czy ten „pełniejszy obraz” będzie cokolwiek wart? Nie, jeśli nie zbierzesz wystarczającej ilości danych użytkownika, mówi Peep Laja:

Potrzebujesz wystarczającej wielkości próbki na stronę/ekran, zanim będziesz mógł zaufać jakimkolwiek wynikom. Wstępne pole manewru to 2000-3000 odsłon na ekran projektu. Jeśli mapa cieplna jest oparta na 34 użytkownikach, nie ufaj żadnej z nich.

Koniecznie trzeba pamiętać, że mapy cieplne to nie dane; po prostu porządkują dane w łatwo przyswajalny sposób. Pokazują kliknięcia, zwoje i najechanie. To, co oznaczają te ruchy myszy, zależy od Ciebie.

Zawsze łącz wszystkie reklamy ze spersonalizowanymi stronami docelowymi po kliknięciu, aby obniżyć koszt pozyskania klienta. Zacznij tworzyć swoje dedykowane strony po kliknięciu, rejestrując się na demo Instapage Enterprise już dziś.