馃帹 uxowy.dev #10
6 min czytania

馃帹 uxowy.dev #10

Sorry, 偶e zak艂贸camy Ci d艂ugi weekend, ale newsletter - jak co tydzie艅 -聽musi p贸j艣膰聽馃挜聽Nie zostawiliby艣my Ci臋 bez ciekawych materia艂贸w o聽UI/UX dla developera na weekend 馃檪

Dzi艣 do oblukania:

  1. UX: Jak zrobi膰 dobry dashboard
  2. Zagadka 馃
  3. 5 tip贸w: nowoczesny UI aplikacji
  4. Kogo warto obserwowa膰 馃憖
  5. Narz臋dzie do usuwania obiekt贸w ze zdj臋膰 - WOW, jak聽to聽dzia艂a聽馃槏

Zaczynamy!


UX: Jak zrobi膰 dobry dashboard

UI, UX | 藕r贸d艂o

Pi臋kne s艂owa pojawiaj膮 si臋 w tym art:

UX Design is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product.

Zr贸bmy wi臋c ten UX Design, aby naszym u偶ytkownikom by艂o lepiej 馃榾

1. Cel

Na pocz膮tku, trzeba okre艣li膰 g艂贸wny cel dashboardu:

  • operacyjny - pokazuje ostatni status systemu, obejmuje kr贸tkie ramy czasowe, s艂u偶y do szybkiego podejmowania decyzji, bazuj膮c na przedstawionych danych; kluczowa jest tu prostota i szybko艣膰
  • analityczny - do wy艣wietlania du偶ej ilo艣ci danych, zawiera du偶o wykres贸w i聽wizualnej reprezentacji danych
  • strategiczny - zawiera d艂ugofalowe strategie i wska藕niki
  • taktyczny - udost臋pnia pewne wska藕niki dot. np. pracy; pozwala na 艣ledzenie odchyle艅 od normy i oszacowanie trend贸w w organizacji

Samo to, 偶e zastanowimy si臋 dobrze, jaki jest cel dashboardu, nakieruje nas na dalsze rozwi膮zania i u艂atwi podejmowanie decyzji.

2. Prezentacja danych

Tutaj 艣ci膮ga, jakiej graficznej formy pokazania danych mo偶emy u偶y膰, aby dobrze je zobrazowa膰:

殴r贸d艂o

3. Layout i priorytety

Mo偶na pos艂u偶y膰 si臋 tutaj najbardziej powszechnym wzorcem: "F pattern" zbadany i聽okre艣lony przez NN Group.

W skr贸cie: najcz臋艣ciej stron臋聽internetow膮 czytamy pod膮偶aj膮c w 艣lad litery F, jak na screenach poni偶ej:

殴r贸d艂o

Wnioski: tak uog贸lniaj膮c - najwa偶niejsze rzeczy umieszczamy na g贸rze, po lewej. Najmniej wa偶ne - na dole, po prawej:

殴r贸d艂o

F-pattern oczywi艣cie nie jest jedynym i zawsze-idealnym wzorcem. Czasami warto z聽niego zrezygnowa膰 i prze艂ama膰 monotoni臋, aby interfejs nie by艂 taki nudny.

Wi臋cej o F-pattern tutaj:
https://uxplanet.org/f-shaped-pattern-for-reading-content-80af79cd3394

Popularne uk艂ady dashboardu:

殴r贸d艂o

4. Cards

U偶yj cards'贸w / boks贸w, kt贸re wyra藕nie grupuj膮 powi膮zane ze sob膮 dane.

Dashboard powinien by膰 zbiorem widget贸w, kt贸re mo偶emy przenosi膰 i聽modyfikowa膰:

殴r贸d艂o

5. Marginy i paddingi

Zawsze warto zacz膮膰 od za du偶ej ilo艣ci przestrzeni i potem stopniowo j膮 zmniejsza膰, je艣li jest taka potrzeba.

殴r贸d艂o

Zachowuj膮c du偶o przestrzeni mi臋dzy elementami, sprawiamy, 偶e nasz layout b臋dzie czysty i czytelny.

6. Unikaj d艂ugich dashboard贸w

Umie艣膰my tu tylko najwa偶niejsze dane, a reszt臋 ukryjmy pod przyciskami i innymi akcjami.

Warto trzyma膰 si臋 w wysoko艣ci strony ok. 100vh-120vh.

7. Personalizacja i dostosowanie

Personalizacja bazuje na roli lub zachowaniu u偶ytkownika w systemie i stara si臋 przewidzie膰 i podpowiedzie膰 wygodne dla niego patterny.

Mo偶emy nawet do tego zatrudni膰 sztuczn膮 inteligencj臋, kt贸ra zaproponuje wygl膮d dashboardu, bazuj膮c na r贸偶nych zmiennych.

Customizacja, to mo偶liwo艣膰 dostosowania widoku przez u偶ytkownika pod swoje indywidualne potrzeby (艣wiadomie).

Na dashboardzie powinni艣my da膰 u偶ytkownikowi woln膮 r臋k臋 - pozwoli膰 na wyb贸r element贸w i聽spos贸b ich rozmieszczenia wg. w艂asnych predyspozycji.

To wszystko.
Ostatni punkt jest bardzo wa偶ny.

Je艣li si臋 potkniemy podczas okre艣lania priorytet贸w i tego, co w og贸le ma si臋 znale藕膰 na dashbaordzie, to u偶ytkownik sam sobie to naprawi 馃槈


Chwila na zagadk臋 馃

Co tutaj mo偶na by poprawi膰?

Odpowied藕 znajdziesz na ko艅cu maila.


5 tip贸w: nowoczesny UI aplikacji

UI | 藕r贸d艂o

Autor wpisu przez ca艂y dzie艅 sprawdza艂 aplikacje, kt贸re uwa偶ane s膮 za "nowoczesne", takie jak: Airbnb, Coinbase, Uber, Headspace i spisa艂 tipy, co zrobi膰, aby aplikacja mia艂a nowoczesny look:

1. Przestrze艅, przestrze艅, przestrze艅

Line-height, padding, margin... - daj go wincy!

Je艣li my艣lisz, 偶e 8px tutaj wystarczy, to... daj 12px 馃槀

Po raz kolejny: pod膮偶aj wg. zasady "zaczynaj od za du偶ej ilo艣ci spacingu".

Przyk艂ad:

Wi臋cej spacingu vs. mniej. 殴r贸d艂o

2. Niewidzialne tytu艂y

Ukrywanie paska tytu艂u czy wyszukiwarki to standard na iOS. Pokazuj te elementy i ukrywaj w zale偶no艣ci od zachowania usera, np. scroll do samej g贸ry lub poci膮gni臋cie na d贸艂.

Dzi臋ki temu zaoszcz臋dzisz troch臋 miejsca a layout b臋dzie czystszy.

Przyk艂ad:

"Singapore" po scrollu w d贸艂 jest sticky i zmniejsza si臋, pozostawiaj膮c jednocze艣nie mo偶liwo艣膰 klikni臋cia go i zmiany lokalizacji. Zwi臋ksza si臋 po przej艣ciu na sam膮 g贸r臋 ekranu. 殴r贸d艂o

3. Zaokr膮glone rogi

To jest bardzo prosty myk. Czasami w UI wystarczy zaokr膮gli膰 rogi, doda膰 lekki shadow i bum - mamy w niebo lepszy interfejs, kt贸ry wygl膮da bardziej "艣wie偶o".

Rarely do we find objects in nature that have sharp corners. The world is made of rounded corners. Sharp corners hurt you. Sharp corners are to be avoided 鈥 Steve Jobs

Je艣li nie tworzysz interfejsu, kt贸ry ma by膰 z natury agresywny i聽dynamiczny, np. gry akcji, u偶yj przyjaznych i聽bezpiecznych zaokr膮gle艅.

To jest g艂臋boko zakorzenione w naszym m贸zgu.

Zobacz.

Kt贸ry piesek wydaje Ci si臋 bardziej przyjazny? 馃槀

Kt贸rego by艣 przytuli艂? 殴r贸d艂o

4. Grafiki

Ludzie s膮 wzrokowcami. Je艣li tylko jaki艣 przekaz mo偶esz zast膮pi膰 lub wspom贸c zdj臋ciem lub ilustracj膮 - zr贸b to.

Airbnb - zdj臋cia i ilustracje everywhere. 殴r贸d艂o
Research at 3M Corporation concluded that we process visuals 60,000 times faster than text.

Jest wiele darmowych i p艂atnych 藕r贸de艂 grafik i illustracji, m.in.: undraw.co, pixabay.com. Nie musimy by膰 designerami, 偶eby doda膰 do聽naszej aplikacji grafik臋聽馃槈

5. Animacja

P艂ynnie przechodz膮cy interfejs i animowane mikro-interakcje robi膮聽robot臋聽馃敟

Honk app - iOS. 殴r贸d艂o

Wi臋cej o animacjach i zwi臋kszeniu dzi臋ki nim UX, tutaj:
Creating Usability with Motion: The UX in Motion Manifesto

To wszystko.
Stosuj膮c te tipy zauwa偶alnie od艣wie偶ysz UI, a tym samym zwi臋kszysz UX aplikacji. Wiesz co robi膰 - do dzie艂a 馃檪


Kogo warto obserwowa膰?

Jakob Nielsen

Autor 10-ciu heurystyk u偶yteczno艣ci interfejsu u偶ytkownika - 10 Usability Heuristics for User Interface Design, kt贸re ka偶dy developer (nie聽wspominaj膮c o聽UI/UX designerze) powinien zna膰.

Wi臋cej o聽Jakobie na stronie Nielsen Norman Group.

Koniecznie zobacz to wideo "less is more":

Web: nngroup.com
YouTube: nngroup
Twitter: NNgroup


Narz臋dzie do usuwania obiekt贸w ze聽zdj臋膰

Resources | 藕r贸d艂o

Je艣li kiedy艣 chcia艂e艣 usun膮膰 co艣 ze zdj臋cia, ale nie ogarnia艂e艣 Photoshopa, albo po prostu szkoda Ci by艂o na to czasu... to聽ju偶 przesz艂o艣膰.

Zobacz cleanup.pictures w akcji:

Jak to dzia艂a?

Narz臋dzie u偶ywa LaMa (large mask inpainting) - open source modelu z聽laboratorium sztucznej inteligencji Sansunga (Samsung AI Lab).

Link: cleanup.pictures


Zagadka - odpowied藕 馃憞

Co tutaj jest nie tak?

馃憜 Z艂y UX
馃憜 Dobry UX

Co raz cz臋艣ciej mo偶na spotka膰 formularze rejestracji, kt贸re nie wymagaj膮 powt贸rzenia has艂a. W razie co, mo偶emy je zmieni膰, maj膮c dost臋p do maila, c'nie?聽馃槈


To wszystko w dzisiejszym wydaniu newslettera 馃帹聽uxowy.dev.

Dawaj zna膰 o聽nas zawsze i聽wsz臋dzie - b臋d膮 Ci wdzi臋czni! 馃敟
No to jedziemy dalej z d艂ugim weekendem 馃榾

殴r贸d艂o

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.