fbpx

Przyciski (buttony) to nierozłączny element projektów, który znajduje się w dużej większości stron oraz sklepów internetowych. W tym artykule przyjrzymy się bliżej funkcjonalności przycisków biorąc pod uwagę ich hierarchię.

1. Wezwanie do działania (CTA)

Jedna z najpopularniejszych funkcji przycisków to wezwanie do działania (CTA). W zależności od sytuacji może to być zachęcenie do złożenia zamówienia, rejestracji czy też zapisu do newslettera. Przycisk wezwania do działania nakłania użytkownika do podjęcia akcji, którą mu sugerujemy. Jest to jeden z najważniejszych przycisków w projekcie dlatego występuje na pierwszej miejscu naszej listy.



W przypadku przycisków CTA, które bardzo często występują samodzielnie i nie są otoczone żadnym tekstem oraz innymi elementami warto rozważyć ich zaokrąglenie.

Jeśli natomiast przycisk znajduje się od razu obok tekstu lub innych elementów wyrównanych do lewej lub prawej to należy stosować zaokrąglenie z umiarem.

W pełni zaokrąglone przyciski źle wyglądają również gdy są ułożone w stos, w formie listy, jeden pod drugim.

2. Przycisk działań podstawowych

Często w projektach ten przycisk wygląda tak samo jak CTA i mało kto potrafi je rozróżnić. Przyciski podstawowe różnią się od CTA tym, że są wskaźnikiem wizualnym, który pomaga dotrzeć do celu. Dla przykładu przyciskiem działań podstawowych będzie przycisk “Dalej” na etapie składania zamówienia, podczas gdy CTA będzie tutaj ostatni przycisk “Kupuję”/”Zamówienie”.

Dlatego tez dobrze jest zaprojektować ten przycisk i odróżnić go trochę od głównego CTA np. kolorem czy zaokrągleniem.

3. Przyciski wtórne

Ich funkcją jest wspomaganie przycisków CTA oraz przycisków działań podstawowych. Przytaczając znów przykład zamówienia to przyciskiem wtórnym będzie, “Wstecz” lub “Powrót”, który znajdować będzie się przy przycisku “Dalej”.   Przyciski wtórne stanowią o wiele mniej ważną alternatywę dla przycisków podstawowych.

Przyciski wtórne powinny mieć o wiele mniejszą wagę wizualną, dlatego poleca się stosowanie ich jako przycisków duchów lub po prostu jako przyciski tekstowe.

4. Przyciski działań trzeciorzędnych

Przyciski trzeciorzędowe są zwykle używane do różnych akcji, które są ważne ale nie każdy użytkownik będzie chciał je wykonać. Dla przykładu przyciski typu: “Dodaj do znajomego”, “Edytuj”, “Zobacz więcej”. Jeśli działanie nie stanowi głównej funkcji projektu ale jednocześnie warto, by użytkownik je zobaczył możesz oznaczyć właśnie jako przyciski działań trzeciorzędnych.

Projektując takie przyciski sprawdza się zastosowanie np. mniejszego rozmiaru lub wykonanie przycisku w formie linku tekowego czy ikony graficznej.

Jeśli spodobały Ci się porady z tego artykułu, to zapraszam Cię do zapoznania się z naszym ebookiem “przeprojektowani”, gdzie znajdziesz mnóstwo wiedzy z zakresu projektowania Ui/Ux.

Pokaz komentarzZamknij komentarze

2 Comments

  • Pawel
    Posted 14 stycznia 2020 at 13:00 0Likes

    Dlaczego przyciski za mocnym zaokrągleniem są złe? Podobnie dlaczego w listingu jeden pod drugim, źle wyglądają? Jak dla mnie, styl raczej nie ma aż takiego wpływu na decyzje użytkownika, co zawartość czyli wypełnienie, ramka, podkreślenie, hover,
    Jeśli całość stylu jest zaokrąglona to button z małym radiusem nie ma wtedy zastosowania.

    ps. wasz check box jest nie widoczny – ta ramką zlewa się prawie w całości z białym tłem i przez chwile zastanawiałem się dlaczego button “odpowiedz” jest wygaszony

  • Rafał Wróbel
    Posted 14 stycznia 2020 at 13:28 0Likes

    Trudno wskazać prawidłowa odpowiedź czy warto używać zaokrągleń. Wszystko zależy od ogólnej specyfikacji danej firmy, jej komunikacji oraz stylu projektu. Na ukończeniu jest obszerny artykuł, który postara się odpowiedzieć na pytanie zaokrąglone czy proste rogi?

Komentarze wyłączone