馃帹 uxowy.dev #4
7 min czytania

馃帹 uxowy.dev #4

Hej!
Ju偶 pa藕dziernik 馃憖
A w niedziel臋 w naszych smartfonowych pogodynkach ma si臋 ukaza膰 21掳C 馃槏 Zaplanuj co艣 na weekend, je艣li jeszcze tego nie zrobi艂e艣/a艣!
Nie zapomnij te偶 zarezerwowa膰 troch臋 czasu na przejrzenie newslettera uxowy.dev 馃槈

Co dzisiaj?

  1. UX: 10 najbardziej wkurzaj膮cych user贸w rzeczy
    (i jak je naprawi膰)
  2. Zagadka 馃
  3. 5 tip贸w do wprowadzania Dark Mode
  4. Kogo warto obserwowa膰 馃憖
  5. Trend 3D w UI - zestaw darmowych ikon 3D do projektu - wyszukaj i pobierz

Scroll, scroll, scroll 馃憞


10 najbardziej wkurzaj膮cych user贸w rzeczy (i jak je naprawi膰)

UX | 藕r贸d艂o
殴r贸d艂o: UX Planet

Poni偶ej topka 10 najbardziej wkurzaj膮cych user贸w rzeczy na podstawie raportu Smashing Magazine. Do ka偶dej znajdziesz rozwi膮zanie 馃敟

1. Za ma艂y tekst

  • przyj臋to font-size: 16px jako minimum dla standardowego tekstu body
  • zadbaj o w艂a艣ciwy line-height, przewa偶nie oscylowanie wok贸艂 line-height: 1.5em b臋dzie ok - wi臋cej na ten temat
  • im wi臋kszy ekran, tym wi臋kszy tekst powinni艣my stosowa膰
  • sprawd藕 wielko艣膰 na urz膮dzeniu docelowym oraz testuj podgl膮d w przegl膮darce na powi臋kszeniu 100%

2. Za ma艂e klikalne elementy

  • minimalny rozmiar klikalnego elementu to mniej wi臋cej 9x9 mm
  • Material Design m贸wi o min. 48x48 px
  • dodaj margin pomi臋dzy klikalnymi elementami
  • je艣li chcesz wg艂臋bi膰 si臋 w temat, przeczytaj ten artyku艂

3. Nieoczekiwana zmiana po艂o偶enia element贸w

  • je艣li dynamicznie 艂adujesz jaki艣 element, ustal jego min-height, aby struktura UI aplikacji /www pozosta艂a bez wi臋kszych zmian
  • je艣li nie jeste艣 w stanie okre艣li膰 wysoko艣ci, wspom贸偶 si臋 animacj膮:
殴r贸d艂o

4. Utrata danych po b艂臋dzie

  • kieruj si臋 zasad膮 "dane podane przez u偶ytkownika s膮 艣wi臋te"
  • u偶yj localStorage lub sessionStorage, aby zapisywa膰 dane i m贸c p贸藕niej je odzyska膰, np. kiedy user przypadkowo od艣wie偶y stron臋 lub z niej wyjdzie
  • je艣li mo偶e doj艣膰 do utraty wa偶nych lub du偶ych ilo艣ci danych, przy akcji "wstecz" pytaj u偶ytkownika, "czy na pewno chcesz opu艣ci膰 t臋 stron臋", nie przesadzaj z ilo艣ci膮 takich blokad
  • przy istotnych akcjach, np. destruktywnych, zapytaj u偶ytkownika o potwierdzenie wykonywanej czynno艣ci

5. Brak akcji "wstecz"

  • czasami u偶ytkownik wejdzie gdzie艣 przez przypadek,
  • u偶ytkownik musi mie膰 艂atw膮 mo偶liwo艣膰 wycofania si臋 z jakiej艣 akcji - mie膰 np. przycisk "Cancel" lub "Back"
  • zachowaj funkcjonalno艣膰 przycisku "Wstecz" przegl膮darki (window.history)
  • je艣li po akcji usera, jaki艣 element znika z ekranu, daj mo偶liwo艣膰 klikni臋cia聽"Undo" w komunikacie zwrotnym 聽
  • punkty 4. i 5. z tej listy "dotykaj膮" 3. heurystyki Nielsena, warto zapozna膰 si臋 ze wszystkimi 10. heurystykami 馃憤

6. Przechwytywanie scrolla i modyfikowanie jego przeznaczenia

  • zostaw scroll w spokoju, nie modyfikuj jego zachowania, scroll ma scrollowa膰 tak, jak u偶ytkownik tego oczekuje
  • przechwytuj膮c scroll, interfejs zachowuje si臋 nieoczekiwanie z przyzwyczajeniami u偶ytkownika, nie zmieniaj tych przyzwyczaje艅
  • unikaj scrollowania horyzontalnego (poziomego)

7. Konieczno艣膰 logowania, aby zobaczy膰 content

  • daj pr贸bk臋 contentu, przed konieczno艣ci膮 logowania / rejestracji, np. daj 10 darmowych wej艣膰, poka偶 darmowe lekcje z kursu itd.
  • daj wej艣膰 w system i rzuci膰 okiem jak on wygl膮da, 艂atwo i bez zobowi膮za艅, np. udost臋pnij demo

8. Automatyczne odtwarzanie film贸w z d藕wi臋kiem

  • mo偶esz w艂膮czy膰 auto-play filmu, ale domy艣lnie bez d藕wi臋ku (mo偶e z napisami?)
  • daj 艂atw膮 mo偶liwo艣膰 w艂膮czenia d藕wi臋ku
  • niekt贸re przegl膮darki (Safari) automatycznie blokuj膮 d藕wi臋k, ale warto to obs艂u偶y膰 po stronie kodu

9. Pro艣by o w艂膮czenie powiadomie艅 w przegl膮darce

  • proszenie o pozwolenie na wysy艂k臋 powiadomie艅 na desktopie, od razu po wej艣ciu w aplikacj臋 /www, to najgorsze co mo偶esz zrobi膰
  • na desktopie powiadomienia nie s膮 tak przydatne, jak na mobile
  • je艣li ju偶 to robisz na desktopie, wska偶 plusy z w艂膮czenia tych powiadomie艅 i zr贸b to w przewidywalnym dla u偶ytkownika momencie, np. podczas w艂膮czania jakiego艣 powiadomienia w ustawieniach

10. Modal ze zgodami RODO od razu po za艂adowaniu

  • nie blokuj dost臋pu do portalu, blokuj ciasteczka
  • stosuj sticky-blok umieszczony na dole ekranu
  • daj mo偶liwo艣膰 konfiguracji na u偶ywanie tylko niezb臋dnych / wybranych ciasteczek
  • skonsultuj wszystko powy偶sze ze specem od RODO/prawa, 偶eby mie膰 spokojn膮 g艂ow臋

To wszystkie z 10 najbardziej wkurzaj膮cych u偶ytkownik贸w rzeczy.
Czy czytaj膮c kt贸ry艣 z nich, pomy艣la艂e艣/a艣 "aha! musz臋 to naprawi膰"?

Pewnie tak 馃槣
Teraz ju偶 wiesz te偶, jak to naprawi膰!


Chwila na zagadk臋 馃

Co tutaj jest nie tak?

Odpowied藕 znajdziesz na ko艅cu maila.


5 tip贸w wprowadzania Dark Mode

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

Dark Mode powsta艂 g艂贸wnie to po, aby mniej m臋czy膰 nasz wzrok. Sprawd藕 poni偶sze punkty, aby wprowadzaj膮c Dark Mode do swojej aplikacji, nie zrobi膰 wi臋kszej szkody ni偶 po偶ytku:

1. Klasyka gatunku - sprawdzaj kontrast

Zadbaj, aby kontrast mi臋dzy t艂em a tekstem by艂 min. 4.5:1. 殴r贸d艂o

Kontrast sprawdzi膰 mo偶emy z poziomu Inspektora element贸w Chrome:

Chrome, od jakiego艣 czasu, w swoim narz臋dziu Inspect Elements posiada dane o Accessability, m.in. o kontra艣cie.

Je艣li pracujesz na systemie macOS, bardzo polecamy prosty i przyjemny w obs艂udze Contrast.

2. Unikaj czystej czerni - #000000

#000000 t艂o z #ffffff tekstem daje najwi臋kszy kontrast jaki jest mo偶liwy - takie po艂膮czenie mocno m臋czy wzrok. U偶ywaj odcieni szaro艣ci. 殴r贸d艂o

3. Zdefiniuj kolory na nowo

W Dark Mode cz臋sto pastelowe kolory wygl膮daj膮 lepiej i maj膮 lepszy kontrast, ni偶 te bardziej nasycone kolorem. 殴r贸d艂o

4. Ustal wizualn膮 hierarchi臋 - elevation colors

Najlepszym sposobem na ustalenie wizualnej hierarchii w Dark Mode s膮 tzw. elevation colors - im co艣 jest "ja艣niejsze", tym jest bli偶ej nas. Wynika to m.in. z zasad Gestalt: zasada figura/t艂o. 殴r贸d艂o

5. Daj u偶ytkownikowi wyb贸r

U偶ytkownik mo偶e mie膰 jaki艣 konkretny pow贸d do korzystania lub nie z Dark Mode, daj mu mo偶liwo艣膰 zmiany trybu. 殴r贸d艂o

Kogo warto obserwowa膰?

YouTube - zdj臋cie w tle 

Wojtek Kuty艂a
Web: wojtekkutyla.pl
YouTube: Opowie艣ci ze 艣wiata UX
Twitter: @wojtekkutyla
LinkedIn: wojtekkutylaux

Wojtek Kuty艂a to jeden z najwi臋kszych autorytet贸w polskiego UXa. Regularnie wyst臋puje na konferencjach. Ch臋tnie dzieli si臋 wiedz膮 na r贸偶ne sposoby. Sprawd藕 w pierwszej kolejno艣ci wyst膮pienia Wojtka na konferencjach, koniecznie t臋 poni偶ej, o pogodzeniu 艣wiata UX i DEV:


Trend 3D w UI - zestaw darmowych ikon 3D do projektu - wyszukaj i pobierz

UI | 藕r贸d艂o
Zrzut ekranu free3dicon.com z darmowymi ikonami 3D. 殴r贸d艂o

Jednym z aktualnych trend贸w w UI jest tworzenie interfejs贸w "3D".
Kilka przyk艂ad贸w:

Note.io 鈥 Hero Header
Note.io 鈥 Hero Header designed by Tran Mau Tri Tam 鉁 for UI8. Connect with them on Dribbble; the global community for designers and creative professionals.
Knowledge is power #2
Knowledge is power #2 designed by Patryk Gajdarski for 10Clouds. Connect with them on Dribbble; the global community for designers and creative professionals.
Website Landing Page Design
Website Landing Page Design designed by Vivivian for Vitality Studio. Connect with them on Dribbble; the global community for designers and creative professionals.
Hello Home: landing page design
Hello Home: landing page design designed by Vivivian for Vitality Studio. Connect with them on Dribbble; the global community for designers and creative professionals.
Aimm.
Aimm. designed by Tran Mau Tri Tam 鉁 for UI8. Connect with them on Dribbble; the global community for designers and creative professionals.

Wejd藕 na free3dicon.com i wrzu膰 pasuj膮ce ikony do swojego projektu w Figmie 馃檪

free3Dicon.com

Zagadka - odpowied藕 馃憞

Co tutaj jest nie tak?

Z艂y UX
Dobry UX. 殴r贸d艂o

To wszystko na dzi艣. Szykuj si臋 na weekend 馃挜
Wszystkiego dobrego 馃檪

PS. Je艣li mo偶emy Ci jako艣 pom贸c, po prostu odpisz na tego maila 鉁夛笍

殴r贸d艂o

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.