Prawda o najlepszych kolorach przycisków wezwania do działania w Twojej witrynie

Wiele powiedziano w Internecie na temat kolorów, które najlepiej sprawdzają się na stronie internetowej. Znajdziesz na ten temat tysiące artykułów. Od tego, w którym użytkownik pyta, jaki kolor jest lepszy i otrzymuje sprzeczne odpowiedzi (co za niespodzianka, co?), po znany artykuł wyjaśniający testy, które Google przeprowadził z wieloma odcieniami niebieskiego dla swoich linków.

Rzeczywistość za tym wszystkim jest taka, że ​​nikt nie może zapewnić, że określony kolor będzie działał lepiej lub gorzej na stronie internetowej bez wypróbowania go. Jeśli powiedzą ci inaczej, okłamują cię. I jestem pewien, że nie lubisz być okłamywany.

Ja też nie, więc czytając ten artykuł z Yahoo! Małe firmy, w których mówią, że najlepsze kolory do użycia na przyciskach to czerwony, zielony i pomarańczowy lub żółty, pierwszą rzeczą, o której pomyślałem, jest to, że powinienem wypróbować to na naszej własnej stronie internetowej.

Jeśli śledzisz cykl artykułów, które pisałem co miesiąc o testach A/B, z pewnością wiesz już, że jedną z najważniejszych stron w naszym serwisie jest landing page Nelio Content, wraz z jego cennikiem. Na obu stronach przyciski wezwania do działania są pomarańczowe.

Czy kolor czerwony lub zielony będzie działał lepiej w porównaniu z kolorem pomarańczowym, którego już używamy na naszej stronie jako przyciski wezwania do działania? To jest pytanie, które sobie zadałem i na które odpowiem tutaj z prawdziwymi danymi od naszych gości. Nie subiektywna opinia. Prawdziwe dane.

Chodźmy!

Tworzenie testu A/B CSS

Najłatwiejszym sposobem zmiany koloru przycisków na stronie jest dodanie kilku dodatkowych reguł CSS w celu zastosowania nowego koloru. Umieszczasz nową regułę background-color na przycisku z żądanym kolorem i to wszystko. Bułka z masłem.

Dzięki Nelio A/B Testing masz możliwość stworzenia testu A/B stylów CSS w celu przetestowania różnych wariantów dodatkowych reguł CSS. Wystarczy utworzyć nowy test i wybrać opcję CSS w selektorze typu testu:

Spowoduje to przejście do edytora testów, gdzie pierwszą rzeczą, którą musisz zrobić, jest utworzenie wariantów. Należy pamiętać, że w tego typu teście pierwszy wariant to taki, który pokazuje stronę w jej obecnym wyglądzie, bez dodatkowego CSS.

Następnie tworzysz wariant dla, w naszym przypadku, każdego z dodatkowych kolorów, które będziemy testować: jeden dla zieleni i jeden dla czerwieni. Pierwszy wariant jest już pomarańczowy, więc z tym mamy wszystko gotowe.

Dla każdego dodatkowego wariantu możesz przejść do edycji, aby dodać dodatkowe reguły CSS, które zmieniają kolor przycisków. Reguły CSS, których będziesz potrzebować, będą zależeć od motywu, którego używasz w swoim WordPressie. W edytorze CSS, który zapewnia Nelio A/B Testing, możesz zobaczyć w czasie rzeczywistym, jak nowe reguły CSS zmieniają wygląd i działanie Twojej witryny. Pomoże Ci to sprawdzić, czy robisz to dobrze.

Oto jak wyglądają przyciski akcji w edytorze stylów CSS każdego wariantu testu A/B, który konfigurujemy. Jak wspomniano, najpierw masz oryginalną wersję z pomarańczowymi przyciskami. Pozostałe dwa warianty obejmują CSS, aby zmienić odpowiednio przyciski na zielony i czerwony:

Gdy mamy już gotowe warianty, czas na zdefiniowanie celów konwersji, które chcemy mierzyć. W tym przypadku, jak widać na zrzucie ekranu edytora testów, mamy dwa cele.

Pierwszy cel będzie mierzył kliknięcia przycisków akcji, podczas gdy drugi mierzy również te kliknięcia, ale tylko te, które mają miejsce na stronie cenowej Nelio Content.

Na koniec zwróć uwagę, że testy A/B CSS będą miały wpływ na wszystkie strony Twojej witryny. Aby ograniczyć to zachowanie w Nelio A/B Testing, w prawym pasku bocznym edytora testów A/B masz możliwość ograniczenia zakresu testu. Zrobiłem to tak, że dotyczy to tylko strony głównej Nelio Content i strony cenowej.

Mamy wszystko gotowe do rozpoczęcia testu. Gdy to zrobimy, Nelio A/B Testing jest odpowiedzialny za podział ruchu, który odwiedza te dwie strony dla Ciebie i pokazywanie różnych wariantów kolorystycznych, a także śledzenie konwersji (kliknięcia przycisków).

Pamiętaj, że wystarczy poczekać, aż odwiedzający przejdą przez te strony, aby zacząć widzieć wyniki.

Analiza wyników

Testy A/B kolorów przycisków prowadziliśmy na naszej stronie przez półtora miesiąca na stronie hiszpańskiej i prawie miesiąc na stronie angielskiej. W wersji angielskiej wstrzymaliśmy to wcześniej, ponieważ osiągnęliśmy statystycznie istotne wyniki szybciej z wysoką wartością ufności.

Ale zacznijmy od wyników testu w naszej sieci w języku hiszpańskim:

Jak widać na powyższym zrzucie ekranu, w celu mierzenia kliknięć na obu stronach, wydaje się, że zielone i czerwone warianty przycisków działają nieco lepiej niż oryginalna pomarańczowa wersja. Jednak statystyki mówią nam, że poprawa nie jest znacząca i dlatego nie możemy powiedzieć, że te kolory są lepsze niż pomarańczowe.

W przypadku drugiego celu, który mierzył tylko kliknięcia na stronie z cenami Nelio Content, widzimy, że nie ma też wyraźnie wygrywającego koloru. Możemy nawet zaobserwować, jak zielony tutaj radzi sobie gorzej niż pomarańczowy. Chociaż nie możemy wyciągnąć mocnych wniosków na podstawie danych, które firma Nelio A/B Testing zebrała od naszych gości:

Przejdźmy teraz do wyników testu w angielskiej wersji strony. Tutaj, w pierwszym celu, który mierzył kliknięcia na jednej z dwóch stron Nelio Content, widzimy, że zarówno zielony, jak i czerwony to kolory, które zapewniają lepszy współczynnik klikalności.

Ponadto możemy tutaj potwierdzić, że kolor zielony jest zwycięskim kolorem testu. Wyniki są statystycznie istotne przy stopniu ufności większym niż 99%. Zielony to najlepszy kolor, jakiego możemy użyć na naszej stronie internetowej w języku angielskim dla przycisków na stronach Nelio Content.

Jeśli spojrzymy tylko na kliknięcia na stronie wyceny Nelio Content (drugi cel testu), zobaczymy, że wyniki są zgodne z wynikami pierwszego celu testu:

Widząc to, możemy powiedzieć, że zielony to kolor, który najlepiej sprawdził się dla naszych odbiorców w języku angielskim na stronach Nelio Content. Jednak dla naszej hiszpańskiej publiczności nie byliśmy w stanie znaleźć koloru, który działałby lepiej niż ten, który już mieliśmy.

Wnioski

Tutaj pokazałem wyniki testu A/B z prawdziwymi danymi od odwiedzających, którzy surfowali po dwóch najbardziej odpowiednich stronach naszej witryny. I udało Ci się sprawdzić, czy to, co działa najlepiej dla określonej grupy odbiorców, nie musi działać najlepiej dla innej.

Zielone przyciski najlepiej sprawdzają się w przypadku naszych anglojęzycznych gości. Ale to nie znaczy, że jest tak samo dla innych odwiedzających. Z tego powodu zmieniliśmy tylko kolor przycisków czynności na stronach Nelio Content na zielony w angielskiej wersji tych stron. Te w języku hiszpańskim pozostają pomarańczowe.

Byłbym głupi, gdybym powiedział ci, że musisz użyć zielonego koloru na swojej stronie. Nikt nie powinien ci tego mówić. Nie ja, nie ktokolwiek. Nie mam pojęcia, czy zielony będzie dla Ciebie odpowiedni.

Z tego powodu, zanim zwrócisz uwagę na wielu guru, których znajdziesz w Internecie, zrób test sam. Tworzenie testu A/B jest bardzo proste. I to jedyny sposób, aby dowiedzieć się, co działa (lub nie) lepiej w Twojej witrynie. Z twoją prawdziwą publicznością.

Polecane zdjęcie Roberta Katzki na Unsplash.