W tym wpisie pokażę Ci parę szybkich sztuczek, które pomogą Ci projektować lepsze przyciski pod względem użyteczności oraz wyglądu.
Padding
Tak naprawdę wielkość paddingu zależy od zastosowanego fontu w etykiecie. W ustalaniu wielkości przy krawędziach może pomóc Ci taka sztuczka. Utwórz dużą literę W stosując krój oraz wielkość fontu z etykiety na przycisku. Tym sposobem otrzymałeś obszar odstępu od góry i dołu krawędzi. Jeśli natomiast chodzi o boczne odstępy to zastosuj podwojenie litery WW.
Dwa przyciski obok siebie
Jeśli musisz umieścisz dwa przyciski obok siebie to przede wszystkim pokaż, który z nich jest ważniejszy. Dobrą praktyką jest, by ten mniej ważny przycisk, był w formie ducha czyli posiadał tylko obrys zamiast wypełnienia.
Kolory
Niektóre kolory bardzo mocno kojarzą się z daną funkcją. Do tego stopnia, że ich zmiana może wprowadzić zamieszanie. Na przykład zielony przycisk „usuń” spowoduje małe zamieszanie, podobnie jak czerwony przycisk „zapisz”.
Przycisk anuluj
Zneutralizuj przycisk Anuluj. Najprościej zrobisz to stosując kontrast kolorów. Tworząc go w formie obramowania (ducha) nie stosuj kolorowego obrysu, wybierz szarości.
Sprecyzuj etykietę
Słowo na przycisku powinno opisywać działanie lub wynik wezwania do działania. Nazywanie przycisku „OK” lub „Anuluj” nie pomaga użytkownikowi w żaden sposób. Tym sposobem zmuszasz go do przeczytania całego okna dialogowego, by odnaleźć sens przycisku.
CTA i czerwony kolor
Dobrze by w Twoim projekcie czerwony kolor miał ostrzegawczą funkcje np. był zarezerwowany dla komunikatów ostrzegawczych oraz przycisków destrukcyjnych.
Dlatego też nie stosuj tego koloru w przyciskach CTA. Zarezerwuj czerwony kolor tylko dla działań destrukcyjnych. Na pewno w swojej palecie barw znajdziesz kolory, które o wiele lepiej nadają się do przycisków CTA niż czerwony i są pd niego mniej niepokojące.
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.
