Nawigacja na stronie internetowej odgrywa główną rolę w poruszaniu się użytkownika w obrębie serwisu oraz skanowaniu serwisu przez roboty indeksujące. Główną funkcję nawigacyjną pełni menu strony internetowej, tzw. menu nawigacyjne. W tym artykule opowiemy o tym, jak stworzyć funkcjonalne menu oraz jakie czynniki mają wpływ na jego działanie.
Jak zaprojektować użyteczne menu strony internetowej?
Użyteczne menu to takie, które spełnia swoją funkcję nawigacyjną, pozwala zrozumieć użytkownikowi strukturę strony i trafić do celu. Menu powinno być umieszczone w widocznym miejscu na stronie internetowej. Standardowym jego miejscem jest sekcja above the fold, czyli pierwszy widoczny obszar tuż po załadowaniu się strony, a dokładniej jego górna część.
Użytkownicy są przyzwyczajeni do pewnych standardów, dzięki którym mogą intuicyjnie poruszać się po stronie. Menu powinno spełniać kryteria pod kątem zarówno użyteczności (UX), jak i SEO, aby przynosiło korzyści w wynikach wyszukiwania.
Rodzaje menu na stronie internetowej
Menu strony internetowej może przybierać różne formy. Do najczęściej wykorzystywanych i najlepiej odbieranych przez użytkowników należą:
1. Menu poziome
Jest to najbardziej klasyczne menu stosowane na stronach internetowych, które sprawdza się w przypadku stron mniej i bardziej rozbudowanych. Może być rozwijane na różne sposoby, w zależności od przeznaczenia oraz struktury strony. Odznacza się ono poziomym paskiem, zazwyczaj na wysokości logo bądź tuż pod nim.
2. Menu pionowe/boczne
Menu boczne może odgrywać zarówno główną rolę, jak i spełniać funkcję uzupełniającą menu poziomego. Takie menu jest szczególnie charakterystyczne dla stron kategorii, filtrowania bądź stron blogowych prezentujących spis artykułów. Często wykorzystuje się je przy większych serwisach e-commerce jako nawigację po kategoriach produktowych.
3. Hamburger menu
Kolejnym rodzajem jest menu zwinięte pod postacią trzech równoległych kresek, tzw. hamburger. Jest wykorzystywane szczególnie w wersji mobilnej stron internetowych, ale spełnia swoją funkcję również w wersji desktopowej. Jest to najczęściej wykorzystywana ikona do oznaczenia menu strony, dzięki czemu zaliczana jest ona do standardów użyteczności stron internetowych.
4. Menu w stopce strony
Stopka strony może służyć do przedstawienia informacji o firmie oraz danych kontaktowych, jak również pełnić funkcję menu. Taka opcja jest wykorzystywana w momencie, gdy górna część strony przeznaczona jest np. dla wyszukiwarki, która odgrywa główną rolę na stronie.
Elementy funkcjonalnego menu
1. Struktura
Struktura menu powinna być przemyślana i przygotowana dla konkretnej grupy docelowej. Twórca menu powinien wiedzieć, kim są jego odbiorcy, czego potrzebują i czego będą szukać na stronie, a także czy łatwo im poruszać się po tego typu serwisach. Dzięki temu struktura będzie bardziej przejrzysta i czytelna dla użytkownika.
Przyjmuje się, że menu główne nie powinno zawierać więcej niż dwa poziomy zagnieżdżeń. Większa liczba ukrytych submenu może powodować problem w odszukiwaniu docelowej kategorii. W przypadku dużej liczby mniejszych kategorii dobrym rozwiązaniem jest stosowanie dodatkowych filtrów z poziomu kategorii nadrzędnej. Jeżeli jednak decydujesz się na bardziej rozbudowane menu, zadbaj o jego odpowiednie rozwijanie i zwijanie.
Elementy menu, których nie może zabraknąć w strukturze:
- najważniejsze adresy URL dla serwisu – główne kategorie i podkategorie,
- strona główna – często przedstawiana jako ikona domku,
- kontakt,
- sekcja O nas/O firmie,
- blog/aktualności/poradniki,
- dodatkowe zakładki charakterystyczne dla danej działalności: promocje, rezerwacja itp.
2. Nazewnictwo
Drugą ważną kwestią jest nadanie nazw zakładkom wchodzącym w skład menu. Nazwy powinny być intuicyjne i nie wprowadzać użytkowników w błąd. Najlepiej sprawdzają się proste, krótkie nazwy.
3. Kolorystyka
Menu powinno wyróżniać się na stronie, jednocześnie nawiązując do jej kolorystyki tak, aby całość strony tworzyła spójną całość. Nie zaleca się stosowania jaskrawych kolorów. Natomiast kolor czcionki powinien być czytelny i nie zlewać się z kolorem tła.
4. Podświetlenia
Warto stosować wszelkiego rodzaju podświetlenia oraz podkreślenia, dzięki czemu użytkownik wie, na którym etapie się obecnie znajduje.
5. Klikalność
Klikalność elementów w menu powinna działać bez zarzutów. Nie zaleca się umieszczania w menu nazw kategorii, które nie mają docelowego adresu URL bądź po prostu nie zostały opatrzone linkiem.
6. Responsywność
Menu powinno być tworzone w pierwszej kolejności dla urządzeń mobilnych. Ze względu na to, że większość użytkowników – ponad 60% – korzysta z urządzeń mobilnych, zalecane jest podejście mobile-first zarówno w odniesieniu do menu, jak i do projektowania całej strony.
Menu dla wersji mobile oraz desktop powinno być identyczne pod kątem ich zawartości.
Jakich błędów unikać podczas tworzenia menu
Podczas tworzenia menu należy unikać:
- umieszczania menu w niestandardowym miejscu, co może mieć negatywne przełożenie na doświadczenia użytkowników,
- niedostosowania menu do wersji mobile – zaleca się prowadzenie testów użyteczności dla różnych urządzeń mobilnych, tabletów oraz komputerów stacjonarnych, aby wyeliminować wszelkie błędy,
- zbyt rozbudowanego menu, wielu poziomów zagnieżdżeń,
- umieszczania grafik w menu, szczególnie w wersji mobilnej, co może wpłynąć na zaburzone wyświetlanie się menu i opóźnienie ładowania,
- linków prowadzących do stron 404,
- linków prowadzących do niezaktualizowanych stron, które zawierają błędne informacje bądź do nieaktualnej oferty,
- niedopasowania linków do odpowiednich nazw kategorii.
Podsumowanie
Menu jako główny element na stronie powinno być tworzone z dużą uważnością i wiedzą o grupie docelowej serwisu. Nawigacja na stronie jest czynnikiem nie tylko rankingowym, dającym możliwość osiągnięcia lepszych wyników pozycjonowania, ale również decydującym o konwersji.
Skorzystaj z konsultacji naszych specjalistów SEO oraz UX i zaprojektuj swoje menu dla użytkowników.
