🎨 uxowy.dev #11

Mikołaj Waśkowski -

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

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

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ń! 🙂