- \n
- Czym jest mapa ciep\u0142a?\u00a0<\/a>\n\n<\/li>\n
- Dlaczego warto tworzy\u0107 mapy ciep\u0142a?<\/a>\n\n\n
- \nOptymalizacja tre\u015bci<\/a>\n\n<\/li>\n
- Problematyczne obszary<\/a>\n\n<\/li>\n
- Lokalizacja menu<\/a>\n\n<\/li>\n
- Umiejscowienie istotnych element\u00f3w<\/a>\n\n<\/li>\n<\/ul>\n
- Narz\u0119dzia do tworzenia map ciep\u0142a<\/a>\n\n\n
- \nHotJar mapy ciep\u0142a<\/a>\n\n<\/li>\n
- Microsoft Clarity<\/a>\n\n<\/li>\n
- Mouseflow<\/a>\n\n<\/li>\n
- Yandex Metrica<\/a>\n\n<\/li>\n<\/ul>\n
- Mapy ciep\u0142a \u2013 zdecydowanie warto!<\/a>\n<\/li><\/ul>\n\n
Czym jest mapa ciep\u0142a?\u00a0<\/span><\/h2>\n\n\n
Mapa ciep\u0142a to wizualna prezentacja zaanga\u017cowania u\u017cytkownika witryny. Pokazuje ona, kt\u00f3re elementy strony s\u0105 najbardziej podatne na interakcje. Taka mapa za pomoc\u0105 kolor\u00f3w wskazuje miejsca gor\u0105ce i zimne. Te pierwsze najbardziej przykuwaj\u0105 uwag\u0119. Dzi\u0119ki narz\u0119dziom do tworzenia map ciep\u0142a wiesz, czy aby na pewno internauci koncentruj\u0105 si\u0119 na tym elemencie, kt\u00f3ry ma dla Ciebie najwi\u0119ksze znaczenie. Na tej podstawie mo\u017cesz wyci\u0105gn\u0105\u0107 wnioski co do zmian, kt\u00f3re nale\u017cy wdro\u017cy\u0107 w witrynie, aby odmieni\u0107 sytuacj\u0119.\u00a0<\/p>\n\n\n\n
Mapy ciep\u0142a korzystaj\u0105 z r\u00f3\u017cnych danych. Mog\u0105 uwzgl\u0119dnia\u0107 analiz\u0119 klikni\u0119\u0107 (clicktracking), \u015bledzenie przewijania strony (scrolltracking), \u015bledzenia ruch\u00f3w kursora (movetracking), badania element\u00f3w przyci\u0105gaj\u0105cych uwag\u0119 (movetracking). Mapa ciep\u0142a nie jest tym samym co mapa klikni\u0119\u0107, cho\u0107 cz\u0119sto te poj\u0119cia s\u0105 u\u017cywane zamiennie.\u00a0<\/p>\n\n\n\n
Jak wygl\u0105da mapa ciep\u0142a? Jej przyk\u0142ad mo\u017cesz zobaczy\u0107 na poni\u017cszym screenie:<\/p>\n\n\n\n
![\"Przyk\u0142adowa](\"https:\/\/hostido.pl\/blog\/wp-content\/uploads\/2022\/09\/image-7.png\")
\u0179r\u00f3d\u0142o:\u00a0https:\/\/www.crazyegg.com\/blog\/understanding-using-heatmaps-studies\/<\/a><\/figcaption><\/figure>\n\n\n\n Czerwonym kolorem oznaczane s\u0105 te miejsca, kt\u00f3re najbardziej interesuj\u0105 odbiorc\u0119. W powy\u017cszym przypadku masz do czynienia z typowym przegl\u0105daniem serwisu informacyjnego. Zaczynamy od g\u00f3ry i lewej strony, gdzie spodziewamy si\u0119 najwa\u017cniejszych news\u00f3w. Mniej skupiamy si\u0119 na tym, co znajduje si\u0119 w prawej cz\u0119\u015bci witryny.\u00a0<\/p>\n\n\n\n
Poni\u017cej widzisz map\u0119 ciep\u0142a sklepu. Jest to strona produktowa. Jak wida\u0107, w tym przypadku projekt spe\u0142nia oczekiwania \u2013 internauci koncertuj\u0105 si\u0119 na zdj\u0119ciu artyku\u0142u i opcji dodania do koszyka. Nic nie rozprasza uwagi klient\u00f3w \u2013 co jest jednym z cel\u00f3w sklep\u00f3w.\u00a0<\/p>\n\n\n\n
![\"Mapa](\"https:\/\/hostido.pl\/blog\/wp-content\/uploads\/2022\/09\/image-8.png\")
\u0179r\u00f3d\u0142o:\u00a0https:\/\/www.sitecentre.com.au\/blog\/website-ux-principles<\/a><\/figcaption><\/figure>\n\n\n\n Zerknij jeszcze na map\u0119 ciep\u0142a wynik\u00f3w wyszukiwania Google. Oczywi\u015bcie rezultat nie jest zaskakuj\u0105cy, ale te\u017c pokazuje, jak du\u017c\u0105 r\u00f3\u017cnic\u0119 robi obecno\u015b\u0107 na pozycji pierwszej i kolejnych.\u00a0<\/p>\n\n\n\n
![\"Mapa](\"https:\/\/hostido.pl\/blog\/wp-content\/uploads\/2022\/09\/image-14-1024x749.png\")
\u0179r\u00f3d\u0142o:\u00a0https:\/\/cxl.com\/blog\/how-people-view-search-results\/<\/a><\/figcaption><\/figure>\n\n\n\n <\/a><\/a><\/p>\n\n\n
Dlaczego warto tworzy\u0107 mapy ciep\u0142a?<\/h2>\n\n\n
Dzi\u0119ki mapom ciep\u0142a mo\u017cesz wyci\u0105gn\u0105\u0107 wiele wniosk\u00f3w. Cz\u0119sto niewielka modyfikacja po\u0142o\u017cenia grafiki czy te\u017c edycja dos\u0142ownie jednego s\u0142owa mo\u017ce spowodowa\u0107, \u017ce internauta na d\u0142u\u017cej zatrzyma si\u0119 przy danym materiale i zwi\u0119kszy si\u0119 konwersja.\u00a0<\/p>\n\n\n
Optymalizacja tre\u015bci<\/h3>\n\n\n
Zmiana kolejno\u015bci s\u0142\u00f3w czy podmiana ca\u0142ego CTA mog\u0105 spowodowa\u0107, \u017ce internauci b\u0119d\u0105 zwraca\u0107 wi\u0119ksz\u0105 uwag\u0119 na dany komunikat i tym samym wy\u017csza b\u0119dzie konwersja. Doskona\u0142ym przyk\u0142adem jest efekt wdro\u017ce\u0144 zastosowanych w sklepie DeWALT. Buy Now okaza\u0142o si\u0119 klikalne o 17 proc. cz\u0119\u015bciej ni\u017c Shop Now, co przy skali sprzeda\u017cy tej firmy wi\u0105za\u0142o si\u0119 z bardzo du\u017c\u0105 r\u00f3\u017cnic\u0105 w przychodzie.\u00a0<\/p>\n\n\n\n
![\"Por\u00f3wnanie](\"https:\/\/hostido.pl\/blog\/wp-content\/uploads\/2022\/09\/image-9.png\")
\u0179r\u00f3d\u0142o:\u00a0https:\/\/www.keepitusable.com\/blog\/how-just-word-can-change-your-conversion\/<\/a><\/figcaption><\/figure>\n\n\n Problematyczne obszary<\/h3>\n\n\n
Na mapie ciep\u0142a mo\u017cesz r\u00f3wnie\u017c zauwa\u017cy\u0107, \u017ce u\u017cytkownik rusza kursorem, ale nie podejmuje \u017cadnych aktywno\u015bci. Najcz\u0119\u015bciej przyczyn\u0105 takiego stanu rzeczy jest problem, na kt\u00f3ry natrafi\u0142. By\u0107 mo\u017ce nie dzia\u0142a link albo internaucie wydaje si\u0119, \u017ce powinien znale\u017a\u0107 klikalny odno\u015bnik, ale go nie ma. Wymaga to Twojej interwencji.<\/p>\n\n\n
Lokalizacja menu<\/h3>\n\n\n
Czy znajduje si\u0119 ono w tej cz\u0119\u015bci strony, na kt\u00f3r\u0105 u\u017cytkownicy sieci patrz\u0105? A mo\u017ce po\u0142o\u017cone jest w najzimniejszych obszarach i wymaga przeniesienia? Z\u0142a lokalizacja menu mo\u017ce mie\u0107 bardzo negatywny wp\u0142yw na wyniki osi\u0105gane przez witryn\u0119.<\/p>\n\n\n
Umiejscowienie istotnych element\u00f3w<\/h3>\n\n\n
Chcesz zainteresowa\u0107 klient\u00f3w jakim\u015b elementem na stronie? Oczekujesz po nim efektu w postaci wzrostu przychodu? Sprawd\u017a, czy jego po\u0142o\u017cenie jest na tyle dobre, \u017ce rzeczywi\u015bcie internauci patrz\u0105 w to miejsce i je klikaj\u0105.<\/p>\n\n\n
Narz\u0119dzia do tworzenia map ciep\u0142a<\/h2>\n\n\n
Istnieje wiele aplikacji, dzi\u0119ki kt\u00f3rym utworzysz takie mapy. Skala trudno\u015bci korzystania z nich jest r\u00f3\u017cna, ale s\u0105 i takie, w kt\u00f3rych jedynym Twoim zadaniem jest umieszczenie w sekcji <head> strony odpowiedniego kodu, a nast\u0119pnie odczekanie przez okre\u015blony czas na zebranie danych. Kt\u00f3re narz\u0119dzia warto bra\u0107 pod uwag\u0119 i dlaczego?<\/p>\n\n\n
HotJar mapy ciep\u0142a<\/h3>\n\n\n
To jedna z najpopularniejszych propozycji tego typu. HotJar ma d\u0142ug\u0105 histori\u0119 i jest bardzo rozbudowany. Dost\u0119pny jest on w wersji p\u0142atnej i darmowej, kt\u00f3ra nak\u0142ada jednak spore ograniczenia na u\u017cytkownika. Mimo popularno\u015bci aplikacji nie jest ona bardzo prosta w stosowaniu \u2013 s\u0105 rozwi\u0105zania, kt\u00f3rymi zarz\u0105dza si\u0119 \u0142atwiej.\u00a0<\/p>\n\n\n\n
![\"Cennik](\"https:\/\/hostido.pl\/blog\/wp-content\/uploads\/2022\/09\/image-10.png\")
\u0179r\u00f3d\u0142o:\u00a0https:\/\/www.hotjar.com\/pricing\/<\/a><\/figcaption><\/figure>\n\n\n Microsoft Clarity<\/h3>\n\n\n
To wci\u0105\u017c dopracowywany, bezp\u0142atny system od Microsoftu, kt\u00f3ry ju\u017c teraz dzia\u0142a dobrze i szybko. Jego du\u017c\u0105 zalet\u0105 jest bardzo prosta obs\u0142uga \u2013 wystarczy doda\u0107 na stron\u0119 odpowiedni kod i w zasadzie gotowe \u2013 rozpoczyna si\u0119 zbieranie danych.\u00a0<\/p>\n\n\n\n
![\"Cennik](\"https:\/\/hostido.pl\/blog\/wp-content\/uploads\/2022\/09\/image-11.png\")
\u0179r\u00f3d\u0142o:\u00a0https:\/\/clarity.microsoft.com\/<\/a><\/figcaption><\/figure>\n\n\n Mouseflow<\/h3>\n\n\n
Dzi\u0119ki temu narz\u0119dziu utworzysz szczeg\u00f3\u0142owe mapy ciep\u0142a. Za jego pomoc\u0105 wygenerujesz ich r\u00f3\u017cne typy. Mo\u017cesz je wypr\u00f3bowa\u0107 za darmo i pozyska\u0107 informacje na temat m.in. klikni\u0119\u0107, scrollowania i koncentrowania uwagi u\u017cytkownika.\u00a0<\/p>\n\n\n\n
![\"Cennik](\"https:\/\/hostido.pl\/blog\/wp-content\/uploads\/2022\/09\/image-12.png\")
\u0179r\u00f3d\u0142o: https:\/\/mouseflow.com\/pricing\/<\/a><\/figcaption><\/figure>\n\n\n Yandex Metrica<\/h3>\n\n\n
Kolejne z rozwi\u0105za\u0144 pochodzi od tw\u00f3rc\u00f3w najpopularniejszej w Rosji wyszukiwarki. Jego zalet\u0105 jest bezp\u0142atny dost\u0119p, mimo \u017ce zapewnia on niemal te same mo\u017cliwo\u015bci co HotJar. Teoretycznie jest to konkurencja dla Google Analytics, ale mo\u017cesz potraktowa\u0107 to narz\u0119dzie jako dodatek do GA \u2013 umo\u017cliwiaj\u0105cy tworzenie map ciep\u0142a.\u00a0<\/p>\n\n\n\n
![\"Cennik](\"https:\/\/hostido.pl\/blog\/wp-content\/uploads\/2022\/09\/image-13.png\")
\u0179r\u00f3d\u0142o: https:\/\/metrica.yandex.com\/about\/info\/pricing<\/a><\/figcaption><\/figure>\n\n\n Mapy ciep\u0142a \u2013 zdecydowanie warto!<\/h2>\n\n\n
Heat mapy s\u0105 sposobem na poprawienie konwersji, do\u015bwiadcze\u0144 u\u017cytkownika, zwi\u0119kszenie sprzeda\u017cy i doskonalenie witryny. Warto analizowa\u0107, jak internauci korzystaj\u0105 ze strony \u2013 mo\u017ce to pom\u00f3c doj\u015b\u0107 do wielu konstruktywnych wniosk\u00f3w.\u00a0<\/p>\n\n\n\n
- Microsoft Clarity<\/a>\n\n<\/li>\n
- Problematyczne obszary<\/a>\n\n<\/li>\n
- Dlaczego warto tworzy\u0107 mapy ciep\u0142a?<\/a>\n\n\n