Hamburger menu – jak to z nim jest?

Hamburger menu – używać, czy nie używać?

Jak wygląda Hamburger menu?

Jeżeli korzystasz z urządzeń mobilnych to z pewnością spotkałeś się już z tą ikonką. W terminologii projektantów, utarła się nazwa „Hamburger menu”, ze względu na trzy małe poziomie linie, które charakteryzują tę ikonkę i które w jakimś stopniu przypominają hamburgera.
art

Hamburger menu powstało ze względu na konieczność obsługi mniejszych rozdzielczości. Standardowe nawigacje zajmowały zbyt dużo miejsca na urządzeniach mobilnych i strony internetowe czy też aplikacje stawały się nieczytelne.

Zadaniem hamburger menu jest ukrycie zawartości nawigacji i ukazanie jej w momencie kiedy użytkownik kliknie w ikonkę. Z pełną odpowiedzialnością możemy powiedzieć, że hamburger menu obecnie jest wyznacznikiem nowoczesnego web designu. Wielu projektantów stron internetowych ślepo podąża za tym trendem, z reguły nie zastanawiając się nad użytecznością użycia tego menu na danej stronie internetowej.

Narodziny hamburgera

Hamburger menu, znane też jako panel boczny lub menu boczne, zostało zastosowane w jednym z pierwszych graficznych interfejsów użytkownika. W  1981 roku prekursorem internetowego Hamburgera został Norm Cox – tłumaczył, że tworząc ikonkę chciał, aby służyła jako drogowskaz. Jego trzy poziome linie miały przypominać wygląd menu.

Screen-Shot-2014-03-27-at-7.41.30-AM-1024x625

Używać czy nie używać? Na desktopy nie warto.  

Każda strona internetowa powinna spełniać podstawową rolę – przekazywać informacje w nieskomplikowany sposób.  Pamiętasz jak wyglądały pierwsze strony internetowe? Było dużo treści, ale mało oprawy. Treść stanowi szkielet każdej strony internetowej.

Jeżeli posiadamy sklep internetowy to chcemy, aby nasz użytkownik bez problemu mógł przejrzeć asortyment naszego sklepu oraz w szybki i nieskomplikowany sposób przeszedł procedurę zakupu.

Jeżeli prowadzimy bloga,  zależy nam na tym,  aby użytkownik bez większego problemu mógł przejrzeć nasze wpisy i dołączyć do dyskusji. Masz stronę firmową? Pamiętaj, że zależy Ci głównie na tym, aby Klient mógł przejrzeć Twoją ofertę i bez większego problemu trafił do sekcji „Kontakt”.

Hamburger menu w praktyce na desktopie

Wyobraź sobie, że jesteś zwykłym użytkownikiem Internetu, który korzysta z komputera głównie do pracy, czy też rozrywki. Posiadasz rodzinę, mało czasu wolnego i pracę za miastem. Tablet pokazał Ci szwagier na imieninach, a smartfona używasz bo każdy używa, a przy okazji była promocja w Twojej sieci. Pewnego dnia, szef w Twojej pracy dał Ci za zadanie znalezienia nowego dostawcy, ponieważ z poprzednim są problemy. Wpisujesz frazę w Google, klikasz w pierwszy lepszy sponsorowany link i widzisz taki schemat strony. Wiesz, że potrzebujesz dostawcy sprzętu fryzjerskiego dla salonów, które Twoja firma obsługuje. Szukasz firmy, cennika, warunki handlowe i wymagania. W oknie przeglądarki pojawia Ci się model takiej strony. Co rzuca Ci się pierwsze w oczy?

3

Widzisz logo, jakąś dziwną ikonkę, spore zdjęcie którego opis dużo Ci nie mówi i tyle… A gdzie tu jakiś cennik? Oferta?  Dobra… Cofasz się do wyników Google, szukasz dalej. Powołując się na badanie przeprowadzone przez Moovweb, wciąż jest bardzo dużo użytkowników, którzy nie wiedzą co to jest hamburger menu.
Jeżeli koniecznie chcesz skorzystać z hamburger menu, po pierwsze – koniecznie je podpisz.

5

Po drugie, wyróżnij najważniejsze podstrony w Twoim serwisie.

6

Wygląda o wiele przejrzyściej, prawda? Być może gdyby takie menu funkcjonowało, Twoja firma szybko znalazłaby nowego dostawcę.

Zastanów się, czy na pewno potrzebujesz hamburger menu na swojej stronie? Spójrzmy na przykład medialnego giganta.

Case study na podstawie NBC News

W 2014 roku NBC przedstawiło użytkownikom nową wersję swojej strony internetowej. Projektanci podążając za trendami, postanowili wdrożyć również na desktopy hamburger menu.
a
W Internecie nowa wersja strony internetowej NBC ogólnie przyjęła się z dużą aprobatą,  można było przeczytać wiele pozytywnych komentarzy. Niektórzy nawet mówili, że NBC kreuje nowy trend projektowania treści prasowej i prawdopodobnie w tym kierunku będą podążać kolejne serwisy. Był tylko jeden problem. Ludzie nie klikali w „hamburgera” mimo tego, że nawet był podpisany. Designerzy stwierdzili więc, że pomogą użytkownikom i wyjaśnią, w jaki sposób należy korzystać ze strony:

b

Mimo to ludzie wciąż nie klikali w nowe menu. Kolejnym, a zarazem ostatnim krokiem projektantów NBC w celu zwiększenia interakcji użytkowników było wyróżnienie ikony kolorem żółtym.

c
Mimo wszelkich prób i starań z ich strony, nie byli w stanie przezwyciężyć przyzwyczajenia wielu milionów użytkowników. Postanowili więc przeprojektować całą swoją nawigacje w tradycyjny sposób.

d

Nawigacja z powyższego zdjęcia może nie jest trendy wśród projektantów, ale spełnia swoją podstawową rolę – działa oraz przyciąga uwagę użytkowników.

Warto również zauważyć, że w przypadku standardowej nawigacji, użytkownik potrzebuje tylko jednego kliknięcia, aby przejść do danej podstrony, która go interesuje. W przypadku hamburger menu użytkownik musi kliknąć w ikonkę, a następnie w interesująca go podstronę. Może wydawać się to element prozaiczny, ale wyobraź sobie sytuację, kiedy masz na stronie bardzo dużo użytkowników, którzy nie mogą swobodnie jednym kliknięciem przemieszczać się przez zasoby strony? Prawdopodobnie nie będzie im się chciało w kółko klikać w menu i przechodzić do interesujących treści. Może ich to zniechęcić z zakupu czy też z interakcji z Twoją stroną. Jedną z naczelnych zasad UX jest wyeliminowanie jak największej liczby przeszkód pomiędzy użytkownikami a treścią.

Na polskim przykładzie

Kolejny przykład niepotrzebnego wdrożenia hamburger menu, możemy znaleźć chociażby na przykładowej polskiej stronie – Inbook.pl


Komentarz pozostawiamy Państwu.

Zalety Hamburger Menu

Modna strona

Minimalistyczny design zyskuje popularność, hamburger menu doskonale wpasowuje się w ten trend.  Wielu projektantów go używa i wydaje nam się, że ta tendencja będzie się utrzymywać. Z pewnością w oczach odbiorców Twoja strona będzie „na czasie”.

Wysoka konwersja „Call to Action”.

Czyli przycisku, wzywającego użytkownika do podjęcia interakcji, np. Wypełnienia formularza kontaktowego.

Załóżmy, że jesteś właścicielem skupu aut.

Głównie interesują Cię napływające formularze od użytkowników, którzy chcą sprzedać swoje auto.  Po drugiej stronie barykady,  Twoi klienci szukają jedynie podmiotu któremu szybko i bez problemów sprzedadzą swoje auto. Wchodząc  na Twoją stronę internetową użytkownik od razu powinien zauważyć widoczny „call to action”, w postaci np. formularza kontaktowego. Nie musisz koncentrować w tym wypadku uwagi użytkownika na inne (dla Ciebie jak i dla niego) nieistotne elementy, np.. Dlatego w tym przypadku użycie hamburger menu pozwoli Ci zwiększyć stopień konwersji wypełnionych formularzy. Nie negujemy używania hamburger menu na wszystkich stronach internetowych – należy tylko ich używać z głową.

Gdzie nie stosować

Strony kierowane do grupy wiekowej 50+

Według aktualnych badań grupa ta ma największy problem z rozpoznaniem przeznaczenia hamburger menu. Istnieje duże prawdopodobieństwo, że użytkownik z tej grupy demograficznej niestety nie odnajdzie się na Twojej stronie. Jeżeli celujesz w target 50+ Twoja strona powinna posiadać prostą oraz intuicyjną nawigację.

Strony z dynamiczną treścią

Jeżeli siłą Twojej strony są spontanicznie kreowane, ciekawe treści, nie powinny być one ukryte pod płaszczykiem hamburger menu. Mimo swojej atrakcyjności wizualnej, hamburger menu nie jest po to, by przyciągać wzrok. To, co atrakcyjne w Twojej stronie powinno być wyeksponowane „na wierzchu” – klienci nie odkryją czegoś, o czym nawet nie wiedzą, że istnieje.

Podsumowanie

Zapraszamy do dyskusji. Czy według Was są inne okoliczności w których warto używać Hamburger Menu? A może kompletnie się nie zgadzacie i według Was Hamburger menu jest ok?

 

Tags: