„Przyciski wezwania do działania”, najlepsze praktyki i przykłady

Przyciski wezwania do działania na stronach internetowych są często pomijane. Projektanci czasami nie rozumieją dokładnie, co sprawia, że ​​przycisk „zadzwoń do akcji” nie jest atrakcyjny i pasuje do ogólnego projektu. Ale przyciski wezwania do działania są zbyt ważne, aby można je było zaprojektować bez pewnego zrozumienia, co czyni je skutecznymi. W końcu głównym celem przycisku „zadzwoń do akcji” jest zachęcenie odwiedzających do odwiedzin robić coś.

Ważne jest, aby uzyskać przynajmniej podstawową wiedzę na temat wpływu koloru, skali, języka i innych czynników na współczynnik konwersji przycisku wezwania do działania. Koncepcje tutaj nie są skomplikowane, ale poświęcają trochę uwagi i planują stworzyć najbardziej efektywne przyciski wezwania do działania możliwe w ramach danego projektu. Czytaj dalej, aby uzyskać więcej informacji na temat każdego z tych punktów i więcej.

Cel przycisków „Wezwanie do działania”

Przyciski wezwania do działania mogą pełnić wiele funkcji. Po wszystkim, “wezwanie do działania” jest naprawdę trochę niejasne. Wszystko to oznacza, że ​​głównym celem jest przyciągnięcie użytkownika do Twojej witryny Zrób coś. To może być dodanie produktu do koszyka, pobranie czegoś, zażądanie informacji lub cokolwiek innego.

Ponieważ przyciski wezwania do działania mają tak różne cele, wiele uwagi należy poświęcić temu, co chce osiągnąć przycisk. Rodzaj witryny, rynek docelowy i pożądane działanie mogą odgrywać rolę w tworzeniu najlepszego przycisku wywołania akcji.

Typy przycisków „Wezwanie do działania”

Istnieje kilka różnych typów przycisków wywołania do działania. Podczas gdy każdy typ ma na celu nakłonienie odwiedzających do wykonania określonej czynności, działanie to może się znacznie różnić. Poniżej znajdują się najczęściej spotykane typy przycisków wywołania akcji, oparte na działaniu, które chcesz wykonać.

1. Dodaj do koszyka Przyciski

Witryny e-commerce zazwyczaj używają kilku przycisków wywołania akcji, ale najczęściej używanym jest przycisk “Dodaj do koszyka” przycisk. Te przyciski są zazwyczaj wyświetlane na poszczególnych stronach produktu. Ich celem jest zachęcenie klientów do zakupu przedmiotu. Wspólne elementy projektu w przyciskach Dodaj do koszyka zawierają proste sformułowania (takie jak “Dodaj do koszyka” lub “Dodaj do torby” lub “Kup Teraz“) i korzystanie z ikon (zazwyczaj torby lub koszyka).

2. Pobierz przyciski

Przyciski pobierania są podobne do przycisków dodawania do koszyka, ponieważ próbują nakłonić gościa do objęcia przedmiotu w posiadanie. W przypadku przycisków pobierania wielu projektantów decyduje się na umieszczenie większej ilości informacji niż inne typy przycisków (takie jak informacje o wersji lub rozmiar pobierania).

3. Przyciski próbne

Niektóre witryny próbują zachęcić odwiedzających do wypróbowania swoich ofert, zazwyczaj w formie bezpłatnej wersji próbnej. Może to być bezpłatne pobieranie lub bezpłatne konto, w zależności od konkretnej witryny. Niektóre witryny używają “mniej znaczy więcej” filozofia i utrzymywanie języka na swoich przyciskach na minimalnym poziomie, podczas gdy inni lubią oferować więcej informacji na temat tego, co zawiera test.

4. Dowiedz się więcej przycisków

Dowiedz się więcej przycisków jest zazwyczaj używanych na końcu bloku informacji zwiastuna (często na stronie głównej). Przyciski te są zwykle proste, ale często przewymiarowane, aby przyciągnąć uwagę odwiedzających.

5. Przyciski rejestracji

Przyciski rejestracji pojawiają się najczęściej w dwóch różnych wersjach. Pierwszy typ jest zazwyczaj bezpośrednio powiązany z formularzem rejestracji. Drugi typ jest zwykle używany w podobny sposób “Dodaj do koszyka” przyciski, jako sposób na zakup lub rejestrację usługi lub konta przez użytkowników, zanim faktycznie dotrą do formularza rejestracji.

Istnieją inne rodzaje przycisków wywołania do działania, ale są to najczęściej spotykane. Wytyczne, które odnoszą się do powyższych, prawdopodobnie będą miały zastosowanie również do każdego innego typu przycisku wywołania akcji, który możesz projektować.

Efektywne używanie negatywnej przestrzeni

Chcesz, aby Twoje wezwania do działania wyróżniały się spośród otaczających treści i naprawdę przyciągały uwagę odwiedzających witrynę. W tym celu musisz użyć negatywnej przestrzeni wokół tych przycisków. Włącz puste miejsce między treścią a przyciskiem wywołania akcji. Chociaż jest to mniej ważne (i mniej powszechne) w przypadku niektórych przycisków, takich jak przyciski dodawania do koszyka, podczas gdy inne, takie jak te, które uczą się więcej, pracują lepiej dzięki większej ilości miejsca.

Ważne jest, aby zrównoważyć ilość negatywnej przestrzeni wokół przycisków z rozmiarem samych przycisków. Chodzi o proporcje. Chcesz, aby Twój przycisk, przestrzeń wokół niego i otaczająca go zawartość wyglądały tak, jakby się łączyły, nawet z różnicami w rozmiarze. Być może będziesz musiał trochę się bawić, aby sprawić, że będą wyglądać dobrze.

Niektóre wskazówki:

• Upewnij się, że wokół twojego przycisku jest wystarczająco dużo miejsca, aby nie czuć się zaśmieconym
• Rozważ zasady takie jak zasada trzeciego lub Złotego Stosunku przy określaniu, ile miejsca należy uwzględnić
• Negatywna przestrzeń daje ci miejsce na przycisk wywołania akcji, aby wyróżnić się na tle innych treści i wyróżnić

Rozmiar i kolor

Jak duże jest twoje wezwanie do działania jest bardzo ważne. Zbyt duży przycisk obezwładni wszystko wokół. Za mały przycisk zgubi się w tasowaniu wszystkich innych treści na stronie. Chcesz, aby Twój przycisk był wystarczająco duży, aby wyróżniać się bez przytłaczania projektu.

Kolor może być użyty, aby zrównoważyć rozmiar przycisków. W przypadku większych przycisków wybierz kolor mniej widoczny w projekcie (ale nadal wyróżnia się tłem). Aby uzyskać mniejszy przycisk, możesz wybrać jaśniejszy, kontrastowy kolor, aby przycisk naprawdę się pojawił. W obu przypadkach upewnij się, że używany kolor powoduje rozłączenie przycisku bez kolidowania z ogólnym projektem witryny.

Niektóre wskazówki:

• Twoje przyciski wezwania do działania powinny być najlepiej największymi przyciskami na danej stronie
• Użyj kontrastowych kolorów, aby mniejsze przyciski wyróżniały się bardziej
• Używaj mniej wyrazistych kolorów, aby większe guziki pasowały lepiej
• Przyciski wezwania do działania muszą zwracać uwagę, nie przytłaczając swojego projektu

Język

Dokładne sformułowanie, które wybierzesz, aby wywołać przyciski akcji, może mieć ogromny wpływ na konwersję. Porównać “Kup Teraz” z “Dodaj do koszyka“. Jeden jest znacznie pilniejszy niż drugi. Albo o tym “Spróbuj za darmo” z “Bezpłatna wersja próbna“? Jeden jest znacznie bardziej punkowy niż drugi i bardziej się wyróżnia.

Język, którego używasz w przyciskach wywołania akcji, powinien być tak prosty i prosty, jak to tylko możliwe. Chcesz, aby odwiedzający dokładnie wiedzieli, co otrzymają po kliknięciu przycisku. Jeśli kwestionują to, oznacza to, że wstrzymali pracę, co może prowadzić do niższych współczynników konwersji.

Nie zapomnij także o rozmiarach czcionki. Tekst na przycisku wywołania akcji powinien być duży i pogrubiony, odpowiednio dopasowany do rozmiaru i koloru samego przycisku. Upewnij się, że jest wystarczający kontrast, a tekst jest łatwy do odczytania.

Niektóre wskazówki:

• Używaj prostego, bezpośredniego języka
• Użyj dużej, pogrubionej czcionki na przycisku głównego tekstu
• Upewnij się, że język wyraźnie wymaga określonej akcji

Utwórz pilność

Chcesz, aby odwiedzający Twoją witrynę przeprowadzali pożądane działania z jak najmniejszą ilością myśli. Chociaż nie chcesz oszukiwać odwiedzających, im więcej możliwości im dajesz, aby przestali i zastanowili się nad tym, co robią, tym więcej możliwości dajesz im do powiedzenia “Nie”.

Chcesz, aby twoje przyciski sprawiały wrażenie, że muszą działać natychmiast. Chcesz zachęcić ich do natychmiastowego podjęcia decyzji, pod wpływem chwili. Chociaż nie zadziała to w przypadku każdego przycisku wezwania do działania (zwłaszcza tych, które kupują elementy o wysokim koszcie), w przypadku tanich lub bezpłatnych działań, pożądane jest klikanie użytkowników z niewielką przezornością..

Niektóre wskazówki:

• Zachęcaj odwiedzających do natychmiastowego działania
• Nie dawaj odwiedzającym żadnych powodów do wstrzymania
• Chociaż ważna jest pilność, nie należy w żaden sposób wprowadzać zwiedzających w błąd

Podaj dodatkowe informacje

Tam, gdzie jest to właściwe, użyj przycisków wywołania akcji, aby dać odwiedzającym dodatkowe informacje na temat tego, co otrzymają po kliknięciu przycisku. Najczęściej jest to widoczne z przyciskami próbnymi lub przyciskami pobierania. Typowe przykłady dodatkowych informacji obejmują czas trwania bezpłatnej wersji próbnej lub rozmiar pliku do pobrania. Informacje o wersji są również powszechnie widoczne.

Gdy dołączasz dodatkowe informacje, pamiętaj, że musisz skupić się na rzeczywistym wezwaniu do działania. Upewnij się, że tekst języka zachęcającego odwiedzających do działania jest najbardziej widoczny, a inne informacje są znacznie mniej widoczne.

Niektóre wskazówki:

• Dołącz dodatkowe informacje tylko wtedy, gdy zwiększa to komfort użytkowania
• Dodatkowe informacje są odpowiednie tylko w przypadku niektórych typów przycisków wywołania akcji, w szczególności przycisków pobierania lub próbnych
• Upewnij się, że główne wezwanie do działania jest nadal najbardziej widocznym tekstem na przycisku

Priorytet

Ważne jest, aby nadać priorytet przyciskom wezwania do działania na stronie, jeśli jest ich więcej. Można to zrobić na wiele sposobów, ale najczęściej stosuje się kolor i rozmiar.

Użyj koloru, aby podświetlić najważniejszy przycisk na stronie, lub aby te mniej ważne wydawały się mniej widoczne. Lub użyj rozmiaru, aby wyróżnić najważniejszy przycisk (czyniąc go większym) i odznaczając mniej ważne.

Ikony i obrazy

Włączenie wizualnych wskazówek do przycisków wezwania do działania może również pomóc w zwiększeniu współczynników konwersji. Ikona koszyka na zakupy “Dodaj do koszyka” na przykład przycisk lub strzałka na przycisku pobierania są dobrymi przykładami. Pomyśl też o unikalnych ikonach, ale upewnij się, że ikona zwiększa wrażenia użytkownika, wyjaśniając, do czego służy przycisk, i nie dodaje żadnych nieporozumień.

Niektóre wskazówki:

• Upewnij się, że używane ikony pomagają wyjaśnić znaczenie przycisku, zamiast go mylić
• Łatwo rozpoznawalne ikony mogą natychmiast wskazać znaczenie odwiedzającym
• Nie bój się używać rzadziej używanych ikon, o ile ich znaczenie jest nadal jasne

Przykłady

Tu jest kilka przykłady świetnych przycisków wywołania akcji. Chociaż nie wszystkie są w pełni zgodne z powyższymi wytycznymi, spełniają wystarczające kryteria, aby można je było uznać za świetne.

Transmisja na żywo - Przyciski „kup teraz” (dla opcji płatnych) i „zarejestruj się” (dla opcji darmowych) to dobra strategia.

System Windows 7 - Duży, zielony przycisk „Uzyskaj Windows7” jest łatwy do zauważenia dla odwiedzających.

Centrala Fileshare - Jasnozielony przycisk naprawdę wyróżnia się na białym tle.

Dziennik okrętowy - Użycie różnych kolorów w przyciskach „Pobierz” i „Kup” odróżnia je i nadaje priorytet przyciskowi „Kup”.

TasteBook - Ten przycisk doskonale wykorzystuje ikonę i wykorzystuje większy, pogrubiony tekst, aby wyróżnić się.

Dobry Barry - Kolejny jasny zielony przycisk wezwania do działania.

Lifetree Creative - Kontynuacja tego samego kroju pisma od kopii ciała do przycisku wywołania wywołuje wrażenie spójności.

Resumator - Jasny czerwony przycisk wywołania akcji z pogrubioną czcionką wyróżnia się na niebieskim tle.

Notepod - Dobry przykład umieszczenia dodatkowych informacji w przycisku wywołania akcji.

Inkd - Świetny przykład priorytetyzacji przycisków o rozmiarze.

Eleganckie motywy - Kolejny doskonały przykład wykorzystania koloru do wyróżnienia się bez zderzenia z otaczającymi elementami projektu.

ZenDesk - Kolejny świetny przykład wyróżnienia przycisku za pomocą koloru.

Storenvy - Okrągły przycisk jest nieoczekiwany i wyróżnia się, zwłaszcza gdy jest otoczony białą obwódką.

Bara'Mail - Czasami przycisk, który łączy się, działa lepiej w ogólnym projekcie witryny, zwłaszcza gdy akcja jest mniej pilna.

Więcej zasobów

• Przyciski wezwania do działania: przykłady i najlepsze praktyki - z magazynu Smashing
• Dobre przyciski do wezwania do działania - od UX Booth
• Przyciski wezwania do działania: czy rozmiar ma znaczenie? - Od Get Elastic
• 10 technik skutecznych “Wezwanie do działania” - Z Boagworld
• 5 porad dotyczących tworzenia skutecznego przycisku wezwania do działania - z SitePoint