Modele de design frustrante: meniuri cu mouse-ul Mega-Dropdown

Site-urile web complexe se bazează adesea pe navigare complexă. Când un site web găzduiește mii de pagini, adesea combinate cu micro-site-uri web și sute de subsecțiuni, în cele din urmă navigarea va deveni profundă și largă. Și cu o navigare atât de complexă pe mai multe niveluri , afișarea lărgimii opțiunilor necesită destul de mult spațiu. Gândiți-vă la marii retaileri de comerț electronic și la site-urile corporative mari, care se adresează multor audiențe și au o mulțime de puncte de intrare.

Nu e de mirare că o modalitate obișnuită de a face față acestei complexități este expunerea rapidă a clienților la o cantitate mare de navigare. Tocmai de aceea , mega-dropdown- urile au devenit oarecum o instituție pe web – deși mai ales pentru proiecte complexe și mari. Un mega-menu derulant este în esență o suprapunere mare care apare pe acțiunea unui utilizator. De obicei, include un pachet mixt de link-uri, butoane, miniaturi și uneori liste derulante și suprapuneri imbricate.

De zeci de ani, un comportament comun pentru acest tip de navigare este deschiderea meniului la trecerea mouse -ului . Și de zeci de ani, o plângere comună a utilizatorului cu privire la acest model a fost lipsa absolută de certitudine și control cu ​​privire la modul și când se deschide și se închide sub-navigația.

Uneori, submeniul apare pe neașteptate , iar uneori dispare brusc și, uneori, rămâne pe ecran pentru un timp, deși indicatorul mouse-ului se află deja într-o parte foarte diferită a paginii sau pe o altă pagină cu totul.

De ce sunt frustrante meniurile superioare Mega-Dropdowns?

Principalul motiv pentru care mega-dropdown-urile pot fi greoaie de utilizat este din cauza nepotrivirii intențiilor și așteptărilor . Cu meniurile cu mouse-ul, încercăm să deducem și să acționăm în baza unei anumite intenții prin urmărirea comportamentului mouse-ului, dar clienții noștri pot avea obiective foarte diferite și limitări foarte diferite atunci când accesează o pagină.

Comportamentul clientului este de obicei imprevizibil, chiar dacă analizele noastre ar putea spune o poveste ușor diferită, cu punctele de date adunate și normalizate pe o perioadă mai lungă de timp. Rareori putem prezice comportamentul cu exactitate.

Scenariile comune pe care le explorăm de obicei sunt:

1. Clientul vizează linkul categoriei și călătorește acolo direct pentru a explora articolele de sub-navigație din acea categorie.
2. Clientul deplasează mouse-ul spre o țintă de pe ecran , dar traiectoria pe care trebuie să o parcurgă mouse-ul acoperă o legătură de navigare care deschide un mega-menu derulant.

Cu toate acestea, există și o mulțime de alte situații de luat în considerare. Pentru a numi doar câteva:

1. Clientul dorește să caute opțiuni de mega-menu derulant în timp ce introduce o completare automată a căutării. Pentru a face asta, trebuie să redeschidă în continuare mega-menu-ul drop-down sau să folosească file separate de navigare, poziționate una lângă alta.
2. Clientul poate folosi un trackpad (sau un mouse) pentru a opera un ecran secundar mare, astfel încât mișcările indicatorului vor fi mai lente, bruște și inexacte. Acest lucru ar determina deschiderea involuntară a mega-menu-lui derulant de fiecare dată când utilizatorul se întrerupe atunci când călătorește la CTA-uri sau la coșul de cumpărături din partea de sus a paginii.
3. Clientul dorește să deschidă pagina categoriei , așa că călătorește la linkul categoriei, dă clic pe el, dar experimentează pâlpâirea, deoarece un mega-menu derulant apare întârziat.
4. Cu submeniuri imbricate într-un mega-menu derulant , clientul dorește să exploreze articole similare din categoria în care se află în prezent, dar din cauza imbricației, trebuie să redeschidă mega-menu-ul derulant din nou și din nou și să călătorească același tunel de hover iar și iar.
5. Imaginați-vă o situație în care doriți să redimensionați fereastra și, în momentul în care sunteți pe cale să vă aliniați la marginea dreaptă a ferestrei, un meniu de trecere cu mouse-ul continuă să apară - doar pentru că ați mutat cursorul mouse-ului prea aproape.
6. Utilizatorul începe să deruleze încet în jos pentru a evalua conținutul unei pagini, dar meniul continuă să apară. Și de fiecare dată când utilizatorul alungă un cursor pentru a citi conținutul mega-menu-ului derulant, meniul dispare accidental.

Problema este că trebuie să susținem toate aceste intenții și toate aceste accidente, dar în același timp trebuie să ne asigurăm că nici pentru niciunul dintre aceste cazuri nu creăm o experiență enervantă și frustrantă. Desigur, ca designeri și dezvoltatori, am inventat o serie de tehnici pentru a rezolva această problemă.

Întârziere de intrare/ieșire cu mouse-ul

Una dintre primele soluții, și, de asemenea, una dintre cele mai comune încă, este introducerea unei întârzieri de intrare/ieșire la hover. Trebuie să ne asigurăm că meniul nu se deschide și nu se închide prea devreme . Pentru a realiza acest lucru, introducem o întârziere, de obicei în jur de 0,5 secunde. Aceasta înseamnă că oferim clienților un tampon de aproximativ 0,5 secunde pentru a:

• Traversați traiectoria către o țintă la distanță, dacă este necesar, sau
• Indicați că intenționează să exploreze navigarea rămânând pe linkul categoriei mega-menu-derulant sau
• Corectați o greșeală dacă au părăsit granițele unui mega dropdown din întâmplare.

Cu alte cuvinte, atâta timp cât clientul rămâne în suprapunerea mega-dropdown, îl afișăm în continuare. Și ascundem suprapunerea odată ce clientul și-a mutat cursorul mouse-ului în afara suprapunerii de sub-navigație timp de cel puțin 0,5 secunde.

În timp ce rezolvă problema pâlpâirii accidentale a paginii, introduce un decalaj în cazurile în care un utilizator a părăsit mega-menu-ul derulant mai mult de 0,5 secunde. Drept urmare, încetinește fiecare interacțiune cu mega-menu-ul derulant pe întregul site. Din păcate, devine foarte repede foarte vizibil, mai ales dacă navigarea este folosită mult.

Unele implementări adaugă o tranziție de fade-in/fade-out pentru a face apariția unui mega-dropdown mai puțin bruscă, dar în practică are ca rezultat o creștere a întârzierii de intrare/ieșire la 0,8–0,9s, ceea ce introduce, de asemenea, o mai vizibilă. lag. Un exemplu în acest sens este ADAC.de, cu o întârziere de intrare de 100 ms și o tranziție de ieșire de 300 ms. (Totuși, tranziția nu se aplică atunci când comutați între diferite categorii ale mega-menui derulant.)

Evident, cu cât suprapunerea rămâne vizibilă mai mult timp, cu atât penalizăm mai aspru persoanele care doresc intenționat să scape de suprapunere. În realitate, aceasta devine o problemă, deoarece introducem un timeout superficial între acțiunea utilizatorului și răspunsul UI.

Căile de mișcare a șoarecelui care iertă: triunghiul traiectoriei

În loc să introducem o întârziere, putem încerca să fim mai generoși cu traseele pe care le vor parcurge clienții. Deoarece mișcările mouse-ului sunt în mod inerent inexacte, pentru a minimiza frustrarea, putem evita tunelurile înguste și putem mări coridoarele de călătorie.

De exemplu, putem folosi tehnica triunghiului Amazon, în care am construit un triunghi de traiectorie care conectează poziția curentă a indicatorului mouse-ului cu marginile zonei mega-dropdown. Dacă acea zonă ar trebui să apară lângă categoriile din dreapta (așa cum este afișat în imaginea de mai jos), conectăm indicatorul mouse-ului cu marginile din dreapta sus și din dreapta jos ale containerului în care sunt listate categoriile.

Atâta timp cât utilizatorul rămâne în triunghi sau în întreaga zonă mega-dropdown, suprapunerea este în continuare afișată. Dacă utilizatorul alege să călătorească în afara triunghiului , conținutul suprapunerii mega-menu derulant se va modifica în consecință. Și, desigur, va dispărea cu totul imediat după ce utilizatorul s-a mutat complet în afara listei de categorii.

Chris Coyier evidențiază unele dintre complexitățile tehnice ale acestei tehnici în postarea sa despre Meniuri derulante cu căi de mișcare a mouse-ului mai iertatoare, împreună cu o demonstrație JavaScript vanilie de Alexander Popov despre „Meniurile Aim-Aware”.

Cu această tehnică minimizăm frecarea dispariției bruște și a reapariției sub-navigației. Dar ar putea deveni ineficient dacă linkurile de categorii sunt poziționate prea aproape unele de altele sau dacă afișăm meniul de trecere cu mouse-ul trecând peste un buton mai mare. Ne putem descurca ceva mai bine cu zonele de ieșire a căii SVG.

Zonele de ieșire ale căii SVG

Când calculăm un triunghi de traiectorie cu tehnica anterioară, uneori nu numai că vom urmări poziția exactă a indicatorului mouse-ului, ci și recalculam triunghiul cu fiecare mișcare a indicatorului - tot timpul. Putem îmbunătăți strategia calculând suprafața totală de suprapunere SVG o dată și urmărind dacă indicatorul mouse-ului se află în interiorul acesteia - fără a recalcula triunghiul tot timpul. Un exemplu excelent este implementarea lui Hakim el Hattab, care desenează zonele în mod dinamic cu SVG, pe baza poziției elementului de navigare pe ecran.

Soluția lui Hakim este de fapt receptivă, așa că dacă sub-navigația nu se potrivește pe ecran, aceasta va pluti lângă elementul principal de navigare , afișat în lățime sau înălțime completă. Zona căii SVG va fi recalculată în consecință, dar numai dacă utilizatorul derulează vertical sau orizontal. Puteți vedea o demonstrație de lucru a tehnicii în acțiune în modul de vizualizare de depanare al modelului Meniu al lui Hakim.

Deși această opțiune este precisă și elimină în totalitate decalajul pe care l-am văzut cu întârzierile de trecere cu mouse-ul, va provoca pâlpâire atunci când clientul călătorește accidental printr-o listă mare de categorii, care solicită deschiderea mega-menu-lui drop-down pentru fiecare element de navigare.

Din nou, rădăcina problemei este că clienții nu au niciun control asupra momentului când se deschid și se închid mega-dropdown-urile și nici nu înțeleg adesea când vor apărea sau vor dispărea aceste meniuri. Această lipsă de predictibilitate duce adesea la greșeli și frustrări. Dar, uneori, mega-dropdown-urile au și mai multe probleme ascunse de accesibilitate.

Capcanele Mega-Dropdown-urilor care se deschid la Hover

După cum am menționat mai sus, toate tehnicile enumerate mai sus au același scop. Ei încearcă să prezică intenția utilizatorului de a deschide și închide meniul de navigare, bazându-se pe unele observații privind viteza mișcărilor mouse-ului, durata șederii într-o singură zonă sau poziția exactă pe ecran. Aceste previziuni vor eșua la un moment dat pentru unii clienți și nu se poate face prea multe în privința asta.

Mega-menusele derulante care se deschid la hover au o mulțime de probleme de accesibilitate. Evident, trebuie să sprijinim navigarea în cadrul mega-menu-lui derulant pentru utilizatorii care folosesc doar tastatură și trebuie să ne asigurăm că articolele sunt anunțate corect și cititorilor de ecran. Dar și în ceea ce privește aspectul general, trebuie să fim atenți cu privire la locul în care este plasat mega-dropdown-ul.

Căutare întreruptă de un mega-menu derulant

Dacă orice caracteristică importantă este afișată suficient de aproape de navigarea mega-dropdown, aceasta va cauza de obicei o cantitate mare de probleme și plângeri. De exemplu, dacă o bară de căutare este afișată deasupra zonei mega-dropdown, acest lucru va provoca în cele din urmă o cantitate incredibilă de frecare și frustrare.

Cu excepția cazului în care este utilizată o întârziere de intrare/ieșire suficient de lungă, mega-dropdown-overlay-ul va împiedica întotdeauna între căutare și rezultatele căutării, așa cum este cazul pe Thesauraus.com de mai jos. De fiecare dată când un utilizator se îndepărtează de bara de căutare către rezultate (și înapoi), mega-menu-ul derulant iese în cale.

Sub-navigații multiple care apar cu întârzieri

Experiența va fi greoaie atunci când există mai multe sub-navigații care se deschid la hover întârziat , una după alta. Un exemplu nefericit al acesteia în acțiune este site-ul web Vodafone de mai jos. Dacă în acest caz, fiecare element de navigare acționează și ca un link autonom către categorie (în plus față de deschiderea unui mega-menu derulant), ar trebui să ne așteptăm la multe clicuri furioase pe tot site-ul.

În exemplul de mai sus, există 4 niveluri de navigare afișate unul sub celălalt, iar 2 dintre ele se deschid la trecerea cu mouse-ul cu o tranziție de 300 ms . În același timp, deoarece fiecare titlu de categorie este și un link către pagina categoriei, utilizatorii pot sări și direct la pagina categoriei. Dar odată ce au făcut clic – și în timp ce așteaptă să apară noua pagină – meniul de trecere cu mouse-ul își va face apariția pentru scurt timp semi-întreruptă – adesea neavând suficient timp pentru a trece la vizualizarea corectă pentru a fi înregistrat de un client.

Adăugați la acesta orice probleme de memorie sau de procesare pe dispozitivul puțin mai vechi al utilizatorului, câteva extensii de browser grele și o verificare antivirus care rulează în fundal, iar experiența generală va deveni rapid insuportabilă.

În plus, deoarece al 4-lea nivel de navigare apare doar la hover dacă al 3-lea nivel de navigare este deja deschis, iar al 3-lea nivel de navigare apare doar la hover dacă al 2-lea nivel de navigare este deja deschis, pentru a vă deplasa între paginile celui de-al 4-lea. nivel, utilizatorii trebuie să redeschidă navigarea din nou și din nou și să-și amintească unde au făcut clic anterior pentru a trece tunelul la nivelul 4.

Practic, înmulțim întârzierile și problemele de hover tunel despre care am vorbit mai devreme, făcându-i întotdeauna pe utilizatori să aștepte să apară navigarea și cerându-le să fie foarte precisi într-un coridor de hover odată ce navigarea apare . De aici vine frustrarea.

În cazul în care trebuie să aveți de-a face cu o navigare complexă de acest fel, ar putea merita să testați dacă problemele dispar atunci când este utilizat doar un singur meniu (în loc de două) . Acel meniu ar fi puțin mai mare și ar include toate opțiunile în coloane. Sau, dacă este posibil, pentru fiecare categorie, luați în considerare afișarea tuturor opțiunilor de navigare din acea categorie ca o bară de navigare permanentă (bară laterală sau o bară superioară lipicioasă) - de obicei, ar trebui să elimine toate aceste probleme cu totul.

Titluri de categorii fac prea multe lucruri

După cum am văzut anterior, uneori titlurile de categorii au două funcții diferite . Pe de o parte, fiecare titlu de categorie ar putea fi legat de pagina categoriei, astfel încât clienții să poată face clic pe ele pentru a merge direct la pagină. Pe de altă parte, ar putea deschide și o suprapunere mega-dropdown. Deci, dacă utilizatorul trece cu mouse-ul peste titlu o perioadă suficient de lungă, mega-menu-ul drop-down se va deschide, dar este posibil ca utilizatorul să fi făcut deja clic pe un link, iar acest lucru va cauza pâlpâirea. Pentru clienți, este dificil să aibă așteptările potrivite atunci când interfața nu oferă cu adevărat indicii.

Există câteva opțiuni pentru a rezolva această problemă:

1. Pentru a indica faptul că titlul categoriei este un link, ar putea fi util să îl subliniați ,
2. Pentru a face distincția dintre titlul categoriei și un meniu derulant mai evidentă, adăugați un separator vertical (de exemplu, linie verticală) și o pictogramă (chevron),
3. Lăsați titlul categoriei să deschidă doar mega-menu-ul drop-down și adăugați un link către secțiunea „Acasă” a categoriei în suprapunerea mega-menu-derulant. Ar putea fi, de asemenea, un buton proeminent „Vedeți toate opțiunile” (vezi exemplul The Guardian de mai sus).

După cum am menționat mai sus, uneori puteți vedea o pictogramă suplimentară folosită pentru a indica faptul că meniul deschide o suprapunere, în timp ce titlul categoriei este un link. În testele noastre de utilizare, am observat că ori de câte ori este prezentă o pictogramă (și nu contează ce pictogramă este), utilizatorii fac adesea o distincție mentală între acțiunea care va fi solicitată printr-un clic pe o pictogramă și acțiunea solicitată. printr-un clic pe titlul categoriei.

În primul caz, se așteaptă, de obicei, să se deschidă un dropdown, iar în cel de-al doilea caz, să apară pagina categoriei. Mai important, ei par să se aștepte ca meniul să se deschidă la atingere/clic, în loc să treacă cu mouse- ul .

Mailchimp este un exemplu bun de mega-menu derulant care evită majoritatea problemelor descrise mai sus, titlurile categoriilor acționând doar pentru a deschide un mega-menu derulant. Meniul derulant este accesibil utilizatorilor de tastatură cu un stil :focus . Odată selectată, fiecare categorie este evidențiată ca subliniată și poate determina unii oameni să presupună că titlul s-a transformat într-un link, mai ales că sublinierea este exact aceeași pentru linkul „Preț” din partea de sus a navigației. Poate că evidențierea acesteia cu o culoare de fundal ar fi puțin mai rezistentă la glonț. Un exemplu grozav de referință de luat în considerare pentru meniurile de tip hover.

În general, pare a fi o idee bună să evitați supraîncărcarea titlurilor de categorii cu funcții multiple. Acest lucru este valabil nu numai pentru mega-meniurile drop-down, ci aproape pentru toate meniurile, inclusiv acordeoane sau sfaturi cu instrumente: întreaga zonă ar trebui să servească drept expansiune, afișând opțiunile de navigare atunci când se atinge sau se face clic. În cele mai multe cazuri, acest lucru este mai simplu și mai puțin frustrant în acest fel.

Crearea unui mega-menu derulant mai bun: Atingeți/Faceți clic pe Meniu

Unul dintre motivele comune pentru care mega-dropdown-urile se deschid adesea la hover, deoarece multe companii mari doresc să-și expună clienții la gama de opțiuni disponibile pe site, rapid. Odată cu schimbarea opțiunilor de navigare la trecerea cursorului, putem afișa mai multe opțiuni mai rapid, iar clientul poate explora mai multe opțiuni mai rapid, de asemenea. De aceea, este dificil să ne imaginăm un mare retailer de comerț electronic fără o suprapunere mare de navigare, de exemplu.

Cu toate acestea, este o idee bună să testați dacă timpul de interacțiune și ratele de clic rămân aceleași (sau cresc) dacă navigarea cu mouse-ul este înlocuită cu o navigare prin atingere/clic . De fapt, cele mai multe dintre problemele enumerate mai sus pot fi rezolvate cu ușurință făcând tocmai asta: suprapunerea mega-menu derulant se va deschide și se va închide numai atunci când utilizatorul solicită în mod explicit această acțiune specială. Prin urmare, nu este nevoie să urmăriți indicatorul mouse-ului sau să ajustați întârzierile de intrare/ieșire de la trecerea cursorului. În plus, deoarece oricum nu există hover pe mobil, trebuie să oferim o opțiune pentru a deschide meniul la atingere/clic pentru mobil într-un fel sau altul, astfel încât să îl putem păstra așa și pentru ecrane mai mari.

Un bun exemplu în acțiune este site-ul web al Muzeului Evreiesc din Berlin. Nu numai că bara de navigare de sus deschide mega meniuri derulante la atingere și faceți clic, dar și navigarea din bara laterală bazată pe pictograme. De asemenea, deoarece utilizatorul trebuie să deschidă/închidă activ suprapunerea, putem evidenția categoria selectată cu stilurile :focus / :active .

Site-ul web nu folosește nicio pictogramă pentru a indica faptul că meniul ar putea fi deschis sau închis, iar opțiunile de meniu nu sunt linkuri care conduc la o pagină separată. Acest lucru face ca experiența generală să fie foarte calmă și previzibilă, deși probabil mai lentă în expunerea opțiunilor de navigare în comparație cu meniurile hover.

Cu toate acestea, deoarece site-ul web nu are multe opțiuni de navigare de afișat, acest lucru pare să funcționeze foarte bine. Și acesta este un exemplu de referință grozav de reținut atunci când lucrați la un megamenu derulant accesibil care se deschide la atingere/clic.

Dacă aveți mai multă navigare, un exemplu puțin mai avansat este Allianz.de. În loc să utilizeze o singură suprapunere mare de mega-menu-derulant, sub-navigarea este grupată în meniuri derulante mai mici. Cu toate acestea, meniul nu afișează întotdeauna toate opțiunile pentru fiecare categorie. În schimb, evidențiază cele mai importante opțiuni , cu un link pentru a vedea toate opțiunile în partea de jos. Singurul detaliu care ar putea lipsi este un chevron care indică faptul că un meniu drop-down va apărea la clic.

Pe mobil, mega-dropdown este un grup de acordeoane , cu o alegere bună de contrast de culoare și indentare pentru a indica ierarhia navigației. Fiecare acordeon nu afișează niciodată mai mult de 4 elemente de navigare simultan. Un exemplu grozav de referință pentru o navigare complexă mega-menu derulant care funcționează bine.

Dacă sunteți în căutarea unei implementări tehnice, puteți verifica În Praise of the Unambiguous Click Menu, în care Mark Root-Wiley arată cum să construiți un meniu de clic accesibil. Ideea este să începeți să construiți meniul ca un meniu de trecere doar CSS care folosește li:hover > ul și li:focus-within > ul pentru a afișa submeniurile.

Apoi, folosim JavaScript pentru a crea elementele <button> , pentru a seta atributele aria și pentru a adăuga handlere de evenimente. Rezultatul final este disponibil ca exemplu de cod pe CodePen și ca depozit GitHub. Acesta ar trebui să fie un bun punct de plecare și pentru meniul dvs.

Acordeoane vs. suprapuneri vs. Meniuri împărțite pe mobil

Este de la sine înțeles că nu fiecare mega-menu derulant la atingere/clic are performanțe bune. Target.com este un alt exemplu interesant pentru o navigare accesibilă, mare, care evită aspectul cu mai multe coloane și arată doar un nivel de navigare la timp - toate se deschid la atingere/clic.

Meniul derulant arată opțiuni doar într-o singură coloană la un moment dat, astfel încât, pe măsură ce vă deplasați în cadrul categoriilor, rămâneți întotdeauna concentrat în aceeași suprapunere de pe ecran. Fiecare secțiune selectată preia întreaga coloană. Experiența este previzibilă și calmă, dar, din nou, clientul ar putea vedea mai puțină navigare la un moment dat.

Dinoffentligetransport.dk, un site web al serviciului de transport public din Danemarca, folosește mai multe coloane , cu navigarea în partea de sus completată cu o pictogramă chevron și deschiderea la atingere/clic.

În unele alte implementări, se pot vedea mai multe suprapuneri apărând una peste alta. De fapt, acesta este cazul la Unilever (exemplul de mai jos). Megamenul derulant se deschide la atingere/clic, cu mai multe chevronuri afișate în același timp. Ce reprezintă fiecare chevron? Și la ce ar trebui să se aștepte clientul când face clic pe ele?

„Mărcile noastre” duce la o pagină separată, în timp ce fiecare etichetă de sub ea deschide o nouă suprapunere de navigare deasupra mega-menu-ului derulant. Ați observat că „Toate mărcile” este subliniat, în timp ce restul opțiunii de navigare nu este? Se poate vedea intenția designerilor care creează meniul. Într-adevăr, „Toate mărcile” este un link, în timp ce celelalte etichete deschid o suprapunere:

Cu toate aceste opțiuni puse la punct, cum am merge prin afișarea unui mega-menu de navigare pe mobil ? După cum se dovedește, gruparea unor astfel de suprapuneri mega-dropdown pe mobil este dificilă: de obicei nu există suficient spațiu sau ajutor vizual pentru a evidenția diferite niveluri în mod diferit și a le face ușor de distins. În exemplul de mai sus, ar putea dura ceva timp să ne dăm seama pe ce pagină am ajuns de fapt.

Este puțin mai ușor de înțeles la ce nivel ne aflăm în prezent și ce opțiuni avem cu o abordare la acordeon, așa cum putem vedea pe Dinoffentligetransport.dk. Cu toate acestea, ar putea fi o idee bună să subliniați linkurile din fiecare subsecțiune, deoarece conduc clienții către pagina categoriei. De asemenea, întreaga bară de categorii ar trebui probabil să poată fi făcută clic și să extindă acordeonul.

În exemplul de mai sus, de cele mai multe ori probabil vom putea afișa o cantitate limitată de secțiuni de navigare la un moment dat. Dar dacă titlurile fiecărei secțiuni sunt relativ scurte, am putea împărți ecranul pe orizontală și am putea afișa mai multe niveluri în același timp. LCFC.com este un bun exemplu al acestui model în acțiune.

Care opțiune funcționează cel mai bine?

Din experiența mea personală, când comparăm implementările mega-dropdown-urilor pe mobil, acordeoanele verticale par a fi mai rapide și mai previzibile decât suprapunerile (fie că este vorba despre o singură coloană sau mai multe straturi). Și meniurile împărțite par a fi mai rapide și mai previzibile decât acordeoanele.

Există câteva avantaje pe care le oferă atât acordeoanele, cât și meniurile împărțite:

• Nu este nevoie să afișați un buton „Înapoi” pentru a reveni la pagina părinte.
• Ochiul nu trebuie să sară între partea de sus a meniului de navigare și sub-navigarea secțiunii cu fiecare salt.
• Clienții pot naviga mai repede între mai multe niveluri: în loc să apese „Înapoi” de mai multe ori, pot sări la acordeonul pe care îl consideră interesant.
• Clienții pot explora mai multe secțiuni în același timp (cu excepția cazului în care implementarea închide automat un acordeon când altul a fost deschis). Nu este posibil cu suprapuneri.

În general, acordeoanele și meniurile împărțite par a fi o opțiune mai bună . Dar nu par să funcționeze bine atunci când există multă navigație în loc. Ori de câte ori fiecare categorie are mai mult de 6–7 articole , sa dovedit a fi o idee bună fie să adăugați un buton „Răsfoiți toate” sub 6–7 articole dintr-un alt acordeon (sau pe o pagină separată), fie să utilizați suprapuneri.

Deci, în funcție de volumul de navigare, putem începe cu meniuri împărțite , apoi, dacă nu este viabil, treceți la acordeoane și, dacă navigarea devine încă complexă, în cele din urmă transforma acordeoanele în suprapuneri.

Când Mega-Dropdown ar putea să nu fie nevoie până la urmă

Am făcut referire la munca echipei Gov.uk deja în articolul precedent, dar cunoștințele lor sunt valoroase și în contextul mega-downdown-urilor. Pentru navigare mare, pe mai multe niveluri, echipa a decis să folosească constatările de la expertul în formulare Caroline Jarrett, principiul un lucru pe pagină. Potrivit lui Caroline, „întrebările care în mod natural „merg împreună” din punctul de vedere al designerilor […] nu trebuie să fie pe aceeași pagină pentru a funcționa pentru utilizatori”. Caroline l-a aplicat în primul rând la designul formularelor web, dar l-am putea aplica și în contextul navigării.

Ideea, prin urmare, este de a evita cu totul mega-downdown-urile complexe și de a oferi clienților o modalitate clară și structurată de a naviga prin tranșeele site-ului, de la o pagină la alta. În cazul Gov.uk, se pare că se întâmplă printr-o arhitectură informațională și ghiduri bine gândite, care conduc vizitatorii prin pași previzibili către obiectiv.

Kantonul Zurich folosește același model. În loc de straturi de navigare mega-dropdown, toate opțiunile sunt afișate într-un mod structurat, cu subiectele principale prezentate în partea de sus ca „Subiecte de top”, iar navigarea în fiecare secțiune afișată ca o bară de navigare lipicioasă în partea de sus.

O abordare alternativă este utilizarea modelului de navigare „Vreau să” . Pe lângă navigarea convențională, am putea oferi un „menu derulant de navigare” pentru a permite clienților să construiască o interogare de navigare la alegerea lor și să fie direcționați direct către pagina pe care o caută. Practic, este o serie de drop-down-uri care apar sub alta pentru a permite utilizatorului să selecteze ceea ce intenționează să facă sau să găsească pe site.

Pentru o vreme, modelul a fost folosit pe Commonbond (vezi videoclipul de mai sus) și este folosit și pe Corkchamber.ie. O modalitate interesantă, deși neconvențională, de a oferi acces la un nivel profund de navigare fără a fi nevoie să utilizați deloc un mega-dropdown.

Lista de verificare a designului de navigare Mega-Dropdown

De fiecare dată când aducem o conversație despre mega-meniuri derulante, toată lumea pare să se stabilească în câteva grupuri: unii colegi preferă hover, alții preferă atingeți și faceți clic, unii preferă ambele, iar pe alții nu le deranjează nici atâta timp cât există este atât un link de categorie, cât și o pictogramă care deschide meniul.

Este imposibil să spunem că o abordare este întotdeauna mai bună decât celelalte, dar atât în ​​ceea ce privește implementarea tehnică, cât și UX, deschiderea meniului la atingere/clic provoacă de obicei mult mai puține probleme și mult mai puține frustrari, permițând o implementare simplă și, astfel, rezultă într-o navigaţie previzibilă şi calmă. Înainte de a trece la un meniu de trecere cu mouse-ul, am putea încerca să păstrăm mai întâi comportamentul de atingere/clic, să măsurăm implicarea și să studiem dacă este necesară, până la urmă, trecerea cu mouse-ul.

Și, ca întotdeauna, iată câteva lucruri generale de care trebuie să țineți cont atunci când proiectați și construiți un mega-menu derulant:

• Evitați să plasați articole importante, utilizate frecvent în apropierea mega-menu-lui de navigare (de exemplu, bara de căutare, CTA, pictograma coș de cumpărături) (dacă treceți cu mouse-ul),
• Evitați mai multe sub-navigații în cadrul mega-menușului derulant care apar una după alta cu întârzieri (dacă treceți cu mouse-ul),
• Evitați supraîncărcarea titlurilor de categorii cu funcții multiple.
• Subliniați titlurile categoriilor pentru a le identifica ca link-uri către pagina categoriei (desigur, dacă sunt legate de pagina categoriei).
• Dacă puteți, adăugați un link „Acasă” sau un buton „Răsfoiți toate” în cadrul fiecărei subcategorii în loc să legați categoria direct.
• Evitați suprapunerile orizontale și luați în considerare înlocuirea lor cu acordeoane verticale și meniuri separate,
• Adăugați o pictogramă pentru a indica faptul că un titlu de categorie declanșează un mega-menu derulant la clic (de exemplu, chevron) și faceți-l întotdeauna suficient de mare pentru atingerea confortabilă (de exemplu, 50×50px),
• Evitați tranzițiile lungi de fade-in/fade-out când apare/dispare un mega-menu derulant (cel mult 300 ms),
• Luați în considerare testarea unui ghid structurat sau a unei interogări de navigare (model de navigare „Vreau să”) în loc sau în plus față de mega-menu-ul derulant.
• Evitați, dacă este posibil, meniurile cu mouse-ul mega-dropdown .