Testowanie różnych stylów w przyciskach kasy

Dzisiaj przedstawiam Wam kolejny test A/B, który prowadzimy od kilku miesięcy. Jak zawsze w tej serii miesięcznych artykułów, szczegółowo przyjrzymy się postawionej przez nas hipotezie ulepszeń, jej zastosowaniu poprzez stworzenie wariacji strony w naszej witrynie internetowej oraz uzyskanych wynikach.

Jakiś czas temu badaliśmy kolor przycisków akcji na stronie głównej Nelio Content. Dzięki testowi A/B stylów CSS mogliśmy zobaczyć, jak zielony kolor najlepiej sprawdza się u naszych anglojęzycznych odwiedzających tę stronę.

Nie możemy zakładać, że tak będzie w przypadku dowolnej strony. Dlatego dzisiaj przetestujemy kolor i rozmiar przycisków kasy z tabeli cenowej, która pojawia się na stronie zakupu Nelio A/B Testing.

Definicja testu A/B

Nasza hipoteza dotycząca poprawy jest taka, że ​​zmiana koloru i rozmiaru przycisków kasy w tabeli cen Nelio A/B Testing spowoduje zwiększenie liczby kliknięć w te przyciski, a w konsekwencji większą sprzedaż.

Oryginalna wersja tabeli cen Nelio A/B Testing pokazuje trzy sprzedawane przez nas plany, każdy z jego ceną, szczegółami i przyciskiem subskrypcji usługi. Możesz to zobaczyć na poniższym zrzucie ekranu:

Przyciski mają szary kolor, który niewiele się wyróżnia, z wyjątkiem planu profesjonalnego, który ma ciemnoniebieski przycisk, aby podkreślić ten plan w porównaniu z pozostałymi dwoma.

Pierwszą rzeczą, którą sprawdzimy, jest to, czy zmiana koloru tych przycisków, aby były bardziej efektowne, jest lepsza, czy nie. W tym celu proponowana przez nas alternatywna wersja zawiera zmianę stylów CSS na nowe kolory, jak widać poniżej:

Utrzymaliśmy podświetlenie planu profesjonalnego, ale teraz inne plany są ciemnoniebieskie, a plan pośredni ma bardziej wyraźny pomarańczowy kolor. Według badań z zakresu psychologii kolorów, pomarańczowy jest dobrym wyborem dla przycisków akcji, więc zdecydowaliśmy się wybrać tę pomarańczę, którą widzieliście na poprzednim obrazku do profesjonalnego planu.

Ponieważ nasza hipoteza zakładała, że ​​rozmiar przycisków powinien również wpływać na ich działanie, zachowaliśmy zmiany w kolorystyce zaproponowane w poprzedniej odmianie, aby stworzyć nową, w której rozmiary przycisków zostały zwiększone. Możesz zobaczyć tę zmianę na poniższym zrzucie ekranu:

Dlatego mamy trzy różne wersje stylów CSS tabeli cen Nelio A/B Testing:

• Oryginał, bez zmian stylistycznych.
• Pierwszy wariant z bardziej wyrazistymi kolorami na guzikach.
• Drugi wariant z wyrazistymi kolorami i większym rozmiarem guzika.

Po wykonaniu całej tej pracy możemy przełożyć to na test A/B stylów CSS. W tym celu Nelio A/B Testing umożliwia tworzenie testów A/B różnych stylów CSS, dzięki którym możesz łatwo testować zmiany stylów w WordPress.

Tworzymy nowy test CSS A/B i trzy alternatywy w nim zawarte. W rzeczywistości zrzuty ekranu, które widziałeś wcześniej, dotyczące odmian, są zrzutami ekranu edytora stylów CSS, który Nelio A/B Testing zawiera w celu stworzenia alternatyw.

Jak widać na powyższym zrzucie ekranu, ograniczyliśmy zakres testu do cennika Nelio A/B Testing, a także zdefiniowaliśmy pięć celów do zmierzenia w ramach testu:

• Klika na przyciski dowolnego planu.
• Klika na przyciski planu podstawowego.
• Kliknięcia na przyciski planu profesjonalnego.
• Kliknięcia na przyciski planu korporacyjnego.
• Kwota zakupów.

Mając to wszystko stworzone, coś, co nie zajmie Ci więcej niż 10 minut, zaczynamy test i czekamy na wyniki. Teraz kolej na Nelio A/B Testing. Nasza wtyczka odpowiada za podział ruchu przychodzącego między różne odmiany i zliczanie konwersji w każdym celu zdefiniowanym w teście A/B.

Analiza wyników testu A/B

Ten test A/B trwa trzy miesiące na naszej stronie internetowej. Wyniki można zobaczyć poniżej. Zamierzamy szczegółowo przeanalizować każdy cel, aby zrozumieć wnioski, które wyciągnęliśmy z tego testu.

Pierwszym celem było zmierzenie kliknięć, które zostały wykonane na dowolnym przycisku planów w tabeli cen. W tym przypadku wyniki pokazują, że wariant ze zmienioną kolorystyką uzyskuje o 17,2% więcej kliknięć. Z drugiej strony wariant, który zmienił kolory i rozmiary jest o 15% gorszy od oryginalnej wersji strony.

Jednak żadna z tych liczb nie osiągnęła wystarczającego poziomu pewności statystycznej, aby jednoznacznie wskazać zwycięską wersję dla tego celu.

Drugi cel liczył kliknięcia tylko w przyciski planu podstawowego. W tym przypadku wyniki są podobne do poprzedniego celu. Mamy wersję ze zmienionymi kolorami jako najlepszą z trzech i wersję z kolorami i rozmiarami jako najgorszą.

Podobnie statystyki nie są w stanie zidentyfikować wersji z nowymi kolorami jako wyraźnego zwycięzcy z wystarczającą pewnością.

Nieco inaczej jest w przypadku trzeciego celu, w którym mierzymy kliknięcia w profesjonalnym planie. Tak jak poprzednio, wersja z kolorami jest lepsza, a wersja łącząca kolory i rozmiary jest gorsza. Jednak teraz statystyki mówią nam, że zwycięska wersja ma wystarczającą pewność siebie.

Można powiedzieć, że używając bardziej wyrazistych kolorów uzyskujemy większą liczbę kliknięć. Pomarańczowy przycisk działa lepiej niż niebieski przycisk, który mieliśmy wcześniej.

W przypadku kliknięć w Enterprise Plan wracamy tutaj do tego samego stanu, co przy pierwszych dwóch celach. Ale tutaj różnice między oryginalnym wariantem a wariantem ze zmienionymi kolorami są znikome. Wersja, która wydaje się znacznie gorsza, to ta, która zawiera zmiany w kolorze i rozmiarze.

Całe to klikanie jest w porządku. Ale jeśli spojrzymy tylko na poprzednie wyniki, będziemy mieli częściową wizję rzeczywistości.

Z tego powodu dodałem ostatni cel, w którym mierzymy liczbę zakupów osiągniętych przez każdy wariant. Możesz uzyskać wariant, który uzyska więcej kliknięć, ale jeśli nie będzie w stanie uzyskać również większej sprzedaży, wybierzesz fałszywego zwycięzcę.

W poniższych wynikach widzimy, że tak właśnie się dzieje. Wersja z nowymi kolorami osiąga o 24,5% mniejszą sprzedaż, natomiast wersja łącząca kolory i rozmiary sprzedaje się o 16,6% mniej niż aktualna wersja naszej strony (ta bez zmian).

Przy tych wynikach musimy zobaczyć, że lejek konwersji jest złożony i chociaż często dzielimy go na fazy i liczymy mikrokonwersje, nie możemy stracić z oczu całego obrazu.

Zaletą tworzenia wielocelowych testów A/B jest to, że możemy mieć wszystkie perspektywy, z jakich chcemy, aby uzyskać pełny obraz tego, jak dobrze (lub źle) działa nasza strona internetowa. Tylko w ten sposób będziemy mogli mieć pewność wyboru zwycięzcy z całkowitym spokojem, patrząc na dane z wyników testu A/B.

Polecane zdjęcie Grooveland Designs na Unsplash.