Hamburgerowe menu w projektowaniu stron internetowych

Każdy, kto korzysta z Internetu, prawdopodobnie widział dziesiątki przykładów menu hamburgerów w Internecie. Ta prosta, trzyliniowa ikona jest obecnie jednym z najbardziej rozpoznawalnych przycisków. Wiele stron internetowych używa go do ukrywania często solidnych elementów nawigacyjnych i oszczędzania miejsca. Jednak pomimo swojej użyteczności, menu Hamburger w projektowaniu stron internetowych nadal należą do najbardziej dyskusyjnych opcji projektowania stron internetowych . Dla niektórych jest to oryginalne rozwiązanie, które powinno znaleźć się w całości we wszystkich responsywnych projektach. Dla innych jest to niefortunny efekt uboczny, który wynika z błędnej interpretacji praktycznego projektu konstrukcyjnego.

Wprowadzenie do menu Hamburger w projektowaniu stron internetowych

Nie tylko, ale menu hamburgerów zwykle można znaleźć w responsywnych witrynach i aplikacjach, gdy dostosowują się do małych ekranów. Niezależnie od tego, czy znajdują się po lewej, czy po prawej stronie, profesjonalni projektanci i programiści używają hamburgerów, aby zaoszczędzić cenną przestrzeń. Jest to popularne rozwiązanie, ponieważ ukrywają główną nawigację, aby zostawić więcej miejsca na resztę treści . Ale nie wszyscy uważają, że to właściwe rozwiązanie. Wielu twierdzi wręcz przeciwnie.

Aby pomóc Ci lepiej zrozumieć menu hamburgerów, omówimy tutaj:

• Czym są menu hamburgerów?
• Koncepcja menu Hamburger w projektowaniu stron internetowych
• Kontrowersje, które za tym stoją
• Alternatywne wdrożenie
• Ogólne zalety i wady menu Hamburger w projektowaniu stron internetowych

Czym są menu hamburgerów?

Mówiąc najprościej, menu hamburgerów to prosta i mniejsza alternatywa dla dużych pasków nawigacyjnych . Zasadniczo służy jako szuflada, w której możesz umieścić wszystko, od nawigacji, która zaśmieca Twoją witrynę. Menu hamburgerów zazwyczaj wygląda jak trzy linie jedna na drugiej. Nazwa pochodzi od oczywistego podobieństwa do hamburgerów.

Wszystko zaczęło się w 1981 roku. na stacji roboczej Xerox Star. Norm Cox, ówczesny projektant graficznego interfejsu użytkownika, stworzył ikonę otwierającą listę ukrytych elementów. Celem było zapewnienie alternatywnego rozwiązania oszczędzającego miejsce dla długich list opcji . Coś podobnego do koncepcyjnego menu prawego przycisku myszy na komputerach stacjonarnych. Ale aż do 2009 roku menu hamburgerów nie cieszyło się zbytnią sławą. Dopiero gdy Facebook i kilka innych serwisów wprowadziło go ponownie, menu hamburgerowe rozpoczęło swoją podróż. Było to prawie idealne rozwiązanie, aby zaoszczędzić cenne miejsce na ekranie na pojawiających się wówczas urządzeniach mobilnych.

Ale czy to było?

Odwieczny spór o menu hamburgerów

Pierwotnym zamiarem twórcy było stworzenie czegoś prostego, ale skutecznego. Mały przycisk, który zmniejszy bałagan , stosując tę ​​samą zasadę za menu prawym przyciskiem myszy. Miało być podobnie, zapadające w pamięć i łatwe w obsłudze. I tak jest, nawet w obecnej formie, do której nie było pierwotnie przeznaczone.

Jednak nie wszyscy podzielają ten sam entuzjazm, jeśli chodzi o menu hamburgerów . Wielu projektantów krytykuje to, ponieważ ukrywa najważniejszą część nawigacji w witrynie. W związku z tym odwiedzający będą mieli trudności ze znalezieniem go. Zalecają korzystanie z menu Hamburger tylko wtedy, gdy w menu znajduje się więcej niż cztery elementy nawigacyjne. Z drugiej strony twierdzenia te mogą się zmienić w przyszłości, ponieważ większość ludzi już przyzwyczaja się do wyglądu i funkcji menu hamburgerów.

Alternatywne zastosowanie i wdrożenie

Oprócz zasady „czterech elementów” istnieją inne sugestie, jak poprawić użyteczność menu hamburgerów.

• Połącz menu hamburgerów z innymi funkcjami . Na przykład możesz umieścić obok siebie funkcję wyszukiwania i menu hamburgerów.
• Użyj symboli zastępczych o różnych kształtach , obramowaniach i kolorach, aby „hamburger” był bardziej rozpoznawalny.
• Znajdź alternatywne położenie , które niekoniecznie jest jednym z rogów.
• Utwórz pływające menu hamburgerów ze stałą pozycją, gdy odwiedzający zaczną przewijać stronę.

Ideą jest zapewnienie przejrzystego, ale wyróżniającego się projektu, wygodnego dla użytkowników mobilnych, niezależnie od wielkości ekranu ich urządzenia.

Ogólne plusy i minusy menu Hamburger w projektowaniu stron internetowych

Z punktu widzenia UX (user experience) menu hamburgerów może być mieczem obosiecznym. Chociaż może działać w większości sytuacji, w innych może powodować zamieszanie. Aby zrozumieć, kiedy go używać, lepiej sprawdzić wszystkie zalety i wady menu hamburgerów.

Plusy:

• Menu hamburgerów zmniejsza bałagan – działa wtedy, gdy ma to największe znaczenie. Właściwe wykorzystanie przestrzeni może czasami oznaczać wszystko dla witryn i aplikacji mobilnych. Biorąc pod uwagę rozmiar ekranu do Twojej dyspozycji, wszystko, co może zapewnić Ci więcej miejsca, jest dobre. Ponadto zbyt wiele elementów na ekranie może tylko odwrócić uwagę odwiedzających od zwracania uwagi na właściwą treść.
• Ułatwia nawigację — prawie każdy dzisiaj rozumie, do czego służy, gdy widzą menu z hamburgerami. Jesteśmy istotami wizualnymi i łatwo zauważyć ikonę, która wygląda jak trzy poziome linie w kolumnie. Zwłaszcza, jeśli kojarzy nam się z jednym z ulubionych szybkich posiłków. Pomyśl tylko, ile różnych ikon i logo marki znasz pod nazwą.
• Może być świetną opcją, aby nie przeszkadzać drugorzędnemu elementowi nawigacji – nie ma reguły, która mówi, że musisz umieścić całą nawigację w menu hamburgerów. Często jednym z najlepszych rozwiązań jest pozostawienie na stronie głównych elementów nawigacji i umieszczenie wszystkich pozostałych opcji pobocznych w menu hamburgerów. Zasadniczo czerpie to, co najlepsze z obu światów, i nadal służy swojemu celowi.

Cons:

• Ważna nawigacja nie jest widoczna – Kiedy przekształcasz swoją nawigację w menu hamburgerowe, sprawiasz, że jest ona prawie niewidoczna. Kilka badań potwierdza, że ​​zaangażowanie na stronie internetowej może z tego powodu znacznie spaść. Innymi słowy, niektórzy ludzie nie będą dalej klikać, ponieważ nie przyciąga to od razu ich uwagi.
• Nie wszyscy to rozumieją – mniej prawdopodobne, ale wciąż są goście, którzy po raz pierwszy stykają się z menu hamburgerów. Może to wyglądać znajomo, ale niewystarczająco motywujące lub oczywiste, aby zmusić ich do działania. Zostawią go tak, jak jest, ponieważ nie ma innych wskazówek, do czego jest używany. To się zmienia, ale czasami może być nieintuicyjne. Zwłaszcza, gdy projektanci wykorzystują zbyt dużo swobody i czynią ją całkowicie abstrakcyjną. Albo sam „hamburger” nie wyróżnia się wystarczająco wizualnie.
• Korzystanie z menu hamburgerów wymaga dodatkowego „wysiłku” – może to zabrzmieć głupio, ale technicznie menu hamburgerów zajmuje kilka kroków więcej niż typowa nawigacja. Nie mówiąc już o tym, że nie każdy może dosięgnąć go kciukiem trzymając telefon w jednej ręce.

Niezależnie od twojej subiektywnej opinii, nigdy nie zapomnij zastanowić się, jaka jest najlepsza opcja dla twoich użytkowników. Możesz lubić menu z hamburgerami, ale nadal nie korzystasz z nich, jeśli okoliczności nie wyglądają na odpowiednie. Możesz też całkowicie go nienawidzić, ale może to być najlepsze rozwiązanie dla Twojej witryny lub aplikacji. Pamiętaj, że właściwe zastosowanie hamburger manus w projektowaniu stron internetowych może być sytuacyjne i różnić się w zależności od przypadku . Aby sprawdzić, czy to dla Ciebie, przeprowadź kilka testów A/B i zobacz, co myślą o tym Twoi odbiorcy.