Jak zaprojektować dobre menu strony internetowej?

Menu jest jednym z najważniejszych elementów na stronie internetowej. Daje użytkownikowi możliwość zapoznania się ze strukturą serwisu oraz łatwego dotarcia do jego zawartości. Projektując stronę internetową należy połączyć dobry design z intuicyjnością obsługi.

Budowa menu w głównej mierze zależy od struktury serwisu oraz jego celów biznesowych. Na prostych stronach (np. blog, strona wizytówka) menu będzie proste, często składające się z zaledwie kilku elementów. Na stronach o bardziej rozbudowanej strukturze (np. sklep internetowy) menu będzie zawierać dużo więcej elementów, a najczęściej, sama strona www będzie zawierać kilka menu.

Dodatkowo uwzględnić należy technologię i sprzęt. Obecnie mnogość urządzeń mobilnych daje ich użytkownikom możliwość przeglądania zawartości internetu w dogodnym dla nich miejscu i czasie. Dla projektanta strony www to kolejne wyzwanie – należy pamiętać, że menu musi poprawnie wyświetlać się na ekranach o różnej wielkości. Cała strona powinna być wykonana w technologii responsywnej, a nawigacja może przyjmować różne kształty w zależności od urządzenia, na jakim jest wyświetlana.

Menu poziome, czy pionowe?

Nie ma tutaj reguły czy złotego środka. Wybór zależy przede wszystkim od zawartości strony. Menu poziome jest łatwiejsze do zaimplementowania w serwisach responsywnych oraz pozwala na łatwe zapoznanie się przez użytkownia z zawartością serwisu, o ile nie zawiera zbyt wielu elementów. Projektanci często zalecają umieszczenie do pięciu pozycji w menu.

Prawidłowo zaprojektowane i wykonane menu pionowe może być równie dobrze funkcjonale jak menu poziome. W przypadku rozbudowanych serwisów (np. sklep internetowy) może nawet lepsze, gdyż pozwala na umieszczenie większej ilości pozycji. Łatwiej jest przeglądać dużą ilość kategorii produktów ułożonych jedna pod drugą niż obok siebie.

Zastosowanie obu menu jednocześnie bywa najlepszym rozwiązaniem, szczególnie gdy chcemy zachować czytelność strony, jednocześnie ułatwiając dotarcie do poszczególnych podstron. Menu poziome wtedy spełnia rolę podstawowej nawigacji na stronie, natomiast menu pionowe oferuje filtrowanie, kategoryzację produktów czy dostęp do mniej ważnych informacji, ale jednak poszukiwanych przez klientów (np. regulamin sklepu, formularz wymiany produktu).

A może hamburger menu?

Coraz więcej stron internetowych celowo nie eksponuje rozwiniętego menu i ukrywa je pod ikoną “hamburgera” – hamburger menu. Największą zaletą takiego rozwiązania jest jego dopasowanie zarówno do urządzeń stacjonarnych jak i mobilnych.

menu strony 02

Proste nazwy czy kreatywne hasła?

Nazewnictwo menu nie może być przypadkowe. Może zawierać długie nazwy czy pomysłowe hasła. Ale czy to ułatwi nawigację na stronie? Użytkownik nie zawsze chce zachwycać się naszą kreatywnością, użytkownik oczekuje jak najszybszego odnalezienia pożądanego elementu. Dlatego nazewnictwo powinno być do bólu standardowe i mówiące wszystko o zawartości strony docelowej.

Jako przykład niech posłuży strona internetowa firmy budowlanej. Klikając w menu na „Strona główna” internauta nie oczekuje, że przeczyta o historii firmy i jej członkach gdy tuż obok w nawigacji jest odniesienie do zakładki „O nas”.

Podobnie jest z kolejnością elementów w menu – kolejny raz należy uwzględnić oczekiwania użytkownika. Oczywistym jest, że „Kontakt” nie wrzucamy jako pierwsza czy druga zakładka, gdyż mogłoby to mylnie świadczyć o ważności siedziby nad ofertą czy realizacjami. Przy dużej ilości pozycji dobrze sprawdza się kolejność alfabetyczna, ale z reguły sortuje się pozycje w menu według ich przydatności, popularności lub rangi. Dlatego właśnie “Kontakt” najczęściej spotkamy na ostatniej pozycji menu.

Prawidłowe menu

Projektując menu trzeba przede wszystkim pamiętać o użytkownikach, którzy będą ten serwis przeglądać, oraz o robotach odwiedzających naszą stronę. Nie kierujmy się tylko i wyłącznie osobistymi preferencjami i upodobaniami. Zaprojektujmy menu zgodnie z obowiązującymi na rynku trendami, zachowując domyślność i łatwość poruszania w myśl zasady im mniej tym lepiej! Koniecznie pamiętając o urządzeniach mobilnych!


* * *

A jeśli wciąż masz jakieś wątpliwości co do menu strony czy jego działania, sprawdź nasz katalog! Zebraliśmy zestaw z najbardziej stylowych i funkcjonalnych szablonów do różnych CMS. Wszystkie z nich zostali wykonane przez najlepszych designerów i programistów!

 Do katalogu!


Czytaj również:

Jak łatwo stworzyć witrynę eCommerce? [Darmowa e-książka]

Jak wstawić favicons w WordPress?

Tutorial: tworzenie e-sklepu na Magento



Katarzyna Pawłowska

W branży IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwiązań użytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propagujące wiedzę z dziedziny SMM i rozwija swoją miłość do crossfitu.