馃帹 uxowy.dev #20
6 min czytania

馃帹 uxowy.dev #20

Na wst臋pie, bardzo dzi臋kujemy wszystkim, kt贸rzy wzi臋li udzia艂 w聽ostatniej ankiecie. Dzi臋ki Wam wiemy, w kt贸rym kierunku mamy i艣膰. Wyniki wrzucili艣my na naszego Facebooka.

Bazuj膮c na wynikach ankiety, stworzymy spo艂eczno艣膰 wok贸艂 naszego newslettera, w kt贸rej b臋dziesz m贸g艂/mog艂a mie膰 bliski kontakt z innymi developerami, kt贸rym zale偶y na dobrym UI/UX, do艣wiadczonymi ekspertami z bran偶y UI/UX, tw贸rcami w艂asnych produkt贸w i... wieloma innymi ciekawymi lud藕mi 馃槈

A co w dzisiejszym wydaniu newslettera?

  1. Jak robi膰 dobre tabele dla SaaS?
  2. #PrzemoPatterns: Loader
  3. Kogo warto obserwowa膰 馃憖
  4. User Inyerface - zagraj w UXow膮 gierk臋

Start!


Jak robi膰 dobre tabele dla SaaS?

UI, UX | 藕r贸d艂o
UX Collective

Praktycznie ka偶dy SaaS ma strony z tabelami, kt贸re przedstawiaj膮 czasem bardzo du偶y zestaw danych. Oto kilka szybkich wskaz贸wek, aby tabele te by艂y efektywne w聽u偶ytkowaniu i mia艂y lepszy UX. Oczywi艣cie tipy te nie ograniczaj膮 si臋 tylko do tabel w SaaS'ach.

Stan Loading

Preview Loading 鈥 Gokul Krishnan

Nie u偶ywaj pls "kr臋cio艂a"... u偶yj skeleton贸w - wyrenderuj tabel臋 z聽wierszami wskazuj膮cymi na stan 艂adowania. U偶ytkownik o聽wiele szybciej zobaczy zarys interfejsu, dzi臋ki czemu, nie tylko wie czego si臋 spodziewa膰, ale tak偶e i odbiera taki spos贸b 艂adowania zawarto艣ci jako znacznie szybszy na poziomie percepcji, cho膰by trwa艂 tyle samo i zosta艂 ukazany np. za pomoc膮 spinnera.

Paginacja

Przyk艂ad paginacji tabeli. 殴r贸d艂o

Paginacja, to bardzo szeroki temat i mo偶na by o niej zrobi膰 osobny wpis. Sposob贸w na paginacj臋 jest wiele i nale偶y dobiera膰 je odpowiednio do charakterystyki tabeli. 聽Tak偶e... wi臋cej info wkr贸tce.

殴r贸d艂o

Je艣li twoja tabela ma wi臋cej rekord贸w ni偶 mie艣ci si臋 na widoku, (np. wi臋cej ni偶 25) rozwa偶 zastosowanie sticky (fixed) headera tabeli. Dzi臋ki temu user nie b臋dzie musia艂 scrollowa膰 do g贸ry, 偶eby sprawdzi膰 co oznacza warto艣膰 X聽w聽danej kom贸rce i聽pozb臋dziemy si臋 frustruj膮cych scroll贸w w聽g贸r臋 i聽w聽d贸艂.

Z punktu widzenia UX, u偶ytkownik ci膮gle pozostaje w聽odpowiednim kontek艣cie i nie musi zapami臋tywa膰 nag艂贸wk贸w tabeli, co dobrze 艂膮czy si臋 z聽wspominanymi ju偶 przez nas heurystykami.

Edytowalne kolumny

殴r贸d艂o

艢wietnym rozwi膮zaniem z punktu widzenia usera jest da膰 mu mo偶liwo艣膰 dostosowania widoczno艣ci i kolejno艣ci kolumn w tabeli. W tym przypadku user dostosuje widok do swoich wymaga艅. Pami臋tajmy, aby te ustawienia gdzie艣 zapisywa膰, np. w localStorage.

Akcje

殴r贸d艂o

Je艣li akcji jest wiele - dodaj w ostatniej kolumnie przycisk, kt贸ry otworzy menu ze wszystkimi akcjami.

Je艣li przewidujesz, 偶e user b臋dzie chcia艂 wykona膰 jedn膮 akcj臋 na wielu elementach w tabeli, daj mo偶liwo艣膰 akcji "bulk'owych". Standardem tutaj jest checkbox po lewej stronie. Akcje powinny by膰 nad i/lub pod tabel膮.

Linki

殴r贸d艂o

Je艣li jaki艣 element w wierszu jest klikalny, to musi wygl膮da膰 jak klikalny (szok 馃憖). Dodaj underline albo kolor specyficzny dla link贸w w Twojej aplikacji. Pami臋taj, aby taki link otworzy膰 w nowej karcie / oknie modalnym lub umo偶liwi膰 userowi szybki powr贸t do tabeli ze stanem sprzed klikni臋cia.

Sortowanie i filtrowanie

殴r贸d艂o

Pozw贸l na sortowanie tabeli za pomoc膮 klikalnego headera. Pami臋taj, aby prawid艂owo oznaczy膰 kierunek sortowania w聽odpowiedniej kolumnie za pomoc膮 strza艂ki obok nazwy kolumny.

Filtrowanie jest mocno specyficzne od przypadku, czasami dobra jest wyszukiwarka, czasami radio buttony, czasami dropdown, czasami wszystko nas raz.

Na koniec - kolorki

Nie u偶ywaj w domy艣le czarnych border贸w. Niech szablon tabeli b臋dzie lekki i聽nie przykuwa zbytniej uwagi. To dane maj膮 by膰 dobrze widoczne, nie odci膮gaj od nich uwagi.

U偶yj kolor贸w, kt贸re pomog膮 w szybkim odczytywaniu warto艣ci, np. czerwonego/zielonego do uwidocznienia spadk贸w/wzrost贸w.

Je艣li chcesz wiedzie膰 wi臋cej, tutaj dodatkowa gar艣膰 tip贸w o tabelach:
https://medium.com/design-with-figma/the-ultimate-guide-to-designing-data-tables-7db29713a85a


#PrzemoPatterns: Loader

Jedn膮 z cz臋stszych przyczyn irytacji u偶ytkownik贸w aplikacji jest d艂ugie 艂adowanie si臋 danych. Jako programi艣ci, dobrze wiemy, 偶e s膮 momenty, kiedy faktycznie potrzebujemy nieco wi臋cej czasu, by dosta膰 zwrotk臋 z聽backendu.

Techniczne rozwi膮zanie problemu nie zawsze b臋dzie proste i聽szybkie, zatem w聽jaki spos贸b mo偶emy wykorzysta膰 wiedz臋 o聽UX i natychmiastowo ulepszy膰 wra偶enia w聽oczekiwaniu na za艂adowanie danych?

Co powinien zawiera膰 dobrze zaprojektowany loader?

鈩癸笍 Wskaz贸wki

  • Przede wszystkim, u偶ytkownik powinien w og贸le wiedzie膰, 偶e strona jest w trakcie 艂adowania. Dodajmy zatem jaki艣 zrozumia艂y wska藕nik wizualny (np. spinner, progress-bar, klepsydr臋 etc.), kt贸ry poinformuje, 偶e operacja jest w toku.
  • Wyja艣nijmy stan i przedmiot 艂adowania. Niech standardowe 鈥溑俛dowanie鈥︹ stanie si臋 tekstem zast臋pczym, a聽my postarajmy si臋 by膰 bardziej szczeg贸艂owi np. 鈥淭rwa dodawanie kontakt贸w...鈥.
  • Je艣li bliskie s膮 Wam gry video, to sposob贸w na kreatywne wykorzystanie czasu sp臋dzonego oczekuj膮c na np.: za艂adowanie mapy, znajdziecie w nich ca艂膮 mas臋. Od copywritingu zorientowanego na przedstawiony 艣wiat i narracj臋, po tipy, kt贸re mo偶na wykorzysta膰 w rozgrywce.
  • Mo偶emy zaciekawi膰 u偶ytkownika jak膮艣 zabawn膮 ilustracj膮 lub ciekawostkami z bran偶y - pozwoli to nieco wyd艂u偶y膰 oczekiwanie i zapobiec nerwowej reakcji u偶ytkownika.
  • Gdy 艂adowanie trwa mi臋dzy 2 a 10 sekund dobrym rozwi膮zaniem jest u偶ycie progress-bara, gdy powy偶ej 10 sekund - naliczania procentowego (pencilandpaper.io).
  • Dla d艂u偶szego czasu 艂adowania, nie wystarczy wy艂膮cznie informacja o tym, 偶e 鈥瀋o艣 si臋 dzieje鈥, cz臋sto zbyt d艂uga obserwacja nawet najpi臋kniej zap臋tlonej animacji powoduje powstanie w g艂owie pytania 鈥濶a pewno wszystko w porz膮dku? Nic si臋 nie zaci臋艂o?鈥 Kto nie odmierza艂 paska post臋pu kursorem myszy przy instalacji, niech pierwszy rzuci kamieniem. Istotna jest tutaj informacja o ci膮g艂o艣ci procesu, a wi臋c zapewnieniu u偶ytkownika, 偶e proces wykonuje si臋 i co istotniejsze wykazuje pewien cykliczny post臋p.
  • Dost臋pno艣膰: upewnijmy si臋, 偶e stan 艂adowania jest wyra藕ny i聽widoczny, mo偶emy r贸wnie偶 doda膰 dwie wersje odpowiednie dla jasnego/ciemnego t艂a.

Ciekawa animacja podczas 艣ci膮gania pliku (kliknij, je艣li widzisz tylko statyczny plik):

殴r贸d艂o: Loadingicon

Jak powinna zachowywa膰 si臋 strona w tle podczas 艂adowania, zobaczysz ju偶 w聽nast臋pnym wpisie z serii #PP!


Kogo warto obserwowa膰?

殴r贸d艂o

Victor Ponamariov

Victor to developer, kt贸ry pasjonuje si臋 UX/UIem. Czyli podobnie jak my 馃檪 W聽grudniu wyda艂 ebooka "100 UI/UX Tips", prowadzi newsletter, kana艂 na YT i聽bloga. Teksty te s膮 zrozumia艂e nawet wtedy, gdy tylko je przeskanujemy wzrokiem. Bez czytania ca艂o艣ci.

Przyk艂ad:馃憞

Twitter: @vponamariov
YouTube: victorui
Web (zapis na newsletter): user-interface.io


User Inyerface - zagraj w聽UXow膮 gierk臋

Resources | 藕r贸d艂o
userinyerface.com

Jak widzisz na przyk艂adzie powy偶ej (zielony kolor z聽zaprzeczeniem "NO"), jest to gierka, w kt贸rej poznasz dobre praktyki i patterny UI/UX od strony "tak nie r贸b".

Spr贸buj przej艣膰 gr臋 (wype艂ni膰 formularz) jak najszybciej.
https://userinyerface.com/

Wbrew pozorom, to nie jest takie 艂atwe 馃槀


To wszystko na dzi艣, podoba艂o si臋?
Na koniec, klasycznie, memik:

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

Pom贸偶 innym wiedzie膰 wi臋cej

Znasz kogo艣, kto powinien do艂膮czy膰 do naszej spo艂eczno艣ci? Je艣li tak, to聽wy艣lij do tej osoby link do skr贸tu z ostatnich wysy艂ek: uxowy.dev/lista. I聽niech do艂膮czy do 馃帹聽uxowy.dev!

Dobrego weekendu! 鉁岋笍

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.