UX/UI – 6 porad projektowania przycisków
Choć sześć porad to nie wiele, niedawno pisałem na blogu o tym, czym jest UX/UI. Dowiedzieliśmy się, że UX to zbiór wszystkich doświadczeń użytkownika podczas korzystania ze strony, a UI to projektowanie interfejsu użytkownika. W tym wpisie pokażę Ci, jak projektować lepsze przyciski pod względem użyteczności oraz wyglądu.
Spis treści
Padding
To wewnętrzny margines określający odstęp pomiędzy początkiem elementu, a jego treścią. Wielkość paddingu zależy od zastosowanego fontu. Jeśli nie wiesz, jak to sprawdzić, pokażę Ci małą sztuczkę: utwórz dużą literę „W”. W ten sposób określisz odstęp od górnej i dolnej krawędzi. Dla bocznych odstępów, zastosuj podwójne „WW”.
Dwa przyciski obok siebie
Jeśli chcesz umieścić dwa przyciski obok siebie, zadbaj o to, by było jasne, który z nich jest ważniejszy. Przycisk mniej ważny może być w kolorze szarości typu „duch” – obrys bez wypełnienia.
Kolory
Na pewno niejednokrotnie spotkałeś się z kolorami przypisanymi do konkretnych funkcji. Ważne jest, aby kolor przycisku odpowiadał jego funkcji, np. „Usuń” powinno być w kolorze czerwonym, a „Zapisz” w zielonym/niebieskim.
Przycisk Anuluj
Nadaj mu kolor szarości. Unikaj kolorowego wypełnienia lub obrysu.
Sprecyzuj etykietę
Tekst na przycisku powinien być zachęcający do działania. Unikaj ogólnych nazw typu „OK” czy „Anuluj”, które nie informują użytkownika o dokładnym działaniu przycisku. Dąż do prostoty i jasności.
CTA i kolor czerwony
Kolor czerwony powinien być zarezerwowany dla funkcji ostrzegawczych i przycisków destrukcyjnych. Istnieją inne kolory odpowiednie dla przycisków CTA.
Podsumowanie
Może wydają się to drobne kwestie, ale przyciski odgrywają kluczową rolę na stronie. Dbaj o czytelność i zrozumiałość. Może masz pytania? Napisz do nas!