Przycisk CTA – projektowanie i przykłady

UX/UI Otwarty dostęp

Jeśli prowadzisz działania promocyjne online, na pewno spotkałeś i spotkałaś się z pojęciem CTA. W tym artykule wyjaśnimy, czym dokładnie jest przycisk CTA i jak go dobrze zaprojektować pod landing page oraz pokażemy Ci najlepsze przykłady CTA. Przyjemnej lektury!

 

CTA button – czym jest?

Button CTA (Call to action), czyli po polsku wezwanie do działania, jest przyciskiem, który ma za zadanie spowodować określoną akcję użytkownika, na przykład kupno produktu, pobranie raportu, umówienie się na wizytę.

POLECAMY

CTA występują na landing page’ach, w mailach i reklamach.

Można powiedzieć, że przycisk CTA jest głównym elementem kreacji, bo właśnie po jego kliknięciu dzieje się akcja, na której najbardziej nam zależy. 

Projektowanie CTA według dobrych praktyk, pozwoli nam skłonić użytkownika do działania i tym samym zwiększyć konwersję.

Jak zaprojektować idealne CTA?

Pewnie nie zdziwi Cię fakt, że przepis na uniwersalne dla wszystkich, najlepiej konwertujące CTA… raczej nie istnieje :-)

Mamy jednak kilka wskazówek, które pomogą Ci umieścić CTA w odpowiednim miejscu i zaprojektować je tak, aby przyniosły maksymalne korzyści.

1. Miejsce na landing page’u.

Większość CTA jest umieszczana above the fold, czyli w tym miejscu strony, które jest wyświetlane zaraz po tym, kiedy użytkownik otworzy je w przeglądarce. 

Ta część landing page’a cieszy się większym zaangażowaniem niż treści, które umieszczone są na dole. Z tego powodu, przycisku CTA nie umieszczamy na samym dole strony – klikalność i ilość osób, które scrollują stronę do końca jest naprawdę niska.

W tym przypadku zasada, czym więcej, tym lepiej nie sprawdza się zbyt dobrze. Kilka przycisków na jednym landing page’u może rozproszyć użytkownika. Nie nakłaniaj go także do wykonania kilku różnych akcji, skup się na jednej.

2. Oprawa graficzna

Już wiesz, gdzie powinien znajdować się przycisk – teraz możesz zadbać o oprawę graficzną.

Samo tło, na którym umiejscowisz CTA, powinno kontrastować z kolorem przycisku. Dobrym rozwiązaniem jest umieszczanie go na zdjęciu, jak zobaczysz w przykładzie poniżej. Może to być zdjęcie człowieka, który wskazuje na button, czyli w to miejsce, w którym chcemy skupić uwagę użytkownika.

Należy przy tym pamiętać, że samo CTA to za mało - trzeba zadbać o całe otoczenie i projekt layoutu.

 

Pamiętaj!

Kolor przycisku CTA powinien być mocno kontrastujący z kolorem tła, dzięki czemu odróżni się od reszty elementów na stronie.

 

Dobrą praktyką w projektowaniu przycisków jest także dodanie hover – w praktyce jest to zmiana koloru przycisku po najechaniu na niego kursorem. Możesz tutaj użyć kolorów z tej samej palety w odcieniach jaśniejszym i ciemniejszym.

Przycisk CTA występujący przy formularzu powinien być dostosowany do szerokości tego formularza.

 

Potrzebujesz gotowych buttonów?

W programie UXPin masz dostęp do darmowych bibliotek, w których znajdziesz “gotowce” do wykorzystania w swoim projekcie.

 


W środku samego buttonu CTA możesz umieścić ikonkę, która związana jest z celem konwersji i copy. Zaprojektuj swoją ikonę lub skorzystaj z gotowych rozwiązań, np. ze strony flaticon.com.

 

 

3. COPY

Esencją tworzenia przycisku CTA jest dobre copy.

W przypadku zapisów do newslettera, nie tworzymy CTA “zapisz się”. Jest to oczywiste i poprawne z informacyjnego punktu widzenia, natomiast do użytkownika należy mówić językiem korzyści

Co to znaczy?

Napisz, co użytkownik otrzyma, dzięki kliknięciu w przycisk. Dobrą praktyką jest również używanie 1 osoby liczby pojedynczej.

Jeśli planujesz rabat przy zapisie do newslettera, możesz napisać “CHCĘ RABAT -20%”. Oferujesz ebooka do pobrania? Napisz “POBIERAM ZA DARMO” zamiast “POBIERZ”.

I w końcu przykład, jak zastosować CTA na landing page’u zgodnie z dobrymi praktykami.

 

 

Na podsumowanie kilka zasad przy tworzeniu CTA:

  • widoczność (button musi się wyróżniać spośród innych elementów strony),
  • wielkość (przycisk nie może być za mały, bo nie zostanie dostrzeżony),
  • jedno CTA (chcemy przekonać użytkownika do jednej akcji, nie kilku),
  • chwytliwy tekst (piszemy językiem korzyści - nie rozkazujemy).

Skuteczność naszego CTA możemy mierzyć poprzez analizę CTR oraz w narzędziach takich jak Hotjar.

Chcesz dowiedzieć się więcej o projektowaniu User Experience? Koniecznie zajrzyj do artykułu Magdy Białczewskiej “User experience a działanie ludzkiego mózgu”. 

Przypisy