Call to action – przyciski z wezwaniem do działania | UX bez żargonu #3
Wszyscy wiemy, że na stronie sklepu Internetowego pożądane są konkretne akcje użytkownika, np. dodanie produktu do koszyka, zapis do newslettera, zostawienie kontaktu. Samo “skanowanie” strony przez użytkownika nie podnosi konwersji, a jedynie zwiększa liczbę wejść.Co więc decyduje o tym, że użytkownik podejmuje jakąś akcję? Przyciski Call to Action!
Czym jest CTA?
Call to Action to interaktywny element webowych i mobilnych interfejsów, który ma zachęcić użytkownika do podjęcia działania. Po polsku należałoby go nazwać po prostu przyciskiem zachęcającym do akcji. Bez CTA użytkownicy skanowaliby jedynie treści na stronie i opuszczali ją bez żadnego kliknięcia.
CTA ma skłonić do podjęcia konkretnego działania, które podniesie konwersję dla danej strony. W zależności od rodzaju strony i branży cele te mogą być bardzo różne – to nie tylko zakupy!
CTA: Zachęcić, nie zniechęcić
Przyciski CTA mają z definicji zachęcić do podjęcia działania. To dlatego utarło się, że są łatwo zauważalne i atrakcyjne wizualnie dla oka użytkownika. Ale to raczej szczątkowe informacje. Na co z punktu widzenia UX na pewno trzeba zwrócić uwagę przy ich projektowaniu?
1. Rozmiar ma znaczenie
To prawda – przyciski CTA powinny być duże, bo dzięki temu są zauważalne. Ale należy przy tym zachować umiar. Zbyt duże będą psuć wizualną hierarchię elementów, a przecież chodzi o to, aby się jedynie wyróżniały na tle pozostałych.
Trzeba też pamiętać o zachowaniu przestrzeni wokół przycisków. Użytkownik powinien kliknąć dokładnie w to, co chce, a nie trafić przez przypadek gdzieś indziej. Jest to szczególnie ważne w interfejsach mobilnych.
2. Kolor i kształt CTA
Odpowiednio zaprojektowane CTA może wpływać na nastrój użytkownika, wywierać na nim określone wrażenie. Np. czerwony kwadrat wzbudzi pewność siebie, a czarna elipsa skojarzy się z wyrafinowaniem i wiecznością. Psychologia kolorów ma tutaj ogromne znaczenie.
Jeśli chodzi kształty, to przyjmuje się, że:
- kwadraty i prostokąty oznaczają dyscyplinę, odwagę i bezpieczeństwo;
- koła i elipsy są symbolem wieczności, magii i kobiecości;
- kształty abstrakcyjne reprezentują unikalność i wyszukanie.
Najczęściej przyciski wyglądają jak leżące prostokąty – to dlatego, że do takich CTA wszyscy przywykliśmy. Warto zaokrąglić rogi prostokąta, bo dzięki temu uwaga użytkownika skupi się na środku, czyli w miejscu tekstu. CTA powinno być zgodne z estetyką strony, ale na tyle kontrastujące, aby wyróżniało się na tle pozostałych elementów interfejsu.
3. Umiejscowienie Call to Action
Dobrze zaprojektowane CTA powinno znaleźć się na ścieżce, po której porusza się wzrok użytkownika. Dzięki temu mamy pewność, że przycisk zostanie zauważony.
Istnieją dwa najpopularniejsze modele ścieżek: Z i F. W przypadku pierwszej treści jest raczej niewiele. Użytkownik skanuje więc stronę najpierw od lewej do prawej, potem po ukosie na dół i dolną linię znowu od lewej do prawej. Taki układ jest typowy np. dla landing page’y,
W modelu F użytkownik najpierw skanuje górną linię poziomo, a potem schodzi wzrokiem w dół i znowu skanuje poziomą linię, ale krócej. Na koniec porusza się pionową ścieżką, szukając wzrokiem słów kluczowych.
4. Dobre microcopy
Microcopy to niewielkie komponenty tekstowe, które podpowiadają użytkownikowi, co powinien zrobić lub jakich rezultatów może się spodziewać. Są to teksty na przyciskach CTA oraz w menu, instrukcjach i informacjach o błędach.
Microcopy powinno być zwięzłe i zachęcające. W praktyce może być to np. informacja o tym, że rejestracja zajmie mniej niż minutę. Należy unikać rozbudowanych zdań i niejasnego nazewnictwa.