Sprawdź, jak wypozycjonowaliśmy naszą stronę do TOP1
Na skróty
Strony internetowe powinny mieć taki układ oraz strukturę elementów, aby możliwe było komfortowe poruszanie się w ich obrębie. Nawigacja strony obejmuje elementy, takie jak na przykład: mapa witryny, stopka, linki wewnętrzne oraz menu nawigacyjne. W tym artykule przyjrzymy się temu ostatniemu. A dokładniej omówimy hamburger menu oraz sposób jego wdrożenia.
Menu hamburger to centralny element nawigacji strony internetowej. W większości przypadków jest ono umieszczone na górze lub z boku witryny. Hamburger menu dostarcza użytkownikom kluczowych linków do najważniejszych sekcji oraz podstron. Ten element projektowy wykorzystywany jest w interfejsach użytkownika. Często spotykany w aplikacjach mobilnych. Nazwa pochodzi od trzech poziomych linii, przypominających składniki hamburgera — ułożone jeden na drugim.
Zdj. 1. Przykład menu hamburger
Źródło: https://blog.hubspot.com/website/hamburger-button
Po kliknięciu hamburger menu zazwyczaj pojawia się menu nawigacyjne bądź też lista opcji. Rozwiązanie to jest stosowane w celu zaoszczędzenia miejsca na ekranie — zwłaszcza na mniejszych urządzeniach.
Warto wprowadzić menu hamburger — na przykład Bootstrap hamburger menu (menu z popularnego frameworka front-endowego) w sytuacji, gdy masz do czynienia z ograniczoną przestrzenią ekranu. Hamburger menu jest również odpowiedni, jeśli zależy Ci na minimalizmie oraz zgodności z trendami w projektowaniu. To również dobre rozwiązanie w przypadku, gdy nawigacja strony jest bardzo rozbudowana.
Hamburger menu CSS (ang. Cascading Style Sheets) ma pewne minusy. Warto, żebyś miał ich świadomość, zanim zdecydujesz się na ten element nawigacji. Nie oznacza to jednak, że nie warto go wdrożyć.
Menu hamburger ukrywa opcje nawigacyjne. To zarazem zaleta i wada. Zaleta, bo można zaoszczędzić miejsce na stronie. Wada natomiast, gdyż dla użytkownika jest mniej oczywiste, gdzie powinien kliknąć. W tym kontekście zasadne jest również pytanie, czy warto wykorzystać hamburger menu do dużych ekranów.
Z tego powodu często twórcy stron internetowych wykorzystują je w wersji responsywnej. W takich przypadkach hamburger menu HTML pojawia się dopiero w momencie, gdy użytkownik strony korzysta z urządzenia mobilnego. Na monitorze komputera nawigacja przybiera natomiast tradycyjną formę.
Zdj. 2. Menu strony internetowej Semcore dostosowane do większych ekranów.
Źródło: https://semcore.pl/
Zdj. 3. Menu strony internetowej Semcore dostosowane do urządzeń mobilnych — po zmniejszeniu ekranu narzędziem dla deweloperów.
Źródło: https://semcore.pl/
Warto zadać też pytanie, czy menu hamburger odpowiada potrzebom użytkowników z niepełnosprawnościami. Na przykład osoby, które korzystają z czytników ekranu, mogą mieć trudności z identyfikacją elementów nawigacyjnych ukrytych za ikoną hamburgera.
Projektanci powinni więc rozważyć także alternatywne rozwiązania lub zapewnić jasne wskazówki użytkownikom. Wszystko po to, aby zagwarantować pełny dostęp do informacji dla każdego. Agencje marketingowe, których specjalizacją jest zarówno tworzenie, jak i pozycjonowanie stron, zatrudniają takich specjalistów.
Przy wdrożeniu i optymalizacji hamburger menu pomocne będzie udzielenie odpowiedzi na następujące pytania:
Zdj. 4. Wybór ikon menu hamburger w systemie zarządzania treścią
Źródło: https://dribbble.com/shots/5948418-Menu-Icons
Do tworzenia hamburger menu można wykorzystać systemy zarządzania treścią i web buildery (np. WordPress oraz Elementor / WordPress oraz Gutenberg). Bardziej zaawansowani programiści sięgają natomiast po rozwiązania, takie jak np. Bootrstrap Hamburger Menu bądź też React Hamburger Menu, posługując się kodowaniem.
Zawodowy copywriter, pasjonat SEO, przedsiębiorca. Specjalizuje się w treściach dotyczących marketingu internetowego. Miłośnik nowinek technologicznych. Kiedy nie pracuje, latem rekreacyjnie biega, a zimą morsuje.
