Jeśli nie wiesz, co zmienić, spróbuj zmienić kolorystykę swojej witryny

Jednym z największych problemów, jeśli chodzi o poprawę wydajności witryny, jest brak wiedzy, jakie zmiany należy wprowadzić. To przydarzyło się nam wszystkim w pewnym momencie. W takich przypadkach właściwą rzeczą jest skupienie się na tych częściach sieci, które są najbardziej krytyczne. Mam tu na myśli te sekcje Twojej strony, które przyciągają najwięcej uwagi lub są najważniejsze dla Twojego modelu biznesowego.

Na przykład, jeśli Twoim celem jest, aby osoby odwiedzające Twoją witrynę wypełniły formularz, skup się na samym formularzu: uwydatnij go i maksymalnie uprość, aby był łatwy do wypełnienia i przesłania. Jak powiedziałem wcześniej, najpierw szukaj elementów, które po zmianie mogą mieć większy wpływ na odwiedzających, ponieważ szybciej uzyskasz interesujące wyniki.

Jeśli nadal nie wiesz, co zmienić, czymś, co nigdy nie zawodzi i bardzo łatwo jest spróbować, to zastosować zmiany w kolorach swojej strony internetowej. Bez zamiaru pominięcia osób niedowidzących jasne jest, że kolory Twojej witryny są bardzo ważne. Dużo więcej, niż możesz sobie wyobrazić.

Istnieje kilka badań dotyczących teorii kolorów i sposobu, w jaki my, ludzie, ją postrzegamy. To, co może wydawać się tylko interpretacją różnych długości fal uchwyconych przez nasz układ wzrokowy (oczy, nerw wzrokowy i mózg), kryje w sobie ogromne podłoże psychologiczne.

Z tego powodu zachęcam do zmiany kolorów swojej strony internetowej (lub niektórych elementów o dużym znaczeniu) i zbadania, jak ewoluuje interakcja odwiedzających w obliczu tych zmian. To właśnie zamierzam wam dzisiaj wyjaśnić na kompletnym i prawdziwym przykładzie, który przetestowaliśmy na tej stronie.

Definicja testu A/B

Aby przetestować jakiekolwiek zmiany na swojej stronie, powinieneś użyć testu A/B. W ten sposób możesz zagwarantować, korzystając z prawdziwych danych i stosując metodę naukową, że zastosowane zmiany działają lepiej (lub nie) niż Twoja aktualna wersja.

W dzisiejszym przykładzie zamierzamy przetestować zmianę kolorów pierwszej zakładki na stronie cenowej Nelio A/B Testing. Ta pierwsza zakładka ma ogromny wpływ na naszą działalność, ponieważ odpowiada za wyświetlanie tabeli cen, dzięki której nasi goście stają się klientami przy zakupie wtyczki.

W poniższym porównaniu możesz zobaczyć oryginalną wersję pierwszego zgięcia (po lewej) i wersję alternatywną (po prawej) z różnymi kolorami przycisków i marginesów oraz nowym obrazem tła:

Aby przetestować zmiany, użyliśmy Nelio A/B Testing jako naszej referencyjnej wtyczki testowej A/B. Pierwszą rzeczą, jaką zrobimy, jest utworzenie nowego testu A/B stron, czyli elementu, który zamierzamy przetestować.

Robimy to, ponieważ możemy zmienić kolory za pomocą samego edytora stron WordPress. Gdybyśmy nie mogli tego zrobić w ten sposób, ponieważ kolory przechodzą przez szablon motywu lub w inny, mniej ortodoksyjny sposób – doświadczenie mówi nam, że style kolorów można definiować w WordPressie na kilka sposobów – inna opcja, która zawsze będzie działać, to skorzystaj z testu A/B stylów CSS, w którym możemy zastosować nowe kolory, dodając nowe reguły stylów CSS w wariancie.

Na ekranie edycji testu A/B wybieramy stronę bazową, którą chcemy przetestować (naszą stronę cenową) i tworzymy nowy wariant, który później edytujemy:

Innym ważnym aspektem, który należy podkreślić, jest określenie, które metryki mają śledzić narzędzie do testowania A/B, aby później dowiedzieć się, która z dwóch wersji działała lepiej. Definiujemy to w sekcji celów konwersji i działań, jak widać na powyższym zrzucie ekranu.

W naszym przypadku zdefiniowaliśmy pięć celów, co da nam pięć różnych wyników dla tego samego testu A/B. Najpierw definiujemy cel, który mierzy liczbę kliknięć w przyciski zakupu dowolnego planu, który znajduje się w tabeli cen. Następnie mamy 3 dodatkowe cele, które mierzą kliknięcia dla każdego planu indywidualnie. I wreszcie mamy cel, który mierzy rzeczywistą liczbę zakupów dokonanych po obejrzeniu każdej testowanej wersji strony.

Na koniec edytujemy alternatywną wersję strony. To prowadzi nas do edytora stron WordPress, którego używamy (w naszym przypadku do edytora bloków), jak widać na poniższym zrzucie ekranu:

Tutaj musimy tylko zmienić kolory przycisków akcji każdej z trzech kolumn i elementu, którego używamy do tworzenia górnego marginesu. Zmieniliśmy również obraz tła na inny, który przesłaliśmy do naszej biblioteki multimediów WordPress.

Gdy alternatywna strona ze zmianami, które chcemy przetestować, jest gotowa, czas wrócić do ekranu edycji testu A/B i go uruchomić. To automatycznie podzieli ruch na naszą stronę z cenami na dwie części. Połowa naszych gości będzie wchodzić w interakcję z oryginalną wersją, druga połowa zobaczy wariant.

W ten sposób możemy sprawdzić, która wersja strony działa lepiej w odniesieniu do pięciu celów konwersji. Teraz pozostaje nam tylko czekać, aż wyniki dostarczą nam poszukiwanych informacji.

Analiza wyników badań

W końcu, jeśli jeden wariant jest lepszy od drugiego, samo narzędzie testujące A/B nam to powie. W opisanym wcześniej teście A/B wyniki były jednoznaczne. Wersja z nowymi kolorami jest gorsza niż ta, którą już mieliśmy. Możesz zobaczyć szczegóły wyników dla każdego z pięciu celów zdefiniowanych w teście w poniższej galerii:

Wariant nie tylko uzyskał mniej kliknięć w przyciski akcji, ale także skutkował mniejszą sprzedażą (prawie o 22% mniej).

Może się to wydawać głupie, ale jeśli zamiast testować zmiany testem A/B zmienisz je bezpośrednio na swojej stronie bez wcześniejszego testowania, istnieje ryzyko wprowadzenia zmian, które mogą działać gorzej. Mogło tak być w naszym przypadku, ponieważ zmiany, które chcieliśmy wprowadzić, nie działały tak dobrze, jak myśleliśmy.

Może się okazać, że zmiana kolorów w dowolnym momencie jest dobrym rozwiązaniem, ponieważ po prostu bardziej lubisz nowe. Znalazłeś nową paletę kolorów, która Twoim zdaniem jest o wiele lepsza ze stylistycznego punktu widzenia i zdecydowałeś się na jej bezpośrednie użycie. Ale to duży błąd. To, że lubisz jeden kolor bardziej niż inny, nie jest ważne. Ważne jest, aby dokładnie sprawdzić, czy rzeczywiście tak jest w przypadku odbiorców i odwiedzających. Możesz to zrobić w kontrolowanym środowisku za pomocą testu A/B.

Polecane zdjęcie Jeremy'ego Thomasa na Unsplash.