Skuteczny przycisk CTA

przycisk cta

Podwykonawca stwierdził, że treści na buttonach CTA, na landingu którego dostał mogą negatywnie wpłynąć na konwersję. Poprosiłem żeby zaproponował jak możemy poprawić ten przycisk CTA. Zaproponował, ale gorsze i generyczne.

To nie była osoba bez doświadczenia, mój podwykonawca jest na liście 100 najbardziej wpływowych marketerów w Polsce. Jeżeli on nie wie jak zoptymalizować treść call to action, to co mają powiedzieć mniej doświadczeni? Czyli jest temat – krótki, ale ważny.

Jaki kolor ma mieć button CTA

Jakikolwiek, pod warunkiem, że jest kontrastowy i CTA jest dobrze widoczne na stronie. Ja wiem, że jest coś takiego jak psychologia koloru, ale nie ma żadnych dowodów, że wybranie konkretnego koloru zwiększy konwersje, przeciwnie są dowody, że ma to znaczenie marginalne. Istotna jest hierarchia informacji na stronie i czy button się wyróżnia.

A teraz zagadka:

Gdzie na stronie poniżej jest najważniejszy dla niej przycisk CTA?

Najważniejszy element tej strony, przycisk CTA, jest gorzej wyeksponowany niż wszystkie inne elementy.

Odpowiedź:

Pierwszy jest po prawej, w tej szarej sekcji “porozmawiajmy o inwestycjach w nieruchomości”, a drugi w stopce.

Czy są to najważniejsze i dobrze widoczne elementy w hierarchii tej strony?

Nie bardzo. Zupełnie jakby autor nie chciał, żebyśmy w nie kliknęli.

Inny przykład:

Poniżej button call to action, który co prawda jest kontrastowy i ma sensowną treść, ale elementy graficzne, które go otaczają sprawiają, że traci na widoczności.

Przykład jak graficzne elementy blisko przycisku call to action pogarszają jego widoczność.

Te wszystkie kolorowe prostokąty, może i ładne, ale niestety w ich towarzystwie przycisk wzywający do działania niknie.

Treść butonów CTA

Większość teksów CTA na buttonach jest generyczna i niezbyt zoptymalizowana pod konwersję. W takim razie jaka powinna byc treść call to action?

1. Treść przycisku CTA powinna mówić co się wydarzy po jego kliknięciu

Wzywając użytkownika do działania, zamiast ogólników typu “wyślij”, “czytaj więcej”, użyj krótkiego, ale znaczącego tekstu, który wyjaśnia, co się stanie po kliknięciu.

Przykład 1:

Po kliknięciu w przycisk CTA powyżej, spodziewany się, ze będziemy mogli przetestować oprogramowanie, które oferuje strona.

nieprecyzyjny przycisk CTA

Tymczasem button CTA przekierowuje do formularza kontaktowego, gdzie muszę wpisać swoje dane jeszcze jakaś wiadomość do autora (tylko jaką?!).

W tym wypadku chyba lepiej by było zrobić button “request a demo” – to by bardziej odpowiadało prawdzie.

Ktoś mógłby powiedzie, że ludzie nie chcą robić żadnych reqestów, tylko chcą wypróbować. Owszem, ale i tak w tym wypadku muszą poprosi o demo, tylko że są tym zaskoczeni.

Przykład 2:

Podobna sytuacja na obrazku poniżej, tylko gorsza. Tutaj mamy call to action, który wprowadza w błąd. Informuje, co się stanie po jego kliknięciu, ale nic takiego nie ma miejsca (nie wiem po co dodatkowy przycisk “umów rozmowę” skoro mogę po prostu dostać środki).

Przycisk CTA, który nie prowadzi tam gdzie obiecuje

Po kliknięciu w “otrzymaj środki”, nie otrzymujemy środków, tylko przechodzimy do formularza kontaktowego z innym buttonem CTA, który razem z headlinem ma treść:

“dowiedz się ile możesz dostać dodatkowych środków”.

W tym przypadku CTA powinno właśnie dotyczyć tego sprawdzenia, a nie otrzymania środków.

2. Używaj rozpoznawalnych słów kluczowych

Użytkownicy na stronie internetowej chcą zrealizować serię małych akcji, jak na przykład znalezienie ceny. Jeżeli nie są w stanie szybko tego zrobić to opuszczą stronę. Dlatego kluczowe jest żeby nie kombinować za bardzo i nie być zbyt kreatywnym z nazewnictwem tylko używać powszechnie rozpoznawalnych słów i konwencji. Poza tym, ma być krótko, bez zbędnych nic nie wnoszących elementów. Zamiast “kliknij żeby zacząć przygodę”, po prostu “zacznij przygodę”.

3. Nie przechodź od razu do sedna

Ludzie nie lubią zobowiązań, im większe zobowiązanie tym bardziej stają się elektryczni.

Jak ktoś z Was chciałby kiedyś pracować w sklepie, to jak wejdzie klient, to nie lećcie do niego z pytaniem “w czym mogę pomóc”, bo go wypłoszycie, stworzycie wrażenie, że jest zobowiązany coś kupić. Niech poogląda, oswoi się i dopiero wtedy do ataku.

A wracając do świata stron internetowych, to klasycznym przykładem jest “dodaj do koszyka” zamiast “kup teraz”.

4. Niech w CTA będą benefity

Jeżeli się da, to w przycisku też powinna być zawarta jakaś wartość dla klienta, może być że coś jest za darmo, albo co zyskają.

Stara strona główna Netflix, button z benefitami

Dobrym przykładem jest netflix, w przycisku wzywającym do działania mamy benefit oglądania za darmo i to przez 30 dni.

W tej chwili ten netflixowy CTA wgląda inaczej, bo powyższy nie jest pozbawiony błędów – po kliknięciu nie można było ogląda filmów, tylko trzeba się było zarejestrować.

Obecnie to pole na email oraz button “get started”, a benefity są w headlinie powyżej.

5. Pisz w pierwszej osobie

Czasami tak robię, ale nie mam do tego przekonania, moje testy mają za mało danych, żeby były wiarygodne. Natomiast badania buttonów w języku angielskim zdają się potwierdza tezę, teksty w pierwszej osobie są lepsze, czyli zamiast “zapisz mnie” lepiej będzie “zapisuję się”.

Przykład jak pisanie w pierwszej osobie poprawiło konwersję, źródło: unbounce

Gdzie na stronie ma być CTA

To zależy. Button call to action na stronie nie jest oderwany od pozostałych elementów strony. Całość ma znaczenie.

Oczywiście są rozpoznane schematy w jaki sposób użytkownik czyta strony internetowe (np. F pattern, Z pattern) i mogą to być punkty startowe, ale każda strona jest inna. Wszystko zależy od architektury informacji konkretnego przypadku.

F i Z pattern. źródło: Line Design @medium.com

Użytkownika można pokierować w odpowiednie miejsca korzystając z umiejętnego użycia whiete space oraz tzw. visual clues w postaci strzałek, oczu ludzi ze zdjęć skierowanych w odpowiednią stronę i innych elementów. Nie ma niestety jakichś definitywnych i niepodważalnych zasad.

Na pewno warto zacząć od umieszczenia CTA według dobrych praktyk (np. żeby button był na górze i powtórzony na dole), czy nawet skorzystania z gotowych makiet landing page’y jak ta lub ta.

A potem monitorujesz sytuację w heatmapach, mapach ruchu, nagraniach sesji, scroll mapach i modyfikujesz na podstawie zebranych danych.

Mikrocopy

Micro copy to krótkie komunikaty na stronach internetowych informujące jak coś zrobić, dodające kontekst, motywujące do podjęcia akcji, czy zmniejszające obawy.

Przykładowo, takie micro copy to napis przy podawaniu karty kredytowej, że możesz anulować kiedy chcesz albo przy formularzu kontaktowym, kiedy nastąpi kontakt z drugiej strony np. w ciągu 24h.

źPrzykład zastosowania microcopy

To się wydaje błahe, ale działa, często nawet bardziej niż zmiana tekstu na samym buttonie, warto eksperymentować.

Czemu to takie ważne

Według wielu źródeł buttony CTA to najczęstszy testowany element strony, która ma konwertować. Konkretnie to aż 30% wszystkich testów, na kolejnych pozycjach są odpowiednio:

Co więcej, 14% z tych 30% testów nie osiąga poziomu istotności statystycznej, być może stąd biorą się różnego rodzaju nieporozumienia w stylu “zielony button jest lepszy niż czerwony, bo czerwony to sygnał ostrzegawczy…”.

Ludzie intuicyjnie wiedzą, że button call to action jest ważny dla konwersji, tylko z reguły przypisują znaczenie i badają nie temu co trzeba, albo po prostu to olewają.

Czemu tak jest? Nie wiem, ale się domyślam.


Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *