5 inteligentnych alternatyw dla menu hamburgera
Przestrzeń ekranu jest cennym zasobem na urządzeniach mobilnych. Aby sprostać wyzwaniom związanym z małą przestrzenią ekranu, a jednocześnie zapewnić dostęp do nawigacji, projektanci często polegają na ukrywaniu nawigacji za ikoną hamburgera, doskonałym przykładem ukrytej nawigacji. W tym artykule zobaczymy, dlaczego ukryta nawigacja tworzy zły UX i jakie alternatywy są dostępne dla projektantów.
Dlaczego menu hamburgera jest złe dla UX
Na urządzeniach mobilnych widoczna nawigacja jest używana 1,5 raza więcej niż hamburger
Jeśli pracujesz nad produktami cyfrowymi, prawdopodobnie już przeczytałeś kilkadziesiąt artykułów opisujących, w jaki sposób menu hamburgerów na komórkach rani metryki UX. Główną wadą jest niska wykrywalność, która jest poparta rzeczywistymi liczbami. W badaniach jakościowych Znaleziono NNGroup że ukryta nawigacja jest mniej wykrywalna niż widoczna lub częściowo widoczna nawigacja. Oznacza to, że gdy nawigacja jest ukryta, użytkownicy rzadziej korzystają z nawigacji. Menu z hamburgerem prowadzi zaangażowanie, spowalnia eksplorację i wprowadza ludzi w błąd.
Więc co powinniśmy użyć?
Chociaż nie ma sztywnych reguł dla aplikacji mobilnych i stron internetowych, zaleca się użycie widocznego elementu - główne opcje nawigacji są widoczne w widocznym pasku nawigacji lub w combo nawigacji , gdzie widoczne są niektóre główne opcje nawigacji a niektóre są ukryte pod interaktywnym elementem.
1. Pasek kart
Jeśli masz ograniczoną liczbę miejsc docelowych najwyższego poziomu w swojej witrynie lub aplikacji, rozwiązaniem może być nawigacja z kartami. Gdy menu jest widoczne u góry lub u dołu, w zasadzie reklamuje się, że nawigacja jest dostępna, a ludzie od samego początku widzą opcje nawigacji.
Tabulatory wydają się być najprostszym wzorcem nawigacyjnym. Podczas projektowania tego typu nawigacji należy jednak wziąć pod uwagę kilka rzeczy:
- Pasek zakładek pozwala wyświetlić 5 lub mniej opcji nawigacji.
- Jedna z opcji powinna być zawsze aktywna i powinna być podświetlona wizualnie, na przykład za pomocą kontrastującego koloru.
- Pierwsza zakładka musi być stroną główną, a kolejność kart powinna odnosić się do ich priorytetu lub logicznej kolejności w przepływie użytkownika.
- Lepiej używać ikon wraz z etykietami dla każdej opcji nawigacji. Ikony bez etykiet działają tylko dla typowych działań, takich jak ikona lupy do wyszukiwania oraz dla interfejsów, z których często korzystają użytkownicy (np. Instagram).
Wskazówka: aby zaoszczędzić miejsce na ekranie, pasek nawigacji może być ukryty / odsłonięty podczas przewijania w dół iw górę.
2. Pasek zakładek z opcją "Więcej"
Jeśli masz więcej niż 5 miejsc docelowych najwyższego poziomu, praktycznym rozwiązaniem może być wyświetlenie 4 priorytetowych sekcji i mieć 5 element jako listę pozostałych opcji.
Zasady projektowania tego rozwiązania są zasadniczo takie same jak w przypadku paska kart. Jest tylko jeden wyjątek: ostatni element to element "więcej".
Element "więcej" może działać jako menu rozwijane, a nawet link do oddzielnej strony nawigacyjnej z pozostałymi sekcjami. Już na pierwszy rzut oka to rozwiązanie nie jest lepsze niż menu hamburgerów, ponieważ ukrywa również zawartość, a jego etykieta nie mówi zbyt wiele o tym, co kryje się za tym. Jeśli jednak odpowiednio ustawisz priorytety opcji nawigacji, większość użytkowników będzie mieć stale 4 lub 5 widocznych opcji nawigacji o najwyższym priorytecie na ekranie, dzięki czemu poprawi się ich nawigacja.
3. Stopniowe zamykanie menu
Stopniowe zwijanie menu, zwane również wzorcem "Priorytet +", to menu, które dostosowuje się do szerokości ekranu. Pokazuje jak najwięcej nawigacji i umieszcza wszystko inne pod przyciskiem "więcej". Zasadniczo ten wzorzec jest wyrafinowaną wersją nawigacji "Pasek kart + więcej", w której liczba opcji nawigacji ukrytych za menu "więcej" zależy od dostępnego miejsca na ekranie. Elastyczność tego rozwiązania zapewnia lepsze wrażenia użytkownika niż "statyczny" pasek kart + więcej.
4. Przewijana nawigacja
Podobnie jak w poprzednich dwóch wzorcach, jest to inne podejście do dłuższych list. Jeśli masz wiele opcji nawigacji bez dużego rozróżnienia priorytetów, na przykład gatunków muzycznych, możesz wyświetlić listę wszystkich przedmiotów w przewijanym widoku. Poprzez przewijanie listy możesz pozwolić użytkownikom przejść z boku na bok.
Wadą tego rozwiązania jest to, że wciąż tylko kilka pierwszych elementów jest widocznych bez przewijania, a wszystkie pozostałe są poza zasięgiem wzroku. Jest to jednak akceptowalne rozwiązanie, gdy użytkownicy powinni zapoznać się z treścią, na przykład kategoriami wiadomości, kategoriami muzyki lub sklepem internetowym.
5. Nawigacja pełnoekranowa
Podczas gdy z innymi wzorami wspomnianymi w tym artykule, zmaganiem jest zminimalizowanie przestrzeni, którą zajmują systemy nawigacyjne, wzorzec pełnoekranowy przyjmuje odwrotne podejście. Takie podejście zazwyczaj poświęca stronę główną wyłącznie nawigacji. Użytkownicy stopniowo naciskają lub przesuwają, aby wyświetlić dodatkowe opcje menu podczas przewijania w górę iw dół.
Ten schemat działa dobrze w opartych na zadaniach i kierunkach witrynach i aplikacjach, zwłaszcza gdy użytkownicy mają tendencję do ograniczania się tylko do jednej gałęzi hierarchii nawigacji podczas jednej sesji. Przekazywanie użytkowników z obszernych stron przeglądowych do szczegółowych pomaga im odnaleźć to, czego szukają i skupić się na treściach w poszczególnych sekcjach.
Nawigacja pełnoekranowa w Yelp
Korzystając z nawigacji pełnoekranowej, projektanci mogą porządkować duże ilości informacji i ujawniać informacje bez przytłaczania użytkownika. Gdy użytkownik podejmie decyzję o tym, gdzie iść, możesz poświęcić całe miejsce na ekranie treści.
Wniosek
Dzięki wzorcom nawigacji na urządzeniach mobilnych nie ma jednego uniwersalnego rozwiązania; zawsze zależy to od twojego produktu, od użytkowników i od kontekstu. Podstawą każdej dobrze zaprojektowanej nawigacji jest jednak architektura informacji: przejrzysta struktura, priorytety i etykiety oparte na potrzebach użytkowników. Pomaganie użytkownikom w nawigacji powinno być najwyższym priorytetem dla każdego projektanta aplikacji. Zarówno początkujący, jak i powracający użytkownicy powinni mieć możliwość łatwego znalezienia sposobu na poruszanie się po aplikacji.