Rodzaje nawigacji (ikon menu) mobilnych

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 menumenu 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.

Rodzaje nawigacji mobilnej: menu hamburgerowe, kebab menu, doner i bento

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

Rodzaje niestandardowej nawigacji mobilnej

Na poprawę humoru, żart autora powyższych grafik na temat ikon zastosowanych w menu mobilnym :)

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.

menu hamburgerowe (3 rodzaje: soute, z napisem MENU pod spodem i z ramką)

3 warianty menu hamburgerowego na mobile’a

W testach AB sprawdzono poniższe 4 warianty ikon wykorzystywanych do menu mobilnego:rodzaje menu mobilnego badanego w testach AB

  • 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
Wyniki testu AB rodzajów stosowanych ikon menu mobilnego

Wyniki testu AB rodzajów stosowanych ikon menu mobilnego

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:

The following two tabs change content below.
Od 2005 roku zajmuje się komunikacją internetową i e-marketingiem, pasjonat urządzeń mobilnych i nowoczesnych technologii. Dołącz do moich kręgów na .