🎨 uxowy.dev #64: 7 wskazówek na dobry UX nawigacji, redesign platformy Steam

Mikołaj Waśkowski -

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

UX | źródło

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

UX | źródło

Ś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: