🎨 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

UX | źródło, źródło, źródło

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ć 🤝.


UX | źródło
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?