Często możesz usłyszeć, jakie ogromne znaczenie ma wygląd strony internetowej. Malinowski zmienił kolor przycisku z niebieskiego na czerwony i sprzedaż wzrosła o 50%. Nowak wrzucił na stronę zdjęcie gołej baby i przez weekend został milionerem. Ile w tym prawdy? Postanowiłem przekonać się na własnej skórze.

Ok, no może nie jestem tak całkiem początkujący. Testy różnych elementów strony sprzedażowej Berrolii robiłem prawie od początku jej istnienia.

Ich efekty były, no cóż. Różne.

Było kilka zmian, które faktycznie podniosły sprzedaż o 40-60%. Większość z nich nie dawała nic. Musiałem się naprawdę mocno starać, żeby na 5 testowanych zmian jedna przyniosła zauważalne wyniki.

Jeżeli nie do końca wiesz, jak się za taki test zabrać, w dzisiejszym wpisie pokażę Ci krok po kroku, jak to zrobić. I jakie wyniki przyniósł u mnie test, który trwał całe wakacje.

Tworzenie własnej strony internetowej

Kiedy Tworzysz stronę internetową swojej firmy, nie wiesz bardzo wielu rzeczy. Czeka Cię podjęcie decyzji co do jej objętości, kolorów, czy wreszcie etapów, przez które chcesz przepuścić odwiedzającego – żeby na końcu został Twoim klientem.

Decyzje, decyzje, decyzje.

Tak przy okazji: napisałem książkę. Jeżeli masz więcej niż 10.000 zł oszczędności, jej przeczytanie Ci się opłaci

Majątek jak skała. Jedyna książka o tym, jak w praktyce ochronić swoje oszczędności przed inflacją. Same konkrety. Bez ściemy

Więcej o książce

Możesz wszystkie informacje dać na jednej długiej stronie (to jest tzw. one-pager). Zamiast tego możesz stworzyć kilka podstron. Przewijanie długiej strony może być zniechęcające, ale z drugiej strony jeszcze bardziej odrzucające może być klikanie po podstronach. Rozwiązaniem jest zmniejszenie objętości, ale wtedy możesz nie dać rady przekonać kogokolwiek do złożenia zamówienia. Poza tym mniejsze strony przeciętnie gorzej wypadają w Google.

Czy wobec tego w każdej sprawie jesteś skazany na zgadywanie? Nie całkiem. Rozwiązaniem jest test A/B.

Co to jest test A/B?

Wyobraź sobie, że masz dwa skrajnie różniące się pomysły na układ strony www. Jeden jest minimalistyczny, elegancki, a drugi oparty na dużych, pełnoekranowych zdjęciach. Który lepszy?

O tym możesz się przekonać, przeprowadzając tzw. test A/B. Z grubsza działa on tak:

• Tworzysz dwie wersje strony pod różnymi adresami. Nazwijmy je A i B. Stąd właśnie nazwa metody – test A/B.
• Instalujesz narzędzie (dalej powiem, jakie), które kolejnych odwiedzających kieruje losowo na wersję A lub wersję B.
• Sprawdzasz przez kilka dni, jaki procent odwiedzających stronę A lub B wykonał działanie, które Cię interesuje. Ten procent to jest Twój współczynnik konwersji. Może to być złożenie zamówienia, ale może być też coś innego – co tylko chcesz. Na przykład, jeżeli dopiero startujesz, możesz nie mieć jeszcze wielu zamówień. Wtedy Twoim celem może być samo dodanie produktu do koszyka.
• Kiedy stwierdzisz już, która wersja (A czy B) daje Ci wyższy współczynnik konwersji, zostawiasz ją, a drugą wersję kasujesz.

Oczywiście to nie kończy całego procesu. Zawsze możesz coś dalej ulepszyć. Możesz eksperymentować np. z kolorami przycisków dodania do koszyka, ich położeniem, wielkością itp.

Dobre narzędzie też Ci to umożliwi.

Jak zrobić test A/B na stronie?

A technicznie – jak zrobić taki test?

W WordPressie, który zdecydowanie polecam jako domyślne narzędzie robienia stron, istnieje wiele różnych tzw. wtyczek do testów A/B. Od dwóch lat używam Simple Page Testera. Jest to wtyczka, która jest z jednej strony prosta, a z drugiej stosunkowo niedroga. No cóź – nie jest darmowa, ale akurat tu nie znam narzędzia, które byłoby dostatecznie dobre, a jednocześnie darmowe.

Wtyczka składa się z dwóch części:

• darmowej, do pobrania stąd
• płatnej nakładki, którą możesz kupić na stronie twórcy.

Jeżeli używasz już WordPressa, ich instalacja nie powinna sprawić Ci trudności. Jeżeli jednak nie czujesz się w tym jeszcze zbyt pewnie, polecam polską stronę WordPressa.

Test dla całej strony

W podanym przeze mnie wcześniej przykładzie celem testu było zbadanie skuteczności strony. Do tego celu służy opcja Page Test.

Wtedy wtyczka losowo pozostawia użytkownika na wybranej stronie (nazywanej tu „Master”) lub przenosi na jej drugą wersję (tzw. „Variation”). Następnie dla każdej mierzy współczynnik konwersji. Po kilku tysiącach odwiedzin powinieneś być w stanie powiedzieć, który z wariantów działa lepiej – czyli który ma wyższy współczynnik konwersji. Albo inaczej – w którym przypadku wyższy procent klientów dostał się na stronę podziękowania za zakup.

Pomaga w tym test statystyczny, który jest wbudowany we wtyczkę. Informuje on Cię na bieżąco, czy i o ile wariant jest lepszy (lub gorszy) i czy wynik ten jest statystycznie istotny.

Ten ostatni element jest niezwykle ważny. Jeżeli nawet któryś wariant ma nieco wyższy współczynnik konwersji, może być to efekt przypadku. Po prostu próba jest jeszcze zbyt mała i akurat pierwsze kilka osób, które zobaczyły wersję A, kupiło. Żeby mieć pewność, że wynik nie jest przypadkowy, poczekaj, aż próba będzie dostatecznie liczna i różnica między współczynnikami konwersji – statystycznie istotna.

Wtedy na ekranie testu wyświetli się informacja, że jedna z wersji jest lepsza o drugiej o określony procent i że wynik ten jest istotny.

Wtedy dopiero możesz mieć pewność, że warto dokonywać zmiany.

Test A/B dla wybranego elementu strony www

Kiedy już podejmiesz decyzję co do ogólnego układu strony, możesz testować też drobniejsze elementy. Do tego służy drugi moduł – Shortcode Test.

Pozwala on na załadowanie całej strony w podstawowej wersji, a następnie podmienianie tylko jej wybranego fragmentu.

Możesz w ten sposób łatwo testować np. różne wersje nagłówka, bądź różne wyglądy przycisków na stronie. Warunek jest jeden. Testowany element musi mieć postać kodu. Może być to HTML, może być zwykły tekst z elementami shortcode’ów. Praktycznie wszystkie nowoczesne szablony do WordPressa spełniają tej warunek, ale na wszelki wypadek o tym piszę. Poniżej pokażę Ci, jak w praktyce wygląda przeprowadzenie takiego testu.

Mierzenie konwersji

Skąd wtyczka „wie”, że nastąpiła sprzedaż (lub inna zadana przez Ciebie konwersja)?

Do tego służy kod, który trzeba umieścić na stronie docelowej. Pobiera się go ze strony testu. Następnie trzeba go umieścić tam, gdzie chciałbyś, żeby Twój użytkownik się znalazł. Czyli na stronie koszyka, podziękowania za zakup lub podziękowania za podanie swojego maila.

Jeżeli umiesz kodować, pewnie wiesz jak to zrobić. Jeżeli nie, zrobisz to łatwo przy pomocy wtyczki Tracking Code Manager. Używam jej w wersji darmowej i jest całkowicie wystarczająca.

Mój test A/B – jaki element strony chciałem sprawdzić?

Strona Berolii to prosty sklep internetowy. Klient wchodzi na stronę główną, dowiaduje się wielu rzeczy o produkcie i (mam nadzieję) przechodzi do zakupów.

Kłopot jest z tym, że mój uchwyt występuje w kilku wariantach. Różnią się one:

• kolorem skóry i szycia
• rozmiarem (małe i duże telefony)
• wtyczką (iPhone ma inną wtyczkę niż Samsungi i inne telefony z Androidem).

W sumie daje to ponad 30 produktów. Dotychczas wybór od strony klienta wyglądał tak:

1. Na dole strony głównej była sekcja iPhone i sekcja Android.
2. Dla iPhone można wybrać od razu konkretny model. Ponieważ telefony z Androidem robi wielu producentów, najpierw wybiera się producenta, a na kolejnej stronie konkretny model.
3. Następnie na kolejnej stronie są już uchwyty w konkretnych kolorach, pasujące do wybranego modelu telefonu.

Kilka osób, w tym jeden guru od stron internetowych, mówiło mi, że tak jest źle. Że jest zbyt wiele kroków, w których użytkownik się gubi i opuszcza stronę.

Ok, pomyślałem, że skoro tyle osób to mówi, to pewnie mają rację.

Ale ponieważ mam wredny i nieufny charakter, postanowiłem najpierw zrobić test A/B i sprawdzić, czy te rady faktycznie są takie dobre.

Jak to zrobiłem technicznie?

We wtyczce dodałem nowy test typu „shortcode”. Potem umieściłem obydwa shortcode’y (dla wersji „Master” i dla „Variation”) w kodzie strony głównej.

Strona Berrolii oparta jest na szablonie Highend. Strony tworzy się w nim łatwo, przy pomocy wbudowanego wizualnego edytora WPBakery.

Jedną z zalet tego edytora jest to, że zamiast domyślnego edytora graficznego można stronę wyświetlić w postaci tekstu przeplatanego shortcode’ami, które odpowiadają za wygląd strony. Jest to kod znacznie łatwiejszy do odczytania dla laika niż prawdziwy HTML.

W kodzie strony dodałem coś takiego:

Pierwszy fragment opisuje wersję „Master”, która na stronie docelowej wyglądała tak:

A tutaj jest wersja „Variation”

która zamiast listy modeli telefonów wyświetla od razu pojedynczy produkt. W tym producie klient może z rozwijanego menu wybrać kolor i rozmiar – zarówno wtedy kiedy ma iPhone’a, jak i wtedy, gdy szuka czegoś do Androida.

Wyniki testu

Tak opisany test trwał prawie całe wakacje. Byłem przekonany, że da zdecydowany wynik, w końcu obie wersje strony bardzo się od siebie różniły.

I co?

I nic 😉

Pomimo dużej zmiany i posłuchania dobrych rad, wskaźnik konwersji nie zmienił się ani trochę. W pierwszej wersji wynosił 1,38%, w drugiej 1,34%.

Więc póki co, zostawiłem stary wygląd strony.

Zmiana na nową (pojedynczy produkt na stronie głównej) niosła poza tym ze sobą kilka problemów. Wtyczka sklepu WooCommerce, której używam, nie najlepiej obsługuje produkty z wariantami. Trudniej się wtedy edytuje produkty, z poza tym są ciągłe problemy z wtyczką WPML, która obsługuje różne języki. Dlatego tym razem uznałem, że nie warto zmieniać.

Czy to znaczy, że nie warto próbować? Warto. Miałem wcześniej zmiany, które przekładały się na wzrost konwersji o 30-50%.

Ale na pewno nie warto robić dużych zmian bez testowania. Bo może się okazać, że cały duży wysiłek projektowania pójdzie na marne. Albo nawet, że nowa wersja będzie gorsza od starej. Bo tak też mi się zdarzało.

A więc – testuj, zanim zaczniesz zmieniać to, co już działa 🙂

Powodzenia!

Jak oceniasz ten artykuł?
[ratings]