Przyciski

Czym są i do czego służą przyciski w projekcie?

Przycisk jako element Twojego projektu ma pomóc użytkownikowi dotrzeć w zamierzone miejsce. Może to być na przykład formularz zamówienia czy ustawienia profilu.

Twoim zadaniem jest zaprojektować przycisk tak, aby jego działanie było łatwe do przewidzenia i tym samym zrozumiałe.

Style przycisków

Wyróżniamy kilka podstawowych styli przycisków. Każdy z nich pełni inną funkcję w projekcie.

Przycisk wypełniony

Przycisk wypełniony jest podstawowym przyciskiem, którego z pewnością będziesz używał w swoim projekcie. Przycisk wypełniony używany jest do wykonywania tak zwanych "działań podstawowych" oraz "CTA" - wyjaśnienie w dalszej części tekstu. W tego typu przyciskach nie stosujemy obramowania.

Przycisk podniesiony

Jak sama nazwa mówi, przyciski podniesione dają wrażenie unoszących się. Dzieje się tak gdy zastosujemy cień. Taki przycisk ma informować oraz zachęcać użytkownika, aby ten został kliknięty.

Zastosowany w ten sposób cień ma również wyróżnić ten konkretny przycisk od znajdującego się przy nim tekstu oraz innych przycisków w pobliżu.

Przycisk duch

Przyciski duchy w przeciwieństwie do przycisków wypełnionych nie posiadają żadnego wypełnienia. Stosujemy w nich tylko i wyłącznie obramowanie. Stosowane dla opcji, które nie uchodzą za najważniejsze. Dlatego też często można zobaczyć je usytuowane zaraz przy przycisku CTA.

Przycisk tekstowy

Przycisk tekstowy nie zawiera takich elementów graficznych jak obramowanie czy wypełnienie tła. Są one po prostu linkami w formie etykiet tekstowych z możliwością np. podkreślenia. Tak samo jak przyciski duchy używane są w momencie gdy ich rola nie jest zbyt ważna.

Toggle

Toggle, czyli przycisk ruchomy, lub też innymi słowami przełącznik używany jest w sytuacji, gdy użytkownik może wybrać pomiędzy dwoma akcjami, które ma on wykonywać. Dobrym przykładem może być zastosowanie przycisku toggle w momencie gdy dajemy użytkownikowi np. możliwość włączenia ciemnego motywu aplikacji/strony www. Przycisk taki w założeniu musi wykonywać daną akcję od razu po zmianie jego stanu.

Przykład:

Przycisk pływający

Przyciski pływające podobnie jak przyciski podniesione mają za zadanie dawać wrażenie takich które są na wierzchu (najczęściej listy opcji). Ich działanie to zazwyczaj wyświetlanie ustawień użytkownikowi czy możliwość dodania nowej pozycji do listy/tabeli itp...

Jedna z popularnych aplikacji w których możemy zauważyć przyciski tego typu to Mapy Google.

Hierarchia przycisków

Każdy z wyżej wymienionych styli przycisków odpowiada za odgrywanie konkretnej roli w projekcie. Jedne z nich będą przyciskami ważnymi, które mają przyciągnąć wzrok użytkownika, zaś inne - mniej ważne - będą miały za zadanie umożliwić użytkownikowi np. zmianę podjętej wcześniej decyzji. A więc - sklasyfikujmy je.

Przycisk CTA

Przycisk CTA - z języka angielskiego "Call To Action", po polsku zwany przyciskiem "wezwania do akcji" ma za zadanie skutecznie zachęcić, a wręcz przekonać użytkownika do wykonania jakiejś ważnej akcji, np. przejścia do finalizacji zamówienia, zapisu ustawień czy zapisu do newslettera.

Z racji, że przycisk CTA jest przyciskiem wypełnionym, tak samo jak kolejny w hierarchii Przycisk działań podstawowych - powinien wyróżniać się swoją barwą. Może to być nawet mocny i wyrazisty kolor, a to dlatego, że CTA pojawia się w całym projekcie w zasadzie tylko kilka razy.

Przycisk działań podstawowych

Przyciski działań podstawowych różnią się od przycisków CTA tym, że są wskaźnikami mającymi przeprowadzić użytkownika do celu. Przykładowym przyciskiem działań podstawowych może być przycisk "Dalej" - na przykład w koszyku sklepu online.

Przycisk wtórne

Funkcją, którą pełnią przyciski wtórne jest wspomaganie CTA oraz przycisków działań podstawowych. Używamy w tym celu przycisków które wizualnie mniej przyciągają wzrok użytkownika - przycisków duchów lub przycisków tekstowych.

Przyciski wtórne najczęściej spotykamy jako przyciski "Powrót", "Wstecz".

Przyciski działań trzeciorzędnych

Przyciski działań trzeciorzędnych są używane zazwyczaj jako przyciski tekstowe, często z towarzyszącą mu ikoną i służą np. do listowania opcji dostępnych dla użytkowników, które niekoniecznie muszę być widziane przez użytkownika na głównym ekranie projektu (tylko na przykład jako dropdown).