Hamburger menu – kiedy stosować i jak poprawnie zaprojektować?

Wprowadzenie do architektury informacji

Zanim zagłębimy się w tajniki projektowania hamburger menu, muszę najpierw omówić to, co stanowi podstawę dobrego menu – architekturę informacji. Chociaż definicji tego pojęcia jest wiele, ta odnosząca się do stron internetowych mówi, że jest to metoda projektowania witryn www w taki sposób, aby treści w niej zawarte były odpowiednio uporządkowane, tak aby każdy odwiedzający stronę użytkownik znalazł na niej to, czego właśnie szuka.

W skład architektury informacji na stronie wchodzi więc siła – nie mylić ze sztuczną inteligencją! – która ma ogromny wpływ na konwersję strony. Dobrze dopracowana architektura informacji pomaga wręcz wykreować pożądane zachowania użytkownika. Dlatego tak ważne jest, aby zaprojektować ją jak najlepiej. Pamiętacie słynne słowa twórcy firmy Apple Inc., Stevea Jobsa: “Ludzie często nie wiedzą, czego chcą, dopóki im tego nie pokażesz”? Sprawdzają się one idealnie w tym kontekście.

Dobra architektura informacji to również jeden z czynników rankingowych Google. Wyszukiwarka potwierdziła, że najlepiej rankują strony, które zawierają unikalny, wartościowy content, który jest odpowiednio uporządkowany i przyjazny dla użytkownika. To kolejny przykład, dzięki któremu widać wpływ UX na SEO.

Projektowanie menu strony internetowej

Rozumiemy już, dlaczego prawidłowa architektura informacji sklepu czy witryny jest tak ważna. Teraz skupmy się na głównym zagadnieniu – sercu nawigacji, czyli menu strony.

Projektując swoje menu, musisz pamiętać o kilku kluczowych kwestiach. Zanim zdecydujesz się na rodzaj menu, warto przemyśleć, w którym miejscu strony powinno się ono znajdować – po lewej, po prawej, u góry, a może na dole? Oczywiście możemy mówić o pewnych przyzwyczajeniach użytkowników, jednak nie ma i nigdy nie będzie istniał idealny przepis na menu, które sprawdzi się na każdym rodzaju strony. Dlatego podkreślaliśmy, jak ważne jest dokładne określenie celu strony. Poza tym, jeśli chcesz mieć pewność, że Twoja witryna i jej nawigacja nie zawiedzie użytkowników, przeprowadź na reprezentacyjnej grupie osób profesjonalne badania użyteczności. Menu musi bowiem pasować do strony idealnie oraz być stworzone z myślą o jej użytkownikach.

Rodzaje menu strony

Wyróżnijmy teraz najpopularniejsze rodzaje menu stron internetowych, omówmy ich zalety i wady:

1. Menu poziome

Spotykane głównie na niewielkich stronach, ma postać belki umieszczonej na górze strony zaraz przed polem treści. Takie rozwiązanie, chociaż jest dość często spotykane, ma zarówno zalety, jak i wady. Plusem na pewno jest przejrzystość i fakt, że menu takie jest doskonale zauważalne od razu po wejściu na stronę. Poza tym nie zajmuje dużo miejsca przeznaczonego na content strony głównej. Jest naturalne.

Jeśli chodzi o minusy, musi być z góry doskonale zaplanowane, ponieważ zwykle takie menu ma ograniczoną ilość pozycji – ciężko jest rozbudować je o kolejne kategorie, jeśli chcemy, aby ciągle wyglądało dobrze w różnych skalach i na różnych urządzeniach. Standardowo umieszcza się w nim 6-8 pozycji. Poza tym link umieszczony w takim menu musi być krótki, najlepiej jednowyrazowy. Można je stosować zarówno jako jedyne rozwiązanie, lub w połączeniu z np. menu bocznym, jeśli na stronie znajdują się np. podkategorie.

2. Pull-down menu, fly-out menu, pop-up menu itp.

To rozwiązanie jest używane bardzo często, zwłaszcza w e-commerce. Główne kategorie mają postać menu poziomego, a po najechaniu na nie kursorem lub czasem dopiero po kliknięciu, rozwija się podmenu z podkategoriami. To rozwiązanie posiada wszystkie zalety i wady standardowego menu poziomego. Dodatkowym plusem jest jego przejrzystość – wszystkie podkategorie umieszcza się zwykle pod główną kategorią w jasny sposób, który wyraźnie zaznacza, gdzie dokładnie jest na stronie użytkownik. Poza tym jest intuicyjne – jeśli jest dobrze zaprojektowane, każdy bez problemu zauważy związek pomiędzy głównymi kategoriami a ich podstronami.

Jeśli chodzi o wady, może zajmować dużo miejsca na stronie głównej, spychając treść niżej, ale jeśli jest rozwijane, zwykle nie sprawia to dużego problemu. Dobrze sprawdza się zwłaszcza przy dwupoziomowej strukturze nawigacji – jeśli tych stopni jest więcej, menu może stawać się nieczytelne.

3. Menu boczne

Menu boczne jest często spotykane, zwłaszcza w e-commercach z szerokim asortymentem. Może wspierać menu górne lub być odrębnym elementem. Zwykle umieszczane jest z lewej strony, jako że w większości krajów świata czytamy od lewej do prawej, więc teoretycznie w pierwszej kolejności trafiamy na menu. Chyba że zależy Ci na tym, aby użytkownik najpierw przeczytał content strony głównej, a później dopiero ewentualnie szukał menu – wtedy warto zastosować je z prawej strony.

Zaletą menu bocznego jest to, że może pomieścić szeroki asortyment – zmieszczą się tutaj długie listy linków. Pomieści wiele stopni nawigacji i ma możliwość odpowiedniego oznaczenia ich relacji. Długie nazewnictwo nie stanowi tu problemu – kategoria może mieć kilka słów. Ponadto takie menu jest dobrze skalowane – w razie potrzeby bez problemów rozbudujemy je o nowe kategorie. To dobry wybór, jeśli planujesz rozszerzać asortyment sklepu.

Minusem menu bocznego jest to, że często zajmuje sporo miejsca. Poza tym należy dobrze zaznaczyć na nim, czy podkategorie są rozwijane czy nie, aby było jak najlepiej czytelne dla użytkownika. Jest to na pewno rozwiązanie bardzo popularne. Często występuje też w formie uzupełnienia menu górnego.

4. Hamburger menu

Hamburger menu, czyli graficzne przedstawienie rozwijanego, ukrytego menu, występuje najczęściej w aplikacjach, stronach mobilnych czy serwisach internetowych. W 2010 roku stała się popularna dzięki Facebookowi, który teraz odszedł od tego rozwiązania. Nazwa wzięła się po prostu z podobieństwa ikonki do popularnego fast fooda. Ikonka ta została zaprojektowana przez Norma Coxa, współzałożyciela CoxHall, znanej spółki projektowej, już w latach 80. na potrzeby firmy Xerox.

Ten rodzaj menu sprawdza się doskonale przy aplikacjach i stronach dostosowanych do urządzeń mobilnych – jest bowiem użyteczne na wielu z nich, a także na komputerach. Rozwiązanie to jest dodatkowo nowoczesne i estetyczne. Minimalistyczny design znajduje swoich fanów na całym świecie. Hamburger menu ma także swoich przeciwników, twierdzących, że nie jest to rozwiązanie dostatecznie jasne dla wszystkich.

Oczywiście rodzajów menu jest dużo więcej, wymieniliśmy te najbardziej popularne. Aby zaprojektować doskonałe dla swojego biznesu menu, musisz pamiętać przede wszystkim o zasadach User Experience. Źle zaprojektowane menu może wpływać negatywnie na konwersję, warto więc przemyśleć dokładnie odpowiednią nawigację. Jak wspominaliśmy wyżej, najlepiej przeprowadzić w tym celu profesjonalne badania użytkownika, aby mieć pewność, że rozwiązania użyte na naszej stronie będą dla naszej grupy docelowej intuicyjne i przejrzyste.

Nie zapominajmy także o SEO i dobrym nazewnictwie poszczególnych kategorii – wtedy osiągniemy złoty środek, trafiając w gusta zarówno użytkowników, jak i wyszukiwarek.

Hamburger menu na stronach desktopowych

Jak wspomniałem wcześniej, hamburger menu najczęściej kojarzy się nam ze stronami mobilnymi. Jednak coraz częściej możemy spotkać się z tym rozwiązaniem również na stronach desktopowych. Czy jest to dobre rozwiązanie?

Okazuje się, że hamburger menu na komputerach stacjonarnych wzbudza wiele kontrowersji wśród specjalistów od UX. Z jednej strony, jest to nowoczesne i estetyczne rozwiązanie, które doskonale sprawdza się na urządzeniach mobilnych. Z drugiej strony, na dużych ekranach komputerów, ukrywanie menu pod ikonką może być mniej intuicyjne dla użytkowników.

Badania pokazują, że użytkownicy odwiedzający strony na komputerach stacjonarnych oczekują, że menu będzie widoczne od razu, bez konieczności dodatkowych kliknięć. Ukrywanie go pod ikonką może powodować, że część osób w ogóle go nie zauważy lub będzie mieć problem ze sprawnym nawigowaniem po stronie.

Dlatego też, decydując się na hamburger menu na stronie desktopowej, warto przemyśleć kilka kwestii:

1. Zapewnij dodatkowe widoczne menu: Oprócz hamburger menu umieść na stronie także tradycyjne, widoczne menu, np. w formie paska na górze strony. Dzięki temu użytkownicy od razu zobaczą, że mają do dyspozycji różne opcje nawigacji.

2. Zastosuj wyraźne oznaczenie hamburger menu: Upewnij się, że ikonka hamburger menu jest wystarczająco duża i widoczna, a sama nazwa “Menu” lub inna podpowiedź jasno informuje użytkowników o jej funkcji.

3. Zbadaj preferencje Twoich użytkowników: Przeprowadź testy użyteczności, aby sprawdzić, jak Twoi klienci reagują na hamburger menu na komputerach stacjonarnych. Jeśli okaże się, że większość z nich woli tradycyjne, widoczne menu, lepiej zrezygnuj z tego rozwiązania na wersji desktopowej.

Podsumowując, hamburger menu może sprawdzić się również na stronach desktopowych, ale wymaga to wnikliwej analizy preferencji Twoich użytkowników i odpowiedniego zaprojektowania. Pamiętaj, że celem jest stworzenie intuicyjnej i użytecznej nawigacji, która ułatwi odwiedzającym odnalezienie poszukiwanych treści.

Podsumowanie

Projektując menu strony internetowej, musisz pamiętać o kilku kluczowych kwestiach. Przede wszystkim dobrze zaplanuj architekturę informacji na Twojej witrynie. To ona w dużej mierze będzie determinować, jak użytkownicy będą poruszać się po Twojej stronie i docierać do poszukiwanych treści.

Następnie, w zależności od charakteru Twojej strony i preferencji Twoich odbiorców, wybierz odpowiedni rodzaj menu. Może to być menu poziome, rozwijane, boczne lub hamburger menu. Każde z tych rozwiązań ma swoje wady i zalety, dlatego warto je dogłębnie przeanalizować.

Niezależnie od ostatecznego wyboru, pamiętaj, aby przeprowadzić badania użyteczności na reprezentatywnej grupie odbiorców. Tylko w ten sposób możesz mieć pewność, że Twoja nawigacja będzie intuicyjna i przejrzysta dla Twoich użytkowników.

Zwróć też uwagę na aspekty SEO – prawidłowe nazewnictwo kategorii menu może znacząco wpłynąć na pozycjonowanie Twojej strony w wyszukiwarkach.

Mam nadzieję, że te wskazówki pomogą Ci stworzyć doskonałe menu, które ułatwi Twoim klientom poruszanie się po Twojej stronie internetowej. Powodzenia w projektowaniu!

A jeśli potrzebujesz pomocy przy tworzeniu lub pozycjonowaniu Twojej witryny, zapraszam Cię do skorzystania z naszych usług. Nasz zespół specjalistów z chęcią pomoże Ci w osiągnięciu Twoich celów biznesowych.