Co oznacza menu hamburgerowe, kebab menu czy w końcu bentō menu? Sprawdź warianty stosowanych nawigacji (menu) na stronach i aplikacjach mobilnych.
Projektowanie stron internetowych nie jest już tym samym projektowaniem, co zaledwie kilka lat temu. Obecnie koniecznością jest strona responsywna, wykonana w RWD, czyli taka, która dostosowuje się do urządzenia, na którym jest wyświetlana.
Zobacz także: Co to jest RWD?
Minęły czasy, kiedy wystarczyło zaprojektować ładny layout w Photoshopie, potem go pociąć i wstawić na serwer. Obecnie projektanci są także webmasterami, nie rzadko programistami – dobry projektant stron internetowych posiada obie te umiejętności. Zaprojektowanie strony lub aplikacji to nie tylko zrobienie ładnego layoutu, ale wiedza między innymi z zakresu użyteczności, SEO i połączenia ze sobą dostępnych technologii. Nie będę pisał o tym, co jeszcze potrzebne jest do stworzenia dobrego projektu, bo chciałem skupić się na na czym innym: jaki rodzaj nawigacji mobilnej (menu mobilnego) najlepszy jest dla projektu strony lub aplikacji mobilnej?
Jak wiesz strona, która jest przyjazna mobile’owi i użytkownikowi smartfona lub tabletu, jest też lubiana przez Google’a i automatycznie zyskuje lepsze pozycje w wyszukiwarce, dlatego warto zatroszczyć się o to, żeby od samego początku została przygotowana zgodnie z panującymi trendami i konwencjami.
Zobacz także:
Czy menu hamburgerowe jest najlepszym wyborem nawigacji mobilnej?
Skupmy się na nawigacji i sprawdźmy, który rodzaj nawigacji na mobile’a jest najlepszym wyborem?
Wśród różnych wariantów nawigacji mobilnej można wyróżnić jej podstawowe rodzaje:
- hamburger menu – menu hamburgerowe (wersja w ramce AKA „sandwitch” – menu kanapkowe) – to trzy poziome, równolegle ułożone kreski
- kebab menu – menu typu kebab, czyli trzy pionowe kulki w jednej linii
- döner menu – wzięło nazwę od kształtu obracającego się mięsa na kababa, ta ikona nawigacji składa się z trzech wycentrowanych, poziomych kresek, z których najwyższa jest najdłuższa
- bentō menu – nawigacja przypominające bok kostki Rubika, lub rodzaj posiłku z kuchni japońskiej podawany na podzielonej na kwadraty tacy – ta forma ikony składa się z 9 kwadratów ułożonych w kwadrat 3×3
- meatballs menu – menu typu kulki mięsne, po polsku można nazwać menu klopsikowe (sic!)
- double hamburger menu – podwójne menu hamburgerowe, z prawej i lewej strony (rzadko stosowane)
Luke Wroblewski (Product Director w Google, jest międzynarodowym liderem produktów cyfrowych, który zaprojektował oprogramowanie wykorzystywane przez ponad miliard ludzi na całym świecie) jest także autorem bloga LukeW Ideation + Design, zamieścił ciekawą grafikę, dzięki której z łatwością zapamiętacie i rozpoznacie powyższe rodzaje nawigacji (menu) mobilnej.
Jeżeli w swojej aplikacji lub na stronie mobilnej masz do czynienia z listą pozycji wyboru (kilka podmenu), dobrym wyborem powinien być rodzaj menu hamburgerowego.
Niestandardowe rodzaje nawigacji mobilnej
W projektowaniu nawigacji sprawdzi się zasada prostoty – najlepiej zrobić je najprościej jak się da, aby użytkownicy nie musieli się głowić w co tapnąć, żeby poruszać się po Twojej stronie lub aplikacji mobilnej. Jednak w mobile’u spotkać można także niestandardowe rodzaje nawigacji, które nazwać można posługując się potrawami typu fast food.
- stacked burger menu – stos dwóch menu hamburgerowych ułożonych w dwóch blokach jedno pod drugim (np. na stronie mobilnej MashableUK)
- frites menu – menu frytkowe, to różnej długości, równolegle ułożone linie i wyrównane do lewej (np. flipkart)
- back burger menu – menu hamburgerowe ze strzałką skierowane w lewą stronę, sugerujące powrót
- brochette menu – menu szaszłykowe, składające się z trzech równych, równolegle ułożonych kresek i kropek – połączenie menu hamburgerowego i menu typu kebab
Na poprawę humoru, żart autora powyższych grafik na temat ikon zastosowanych w menu mobilnym :)
menu menu icon. pic.twitter.com/ad2Ep3Agf2
— Luke Wroblewski (@LukeW) June 26, 2015
Serwis Exis przeprowadził badanie ikon stosowanych w nawigacji mobilnej, dodając na przykład do menu hamburgerowego dodatkowe, bardzo subtelne elementy, jak ramka lub napis menu.
W testach AB sprawdzono poniższe 4 warianty ikon wykorzystywanych do menu mobilnego:
- obramowany napis MENU
- obramowane menu hamburgerowe z napisem MENU po prawej stronie
- klasyczne menu hamburgerowe w ramce
- sam napis MENU bez obramowania
Najważniejsze wyniki testów AB nawigacji mobilnej:
- sam napis MENU był bardzo rzadko klikalny – nie dziwi więc fakt, że nie jest stosowany w aplikacjach i projektach stron mobilnych
- napis MENU w ramce był najcześciej klikany, ale tuż za nim była ikona z obramowaną formą hamburgerową i napisem MENU oraz sama ikona menu hamburgerowego w ramce
Co ciekawe, zauważono także użytkownicy systemu iOS od 2-3 razy częściej używają ikon menu niż użytkownicy systemu Android!
Pomimo, że na podstawie tego testu AB wynika, że płaska ikona menu hamburgerowego może nie być idealnym rozwiązaniem nawigacyjnym w mobile’u (wyniki dotyczą aplikacji mobilnej nie internetowej strony mobilnej), to i tak jest najczęściej i najchętniej wykorzystywaną obecnie formą, która rozpoznawana jest bez problemu przez każdego smartfonowca :)
Wynik testu nie oznacza, że użytkownicy nie rozumieją ikony menu hamburgerowego (lub kanapkowego), można przypuszczać, że słowo MENU może przyciągać większą uwagę.
Jeszcze w zeszłym roku Nielsen Norman Group pisało, na podstawie swoich badań, że użytkownicy są bardzo oswojeni z ikoną lupy (wyszukiwania), ale nowsze ikony (np. składające się z 3 linii lub ikona pinezki w mapach) jest wciąż dla wielu nieznana.
Zobacz także przykłady nieprawidłowego użycia ikon w nawigacji mobilnej: Icon Usability
Zachęcam także do zapoznania się z poniższymi artykułami na temat rodzajów menu na mobile’a i wyników testów AB nawigacji mobilnej.
źródła:
- Red Team Design – Web design is not just web design anymore,
- autor grafik Luke Wroblewski @lukew,
- ExisWeb – Mobile Menu AB Tested: Hamburger Not the Best Choice? oraz Hamburger vs Menu: The Final AB Test,
- Nielsen Norman Group – The Magnifying-Glass Icon in Search Design: Pros and Cons
- Jakob Nielsen – Banish the Hamburger Menu, Adopt Pizza Menus
Od 2005 roku zajmuję się komunikacją internetową i e-marketingiem, jestem pasjonatem urządzeń mobilnych oraz nowych technologii – i nie waham się ich używać.