馃帹 uxowy.dev #26
5 min czytania

馃帹 uxowy.dev #26

Mam nadziej臋, 偶e dobrze! Witam Ci臋 w kolejnym wydaniu newslettera uxowy.dev. Jak ju偶 zd膮偶y艂e艣 si臋 przyzwyczai膰 - b臋dzie samo przydatne mi臋sko聽馃敟 Zobacz:

  1. 5 rzeczy z UX, kt贸re musisz zna膰 jako DEV
  2. #PrzemoPatterns: Slideshow
  3. Kogo warto obserwowa膰 馃憖
  4. My艣lisz, 偶e trudno robi膰 grafik臋 3D? - no to zobacz

Zaczynamy!


5 rzeczy z UX, kt贸re musisz zna膰 jako聽DEV

Poni偶ej znajdziesz list臋 5 rzeczy z UX, kt贸re musisz zna膰 jako developer.

Potraktuj prosz臋 te punkty jako pocz膮tek poszukiwa艅 i聽wg艂臋biania si臋 w聽temat. Jeli chcesz wiedzie膰 wi臋cej - przejd藕 do do艂膮czonych do punkt贸w link贸w lub przeszukaj Internety pod podanymi keywordami.

馃憠 Aaaa i聽wi臋kszo艣膰 temat贸w zosta艂a ju偶 w jakim艣 stopniu poruszona we wcze艣niejszych wydaniach newslettera. Mo偶esz przelecie膰 t臋 list臋 ostatnich wysy艂ek i obczai膰 tylko to, co Ci臋 interesuje najbardziej.

Koniec wst臋pu, ruszamy:

1. Kontrast i czytelno艣膰 tekstu

  • Zawsze sprawdzaj kontrast kodowanych tekst贸w i zadbaj o ich dobr膮 czytelno艣膰 (fontSize, fontWeight, lineHeight, color...)
  • Powinny one spe艂nia膰 wymogi WCAG
  • Najprostszym sposobem sprawdzenia kontrastu tekstu jest inspektor element贸w przegl膮darki Chrome
  • Je艣li pracujesz na macOS, polecam mini-aplikacj臋 do sprawdzania kontrastu: Contrast
  • Dla d艂ugich tekst贸w trzymaj si臋 zasady max-width ok. 600px i line-height w okolicach 1.5
  • Wi臋cej info, m.in. tutaj, keyword to: ux typography

2. Status systemu

  • U偶ytkownik zawsze powinien by膰 艣wiadomy proces贸w aktualnie maj膮cych miejsce w aplikacji - warte oblukania: 10 heurystyk u偶yteczno艣ci
  • U偶ytkownik powinien zosta膰 o tym poinformowany w聽czytelny i聽zwi臋z艂y spos贸b
  • Nie zapomnij ukaza膰 wszystkich stan贸w widoku, np. loading, ready, error
  • Dobrze, 偶eby komunikat by艂 wolny od 偶argonu technicznego i聽przyj膮艂 form臋 przyj臋cia winy na stron臋 aplikacji. Przyk艂ad: u偶ytkownik pr贸buje wrzuci膰 plik docx, gdy akceptujemy tylko pdf?聽-聽鈥Sorry, we don鈥檛 understand this file format yet. Can you try once again with .pdf?
  • Keywordy do wg艂臋bienia si臋 w temat to: ux visibility of聽system status, ux error messages

3. Dost臋pno艣膰 (a11y)

  • Je艣li sprawisz, 偶e Twoja aplikacja b臋dzie mia艂a dobr膮 dost臋pno艣膰 (ang.聽accessibility) zadbasz nie tylko o osoby z聽niepe艂nosprawno艣ciami - zyskasz na wielu polach
  • Rzecz numer jeden: semantyczny HTML - to mega wa偶ne
  • Mo偶esz okre艣la膰 rol臋 elementu HTML, za pomoc膮 ARIA
  • Checklista do sprawdzenia: A11y Checklist
  • Wi臋cej info m.in. tutaj, keyword to: a11y

4. Jasny cel i prostota

  • Niech interfejs zawiera tylko to co musi, aby user m贸g艂 osi膮gn膮膰 sw贸j cel /聽wykona膰 zadanie
  • Im mniej przeszkadzajek, tym lepiej
  • Podpowiadaj gdzie si臋 da i uzupe艂niaj z automatu co si臋 da
  • U偶ywaj 艣wiadomie przycisk贸w Primary/Secondary
  • Tutaj te偶 mo偶e panowa膰 zasada KISS 馃槀
  • Wi臋cej info m.in. tu: 21 tip贸w, jak upro艣ci膰 UI aplikacji (i聽poprawi膰 UX)

5. Zmiany iteracyjne i testowanie

  • Nie b贸j si臋 prosi膰 o feedback
  • Przyjmuj krytyk臋
  • Ulepszaj interfejs iteracyjnie
  • Sprawdzaj wyniki iteracji
  • B膮d藕 blisko u偶ytkownika - rozmawiaj z nim
  • Sprawd藕 podej艣cie: Design Thinking
  • Keywordy do wg艂臋bienia si臋 w temat to: ux iteration, ux user testing, ux design process

#PrzemoPatterns: Slideshow

馃 Co to jest?

Slideshow/carousel slideshow, inaczej karuzela. To kr贸tko m贸wi膮c box s艂u偶膮cy do przewijania zdj臋膰 i聽tre艣ci. Slideshow s膮 szczeg贸lnie popularne w przer贸偶nych sklepach internetowych, czy te偶 na blogach.

Najwi臋ksz膮 korzy艣ci膮 p艂yn膮c膮 z u偶ywania karuzeli jest mo偶liwo艣膰 ukazania wielu informacji w jednym miejscu, czyli zaoszcz臋dzenie miejsca.

Pami臋tajmy jednak, 偶e 藕le zaprojektowany slideshow, mo偶e na pierwszy rzut oka wyda膰 si臋 zwyk艂ym obrazkiem, z kolei szybko przeskakuj膮ce grafiki - wkurzy膰 niemi艂osiernie odbiorc臋 naszej strony 馃槈 聽

To do艣膰 k艂opotliwy element UI - 藕le wdro偶ony przynosi du偶o wi臋cej z艂ego ni偶 dobrego, co te偶 dobrze obrazuje strona: shouldiuseacarousel.com - w聽prze艣miewczy spos贸b.

Jak zatem podej艣膰 do karuzeli, by ostatecznie userowi nie zakr臋ci艂o si臋 w聽g艂owie?

鈩癸笍 Wskaz贸wki

  • Nie odtwarzaj ich automatycznie: najcz臋stsza irytacja u偶ytkownik贸w wzgl臋dem slider贸w wynika z tego, 偶e obrazy przeskakuj膮 w szalonym tempie, bez jakiejkolwiek naszej interakcji.
  • Daj u偶ytkownikowi pe艂n膮 kontrol臋: umieszczaj膮c w boxie strza艂ki lub k贸艂eczka ukazuj膮ce ilo艣膰 slajd贸w, przekazujemy kontrol臋 nad interfejsem, do tego nie martwimy si臋 tym, 偶e sama funkcja karuzeli zostanie przegapiona.
  • Kr贸tki i zrozumia艂y tekst: je艣li ju偶 z jakich艣 sadystycznych powod贸w zdecydujesz si臋 na auto-odtwarzanie pami臋taj o tym, aby przekazywana wiadomo艣膰 by艂a kr贸tka i przejrzysta. Nie ma nic gorszego od zmiany slajdu w聽trakcie przebrni臋cia dopiero przez po艂ow臋 zdania.
  • Nie duplikuj tag贸w h1: je艣li u偶ywasz karuzeli u g贸ry strony, prawdopodobnie r贸偶ne slajdy maj膮 r贸wnie偶 swoje nag艂贸wki np. <h1>, co nie jest najlepszym rozwi膮zaniem. Problem polega na tym, 偶e wyszukiwarki traktuj膮 h1 jak tytu艂. Posiadanie pi臋ciu h1 na jednej stronie, to jak nadanie jej pi臋ciu tytu艂贸w, zatem staraj si臋 tego unika膰.
  • W aplikacji mobilnej dodaj przesuni臋cie (swipe): karuzela na聽urz膮dzeniach mobilnych powinna reagowa膰 na przewini臋cie palcem, b臋dzie to o wiele 艂atwiejsze i przyjemniejsze w u偶yciu, ni偶 stukanie w niewielk膮 strza艂k臋 lub kropk臋.
殴r贸d艂o: qeretail.com

Kogo warto obserwowa膰?

艢wietny newsletter z linkami na pograniczu Designu, UXa i聽Frontu. Codziennie (pn-pt) otrzymasz na swoj膮 skrzynk臋 email z聽5聽najlepszymi linkami z powy偶szych kategorii.

Zach臋camy do zapisu 馃憜

Mo偶liwo艣膰 zapisu i historia wysy艂ek na stronie: sidebar.io.

Topka 藕r贸de艂 do kt贸rych linkuj膮 m贸wi膮 same za siebie:


My艣lisz, 偶e trudno robi膰 grafik臋 3D? - no聽to聽zobacz

Resources | 藕r贸d艂o
Spline - Design tool for 3D web experiences

Zacznij pierwszy projekt na Spline i zobacz, jak w par臋 minut mo偶na zrobi膰 grafik臋聽3D. Intuicyjny edytor i tipy u艂atwiaj膮 nam start z tego typu rzeczami.

No i... nie musimy zaczyna膰 od zera. Mamy do dyspozycji ca艂kiem poka藕n膮 bibliotek臋 projekt贸w, od kt贸rych mo偶emy zacz膮膰:

Spline Library - Scenes

Interaktywna grafika ze strony g艂贸wnej Spline 艣wietnie pokazuje nam jaki efekt mo偶emy uzyska膰 馃敟 .

Z pewno艣ci膮 jest to ciekawe narz臋dzie.


To wszystko na dzi艣.
Dzi臋ki za wszystko i trzymaj si臋! 馃憢


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!

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.