Które narzędzie jest najlepsze? Hotjar vs. Crazy Egg vs. Clarity

Właściwa i świadoma optymalizacja strony internetowej wymaga odpowiednich danych. Potrzebne są między innymi informacje, w jaki sposób użytkownicy korzystają z witryny, wchodzą z nią w interakcję, które obszary strony są najchętniej przeglądane, a które nie i dlaczego. Warto również poznać bezpośrednie opinie użytkowników, które często bywają bardzo pomocne.

W celu pozyskania tego typu danych musimy sięgnąć do narzędzi analitycznych innych niż Google Analytics. Najbardziej popularnym z nich jest “Hotjar”. W ostatnim czasie doczekał się niemałej konkurencji, dlatego też, przedstawiając jego funkcje i zalety, porównamy go do dwóch alternatyw: “Crazy Egg” oraz “Clarity” od Microsoftu.

HotJar

• Heatmapy – Wizualny raport przedstawiający, w co i jak często klikają użytkownicy, głębokość scrollowania strony, a także ruch (wodzenie) kursorem myszy. Możemy odfiltrować te informacje w zależności od urządzenia (desktop/smartfon/tablet). Dobór kolorów oraz sposób przedstawienia informacji są niezwykle intuicyjne. Po najechaniu na dany punkt ciepła otrzymamy informację z konkretną liczbą kliknięć w określony element. W menu wyboru heatmapy otrzymujemy również zagregowane informacje o ilości sesji na danym urządzeniu i liczbie kliknięć. W raporcie możemy również skorzystać z filtru zakresu dat, a także 19 innych. Hotjar jako jedyny działa (obecnie) tylko w trybie ciągłym “continuous”. Oznacza to, że każda podstrona jest na bieżąco rejestrowana przez program.

• Nagrania – Odtwarzanie autentycznych zachowań użytkowników w witrynie. Lista posiada zaawansowaną funkcję filtrowania po “trafności” (“relevance”), ułatwiającą przegląd listy nagrań.Wewnętrzny odtwarzacz posiada rozbudowany i przyjazny interfejs dla osoby przeglądającej. Po prawej stronie ekranu otrzymujemy informacje o sesji, m.in. data nagrania, kraj, system operacyjny, przeglądarka, z jakiej korzystał użytkownik. System automatycznie oznacza “rage clicki” na timelinie. Dodatkowo sami możemy zaznaczać ważne wydarzenia za pomocą symboli wraz z opisem np. w przypadku wystąpienia błędu na stronie. Na nagraniach widzimy również ruch kursora oraz punkty kliknięcia danego użytkownika.

• Ankiety “krótkie” (Feedback) – Jest to rodzaj ankiety szybkiej odpowiedzi na krótkie pytanie. Wyświetla się ona jako znacznik (widget) w środkowej, prawej lub lewej części ekranu. Odpowiedzi udzielamy poprzez wybór emotki. Możemy zastosować różnego rodzaju emotki lub gwiazdki, zawsze w skali ocen od 1 do 5.
  
  
• Ankiety “długie” (Surveys) – Pozwalają na pozyskanie szczegółowych informacji na temat naszej strony/sklepu bezpośrednio od klientów/użytkowników. Możliwość personalizacji pytań, a także odpowiedzi, jest bardzo duża. Złożoność ankiety zależy od ustawień. Do wyboru mamy zarówno pytania otwarte, jak i zamknięte, również z opcją wielokrotnego wyboru. Odpowiedzi mogą przybierać zróżnicowane formy graficzne, natomiast pytania mogą być od siebie zależne lub też nie. W ten sposób jesteśmy w stanie ustalać również złożoność ankiet.

Podsumowanie

Hotjar oferuje komplet rozwiązań dla osób zajmujących się optymalizacją współczynnika konwersji oraz UX designerów. Rozwiązania oferowane przez program dostarczają wielu informacji na temat zachowania użytkowników na stronie, a także zbierają opinie bezpośrednio od nich samych. Dzięki tym wszystkim informacjom, możemy dowiedzieć się jak odbierana i w jaki sposób użytkowana jest nasza strona. O wielu problemach mogliśmy być wcześniej zupełnie nieświadomi.

Crazy Egg

• Heatmapy pokazują nam, które elementy oraz miejsca na stronie są najczęściej klikane. W panelu bocznym otrzymujemy zagregowane dane typu: rage click (“nerwowe kliknięcia”), dead clicks (“puste kliknięcia”) oraz bounce rate (współczynnik odrzuceń, o którym pisaliśmy na https://sempai.pl/blog/jak-zmniejszyc-wspolczynnik-odrzucen/). Dodatkowo w panelu bocznym dostajemy informacje na temat prędkości strony (w postaci mediany). Raport ten posiada również ciekawą opcję “Live”, która pozwala przeglądać mapy ciepła interaktywnych (rozwijanych) elementów jak np. menu, drop down list etc.

• Scroll map — dzięki temu raportowi poznamy miejsca, które przyciągają uwagę na stronie. Dane te otrzymujemy w postaci procentowej (popularity) oraz liczby wyświetleń (impressions) poszczególnych sekcji. Atrybucja tych danych odbywa się, kiedy użytkownik przestaje scrollować, a sekcja znajduje się w widocznym obszarze przeglądarki.

• Confetti — teoretycznie bliźniaczy raport do heatmap, a jednak zupełnie inny. Tu dokładnie widzimy, w które miejsca klikali użytkownicy. Są one zaznaczone precyzyjnie w formie punktów. Podstawową funkcją “confetti” jest odfiltrowanie różnego rodzaju ruchu na stronie. W zależności od używanego systemu operacyjnego, geolokalizacji, źródła ruchu (nawet konkretnej kampanii Google Ads) etc. Takich opcji filtrowania jest aż kilkanaście, plus niestandardowe. Każda z nich ma przypisany swój kolor, aby w łatwy sposób nanieść kilka zmiennych na jedną heatmapę. Jest to przydatna funkcjonalność, ponieważ użytkownicy często zachowują się inaczej na stronie w zależności od źródła ruchu oraz innych aspektów.Overly (Nakładki) – Kolejny raport typu “heatmapa”. Tu również pokazana jest liczba kliknięć na stronie, ale w poszczególne elementy jako zagregowane obszary/sekcje. Na tej podstawie, mamy do wyboru dwie opcję “Live” oraz “Other”. W opcji “Live” pokazane są elementy interaktywne, takie jak: linki, przyciski “buttony”, obrazy/banery, czy pola tekstowe. Opcja “Other” pokazuję nam puste przestrzenie oraz przede wszystkim div-y (sekcja HTML). Podobnie jak w “confetti” można sprawdzić kliknięcia w oparciu o źródła, nowi/powracający etc.

• Lista — Jest to bilans surowych danych w formie tabelarycznej. “Lista” to zestawienie elementów strony z podziałem na kategorie (“type”) wraz z informacją o liczbie kliknięć oraz procentowym udziale kliknięć w dany element na stronie. Dzięki temu zestawieniu możemy dowiedzieć się np. czy użytkownicy częściej klikają w linki, czy w obrazy, a może bezpośrednio w tekst. Największym atutem tego raportu jest dostarczenie danych do analizy interaktywnych elementów, takich jak wyskakujące okienka, czy rozwijane listy.

• Testy A/B — Tworzenie prostych testów typu A/B. Ograniczają się do jednej podstrony oraz jednego typu urządzenia. Można oczywiście stworzyć kilka testów niezależnych od siebie, na różne podstrony, a także ten sam test na różne urządzenia (desktop/mobile/tablet).
  
• Nagrania — dzięki nim sprawdzimy, jak użytkownicy rzeczywiście korzystają ze strony. Możemy zobaczyć ruch myszy, kliknięcia, obszary używalne oraz pomijane. Czasem możemy zaobserwować wprost problemy (w tym techniczne) występujące w witrynie.
• Ankiety — umożliwiają otrzymanie informacji oraz opinii bezpośrednio od użytkowników, a często również naszych stałych klientów. Do wyboru mamy różne rodzaje ankiet, np.: jednokrotnego/wielokrotnego wyboru, czy oceny (według różnych skal: gwiazdki, emotikony etc.).

• Pozostałe opcje — Crazy Egg daje nam możliwość dostosowania np. jasności raportu do własnych preferencji. Wybór dat, sortowanie etc.

Podsumowanie (Crazy Egg vs. Hotjar)

Crazy Egg oferuje wiele ciekawych i przydatnych funkcji do analizy zachowania użytkowników na stronach, w szczególności mocno rozbudowanych, z dużą ilością różnych podstron, sekcji i elementów. Program ma opcje, których brakuje w Hotjar. Z drugiej jednak strony — tutaj również są pewne funkcjonalności, których nie posiada Crazy Egg jak np. inteligentne sortowanie nagrania “relevance”, lepsze funkcje oznakowania nagrań, a także bardziej rozbudowane ankiety z większymi możliwościami dostosowania wyświetlania ich w witrynie

Należy nadmienić, iż Crazy Egg jest programem w pełni płatnym. Nie posiada w ogóle darmowego pakietu, takiego jak w przypadku Hotjara wersja “Basic” (podstawowowa). Również w przypadku wyższych pakietów Hotjar jest tańszy. Cena zaczyna się od 39$, a kończy na 99$ na miesiąc (w przypadku subskrypcji rocznej 32$ – 80$ / miesiąc). Crazy Egg to natomiast przedział od 29$, do 249$ na miesiąc. Oba programy mają również wersję “korporacyjną” z ceną ustaloną indywidualnie.

Clarity

• Dashboard — rozbudowany raport różnego rodzaju statystyk. Dostarcza nam informacji m.in. o ilości sesji, głębokości przewijania, pustych/martwych kliknięciach, a także tego, z jakich urządzeń oraz państw pochodzi ruch. Przedstawione są one w formie wykresów kołowych, słupkowych, a także danych liczbowych/procentowych. Całość mocno przypomina raporty z programu stricte analitycznego jak np. Google Analytics.

• Nagrania — bezpośrednio rejestrowany zrzut ekranu. Dzięki niemu możemy sprawdzić, w jaki sposób poruszają się użytkownicy na stronie. Posiada możliwość nałożenia warstwy danych z heatmap, takich jak kliki, czy scroll.

• Heatmapy — raport map ciepła pokazuje nam, w które dokładnie elementy klikają użytkownicy. Każdy z nich, jak np. przycisk (button), nagłówek, div, posiada swój numer. W lewym menu można dokładnie sprawdzić informacje o liczbie kliknięć oraz ich procentowym udziale.Dostępny jest jeszcze jeden rodzaj tego typu raportu o nazwie “Area”, który pokazuję nam stronę z podziałem na “div-y”. W oparciu o nie otrzymujemy informacje o procentowym udziale kliknięć na stronie.Heatmapy posiadają również raport głębokości scrollowania strony. Ciekawą opcją jest możliwość porównania ze sobą dwóch map ciepła za pomocą funkcji dzielonego ekranu “50/50”. Kolejną opcją są odesłania do nagrań, w których nastąpiło kliknięcie danego elementu.

Podsumowanie (Clarity vs. Hotjar / Clarity vs. Crazy Egg)

Clarity jest dość mocno “analityczny” i umożliwia integrację z Google Analytics. Pomimo wielu ciekawych rozwiązań, w niektórych aspektach jest mocno niedopracowany jak np. heatmapy, w których nakładają się elementy interfejsu (numerki elementów), czy różnego rodzaju “wyskakujące okienka”, które zasłaniają nieraz niemały obszar strony. W związku z tym analiza może być utrudniona i nieprzyjazna użytkownikowi. Brakuje też opcji oznaczania symbolami zdarzeń na timeline. Oprócz tego jest tylko jedno automatyczne zaznaczenie na pasku czasu, w postaci kliknięcia (brak np. oznaczonych momentów scrollowania). Próżno szukać ułatwień graficznych w postaci symboli np. flag państw czy loga systemu operacyjnego na liście nagrań. Dość nietypowe jest tu filtrowanie, które występuje w formie nadrzędnej już od dashboard-u i podąża za nami po innych zakładkach. Nie jest również dostosowane dla poszczególnych raportów. Na pochwałę zasługuje mnogość filtrów, jednak pytanie, czy są na tyle funkcjonalne, aby z nich wszystkich korzystać. W Clarity nie znajdziemy w ogóle funkcji przeprowadzenia ankiet na stronie. Nie posiada również opcji testów A/B, choć to akurat najmniejsza wada oprogramowania. Na pochwałę zasługuje fakt, iż jako jeden z nielicznych programów tego typu, jest w pełni darmowy.

Podsumowanie końcowe

Zarówno HJ, jak i CE oferują zestaw wielu ciekawych i przydatnych funkcji, które w różny sposób odpowiadają potrzebom osób zajmujących się CRO i UX. Wybór narzędzia zależy od potrzeb oraz możliwości finansowych firmy. Oba narzędzia są niezwykle do siebie podobne, jednak różnią się sposobem wyświetlania danych, interfejsem, oraz trochę możliwościami. Dlatego też wybór narzędzia powinien zależeć głównie od osoby, która będzie z niego korzystać, ponieważ, pomimo wielu podobieństw, każde z nich funkcjonuje trochę w inny sposób.