Hamburger menu w interfejsach desktopowych

Czym jest hamburger menu?

Hamburger menu to powszechny element projektowy używany w interfejsach użytkownika, zwykle spotykany – jak wspomniałam – w aplikacjach mobilnych. Nazwa pochodzi od trzech poziomych linii, które przypominają składniki hamburgera, ułożone jeden na drugim.

Kiedy użytkownicy klikają lub dotykają ikony menu hamburgera, zazwyczaj pojawia się menu nawigacyjne lub lista opcji. Tego typu menu jest często stosowane w celu zaoszczędzenia miejsca na ekranie, szczególnie na mniejszych urządzeniach.

Chociaż menu tego typu jest już powszechnie stosowane, do teraz jest przedmiotem debaty w społeczności projektantów. Niektórzy twierdzą, że może ono poprawić doświadczenia użytkownika poprzez uporządkowanie interfejsu. Ich oponenci z kolei wyrażają obawy dotyczące intuicyjności użytkowania, szczególnie na ekranach komputerów, gdzie przestrzeń ekranu nie jest tak ograniczona.

Minusy hamburger menu w nawigacji desktopowej

Mimo, że menu hamburgerowe cieszy się dużą popularnością w projektowaniu UI, zwłaszcza na urządzeniach mobilnych, jego zastosowanie w nawigacji desktopowej wiąże się z pewnymi wadami. Poniżej opiszę kilka z nich.

Ukryta nawigacja

W najbardziej typowej nawigacji desktopowej podstrony są prezentowane w poziomym pasku u góry strony. Takie menu umożliwia użytkownikom natychmiastowe zlokalizowanie interesujących ich informacji. Z kolei menu hamburgerowe ukrywa opcje nawigacyjne, sprawiając, że dla użytkowników staje się mniej oczywiste, gdzie powinni kliknąć, aby znaleźć potrzebne informacje.

Dla użytkowników, którzy nie korzystają na co dzień z aplikacji mobilnych, ikona trzech pasków może nie być zrozumiała jako oznaczenie menu i przycisk, w który należy kliknąć.

Inną kwestią jest fakt, że ekrany komputerów mają więcej przestrzeni w porównaniu do urządzeń mobilnych, więc pojawia się pytanie jaki jest sens zastosowania menu hamburgerowego i zmniejszania widoczności opcji. Ukrycie nawigacji za ikoną może spowodować bowiem, że użytkownicy przegapią ważne podstrony. Istnieje też ryzyko, że użytkownicy nie odkryją pełnej oferty witryny i będą wchodzić w interakcje tylko z widocznymi treściami. Bardzo ciekawy artykuł o hamburger menu znajdziecie na stronie NN group po adresem www.nngroup.com/articles/hamburger-menus/.

Zmniejszona skuteczność kliknięć

Porównajmy znowu typowe menu nawigacyjne i hamburgerowe. W przypadku tego pierwszego, wystarczy, że użytkownik kliknie tylko jeden raz w przycisk prowadzący do interesującej go podstrony. W przypadku menu hamburgerowego, użytkownik musi najpierw kliknąć w ikonę hamburgera, a następnie odszukać podstronę i kliknąć ponownie. Biorąc pod uwagę przyzwyczajenia dzisiejszych użytkowników, taka interakcja może być źródłem frustracji i zniecierpliwienia.

Obawy związane z dostępnością

Dostępność stron internetowych jest nieodłączną częścią projektowania UX. W tym kontekście pojawia się pytanie, czy menu hamburgerowe w nawigacji desktopowej jest dostosowane do potrzeb użytkowników z niepełnosprawnościami. Na przykład czytniki ekranu powszechnie używane przez osoby z ograniczeniami wzroku, mogą mieć trudności z identyfikacją i komunikowaniem ukrytych elementów nawigacyjnych za ikoną hamburgera. To z kolei prowadzi do braku informacji na temat dostępnych opcji, utrudniając użytkownikowi efektywne poruszanie się po witrynie. Projektanci muszą rozważyć alternatywne metody lub zapewnić wyraźne wskazówki, aby zapewnić komplet informacji dla wszystkich użytkowników.

Niespójność z przyjętymi konwencjami desktopowymi

W tym miejscu kłania się nam prawo Jakoba, czyli zasada mówiąca o tym, że użytkownicy więcej czasu spędzają na innych stronach niż na Twojej. Oznacza to, że użytkownicy wolą, aby Twoja witryna działała w taki sam sposób, jak inne, które znają.

W przypadku projektowania nawigacji desktopowej, standardowym rozwiązaniem jest poziomy pasek w górnej części strony, o którym wspomniałam wcześniej. Hamburger menu odbiega więc od tej konwencji. W efekcie, niektórzy użytkownicy mogą je przeoczyć, ponieważ jest dla nich nieintuicyjne lub niezrozumiałe. To z kolei może prowadzić do spadku użyteczności. Więcej o użyteczności i zasadach UX przeczytacie w artykule Zasady projektowania stron internetowych – wytyczne UX tworzenia stron.

pobierz pdf

Kiedy warto zastosować menu hamburgerowe w nawigacji desktopowej

Istnieją przypadki, kiedy korzystanie z menu hamburgerowego w nawigacji desktopowej może być dobrym pomysłem. Ważne jest, aby dokładnie przebadać kontekst i użytkownika. Poniżej znajdziesz kilka przykładów, gdzie użycie hamburger menu może mieć sens.

Ograniczona przestrzeń ekranu

W przypadkach, kiedy mamy do czynienia ze znaczną ilością treści i ograniczoną przestrzenią ekranu na pulpicie, hamburger menu może pomóc w utrzymaniu czystego i zorganizowanego layoutu, zapobiegając wizualnemu bałaganowi.

Minimalizm i zgodność z trendami w projektowaniu

W przypadkach, w których priorytetem jest podążanie za współczesnymi trendami projektowymi lub gdzie wygląd ma być minimalistyczny, zastosowanie menu ukrytego pod ikoną może być trafne. Czynnikiem, który należy wziąć pod uwagę jest grupa docelowa. Jeśli docelowi odbiorcy są przyzwyczajeni do charakterystycznej ikony i jej funkcjonalności, zwłaszcza jeśli często korzystają z urządzeń mobilnych, wdrożenie jej na desktopie może być zgodne z oczekiwaniami i nawykami użytkowników.

Bardzo rozbudowana nawigacja

W przypadku projektowania bardzo rozbudowanej nawigacji, w której dostępnych jest wiele funkcji, zasadne staje się zastosowanie menu hamburgera. Głównym celem powinno być utrzymanie przejrzystego i zorganizowanego interfejsu głównego. Taki efekt można uzyskać poprzez umieszczenie rzadziej używanych lub mniej ważnych opcji za ikoną.

W ten sposób menu główne może skupić się na podkreślaniu najważniejszych funkcji. Ta decyzja projektowa zapewni, że użytkownicy otrzymają uporządkowany widok, bez natłoku wizualnego,  umożliwiający łatwe lokalizowanie oraz interakcję z kluczowymi funkcjami.

Hamburger menu w tym kontekście posłuży jako kontener dla drugorzędnych elementów nawigacyjnych lub mniej widocznych treści i narzędzi.

Mobile First Design

Mobile First Design, czyli podejście, w którym priorytetem jest projektowanie i optymalizacja doświadczenia użytkownika na urządzeniach mobilnych przed rozszerzeniem go na większe ekrany. Jeśli strona została zaprojektowana w tym duchu, menu hamburgerowe może być spójnym elementem projektu na różnych urządzeniach. Ułatwi to utrzymanie jednolitego doświadczenia użytkownika.

Najlepsze praktyki dla hamburger menu na komputery stacjonarne

Jeżeli planujesz zastosować menu hamburgerowe w projekcie interfejsu na desktop, warto pamiętać o zastosowaniu najlepszych praktyk. Poniżej znajdziesz kilka zaleceń projektowych.

Strategiczne rozmieszczenie

Menu hamburgerowe powinno być umieszczone w charakterystycznym miejscu, takim jak lewy górny lub prawy górny róg ekranu. Biorąc pod uwagę powszechne konwencje projektowe, użytkownicy oczekują, że elementy nawigacyjne będą znajdować się w tych obszarach.

Wyraźne ikony i etykiety

Upewnij się, że ikona hamburgera nie odbiega od standardowo używanej ikony, która jest łatwo rozpoznawalna. Możesz rozważyć dodanie etykiety przy ikonie, wskazując jej funkcję, np. napis „Menu”. Może to pomóc użytkownikom, zwłaszcza tym niezaznajomionym z symbolem, w zrozumieniu jego funkcji.

Testy z użytkownikami

Zawsze warto przeprowadzić badania użyteczności z docelowymi odbiorcami, aby zebrać opinie na temat skuteczności nie tylko zastosowanego typu menu, ale także całego projektu. Dzięki temu dowiesz się, w jaki sposób użytkownicy wchodzą w interakcję i czy zastosowane rozwiązania są zrozumiałe dla odbiorców.

Podsumowanie

Mimo kontrowersji wokół użycia nawigacji desktopowej w formie hamburger menu, istnieją przypadki, w których jego zastosowanie jest uzasadnione. Użycie tego typu menu na desktopach wymaga starannej analizy kontekstu projektu, z uwzględnieniem jego celów oraz oczekiwań grupy docelowej. Jest to bowiem rozwiązanie projektowe, które przy odpowiednim dostosowaniu, może przyczynić się do poprawy przejrzystości i efektywności interfejsu.