Jak zaprojektować przycisk, który będzie klikany?
Współczynnik konwersji, ilość wysłanych formularzy ze strony czy choćby dodanie produktu do koszyka to najczęstsze zastosowanie przycisków CTA (Call To Action). Od ich wyglądu oraz umiejscowienia zależy czy zostanie on zauważony oraz czy ktoś go kliknie. Jak zabrać się za utworzenie takiego przycisku aby mógł być jak najbardziej skuteczny w swojej roli - przyciąganiu uwagi i klików?
Pierwsze wrażenie. Gdzie umieszczamy przyciski Wezwania do działania
Umieszczenie przycisku CTA jest równie ważne co jego kolor, rozmiar czy krój fontu. Od jego pozycji w strukturze strony zależeć będzie czy ktoś go kliknie czy nie.
Na początek warto przyjąć zasadę, że umieszczamy jeden przycisk wezwania do działania na danej podstronie. Służy to temu, aby użytkownik nie pogubił się w nawigacji, w tym co chcemy aby wykonał. Jak sama nazwa przycisków CTA i wskazuje jest to wezwanie do działania więc musimy określić konkretne działanie i przekazać użytkownikowi że jest tego od niego oczekujemy a naciśnięty przycisk wykona dokładnie to co jest w nim opisane. Oczywiście na stronach firmowych rzadko kiedy zdarza się, że możemy sobie pozwolić na tylko jeden przycisk wezwania do działania w obrębie całej podstrony. Często jest to więcej niż jeden przycisk:
- jeden służący do przejścia do sekcji kontaktu;
- drugi służący do wysłania formularza kontaktowego, który z reguły znajduje się na dole strony.
W przypadku większej ilości przycisków na podstronie musimy jakoś wyróżnić od siebie lub umieścić je w pewnej odległości i zdecydować, które z nich są najważniejsze. W przypadku podstrony produktu w sklepie internetowym najważniejszym przyciskiem będzie Dodaj do koszyka, a w przypadku od strony z ofertą firmy najważniejszym przyciskiem może być wyświetlenie formularza kontaktowego lub przejście do sekcji z danymi kontaktowymi.
Weźmy pod uwagę kilka przykładów o których wspominałem wcześniej.
Przycisk na stronie - kontakt, więcej itp.
Wezwanie do działania można znaleźć praktycznie na każdej stronie internetowej. Zależnie od ich przeznaczenia mogą wykonywać różne akcje po kliknięciu:
- Wysłać formularz
- Przejść do innej podstrony
- Wyświetlić dodatkowe okno np. z danymi kontaktowymi.
Przycisk 'Wyślij'
Przycisk wysyłający formularz nie może zlewać się z tłem pod sekcją z polami do wpisywania. Domyślnie znajduje się na dole formularza i na wielu stronach znajdziemy go wyrównanego do prawej strony ekranu. Wynika to z faktu, że czytamy od lewej do prawej a przycisk jest ostatnim w kolejności miejscem, na które ma trafić nasze oko.
Akcja 'Zobacz więcej'
Przyciski służące do przeskoczenia do odpowiedniego miejsca w tekście są bardzo pomocne dla użytkowników, zwłaszcza kiedy na stronie jest dużo tekstu. Taki przycisk nie powinien być aż tak wyróżniony jak inne przyciski na stronie ale jednak powinien być odpowiednio widoczny. Design tego przycisku powinien wyglądać bardziej jak link w tekście a nie jak wypełniony kolorem box. Przy zachowaniu takiego wyglądu tych przycisków możemy umieścić ich więcej na stronie jednocześnie nie rozpraszając użytkownika od na prawdę ważnych przycisków CTA takich jak Wyślij czy Dodaj do koszyka.
Dodaj do koszyka w E-commerce
Konwersja na wielu sklepach internetowych mogłaby ulec znacznej poprawie gdyby ich przyciski CTA były w odpowiednich miejscach i lepiej wyświetlały się na urządzeniach mobilnych. Najważniejszym przyciskiem na sklepie jest zawsze przycisk 'Dodaj do koszyka'. Mało widoczny lub schowany na dole strony z pewnością nie będzie miał dobrego współczynnika klikalności.
Call To Action Przykłady do pobrania
Nawet jeżeli nie znacie języka angielskiego to pewnie bez problemu domyślicie się co robi każdy z nich. To za sprawą uniwersalnych ikon, które przedstawiają dodatkowo jaka akcję wykonuje przycisk. W przykładzie wykorzystano framework Bootstrap