Frustrujące wzorce projektowe: mega-rozwijane menu podręczne

Złożone strony internetowe często opierają się na złożonej nawigacji. Kiedy witryna zawiera tysiące stron, często w połączeniu z mikrowitrynami i setkami podsekcji, w końcu nawigacja będzie głęboka i szeroka. A przy tak złożonej, wielopoziomowej nawigacji pokazanie szerokiego zakresu opcji wymaga sporo miejsca. Pomyśl o dużych sprzedawcach handlu elektronicznego i dużych witrynach korporacyjnych, które są przeznaczone dla wielu odbiorców i mają wiele punktów wejścia.

Nic dziwnego, że powszechnym sposobem radzenia sobie z tą złożonością jest szybkie udostępnienie klientom dużej ilości nawigacji. Właśnie dlatego mega-dropdowny stały się poniekąd instytucją w sieci — aczkolwiek głównie dla złożonych i dużych projektów. Mega-lista rozwijana to w zasadzie duża nakładka, która pojawia się na działaniu użytkownika. Zwykle zawiera mieszaną torbę linków, przycisków, miniatur, a czasem zagnieżdżonych list rozwijanych i samych nakładek.

Od dziesięcioleci typowym zachowaniem tego rodzaju nawigacji jest otwieranie menu po najechaniu myszą . Przez dziesięciolecia powszechnym narzekaniem użytkowników na ten wzorzec był absolutny brak pewności i kontroli nad tym, jak i kiedy podnawigacja otwiera się i zamyka.

Czasami podmenu pojawia się nieoczekiwanie , a czasami nagle znika, a czasami pozostaje na ekranie przez chwilę, chociaż wskaźnik myszy znajduje się już w zupełnie innej części strony lub na zupełnie innej stronie.

Dlaczego mega-rozwijane menu są frustrujące?

Głównym powodem, dla którego mega-rozwijane mogą być kłopotliwe w użyciu, jest niedopasowanie intencji i oczekiwań . Za pomocą menu podręcznych staramy się dedukować i działać zgodnie z konkretnym zamiarem, śledząc zachowanie myszy, ale nasi klienci mogą mieć bardzo różne cele i bardzo różne ograniczenia podczas uzyskiwania dostępu do strony.

Zachowanie klienta jest zwykle nieprzewidywalne, nawet jeśli nasza analityka może przedstawiać nieco inną historię z punktami danych gromadzonymi i normalizowanymi w dłuższym okresie czasu. Po prostu rzadko potrafimy dokładnie przewidzieć zachowanie.

Typowe scenariusze, które zwykle badamy, to:

1. Klient celuje w link kategorii i podróżuje tam bezpośrednio, aby zapoznać się z elementami podrzędnej nawigacji w tej kategorii.
2. Klient przesuwa mysz w kierunku celu na ekranie , ale trajektoria, którą musi przebyć mysz, obejmuje łącze nawigacyjne , które otwiera mega-rozwijane menu.

Istnieje jednak również wiele innych sytuacji do rozważenia. Żeby wymienić tylko kilka:

1. Klient chce sprawdzić opcje mega-rozwijanych podczas wpisywania autouzupełniania wyszukiwania. Aby to zrobić, muszą ponownie otwierać mega-rozwijane menu lub korzystać z osobnych kart przeglądania, umieszczonych obok siebie.
2. Klient może używać gładzika (lub myszy) do obsługi dużego dodatkowego wyświetlacza, dzięki czemu ruchy wskaźnika będą wolniejsze, gwałtowne i niedokładne. Spowodowałoby to, że mega-lista rozwijałaby się mimowolnie za każdym razem, gdy użytkownik zatrzyma się podczas podróży do CTA lub koszyka na górze strony.
3. Klient chce otworzyć stronę kategorii , więc przechodzi do linku kategorii, klika go, ale doświadcza migotania, ponieważ megalista wydaje się być opóźniona.
4. Dzięki zagnieżdżonym podmenu w mega-menu klient chce przeglądać podobne elementy w kategorii, w której aktualnie się znajduje, ale z powodu zagnieżdżenia musi wielokrotnie otwierać mega-menu i podróżować po w kółko ten sam tunel zawisu.
5. Wyobraź sobie sytuację, w której chcesz zmienić rozmiar okna , a gdy masz zamiar przyciągnąć do prawej krawędzi okna, pojawia się menu podręczne — tylko dlatego, że przesunąłeś kursor myszy zbyt blisko.
6. Użytkownik zaczyna powoli przewijać w dół, aby ocenić zawartość strony, ale menu wciąż się pojawia. I za każdym razem, gdy użytkownik odsuwa kursor, aby przeczytać zawartość mega-rozwijanego menu, menu przypadkowo znika.

Problem polega na tym, że musimy wspierać wszystkie te intencje i wszystkie te wypadki, ale jednocześnie musimy upewnić się, że nie stworzymy denerwującego i frustrującego doświadczenia również w żadnym z tych przypadków. Oczywiście jako projektanci i programiści wymyśliliśmy szereg technik, aby rozwiązać ten problem.

Nawiguj Opóźnienie wejścia/wyjścia

Jednym z pierwszych rozwiązań, a zarazem jednym z najczęstszych, jest wprowadzenie opóźnienia wejścia/wyjścia po najechaniu kursorem. Musimy upewnić się, że menu się nie otwiera i nie zamyka zbyt wcześnie . Aby to osiągnąć, wprowadzamy opóźnienie, zwykle około 0,5 sekundy. Oznacza to, że dajemy klientom bufor około 0,5 sekundy na:

• W razie potrzeby przekrocz trajektorię do odległego celu lub
• Wskaż, że zamierzają zapoznać się z nawigacją, pozostając na łączu kategorii z mega rozwijanej listy lub
• Popraw błąd, jeśli przypadkowo opuścili granice mega-dropdown.

Innymi słowy, dopóki klient pozostaje w nakładce mega-rozwijanej, wyświetlamy ją. I ukrywamy nakładkę, gdy klient przesunie kursor myszy poza nakładkę podrzędną na co najmniej 0,5 sekundy.

Chociaż rozwiązuje problem przypadkowego migotania na stronie, wprowadza opóźnienie w przypadku, gdy użytkownik opuści mega-listę na dłużej niż 0,5 sekundy. W rezultacie spowalnia każdą interakcję z megalistą w całej witrynie. Niestety bardzo szybko staje się to bardzo zauważalne, zwłaszcza jeśli nawigacja jest często używana.

Niektóre implementacje dodają przejście z pojawiania się/zanikania, aby pojawienie się mega rozwijanego było mniej nagłe, ale w praktyce skutkuje to zwiększeniem opóźnienia wejścia/wyjścia do 0,8–0,9 s, co również wprowadza bardziej zauważalne opóźnienie. Przykładem tego jest ADAC.de, z 100ms opóźnieniem wejścia i 300ms przejściem zanikania. (Przejście nie ma jednak zastosowania podczas przełączania między różnymi kategoriami megalisty rozwijanej).

Oczywiście im dłużej nakładka pozostaje widoczna, tym surowiej karzemy osoby, które celowo chcą uciec od nakładki. W rzeczywistości staje się to problemem, ponieważ wprowadzamy powierzchowny limit czasu między akcją użytkownika a reakcją interfejsu użytkownika.

Wybacz ścieżki ruchu myszy: trójkąt trajektorii

Zamiast wprowadzać opóźnienia, możemy postarać się bardziej hojnie określić trasy, którymi będą podróżować klienci. Ponieważ ruchy myszy są z natury niedokładne, aby zminimalizować frustrację, możemy unikać wąskich tuneli w zawisie i powiększać korytarze podróży.

Na przykład możemy użyć techniki trójkąta Amazona, w której zbudowaliśmy trójkąt trajektorii , który łączy aktualną pozycję wskaźnika myszy z krawędziami obszaru mega rozwijanego. Jeśli ten obszar ma pojawić się obok kategorii po prawej stronie (jak pokazano na poniższym obrazku), łączymy wskaźnik myszy z prawą górną i prawą dolną krawędzią kontenera, w którym wymienione są kategorie.

Dopóki użytkownik pozostaje w trójkącie lub w całym obszarze mega rozwijanej, nakładka jest nadal wyświetlana. Jeśli użytkownik zdecyduje się wyjechać poza trójkąt , zawartość nakładki mega rozwijanej odpowiednio się zmieni. I oczywiście zniknie całkowicie natychmiast po tym, jak użytkownik całkowicie wyjdzie poza listę kategorii.

Chris Coyier podkreśla niektóre techniczne zawiłości tej techniki w swoim poście na temat rozwijanych menu z bardziej wyrozumiałymi ścieżkami ruchu myszy, a także waniliową demonstrację JavaScript autorstwa Alexandra Popova w „Menu Aim-Aware”.

Dzięki tej technice minimalizujemy tarcie związane z nagłym zniknięciem i ponownym pojawieniem się podnawigacji. Może to jednak stać się nieskuteczne, jeśli linki kategorii są umieszczone zbyt blisko siebie lub wyświetlamy menu podręczne, najeżdżając kursorem na większy przycisk. Możemy zrobić trochę lepiej z obszarami wyjścia ścieżki SVG.

Obszary wyjścia ścieżki SVG

Podczas obliczania trójkąta trajektorii za pomocą poprzedniej techniki czasami nie tylko śledziliśmy dokładną pozycję wskaźnika myszy, ale także przeliczaliśmy trójkąt przy każdym ruchu wskaźnika — przez cały czas. Możemy ulepszyć strategię, obliczając raz cały obszar nakładki SVG i śledząc, czy wskaźnik myszy znajduje się w nim — bez ciągłego przeliczania trójkąta. Świetnym tego przykładem jest implementacja Hakima el Hattaba, która dynamicznie rysuje obszary za pomocą SVG w oparciu o pozycję elementu nawigacyjnego na ekranie.

Rozwiązanie Hakima jest w rzeczywistości responsywne, więc jeśli podnawigacja nie mieści się na ekranie, będzie unosić się obok głównego elementu nawigacyjnego , wyświetlanego w pełnej szerokości lub wysokości. Obszar ścieżki SVG zostanie odpowiednio przeliczony, ale tylko wtedy, gdy użytkownik przewija w pionie lub poziomie. Możesz zobaczyć działające demo tej techniki w akcji w trybie widoku debugowania Hakima wzorca Menu.

Chociaż ta opcja jest precyzyjna i całkowicie eliminuje opóźnienia , które widzieliśmy w przypadku opóźnień najechania kursorem, spowoduje to migotanie, gdy klient przypadkowo przejedzie przez dużą listę kategorii, która powoduje otwarcie mega rozwijanego przy każdym elemencie nawigacji.

Ponownie, źródłem problemu jest to, że klienci nie mają żadnej kontroli nad otwieraniem i zamykaniem mega rozwijanych menu, ani też często nie rozumieją, kiedy te menu się pojawią lub znikną. Ten brak przewidywalności często prowadzi do błędów i frustracji. Ale czasami mega-listy rozwijane mają jeszcze dalsze, ukryte problemy z dostępnością.

Pułapki Mega-Dropdown otwierających się na Hover

Jak wspomniano powyżej, wszystkie wymienione powyżej techniki mają ten sam cel. Próbują przewidzieć zamiar otwarcia i zamknięcia menu nawigacyjnego przez użytkownika, opierając się na pewnych obserwacjach dotyczących szybkości ruchów myszy, czasu przebywania w jednym obszarze lub dokładnej pozycji na ekranie. Te prognozy w pewnym momencie zawiodą dla niektórych klientów i tak naprawdę niewiele można z tym zrobić.

Mega listy rozwijane otwierane po najechaniu myszą mają wiele problemów z ułatwieniami dostępu. Oczywiście musimy obsługiwać nawigację w mega rozwijanym menu dla użytkowników korzystających tylko z klawiatury, a także musimy upewnić się, że elementy są również prawidłowo ogłaszane czytnikom ekranu. Ale także jeśli chodzi o ogólny układ, musimy uważać na to, gdzie znajduje się mega-rozwijane.

Wyszukiwanie przerwane przez megalistę

Jeśli jakakolwiek ważna funkcja jest wyświetlana wystarczająco blisko mega-rozwijanej nawigacji, zwykle powoduje to wiele problemów i skarg. Na przykład, jeśli pasek wyszukiwania jest wyświetlany nad obszarem mega-rozwijanej, w końcu spowoduje to niesamowitą ilość tarcia i frustracji.

O ile nie zostanie zastosowane wystarczająco długie opóźnienie wejścia/wyjścia, mega-rozwijana nakładka zawsze będzie przeszkadzać w wyszukiwaniu i wynikach wyszukiwania, jak to ma miejsce na stronie Thesauraus.com poniżej. Za każdym razem, gdy użytkownik oddala się od paska wyszukiwania w kierunku wyników (i z powrotem), mega-rozwijane przeszkadza.

Wiele podnawigacji pojawia się z opóźnieniami

Doświadczenie będzie uciążliwe, gdy po najechaniu z opóźnieniem pojawi się wiele podnawigacji, jedna po drugiej. Niefortunnym przykładem tego w działaniu jest poniższa strona Vodafone. Jeśli w tym przypadku każdy element nawigacji działa również jako samodzielny link do kategorii (dodatkowo otwierając mega rozwijaną listę), powinniśmy spodziewać się wielu wściekłych kliknięć w całej witrynie.

W powyższym przykładzie są 4 poziomy nawigacji wyświetlane pod sobą, a 2 z nich otwierają się po najechaniu kursorem z przejściem 300 ms . Jednocześnie, ponieważ każdy tytuł kategorii jest również linkiem do strony kategorii, użytkownicy mogą również przejść bezpośrednio do strony kategorii. Ale po kliknięciu — i podczas oczekiwania na pojawienie się nowej strony — menu podręczne na chwilę będzie wyglądało na częściowo uszkodzone — często nie ma wystarczająco dużo czasu, aby przejść do właściwego widoku w celu zarejestrowania przez klienta.

Dodaj do tego wszelkie problemy z pamięcią lub przetwarzaniem na nieco starszym urządzeniu użytkownika, kilka ciężkich rozszerzeń przeglądarki i test antywirusowy działający w tle, a ogólne wrażenia szybko staną się nie do zniesienia.

Poza tym, ponieważ 4 poziom nawigacji pojawia się tylko po najechaniu kursorem, jeśli 3 poziom nawigacji jest już otwarty, a 3 poziom nawigacji pojawia się tylko po najechaniu, gdy 2 poziom nawigacji jest już otwarty, aby poruszać się między stronami 4 poziom, użytkownicy muszą wielokrotnie otwierać nawigację i pamiętać, gdzie kliknęli wcześniej, aby najechać na tunel do czwartego poziomu.

Zasadniczo mnożymy opóźnienia i problemy z tunelem zawisu, o których mówiliśmy wcześniej, zawsze zmuszając użytkowników do oczekiwania na pojawienie się nawigacji i prosząc ich o bardzo precyzyjną kontrolę w korytarzu zawisu, gdy nawigacja już się pojawi. Stąd bierze się frustracja.

Jeśli masz do czynienia ze złożoną nawigacją tego rodzaju, warto sprawdzić, czy problemy znikają, gdy używany jest tylko jeden (a nie dwa) menu kursora. To menu byłoby nieco większe i zawierałoby wszystkie opcje w kolumnach. Lub, jeśli to możliwe, dla każdej kategorii rozważ wyświetlanie wszystkich opcji nawigacji w tej kategorii jako stałego paska nawigacyjnego (paska bocznego lub przyklejonego paska górnego) — zwykle powinno to całkowicie wyeliminować wszystkie te problemy.

Tytuły kategorii robią zbyt wiele rzeczy

Jak widzieliśmy wcześniej, czasami tytuły kategorii mają dwie różne funkcje . Z jednej strony, każdy tytuł kategorii może być powiązany ze stroną kategorii, dzięki czemu klienci mogą na nie kliknąć, aby przejść bezpośrednio do strony. Z drugiej strony mogli również otworzyć mega-rozwijaną nakładkę. Jeśli więc użytkownik przez dłuższy czas unosi kursor myszy nad tytułem, otworzy się mega-lista, ale użytkownik mógł już kliknąć łącze, co spowoduje migotanie. Klientom trudno jest mieć właściwe oczekiwania, gdy interfejs tak naprawdę nie dostarcza żadnych wskazówek.

Istnieje kilka opcji rozwiązania tego problemu:

1. Aby wskazać, że tytuł kategorii jest linkiem, warto go podkreślić ,
2. Aby rozróżnić tytuł kategorii od listy rozwijanej, należy dodać pionowy separator (np. pionową linię) i ikonę (jodełkę),
3. Pozostaw tytuł kategorii otwierający tylko mega-rozwijane menu i dodaj link do sekcji „Strona główna” kategorii w nakładce mega-rozwijanej. Może to być również widoczny przycisk „Zobacz wszystkie opcje” (patrz przykład The Guardian powyżej).

Jak wspomniano powyżej, czasami można zobaczyć dodatkową ikonę , która wskazuje, że menu otwiera nakładkę, podczas gdy tytuł kategorii jest linkiem. W naszych testach użyteczności zauważyliśmy, że za każdym razem, gdy ikona jest obecna (i nie ma znaczenia, która to ikona), użytkownicy często rozróżniają między akcją, która zostanie wywołana kliknięciem ikony, a akcją wywołaną klikając tytuł kategorii.

W pierwszym przypadku zwykle oczekują, że otworzy się menu rozwijane, a w drugim pojawi się strona kategorii. Co ważniejsze, wydaje się, że spodziewają się, że menu otworzy się po dotknięciu/kliknięciu, a nie najechaniu kursorem .

Mailchimp to dobry przykład mega-rozwijanej listy, która pozwala uniknąć większości opisanych powyżej problemów, a tytuły kategorii działają tylko po to, by otworzyć mega-rozwijane. Lista rozwijana jest dostępna dla użytkowników klawiatury w stylu :focus . Po wybraniu każda kategoria jest wyróżniona jako podkreślona , co może prowadzić do wniosku, że tytuł zamienił się w link, zwłaszcza że podkreślenie jest dokładnie takie samo dla linku „Ceny” u góry nawigacji. Być może podkreślenie go kolorem tła byłoby nieco bardziej kuloodporne. Świetny przykład odniesienia do rozważenia dla menu podręcznych.

Ogólnie rzecz biorąc, dobrym pomysłem jest unikanie przeładowywania tytułów kategorii wieloma funkcjami. Dotyczy to nie tylko mega rozwijanych menu, ale prawie wszystkich menu, w tym akordeonów i podpowiedzi: cały obszar powinien służyć jako rozszerzenie, pokazując opcje nawigacji po dotknięciu lub kliknięciu. W większości przypadków jest to po prostu prostsze i mniej frustrujące.

Projektowanie lepszego mega-rozwijanego menu: dotknij/kliknij menu

Jeden z najczęstszych powodów, dla których mega-rozwijane są często otwierane po najechaniu kursorem, ponieważ wiele dużych firm chce szybko pokazać swoim klientom szeroką gamę opcji dostępnych w witrynie. Gdy opcje nawigacji zmieniają się po najechaniu myszą, możemy szybciej wyświetlać więcej opcji, a klient może szybciej eksplorować więcej opcji. Dlatego trudno wyobrazić sobie dużego detalistę eCommerce bez np. dużej nakładki nawigacyjnej.

Warto jednak sprawdzić, czy czas zaangażowania i współczynniki klikalności pozostaną takie same (lub wzrosną), jeśli nawigacja po najechaniu myszą zostanie zastąpiona nawigacją przez dotknięcie/kliknięcie . W rzeczywistości większość problemów wymienionych powyżej można łatwo rozwiązać, wykonując właśnie to: nakładka mega-rozwijanej otwierałaby się i zamykała tylko wtedy, gdy użytkownik wyraźnie poprosi o tę konkretną akcję. Dlatego nie ma potrzeby śledzenia wskaźnika myszy ani dostosowywania opóźnień wejścia/wyjścia po najechaniu kursorem. Dodatkowo, ponieważ na telefonie komórkowym i tak nie ma najechania kursorem, musimy zapewnić opcję otwierania menu za pomocą dotknięcia/kliknięcia na urządzeniu mobilnym w jedną lub drugą stronę, dzięki czemu możemy zachować to w ten sposób również na większych ekranach.

Dobrym tego przykładem w akcji jest strona internetowa Muzeum Żydowskiego w Berlinie. Górny pasek nawigacyjny nie tylko otwiera mega rozwijane menu po dotknięciu i kliknięciu, ale także nawigacja na pasku bocznym za pomocą ikon. Ponadto, ponieważ użytkownik musi aktywnie otwierać/zamykać nakładkę, możemy wyróżnić wybraną kategorię stylami :focus / :active .

Witryna nie używa żadnej ikony wskazującej, że menu może być otwarte lub zamknięte, a opcje menu nie są linkami prowadzącymi do oddzielnej strony. To sprawia, że ​​ogólne wrażenia są bardzo spokojne i przewidywalne, choć prawdopodobnie wolniejsze w ujawnianiu opcji nawigacji w porównaniu z menu podręcznymi.

Ponieważ jednak witryna nie ma wielu opcji nawigacji do wyświetlenia, wydaje się, że działa to bardzo dobrze. Jest to świetny przykład odniesienia , o którym należy pamiętać podczas pracy nad dostępnym mega rozwijanym menu, które otwiera się po dotknięciu/kliknięciu.

Jeśli masz trochę więcej nawigacji, nieco bardziej zaawansowanym przykładem jest Allianz.de. Zamiast używać jednej dużej nakładki mega-rozwijanej, nawigacja podrzędna jest pogrupowana w mniejsze listy rozwijane. Jednak menu nie zawsze pokazuje wszystkie opcje dla każdej kategorii. Zamiast tego wyróżnia najważniejsze opcje , a na dole znajduje się link do wszystkich opcji. Jedynym szczegółem, którego może brakować, jest szewron wskazujący, że po kliknięciu pojawi się menu rozwijane.

Na urządzeniach mobilnych mega-rozwijane menu to grupa akordeonów , z dobrym wyborem kontrastu kolorów i wcięcia, aby wskazać hierarchię nawigacji. Każdy akordeon nigdy nie pokazuje więcej niż 4 elementów nawigacyjnych na raz. Świetny przykład odniesienia dla złożonej nawigacji z mega rozwijanymi funkcjami, która działa dobrze.

Jeśli szukasz implementacji technicznej, możesz sprawdzić Pochwała jednoznacznego menu kliknięć, w której Mark Root-Wiley pokazuje, jak zbudować dostępne menu kliknięć. Pomysł polega na tym, aby zacząć budować menu jako menu kontekstowe tylko w CSS, które używa li:hover > ul i li:focus-within > ul do wyświetlania podmenu.

Następnie używamy JavaScript do tworzenia elementów <button> , ustawiania atrybutów aria i dodawania obsługi zdarzeń. Ostateczny wynik jest dostępny jako przykład kodu w CodePen i jako repozytorium GitHub. Powinno to być również dobrym punktem wyjścia dla twojego menu.

Akordeon vs. nakładki vs. dzielone menu na urządzeniach mobilnych

Nie trzeba dodawać, że nie każda mega-lista rozwijana po dotknięciu/kliknięciu działa dobrze. Target.com to kolejny interesujący przykład dostępnej, dużej nawigacji, która unika wielokolumnowego układu i pokazuje tylko jeden poziom nawigacji w danym czasie — wszystkie otwierane przez dotknięcie/kliknięcie.

Menu rozwijane pokazuje opcje tylko w jednej kolumnie na raz, więc poruszając się w obrębie kategorii, zawsze skupiasz się na tej samej nakładce na ekranie. Każda wybrana sekcja przejmuje całą kolumnę. Doświadczenie jest przewidywalne i spokojne, ale po raz kolejny klient może widzieć mniej nawigacji na raz.

Dinoffentligetransport.dk, witryna usług transportu publicznego z Danii, używa zamiast tego wielu kolumn , z nawigacją u góry uzupełnioną ikoną szewronu i otwierającą się również po dotknięciu/kliknięciu.

W niektórych innych implementacjach można zobaczyć wiele nakładek pojawiających się jedna na drugiej. W rzeczywistości tak jest w przypadku Unilever (przykład poniżej). Mega-rozwijane otwiera się po dotknięciu/kliknięciu, z wieloma szewronami wyświetlanymi w tym samym czasie. Co reprezentuje każdy szewron? A czego klient powinien się spodziewać po ich kliknięciu?

„Nasze marki” prowadzą do osobnej strony , a każda etykieta pod nią otwiera nową nakładkę nawigacyjną na górze mega rozwijanego menu. Czy zauważyłeś, że „Wszystkie marki” są podkreślone, a reszta opcji nawigacji nie? Widać intencję projektantów tworzących menu. Rzeczywiście, „Wszystkie marki” to link, podczas gdy inne etykiety otwierają nakładkę:

Mając wszystkie te opcje, jak moglibyśmy obejść się, wyświetlając mega-rozwijaną nawigację na telefonie komórkowym ? Jak się okazuje, grupowanie takich mega-rozwijanych nakładek na urządzeniach mobilnych jest trudne: zwykle nie ma wystarczająco dużo miejsca ani pomocy wizualnej, aby wyróżnić różne poziomy w różny sposób i ułatwić ich rozróżnienie. W powyższym przykładzie może minąć trochę czasu, zanim zorientujemy się, na którą stronę faktycznie wylądowaliśmy.

Trochę łatwiej jest zrozumieć, na jakim poziomie obecnie jesteśmy i jakie mamy opcje z podejściem akordeonowym, jak widać na Dinoffentligetransport.dk. Jednak dobrym pomysłem może być podkreślenie linków w każdej podsekcji, ponieważ prowadzą one klientów do strony kategorii. Ponadto cały pasek kategorii powinien być prawdopodobnie klikalny i powinien rozwinąć akordeon.

W powyższym przykładzie przez większość czasu prawdopodobnie będziemy w stanie wyświetlić jednocześnie ograniczoną liczbę sekcji nawigacji. Ale jeśli tytuły poszczególnych sekcji są stosunkowo krótkie, możemy podzielić ekran w poziomie i wyświetlić wiele poziomów jednocześnie. LCFC.com jest dobrym przykładem działania tego wzorca.

Która opcja działa najlepiej?

Z mojego osobistego doświadczenia wynika, że ​​kiedy porównujemy implementacje mega-dropdownów na urządzeniach mobilnych, pionowe akordeony wydają się być szybsze i bardziej przewidywalne niż nakładki (czy to jednokolumnowe, czy wielowarstwowe). A podzielone menu wydają się być szybsze i bardziej przewidywalne niż akordeony.

Istnieje kilka zalet , które zapewniają zarówno akordeony, jak i podzielone menu:

• Nie ma potrzeby wyświetlania przycisku „Wstecz”, aby powrócić do strony nadrzędnej.
• Oko nie musi przy każdym skoku przeskakiwać między górną częścią menu nawigacyjnego a podrzędną nawigacją sekcji.
• Klienci mogą szybciej nawigować między wieloma poziomami: zamiast wielokrotnie klikać „Wstecz”, mogą przeskoczyć do akordeonu, który ich interesuje.
• Klienci mogą eksplorować wiele sekcji jednocześnie (chyba że implementacja automatycznie zamyka jeden akordeon po otwarciu drugiego). Nie jest to możliwe z nakładkami.

Ogólnie rzecz biorąc, akordeony i podzielone menu wydają się być lepszym rozwiązaniem . Ale wydaje się, że nie działają dobrze, gdy jest dużo nawigacji. Jeśli każda kategoria ma więcej niż 6–7 elementów , dobrym pomysłem było dodanie przycisku „Przeglądaj wszystko” pod 6–7 elementami w innym akordeonie (lub na osobnej stronie) albo użycie nakładek.

Tak więc w zależności od ilości nawigacji, możemy zacząć od dzielonych menu , potem, jeśli nie jest to możliwe, przejść na akordeony, a jeśli nawigacja wciąż się komplikuje, w końcu zamienić akordeony w nakładki.

Kiedy Mega-Dropdown może nie być mimo wszystko potrzebne

Odnieśliśmy się już do pracy zespołu Gov.uk w poprzednim artykule, ale ich spostrzeżenia są cenne również w kontekście mega-dropdownów. W przypadku dużej, wielopoziomowej nawigacji zespół zdecydował się wykorzystać wyniki opracowane przez ekspertkę Caroline Jarrett, zasadę „jedna rzecz na stronę”. Według Caroline „pytania, które naturalnie »idują w parze« z punktu widzenia projektantów […] nie muszą być na tej samej stronie, aby pracować dla użytkowników”. Caroline zastosowała go przede wszystkim do projektowania formularzy internetowych, ale mogliśmy również zastosować go w kontekście nawigacji.

Pomysł polega zatem na całkowitym unikaniu złożonych mega-rozwijanych pozycji i zapewnieniu klientom przejrzystego, ustrukturyzowanego sposobu poruszania się po kanałach witryny, od jednej strony do drugiej. W przypadku Gov.uk wydaje się, że dzieje się to poprzez przemyślaną architekturę informacji i przewodniki, które prowadzą odwiedzających przez przewidywalne kroki w kierunku celu.

Kanton Zurich używa tego samego wzoru. Zamiast warstw mega-rozwijanej nawigacji wszystkie opcje są wyświetlane w uporządkowany sposób, z głównymi tematami u góry jako „Najważniejsze tematy”, a nawigacja w każdej sekcji jest wyświetlana jako przyklejony pasek nawigacyjny na górze.

Alternatywnym podejściem jest użycie wzorca nawigacji „chcę to zrobić” . Oprócz konwencjonalnej nawigacji możemy udostępnić „menu nawigacyjne”, aby umożliwić klientom skonstruowanie wybranego przez siebie zapytania nawigacyjnego i przekierowanie bezpośrednio do strony, której szukają. Zasadniczo jest to seria list rozwijanych, które pojawiają się pod innym, aby umożliwić użytkownikowi wybranie tego, co zamierza zrobić lub znaleźć w witrynie.

Przez jakiś czas wzór był używany na Commonbond (zobacz wideo powyżej), a także na Corkchamber.ie. Ciekawy, choć niekonwencjonalny sposób na zapewnienie dostępu do głębokiego poziomu nawigacji bez konieczności korzystania z mega rozwijanego menu.

Mega-rozwijana lista kontrolna projektowania nawigacji

Za każdym razem, gdy przywołujemy rozmowę na temat mega rozwijanych menu, wszyscy wydają się osiedlać w kilku grupach: niektórzy koledzy wolą najeżdżać, inni wolą stukanie i klikanie, niektórzy wolą oba, a innym nie przeszkadza to to zarówno link do kategorii, jak i ikona otwierająca menu.

Nie można powiedzieć, że jedno podejście jest zawsze lepsze od innych, ale zarówno pod względem implementacji technicznej, jak i UX, otwieranie menu przez dotknięcie/kliknięcie zwykle powoduje o wiele mniej kłopotów i o wiele mniej frustracji, jednocześnie pozwalając na prostą implementację, a co za tym idzie w przewidywalnej i spokojnej nawigacji. Zanim przejdziemy do menu najechania kursorem, możemy najpierw spróbować zachować zachowanie polegające na dotknięciu/kliknięciu, zmierzyć zaangażowanie i zbadać, czy najechanie kursorem jest jednak konieczne.

I jak zawsze, oto kilka ogólnych rzeczy, o których należy pamiętać podczas projektowania i tworzenia mega-rozwijanej listy:

• Unikaj umieszczania ważnych, często używanych elementów w pobliżu mega-rozwijanej nawigacji (np. paska wyszukiwania, CTA, ikony koszyka) (jeśli najedziesz),
• Unikaj wielu podrzędnych nawigacji w mega-menu pojawiających się po sobie z opóźnieniami (jeśli najedziesz),
• Unikaj przeładowywania tytułów kategorii wieloma funkcjami.
• Podkreśl tytuły kategorii, aby zidentyfikować je jako linki do strony kategorii (oczywiście, jeśli są połączone ze stroną kategorii).
• Jeśli możesz, dodaj link „Strona główna” lub przycisk „Przeglądaj wszystko” w każdej podkategorii zamiast bezpośrednio łączyć kategorię.
• Unikaj poziomych nakładek i rozważ zastąpienie ich pionowymi akordeonami i podzielonym menu,
• Dodaj ikonę wskazującą, że tytuł kategorii po kliknięciu wywołuje mega-rozwijane menu (np. szewron) i zawsze powinien być wystarczająco duży, aby można było wygodnie stukać (np. 50×50px),
• Unikaj długich przejść z pojawiania się/zanikania, gdy pojawia się/znika mega-lista (maksymalnie 300ms),
• Rozważ przetestowanie przewodnika strukturalnego lub zapytania nawigacyjnego (wzorzec nawigacji „chcę to zrobić”) zamiast lub dodatkowo do megamenu.
• Jeśli to możliwe, unikaj mega rozwijanych menu .