馃帹 uxowy.dev #25
8 min czytania

馃帹 uxowy.dev #25

Sp贸藕niony, ale jestem! Witaj w 25. wydaniu newslettera 馃帹 uxowy.dev. Bez zb臋dnych wst臋p贸w, przechodzimy do konkret贸w:

Co dzisiaj?

  1. #PrzemoPatterns: Breadcrumbs
  2. 21 tip贸w, jak upro艣ci膰 UI aplikacji (i poprawi膰 UX)
  3. Kogo warto obserwowa膰 馃憖
  4. Co zrobi膰, aby szybko poprawi膰 swoje skille w UI?

Start!


#PrzemoPatterns: Breadcrumbs

Breadcrumbs, czyli tak zwana 鈥渘awigacja okruszkowa鈥 (zawsze bawi mnie to polskie t艂umaczenie 馃槈 ) - to 艣cie偶ka strony internetowej, umo偶liwiaj膮ca u偶ytkownikowi 艂atwiejsz膮 orientacj臋, w kt贸rym miejscu si臋 aktualnie znajduje, a聽tak偶e szybki powr贸t do poprzednio przegl膮danych podstron.

Co jaki艣 czas na r贸偶nych UXowych forach podnoszone jest pytanie:

"Czy breadcrumbsy s膮 wci膮偶 u偶yteczne w 2022 roku?"

Odpowied藕 jest prosta: jeszcze jak!

Sprawd藕cie dlaczego i w jaki spos贸b z nich korzysta膰:

馃 Dlaczego?

1. Guru u偶yteczno艣ci, Jakob Nielsen jest wielkim zwolennikiem breadcrumbs贸w

鈥濶awigacja okruszkowa鈥 nigdy nie powoduje problem贸w podczas testowania przez u偶ytkownik贸w: ludzie mog膮 przeoczy膰 ten ma艂y element projektu, ale nigdy nie zinterpretuj膮 b艂臋dnie funkcji jak膮 pe艂ni鈥 鈥 pisze Nielsen.

Ca艂kiem niedawno Fortune opublikowa艂 list臋 10. najwi臋kszych ameryka艅skich przedsi臋biorstw pod k膮tem przychod贸w (m.in. Apple, GM, czy CVS Health). Przyjrza艂em si臋 ich stronom i a偶 6 na 10 korzysta z聽breadcrumbs贸w!

2. Breadcrumbsy poprawiaj膮 SEO

Co prawda najwi臋ksze wyszukiwarki na rynku maj膮 w zwyczaju do艣膰 cz臋sto zmienia膰 swoje zasady, niemniej jednak Google wci膮偶 oficjalnie rekomenduje korzystanie z breadcrumbs贸w jako jednego z kilku sposob贸w 鈥瀠lepszenia atrybut贸w witryny鈥.

鉁 Kiedy u偶ywa膰?

  • U偶ywaj breadcrumbs贸w podczas projektowania stron internetowych o聽zagnie偶d偶eniu trzech lub wi臋cej poziom贸w
  • Umie艣膰 鈥渘awigacj臋 okruszkow膮鈥 bezpo艣rednio nad lub obok tytu艂u strony (wg. bada艅 to najbardziej skuteczne miejsce)
  • Korzystaj ze strza艂ek (chevron) 鈥 nie uko艣nik贸w, ani pionowych linii 鈥 aby wskaza膰 ruch mi臋dzy stronami lub wskaza膰 powr贸t do poprzedniej
  • Zaznacz bie偶膮c膮 stron臋, ale nie linkuj jej
  • Nawet w przypadku korzystania z breadcrumbs贸w nadal nale偶y u偶ywa膰 konwencjonalnego menu nawigacyjnego

Jak si臋 okazuje, w nowoczesnej erze projektowania UX, breadcrumbsy nadal oferuj膮 warto艣膰, w tym potencja艂 poprawy do艣wiadczenia u偶ytkownika.

殴r贸d艂o: justinmind.com

21 tip贸w, jak upro艣ci膰 UI aplikacji (i聽poprawi膰聽UX)

UX, UI | 藕r贸d艂o

Nasz cel jest taki: postarajmy si臋 usun膮膰 wszelkie przeszkody, jakie napotyka u偶ytkownik podczas realizacji swojego zadania/obranego celu.

Warto wspomnie膰: John Maeda, w ksi膮偶ce The Laws of Simplicity, podsuwa nam 10 praw na osi膮gni臋cie z艂otego 艣rodka - pomi臋dzy prostot膮 a聽skomplikowaniem. W聽biznesie, technologii i聽...designie:

The Laws of Simplicity, John Maeda, 殴r贸d艂o

A teraz, czas na list臋 tip贸w, kt贸re uproszcz膮 UI i poprawi膮 UX Twojej aplikacji:

1. Skup si臋 na core-value

Czy to prawda, 偶e "do wszystkiego, to do niczego"? 殴r贸d艂o

2. Usu艅 wszystko, co zb臋dne i odci膮ga od celu

Naj艂atwiejszym sposobem wydaje si臋 by膰 po prostu usuni臋cie element贸w. Uwa偶aj jednak co usuwasz. B膮d藕 ostro偶ny i badaj kolejne wersje UI. 殴r贸d艂o
鈥淪implicity is not the absence of clutter, that鈥檚 a consequence of simplicity. Simplicity is somehow essentially describing the purpose and place of an object and product. The absence of clutter is just a clutter-free product. That鈥檚 not simple.鈥 鈥斅燡onathan聽Ive

3. Poka偶 dane w 艂atwym do ogarni臋cia formacie

Pomy艣l, na czym zale偶y u偶ytkownikowi i dostarcz mu to w jak najlepszej formie. 殴r贸d艂o

4. Ogranicz czas i wysi艂ek potrebny do podj臋cia decyzji

Im wi臋cej opcji, tym wi臋kszy wysi艂ek naszego m贸zgu i tym wi臋cej czasu potrzebujemy na podj臋cie decyzji. Wi臋cej o prawie Hick'sa. 殴r贸d艂o

5. Zbyt du偶o wybor贸w przera偶a

S艂ynny "The Jam Experiment" - du偶y wyb贸r smak贸w d偶emik贸w spowodowa艂 spadek w sprzeda偶y. Im mniej opcji, tym 艂atwiej nam podj膮膰 jak膮艣 akcj臋 zwi膮zan膮 z tym wyborem. 殴r贸d艂o
Poka偶 mniej opcji na raz. 殴r贸d艂o

6. Rekomenduj, poka偶 preferowane opcje

Ma by膰 艂atwo. Wyra藕nie poka偶 r贸偶nice i u艂atw wyb贸r podpowiadaj膮c np. "najcz臋艣ciej wybierany". 殴r贸d艂o

7. Przykuwaj uwag臋 do w艂a艣ciwych element贸w

Na przyk艂adzie po prawej nie ma w膮tpliwo艣ci, co mamy nadusi膰 馃槢. Po lewej mamy kilka "primary actions". 殴r贸d艂o

8. Tw贸rz wizualn膮 hierarchi臋

U偶yj odpowiednich kolor贸w i wielko艣ci element贸w, aby 艣wiadomie zbudowa膰 wizualn膮 hierarchi臋. 殴r贸d艂o

9. Organizuj content, pozw贸l skanowa膰

Spr贸buj policzy膰 kropki na przyk艂adzie po lewej i po prawej? Gdzie posz艂o Ci szybciej? No w艂a艣nie... 殴r贸d艂o

10. Grupuj content

Do poczytania: Gestalt psychology - Proximity, Similarity, Continuity, Closure, and Connectedness. 殴r贸d艂o

11. Podziel du偶e zadania na ma艂e cz臋艣ci

Ogranicz ilo艣膰 rzeczy do zrobienia/ogarni臋cia na raz do minimum. 殴r贸d艂o

12. Jasno poka偶, gdzie user jest i co w艂a艣nie robi

By艂o o tym ju偶 tyle razy, 偶e nie powinni艣my o tym pisa膰 馃槢 殴r贸d艂o

13. Oblicz, co mo偶esz

Ogranicz potrzeb臋 wyt臋偶ania m贸zgownicy i podaj wszystko jak na tacy. 殴r贸d艂o

14. Ukryj, co mo偶esz

Poka偶 szczeg贸艂owe opcje ficzera dopiero po w艂膮czeniu g艂贸wnego switcha. 殴r贸d艂o

15. Polegaj na patternach

U偶ytkownicy oczekuj膮, 偶e dany ficzer b臋dzie dzia艂a艂 podobnie lub tak samo jak wcze艣niej spotykany na innych stronach / aplikacjach. 殴r贸d艂o

16. Wprowad藕 w produkt, 艂agodnie

U偶ytkownik oczekuje pomocy dopiero jak zajdzie taka potrzeba (ang. on demand), a nie wielkiego samouczka jeszcze zanim zobaczy interfejs aplikacji. 殴r贸d艂o

17. We藕 pod uwag臋 to, jak produkt b臋dzie u偶ywany

Upewnij si臋, 偶e najcz臋艣ciej u偶ywane elementy s膮 du偶e i s膮 艂atwo dost臋pne dla u偶ytkownika. 殴r贸d艂o

18. Pozw贸l na inline-edit, podpowiadaj

Zredukuj ilo艣膰 krok贸w potrzebnych do wykonania akcji do minimum, albo usprawnij ich przej艣cie. 殴r贸d艂o

19. Wype艂nij, co si臋 da

Oblukaj termin "Smart defaults". 殴r贸d艂o

20. Zapobiegaj b艂臋dom

Zaimplementuj auto-check. Komunikuj o b艂臋dzie w spos贸b prosty i powiedz, jak naprawi膰 b艂膮d. Zadbaj o w艂a艣ciwy ton - nie obwiniaj usera: "Poda艂e艣 b艂臋dne has艂o", u偶yj pozytywnego j臋zyka: "Ups - has艂o si臋 nie zgadza". 殴r贸d艂o

21. Accessibillity (a11y)

Spraw, aby Twoja aplikacja by艂a dost臋pna dla wszystkich. Da to wiele korzy艣ci - nie tylko osobom z niepe艂nosprawno艣ciami, np. semantyczny HTML i prawid艂owe oznakowanie element贸w ma pozytywny wp艂yw na indeksowanie strony przez roboty (wyszukiwark臋 Google). 殴r贸d艂o

To wszystko.
Je艣li chcesz wiedzie膰 wi臋ej, tutaj link do pe艂nej tre艣ci artyku艂u:
https://uxmag.medium.com/how-to-simplify-your-design-80d2a4ebf057


Kogo warto obserwowa膰?

Smashing Magazine

To 藕r贸d艂o, kt贸re po prostu musisz zna膰 i subskrybowa膰. Istna skarbnica wiedzy dla Front-end developera i UXowca (lub po艂膮czenia tych dw贸ch roli 馃槈).

Je艣li nie znasz, polecamy wej艣膰 na smashingmagazine.com i po prostu pozwiedza膰. Uwaga! Nie wchod藕, je艣li nie masz min. 1 h na poczytanie - ilo艣膰 przydatnych rzeczy i interesuj膮cych materia艂贸w jest niebezpieczna dla up艂ywaj膮cego czasu 馃槀

Web: smashingmagazine.com
Medium: @uxmag
YouTube: Smashing Magazine


Co zrobi膰, aby szybko poprawi膰 swoje skille w UI?

殴r贸d艂o

Jako developerzy nie mamy nie wiadomo ile czasu, 偶eby stworzy膰 jaki艣 sensowny interfejs u偶ytkownika z聽dobrym UX.

Poni偶ej par臋 info, jak mo偶emy szybko zwi臋kszy膰 swoje skille w聽UI聽designie:

1. Inspiruj si臋

殴r贸d艂o

Oblukaj, jak kto艣 wcze艣niej zrobi艂 dany ekran / stron臋. Najlepsze 藕r贸d艂a do inspiracji:

2. Wyci膮gaj wnioski z inspiracji

Wiele rzeczy si臋 powtarza, formuj膮 si臋 jakie艣 regu艂y.
Po przegl膮daniu inspiracji mo偶esz wyci膮gn膮膰 wnioski na temat:

  • spacing贸w
  • kolor贸w
  • typografii
  • grid贸w / layoutu
  • pattern贸w

Wykorzystaj te regu艂y, aby zdefiniowa膰 sw贸j widok.

3. Poznaj podstawowe prawa i ograniczenia

Ka偶de 艣rodowisko ma jakie艣 predyspozycje, prawa i聽ograniczenia, np.: zalecenie u偶ywania ograniczonej ilo艣ci font贸w, kolor贸w z dobrym kontrastem itd.

Przestrzeganie ich pomo偶e Ci w unikni臋ciu podstawowych (/g艂upich) b艂臋d贸w.

4. Obczajaj trendy

Nie chcemy, 偶eby nasza aplikacja wygl膮da艂a jak z聽poprzedniej epoki, co nie? Musimy wiedzie膰, co jest trendi na rynku i upewni膰 si臋, 偶e jeste艣my "na czasie".

5. Dzia艂aj

Regularnie. Po prostu r贸b te interfejsy, a z czasem b臋dzie co raz lepiej. Mo偶esz wzi膮膰 udzia艂 w Daily UI Challenge, je艣li masz problem z systematyczno艣ci膮.

6. Pro艣 o feedback

Do艂膮cz do miejsc w sieci, gdzie jest du偶o do艣wiadczonych designer贸w i聽pro艣 o聽opini臋. Nie b贸j si臋 oceny. W ko艅cu ka偶dy, kto zobaczy Tw贸j interfejs i tak dokona os膮du - w swojej g艂owie 馃槈


To wszystko na dzi艣.

Trzymaj si臋! 馃憢
Kontynuujemy pro艣b臋 o wsparcie dla Ukrainy:
https://www.pah.org.pl/wplac


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.