🧭 Interakcja i UX

Nawigacja i architektura

Architektura informacji, wzorce nawigacyjne i CTA. Jak użytkownik porusza się po produkcie.

Wszystkie zasady

01

Architektura informacji Information Architecture

Architektura informacji to sposób organizacji i etykietowania treści w produkcie. Dobra IA sprawia, że użytkownik znajduje to, czego szuka, w miejscu, w którym się tego spodziewa. Zła IA to menu z niejasnymi nazwami, gdzie 'Zasoby' może oznaczać wszystko.

Tip: Przeprowadź card sorting z 5-8 użytkownikami: wypisz wszystkie sekcje swojego produktu na karteczkach i poproś o pogrupowanie ich. Jeśli grupy różnych osób się pokrywają, masz dobrą IA. Jeśli nie, zmień strukturę.
02

Jasne i jednoznaczne CTA Clear and Unambiguous CTA

Na każdej stronie powinien być jeden główny CTA (Call to Action), wyraźnie odróżniający się od reszty elementów. Użytkownik powinien wiedzieć, co jest najważniejszą akcją na tej stronie, w ciągu 3 sekund. Dwa równorzędne CTA tworzą konflikt i obniżają konwersję.

Tip: Jeden CTA na stronę, jeden styl. Primary CTA (wypełniony kolorem), secondary (obramowanie), tertiary (link). Nigdy nie umieszczaj dwóch primary CTA obok siebie. Jeśli musisz, jeden z nich nie jest naprawdę primary.
03

Grupowanie tematyczne Thematic Grouping

Powiązane elementy powinny być zgrupowane razem, a niepowiązane odseparowane. W menu ustawień osobiste dane powinny być w jednej grupie, powiadomienia w drugiej, a bezpieczeństwo w trzeciej. Losowa kolejność opcji zmusza użytkownika do przeszukiwania wszystkiego.

Tip: Podziel każde menu i każdą stronę ustawień na logiczne grupy z nagłówkami. Nazwij grupy z perspektywy użytkownika ('Twoje dane', 'Powiadomienia'), nie z perspektywy systemu ('User Settings', 'Config').
04

Krótkie ścieżki do celu Short Paths to Goal

Użytkownik powinien dotrzeć do dowolnej treści w 3 kliknięciach od strony głównej (zasada trzech kliknięć). Głębokie struktury nawigacyjne (5+ poziomów) powodują zgubienie się i porzucenie zadania. Skróty, wyszukiwarka i ostatnio odwiedzone pomagają skracać ścieżki.

Tip: Zmierz najdłuższą ścieżkę do celu w swoim produkcie. Jeśli wymaga więcej niż 3 kliknięcia, dodaj skrót: quick link na stronie głównej, przycisk w nawigacji lub wyszukiwarkę z autosuggestem.
05

Wzorce nawigacyjne Navigation Patterns

Nawigacja powinna używać standardowych wzorców: top bar na desktopie, bottom tab bar na mobile, hamburger menu dla rozbudowanych sekcji, breadcrumbs dla głębokiej hierarchii. Niestandardowa nawigacja wymaga nauki i zwiększa obciążenie poznawcze.

Tip: Wybierz wzorzec nawigacji odpowiedni do głębokości Twojej struktury. Płaska (5-7 sekcji): top bar + tab bar. Głęboka (3+ poziomów): hamburger + breadcrumbs. Hybrydowa: top bar + sidebar. Nie mieszaj wzorców bez powodu.
06

Hierarchiczne menu Hierarchical Menu

Menu powinno odzwierciedlać logiczną hierarchię treści: główne kategorie na pierwszym poziomie, podkategorie na drugim. Każdy poziom powinien być przewidywalny. Użytkownik powinien wiedzieć, gdzie szukać 'ustawień powiadomień' bez sprawdzania każdej zakładki.

Tip: Ogranicz menu do dwóch poziomów zagnieżdżenia. Trzy lub więcej poziomów to prawie zawsze znak, że architektura informacji wymaga reorganizacji, a nie głębszego menu.
07

Przewidywalny przycisk wstecz Predictable Back Button

Przycisk 'wstecz' powinien zawsze prowadzić do poprzedniego ekranu w logicznej hierarchii, nie do losowego miejsca. W SPA (Single Page Application) historia przeglądarki musi być poprawnie zarządzana, żeby systemowy przycisk 'wstecz' działał jak użytkownik oczekuje.

Tip: Testuj przycisk 'wstecz' przeglądarki na każdej stronie Twojego produktu. Jeśli gdziekolwiek prowadzi do nieoczekiwanego miejsca (np. poza aplikację), napraw routing. W SPA używaj history.pushState() przy każdej zmianie widoku.

Powiązane kategorie

Chcesz wiedzieć więcej?

Przeprowadź review nawigacji w swoim projekcie

Sprawdź Design Review Checklist →