[karolkamyk]

Cześć mireczki! Chciałbym poznać wasze zdanie na temat interfejsów na urządzeniach mobilnych. Jeśli korzystacie z przeglądarki internetowej na swoim smartphonie bądź tablecie, to na pewno natknęliście się na symbol „Hamburger menu” (patrz u dołu strony). Zazwyczaj wygląda to tak, że właściwe menu strony wyświetla się wam po kliknięciu w ikonkę hamburgera. Przeprowadziłem drobne badanie i jest on wykorzystywany na ponad 70% najpopularniejszych stron w Polsce (w wersji mobilnej).

Czy to znaczy, że jest to rozwiązanie najlepsze i pozbawione błędów? Moim zdaniem nie. Jest to rozwiązanie najłatwiejsze do zaimplementowania, ale nie najlepsze z punktu widzenia użytkownika. Pozwólcie, że wytłumaczę dlaczego tak uważam. Posłużę się tu przykładem z pewnego artykułu na ten temat (źródło w komentarzu).

Wyobraźcie sobie, że jedziecie autostradą i chcecie się dostać na lotnisko. Nawet jeśli skupiacie się na innych użytkownikach drogi, to i tak (świadomie, bądź nie) zauważycie znak mówiący wam o zjeździe na lotnisko. Teraz wyobraźcie sobie, że na drodze nie ma żadnych znaków. Mamy nowoczesną technologię, która wyświetla znaki na przedniej szybie. W celu wyświetlenia znaków musicie nacisnąć przycisk na kierownicy, przejrzeć znaki, a następnie wyłączyć ich widoczność (znaki zasłaniają widok na drogę).

Widzicie analogię? Wg mnie ukrywanie nawigacji jest złym pomysłem samym w sobie. Wiem, nie da się zmieścić całej nawigacji rozbudowanego serwisu na małym ekranie smartphona. Jednak może da się przebudować nawigację w taki sposób, aby dawała np. możliwość dojścia do celu małymi krokami. Dać użytkownikowi jakiś punkt zaczepienia zamiast suchej ikonki z trzech poziomych pasków.

No dobrze, ale ktoś zapyta: skoro to takie złe rozwiązanie to dlaczego tak wiele stron z tego korzysta? Przede wszystkim dlatego, że jest to proste rozwiązanie. Coś jednak zaczyna się zmieniać. Pamiętacie badanie o którym pisałem na początku? Otóż przeprowadziłem podobne dla najpopularniejszych stron świata i spośród nich już tylko około 50% korzysta z tego rodzaju nawigacji. Część korzysta z hamburgera już tylko jako nawigacji pobocznej, zastępując nawigację główną innymi rozwiązaniami.

No ok, ale jakie są alternatywy? Na potrzeby swojej pracy magisterskiej stworzyłem aplikację do badania interfejsów graficznych na urządzeniach mobilnych. Stworzyłem tam 4 interfejsy dla jednego serwisu. Trzy z nich to interfejsy występujące najczęściej, czwarty to moja autorska propozycja. Żaden z nich nie jest idealny, każdy ma jakieś wady i zalety. Chciałbym poprosić was o opinie na ich temat. Poniżej załączam link do mojego badania. Całość nie powinna potrwać więcej niż 5 min.
Będę wdzięczny za poświęcony czas i opinię.

Link do badania -> http://www.badanieui.pl

#programowanie #webdev #ux #uxdesign #frontend #design

[karolkamyk]

https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/

[ptasigryp]

@karolkamyk: gotowe mireczku

[lol2x]

@karolkamyk: done, 2 minutki całość :) fajnie zrealizowane :)

[bi-tek]

Proszę

[graf_zero]

Spoko zajawka. Zaintrygowałeś. Nawet specjalnie telefon odpaliłem zeby zobaczyć.

[mesrs123]

@karolkamyk: Bottom bar bardzo fajne rozwiązanie

[WlosyNaMydle]

@karolkamyk: nie dział mi przycisk start ( ͡° ʖ̯ ͡°) nic się nie dzieje :/ Xperia M2

[karolkamyk]

@WlosyNaMydle: Wybrałeś coś w pytaniu o telefon / tablet i ręka prawa / lewa?

[WlosyNaMydle]

@karolkamyk: myślałem że to później :D

[WlosyNaMydle]

@karolkamyk: Zrobione, w 2 kompletnie nie mogłem się odnaleźć, wydaje mi się że bidon był umieszczony trochę w złym miejscu ale samo poruszanie nie takie złe tylko że powinno być osobne pole do np akcesoria bo pierwsze co to bidonu szukałem w rowerze a nie w siłowni

[Wynoszony]

@karolkamyk: Bottom bar fajny, Wachlarz też jeśli nie mamy dużej ilości podkategorii :)

[ppawel]

@karolkamyk: fajna sprawa, podzielisz się potem wynikami co tam wyklikaliśmy? ( ͡° ͜ʖ ͡°)

[katalizat0r]

@karolkamyk: świetne badanie. Podziel się potem wynikami proszę.

[raider87]

@karolkamyk: fajne :D czekam na wyniki bo sam teraz jestem ciekawy.

[peszmerd]

Wyobraźcie sobie, że jedziecie autostradą i chcecie się dostać na lotnisko. Nawet jeśli skupiacie się na innych użytkownikach drogi, to i tak (świadomie, bądź nie) zauważycie znak mówiący wam o zjeździe na lotnisko. Teraz wyobraźcie sobie, że na drodze nie ma żadnych znaków. Mamy nowoczesną technologię, która wyświetla znaki na przedniej szybie. W celu wyświetlenia znaków musicie nacisnąć przycisk na kierownicy, przejrzeć znaki, a następnie wyłączyć ich widoczność (znaki zasłaniają widok na

[wietnam67]

@karolkamyk: hamburger jest w tym momencie najlepszy z kilku powodów. Po pierwsze: każdy kojarzy ikonkę i wie co tam się kryje. Po drugie, na większości stron czy aplikacji menu umieszczone jest w tym samym miejscu, więc nikt go nie szuka (co miało miejsce w przypadku bottom menu z Twojego testu). Generalnie nie jest to najlepsze rozwiązanie, ale problem polega na tym, że większość je zna i będzie ciężki się przestawić

[katalizat0r]

@peszmerd: @wietnam67: @karolkamyk

Moim zdaniem obecnie najlepszym rozwiązaniem jest button z napisem "Menu". Patrz np. mobilna strona smashing magazine.

[wietnam67]

@katalizat0r: ale to nadal to samo, zmienia się ikona na napis. Mechanika zostaje ta sama, a właśnie w niej tkwi problem. Nie wiem czy są jakieś statystyki, ale chętnie bym zobaczył jak reagują ludzie na stronę gdzie mają ikonkę hamburgera i napis menu. Czy jest jakaś różnica, czy jest to dla użytkowników obojętne. Mi się wydaje, że jednak nie ma to znaczenia.

[Wapniak]

@karolkamyk: największego co mi tam brakowało, to wyszukiwarki. Nie wchodzę po to z komórki, by grzebać się po działach i wszystko przeglądać - tylko po to by coś szybko kupić. Chcę kupić traktor, wpisuję jego nazwę i jestem, bez zbędnego klikania po menu. Więc to badanie dla mnie nie ma sensu, gdy decydujesz co konkretnie mam kupić. Gdybyś napisał, kup jakieś niebiesku męskie buty, to by było o wiele lepsze

[katalizat0r]

@wietnam67:
tak na szybko artykuł. Co prawda nie uwzględnia opcji buttona "menu" ale kilka ciekawych rozwiązań jest.
https://medium.com/@kollinz/hamburger-menu-alternatives-for-mobile-navigation-a3a3beb555b8#.1i5w44xeq