Menu na stronie internetowej: nawigacja bez chaosu

Menu na stronie internetowej ma prowadzić użytkownika do informacji i działań, których rzeczywiście szuka. Nie jest spisem wszystkich URL-i ani miejscem na język działów firmy. Dobre menu wynika z architektury treści, używa zrozumiałych etykiet, działa klawiaturą i na telefonie oraz zachowuje przewidywalność na każdej podstronie.

Nazwij pozycje według celu użytkownika

Pierwszym krokiem jest spisanie pytań i zadań, z którymi ludzie przychodzą na stronę. Klient sklepu szuka kategorii, dostawy, zwrotów i kontaktu. Odbiorca firmy usługowej chce poznać zakres, realizacje, cenę lub sposób wyceny. Użytkownik portalu przechodzi do tematów, autorów i najnowszych materiałów. Menu powinno odzwierciedlać te drogi, a nie wewnętrzny schemat organizacyjny.

Etykieta ma być zrozumiała bez kontekstu. „Rozwiązania” może oznaczać produkty, usługi, branże albo bazę wiedzy. Jeśli w danym serwisie chodzi o usługi, nazwij pozycję „Usługi”. Jeżeli chodzi o urządzenia, lepsze będzie „Produkty”. Oryginalne nazwy sprawdzają się tylko wtedy, gdy odbiorcy już ich używają i rozpoznają znaczenie.

Unikaj dwóch pozycji prowadzących do prawie tego samego celu, na przykład „Oferta” i „Usługi”, jeśli użytkownik nie potrafi przewidzieć różnicy. Jeżeli rozdział jest potrzebny, etykiety muszą wyjaśnić kryterium: „Dla firm” i „Dla domu” albo „Produkty” i „Serwis”. Każda grupa powinna odpowiadać na inną intencję.

Nie ma jednej właściwej liczby pozycji. Pięć krótkich elementów może być trudniejszych niż siedem dobrze nazwanych. Ograniczeniem są czytelność, szerokość i zdolność użytkownika do odróżnienia wyborów. Najpierw upraszczaj strukturę, a dopiero potem skracaj słowa lub chowaj część nawigacji.

Jeśli menu dopiero powstaje, zacznij od mapy opisanej w poradniku o strukturze strony internetowej. Nawigacja jest widokiem tej architektury, ale nie musi pokazywać każdego jej poziomu jednocześnie.

Pokaż tyle hierarchii, ile pomaga w podjęciu decyzji

Pierwszy poziom menu powinien obejmować główne obszary serwisu. Drugi pomaga wybrać podkategorię, usługę albo grupę odbiorców. Trzeci poziom w menu globalnym często staje się trudny w obsłudze, szczególnie na dotyku. Głębsze rozgałęzienia lepiej pokazywać na stronach kategorii, w breadcrumbs i w kontekstowych modułach treści.

Grupowanie musi opierać się na jednym kryterium w obrębie danej części. Jeśli w menu produktów obok „Pompy”, „Przemysł spożywczy” i „Promocje” znajdują się typ produktu, branża i status handlowy, użytkownik nie wie, czego się spodziewać. Można pokazać te wejścia w oddzielnych kolumnach mega menu, ale trzeba je wyraźnie podpisać.

Rozbudowana oferta telekomunikacyjna dobrze pokazuje problem wielu równoległych dróg: klient może wybierać internet, telewizję, telefonię, wariant dla domu lub firmy, a także sprawdzać dostępność pod adresem. Przykładową warstwą oferty jest strona poświęcona internetowi w serwisie sprzedażowym usług telekomunikacyjnych. Nawigacja takiego serwisu musi jasno rozdzielić produkt, odbiorcę i czynność zamówienia.

• Każda pozycja pierwszego poziomu ma odrębny zakres.
• Podmenu grupuje elementy według jednego kryterium i ma nagłówek grupy.
• Strona nadrzędna jest dostępna, jeśli zawiera użyteczne podsumowanie kategorii.
• Aktywna pozycja wskazuje bieżący dział bez polegania wyłącznie na kolorze.
• Głębokie podstrony mają breadcrumbs i linki do stron równorzędnych.
• Zmiana nazwy w menu nie zmienia automatycznie stabilnego URL-a.

Użytkownik wchodzący z Google na głęboką kartę nie przeszedł ścieżki od strony głównej. Potrzebuje informacji o bieżącym dziale i możliwości przejścia poziom wyżej. Menu globalne, breadcrumbs i zawartość strony kategorii powinny się uzupełniać. Nie próbuj zmieścić całego drzewa w jednej rozwijanej konstrukcji.

Linkowanie w treści może prowadzić do konkretnych następnych kroków, których nie trzeba dodawać globalnie. Dzięki temu menu pozostaje stabilne, a materiały redakcyjne budują krótsze drogi między powiązanymi tematami. Zasady doboru takich odnośników opisuje poradnik o linkowaniu wewnętrznym.

Wybierz format menu do liczby decyzji, a nie do mody

Proste menu poziome sprawdza się, gdy serwis ma kilka głównych działów. Klasyczne podmenu rozwijane pomaga pokazać jeden dodatkowy poziom. Mega menu ma sens w szerokim katalogu, gdy elementy można pogrupować w kolumny z jasnymi nagłówkami. Hamburger na desktopie oszczędza miejsce, ale ukrywa zakres strony i nie powinien być domyślnym wyborem bez powodu.

Mega menu nie może być ścianą kilkudziesięciu linków. Najpierw pokaż najważniejsze grupy, ewentualnie wyróżnij jedną ścieżkę pomocniczą, a pełną listę przenieś na stronę kategorii. Obraz ma sens tylko wtedy, gdy pomaga rozpoznać produkt lub dział. Dekoracyjny baner zmniejsza przestrzeń na nawigację i bywa pomijany jak reklama.

Logo zwykle prowadzi do strony głównej, ale nadal powinno mieć dostępną nazwę. Wyszukiwarka, konto i koszyk są funkcjami, nie kategoriami treści. Umieść je w przewidywalnym miejscu i podpisz, jeżeli sama ikona może być niejasna. Na stronie sklepu koszyk powinien pokazywać stan, ale nie rozpychać nawigacji długim tekstem.

Stałe menu przy przewijaniu może przyspieszyć dostęp, lecz nie może zakrywać nagłówków, komunikatów ani fokusowanych elementów. Zmniejszanie wysokości po scrollu powinno być łagodne i nie powodować przeskoku. Jeżeli pasek zajmuje znaczną część ekranu telefonu, ważniejsze jest uproszczenie niż dalsze zmniejszanie czcionki.

Przed wdrożeniem wykonaj prosty prototyp z prawdziwymi etykietami i danymi. Puste prostokąty nie pokażą, że trzy nazwy działów nie mieszczą się w jednej linii. Nawigację trzeba oceniać razem z logo, wyszukiwarką, językami, kontem i działaniem głównym.

Mobile potrzebuje własnej kolejności i jasnego stanu

Menu mobilne nie jest zmniejszoną wersją desktopu. Użytkownik korzysta z dotyku, ma mniej miejsca i często chce szybko zadzwonić, znaleźć adres, produkt albo status zamówienia. Najważniejsze działania mogą pozostać poza panelem menu, jeśli są kluczowe dla serwisu. Nie chowaj telefonu alarmowego czy koszyka pod trzema poziomami.

Przycisk otwierający powinien mieć widoczną etykietę lub poprawną nazwę dostępną, a jego stan musi zmieniać się z zamkniętego na otwarty. Po otwarciu fokus powinien trafić do panelu w przewidywalny sposób. Zamknięcie przyciskiem, klawiszem Escape lub wyborem linku nie może pozostawiać użytkownika w niewidocznym miejscu.

Poziomy rozwijaj na wyraźne polecenie, nie przy przypadkowym dotknięciu. Osobny przycisk może otwierać podmenu, a etykieta kategorii prowadzić do strony nadrzędnej. Jeśli cały wiersz jednocześnie nawiguje i rozwija, użytkownik nie wie, jaki będzie efekt. Komunikuj strzałką i atrybutem stan sekcji.

• Panel nie wystaje poza ekran i nie powoduje poziomego przewijania.
• Duże powiększenie tekstu nie ucina etykiet ani przycisku zamknięcia.
• Aktywne podmenu można zwinąć bez cofania całej strony.
• Dotyk poza panelem nie jest jedynym sposobem zamknięcia.
• Po zmianie orientacji stan nie blokuje przewijania dokumentu.
• Najważniejszy kontakt, koszyk lub wyszukiwanie pozostają osiągalne.

Długie listy na mobile lepiej dzielić na ekrany lub akordeony o jednoznacznych nagłówkach. Nie otwieraj kilku poziomów naraz, jeśli spycha to użytkownika daleko poniżej miejsca wyboru. Zachowaj informację, gdzie jest, ale umożliw szybki powrót do początku panelu.

Testuj na rzeczywistym urządzeniu, z klawiaturą ekranową, powiększeniem i wolniejszym połączeniem. Symulator szerokości nie pokaże wszystkich problemów z dotykiem, paskiem przeglądarki i zmianą wysokości widoku.

Menu ma działać bez myszy i komunikować aktualny stan

Nawigacja powinna być osadzona w elemencie nav z nazwą odróżniającą ją od innych nawigacji. Linki pozostają linkami, a przyciski służą do otwierania i zamykania. Nie zastępuj ich elementami div z obsługą kliknięcia. Semantyka daje przeglądarce i technologiom wspomagającym przewidywalne zachowanie.

Kolejność tabulatora powinna odpowiadać kolejności wizualnej. Widoczny fokus nie może znikać pod stałym paskiem. Przyciski rozwijające potrzebują informacji o stanie, a podmenu nieaktywne nie powinno przyjmować fokusu. Użytkownik musi mieć możliwość przejścia całej nawigacji i powrotu do treści bez pułapki.

Kolor aktywnego działu powinien być wsparty kształtem, podkreśleniem albo atrybutem wskazującym bieżącą stronę. Ikona bez tekstu potrzebuje nazwy. Obszar dotykowy musi być wystarczający również wtedy, gdy sam znak jest mały. Nie umieszczaj dwóch różnych działań tak blisko, że łatwo wybrać niewłaściwe.

Mechanizmy dostępności nie powinny powstawać po wdrożeniu jako warstwa wyjątków. Wybierz sprawdzony wzorzec komponentu, zdefiniuj stany i przetestuj go przed rozbudową treści. Szerszą kontrolę opisuje poradnik o dostępności strony według WCAG.

Jeżeli menu zawiera zmianę języka, nazwy języków powinny być zrozumiałe w swoim zapisie. Przełącznik prowadzi do odpowiednika bieżącej strony, gdy istnieje, i jasno informuje o braku tłumaczenia. Flaga nie jest wystarczającym oznaczeniem języka.

Sprawdzaj zadania, dane wyszukiwania i każdą zmianę struktury

Najprostszy test polega na podaniu użytkownikowi zadania bez wskazywania właściwej etykiety: znajdź warunki zwrotu, wybierz usługę dla firmy, sprawdź produkt o konkretnym zastosowaniu. Obserwuj pierwszy wybór, zawahania, cofnięcia i moment, w którym osoba przestaje rozumieć hierarchię. Nie pytaj tylko, czy menu się podoba.

Dane analityczne pomagają zobaczyć użycie, ale wymagają kontekstu. Rzadko klikana pozycja może być zbędna albo niezwykle ważna dla małej grupy. Częste otwarcie menu na mobile nie dowodzi jego wygody. Połącz kliknięcia z wyszukiwaniem wewnętrznym, ścieżkami, porzuconymi zadaniami i rozmowami obsługi.

Przy zmianie struktury przygotuj mapę starych i nowych adresów. Zmiana etykiety nie zawsze wymaga zmiany URL-a. Jeżeli łączysz kategorie, zaktualizuj menu, breadcrumbs, linki w treści, sitemapę i canonical. Nie przekierowuj całej usuwanej gałęzi na stronę główną. Pomaga w tym procedura sprawdzania przekierowań.

Ustal właściciela menu. Dodanie nowej usługi lub kategorii nie powinno automatycznie oznaczać kolejnej pozycji pierwszego poziomu. Redakcja może utworzyć stronę w istniejącej grupie, a zespół UX okresowo ocenia, czy hierarchia nadal odpowiada ofercie. Menu globalne potrzebuje większej stabilności niż bieżąca kampania.

Przed publikacją sprawdź desktop, telefon, duże powiększenie, klawiaturę, dotyk, zmianę orientacji i wolne ładowanie. Otwórz każdą gałąź, przejdź do strony nadrzędnej, wróć i potwierdź aktywny stan. Kontrola wizualna musi objąć prawdziwe etykiety oraz najdłuższy wariant językowy.