馃帹 uxowy.dev #11
5 min czytania

馃帹 uxowy.dev #11

Witaj w kolejnym wydaniu newslettera uxowy.dev.
Dziesi臋膰 pierwszych wyda艅 ju偶 za nami, wow!

馃敟

Otrzymujemy od Was mega pozytywny feedback, za co bardzo dzi臋kujemy! Jaramy si臋, jak serwery na black-friday 馃槀 聽#偶偶p

Je艣li jeste艣 z nami od niedawna lub przegapi艂e艣 kt贸rego艣 maila, tutaj jest link do listy z聽poprzednimi wysy艂kami (do聽ka偶dej jest skr贸t + link do聽pe艂nej tre艣ci w wersji online): uxowy.dev/lista

Dzi艣 mamy dla Ciebie:

  1. "10 przykaza艅 艣wiata UX" - 10 Heurystyk Nielsena + plakaty do聽pobrania
  2. Zagadka 馃
  3. Nie r贸b cha艂y, r贸b dobrze wygl膮daj膮ce cienie - generator styli聽CSS + wyja艣nienie
  4. Kogo warto obserwowa膰 馃憖
  5. HTML + nowoczesny CSS na najpopularniejsze layouty stron od聽Google'a, do聽skopiowania

...3, ...2, ...1, START! 馃憞


"10聽przykaza艅 艣wiata UX" - 10聽Heurystyk Nielsena

Heurystyki Nielsena s艂u偶膮 do analizowania u偶yteczno艣ci stron聽www i聽aplikacji.

Mo偶na korzysta膰 z nich na ka偶dym etapie istnienia produktu - w聽trakcie tworzenia聽makiet czy design贸w, ale te偶 na istniej膮cym ju偶 produkcie.

Dzi臋ki temu, w szybki i prosty spos贸b sprawdzisz czy Twoja aplikacja nie posiada podstawowych b艂臋d贸w UX.

Dla ka偶dej heurystyki mo偶na by napisa膰 wiele artyku艂贸w i聽poda膰 ton臋 przyk艂ad贸w, ale to nie jest dobry czas i miejsce na takie rzeczy. Dzisiaj zapodaj臋 Ci temat w prosty i lekki do ogarni臋cia spos贸b - skr贸towe informacje prosto od 藕r贸d艂a: list臋 + filmy z聽kr贸tkim om贸wieniem.

Je艣li j臋zyk angielski jest dla Ciebie problemem, luknij tutaj.

Na ko艅cu listy znajdziesz te偶 linki do pobrania plakat贸w z聽heurystykami w dw贸ch wersjach:

  • ka偶da z聽nich na oddzielnej kartce
  • podsumowanko - wszystkie punkty na na jednej stronie

Warto je sobie wydrukowa膰, 偶eby przypomina艂y nam co jaki艣 czas o sobie. Poza tym, wygl膮daj膮 艣wietnie. #dzwi臋k_grzej膮cych_si臋_drukarek 馃榾

Panie i Panowie - bo trzeba okaza膰 du偶o szacunku tej li艣cie i autorom - oto lista 10 Heurystyk Nielsena:

1. Pokazuj status systemu

Przyk艂ady: loader, pasek post臋pu, komunikaty.

2. Zachowaj sp贸jno艣ci mi臋dzy systemem a rzeczywistym 艣wiatem

Przyk艂ady: prosty j臋zyk, logiczna kolejno艣膰.

3. Zapewnij u偶ytkownikowi kontrol臋 i swobod臋 dzia艂ania

Przyk艂ady: mo偶liwo艣膰 cofni臋cia akcji, wyj艣cia lub przerwania dzia艂ania, 艂atwego zamkni臋cia okna.

4. Zachowaj sp贸jno艣膰 i standardy

Przyk艂ady: sp贸jno艣膰 kolor贸w, ikon, tekstu; przewidywalne dzia艂anie systemu.

5. Zapobiegaj b艂臋dom

Przyk艂ady: dynamiczna walidacja, informowanie usera i podrzucanie sugestii.

6. Umo偶liwiaj rozpoznawanie zamiast przypominania

Przyk艂ady: autocomplete, podgl膮d i wizualizacja, "ostatnio ogl膮dane".

7. Zadbaj o elastyczno艣膰 i efektywno艣膰

Przyk艂ady: skr贸ty klawiszowe, zapisywanie filtr贸w i wyszukiwania, najpopularniejsze na g贸rze.

8. Zachowaj estetyk臋 i minimalizm

9. U艂atwiaj wykrywanie, diagnozowanie i聽naprawianie b艂臋d贸w

Przyk艂ady: odpowiedni j臋zyk komunikatu, podpowied藕 rozwi膮zania problemu. 

10. Zapewnij pomoc i dokumentacj臋

Przyk艂ady: r贸偶ne formy pomocy - faq, wizualizacje, onboarding, kontakt.

Playlista YouTube (nngroup) z om贸wieniem heurystyk:

A tutaj znajdziesz wspomniane wcze艣niej linki do pobrania plakat贸w: https://www.nngroup.com/articles/ten-usability-heuristics/#poster


Chwila na zagadk臋 馃

Co tutaj jest nie tak?

Odpowied藕 znajdziesz na ko艅cu maila.


Nie r贸b cha艂y, r贸b dobrze wygl膮daj膮ce cienie - generator styli CSS + wyja艣nienie

UI, UX | 藕r贸d艂o

Ma艂o kt贸ra strona/aplikacja ma dobrze zrobione, realistyczne cienie. Tutaj info jak to zrobi膰 + generator do utworzenia cieni i skopiowania gotowego CSS.

We wpisie 藕r贸d艂owym znajduj膮 si臋 interaktywne fragmenty kodu, na kt贸rych sami mo偶emy sprawdzi膰 jak to dzia艂a i o co biega z tymi cieniami.

殴r贸d艂o

Bez wyrzut贸w sumienia, nie dajemy info tutaj i odsy艂amy Ci臋 do mega zrobionego wpisu na blogu Josh'a W. Comeau: joshwcomeau.com/css/designing-shadows.

A tutaj generator cieni, dzi臋ki kt贸remu w szybki spos贸b wygenerujesz CSS z聽ustawieniami cieni: joshwcomeau.com/shadow-palette.

Autor wpisu i bloga - Josh W. Comeau, z kt贸rego pochodzi ta tre艣膰 to na prawd臋 kozak. Polecamy obluka膰 jego inne wpisy: joshwcomeau.com.


Kogo warto obserwowa膰?

Satori Graphics

Web: satorigraphics.net
Twitter: satorigraphic2k
YouTube: SatoriGraphics

Prawie 800 tys. subskrypcji na YouTube - warto艣ciowy content nt. designu, brandingu, tworzenia logo itd. Je艣li robisz w艂asny produkt i聽chcesz zrobi膰 swoje logo, jak i ca艂y wizualny branding, filmy z聽tego kana艂u b臋d膮 dla Ciebie na聽wag臋 z艂ota.

Jak ju偶 m贸wimy o z艂ocie, zobacz koniecznie wideo
"6 Golden Rules Of Layout Design":


HTML + nowoczesny CSS na najpopularniejsze layouty stron od Google'a, do skopiowania

Developemnt | 藕r贸d艂o

Google zapoda艂 gotowy HTML + CSS do u偶ycia podczas tworzenia nast臋pnego layoutu strony.

Wykorzystuj膮 tam nowoczesny CSS (grid, aspect-ratio itd.), czasami jeszcze eksperymentalne rzeczy. Wszystko wyja艣nione na stronie.

Przyk艂ad CSS dla Aspect ratio image card. 殴r贸d艂o

Warto zerkn膮膰, jakie nowoczesne rozwi膮zania proponuje Google, podaj膮 takie layouty (przy okazji - ciekawe nazwy layout贸w 馃榾):

  • Aspect ratio image card
  • Clamping card
  • Container query card 鈿狅笍
  • Deconstructed pancake
  • Holy grail layout
  • Line up
  • Pancake stack
  • RAM (Repeat, Auto, Minmax)
  • Sidebar says
  • Super centered
  • 12-span grid

Link: web.dev/patterns/layout


Zagadka - odpowied藕 馃憞

Co tutaj jest nie tak?

Z艂y UX 馃憜
Dobry UX 馃憜

To wszystko na dzi艣, dobrego pi膮tunia i weekendu!

PS. Znajomi developerzy na bank b臋d膮 stawia膰 Ci browce, jak wy艣lesz im tego maila i linka do newslettera uxowy.dev 馃嵒

Zapodaj dalej, niech dobry UI/UX si臋 szerzy w艣r贸d developer贸w!聽馃敟

殴r贸d艂o

Do nast臋pnego, ju偶 za tydzie艅! 馃檪

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.