UX/UI – 6 porad projektowania przycisków

6 porad to nie wiele. Niedawno pisałam na blogu, o tym, co to jest UX/UI. Dowiedzieliśmy się, że UX to zbiór wszystkich doświadczeń, wrażeń użytkownika z korzystania ze strony a UI to nic innego jak projektowanie interfejsu użytkownika. W tym wpisie pokaże Ci jak projektować lepsze przyciski ze względu na użyteczność oraz wygląd.

Padding
Dwa przyciski obok siebie
Kolory
Przycisk anuluj
Sprecyzuj etykietę
CTA i czerwony kolor
Podsumowanie

1. Padding

Wewnętrzny margines, który określa odstęp pomiędzy początkiem elementu, a jego treścią.

Od zastosowanego fontu zależy wielkość paddingu. Jeśli nie wiesz, jak to sprawdzić i jak zrobić to pokaże ci małą sztuczkę. Utwór dużą literę „W” . W ten sposób otrzymałeś obszar odstępu od góry i dołu krawędzi. A jeśli chodzi o boczne odstępy, zastosuj podwojone „WW”.

2. Dwa przyciski obok siebie

Jeśli jest potrzeba umieszczenia dwóch przycisków obok siebie, zadbaj o to, by pokazać, który z nich jest tym ważniejszym. Preferuje się, aby przycisk mniej ważny był w kolorze szarości tak zwanego „ducha”, czyli obrys bez wypełnienia

3. Kolory

Pewnie nie raz natknąłeś się na kolory danych funkcji. Każdy przycisk ma ustalony swój kolor.

Podczas kiedy będziesz ustawiał kolor, musisz dbać o to, aby był on przypisany do danej funkcji. Czyli np. „Usuń” nie będzie miało zielonego koloru tylko czerwony. A „zapisz” nie czerwony, tylko zielony.

4. Przycisk Anuluj

Zneutralizuj ten przycisk, nadając mu kolor szarości. Nie stosuj kolorowego wypełnienia ani obrysu.

5. Sprecyzuj etykietę

Słowa na przycisku powinny zachęcać do działania. Przyciski „OK” lub „Anuluj” nie pomagają użytkownikowi. Zmuszasz go w ten sposób do przeczytania całego okna, by móc odnaleźć sens przycisku. Dążmy do tego, aby użytkownik nie musiał się zbytnio wysilać. Im prościej, tym lepiej.

6. CTA i czerwony kolor

Czerwony kolor niech będzie zarezerwowany do funkcji ostrzegawczych oraz przycisków destrukcyjnych.

W swojej palecie na pewno znajdziesz więcej barw, które nadają się do przycisków CTA niż czerwony.

7. Podsumowanie

Niby takie z pozoru nieważne punkty, a jednak na stronie spełniają istotną rolę.

Stwórzmy swoją stronę czytelną i dla każdego zrozumianą. Nie pozwólmy, aby zamęt odrzucał klienta z Twojej strony. Sprawdź, czy Twoje przyciski są zrozumiałe dla każdego.

A jeśli nie to cofnij się do bloga i po kolei przeanalizuj.