Najlepsze praktyki w zakresie wielopoziomowego projektowania menu

Nawigacja i znajdowanie są głównymi aspektami projektowania doświadczeń użytkownika. Jeśli użytkownicy nie mogą dostać się tam, gdzie chcą lub znaleźć to, czego potrzebują, będą sfrustrowani i mogą zdecydować się na szukanie gdzie indziej. W witrynach o szczególnie złożonej architekturze informacji wielopoziomowe menu są skutecznym sposobem na poprawę nawigacji i znajdowania, oferując w ten sposób wydajne doświadczenia internetowe, które promują zaufanie do produktu i zwiększają konwersje.

Ponieważ produkty i urządzenia, na których są używane, różnią się znacznie, nie ma jednego uniwersalnego rozwiązania, które zapewni idealne, wielopoziomowe menu. Istnieją jednak ogólne zasady, które pomogą Ci zbudować wielopoziomowe menu, które usprawnią nawigację i wyszukiwanie na dowolnym rozmiarze ekranu.

Wskazówki dotyczące projektowania dla dowolnego rozmiaru ekranu

Dobre, wielopoziomowe menu powinno szybko prowadzić użytkowników tam, gdzie muszą, prezentując informacje w jasny, intuicyjny sposób. Zanim przejdziemy do wytycznych dotyczących konkretnych rozmiarów, przyjrzyjmy się kilku praktykom, które mają zastosowanie do wszystkich menu.

Używaj nie więcej niż dwóch poziomów podmenu. Dowolne więcej niż dwa poziomy podmenu prawdopodobnie dezorientują i przytłaczają użytkowników. Utrzymywanie stosunkowo płaskiej nawigacji poprawia wyszukiwalność dla użytkowników i zmniejsza obciążenie poznawcze potrzebne do zapamiętania, gdzie się znajdują. Jeśli struktura strony witryny jest głęboka, rozważ dodanie lokalnego menu nawigacyjnego u góry blisko powiązanych stron. Na przykład firma Zoho, która projektuje złożone produkty wspierające biznes, umieściła menu lokalne specyficzne dla danego produktu na górze każdej strony produktu, tuż pod menu głównym. Podczas gdy menu główne na górze zawiera listę podstawowych ofert Zoho, menu lokalne zapewniają dostęp do stron z bardziej szczegółowymi informacjami, takimi jak przypadki użycia i ceny.

Oznacz podmenu ikonami. Zarządzaj oczekiwaniami użytkowników, zawsze jasno określając, kiedy są dostępne podmenu. Znane opcje obejmują małą ikonę kąta w dół lub ikonę trójkąta. Rozważ także odwracanie ikon wskaźnika, gdy otwarte są podmenu.

Organizuj informacje intuicyjnie. Upewnij się, że hierarchia informacji jest zgodna z modelami mentalnymi użytkowników. Na przykład w witrynie e-commerce zastanów się, czy kupujący jest bardziej skłonny oczekiwać, że produkty będą zorganizowane według marki lub typu. Jeśli użytkownik kliknie kategorię „Buty”, czy spodziewa się, że podmenu będzie zawierało opcje trampek, sandałów i butów? A może będą oczekiwać podmenu z listą wszystkich marek butów, które oferuje sklep? Przyjrzenie się zarówno badaniom użytkowników, jak i konkurencji wyjaśni to.

Upewnij się, że użytkownicy zawsze wiedzą, gdzie się znajdują. Zawsze podświetl link w menu głównym, który odpowiada stronie, na której znajduje się użytkownik. Jeśli bieżąca strona znajduje się w podmenu, podświetl łącze podmenu i pozycję nadrzędną również w menu głównym. Na przykład, jeśli ktoś korzystający z rządowej witryny internetowej w celu odnowienia prawa jazdy miałby przejść z łącza „Mieszkańcy” w menu głównym do łącza „Usługi dla kierowców” w podmenu, a następnie do strony z formularzem odnowienia, zarówno „ Mieszkańcy” i „Usługi kierowcy” pozostaną podświetlone.

Zachowaj prostotę kopiowania. Menu nie jest miejscem na sprytną grę słów; upewnij się, że etykiety linków mają silny zapach informacji. Oznacza to, że nazwy etykiet powinny być proste i opisowe, aby użytkownicy od razu wiedzieli, co znajdą po kliknięciu. Im wyraźniejsza kopia, tym szybciej użytkownicy znajdą to, czego potrzebują.

Priorytet czytelności. Użyj prostego kroju pisma bezszeryfowego i zapewnij odpowiednie odstępy wokół elementów, aby uniknąć bałaganu. Upewnij się, że tło jest wystarczająco nieprzezroczyste, aby zablokować wszystko, co kryje się za menu. Ale nie ignoruj ​​ogólnego brandingu witryny. Chociaż czytelność jest najważniejsza, upewnij się, że stylizacja menu uzupełnia resztę wyglądu i stylu witryny.

Spraw, aby klikanie i stukanie było dostępne. Aby menu było dostępne dla użytkowników z zaburzeniami precyzyjnej kontroli motorycznej, postępuj zgodnie z wytycznymi Google Material Design i sformatuj klikalne elementy tak, aby miały rozmiar co najmniej 48 x 48 pikseli.

Wskazówki dotyczące projektowania komputerów stacjonarnych

Mimo rosnącego trendu w kierunku urządzeń mobilnych, nadal istnieje wiele powodów, dla których klienci mogą potrzebować w pełni funkcjonalnych witryn na komputery stacjonarne. Na przykład mogą potrzebować udostępnić więcej informacji online, niż jest to możliwe w przypadku witryny mobilnej — takiej jak witryna uniwersytetu lub instytucji finansowej. Lub ich badania mogą wykazać, że ich użytkownicy po prostu bardziej polegają na komputerach stacjonarnych.

Menu pulpitu powinno być łatwe do skanowania, zapewniać przejrzyste interakcje i oczywiście być responsywne. Powinna być również jak najbardziej spójna z witryną mobilną, aby korzystanie z niej było intuicyjne dla powracających użytkowników.

Menu powinno otwierać się po kliknięciu, a nie najechaniu kursorem. Jedną z najbardziej fundamentalnych decyzji, jakie musisz podjąć, jest sposób, w jaki użytkownicy będą mieli dostęp do menu witryny. Czy po prostu najechanie kursorem na element nadrzędny — nazwę kategorii — wystarczy, aby wywołać pojawienie się menu, czy też użytkownicy będą musieli go kliknąć?

Podejście najechania jest popularne, ale kliknij, aby otworzyć to najlepszy sposób na zapewnienie niezawodnego i intuicyjnego działania menu na wszystkich urządzeniach. Podejście oparte na kliknięciu umożliwia bardziej spójne działanie stron internetowych na tradycyjnych monitorach komputerowych i ekranach dotykowych oraz pozwala uniknąć wielu frustracji, które pojawiają się przy podejściu najechania, w tym:

• Wąskie tunele zawisające. Tunel najechania jest ścieżką, którą musi przejść mysz, aby poruszać się przy otwartym menu. Jeśli jest zbyt wąski, menu może zniknąć, zanim użytkownik dotrze do żądanego linku.
• Przypadkowe otwarcie. Menu podręczne jest podatne na nieumyślne otwarcie, jeśli użytkownik spróbuje nawigować po nim w drodze do innej lokalizacji na stronie. Ustawienie krótkiego opóźnienia rozwiązuje ten problem, ale może powodować frustrację, gdy użytkownik chce otworzyć menu.
• Niespójny UX na ekranach dotykowych. Menu podręczne nie działają na ekranach dotykowych. Wymagają poprawki kodu do wykrywania ekranów dotykowych i przełączania na otwieranie przez dotknięcie; Ponieważ granica między laptopem a tabletem coraz bardziej się zaciera, te rozwiązania mogą stać się przestarzałe.
• Pytania o to, co można kliknąć. W przypadku menu podręcznych użytkownicy nie zawsze wiedzą, czy link nadrzędny można kliknąć, dopóki nie spróbują kliknąć. To przeciwieństwo intuicji.
• Dostępność. Menu podręczne mogą stwarzać problemy dla użytkowników korzystających z czytników ekranu lub nawigujących za pomocą klawiatury.

Wybierz odpowiedni układ: menu rozwijane a menu Mega. Jeśli witryna na komputery korzysta z tradycyjnego układu menu (poziomy pasek menu umieszczony u góry strony), można rozważyć dwa rodzaje podmenu: standardowe jednokolumnowe menu rozwijane lub wielokolumnowe megamenu.

Rozważ użycie listy rozwijanej, jeśli kategoria nadrzędna zawiera mniej niż osiem linków. Jeśli menu rozwijane jest na tyle długie, że wymaga przewijania w pionie, należy rozważyć zorganizowanie informacji w inny sposób — na przykład jako megamenu lub doprecyzowanie kategorii nadrzędnych.

Mega menu to rodzaj zagnieżdżonego menu, które zazwyczaj wykorzystuje szeroki układ, który może rozszerzyć szerokość przeglądarki. Tego typu menu należy używać, jeśli podmenu zawierają wiele różnych łączy, które można pogrupować w kolumny. Zazwyczaj takie menu można zobaczyć w dużych witrynach e-commerce.

Projektując mega menu, weź pod uwagę następujące kwestie:

• Dodaj obrazy lub ikony, aby ułatwić skanowanie informacji.
• Dodaj nagłówki do powiązanych stron w grupie.
• Dodaj opisy, jeśli nazwy kategorii nie są oczywiste.

Mega menu może być trudne do odczytania i nawigacji na urządzeniach mobilnych, ale czasami poprawa UX na większym ekranie sprawia, że ​​warto wykonać dodatkową pracę, aby zmienić konfigurację informacji dla urządzeń mobilnych.

Dodaj wyraźne stany najechania. Nawet w przypadku menu typu „kliknij, aby otworzyć”, w tym wyraźne stany najechania kursorem na wszystkie elementy, które można kliknąć, sprawiają, że interakcje są satysfakcjonujące i zapewniają użytkownikom, że linki są aktywne. Możesz nieco przyciemnić tło klikalnego obszaru, aby wskazać stan najechania kursorem. Tylko upewnij się, że obszar najechania odpowiada obszarowi, który można kliknąć. Jeśli testowanie wykaże, że użytkownicy potrzebują więcej wskazówek lub kontekstu, rozważ dodanie bardziej opisowych nazw etykiet lub podpowiedzi, o ile nie blokuje to niczego ważnego.

Kliknij, aby zamknąć podmenu. Zachowaj intuicyjność, zamykając menu, gdy użytkownicy klikają gdzie indziej lub otwierają inne podmenu. W ten sposób działają rozwijane pola wprowadzania w formularzach, więc większość użytkowników uzna to za znajome.

Włącz nawigację za pomocą klawiatury na komputerze. Nie każdy używa myszy do nawigacji, więc menu powinno umożliwiać użytkownikom nawigację tylko za pomocą klawiatury. Oznacza to, że wszystkie linki powinny mieć odrębne stany skupienia, aby użytkownicy mogli na pierwszy rzut oka zobaczyć, gdzie się znajdują. Zazwyczaj ramka w ciemniejszym kolorze dobrze wskazuje stan skupienia.

Wskazówki dotyczące projektowania ekranów mobilnych

Jeśli jeszcze nie projektujesz mobile-first, musisz zoptymalizować menu pod kątem urządzenia przenośnego. Tradycyjne układy menu rzadko działają dobrze na bardzo małych ekranach — jeśli po prostu zmniejszysz pasek menu pulpitu, nikt nie będzie w stanie go przeczytać. Te wskazówki pomogą Ci pomyślnie przejść na mały ekran.

Uprość menu główne. Ponieważ ekrany smartfonów są tak małe, wiele informacji, które można znaleźć w menu pulpitu, będzie musiało być początkowo ukrytych. Pasek menu głównego będzie musiał być bardzo prosty, ale dobrym pomysłem jest wyświetlenie najważniejszych linków, aby poprawić wyszukiwalność. Możesz umieścić pasek menu u dołu lub u góry ekranu.

Dodaj wyzwalacz menu. Ponieważ całe menu mobilne lub jego część może być ukryta, użytkownicy będą potrzebować sposobu, aby je znaleźć. Dodanie ikony hamburgera do paska menu lub w łatwo dostępnym pływającym przycisku to popularne rozwiązanie, które wielu użytkowników rozpozna. Jednak menu z hamburgerami to nie jedyny wybór. Jeśli projektujesz dla starszych użytkowników, lepiej użyć na przykład ramki ze słowem „Menu”. Lub, jeśli chcesz, aby funkcje witryny były bardziej widoczne, możesz zamiast tego wyświetlić je w menu z zakładkami na górze lub na dole.

Umieść menu na pasku bocznym. Istnieje wiele różnych sposobów projektowania mobilnego menu. Możesz użyć układu o pełnej szerokości, który sprawdza się w każdej sytuacji; dolna szuflada, która jest najlepsza, gdy jest tylko kilka ogniw; lub okrągłe menu narożne, które jest futurystycznie wyglądającą opcją dla małego menu bez podmenu. Dobrą opcją jest użycie paska bocznego z ciemnym, półprzezroczystym tłem, który blokuje zawartość strony, usuwając w ten sposób elementy rozpraszające uwagę, i umożliwia użytkownikom łatwe dotknięcie go, aby go zamknąć. Rozważ również użycie animacji przesuwania od lewej, aby uniknąć wstrząsów. W przypadku menu na pasku bocznym i menu dolnej szuflady upewnij się, że menu można przewijać w pionie, aby nic nie zostało ucięte na mniejszych ekranach lub w trybie poziomym.

Zezwalaj użytkownikom na łatwe zamykanie menu. Użytkownicy mogą intuicyjnie stuknąć menu, aby je zamknąć, ale rozważ również dodanie przycisku X. Możesz zmienić ikonę hamburgera w X lub dodać ją w prawym górnym rogu menu.

Użyj sekcji rozwijanych dla pojedynczych podmenu. Rozważ użycie sekcji rozwijanych, jeśli menu ma tylko jeden poziom podmenu. Możesz rozwinąć je poniżej elementu nadrzędnego i użyć innego koloru tła dla przejrzystości. Możesz także zezwolić użytkownikom na jednoczesne rozwijanie wielu podmenu. Rozważ użycie kąta w dół lub ikony trójkąta po prawej stronie elementu nadrzędnego, aby wskazać, że dostępne jest podmenu.

Zastąp mega menu i wiele podmenu nakładającymi się menu. Jeśli potrzebujesz rozwinąć więcej niż jedno podmenu lub zmienić konfigurację megamenu, wybierz podejście nakładające się: zamiast rozwijać podmenu poniżej lub obok elementu nadrzędnego, niech podmenu zastąpi element nadrzędny. Przy takim podejściu będziesz musiał umieścić link „Wstecz” na wszystkich panelach z wyjątkiem pierwszego poziomu. W przypadku menu najwyższego poziomu rozważ użycie ikony kąta prostego lub strzałki w prawo dla elementów nadrzędnych.

Wstępnie otwórz podmenu. Na komputerze pomocne jest podświetlenie bieżącej strony i jej strony nadrzędnej. Na małych ekranach rozważ pójście o krok dalej. Jeśli użytkownik kliknie, aby otworzyć menu główne, a strona, na której aktualnie się znajduje, znajduje się w podmenu, rozważ automatyczne otwarcie również podmenu, aby użytkownik zrozumiał, gdzie się znajdują w stosunku do pozostałych elementów menu.

Dbaj o to, aby było jasne i spójne

Nawigacja jest kluczowym elementem doświadczenia klienta. Użytkownicy nie chcą polować na padlinożerców ani spędzać więcej czasu na przeglądaniu menu niż muszą. Jeśli nie mogą łatwo znaleźć tego, czego potrzebują, mogą związać zasoby klienta, dzwoniąc do pomocy technicznej lub, co gorsza, przenieść swoją firmę gdzie indziej.

Dobrze zaprojektowane, wielopoziomowe menu to kluczowy element każdej strony internetowej o złożonej architekturze informacji. Chociaż te wytyczne nigdy nie powinny zastępować badań i testów użytkowników, będą dobrze służyć w wielu różnych przypadkach użycia.

Dalsza lektura na blogu Toptal:

• Kompleksowy przewodnik po architekturze informacji
• Projektowanie responsywne: najlepsze praktyki i uwagi
• Zasady architektury informacji dla urządzeń mobilnych (z infografiką)