馃帹 uxowy.dev #66: Buttony - na te rzeczy zwr贸膰 szczeg贸ln膮 uwag臋
4 min czytania

馃帹 uxowy.dev #66: Buttony - na te rzeczy zwr贸膰 szczeg贸ln膮 uwag臋

dzi艣 b臋dzie g艂贸wnie o buttonach i czego unika膰 przy definiowaniu ich wygl膮du.

  1. 3 rzeczy, na kt贸re trzeba zwr贸膰 szczeg贸ln膮 uwag臋 w buttonach
  2. UX'owy fail The Guardian z cookie consent

Zapraszam 馃憞 馃憞 馃憞


3 rzeczy, na kt贸re trzeba zwr贸膰 szczeg贸ln膮 uwag臋 w buttonach

1. Kolor przycisku

Nie pod膮偶aj 艣lepo za regu艂膮, 偶e kolor primary buttona to brand color (wi臋cej o tym tutaj). Czasami powoduje to problemy z odpowiednim kontrastem, czasami konfliktuje z buttonami destrukcyjnymi...

U偶ytkownik nie b臋dzie wiedzia艂 kiedy co艣 usunie, a kiedy to jest zwyk艂e CTA, je艣li te przyciski wygl膮daj膮 bardzo podobnie / identycznie.
  • kontrast mi臋dzy t艂em przycisku a jego tekstem powinien wynosi膰 4.5,
  • kolor czerwony przycisku powinien by膰 zarezerwowany dla akcji destrukcyjnych,
  • kolor szary powinien by膰 zarezerwowany dla przycisk贸w w stanie disabled.

2. Brak jasnego wskazania interaktywno艣ci

Je艣li u偶ywamy s艂abo widocznego bordera lub t艂a przycisku (albo w og贸le go nie mamy) musimy si臋 upewni膰, 偶e jest on dobrze widoczny dla wszystkich u偶ytkownik贸w. I 偶e jest dobrze rozpoznawalny jako element interaktywny, klikalny.

Przymru偶 oczy i sprawd藕 czy Secondary jest dobrze widoczny jako przycisk / element klikalny. Tertiary z marszu odpada, bo wygl膮da jak zwyk艂y tekst (kolor to za ma艂o, aby wskaza膰 interaktywno艣膰).
  • je艣li kontrast bordera lub t艂a jest za ma艂y, u偶yj np. podkre艣lenia tekstu dla wskazania interaktywno艣ci elementu

3. Unikaj niejasno艣ci

Upewnij si臋, 偶e przycisk ma jasny komunikat i u偶ytkownik jest w stanie przewidzie膰, co si臋 stanie, kiedy go kliknie.

  • w copy przycisku staraj si臋 u偶y膰 czasownika, np.: "Zobacz wszystkie faktury" zamiast "Pe艂na lista",
  • nie u偶ywaj samych ikon, a je艣li ju偶 musisz (馃) lub obs艂u偶 to odpowiednim tooltipem / title lub aria-label, aby u偶ytkownik mia艂 jak膮艣 mo偶liwo艣膰 dowiedzenia si臋 co przycisk robi,
  • ludzie ch臋tniej klikaj膮 przyciski, kt贸re s膮 dla nich jasne i przewidywalne - je艣li mamy jakie艣 w膮tpliwo艣ci, wolimy ich nie klika膰, wnioski Wix.com.

BONUS 

Polecam te偶 oblukanie artyku艂u Button design tips to avoid common mistakes, w kt贸rym dowiadujemy si臋 dlaczego tylko jedna z poni偶szych kombinacji przycisk贸w jest prawilna pod k膮tem usability i accessibility:

殴r贸d艂o
Button design tips to avoid common mistakes - Adham Dannaway
Quick and practical button design tips to avoid common usability and accessibility problems.

馃毃
Je艣li podoba Ci si臋 ten mail, wrzu膰 info o nim na swoje socjale lub firmowego Slacka! Mo偶e jest tam kto艣, komu przyda si臋 troch臋 wiedzy o UI/UX dla developera?

Gotowiec do skopiowania 馃憞

W艂a艣nie wpad艂o na moj膮 skrzynk臋 #66 wydanie 馃帹 uxowy.dev, a w nim 3 rzeczy, na kt贸re trzeba zwr贸膰 szczeg贸ln膮 uwag臋 w buttonach. Polecam!!! https://uxowy.dev/email/66

Daj zna膰, gdzie wrzuci艂e艣(a艣).
Mo偶e b臋d臋 w stanie si臋 jako艣 odwdzi臋czy膰 馃.


Pierwszy widok po wej艣ciu na theguardian.com

Ekipa Growth.Design robi niesamowit膮 robot臋 dostarczaj膮c co tydzie艅 nowe case-study z om贸wieniem jakiego艣 UX'owego problemu.

Ka偶de case-study to:

  • przej艣cie jakiego艣 procesu pod k膮tem UX,
  • z komentarzem autor贸w ocb,
  • listuj膮c og贸lne prawa i zasady (z linkowaniem do 藕r贸d艂a, tak偶e to nie s膮 jakie艣 zmy艣lania),
  • w bardzo przyjemnej formie prezentacji.

Tym razem pod lup臋 wzi臋li cookie consent na The Guardian, w kt贸rym m.in. zauwa偶ono problemy:

Warto zobaczy膰 (3 minuty):

Tech ethics: If cookie consent prompts were honest鈥
This case study shows how a cookie consent prompt went over the ethical line.

To wszystko na dzi艣!

Pozdrawiam i dobrego weekendu! 鉂勶笍 鉀 馃尐锔


Miko艂aj Wa艣kowski
uxowy.dev


Przegapi艂e艣 ostatnie wydania?

Je艣li jeszcze nie ma Ci臋 na li艣cie 馃

Wysy艂amy jeden email tygodniowo, w ka偶dy pi膮tek, o godz. 12:00.
Warto艣ciowa wiedza o UI/UX dla developera mo偶e wyl膮dowa膰 do Twojej skrzynki.