馃帹 uxowy.dev #64: 7 wskaz贸wek na dobry UX nawigacji, redesign platformy Steam
4 min czytania

馃帹 uxowy.dev #64: 7 wskaz贸wek na dobry UX nawigacji, redesign platformy Steam

Na wst臋pie chcia艂bym Ci臋 przeprosi膰 za tak d艂ug膮 cisz臋 i brak pi膮tkowych wysy艂ek. Mam nadziej臋, 偶e Ci tego brakowa艂o. Chocia偶 troszk臋 馃槢 I 偶e teraz zn贸w ucieszysz si臋 z ma艂ej dawki UI/UX dla developera w Twojej skrzynce. Na ko艅cu maila powiem Ci czym by艂a spowodowana ta cisza. Ale teraz - do rzeczy.

Dzisiaj w mailu:

  • 7 wskaz贸wek na dobry UX nawigacji
  • YT: Redesign aplikacji Steam

Zapraszam do obczajki! 馃珫 馃憞


7 wskaz贸wek na dobry UX nawigacji

Poni偶ej znajdziesz 7 wskaz贸wek, kt贸re pomog膮 Ci zrobi膰 dobry UX nawigacji, kt贸re znalaz艂em ostatnio na blogu uxtools.co.

1. Po艂o偶enie

  • Umie艣膰 menu, tam gdzie najcze艣ciej u偶ytkownik go szuka: na g贸rze, po lewej, ew. dodatkowe w stopce,
  • b膮d藕 jak najbardziej przewidywalny, ogranicz swoj膮 kreatywno艣膰 do minimum,
  • polegaj na utartych ju偶 szlakach i wzorcach z innych stron/aplikacji (Jakob's Law).
殴r贸d艂o

2. Poka偶 gdzie jestem

U偶ytkownik musi wiedzie膰, gdzie aktualnie si臋 znajduje (i jak mo偶e zrobi膰 krok wstecz).

Wspomagacze:

  • odpowiedni tytu艂 strony: <title>
  • zrozumia艂y dla cz艂owieka URL strony
  • oznaczenie aktywnej strony w menu
  • breadcrumbs
  • tytu艂 umieszczony na g贸rze strony

3. Mega menu jest lepsze od ...mega dropdownu

  • Je艣li masz du偶o podstron w danej kategorii menu lepiej u偶y膰 mega menu.
  • mamy wtedy mo偶liwo艣膰 uporz膮dkowania tre艣ci, pogrupowania link贸w itd.
殴r贸d艂o

4. W艂a艣ciwe nazewnictwo

  • U偶ytkownik powinien by膰 w stanie przewidzie膰, gdzie dany link go przeniesie,
  • staraj si臋 nazywa膰 linki kr贸tko,
  • jak najprostszym j臋zykiem.
殴r贸d艂o

5. Ilo艣膰 pozycji w menu

  • Nie jest to jaka艣 regu艂a, ale staraj si臋 ograniczy膰 menu g艂贸wne do max. 6-7 element贸w,
  • reszt臋 ukryj pod jakim艣 pod-menu, np. wcze艣niej wspomnianym mega menu,
  • elementy na pocz膮tku i na ko艅cu listy najbardziej rzucaj膮 si臋 w oczy - umie艣膰 tam te najwa偶niejsze.

6. Nie ukrywaj menu

  • Je艣li nie musisz, to nie ukrywaj element贸w menu pod hamburgerem czy innym rozwijaczem,
  • linki w menu to najcz臋艣ciej klikane elementy UI, g艂upio nie zaoszcz臋dzi膰 klikania u偶ytkownikowi w tym miejscu
殴r贸d艂o

7. Odpowiedni design

  • upewnij si臋, 偶e elementy menu s膮 odpowiednio du偶e - s膮 艂atwo klikalne (Material Design m贸wi o min. 48x48px)
  • linki w menu powinny r贸偶ni膰 si臋 wizualnie od normalnego tekstu, powinny wygl膮da膰 interaktywnie (podkre艣lenie, inny kolor, pointer?)
  • w my艣l zasady "nie przesadzaj z kreatywno艣ci膮", nie zarzucaj tutaj nie wiadomo jak fancy animacji i efekt贸w, keep it simple
  • postaraj si臋 jako艣 odci膮膰 menu od reszty strony, np. innym t艂em, borderem albo odpowiednio du偶ym odst臋pem (white space).

馃毃
Je艣li podoba Ci si臋 ten mail, wrzu膰 info o nim na social media lub na firmowego Slacka! Mo偶e jest tam kto艣, komu te偶 przyda si臋 troch臋 wiedzy o UI/UX dla developera.

Gotowiec do skopiowania 馃憞

Na moj膮 skrzynk臋 wpad艂 w艂a艣nie 馃帹 uxowy.dev #64, a w nim 7 wskaz贸wek na dobry UX nawigacji i filmik z redesignem platformy Steam. Obczaj: https://uxowy.dev/email/64.

Daj zna膰, gdzie wrzuci艂e艣(a艣).
Mo偶e b臋d臋 w stanie si臋 jako艣 odwdzi臋czy膰 馃槈


YT: redesign platformy Steam

艢wietny film od wcze艣niej wspominianej Juxtopposed. Tym razem m贸wi o tym, w jaki spos贸b zrobi艂a redesign platformy Steam.

W filmie:

  • ca艂y proces, od analizy produktu do efektu ko艅cowego redesignu,
  • wyzwania,
  • co jest ok i co zosta艂o,
  • a co lepiej poprawi膰,
  • dlaczego,
  • jak.

Zapraszam do ogl膮dania:
I Redesigned the ENTIRE Steam UI from Scratch


To wszystko na dzi艣!

A wi臋c... sk膮d ta cisza?
Jak zwykle, powod贸w jest wiele.

  1. G艂贸wnie to dorastaj膮ce i co raz bardziej wymagaj膮ce babole (tak nazywam moich ch艂opak贸w... ju偶 prawie cztero-letniego Leona i prawie dwu-letniego Henia). Ch艂opaki zostawiaj膮 mi jakie艣 2 godziny dziennie do dyspozycji 馃槀. To taki czas dla siebie 馃槀. A偶 nie wiadomo co zrobi膰 z tymi dwiema godzinami.
  2. Ostatnio do艂膮czy艂em te偶 do 艣wietnej inicjatywy Ognisty Start od Mirka Burnejko. Celem jest zarobienie pierwszych 3 000 z艂 we w艂asnej firmie. Ale nie na kontrakcie, jako programista na B2B. Tylko tak z w艂asnego produktu lub z konsultacji. Najlepiej z czego艣, co si臋 skaluje. To te偶 po偶era troch臋 czasu 馃し鈥嶁檪锔.
  3. I zdarzy艂o mi si臋 udzieli膰 UI/UX-owej pomocy w formie konsultacji z propozycj膮 zmian w aplikacji SaaS i jej LP. Zmiany wchodz膮 w 偶ycie, wi臋c chyba by艂y przydatne 馃檶 Pracujemy dalej... 馃敟
  4. Reszta to Netflix i brak motywacji 馃檪

No i to by by艂o na tyle. Musia艂em si臋 wyt艂umaczy膰 馃槢
Mam nadziej臋, 偶e u Ciebie wszystko ok?

Pozdrawiam i dobrego weekendu!

Miko艂aj Wa艣kowski
uxowy.dev


Obczaj poprzednie wydania:

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.