30 March 2012
Category:
blog
/* */

Przykłady i użycia guzików wzywających do akcji

Projektowanie stron internetowych wiąże się z wzywaniem do akcji, zwłaszcza w dziedzinie doświadczenia użytkownika. Wzywanie do akcji to element na stronie internetowej który wymaga od użytkownika jakiejś akcji. Najczęściej występuje w formie guzików na które można kliknąć żeby np. coś kupić – Kup Teraz!, lub przeczytać więcej o czymś na innej stronie – “Dowiedz się więcej”. Te guziki oczekują jakiejś akcji ze strony użytkownika.

Jeśli Twoja dziedzina to tworzenie stron www, musisz zadbać o efektywne guziki wzywające do akcji, które zaciekawią użytkownika i zachęcą do kliknięcia. Oto kilka technik oraz przykładów.

Najlepsze przykłady na wezwanie do akcji

Aby dodać guziki wzywające do akcji do swojego interfejsu, musisz się najpierw nad tym dobrze zastanowić i wszystko zaplanować. To musi się stać częścią Twojego prototypu i architektury informatycznej aby działały właściwie. Zastanów się także nad ich wzorem.

Zachwyć użytkownika rozmiarem

Na stronach internetowych, rozmiar elementów jest równoległy z ich ważnością, czyli im większy tym ważniejszy. Zastanów się nad ważnością niektórych akcji na stronie and stwórz wzory guzików według tego.

Rozmiar guzików wzywających do akcji przeciw otaczających elementów – czasem te guziki mogą być większe od logo. Mimo że logo jest ważne i znajduje się przeważnie na górnej części strony, wzrok jest skierowany od razu na te guziki które są nieco większe. O to chodzi, aby użytkownik zauważył i kliknął.

Czasem na stronie możesz mieć kilka takich guzików, bardziej i mniej ważnych. Użyj różnych rozmiarów aby podkreślić ich ważność na stronie. Na przykład, guzik “Zarejestruj się” może być większy od “Czytaj dalej” jeśli Twoim głównym celem jest to aby użytkownik się zarejestrował.

Miejsce które zachęci użytkownika

Gdzie umieścisz guziki wzywające do akcji na stronie internetowej jest istotne w przyciąganiu wzroku odwiedzających. Jeśli umieścisz w takim miejscu jak np. górna część strony, ludzie prawdopodobnie zauważą te guziki i wkroczą do akcji jeśli nie od razu to na pewno jak tylko skończą czytać coś na stronie. Ludzie zapamiętają gdzie widzieli ważny guzik jeśli będzie na górze głównej strony lub w innym równie widocznym miejscu.

Możesz także dodać te guziki w miejscu przeznaczonym specjalnie do tego, np. jako warstwa nad pozostałymi elementami na stronie lub na samym środku strony. Jeśli umieścisz na środku strony, otaczające elementy powinny być znacznie mniejsze, tak aby guzik był najbardziej widoczny. Nie musi on być także w rażącym kolorze, ważne że będzie większy i wyraźniejszy niż wszystko dookoła, a użytkownik na pewno zauważy.

Korzyści pustego miejsca na stronie

Puste miejsce na stronie, znane jako “white space” to też dobry sposób na wyróżnienie guzika od reszty. W tym przypadku może on być mały i prosty ponieważ i tak wyróżni się od reszty jeśli dookoła jest dużo pustego miejsca.

Ważne natomiast aby ta przestrzeń była powiązana jakoś z wezwaniem do akcji. Jeśli masz jakieś sposób na zachęcenie użytkownika do kliknięcia na guzik, zredukuj puste miejsce i wypełnij bardziej tymi elementami. Dodając ładną grafikę tworzysz ładniejsze miejsce które bardziej zaciekawi użytkownika w porównaniu do pustej strony.

Użyj kontrastujących kolorów

Wybór kolorów jest niesamowicie ważny. Wybierz kolory guzików które kontrastują z kolorami które je otaczają w tle. Chodzi o to aby użytkownik zauważył wezwanie do akcji. Jeśli masz czarno-białą stronę, dodaj guzik w innym kolorze np. w jaskrawym niebieskim, a użytkownik od razu zauważy. Nawet jeśli ten guzik znajduje się na zdjęciu, nadając mu ostry kolor sprawisz że zostanie zauważony.

Zaoferuj alternatywne akcje

Strona internetowa może mieć kilka guzików wzywających do akcji. Czasem nawet trzeba dodać więcej niż jeden aby użytkownik zdecydował się na ten najważniejszy ruch. Powiedzmy że ta pierwsza akcja to rejestracja. Daj użytkownikowi szansę aby więcej poczytać o serwisie, zobaczyć filmik, itd.

Te drugie akcje mogą być obok tych pierwszych, np. na górnej części strony, ale powinny różnić się kolorami. Wtedy użytkownik wie że może albo się od razu zarejestrować, albo więcej poczytać. Pierwsza akcja powinna mieć bardziej ostry kolor aby użytkownik wpierw zauważył tę akcję zanim zobaczy kolejne. Te dwa guziki powinny być blisko siebie aby oddzielić je od reszty strony.

Czasem druga akcja może być pod tą pierwszą jeśli chcesz aby użytkownik bardziej zwrócił uwagę na ważniejszą akcję. Ta druga akcja może być wtedy niżej, i może być mniej wyraźna, ale ważne aby była blisko tej pierwszej żeby użytkownik jej nie pominął.

Podkreśl że to pilna sprawa

Używaj wyraźnych, odważnych i rozkazujących słów może przekonać użytkownika że nie powinien dłużej czekać tylko od razu wkroczyć do akcji bo inaczej coś ważnego przegapi. Jeśli masz guzik “Kup Teraz”, możesz od razu wpisać tam cenę promocyjną aby użytkownik wiedział że czekając dłużej może nie skorzystać z promocji.

Zastanów się nad słowami której bardziej zachęcą kogoś do akcji. Zamiast “Kup” wpisz “Kup Teraz”. Słowa takie jak “teraz”, “natychmiast” i “już” podkreślają że sprawa jest pilna. Wtedy użytkownicy chętniej klikną.

Powiedz użytkownikom że to proste

Często użytkownik waha się przed podjęciem akcji z obawy że to będzie trudne, drogie lub czasochłonne. Zadbaj o te obawy, a zyskasz więcej chętnych. Dopisz w guziku że to jest “proste”, “bezpłatne” lub że zajmie tylko parę minut, jeśli oczywiście to wszystko jest prawdą.

Nie wprowadzaj użytkownika w błąd! Jeśli coś jest bezpłatne, zapewnij go że nikt nie zapyta o konto bankowe chyba że to jest tylko próbny serwis na określony czas, o tym też musisz wspomnieć, np “Bezpłatne demo na 30 dni.”

Powiedz użytkownikom czego mogą się spodziewać

Użytkownicy stron wahają się przed wzięciem czegoś na stronie ponieważ brakuje im zaufania. Czasem jakiś link oferuje darmowy serwis, nie uprzedzając o tym że ten serwis będzie bezpłatny tylko przez jakiś czas. Aby bardziej zachęcić użytkowników i zwiększyć zaufanie, powiedz im czego mogą się spodziewać. Pomyśl o potencjalnych pytaniach które mogą mieć, i postaraj się na nie odpowiedzieć w miarę szybko.

Popatrz na guzik Firefoksa, który pokazuje którą wersję programu ściągasz, że jest za darmo, że jest na Twój system, w wybranym języku i jaką ma wielkość. Dzięki takiemu guzikowi, użytkownik ma odpowiedzi na wszystkie pytania. Ważne aby powiedzieć czy dany program będzie później płatny i czego można się spodziewać po wersji demo.

Projektowanie guzików

Weź pod uwagę wymienione przykłady i techniki, i zajmij się projektowaniem swoich guzików.

  • Pomyśl o tym czy potrzebujesz jednej akcji czy dwóch, i która jest bardziej ważna.
  • Ustaw je tak aby ta bardziej ważna była bardziej wyraźna.
  • Zastanów się nad tym czy warto wpisać czego użytkownik może się spodziewać.
  • Ustal idealne miejsce na wezwanie do akcji, np. górna część strony.
  • Odpowiedz na pytania użytkowników w kilku słowach.
  • Pomyśl o pustym miejscu, o rozmiarze, o kolorze, i o odseparowaniu guzików od pozostałych elementów. Najważniejsze aby użytkownik zauważył akcję lub akcje, które mogą się od siebie albo różnić albo wyglądać tak samo jeśli są równie ważne.
  • Jeśli chcesz aby użytkownik miał możliwość poczytania przed rejestracją, zadbaj o to aby i ten link był widoczny i wyraźny.
  • Jeśli masz dużo na stronie, zadbaj o ostry kolor guzika aby został zauważony od razu a nie pominięty. Pomyśl także o jego rozmiarze.

Pamiętaj, dobrze zaprojektowany guzik wzywający do akcji zachęci więcej użytkowników do skorzystania z Twojej strony czy serwisu. Wyobraź sobie siebie jako tego użytkownika który wchodzi na tę stronę. Ta strona o coś prosi, klikniesz?