Wezwanie do działania: dlaczego Twoje przyciski nie działają

Tomek prowadzi firmę hydrauliczną we Wrocławiu. Zamówił u nas landing, a trzy tygodnie po starcie napisał: "Ludzie wchodzą, statystyki pokazują ruch, a telefon milczy. Chyba ta strona nie działa". Otworzyłem jego stronę na telefonie. Wszystko było poprawne: ładny nagłówek, zdjęcia, opis usług, formularz. Na dole formularza szary przycisk z napisem "Wyślij". Zmieniliśmy jeden element - napis na przycisku i dwa zdania wokół niego. Nic więcej. W kolejnym miesiącu Tomek dostał czternaście zapytań zamiast trzech. Ten artykuł jest o tym, dlaczego tak się dzieje i jak to powtórzyć u siebie.

Co to jest CTA i dlaczego jeden przycisk bije dziesięć

CTA (call to action, wezwanie do działania) to miejsce, w którym prosisz odwiedzającego o konkretny ruch: kliknij, zadzwoń, zamów, pobierz, umów. Nie jest to "przycisk" w sensie graficznym. CTA to obietnica plus polecenie. Grafika to tylko opakowanie.

Najczęstszy błąd małych firm nie polega na braku CTA, tylko na ich nadmiarze. Widzę strony, na których pierwszy ekran zawiera: "Zadzwoń", "Napisz", "Zobacz ofertę", "Pobierz katalog", "Sprawdź realizacje" i "Zapisz się do newslettera". Sześć równorzędnych propozycji. Efekt jest odwrotny do zamierzonego: człowiek, który dostaje sześć równie ważnych opcji, nie wybiera najlepszej - nie wybiera żadnej. To zjawisko opisywane w psychologii decyzji jako paraliż wyboru, a w praktyce sprowadza się do tego, że użytkownik przewija dalej i zapomina.

Zasada, którą stosuję w każdym projekcie: jedno główne działanie na stronę. Nie jeden przycisk - jedno działanie, powtórzone kilka razy w różnych miejscach. Jeśli celem strony jest wycena, to wszystkie główne przyciski prowadzą do wyceny. Reszta - telefon, portfolio, cennik - istnieje, ale wizualnie jest o poziom niżej.

"Wyślij" kontra "Umów bezpłatną wycenę"

Wróćmy do Tomka. Dlaczego "Wyślij" jest tak słabym przyciskiem? Bo opisuje pracę użytkownika, a nie jego korzyść. "Wyślij" mówi: teraz coś wyprawisz w świat i nie wiadomo, co się stanie dalej. "Umów bezpłatną wycenę" mówi: dostaniesz wycenę, jest bezpłatna, a to co robisz nazywa się umówieniem, więc jest odwracalne i niezobowiązujące.

W jednym sformułowaniu siedzą trzy rzeczy naraz. Rzeczownik korzyści - wycena, a nie wiadomość. Zdjęcie ryzyka - bezpłatna. Czasownik o niskim zobowiązaniu - umów, a nie zamów.

Dokładnie taki sam mechanizm działa w innych branżach. Fotograf ślubny: nie "Kontakt", tylko "Sprawdź, czy mam wolny Wasz termin". Księgowa: nie "Wyślij zapytanie", tylko "Poproś o ofertę dla swojej działalności". Warsztat: nie "Formularz", tylko "Zarezerwuj termin przeglądu". Za każdym razem zamiana ogólnika na konkret, i za każdym razem to samo pytanie kontrolne: co dokładnie dostanę, gdy kliknę?

Test, który polecam każdemu klientowi: przeczytaj napis na swoim przycisku i dopowiedz na głos zdanie "Chcę...". "Chcę wyślij" brzmi absurdalnie. "Chcę umówić bezpłatną wycenę" brzmi normalnie. Jeśli zdanie się nie skleja, przycisk jest zły.

Ile CTA powinno być na stronie i gdzie je stawiać

Odpowiedź zależy od długości strony, ale reguła jest prosta: użytkownik nie powinien przewijać dłużej niż dwa ekrany bez natrafienia na możliwość działania. Nie dlatego, że go pospieszamy. Dlatego, że decyzja dojrzewa u każdego w innym momencie - jeden jest gotowy po nagłówku, drugi dopiero po przeczytaniu cennika, trzeci po zobaczeniu zdjęć realizacji. Przycisk musi być tam, gdzie kończy się argument, który akurat tego człowieka przekonał.

Rozkład, który stosujemy na landingach:

• Pierwszy ekran - główne CTA obok nagłówka, dla tych, którzy już wiedzą, czego chcą.
• Po sekcji z korzyściami lub procesem - tu odpada pierwsza porcja wątpliwości.
• Po cenniku - moment największej gotowości, bo pytanie o pieniądze właśnie zostało zamknięte.
• Po opiniach lub realizacjach - zaufanie właśnie osiągnęło szczyt.
• Na końcu strony - dla tych, którzy czytają wszystko do końca; tych jest mniej, ale konwertują najlepiej.
• Pasek stały na telefonie - jeden przycisk zadokowany na dole ekranu, zwykle telefon lub "Napisz".

To zwykle cztery do sześciu wystąpień tego samego CTA. Powtarzanie nie jest natrętne, dopóki wszystkie prowadzą do tego samego celu. Natrętne robi się wtedy, gdy każde CTA proponuje coś innego.

Pierwszy ekran - jaki przycisk tam potrzebujesz

Pierwszy ekran ma najbardziej niewdzięczne zadanie: prosi o działanie kogoś, kto jeszcze niczego o Tobie nie wie. Dlatego stawianie tam przycisku "Kup teraz" albo "Zamów usługę" zwykle nie działa - poziom zobowiązania jest niewspółmierny do poziomu zaufania.

Sprawdzają się dwa układy. Pierwszy: jedno CTA o niskim progu, na przykład "Sprawdź cenę w 30 sekund" albo "Umów bezpłatną rozmowę". Drugi: CTA główne plus CTA drugorzędne, wizualnie słabsze - "Umów wycenę" jako wypełniony przycisk i obok, w formie zwykłego linku, "Zobacz realizacje". To drugie jest wentylem dla osób, które jeszcze nie są gotowe, a bez niego po prostu wyszłyby ze strony.

Czego unikać na pierwszym ekranie: trzech i więcej przycisków, przycisku prowadzącego do newslettera i przycisku "Dowiedz się więcej", który prowadzi na sam dół tej samej strony. Ten ostatni jest szczególnie kosztowny, bo zabiera kliknięcie i nie oddaje w zamian nic poza przewinięciem, które użytkownik zrobiłby i tak.

Język korzyści kontra język czynności

"Zapisz się" to język czynności - opisuje to, co robi użytkownik. "Odbierz checklistę przed remontem" to język korzyści - opisuje to, co użytkownik dostaje. Różnica w skuteczności bierze się stąd, że nikt nie chce się zapisywać. Ludzie chcą mieć checklistę.

Nie znaczy to, że każdy przycisk musi być rozbudowanym zdaniem. Trzy do pięciu słów to zdrowy zakres. Powyżej pięciu przycisk zaczyna wyglądać jak akapit i traci na czytelności, szczególnie na telefonie, gdzie tekst zawija się w dwie linie.

Druga rzecz: pisz w pierwszej osobie tam, gdzie to naturalne."Chcę wycenę" działa u części odbiorców lepiej niż "Zamów wycenę", bo brzmi jak ich własna decyzja, a nie polecenie od firmy. Nie jest to reguła uniwersalna - w usługach premium bywa odwrotnie, bo forma pierwszoosobowa może zabrzmieć infantylnie. To akurat rzecz, którą warto sprawdzić u siebie, a nie przyjąć na wiarę.

Trzecia rzecz: unikaj słów, które brzmią jak zobowiązanie finansowe, jeśli nim nie są. "Zamów" sugeruje transakcję. "Umów" i "Poproś" sugerują rozmowę. Przy pierwszym kontakcie prawie zawsze wygrywa rozmowa.

Strach i tarcie - co naprawdę blokuje kliknięcie

Kiedy ktoś nie klika, rzadko chodzi o kolor. Prawie zawsze chodzi o jedną z czterech obaw. Warto je znać, bo każdą da się zdjąć jednym zdaniem.

"Nie znam ceny i boję się, że to poza moim budżetem."Człowiek, który nie ma pojęcia, czy mówimy o 500 zł czy o 15 000 zł, nie wyśle zapytania - bo boi się kompromitacji. Lekarstwo: widełki cenowe gdziekolwiek na stronie, choćby ogólne. Albo zdanie pod przyciskiem: "Projekty realizujemy w przedziale 545-4000 zł". Sama informacja o rzędzie wielkości odblokowuje ludzi.

"Zaraz zacznie do mnie dzwonić handlowiec."To realny lęk, wyrobiony przez lata natrętnego telemarketingu. Lekarstwo: napisz wprost, jak wygląda kontakt. "Odpisujemy mailem. Dzwonimy tylko wtedy, gdy sam poprosisz." To jedno zdanie potrafi zmienić więcej niż przeprojektowanie połowy strony.

"Nie wiem, co się stanie po kliknięciu."Niepewność jest wrogiem konwersji. Lekarstwo: opisz następny krok. "Klikasz, wypełniasz trzy pola, w ciągu 24 godzin dostajesz wycenę na maila." Trzy pola. Dwadzieścia cztery godziny. Konkret zamiast domysłów.

"To pewnie długie i skomplikowane." Formularz z jedenastoma polami, w tym NIP i adres korespondencyjny, na etapie pierwszego kontaktu odstrasza skutecznie. Lekarstwo: trzy pola - imię, kontakt, o co chodzi. Resztę zbierzesz później, gdy już rozmawiacie.

U Tomka zadziałały dwie z tych czterech rzeczy. Zmieniliśmy "Wyślij" na "Opisz problem - oddzwonię dziś" i dopisaliśmy pod spodem: "Wycena awarii przez telefon jest bezpłatna. Dojazd w granicach Wrocławia - 60 zł". Cena dojazdu, którą Tomek bał się podać, okazała się najmocniejszym elementem strony - bo zdejmowała lęk przed niespodzianką przy drzwiach.

Mikrotekst przy przycisku - najtańsza poprawka, jaką znam

Mikrotekst to jedno lub dwa zdania tuż pod przyciskiem, mniejszą czcionką. Kosztuje pięć minut pracy, a bywa skuteczniejszy niż zmiana samego przycisku. Jego zadaniem jest odpowiedzieć na ostatnią wątpliwość, która pojawia się dokładnie w momencie, gdy palec zawisa nad ekranem.

Przykłady, które sprawdzają się w polskich realiach: "Odpowiadam osobiście, zwykle w ciągu 2 godzin w dni robocze". "Bez zobowiązań - wycena nie jest zamówieniem". "Nie wysyłamy newslettera ani ofert". "Wypełnienie zajmuje około 40 sekund". "Twoje dane nie trafią do nikogo poza mną".

Zasada: mikrotekst ma zdejmować obawę, a nie chwalić firmę. "Jesteśmy liderem branży" pod przyciskiem nie robi nic. "Nie dzwonimy bez zapowiedzi" robi bardzo dużo.

Uwaga na jedną rzecz: mikrotekst musi być prawdziwy. Jeśli piszesz "odpowiadam w 2 godziny", a odpowiadasz po trzech dniach, to nie jest poprawka konwersji, tylko przyszła reklamacja.

Kolor i kontrast - co jest prawdą, a co mitem

Krążący od lat mit brzmi: "czerwone przyciski konwertują lepiej niż zielone". Wziął się z jednego popularnego testu, który powtarzano w setkach artykułów bez kontekstu. Prawda jest bardziej prozaiczna i bardziej użyteczna.

Nie liczy się kolor, tylko kontrast wobec otoczenia.Pomarańczowy przycisk na stronie utrzymanej w pomarańczach jest niewidoczny. Ten sam pomarańcz na chłodnym granatowym tle krzyczy. Dlatego w projektach rezerwujemy jeden kolor wyłącznie dla działań i nie używamy go nigdzie indziej - ani w nagłówkach, ani w ikonach, ani w tle sekcji. Dzięki temu użytkownik po dwóch przewinięciach uczy się, że ten kolor znaczy "tu się klika".

Kontrast tekstu na przycisku to nie kwestia gustu, tylko dostępności. Standard WCAG na poziomie AA wymaga minimum 4,5:1 dla zwykłego tekstu. Biały napis na jasnożółtym przycisku wygląda nowocześnie na monitorze projektanta i staje się niewidoczny na telefonie w słońcu.

Mit trzeci: przycisk musi wyglądać nowocześnie. Bardzo płaskie przyciski bez wypełnienia, z samą cienką ramką, potrafią zostać wzięte za dekoracyjne ramki. Główne CTA powinno być wypełnione kolorem, mieć wyraźne zaokrąglenie i widoczny stan po najechaniu oraz po kliknięciu. Trzy stany - spoczynek, najechanie, fokus klawiatury - to minimum, nie fanaberia.

Rozmiar i strefa dotyku na telefonie

Ponad połowa ruchu na stronach małych firm w Polsce to telefony, a w niektórych branżach - gastronomia, usługi awaryjne, beauty - grubo ponad siedemdziesiąt procent. Przycisk projektowany na monitorze bywa na telefonie po prostu nietrafialny.

Konkretne liczby, którymi się kierujemy: Apple zaleca minimum 44 x 44 punkty dla elementów dotykowych, Google 48 x 48 dp, a formalne minimum WCAG 2.2 na poziomie AA (kryterium 2.5.8) to 24 x 24 piksele CSS. W praktyce trzymamy wysokość przycisku na poziomie 48-56 px i szerokość co najmniej 60% szerokości ekranu, bo kciuk nie jest kursorem myszy.

Druga sprawa to odstępy. Dwa przyciski oddalone od siebie o 4 px na telefonie oznaczają przypadkowe kliknięcia i frustrację. Minimum 8 px, a bezpiecznie 12-16 px. Trzecia: nie umieszczaj głównego CTA w prawym górnym rogu strony mobilnej - to najtrudniej dostępny obszar ekranu dla kciuka. Dolna połowa ekranu jest wygodniejsza i to tam warto zakotwiczyć stały pasek z telefonem albo przyciskiem kontaktu.

I rzecz, o której się zapomina: numer telefonu na stronie musi być klikalnym linkiem "tel:". Przepisywanie numeru z ekranu do klawiatury telefonu to zbędne tarcie, na którym realnie traci się zapytania.

CTA w artykułach blogowych

Blog rządzi się inną logiką niż strona usługi. Człowiek czytający artykuł "jak przygotować się do remontu łazienki" nie szuka jeszcze wykonawcy - szuka informacji. Wciśnięcie mu w środku tekstu przycisku "Zamów remont" jest przedwczesne i zwykle nieskuteczne.

Co działa na blogu: jedno CTA na końcu, powiązane tematycznie z artykułem. Nie ogólne "Skontaktuj się", tylko "Zobacz, ile kosztuje strona wizytówka" pod artykułem o kosztach. Dodatkowo jedno miękkie CTA w środku tekstu - link do powiązanego artykułu albo do konkretnej podstrony usługi, wpleciony w zdanie, a nie w formie krzyczącego banera.

Ewa, księgowa z Gdańska, prowadzi blog o rozliczeniach dla jednoosobowych działalności. Przez rok wszystkie jej artykuły kończyły się zdaniem "Zapraszamy do kontaktu". Zamieniliśmy to na trzy różne zakończenia dopasowane do tematu tekstu - dla artykułów o VAT, o składce zdrowotnej i o wyborze formy opodatkowania. To była zmiana samego zdania końcowego, bez dotykania układu strony. Liczba zapytań z bloga wzrosła z około dwóch miesięcznie do dziewięciu.

CTA na stronach usług

Strona usługi to inne stadium decyzji - ktoś już wie, czego szuka, i sprawdza, czy Ty to robisz. Tutaj CTA może i powinno być bardziej bezpośrednie. Ale też bardziej konkretne: nie "Skontaktuj się", tylko "Umów wycenę montażu klimatyzacji". Nazwa usługi w przycisku potwierdza, że użytkownik trafił we właściwe miejsce.

Warto zadbać o zgodność z tym, co użytkownik przed chwilą przeczytał. Jeśli sekcja opisuje darmową diagnozę, przycisk pod nią ma mówić o darmowej diagnozie, a nie o zamówieniu usługi. Rozjazd między treścią a przyciskiem jest jednym z najczęstszych powodów, dla których dobre strony słabo konwertują - użytkownik odbiera go jako podmianę oferty.

Na stronach usług dobrze działa też CTA alternatywne dla niezdecydowanych: "Nie masz pewności, czy to Twój przypadek? Napisz w dwóch zdaniach, co się dzieje - odpowiem, czy warto". To otwiera rozmowę z ludźmi, którzy nigdy nie wypełniliby formalnego formularza wyceny.

Jak sprawdzić, czy CTA działa - bez skomplikowanej analityki

Nie potrzebujesz testów A/B ani dashboardów, żeby zorientować się, czy przycisk pracuje. Cztery metody, które kosztują zero złotych:

Metoda kalendarza. Zapisz liczbę zapytań z ostatnich czterech tygodni. Zmień jedną rzecz - napis na przycisku. Poczekaj cztery tygodnie i porównaj. Warunek: zmieniaj tylko jedną rzecz naraz, inaczej nie będziesz wiedzieć, co zadziałało. To nie jest statystycznie eleganckie, ale przy małych liczbach i tak żaden test A/B nie da Ci wiarygodnego wyniku szybciej.

Metoda pięciu sekund. Pokaż stronę pięciu osobom spoza branży - rodzinie, sąsiadowi, klientowi. Daj pięć sekund i zabierz telefon. Zapytaj: co ta firma chce, żebyś zrobił? Jeśli choć dwie osoby nie potrafią odpowiedzieć, Twoje CTA jest niewidoczne.

Metoda pytania przy telefonie. Każdego, kto dzwoni, zapytaj: skąd Pan do nas trafił i co przekonało Pana, żeby zadzwonić? Po dwudziestu rozmowach masz dane, których nie da Ci żadne narzędzie - bo dotyczą motywacji, a nie kliknięć.

Metoda darmowych narzędzi. W Google Analytics 4 kliknięcia w przyciski da się śledzić jako zdarzenia, a Google Search Console pokaże, ilu ludzi w ogóle wchodzi. Jeśli ruch jest, a zapytań nie ma, problem prawie na pewno leży w CTA albo w formularzu, a nie w SEO. To rozróżnienie oszczędza ludziom tysiące złotych wydawanych na pozycjonowanie strony, która i tak nie zamienia odwiedzin w telefony.

Dziesięć przykładów: słabe i mocne sformułowania

Poniżej zestawienie, z którego korzystamy przy pisaniu tekstów na strony. Lewa kolumna to sformułowania, które widzę najczęściej. Prawa - ich odpowiedniki, które mówią, co użytkownik dostanie.

Nie kopiuj ich dosłownie. Zamiast tego weź swoją stronę i przy każdym przycisku odpowiedz sobie na trzy pytania: co użytkownik dostanie, ile go to kosztuje i co się stanie zaraz po kliknięciu. Jeśli przycisk nie odpowiada na żadne z nich, jest do przepisania.

Krótka lista kontrolna

• Jedno główne działanie na stronę, powtórzone 4-6 razy w różnych miejscach.
• Napis mówi o korzyści, nie o czynności. Test "Chcę..." się klei.
• Przycisk widoczny na pierwszym ekranie, po cenniku i na końcu strony.
• Mikrotekst pod przyciskiem zdejmuje jedną konkretną obawę i jest prawdziwy.
• Kolor działań zarezerwowany wyłącznie dla działań, kontrast tekstu minimum 4,5:1.
• Wysokość przycisku 48-56 px na telefonie, odstęp od sąsiadów minimum 8 px.
• Numer telefonu jako klikalny link, widoczny bez przewijania.
• Formularz na pierwszy kontakt ma trzy pola, nie jedenaście.
• Na blogu jedno CTA na końcu, dopasowane do tematu artykułu.
• Zmieniasz jedną rzecz naraz i porównujesz przez cztery tygodnie.

Wracając do Tomka: jego strona nie była zepsuta. Zepsuty był jeden napis i brak dwóch zdań, które zdejmowały strach przed nieznanym rachunkiem. Najczęściej właśnie tak to wygląda - problemem nie jest projekt, ruch ani technologia, tylko ostatnie trzy centymetry ekranu, na których użytkownik podejmuje decyzję.