Testowanie dzielone za pomocą arkuszy stylów CSS

Opublikowany: 2021-07-19

Najszybszym sposobem znacznego podziału testów witryny jest wprowadzenie odważnych zmian w kaskadowym arkuszu stylów (CSS) w ramach eksperymentu obejmującego całą witrynę.

Dlaczego arkusze stylów CSS są ważne

Główny plik CSS witryny internetowej jest centralnym punktem odniesienia, który kontroluje wspólne style, pozycje i zachowanie wszystkich elementów na każdej stronie internetowej.

W głównym pliku CSS znajdują się ustawienia wszystkich czcionek, marginesów, kolorów, wyrównań i wielu innych. Jest to najważniejszy plik w większości witryn z szablonami i może drastycznie zmienić wygląd witryny za pomocą niewielkiej zmiany.

Testy podziału całej witryny, które należy wykonywać za każdym razem

Istnieje wiele wspólnych elementów w witrynie, które odgrywają dużą rolę w tym, jak łatwo jest ją czytać, używać, nawigować, wyróżniać wezwania do działania i wyświetlać wszystkie kluczowe informacje.

Kiedy użytkownik decyduje, czy nawiązać kontakt, a może dokonać zakupu w witrynie, którekolwiek z powyższych może być czynnikiem decydującym o zatrzymaniu tej konwersji. Poniżej przedstawiamy kilka kluczowych kwestii dotyczących elementów obejmujących całą witrynę:

Przyciski wezwania do działania

Wszystkie konwersje online zaczynają się od przycisku wezwania do działania (CTA), linku lub widżetu. Rozmiar, kolor, sformułowania, a nawet położenie tych CTA mają duży wpływ na współczynniki konwersji. Na przykład niektóre kolory przycisków CTA mogą zbyt mocno wtapiać się w tło lub mogą podświadomie zniechęcać użytkownika do ich klikania, w zależności od tego, co odbiera jako kolor negatywny. Znaczenie ma również tekst na linkach i przyciskach. Na przykład zmiana przycisku „WYŚLIJ” w formularzu na „WYŚLIJ” daje lepsze wyniki, ponieważ „prześlij” jest postrzegane jako słowo dosadne. Możesz przeczytać więcej na ten temat w ostatecznym przewodniku po CTA tutaj na VWO.com.

W przypadku przycisków „Kup teraz” występuje niewielka zmiana koloru zielonego. Kombinacja 2 dała 1,5% więcej produktów dodanych do koszyka niż oryginalna kombinacja 1 — Istnieje niewielka zmiana koloru zielonego używanego dla przycisków „Kup teraz” (podświetlonych). Kombinacja 2 dała 1,5% więcej użytkowników dodających produkty do koszyka niż oryginalna kontrola, Kombinacja 4 była gorsza o 1,4%

Rozmiar czcionki

Ten rzadko testowany element odgrywa dużą rolę w dostępności dla wielu użytkowników. Czcionki są często zbyt małe, aby niektórzy użytkownicy mogli je przeczytać, więc być może będą musieli użyć funkcji powiększania, jeśli ją znają, ale nie zawsze jest to możliwe lub łatwe na urządzeniach mobilnych. Zbyt duże rozmiary czcionek mogą być również szkodliwe, ponieważ mogą spowalniać szybkość czytania , zwłaszcza w wersjach witryn dostosowanych do urządzeń mobilnych. Przeczytaj więcej o nauce kryjącej się za rozmiarami czcionek tutaj na imarc.com.

Typ czcionki

Znowu styl czcionki jest rzadko testowany na wielu stronach internetowych, wydaje się, że jest ustalany we wstępnej fazie projektowania, a następnie na wielu stronach internetowych zapominany. Różne style czcionek mają różne poziomy czytelności. Ponadto niektóre czcionki są dostępne tylko na niektórych urządzeniach, a niektóre wyświetlają się naprawdę źle na niektórych urządzeniach w określonych rozmiarach bez rasteryzacji czcionek. Możesz użyć rodziny czcionek, aby użyć serii czcionek, zaczynając od ulubionej, a kończąc na prostszych czcionkach, takich jak Arial, które są zawsze na każdym urządzeniu Nowe czcionki można umieszczać na stronie internetowej za pomocą JavaScript lub usługi takiej jak Czcionki Google. Możesz dowiedzieć się więcej w tym poście na TypeWolf.com na temat dziesięciu najlepszych czcionek internetowych 2016 roku.

Styl czcionki

Style czcionek, takie jak wysokość linii, podkreślenie, pogrubienie, kolor i marginesy również wpływają na dostępność i czytelność. Linki są częściej klikane, gdy są niebieskie i podkreślone, co zostało przez lata skrupulatnie testowane przez Google i eBay, a w 2016 r. Google testował nawet czarne linki. Jeśli linki nie wyróżniają się wyraźnie jako linki w Twojej witrynie , należy je przetestować, a po zmianie często wykazują większe zaangażowanie.

Konwersje wzrosły o 1,9% dzięki prostej zmianie czcionki na tej stronie

Kolory tła

Często strony internetowe są tworzone na białym tle, ale jeśli spojrzysz na swoją ulubioną witrynę z wiadomościami lub platformę społecznościową, często ma ona delikatny odcień niebieskiego lub szarego. Kolory tła mogą wyróżnić niektóre obszary strony internetowej, takie jak pole informacyjne lub baner z ofertą specjalną. Ponadto kolor tła może wzmocnić markę lub typ prezentowanego produktu, a ta korelacja poprawia współczynniki konwersji, ponieważ treść wydaje się bardziej trafna. Dowiedz się więcej o psychologii kolorów na stronach internetowych z tego artykułu na Jimdo.com i zobacz, jak kolory takie jak pomarańczowy oznaczają dobry interes (pomyśl o Amazonie), a niebieski oznaczają neutralność i technologię (pomyśl o Facebooku lub Twitterze).

Zmiana położenia lub ukrywanie elementów

Plik CSS kontroluje marginesy i dopełnienie wszystkich wspólnych elementów na stronach internetowych, a także pozwala całkowicie usunąć niektóre elementy za pomocą polecenia „display:none”. Niektóre sposoby na wykorzystanie tego to zmniejszenie ilości miejsca marnowanego w pionie, usunięcie niepotrzebnych informacji, zmiana odstępów między ważnymi wezwaniami do działania lub eksperymentowanie z usuwaniem niektórych bloków treści. Czasami mniej znaczy lepiej na stronach internetowych (zasada trzymaj się prostoty i głupoty) i dobrą praktyką jest sprawdzenie, ile można usunąć ze strony przy jednoczesnym zwiększeniu współczynnika konwersji.

Zaangażowanie wzrosło o ponad 16% po dodaniu treści do tej strony — Zaangażowanie wzrosło o ponad 16%, gdy treść została uwzględniona na stronach kategorii

Platformy do testowania dzielonego plików CSS w całej witrynie

Bardzo ważne jest, aby szablony w witrynie były spójne dla każdego użytkownika, gdy przechodzi on ze strony na stronę. Mogłoby to być szkodliwe (i na pewno kiepskie w eksperymencie), gdyby tylko jedna strona była testowana z podziałem A/B, podczas gdy inne pozostały takie same.

Wymagane jest specjalne oprogramowanie do testowania podziału, aby zachować spójność zmian w pliku CSS na poszczególnych stronach dla każdego użytkownika, niestety bezpłatne „Eksperymenty z treścią” Google Analytics nie obsługują tego typu testów podziału. Oto kilka narzędzi, których możesz chcieć użyć:

Visual Website Optimizer (VWO) – vwo.com – Uznaliśmy, że jest to najłatwiejsze do wdrożenia oprogramowanie do testów dzielonych. Obsługuje wszystkie typy testów dzielonych w HTML, CSS lub JavaScript, a także generuje mapy ciepła użytkownika, jeśli jest to wymagane. Struktury cen można znaleźć tutaj
Optimizely –optimly.com – Obsługuje również wszystkie typy testów dzielonych w HTML, CSS lub JavaScript i może wykonywać bardzo zaawansowane testy dzielone, jeśli jest to wymagane. Informacje o cenach można znaleźć tutaj

Wniosek

Konfiguracja testu podziału CSS dla całej witryny jest łatwa i skuteczna, ale możesz potrzebować 15 minut pomocy od programisty, jeśli nie znasz CSS.

Gdy witryna ma odpowiednie czcionki, style i wezwania do działania, możesz skoncentrować się na kluczowych stronach docelowych witryny i innych, bardziej niszowych elementach. Zwiększa to współczynniki konwersji i sprawia, że strona jest znacznie bardziej efektywna bez dodatkowego ruchu.

Jeśli potrzebujesz pomocy, nie wahaj się z nami skontaktować.