W miarę jak coraz więcej osób korzysta z telefonów komórkowych do zakupów online, strony internetowe muszą być responsywne i wygodne w obsłudze. Problem w tym, że ekran telefonu oferuje mało miejsca. Jeśli elementy nawigacyjne Twojej strony są ściśnięte lub niejasne, odwiedzający prawdopodobnie opuszczą ją i zrobią zakupy gdzie indziej.
Właśnie dlatego wiele stron i aplikacji sięga po scyzoryk mobilnej nawigacji: hamburger menu. Prosta ikona złożona z trzech kresek stała się międzynarodowym symbolem oznaczającym „więcej opcji nawigacji tutaj”, zwijając całe menu witryny do jednego solidnego przycisku.
Poznaj bliżej moc i pułapki hamburger menu – jego historię, kluczowe cechy oraz sposoby skutecznego wykorzystania w projektowaniu mobilnej wersji strony.
Czym jest hamburger menu?
Przez lata standardową metodą nawigacji po stronie było menu poziome – rząd słów odpowiadających poszczególnym kategoriom, rozciągnięty w górnej części ekranu. Ale gdy pod koniec lat 2000. i na początku 2010. przeglądanie na urządzeniach mobilnych gwałtownie przybrało na sile, napędzane rozwojem technologii smartfonów i łączności z internetem mobilnym, projektanci stron potrzebowali rozwiązania bardziej oszczędzającego miejsce.
Wtedy pojawiło się menu hamburger (☰) – prosta ikona złożona z ułożonych równolegle poziomych kresek (jeśli chcesz, potraktuj je jako bułkę) otaczających środkową kreskę (kotlet) – pozwalająca użytkownikom rozwijać i zwijać opcje nawigacji w miarę potrzeb. Przycisk menu hamburger znajdziesz zazwyczaj w górnym lewym lub prawym rogu strony czy aplikacji.
Historia hamburger menu
Hamburger menu tak naprawdę powstało jeszcze przed urządzeniami mobilnymi. Na początku lat 80. projektant Norm Cox stworzył je dla graficznego interfejsu użytkownika stacji roboczej Xerox Star, będącej pierwowzorem interfejsu pierwszego Apple Macintosh. Cox chciał zaprojektować prostą, rozpoznawalną ikonę, która po kliknięciu otworzy listę dostępnych działań.
Po pierwszym wprowadzeniu hamburger menu było używane w ograniczonym zakresie i w dużej mierze poszło w zapomnienie aż do czasu powszechnego rozpowszechnienia telefonów komórkowych około 2009 roku. Potrzeba efektywnego prezentowania opcji menu na małych ekranach bez przytłaczania użytkowników sprawiła, że zwarta i uporządkowana ikona hamburger menu okazała się idealnym rozwiązaniem.
Popularność hamburger menu została ugruntowana, gdy Twitter i inne aplikacje telefoniczne przyjęły je jako standard, a następnie znalazło ono zastosowanie w Notatkach głosowych na iPhonie 3GS oraz towarzyszącym mu systemie iOS 4, utrwalając swoją rolę jako znany symbol ukrytej nawigacji.
Zalety i wady hamburger menu
Hamburger menu sprawdza się doskonale na urządzeniach mobilnych, ale paski nawigacyjne i menu w formie zakładek mogą lepiej służyć użytkownikom komputerów. Wyjaśniamy dlaczego:
Zalety
Kompaktowy rozmiar ikony hamburger menu to jej racja bytu. Oszczędza cenne miejsce na ekranie i porządkuje projekt strony, szczególnie na mniejszych ekranach, takich jak smartfony. Kliknięcie lub dotknięcie ikony hamburger menu odsłania nawigację witryny, czy to poprzez wysuwane menu, menu rozwijane, czy nakładkę na cały ekran. Może to poprawić doświadczenie klienta na urządzeniach mobilnych.
Wady
Choć zaleta oszczędzania miejsca jest niezaprzeczalna, niektórzy twierdzą, że hamburger menu w przeglądarkach na komputerach może utrudniać odnajdywanie opcji. Jeśli użytkownicy nie znają tej ikony, mogą ją całkowicie przeoczyć, pomijając ważne treści witryny lub opcje nawigacji.
Aby temu zaradzić, rozważ wdrożenie szablonów responsywnego designu z różnymi strukturami menu dla różnych urządzeń. Strona może wyświetlać tradycyjny poziomy pasek nawigacji na komputerach, ale przełączać się na hamburger menu na urządzeniach mobilnych, by oszczędzać miejsce na ekranie.
Przykłady z życia: hamburger menu w praktyce
Często zauważysz, że na stronie zastosowano responsywny design, dzięki czemu hamburger menu pojawia się tylko w wersji mobilnej, podczas gdy na komputerze wyświetla się inny styl menu. Poznaj kilka sklepów internetowych, które skutecznie wykorzystują hamburger menu:
TCB Jeans
Źródło: TCB Jeans
TCB Jeans stawia na prostotę, umieszczając standardowy przycisk hamburger menu złożony z trzech kresek w górnej części swojej mobilnej strony. Po kliknięciu z lewej strony wysuwa się lista linków, w tym pozycje Strona główna, Produkty i O nas. Przy linku Produkty widnieje niewielki znak plus, sugerujący, że po dotknięciu pojawi się więcej opcji.
Źródło: TCB Jeans
Strona TCB w wersji na komputer również korzysta z hamburger menu, co pozwala na pełnoekranowe tło ze zdjęciem i eksponowanie zachęcających promocji na pierwszym planie. W wersji mobilnej hamburger menu wsuwa się jako nakładka, dając użytkownikom wizualną wskazówkę, że menu można ukryć, odsłaniając stronę za nim. Projekt hamburger menu TCB jest:
- Przejrzysty. Ściskanie przycisków menu na małym ekranie telefonu to zły pomysł. Lepiej ukryć je w hamburger menu.
- Znajomy. Hamburger jest powszechny na stronach mobilnych, więc dla większości użytkowników nie jest mylący.
- Oddaje główną rolę produktom. Ukrycie menu za przyciskiem hamburger sprawia, że zdjęcia produktów bardziej się wyróżniają, wzmacniając przekaz o oferowanym asortymencie.
Gymshark
Strona Gymshark to świetny przykład tego, jak wersja na komputer może różnić się od wersji zoptymalizowanej pod urządzenia mobilne. Na komputerze nie ma hamburger menu, jednak w wersji mobilnej pojawia się ono w lewym górnym rogu. Po dotknięciu odsłania pole wyszukiwania oraz podmenu z kategoriami produktów. Aby wrócić na stronę główną, wystarczy dotknąć ikony X w prawym górnym rogu.
Źródło: Gymshark
Źródło: Gymshark
Menu hamburger Gymshark sprawdza się doskonale, ponieważ na pierwszym miejscu stawia to, co najważniejsze – najpierw pokazuje promocje i nowe ubrania, by od razu zaangażować użytkownika. Jest też znajome: przycisk menu umieszczono tam, gdzie się go spodziewasz, a poniżej rozwija się prosta i zrozumiała lista.
Wskazówki, jak skutecznie wykorzystać hamburger menu
Właściciele stron korzystający z hamburger menu mogą pamiętać o tych sześciu wskazówkach, by poprawić doświadczenie użytkownika i zwiększyć współczynniki konwersji:
Zadbaj o stałą widoczność
W większości przypadków hamburger menu jest niewielkie. Zadbaj, by nadal było łatwo je dostrzec. Umieść je w lewym lub prawym górnym rogu ekranu, tam, gdzie zwykle kierują wzrok użytkownicy. I zachowaj spójne rozmieszczenie na każdej podstronie witryny.
Trzymaj się standardowej ikony hamburger
W hamburger menu stosuj powszechnie rozpoznawalne trzy równoległe poziome kreski (☰). Ikona ta jest szeroko rozpowszechniona i większość użytkowników od razu rozumie jej przeznaczenie.
Ustal hierarchię pozycji menu
Uporządkuj pozycje menu w logiczny sposób. Możesz dodać pole wyszukiwania, a następnie ułożyć od góry najważniejsze i najczęściej odwiedzane kategorie lub strony.
Zadbaj o obsługę mobilną i dostępność
Twoje menu powinno działać dobrze na wszystkich urządzeniach mobilnych i ekranach dotykowych. Pozycje menu muszą być na tyle duże, by łatwo można było dotknąć ich palcem.
Dodaj animację i reakcje wizualne
Gdy użytkownik wchodzi w interakcję z menu, subtelne efekty dostarczają wizualnych wskazówek. Na przykład kreski mogą się obracać i przekształcać w X lub +, sygnalizując otwarcie i zamknięcie. Kreski mogą zmieniać grubość lub delikatnie się rozszerzać. Efekty rozmycia i przesunięcia dodają głębi w trakcie interakcji. Możesz też zmienić kolor lub sprawić, by po dotknięciu ikona lekko podskoczyła.
Testuj i zbieraj opinie
Zanim ostatecznie ustalisz wygląd swojego hamburger menu, przetestuj je na prawdziwych użytkownikach. Obserwuj, jak z niego korzystają, i zbieraj opinie.
Hamburger menu w połączeniu z innymi narzędziami nawigacji
Czasami najlepszym sposobem na poprawę użyteczności witryny jest łączenie różnych przycisków i menu. Każdy typ ma swoje mocne i słabe strony, ale użyte razem mogą stworzyć płynniejsze i skuteczniejsze doświadczenie użytkownika.
Projektanci stron dla e-commerce mogą stosować kombinacje, które ułatwiają odnajdywanie produktów, zapewniając jasny i bezpośredni dostęp do koszyka oraz procesu finalizacji zakupu. Sprawdź, czy wszystkie elementy nawigacji łatwo dotknąć na ekranach dotykowych. Testuj różne kombinacje, aby zobaczyć, co najlepiej sprawdza się w przypadku twojej grupy docelowej:
- Górna nawigacja plus hamburger. Użyj górnej nawigacji do najważniejszych kategorii i funkcji, takich jak sklep i koszyk, zachowując menu hamburger dla rzadziej używanych elementów nawigacji, jak O nas, Kontakt, Obsługa klienta czy Regulaminy. Dzięki temu główny ekran pozostaje przejrzysty, a mimo to zapewnia szybki dostęp do potrzebnych stron.
- Nawigacja w zakładkach plus hamburger. Użyj nawigacji w zakładkach na stronie kategorii produktów, by filtrować lub sortować produkty według takich opcji, jak Nowości, Bestsellery czy Sortuj według ceny. Pozwala to użytkownikom szybko zawęzić wyszukiwanie produktów po skorzystaniu z menu hamburger do ogólnej nawigacji po witrynie.
- Przyklejony nagłówek plus hamburger. Przyklejony nagłówek zawiera kluczowe skróty do głównych kategorii i pozostaje w górnej części ekranu podczas przewijania. Menu hamburger służyłoby wtedy do stron o mniejszym znaczeniu.
Na przykład strona Fly by Jing wykorzystuje menu hamburger do ogólnych wyborów w menu, ale sama strona sklepu używa menu w zakładkach z czterema opcjami („Sauces", „Sets", „Pantry" i „Merch") do dalszego zawężania.
Źródło: Fly by Jing
FAQ: hamburger menu
Dlaczego nazywa się je hamburger menu?
Termin hamburger menu odnosi się do wizualnego podobieństwa ikony do hamburgera. Składa się ona z trzech poziomych kresek ułożonych jedna na drugiej.
Czym jest hamburger menu na stronie internetowej?
Hamburger menu to prosta ikona, która po kliknięciu lub dotknięciu odsłania menu nawigacyjne strony internetowej lub podstrony.
Jak nazywa się menu z trzema kropkami?
Menu przedstawione jako trzy pionowe kropki nazywa się zwykle menu „więcej opcji”, „pionowym wielokropkiem”, a czasem „kebab menu”.
