馃帹 uxowy.dev #16
4 min czytania

馃帹 uxowy.dev #16

jak tam Tw贸j pocz膮tek roku 2022?
Karnety na si艂owni臋 zakupione? Dieta u艂o偶ona? 馃槀

M贸wi膮... "jaki pocz膮tek roku, taki ca艂y rok".
Ciekawe dlaczego statystycznie wi臋kszo艣膰 karnet贸w zakupionych w聽styczniu, ju偶 w聽lutym lub marcu nie s膮聽przed艂u偶ane? 馃槀 馃槀 馃槀

A dzisiaj w uxowy.dev - zgodnie z zapowiedziami - pierwszy wpis z serii #PrzemoPatterns. Co to jest? Mega prosta rzecz: bierzemy na tapet jeden element interfejsu, np. button i zarzucamy Ci samo UXowe mi臋sko: tipy, co robi膰, a聽czego lepiej unika膰. Tyle. Szybko i聽konkretnie.

Zapraszamy do obczajki:

  1. #PrzemoPatterns: Modal
  2. Top 10 Web-design mistakes of 2021 - film od "ojca UX" Jakoba Nielsena
  3. UI micro-tips od Steve Schoger'a - designera w Tailwind Labs
  4. Kogo warto obserwowa膰 馃憖
  5. Darmowy kurs email: Design Pitfalls

Obczajka - start! 馃挜


#PrzemoPatterns: Modal

馃 Co to jest?

Modal to po prostu wyskakuj膮ce okienko czekaj膮ce na interakcj臋 z聽u偶ytkownikiem.

鉁 Kiedy stosowa膰?

U偶yj gdy chcesz przerwa膰 bie偶膮cy widok u偶ytkownika, aby przyci膮gn膮膰 jego pe艂n膮 uwag臋 na co艣 wa偶niejszego, np.:

  • dodanie nowego elementu,
  • edycj臋,
  • subskrypcj臋,
  • potwierdzenie destrukcyjnej akcji (ostrze偶enie)

鉂 Kiedy unika膰?

Nie u偶ywaj w celu pokazania b艂臋du, sukcesu czy ostrze偶enia. W聽ten spos贸b blokujesz ca艂膮聽tre艣膰 i interackj臋 z elementami pod modalem. Nie聽u偶ywaj go do聽czysto informacyjnych kwestii.

鈩癸笍 Wskaz贸wki

Co powinien zawiera膰 dobrze zaprojektowany modal?

  1. Przejrzysty, prosty tytu艂 wyja艣niaj膮cy akcj臋 w modalu.
  2. Zrozumia艂y przycisk dzia艂ania (z ang. call to action -聽CTA): u偶ytkownicy powinni zawsze wiedzie膰, co si臋 wydarzy po klikni臋ciu w dany przycisk, nie聽stosuj button贸w w stylu 鈥淥K鈥. Zamiast tego u偶yj "Usu艅" czy "Zapisz".
  3. Kolory CTA: zadbaj o odpowiednie rozr贸偶nienie kolorystyczne powi膮zane z聽przeznaczeniem danej akcji (tryb informacyjny, destruktywny lub pozytywny). Pssst! Oczywi艣cie mo偶e to tak偶e zale偶e膰 od samej warstwy wizualnej produktu, kt贸ry tworzysz. Przyk艂ad: dla aplikacji PeoPay od Pekao S.A. przyciski potwierdzaj膮ce s膮... czerwone. Bo to ich kolor "primary".
  4. Mo偶liwo艣膰 wyj艣cia z okna modalnego: dodaj przycisk "X" w聽prawym g贸rnym rogu lub przycisk "Zamknij"; klikni臋cie poza modalem powinno r贸wnie偶 automatycznie go zamkn膮膰.
  5. RWD: we藕 pod uwag臋 r贸偶ny rozmiar modala na poszczeg贸lnych urz膮dzeniach. Dla mobile warto powi臋kszy膰 okno modalne do pe艂nego ekranu, aby uzyska膰 wi臋cej miejsca.
  6. Zmiana t艂a poza modalem: przyciemnij lub rozmyj t艂o poza oknem modalnym, aby to na nim skupi膰 ca艂膮 uwag臋.
  7. Opis (opcjonalnie): je艣li uznasz, 偶e u偶ytkownikowi przyda si臋 wi臋cej informacji, aby zrozumie膰 wag臋 podejmowanej decyzji - dodaj opis pod tytu艂em.

Przyk艂ad dobrze zaprojektowanego okna modalnego:

殴r贸d艂o: system 鈥淐ontra鈥 by ITTI

Podoba Ci si臋? Daj zna膰 馃槈

Pami臋taj prosz臋, 偶e te tipy s膮 du偶ym uog贸lnieniem, a聽ka偶dy przypadek trzeba traktowa膰 indywidualnie.

Czasami np. klikni臋cie w t艂o poza modalem nie powinno go zamkn膮膰. Taki zabieg mo偶e mie膰 na celu unikni臋cie przypadkowych wyj艣膰 z聽okna. U偶yty w聽spos贸b 艣wiadomy i聽celowy przyczyni si臋 do polepszenia UX aplikacji.

Je艣li chcesz poczyta膰 wi臋cej o dobrych praktykach w Modalach, podrzucamy Ci 艣wietny artyku艂 spod szyldu UX Planet:
https://uxplanet.org/best-practices-for-modal-window-design-627f7aba57f1


Top 10 Web-design mistakes of 2021 - film od聽"ojca聽UX" Jakoba聽Nielsena

Je艣li zale偶y Ci na dobrym UX aplikacji, to po prostu MUSISZ zobaczy膰 to wideo:

Je艣li na li艣cie znalaz艂a si臋 jaka艣 pozycja, to znaczy, 偶e by艂a ona albo najcz臋艣ciej spotykana albo by艂a dramatyczna w skutkach dla u偶ytkownika.

Dla pewno艣ci - jakby wideo powy偶ej nie dzia艂a艂o, to tutaj link:
https://www.youtube.com/watch?v=VGxze7xMYJs


UI micro-tips od Steve Schoger'a - designera w聽Tailwind Labs

Przyk艂adowe tipy o borderach. 殴r贸d艂o

Steve, designer z Tailwind Labs (Tailwind CSS), przy okazji pracy nad Refactoring UI (o tej 艣wietnej ksi膮偶ce jeszcze us艂yszysz w聽naszym newsletterze), rozpocz膮艂 seri臋 mikro-tip贸w o UI.

To niesamowicie przydatne i 艂atwo przekazane tipy o UI:
https://twitter.com/i/events/994601867987619840

Oblukaj 馃憜


Kogo warto obserwowa膰?

Steve Schoger

Jak wspomniano wy偶ej, wsp贸艂autor znakomitej ksi膮偶ki Refactoring UI. Designer w聽Tailwind Labs. Przekazuje wiedz臋 o UI w mega prosty spos贸b, w formach wprost idealnych dla developera.

Twitter: steveschoger
YouTube: SteveSchoger


Darmowy kurs email: Design Pitfalls

Kurs email Design Pitfalls

Darmowy kurs, kt贸ry zwi臋kszy Twoje skille w UI.

Dostaniesz 6聽maili w聽ci膮gu 2聽tygodni trwania kursu +聽gratis: PDF聽"All of the fonts you鈥檒l ever need".

  • je艣li chcesz robi膰 rzeczy, kt贸re nie s膮 brzydkie
  • bud偶et na designera to 0 z艂 馃槀
  • lub masz side-project i chcesz robi膰 艂adny UI

to 艣mia艂o skorzystaj i do艂膮cz do kursu:
https://designforhackers.com/


To wszystko na dzi艣, dobrego weekendu!

殴r贸d艂o

PS. Prze艣lij znajomym developerom link do ostatnich wysy艂ek newslettera: uxowy.dev/lista. Niech obczaj膮 co wysy艂amy i do艂膮cz膮 do spo艂eczno艣ci developer贸w, kt贸rzy tworz膮 aplikacje z lepszym UI/UX 馃敟

Pozdrawiam i mi艂ego dnia!

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.