Korzystanie z map termicznych na stronie z cenami

Opublikowany: 2020-01-08

Zacznijmy „Test A/B miesiąca” od testu, który nie jest A/B. Zanim uciekniesz w inny zakątek Internetu, wyjaśnię Ci, dlaczego zaczniemy od map ciepła.

Jedną z głównych przyczyn niestosowania testów A/B regularnie w witrynie jest brak wiedzy, od czego zacząć: jakie zmiany próbuję, gdzie i dlaczego? To są kluczowe pytania, które sobie zadasz. Jeśli nie wiesz, jak na nie odpowiedzieć, zrezygnujesz z testowania.

Aby przezwyciężyć ten problem, polecam najpierw wybrać stronę ze swojej witryny, aby rozpocząć. Ta strona musi odpowiadać Twoim celom. Oznacza to, że jest to strona, którą odwiedzasz dużo, lub jest to strona kluczowa dla Twojej działalności lub biznesu.

W dzisiejszym przykładzie postanowiliśmy zacząć od cenników naszych wtyczek premium: Nelio A/B Testing i Nelio Content. Te strony są kluczowe dla naszej działalności, ponieważ dochód naszej firmy pochodzi z obu.

Teraz, gdy wybraliśmy strony, aby wiedzieć, jakie zmiany wprowadzić i dlaczego, lepiej zacząć od uruchomienia testu mapy termicznej. Robimy to, ponieważ mapy ciepła dostarczają nam prawdziwych danych o tym, jak nasi goście wchodzą w interakcję z naszą witryną.

Kiedy naprawdę widzimy, jak nasze strony radzą sobie z rzeczywistymi danymi użytkowników, znacznie łatwiej jest uzyskać pomysły na przyszłe testy. Dlatego mapy popularności są zawsze dobrym początkiem.

Jak stworzyć test mapy termicznej w WordPress

Tworzenie testu mapy ciepła dla strony WordPress jest bardzo łatwe. Wystarczy wybrać wybraną stronę i rozpocząć test.

Selektor nowych testów w Nelio A/B Testing.

W Nelio A/B Testing utwórz nowy test mapy termicznej, wybierając ten typ testu z okna dialogowego, które otwiera się po kliknięciu przycisku, aby dodać nowy test.

Na ekranie edycji testu ustawiasz nazwę swojego testu, aby była łatwa do późniejszej identyfikacji. Możesz również dodać opis tego, co chcesz wypróbować w teście. Na koniec musisz wybrać stronę, na której chcesz wykonać test mapy termicznej:

Ekran edycji testu heatmap. — Ekran konfiguracji testu mapy termicznej w Nelio A/B Testing.

Kiedy masz wszystko gotowe (jak widać na poprzednim zrzucie ekranu, jest to bardzo proste), kliknij przycisk w prawym górnym rogu okna, aby rozpocząć test. Wystarczy poczekać, aż przyjdą odwiedzający, aby Nelio A/B Testing zebrał dane z ich zachowania na stronie i przetworzył wyniki.

Wyniki mapy termicznej

W naszym przypadku uruchomiliśmy na naszej stronie jednocześnie dwa testy map termicznych: jeden dla strony z cennikiem Nelio A/B Testing, a drugi dla strony z ceną Nelio Content.

Każdy test zbierał dane przez około 20 dni i analizował zachowanie około 500 odwiedzających. To więcej niż potrzeba, aby móc wyciągnąć pewne wnioski i pomyśleć o przyszłych testach A/B, które możemy przeprowadzić na tych stronach.

Należy pamiętać, że te strony nie są tymi, które mają więcej wizyt w naszej witrynie. Stanowią ostatni etap ścieżki konwersji, dlatego po drodze ginie ruch. Pamiętaj jednak, że wybraliśmy ich ze względu na ich znaczenie dla naszej działalności. W przyszłych testach będziemy badać inne strony z większym ruchem, z innych powodów, które wyjaśnimy.

Strona cenowa testów Nelio A/B

Zacznijmy od wyników uzyskanych dla strony cenowej Nelio A/B Testing. Test mapy termicznej pokazuje nam dane z trzech różnych perspektyw: heatmap, scrollmap i confetti. Osadzenie tutaj 3 pełnych obrazów to za dużo, ponieważ są one dość duże pod względem wysokości w pikselach. Aby nie zmuszać Cię do przewijania w górę iw dół, po prostu połączyłem je tutaj:

Mapa cieplna strony cenowej Nelio A/B Testing.
Scrollmap strony cenowej Nelio A/B Testing.
Konfetti z cennika Nelio A/B Testing.

Przyjrzyjmy się teraz najistotniejszym fragmentom poprzednich wyników:

Fragment heatmapy strony cenowej Nelio A/B Testing. Pierwszy fold na stronie testowej Nelio A/B to najbardziej odpowiedni obszar z największą liczbą interakcji. — Fragment heatmapy strony cenowej Nelio A/B Testing. Pierwszy fold tej strony z cennikiem jest najbardziej odpowiedni i zawiera interesujące dane.

Jak widać na poprzednim obrazku, mapa cieplna to graficzna reprezentacja, która pokazuje interakcję użytkowników z elementami strony w sposób zagregowany i ze skalą kolorów, gdzie ciepły kolor wskazuje na duże znaczenie.

Na stronie z cenami Nelio A/B Testing pierwsza zakładka strony to miejsce, w którym znajduje się więcej gorących punktów. Jeśli przeanalizujemy to szczegółowo, elementy z obszaru planu podstawowego i planu zawodowego nabierają większego znaczenia niż przedsiębiorstwa. Biorąc to pod uwagę, być może moglibyśmy zmienić kolejność planów cenowych, aby najpierw wyświetlić plan korporacyjny. Zwróć uwagę, że jesteśmy przyzwyczajeni do czytania od lewej do prawej, więc pokazanie najdroższego planu na stronie cenowej może być dobrą zmianą do wypróbowania w teście A/B.

Kolejnym elementem, który otrzymuje dużo interakcji z użytkownikiem, jest link do przewijania w dół, aby zobaczyć szczegółowe porównanie planów. To dobrze, ponieważ oznacza to, że istnieje zainteresowanie zobaczeniem większej liczby szczegółów dotyczących planów.

To, co nie jest tak dobre, to fakt, że istnieje wiele interakcji w nieklikalnych elementach. Możesz to zobaczyć w konfetti, które jest graficzną reprezentacją, w której możesz zobaczyć wszystkie kliknięcia wykonane przez odwiedzających:

Konfetti z pierwszego odcinka strony cenowej Nelio A/B Testing. Możesz zobaczyć wszystkie kliknięcia wykonane przez odwiedzających. — Konfetti z pierwszej zakładki strony z cennikiem Nelio A/B Testing. Pokazuje wszystkie kliknięcia wykonane przez odwiedzających.

W całym bloku planów, który możesz zobaczyć na poprzednim zrzucie ekranu, tylko przyciski pojawiające się w każdym planie są elementami, które można kliknąć. Pamiętaj, że klikanie na wszystko inne nie ma żadnego efektu. Nasz obecny interfejs powoduje zamieszanie.

Odwiedzający klikają teksty i ikony cech każdego planu, które są elementami, których nie można kliknąć. Stąd możemy zrozumieć, że próbują znaleźć więcej informacji na ten temat, ale zamiast tego mamy te informacje w dalszej części strony.

Innym testem A/B, który moglibyśmy tutaj wypróbować, jest zmiana każdej z funkcji planów, tak aby zawierały pływający element, który pojawia się po najechaniu kursorem na tekst i dostarcza odwiedzającym więcej informacji kontekstowych. Moglibyśmy przetestować tę wersję z pomocą kontekstową w porównaniu z bieżącą wersją, aby zobaczyć, która z nich generuje więcej zakupów.

Konfetti dostarcza nam również zbiorcze informacje o odwiedzających, wyodrębnione z kliknięć, które wykonali. Testy Nelio A/B obejmują kilka rodzajów filtrów, aby lepiej zrozumieć różne cechy odwiedzających, jak widać tutaj:

Konfetti Nelio A/B Testing pozwala odwiedzającym zapoznać się z informacjami, filtrując ich kliknięcia w kilku kategoriach. — Konfetti dostarczone przez Nelio A/B Testing pozwala nam poznać informacje o naszych gościach, filtrując ich kliknięcia za pomocą kilku kategorii.

Z tych filtrów wyodrębniliśmy następujące dane:

Chrome i Firefox to zdecydowanie najczęściej używane przeglądarki przez naszych odwiedzających. Dlatego musimy zadbać o to, aby przynajmniej w tych przeglądarkach sieć wyglądała dobrze.
Połowa odwiedzających tę stronę pochodzi ze Stanów Zjednoczonych. To zgadza się z naszymi danymi sprzedaży.
Odwiedzający odwiedzają nas częściej przez pierwsze 3 dni tygodnia. Znajomość tych informacji może być przydatna na przykład do składania ofert w inne dni w innych obszarach sieci, a tym samym przyciągania ruchu w dni o małym natężeniu ruchu.
Prawie 100% odwiedzających uzyskuje dostęp do strony z komputera stacjonarnego lub laptopa. Ledwo mamy wizyty z urządzeń mobilnych. To jest coś do studiowania w przyszłości.
Windows 10 i Mac OS X to systemy operacyjne, z których ludzie nas odwiedzają. Jest zgodny z poprzednimi danymi, ponieważ nie mamy odwiedzających z systemów operacyjnych dla urządzeń mobilnych.
Mamy więcej odwiedzających w ciągu dnia roboczego (test został przeprowadzony w strefie czasowej Chicago). Ma to sens, ponieważ nasz główny klient pochodzi z USA.
Wizyty odbywają się na ekranach o minimalnej szerokości większej niż 1500 pikseli. Kolejny fakt potwierdzający, że wizyty pochodzą z komputerów stacjonarnych lub laptopów.

Jeśli sprawdzisz pełne wersje mapy popularności i konfetti, zobaczysz, że wszystkie inne sekcje strony z cennikiem Nelio A/B Testing są mniej istotne. Mając to na uwadze, sprawdźmy poniższą mapę przewijania:

Odwiedzający widzą pierwszy fragment strony, ale niewielu przewija w dół. Dlatego ważne jest, aby to, co ważne, było wyższe. — Odwiedzający widzą pierwszą zakładkę strony, ale niewielu z nich przewija w dół. Dlatego ważne jest, aby ważne informacje umieścić na pierwszej zakładce.

Jeśli sprawdzisz całą przewijaną mapę, zobaczysz, że bardzo niewielu odwiedzających wychodzi poza pierwszą zakładkę strony. To skłania mnie do myślenia, że być może powinniśmy wybrać znacznie krótszą wersję strony z cennikiem Nelio A/B Testing, skondensując istotne informacje w zakładce.

Sekcje po pierwszym złożeniu strony zawierają dużo tekstu, a odwiedzający go nie czytają. Mniej niż 20% przychodzi, aby zobaczyć i wejść w interakcję ze szczegółową tabelą porównującą plany, którą można znaleźć na dole strony. Wszystkie te dane dostarcza scrollmap:

Tabela porównawcza planów, która pojawia się na dole strony cennika Nelio A/B Testing, jest popularna tylko w 15%. Musielibyśmy podnieść ją wyżej, jeśli naprawdę chcemy, żeby była użyteczna. — Tabela porównująca nasze plany cenowe, która pojawia się na dole strony z cennikiem Nelio A/B Testing, ma popularność tylko 15%. Powinniśmy umieścić go wcześniej na stronie, jeśli naprawdę chcemy, aby był przydatny.

Testowanie z krótszymi wersjami strony, zawierającymi więcej sekcji wizualnych, może pomóc przekonać potencjalnego nabywcę i uzyskać znacznie bardziej efektywną i wydajną stronę z cenami. To kolejny pomysł na możliwą zmianę, którą można wypróbować za pomocą testu A/B.

Mamy już kilka pomysłów, które moglibyśmy przetestować w przyszłości, więc jasne jest, że informacje, które dostarczają nam mapy ciepła, są bardzo przydatne, aby uzyskać pomysły, które możemy następnie zastosować w testach A/B.

Strona cenowa zawartości Nelio

Podobnie jak w przypadku strony cenowej Nelio A/B Testing, tutaj masz pełne obrazy z wynikami mapy termicznej dla strony cenowej Nelio Content:

Mapa cieplna strony cenowej Nelio Content.
Scrollmap strony cenowej Nelio Content.
Konfetti z cennika Nelio Content.

Strona cenowa Nelio Content jest prostsza i krótsza niż ta dla Nelio A/B Testing. Między innymi ta strona ma tylko jeden plan, podczas gdy w przypadku testów Nelio A/B mieliśmy 3 różne plany.

Jeśli spojrzysz na pełną mapę cieplną i porównasz ją z mapą Nelio A/B Testing, zobaczysz, że w tym przypadku jest więcej gorących punktów w innych częściach strony, poza pierwszym zgięciem.

Szczegółowa mapa termiczna centralnej części strony z cennikiem Nelio Content. — Szczegółowa mapa cieplna centralnej części strony z cennikiem Nelio Content.

Na poprzednim obrazku widzimy, że przyciski akcji w tabeli porównującej plany mają szczególne znaczenie. To dobrze, bo z tego powodu je tam mamy. Należy jednak pamiętać, że plan Starter w tabeli, który jest niczym innym jak darmową wersją Nelio Content, nabiera szczególnego znaczenia.

Tutaj pytanie brzmi, czy powinniśmy mieć link do katalogu wtyczek WordPress na naszej stronie cenowej, aby odwiedzający mogli pobrać bezpłatną wersję Nelio Content, czy nie. Teraz to mamy, ale mapa cieplna pokazuje, że prawdopodobnie kilku odwiedzających opuszcza naszą stronę z cenami, aby przejść do bezpłatnej wersji.

Temat ten budzi kontrowersje i jest źródłem długich dyskusji na naszych spotkaniach. Z jednej strony utrzymywanie linku nie jest dobre, ponieważ tracisz możliwą sprzedaż bezpośrednią na stronie z cenami. Ale nawet jeśli odwiedzający opuszczają naszą witrynę, może się okazać, że wypróbowanie Nelio Content za darmo jest dobrą rzeczą. Użytkownicy mogą pokochać to narzędzie i kupić je później po przetestowaniu. W Nelio rozmawialiśmy o tym kilka razy i przypuszczam, że dzisiaj nie będzie to ostatni raz?. Na razie link zostaje. Co o tym myślisz?

Widzimy też, że wideo przykuwa uwagę. Stworzyliśmy bardzo fajny film i może moglibyśmy pokazać go wcześniej na stronie. Moglibyśmy spróbować tej zmiany za pomocą testu A/B, ponieważ sekcja po pierwszym złożeniu również nie jest tak istotna.

Mapa przewijania Nelio Content pokazuje, że spadek liczby odwiedzających przez przewijanie jest mniej gwałtowny niż w przypadku testów Nelio A/B. — Mapa przewijania dla Nelio Content pokazuje, że spadek odwiedzających poprzez przewijanie jest mniej gwałtowny niż w przypadku strony cenowej Nelio A/B Testing.

Z drugiej strony widzimy na scrollmapie, że utrata odwiedzających jest mniej gwałtowna, gdy przewijamy stronę w dół. Potwierdza to, że krótsza strona z cenami może działać lepiej, jeśli chcemy, aby odwiedzający zobaczył jak najwięcej treści.

Ponadto w połączeniu z poprzednią mapą cieplną widzimy, że dwie sekcje po pierwszym złożeniu, które mówią o konkretnych funkcjach i pokazują opinie ludzi, mogą wymagać przeprojektowania. Są to sekcje zawierające zbyt dużo tekstu i nie przyciągające zbyt dużej uwagi. Moglibyśmy wypróbować bardziej wizualną i bezpośrednią wersję alternatywną.

Jeśli chodzi o grafikę confetti kliknięć, warto zobaczyć liczbę nieprawidłowych kliknięć w nieklikalne obszary w pierwszej części strony:

Fragment konfetti na stronie cennika Nelio Content. — Fragment konfetti do cennika Nelio Content.

Mimo że większości z tych kliknięć nie da się uniknąć (tak, załóżmy, że ludzie klikają obszary boczne, zwłaszcza po prawej stronie podczas przewijania), istnieją inne, które są wynikiem zdezorientowanych użytkowników. Tak jest w przypadku kliknięć na miesięczny numer ceny, który widzisz na poprzednim zrzucie ekranu. Ta cena nie jest elementem, który można kliknąć; zamiast tego musisz kliknąć pomarańczowy przycisk. Jednak podany poniżej roczny numer ceny jest właściwym linkiem.

Musimy poszukać innego, mniej mylącego sposobu pokazania dwóch cen, z równą interakcją w obu przypadkach. To kolejny test A/B, który moglibyśmy przeprowadzić na tej stronie.

I co teraz?

Zaczęliśmy nie mając pojęcia, jakie testy A/B moglibyśmy przeprowadzić na naszej stronie internetowej. Widzieliśmy, że mapy ciepła pomagają nam łatwo znaleźć pomysły do przetestowania w testach A/B na naszych stronach. Gdy już mamy te pomysły na testy, musimy nadać im priorytety zgodnie z naszymi potrzebami.

Pamiętaj, że zmiany w pierwszej części strony są szybsze do przetestowania, ponieważ zobaczy je więcej osób, a tym samym szybciej uzyskasz wyniki. Możesz zacząć priorytetyzować testy A/B, które próbują wprowadzić zmiany w tej części strony.

A najważniejsza lekcja tutaj jest taka: kiedy zaczniesz testować, nie przestawaj. Po każdej iteracji procesu testowania dowiesz się czegoś nowego zarówno od swojej witryny, jak i od odwiedzających.

Do zobaczenia w przyszłym miesiącu z innym rodzajem testu, w którym przeanalizujemy rzeczywiste wyniki. Pamiętaj, aby zostawić mi komentarz ze swoją opinią o tym poście i wszystkim, co tutaj wyjaśniłem. Na której stronie swojej witryny chcesz uruchomić mapę popularności?

Polecane zdjęcie Steve'a Halamy na Unsplash.