Menu na stronie internetowej – przegląd popularnych rozwiązań

Nawigacja na stronach internetowych ewoluuje wraz z rozwojem technologii. Kilkanaście lat temu 99% stron internetowych składało się z kolumny bocznej z menu i kolumny głównej z treścią. W dzisiejszych czasach na szczęście jest dużo więcej efektownych rozwiązań menu na stronach internetowych. W tym artykule poznasz najciekawsze propozycje i moje rekomendacje bazujące na ponad 10-letnim doświadczeniu w tworzeniu stron.

Z tego artykułu dowiesz się:

• jakie są rodzaje menu na stronach internetowych
• przykłady menu poziomego na stronie www
• co to jest mega menu
• przykłady menu pionowego na stronie internetowej
• przykłady menu ukrytego na stronie www
• jakie menu stosować na komputerach, a jakie na urządzeniach mobilnych – moje rekomendacje

Rodzaje menu na stronach internetowych

W trakcie tworzenia stron internetowych można przyjąć różne koncepcje rozwiązania głównej nawigacji (menu strony). Bardzo często na stronach internetowych istnieje więcej niż jedno menu, jednak w tym artykule skupimy się tylko na menu głównym, pomijając dodatkowe nawigacje techniczne, linki w stopce, linki w sidebarze (pasku bocznym), itd.

Najczęściej stosowane rozwiązania dla menu strony internetowej to:

• menu poziome (horyzontalne)
• menu pionowe (wertykalne)
• menu ukryte

Dodatkowo każde z tych menu może mieć jeden lub kilka poziomów zagnieżdżenia. Przyjrzyjmy się teraz konkretnym przykładom.

Przykłady menu poziomego na stronach internetowych

Menu poziome to aktualnie najczęściej stosowane rozwiązanie nawigacyjne na stronach internetowych. W tego typu układzie menu zlokalizowane jest gdzieś w górnej części strony, zwykle w okolicach logo. Linki w takim menu ułożone są w jednej poziomej linii (czasem w dwóch, gdy linków jest dużo, jednak nie jest to rekomendowane rozwiązanie – w tej sytuacji warto zastosować menu pionowe, o którym dowiesz się za chwilę).

Przyjęło się, że na stronach internetowych w górnym pasku nawigacyjnym umieszcza się z lewej strony logo, a z prawej strony menu. Istnieją jednak też inne rozwiązania, np. logo w środku, a menu podzielone na lewą i prawą stronę, czy nawet logo po prawej stronie, a menu po lewej.

Menu horyzontalne na stronach internetowych może mieć jeden lub wiele poziomów zagnieżdżenia (tzw. submenu). W przypadku jednego poziomu zagnieżdżenia stosuje się zwykle wysuwany panel pojawiający po najechaniu na link nadrzędny.

Jest to świetne rozwiązanie, gdy nasze menu ma jeden poziom zagnieżdżenia. Zdecydowanie ułatwia użytkownikowi poruszanie się po stronie (mamy więc pozytywny wpływ na user experience), ponieważ nie musi on najpierw wchodzi w link nadrzędny i dopiero szukać linków podrzędnych na podstronie. Takie menu ma też pozytywny wpływ na widoczność naszej strony w Google, ponieważ poprawia linkowane wewnętrzne serwisu. Gdy na naszej stronie internetowej jest więcej poziomów zagnieżdżenia nawigacji, można stosować kolejne submenu, które pojawiają się na przykład z boku.

W mojej ocenie takie rozwiązanie ma sens maksymalnie do drugiego / trzeciego poziomu zagnieżdżenia. W przypadku dalszych zagnieżdżeń poruszanie się po takim menu może być kłopotliwe. Bardzo łatwo jest zjechać myszką poza menu będąc np. na 4 poziomie zagnieżdżenia, a wtedy całe menu nam znika i musimy dostawać się do tego miejsca od nowa. Potrafi to być naprawdę irytujące, gdy trzeci raz próbujemy dostać się w to samo miejsce. Inny problem z dużym zagnieżdżeniem menu horyzontalnego polega na tym, że w pewnym momencie kolejne submenu może wychodzić poza ekran i zwyczajnie będzie ucięte.

Jeśli nasze menu horyzontalne ma dużo poziomów zagnieżdżenia, zdecydowanie lepszym rozwiązaniem jest wykorzystanie tzw. mega menu.

Co to jest mega menu?

Mega menu to specjalne rozwiązanie nawigacyjne dla wielokrotnie zagnieżdżonych menu na stronach internetowych. Mega menu pokazuje się naszym oczom po najechaniu na link nadrzędny w formie szerokiego panelu, który składa się z różnych elementów. Mogą w nim być na przykład:

• kolumny z kolejnymi zagnieżdżeniami menu
• grafiki ilustrujące dane zagadnienie
• linki do promowanych produktów
• dane do szybkiego kontaktu
• inne informacje

Mega menu najczęściej podpinane jest do menu poziomego (horyzontalnego), jednak zdarza się, że widzimy je również w menu pionowych (wertykalnych), które omówimy w dalszej części artykułu.

Przykłady menu pionowego na stronach internetowych

Menu pionowe (wertykalne) było najczęściej stosowanym rozwiązaniem nawigacyjnym w starych stronach internetowych opartych o tabele. Widzieliśmy wtedy zwykle lewą kolumnę z menu oraz prawą kolumnę z treścią strony.

Takie rozwiązanie z biegiem lat ustępowało na rzecz nowoczesnych i estetycznych menu poziomych, o których pisałem wcześniej. Nadal jednak menu pionowe wykorzystywane jest bardzo często na stronach internetowych – szczególnie na takich, gdy mamy bardzo dużo pozycji w menu. Idealnym wręcz zastosowaniem takiego menu są serwisy e-commerce (sklepy internetowe), ponieważ tam mamy zwykle dużo kategorii i podkategorii produktowych. Co ciekawe, w menu pionowym również możemy zastosować rozwijany panel mega menu.

Jeśli nie chcemy jednak stosować rozbudowanego mega menu, ponieważ nasza nawigacja ma jeden stopień zagnieżdżenia, z powodzeniem możemy wykorzystać wysuwane panele pod linkiem nadrzędnym.

Przykłady menu ukrytego na stronach internetowych

Wraz z rozwojem nowych technologii oraz urządzeń mobilnych, coraz częściej na stronach internetowych stosowane jest menu ukryte. Jest to rozwiązanie polegające na tym, że na pierwszym ekranie strony nie widzimy w ogóle menu, a jedynie przycisk, który je otwiera. 

Po kliknięciu w przycisk otwiera się nakładka na stronę, w której zaprezentowane są linki menu. Tego typu rozwiązanie jest najczęściej stosowane na urządzeniach mobilnych, jednak coraz więcej firm wdraża taki schemat również na stronach desktopowych (na komputery i duże ekrany). Na pewno takie rozwiązanie zwiększa estetykę strony – nie mamy nadmiaru tekstu. Zmusza jednak użytkownika by wykonał kliknięcie zanim jeszcze zobaczy menu. Może to negatywnie wpływać na user experience, a także być kłopotliwe dla starszej grupy odbiorców, która nie będzie znała tego rozwiązania i poczuje się zagubiona.

Moje rekomendacje odnośnie stosowania menu na komputery i urządzenia mobilne

Podczas tworzenia stron internetowych dla moich Klientów, najczęściej stosuję taki zestaw rozwiązań w kwestii menu:

• jeśli główny poziom nawigacji ma maksymalnie 6-7 linków oraz cała nawigacja ma jeden stopień zagnieżdżenia – wykorzystuję menu poziome (horyzontalne)
• jeśli główny poziom nawigacji ma więcej niż 7 linków – stosuję menu pionowe (wertykalne)
• jeśli menu na wiele poziomów zagnieżdżenia – rezygnuję z wysuwanych małych submenu i tworzę panel mega menu
• na urządzeniach mobilnych w 99% przypadków stosuję menu ukryte
• menu ukryte na komputerach stosuję tylko dla projektów, w których najważniejsza jest estetyka projektu, a grupa docelowa firmy będzie w stanie zrozumieć ten schemat nawigacji (zwykle są to strony związane z technologią, projektowaniem, itd.).

Myślę, że to dość obszerne opracowanie na temat nawigacji na stronach internetowych będzie wystarczające, aby każdy bez problemu poznał różnice i mógł podjąć decyzję jakie menu zastosować na swojej stronie internetowej. Pamiętaj, że nie musisz ograniczać się tylko do jednego menu. Możesz z powodzeniem wydzielić np. menu produktowe, menu techniczne, menu z opcjami konta użytkownika, itd. Z powodzeniem możesz też mieszać zaproponowane tu sposoby prezentacji menu.

Mam nadzieję, że wskazówki z tego artykułu były dla Ciebie przydatne. Jeśli po przeczytaniu tego tekstu jesteś zainteresowany zleceniem mi wykonania strony internetowej dla Twojej firmy, skontaktuj się ze mną.

Zobacz także

Jak sprawdzić jakich cookies używa strona internetowa?

Kategorie: Strony internetowe

Jeśli potrzebujesz dowiedzieć się jakich plików cookies wykorzystuje Twoja strona internetowa (lub dowolna inna), to w tym krótkim poradniku...

Czytaj więcej Artykuł

WordPress – instrukcja zarządzania edytorem treści

Kategorie: Strony internetowe

Jeśli planujesz zlecenie stworzenia strony internetowej i nie wiesz jakiego systemu CMS użyć do jej zarządzania, to zapraszam Cię...

Czytaj więcej ArtykułWideo

Co umieścić w sekcji above the fold strony internetowej

Kategorie: Strony internetowe

Jeśli planujesz zlecić komuś budowę strony internetowej lub zrobić ją samodzielnie, sprawdź moje wskazówki odnośnie wyglądu i treści, które powinny być zawarte...

Czytaj więcej Artykuł

Stan witryny w WordPress – dlaczego warto tu zaglądać?

Kategorie: Strony internetowe

Jeśli korzystasz z WordPressa i posiadasz wersję minimum 5.2, w Twoim panelu administracyjnym znajdziesz ekran Stan witryny. W tym...

Czytaj więcej ArtykułWideo

Jak poprawnie umieszczać logo na stronie internetowej?

Kategorie: Strony internetowe

Jeśli posiadasz stronę internetową lub dopiero planujesz ją założyć, koniecznie zadbaj o poprawność dodania logo firmowego w górnej części strony. Z tego...

Czytaj więcej Artykuł