SP-Media Tworzenie stron www

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. 

  1. Padding
  2. Dwa przyciski obok siebie
  3. Kolory
  4. Przycisk anuluj
  5. Sprecyzuj etykietę
  6. CTA i czerwony kolor
  7. 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”.

UX/UI

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. 

SP-Media Tworzenie stron www
SP-Media Tworzenie stron www

4. Przycisk Anuluj 

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

SP-Media Tworzenie stron www

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.

SP-Media Tworzenie stron www

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.