馃帹 uxowy.dev #36
3 min czytania

馃帹 uxowy.dev #36

po kr贸tkiej 馃槄 przerwie od standardowych wysy艂ek... wracam na Twoj膮 skrzynk臋聽馃摠

Zanim zaczniemy - dzi臋kuj臋 bardzo za tak du偶o odpowiedzi na ostatni e-mail. To聽motywuje i daje kopa do dzia艂ania. A聽wr臋cz zabrania my艣lenia o聽zaprzestaniu wysy艂ek. Dzi臋ki! 馃檹

A co dzisiaj?

  1. 3 wskaz贸wki dla stanu empty
  2. Nagranie: "Jak audytowac i zwi臋ksza膰 accesibility w聽komponentach UI?"
  3. Ic么nes - mega przydatna biblioteka z zestawami ikon dla Twojego projektu
  4. [Easter egg - co si臋 podzieje w uxowym?... 馃]

3, 2, 1... Start! 馃敟


3 wskaz贸wki dla stanu empty

UX, UI | 藕r贸d艂o

O tym, 偶e stan empty TRZEBA UWZL臉DNIA膯 chyba m贸wi膰 ju偶 nie trzeba 馃槈

Ale jak zrobi膰 go dobrze?
Co mo偶na tam umie艣ci膰?

Mam dla Ciebie 3 wskaz贸wki + link do 艣wietnych UXowych przyk艂ad贸w.

1. U偶yj grafiki / illustracji / ikony

Screen aplikacji Walmart na mobbin.com

Warto pomy艣le膰 nad ilustracj膮, kt贸ra wype艂ni puste pole i jednocze艣nie uatrakcyjni nasz widok (po darmowe ilustracje mo偶esz si臋gn膮膰 np. do聽undraw.co).

Warto jednocze艣nie pami臋ta膰, 偶e s膮 sytuacje, kiedy grafika dla stanu empty nie jest po偶膮dana. Np. kiedy nie chcemy odci膮ga膰 uwagi u偶ytkownika od innych element贸w na stronie:

Screen aplikacji Walmart na mobbin.com

2. Podaj pow贸d i jakie艣 rozwi膮zanie

Screen aplikacji Apple Books na mobbin.com

U偶ytkownik musi wiedzie膰 dlaczego "to co艣" jest widoczne i co mo偶e zrobi膰, 偶eby w聽tym miejsu wy艣wietli艂y mu si臋 faktyczne dane. Mo偶emy si臋 tu pokusi膰 o聽tytu艂 + opis. Plus...

3. Call to action

Screen aplikacji Pinterest na mobbin.com

Je艣li jeste艣my w stanie poda膰 u偶ytkownikowi akcj臋, kt贸ra spowoduje wyj艣cie ze stanu empty, np. dodanie elementu na stronie z list膮, to zr贸bmy to.

Podajmy mu to jak na tacy. User nie musi wtedy szuka膰 po interfejsie, gdzie to zrobi膰.

Przyk艂ady stan贸w empty, z 偶ycia wzi臋te

Mobbin.com ze stanami Empty.

Warto doda膰 sobie te strony do zak艂adek:

Znajdziesz tam wiele dobrych przyk艂ad贸w ekran贸w i flow tworzonych cz臋sto przez wielkich graczy z porz膮dnym zespo艂em UXowym 馃殌


Nagranie: "Jak audytowa膰 i聽zwi臋ksza膰 accesibility w聽komponentach UI?"

Na tegorocznym dev.js summit Ania Musia艂 poprowadzi艂a dla nas warto艣ciow膮 prelekcj臋 o聽a11y (accessibility).

To znakomite przekazanie wiedzy o a11y dla developera.

Ania podaje sposoby i narz臋dzia, dzi臋ki kt贸rym jeste艣my w stanie sprawdzi膰 w聽jakiej kondycji jest nasza aplikacja pod wzgl臋dem a11y.

Oblukaj p贸ki dost臋pne, bo nie wiem, czy to nagranie b臋dzie jeszcze d艂ugo wisie膰 na kanale konferencji 馃槈

Link do nagrania: https://www.youtube.com/watch?v=7UBrhLFF6rA


Mega przydatna biblioteka z聽zestawami ikon dla Twojego projektu

Resources | 藕r贸d艂o

Ic么nes to biblioteka ikon, kt贸ra pozwoli Ci lepiej wybra膰 ikony dla Twojej aplikacji i 艂atwiej z nich korzysta膰.

Nie ma co tutaj du偶o pisa膰, trzeba wej艣c, przeklika膰 i zobaczy膰 co oferuje. Mnie si臋 korzysta z tego narz臋dzia bardzo dobrze i聽zago艣ci u聽mnie na d艂u偶ej.

Link: icones.js.org


To wszystko na dzi艣.

Aha, jest info z pierwszej r臋ki - zbli偶a si臋 koniec Pythona: 馃槀馃槀馃槀

Zassane z kana艂u #memy-it spo艂eczno艣ci Zaprogramuj 呕ycie 鉂わ笍

Pom贸偶 innym wiedzie膰 wi臋cej

鉁岋笍
Pami臋taj, 偶e mo偶esz pom贸c swoim znajomym i ziomkom z pracy. Na pewno im te偶 przyda si臋 troszk臋 wiedzy o UX/UI dla developera! Pode艣lij im link: uxowy.dev/lista

Pozdrawiam i do nast臋pnego! 馃憢

Miko艂aj Wa艣kowski
uxowy.dev聽

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.