• UI I UX

Zdobądź kliknięcie: 8 Wskazówek dotyczących skutecznego projektowania CTA

  • Felix Rose-Collins
  • 6 min read
Zdobądź kliknięcie: 8 Wskazówek dotyczących skutecznego projektowania CTA

Intro

Dotarcie do pierwszej strony wyników wyszukiwania Google i zdobycie uwagi odbiorców to prawdziwe wyzwanie, ponieważ ludzie rzadko klikają w wynik na stronie drugiej. Optymalizacja witryny pod kątem SEO jest koniecznością do osiągnięcia tego celu.

Nie oznacza to jednak, że miejsce w pierwszej dziesiątce rankingu zapewni Ci domyślnie dobry współczynnik konwersji. To prawda, że możesz spodziewać się wzrostu ruchu na stronie, ale jest jeszcze jeden element kluczowy dla konwersji - skuteczne wezwanie do działania.

Główną rolą CTA jest skierowanie odwiedzających w kierunku kolejnego kroku i zachęcenie ich do podjęcia działania - zapisania się na newsletter, pobrania ebooka, zakupu produktu lub usługi, czy zapisania się na próbę.

Jednak źle zaprojektowane CTA jest tak dobre jak żadne, ponieważ nie będzie generować kliknięć i ułatwiać konwersji.

W tym artykule omówimy najlepsze wskazówki dotyczące projektowania nieodpartych CTA, na które Twoi potencjalni klienci nie będą mogli się powstrzymać od kliknięcia. Czytaj dalej, aby dowiedzieć się więcej!

1. Użyj lepkiego paska bocznego CTA

W CTA chodzi o przykucie uwagi odwiedzających i skłonienie ich do kliknięcia.

Niektóre strony internetowe, takie jak strony główne lub wpisy na blogu, mają dużo treści i łatwo jest, aby CTA wtopiły się w pozostałe elementy i stały się praktycznie niewidoczne.

Poznaj Ranktracker

Platforma "wszystko w jednym" dla skutecznego SEO

Za każdym udanym biznesem stoi silna kampania SEO. Ale z niezliczonych narzędzi optymalizacji i technik tam do wyboru, może być trudno wiedzieć, gdzie zacząć. Cóż, nie obawiaj się więcej, ponieważ mam właśnie coś, co może pomóc. Przedstawiamy Ranktracker - platformę all-in-one dla skutecznego SEO.

W końcu otworzyliśmy rejestrację do Ranktrackera całkowicie za darmo!

Załóż darmowe konto

Lub Zaloguj się używając swoich danych uwierzytelniających

Wprowadź lepkie CTA na pasku bocznym.

Ten pływający przycisk jest przymocowany do boku strony internetowej i pozostaje widoczny, gdy użytkownik przewija stronę w górę i w dół, nie będąc zbyt natrętnym lub rozpraszającym. Nie musisz się martwić, czy potencjalny klient zapomni o Twojej rewelacyjnej ofercie podczas czytania artykułu lub sprawdzania opinii klientów.

ATH Sport daje 10% zniżki na pierwsze zamówienie i promuje tę zachętę na swojej stronie głównej i w całej witrynie, wdrażając lepki pasek boczny CTA czytający "Zapisz 10%". W ten sposób odwiedzający są subtelnie przypominani, aby podjąć działania i ubiegać się o zniżkę.

Use a sticky sidebar CTA (Źródło: ATH Sport)

2. Wykorzystanie przestrzeni negatywnej

Jednym z największych błędów, jakie możesz popełnić ze swoim CTA, jest zakopanie go w środku ogromnego bloku tekstu. To pewny sposób, aby odwiedzający przegapili go i odeszli bez konwersji.

Nie bój się wykorzystywać przestrzeni negatywnej, czyli obszaru projektu, który nie jest zajęty przez tekst lub inne elementy. Otaczając swoje CTA białą przestrzenią, możesz stworzyć wizualną przerwę, która pomoże zwrócić uwagę odbiorcy na przycisk.

Im mniej rozpraszaczy wokół CTA, tym bardziej będzie ono klikalne.

Poznaj Ranktracker

Platforma "wszystko w jednym" dla skutecznego SEO

Za każdym udanym biznesem stoi silna kampania SEO. Ale z niezliczonych narzędzi optymalizacji i technik tam do wyboru, może być trudno wiedzieć, gdzie zacząć. Cóż, nie obawiaj się więcej, ponieważ mam właśnie coś, co może pomóc. Przedstawiamy Ranktracker - platformę all-in-one dla skutecznego SEO.

W końcu otworzyliśmy rejestrację do Ranktrackera całkowicie za darmo!

Załóż darmowe konto

Lub Zaloguj się używając swoich danych uwierzytelniających

Flamingo daje CTA na swojej stronie głównej wystarczająco dużo miejsca na oddech i oddziela go od innych elementów, dzięki czemu zwraca uwagę odwiedzających na główny cel - dodanie ich leave trackera do Slacka. Pomimo dużej ilości białej przestrzeni, projekt nie wygląda na pusty lub niedokończony, więc uderzenie we właściwą równowagę jest kluczowe.

Leverage negative space (Źródło: Flamingo)

3. Stwórz poczucie pilności

Pilność i deficyt są potężnymi sterownikami konwersji, dlatego powinieneś zawrzeć te psychologiczne zasady w swojej kopii CTA.

Weź przykład z Amazona i ich sprytnej stopki "Only 1/2/3 left in stock", która skłania nawet niezdecydowanych klientów do zamówienia produktu od razu, zanim ktoś inny go wyrwie.

Ludzie postrzegają produkty, które są rzadkie lub mają być wyprzedane jako bardziej wartościowe, co z kolei wyzwala strach przed przegapieniem (FOMO). Możesz grać na tym zjawisku poprzez spreparowanie kopii CTA, która obraca się wokół ograniczonej dostępności produktu.

Aby podkreślić pilność, użyj słów terminowych, takich jak Teraz, Natychmiast lub Dzisiaj.

CTA na stronie głównej Bed Bath & Beyond jest świetnym przykładem połączenia zarówno pilności, jak i rzadkości. Klienci są zachęcani do "Shop now", ponieważ oferta jest ważna do 8 stycznia, ale to okno możliwości jest dodatkowo zminimalizowane przez dodanie "While supplies last". Fakt, że samo CTA znajduje się w obrębie dużego czerwonego bannera umieszczonego nad fałdą sprawia, że jest jeszcze bardziej uderzające i przekonujące.

Create a sense of urgency - Bed Bath & Beyond (Źródło: Bed Bath & Beyond)

Styczniowa strona główna zawiera CTA z nieco innym ujęciem pilności. Starannie spreparowane sformułowanie "Dołącz do listy oczekujących" tworzy szum wokół aplikacji i generuje popyt sugerując, że są inni potencjalni klienci niecierpliwie czekający na premierę. To proste, ale intrygujące CTA działa, ponieważ daje nieco ekskluzywny klimat - to jak dostanie się na listę klubu VIP.

Create a sense of urgency - January (Źródło: styczeń)

4. Włączaj słowa mocy

Jak sugeruje ich nazwa, słowa mocy mają zdolność wywoływania emocji u Twoich potencjalnych klientów. 95% decyzji zakupowych jest podświadoma, co oznacza, że uczucia odgrywają ważną rolę w tym procesie.

Zatem, włączając słowa mocy np.

  • Bezpłatnie
  • Niesamowite
  • Nowy
  • Skuteczna
  • Easy
  • Natychmiastowo
  • Gwarantowane
  • Brak ryzyka
  • Certyfikowany
  • Chronione
  • Sprawdzone
  • Sprawdzone
  • Extra

uderzy we właściwy akord z Twoją publicznością i skłoni ją do podjęcia działania.

Jak widzisz, niektóre z tych słów mają na celu przekonanie klientów, że bezpiecznie jest kliknąć w przycisk i dokonać zakupu lub zapisać się na newsletter. Inne skupiają się na podkreśleniu propozycji wartości Twojej oferty.

Strona główna Evernote obiecuje użytkownikom, że dzięki aplikacji będą mogli zorganizować swoje życie, podczas gdy CTA kusi ich do zarejestrowania się za darmo. A kto mógłby odrzucić tak kuszącą ofertę?

Include power words - Evernote (Źródło: Evernote)

Podobnie, CTA na stronie głównej BaseLang zaprasza użytkowników do rozpoczęcia lekcji hiszpańskiego za "jedyne 1$", co jest kolejną najlepszą rzeczą do zaoferowania darmowej usługi. Ogólny przekaz marki nabiera mocy dzięki innym mocnym słowom, takim jak "unlimited" lub "all-you-can-eat", które komunikują wartość oferty, w której potencjalni klienci mogą wypróbować ją przez tydzień i zapłacić symboliczną opłatę w wysokości 1$.

Include power words - BaseLang (Źródło: BaseLang)

5. Spraw, by Twoje CTA było jak najlepsze

Zapewne słyszałeś o zasadzie 15 sekund, według której masz tylko kwadrans na przyciągnięcie uwagi odwiedzających. Nie daje Ci to zbyt dużego pola manewru, co oznacza, że musisz działać szybko i upewnić się, że CTA jest jedną z pierwszych rzeczy, które ludzie zauważają po wylądowaniu na Twojej stronie internetowej.

Chlapanie trochę koloru jest jednym z najlepszych sposobów, aby osiągnąć ten cel. Istnieją różne opinie na temat tego, który kolor zwiększa konwersję, ale jury wciąż nie jest w stanie rozstrzygnąć tej kwestii. Jednak można bezpiecznie stwierdzić, że nie chodzi o to, czy wybierzesz czerwony, zielony, niebieski czy żółty, ale o stworzenie kontrastu.

Na przykład, możesz zastosować tzw. kolory uzupełniające, które znajdują się po przeciwnych stronach koła barw. Jeśli Twoja strona internetowa jest w większości niebieska, to pomarańczowe CTA stworzy silny kontrast.

Strona główna Menlo Caoching jest biała i szara, więc odważna czerwień, którą wybrali dla CTA, sprawia, że jest on natychmiast widoczny. Projekt korzysta również z negatywnej przestrzeni, która dodatkowo akcentuje przycisk CTA i sprawia, że wyróżnia się on na neutralnym tle.

Make your CTA pop (Źródło: Menlo Coaching)

6. Nie bądź niejasny

Nie oczekuj, że Twoi goście sami wyciągną wnioski co do tego, co będzie dalej - powiedz im o tym.

Przyciski CTA mówiące "Kliknij tutaj" lub "Prześlij" będą tylko mylić ludzi, a to najgorsza rzecz, jaką możesz zrobić.

Sztuką jest jasne zakomunikowanie odwiedzającym, jak skorzystają z podjęcia działania i poinformowanie ich o tym, jaki jest następny krok.

Dropbox wykorzystuje to podejście "co z tego będę miał" na swojej stronie głównej, mówiąc swoim potencjalnym klientom, że po kliknięciu przycisku CTA będą mogli znaleźć najlepszy plan dla siebie. To oczywiste, że na następnej stronie znajdą szczegóły planu, funkcje i porównania, które pomogą im w podjęciu decyzji.

Don’t be vague (Źródło: Dropbox)

7. Dodaj dowód społeczny

Jeśli chodzi o konwersję perspektyw, nic nie działa lepiej niż dowód społeczny. 87% decyzji o zakupie zaczyna się od badań online, a klienci czytają średnio dziesięć recenzji przed złożeniem zamówienia.

Ale, ponieważ nie chcesz, aby Twoi potencjalni klienci opuścili Twoją stronę internetową podczas wyszukiwania recenzji i referencji klientów, najlepiej pokazać im dowód społeczny właśnie tam, zanim przedstawisz im CTA.

W ten sposób zbudujesz zaufanie i rozwiejesz potencjalne wątpliwości, jakie mogą mieć co do zakupu.

To jest dokładnie to, co Buffer robi na swojej stronie głównej. Ich CTA są sparowane z cytatami szczęśliwych klientów podkreślającymi, jak korzystanie z platformy ułatwia im życie. Aby dodać kolejną warstwę wiarygodności, marka zawarła nazwiska i zdjęcia klientów. Ta prosta taktyka przechodzi długą drogę, ponieważ stawia twarz do nazwy i sprawia, że dowód społeczny jest bardziej autentyczny.

Add social proof (Źródło: Bufor)

8. Utrzymuj rzeczy proste

Wszystkie wskazówki, które omówiliśmy do tej pory mogą sprawić, że będziesz miał wrażenie, że Twoje CTA muszą być przesadzone, aby zadziałały.

Prawda jest jednak taka, że prostota jest często niedoceniana.

Poznaj Ranktracker

Platforma "wszystko w jednym" dla skutecznego SEO

Za każdym udanym biznesem stoi silna kampania SEO. Ale z niezliczonych narzędzi optymalizacji i technik tam do wyboru, może być trudno wiedzieć, gdzie zacząć. Cóż, nie obawiaj się więcej, ponieważ mam właśnie coś, co może pomóc. Przedstawiamy Ranktracker - platformę all-in-one dla skutecznego SEO.

W końcu otworzyliśmy rejestrację do Ranktrackera całkowicie za darmo!

Załóż darmowe konto

Lub Zaloguj się używając swoich danych uwierzytelniających

W wielu przypadkach uzyskasz świetne wyniki, utrzymując swoje CTA w prostocie zarówno pod względem designu, jak i procesu konwersji.

CTA strony głównej Jiry sprawdza wszystkie pola z ich "Kontynuuj z Google" CTA. Diabeł tkwi w szczegółach i choć pozornie nic wielkiego się tu nie dzieje, skuteczność tego CTA polega na tym, że czyni rzeczy super prostymi dla tych, którzy zdecydują się zapisać.

Zamiast skomplikowanego procesu rejestracji, Jira oszczędza czas użytkowników, umożliwiając im dostęp do platformy poprzez konto Google. Zajmuje to tylko kilka kliknięć i nie ma irytującego wypełniania formularzy odpowiedzialnego za wiele porzuconych rejestracji i koszyków. Dodatkowo, kopia zawiera to magiczne słowo mocy open-sesame, Free, zdolne do przekonania niechętnych do kliknięcia i kontynuowania.

Keep things simple (Źródło: Jira)

Zakończenie

Call to action może być najmniejszym elementem projektowym na Twojej stronie internetowej, ale jego znaczenie jest ogromne. Bez niego potencjalni klienci nie wiedzieliby, czego od nich oczekujesz i jaki powinien być ich kolejny ruch. Dlatego dokładnie przemyśl projekt swoich CTA i nie lekceważ ich. Ta taktyka pomoże Ci zapewnić, że kliknięcia będą się sypać.

Felix Rose-Collins

Felix Rose-Collins

Ranktracker's CEO/CMO & Co-founder

Felix Rose-Collins is the Co-founder and CEO/CMO of Ranktracker. With over 15 years of SEO experience, he has single-handedly scaled the Ranktracker site to over 500,000 monthly visits, with 390,000 of these stemming from organic searches each month.

Zacznij używać Ranktrackera... Za darmo!

Dowiedz się, co powstrzymuje Twoją witrynę przed zajęciem miejsca w rankingu.

Załóż darmowe konto

Lub Zaloguj się używając swoich danych uwierzytelniających

Different views of Ranktracker app