Odpowiedź w trzech zdaniach
Mega menu to rozwijany panel, który po otwarciu z paska nawigacji pokazuje wiele linków naraz, w kolumnach i nazwanych grupach. Opłaca się, gdy sklep lub serwis ma wiele kategorii albo mówi do kilku grup odbiorców. Przy krótkiej liście stron wystarczy zwykłe menu rozwijane.
Czym mega menu różni się od zwykłego menu rozwijanego?
Mega menu pokazuje od razu kilka grup linków w jednym panelu, a menu rozwijane jedną listę, często z kolejnymi poziomami. Przed otwarciem mega menu wygląda jak zwykły pasek nawigacji. Różnica zaczyna się po kliknięciu lub najechaniu.
Menu hamburger to osobna decyzja: ukrywa nawigację do czasu użycia ikony i pasuje do projektów minimalistycznych albo tworzonych najpierw na telefon.
Działania w tabeli to liczenie na przykładowej strukturze Obuwie > Męskie > Trekkingowe, a nie pomiar.
| Typ menu | Co widzi klient po otwarciu | Działania do kategorii Trekkingowe | Kiedy pasuje |
|---|---|---|---|
| Menu rozwijane (kaskadowe) | Jedną listę, kolejne poziomy wysuwają się z boku | 3: otwórz Obuwie, otwórz Męskie, kliknij Trekkingowe | Krótkie, powiązane listy |
| Mega menu | Panel Obuwie z kolumnami, w tym Męskie | 2: otwórz panel Obuwie, kliknij Trekkingowe w kolumnie Męskie | Wiele kategorii, kilka grup odbiorców |
| Telefon: akordeon lub wysuwane panele | Ikonę menu, potem kolejne poziomy | 4: ikona menu, Obuwie, Męskie, Trekkingowe | Mały ekran |
Mega menu oszczędza tu jedno działanie, ale większy zysk to widok wszystkich grup naraz i brak celowania kursorem w kolejne poziomy. Zanim wybierzesz układ, policz działania na własnym drzewie kategorii. Moda na szerokie panele nie jest argumentem.
Kiedy mega menu się opłaca, a kiedy wystarczy lista?
Opłaca się wtedy, gdy klient musi wybierać spośród wielu kategorii lub ścieżek. Sklep porządkuje w panelu kategorie i produkty, firma SaaS funkcje i dokumentację, a serwis edukacyjny skraca drogę do tematu bez przechodzenia przez kolejne poziomy.
Warto, gdy:
- serwis ma wiele kategorii produktów lub usług,
- mówi do kilku grup odbiorców, na przykład osobno do klientów indywidualnych i firm,
- chce wyeksponować wiele ważnych stron naraz,
- ma dużą bibliotekę treści, w której nikt nie zgadnie, gdzie co leży.
Nie warto, gdy:
- serwis usługowy ma kilka podstron,
- sklep ma kilka kategorii bez podkategorii,
- panel miałby jedną kolumnę, która jest po prostu listą.
Menu większe niż asortyment wygląda jak hol hotelu wybudowany dla jednego pokoju. Mam prosty test: jeśli drugą kolumnę musisz wymyślać, panel jest za wcześnie. Przerośnięte menu zagęszcza nawigację zamiast ją skracać.
Co powinno się znaleźć w panelu?
W panelu powinny stać nazwane grupy linków, ułożone tak, jak szuka klient. Dodatki zostają tylko wtedy, gdy pomagają wybrać. Panel mieści kolumny, podkategorie, obrazy i krótkie opisy, ale to, że coś się mieści, nie oznacza, że powinno tam trafić.
1. Grupuj tak, jak szuka klient
Układaj grupy według tego, jak klient myśli o zakupie, a nie według struktury firmy. Podział może iść według typu produktu, zastosowania albo odbiorcy. W sklepie z obuwiem kolumny „Trekkingowe” i „Miejskie” są bliższe decyzji niż „Dział 3”.
W jednym serwisie różne pozycje menu mogą mieć różny układ, zależnie od ich intencji. W przeglądzie rozwiązań opublikowanym przez Webflow jeden panel dzieli funkcje według etapów pracy, a inny według potrzeb odbiorców, na przykład marketingu i programistów. Panel „Produkty” w jednym z opisanych serwisów ma listę kategorii po lewej i obok niej linki z miniaturami, a panel „Rozwiązania” pokazuje karty branż, czyli przeglądanie według zastosowania.
2. Nazwij każdą grupę i daj jej link
Nagłówek kolumny powinien być klikalnym linkiem do strony tej grupy. Klient, który nie znalazł dokładnie swojej pozycji, ma wtedy dokąd pójść, zamiast wracać do paska. Przy długich listach przydaje się też droga „Zobacz wszystkie”, taka jak w panelu z najnowszymi wpisami.
3. Dodatki przepuść przez test wyboru
Obraz lub opis zostaje tylko wtedy, gdy pomaga wybrać pozycję. Miniatura ma sens, gdy klient wybiera po wyglądzie, na przykład sofę albo buty. Przy kategoriach takich jak „Akcesoria do czyszczenia” nie pomaga w niczym, a każdy obraz to kolejny plik do pobrania. Etykieta „Promocja” czy „Nowość” też musi być prawdziwa, bo inaczej klient szybko nauczy się ją ignorować.
Kreatory menu pozwalają wstawić do panelu dowolną treść, także mapę czy formularz kontaktowy. To pokazuje, co narzędzie potrafi, a nie czego klient szuka w nawigacji. Mapa w menu sklepu internetowego to ozdoba, która spycha linki w dół.
4. Duży katalog podziel kartami
Menu z kartami pokazuje grupy jedna po drugiej i ułatwia przeglądanie dużych katalogów. Sięgnij po nie, gdy same kolumny przestają się mieścić w panelu. Jeśli kolumny się mieszczą, karty tylko dodają kliknięcie.
Jak otwierać panel, żeby nie przeszkadzał?
Najbardziej przewidywalne jest kliknięcie. Najechanie kursorem może otworzyć panel przypadkiem, gdy klient tylko przesuwa mysz nad paskiem w stronę przycisku „Koszyk”. Kliknięcie działa też na ekranie dotykowym, więc jedno zachowanie obsługuje komputer i tablet.
Dostępne menu wymaga obsługi klawiaturą, sprawdzenia z czytnikiem ekranu i semantycznego HTML, czyli znaczników opisujących rolę elementów. Przyciemnienie strony przy otwartym podmenu i przyklejone menu to opcje, nie wymóg. Przy przyklejonym pasku sprawdź, czy otwarty panel nie zasłania zbyt dużo strony na niskim oknie przeglądarki.
Lista kontrolna:
- otwórz, przejdź i zamknij panel samą klawiaturą (Tab, Enter, Esc),
- zamknij panel kliknięciem poza nim,
- sprawdź panel z czytnikiem ekranu.
Skąd wziąć podział na kolumny?
Ze struktury serwisu ustalonej wcześniej i z języka klientów, bo panel tylko pokazuje porządek, który istnieje albo którego brakuje. Najpierw uporządkuj architekturę informacji, potem projektuj wygląd panelu. Jeśli kategorie są pomieszane w katalogu, szeroki panel pomiesza je jeszcze widoczniej. Do sprawdzenia, jak klienci grupują pozycje, służy card sorting, czyli układanie kart z nazwami kategorii w grupy.
Co z mega menu na telefonie?
Telefon nie ma najechania, więc panel zamienia się w akordeon albo wysuwane panele, zwykle za ikoną menu. Samą ikoną zajmuje się tekst o menu hamburger, a tu liczy się to, co dzieje się z panelem po jej dotknięciu. W przykładzie z butami droga na telefonie ma 4 działania.
- Akordeon pasuje, gdy klient porównuje kategorie na jednej liście.
- Wysuwane panele pasują, gdy poziomów jest więcej i lista byłaby długa.
Sprawdź każdą ścieżkę na małym ekranie, kciukiem, a nie kursorem.
Jak sprawdzić, czy klienci trafiają przez menu?
Daj kilku osobom zadanie znalezienia konkretnej kategorii i policz ich działania oraz błędne wejścia. To uproszczony test użyteczności nastawiony na menu.
- Wybierz kategorię z głębi struktury, na przykład Trekkingowe, i sformułuj zadanie bez nazwy z menu („Szukasz butów na górskie wyprawy”).
- Poproś, żeby osoba dotarła do kategorii, i nie podpowiadaj.
- Policz działania do celu i wejścia w złe kolumny.
- Powtórz zadanie na telefonie.
Jeśli kilka osób wybiera tę samą złą kolumnę, sprawdź najpierw nazwę tej grupy, potem jej miejsce w panelu.
Czy do mega menu potrzebna jest wtyczka?
Nie zawsze, bo da się je zbudować w HTML i CSS, także w wersji responsywnej. W WordPressie i w kreatorach stron robi się je często dodatkiem, który nie wymaga kodowania. Przy wyborze narzędzia patrz na trzy rzeczy: czy panel działa z klawiatury, czy sensownie składa się na telefonie i czy masz kontrolę nad tym, co w nim stoi.
