馃帹 uxowy.dev #65: 16聽ma艂ych zasad tworzenia聽UI, kt贸re聽robi膮 wielk膮 r贸偶nic臋
4 min czytania

馃帹 uxowy.dev #65: 16聽ma艂ych zasad tworzenia聽UI, kt贸re聽robi膮 wielk膮 r贸偶nic臋

dzi艣 mam dla Ciebie jeden, ale do艣膰 szeroko obejmuj膮cy temat UI/UX wpis:

  • 16 ma艂ych zasad tworzenia UI, kt贸re robi膮 wielk膮 r贸偶nic臋

To na prawd臋 (NA PRAWD臉) dobra lista zasad, kt贸re na 100% przydadz膮 Ci si臋 przy tworzeniu UI.

Zapraszam! 鈽 馃憞 馃帹


16 ma艂ych zasad tworzenia UI, kt贸re robi膮 wielk膮 r贸偶nic臋

呕eby zrobi膰 u偶yteczny UI z dobrym UX'em nie potrzebujemy by膰 mega kreatywnymi, artystycznymi duszami. 馃懆鈥嶐煄

馃か

Ale ciii...

Powinni艣my kierowa膰 si臋 zasadami.
To dobra wiadomo艣膰 dla nas, programist贸w. 馃懆鈥嶐煉 馃敟

No to poni偶ej 16 zasad od Adhama Dannawaya.
W pigu艂ce.

  1. Powi膮zane ze sob膮 elementy umie艣膰 blisko siebie, np. na li艣cie tag贸w odst臋py mi臋dzy jednym tagiem a drugim powinny by膰 o wiele mniejsze ni偶 odst臋p mi臋dzy t膮 list膮 tag贸w a innym, niepowi膮zanym ju偶 z tagami elementem. Grupy oddzielaj np. marginem (white space), borderem lub kolorem.
  2. B膮d藕 sp贸jny. U偶ywaj jednego zestawu ikon, 1-2 font贸w, sp贸jnego zaokr膮glenia rog贸w, raz zdefiniowanych przycisk贸w primary/secondary... itd.
  3. Niech podobnie wygl膮daj膮ce elementy dzia艂aj膮... podobnie. Upewnij si臋, 偶e przycisk wygl膮da jak przycisk i 偶aden inny element nie wygl膮da tak samo. Albo design karty filmu wewn膮trz ca艂ej aplikacji wygl膮da tak samo (sp贸jno艣膰) i prowadzi do strony filmu (przewidywalno艣膰). Analogicznie np. karta re偶ysera. Ale dobrze, 偶eby karta filmu r贸偶ni艂a si臋 wizualnie od karty re偶ysera.
  4. Stw贸rz wizualn膮 hierarchi臋. Brzmi dostojnie, ale to nie musi by膰 nic wielkiego. Upewnij si臋 po prostu, 偶e najwa偶niejszy element jest tym, kt贸ry u偶ytkownik zauwa偶y jako pierwszy albo chocia偶 go nie przeoczy (du偶y rozmiar / kontrast / mocne t艂o). Mo偶esz zrobi膰 sobie "test przymru偶onych oczu" - przymru偶 oczy tak, aby艣 widzia艂 wszystko taki bardzo rozmazane. Zobacz na sw贸j UI. Wci膮偶 widzisz i rozpoznajesz najwa偶niejszy element interfejsu? Dobra robota! 馃檪
  5. Usu艅 niepotrzebne ozdobniki, np. ozdobne ramki, kolory itd. Im pro艣ciej, tym lepiej. Im mniej do przetworzenia ma u偶ytkownik, tym 艂atwiej b臋dzie mu znale藕膰 odpowiedni element / osi膮gn膮膰 cel.
  6. U偶ywaj kolor贸w 艣wiadomie. Najlepiej zacznij od odcieni szaro艣ci, jak na szkicach i z czasem zacznij dodawa膰 kolory. Warto sprawdzi膰 znaczenie koloru, jego symbolik臋, je艣li ma to by膰 kolor brandu. Nie u偶ywaj zbyt wielu kolor贸w. Znakomicie sprawdzi si臋 tutaj zasada 60-30-10. 60% to kolor dominuj膮cy, 30% to secondary, 10% to accent. Koloru brandu dobrze u偶ywa膰 na interaktywnych elementach, np. buttonach i linkach. Wtedy unikaj go na statycznych elementach (sp贸jno艣膰).
  7. Elementy interfejsu powinny mie膰 min. kontrast 3:1, np. przycisk na bia艂ym tle - powinien by膰 dobrze widoczny. Istnieje wiele narz臋dzi, kt贸re pozwol膮 nam to sprawdzi膰. Mamy nawet jedno wbudowane w DevToolsy.
  8. Tekst powinien mie膰 min. kontrast 4.5:1. Du偶y teksty (powy偶ej 18px, np. headery) mo偶e mie膰 troch臋 mniejszy - 3:1. Staraj si臋 nie schodzi膰 poni偶ej tych warto艣ci. Zwr贸膰 uwag臋 na kontrast mi臋dzy tekstem a t艂em na przyciskach - tam cz臋sto s膮 niespodzianki.
  9. Nie polegaj tylko na kolorze, aby co艣 oznaczy膰. Oznaczenie link贸w tylko kolorem to za ma艂o (podkre艣lenie?). Albo oznaczenie errora tylko kolorem to za ma艂o (ikonka?). Istnieje wiele chor贸b, kt贸re zaburzaj膮 widzenie kolor贸w.
  10. U偶ywaj jednego fontu, sans serif. To najbezpieczniejszy wyb贸r. Masz wtedy wi臋ksz膮 pewno艣膰, 偶e b臋dzie on czytelny i b臋dzie pasowa艂 do wi臋kszo艣ci element贸w UI.
  11. U偶ywaj fontu z wy偶sz膮 ma艂膮 liter膮, tzw. x-height. Nie wiem jak to profesjonalnie nazwa膰 po polsku (zapomnia艂em). Dla internetowych zastosowa艅 fonty z wi臋kszym x-height s膮 bardziej czytelne.
  12. Ogranicz pisanie drukowanymi literami. Tekst pisany drukowanymi literami trudniej i wolniej si臋 czyta.
  13. U偶ywaj tylko dw贸ch font-weight. Nie u偶ywaj 5 typ贸w pogrubie艅 tylko dlatego, 偶e font takie daje do dyspozycji. Warto mie膰 w swojej aplikacji zdefiniowane warto艣ci dla "regular" i "bold". I tyle. Unikaj font-weight rz臋du 200-300 dla ma艂ego tekstu, jest wtedy ma艂o czytelny. Light przeznacz raczej dla du偶ych tytu艂贸w.
  14. Unikaj idealnie czarnego koloru tekstu #000000. W przypadku bia艂ego t艂a, czarny tekst ma najwy偶szy mo偶liwy kontrast. I analogicznie, bia艂y tekst na czarnym tle. Jest to m臋cz膮ce dla naszych oczu. Zejd藕my troch臋 z kontrastu ale pami臋tajmy o minimalnych warto艣ciach podanych wy偶ej.
  15. Wyr贸wnaj do lewej. W wi臋kszo艣ci miejsc na 艣wiecie czytamy od lewej do prawej. I tego warto si臋 trzyma膰, je艣li chodzi o wyr贸wnanie tekstu. Tekst wy艣rodkowany / wyjustowany gorzej si臋 czyta.
  16. U偶yj min. 150% line-height dla tekstu body. Dla du偶ych header贸w mo偶e by膰 mniej, np. 120%. Ale wszelkie opisy i d艂u偶sze fragmenty tekstu powinny mie膰 line-height: 150% lub wi臋cej.

Adham wykorzysta艂 te zasady do nafixowania poni偶szego Carda. 馃憞

Je艣li chcesz wiedzie膰 wi臋cej lub zobaczy膰 graficzki do tych zasad, zapraszam do 藕r贸d艂a.

殴r贸d艂o
16 little UI design rules that make a big impact - Adham Dannaway
A UI design case study to redesign an example user interface using logical rules or guidelines

馃毃
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 馃憞

Dzi艣 na moj膮 skrzynk臋 wpad艂o #65 wydanie 馃帹 uxowy.dev, a w nim: 16 ma艂ych zasad tworzenia UI, kt贸re robi膮 wielk膮 r贸偶nic臋. Polecam!!! https://uxowy.dev/email/65.

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


To wszystko na dzi艣!

Pozdrawiam i dobrego weekendu! 馃獊 鉂勶笌

Miko艂aj Wa艣kowski
uxowy.dev


Przegapi艂e艣 ostatnie wydania? - tutaj linki:

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.