Încărcare...
Te afli aici:  Prima pagină  >  EnciclopedUX  >  Pagina de mai jos...

Totul despre meniurile mega drop-down

Scris, tradus sau adaptat de la 10 mai 2012 și are un comentariu

În anul 2009, expertul în uzabilitate Jakob Nielsen susţinea că mega meniurile bine proiectate ar putea spori gradul de uzabilitate al site-ului.

Mega meniurile au o serie de avantaje faţă de tradiţionalele meniuri derulante (drop-down), însă şi câteva dezavantaje serioase. Dar să le luăm pe toate la rând.

Meniurile de navigare mega drop-down au apărut ca răspuns la scopurile şi necesităţile utilizatorului.

Având în vedere că meniurile derulante simple sunt pline de probleme de uzabilitate, acestea au fost înlocuite cu timpul, pe alocuri, cu meniurile mega drop-down.

Jared Spool, expert în uzabilitate, explică popularitatea instantă de care s-au bucurat mega meniurile: „Mega meniurile par a fi o idee atât de bună. La urma urmei, ele fericesc echipa de marketing, odată ce elimină toate elementele de navigare de pe prima pagină, lăsând destul loc pentru noutăţi şi tot soiul de mesaje destinate vizitatorilor. Totodată, mega meniurile oferă designerilor multă flexibilitate în posibilităţile de afişare a principalelor link-uri de pe site.”

Mega meniurile au următoarele caracteristici:

  • Panouri mari bidimensionale divizate în grupuri de opţiuni de navigare;

  • Opţiuni de navigare structurate cu ajutorul layout-urilor, fonturilor şi, uneori, a pictogramelor;

  • Vizibilitatea rapidă a conţinutului, fără a fi necesară derularea listei (scrolling);

  • Apariţia meniurilor verticale/orizontale atunci când sunt activate de la bara de navigare superioară sau a meniurilor mega fly-out – în cazul activării din bara de navigare din stânga paginii.

Unele mega meniuri apar şi cu un buton de închidere („x” în colţul din dreapta sus), dar el nu este necesar. Meniurile mega drop-down sunt temporare şi dispar de la sine atunci când utilizatorul mişcă cursorul mouse-ului către o altă categorie din meniul de navigare principal sau către o altă regiune a paginii.

Din punct de vedere stilistic, meniurile mega drop-down sunt similare meniurilor și barelor de instrumente din Panglica Office (Ribbon), introdusă odată cu Microsoft Office 2007 ca parte a interfeței de utilizator Office. Panglica a fost proiectată în scopul facilitării lucrului cu aplicațiile Office și ca să ajute utilizatorii să descopere caracteristicile și capacitățile variate din Microsoft Office.

Totodată, meniurile mega drop-down mai oferă şi un alt beneficiu faţă de tradiţionalele meniuri drop-down: acestea afişează indicii (tooltips) atunci când utilizatorul poziţionează cursorul asupra unei opţiuni. Pentru meniurile de navigare simple s-ar folosi, în acest caz, doar nişte link-uri, în locul indiciilor text.

Mega meniurile depăşesc meniurile tradiţionale

Testările au demonstrat că mega meniurile drop-down funcţionează mai bine decât meniurile drop-down tradiţionale, oferind câteva avantaje de uzabilitate. Iată câteva argumente în acest sens:

  • Opţiuni vizibile – în cazul site-urilor mai mari, cu multiple funcţii, meniurile drop-down obişnuite pur şi simplu ascund majoritatea opţiunilor destinate utilizatorilor, iar dacă utilizatorul nu percepe structura site-ului, el se va simţi în pielea unui adevărat explorator în căutarea categoriei şi opţiunii râvnite. Da, derularea opţiunilor e posibilă, dar (a) necesită efort şi (b) derularea ascunde opţiunile afişate iniţial. Ca rezultat, e imposibil de comparat vizual toate opţiunile disponibile, astfel că rămâne de bazat doar pe memoria vizuală a utilizatorului. Vizitatorii şi aşa au destule griji, aşa că dacă le solicitaţi să recurgă şi la implicarea memoriei de scurtă durată în utilizarea site-ului dvs., veţi reduce efectiv din plăcerea navigării pe site. Meniurile mega drop-down afişează totul dintr-o dată, astfel încât utilizatorii să poată vedea şi nu memora.

  • Organizarea opţiunilor – meniurile derulante tradiţionale, de obicei, nu permit gruparea opţiunilor. Pe când meniurile mega drop-down permit evidenţierea relaţiilor stabilite între itemi, gruparea lor în seturi logice, astfel că utilizatorii înţeleg mult mai bine opţiunile puse la dispoziţie.

  • Imagini şi pictograme – un text simplu prezentat poate fi impecabil, dar ilustraţiile vor valora mult mai mult, exemplu servind Microsoft Word 2007. Meniurile mega drop-down facilitează utilizarea pictogramelor, imaginilor şi sunt chiar, adesea, concepute pentru a avea diverse ilustraţii care să comunice şi să confirme vizitatorului conţinutul site-ului. Iar dacă veţi opta doar în favoarea unui text simplu, veţi avea la dispoziţie o gamă largă de fonturi, care vă vor ajuta în diferenţierea textelor, link-urilor.

Aspecte problematice ale meniurilor mega drop-down

Meniurile drop-down, formate din panouri bidimensionale, chiar pot facilita navigarea pe site, însă doar în cazul în care sunt bine proiectate. În alte cazuri, site-ul va fi sortit eşecului în domeniul uzabilităţii.

Mega drop-down-urile devenite atât de populare, sunt aplicate pe larg, însă în graba de a le implementa multiple site-uri aleg o cale greşită. Experţii recomandă să vă asiguraţi că aveţi de câştigat de pe urma implementării meniurilor de navigare mega drop-down, în special să atrageţi atenţie asupra indicatorilor ce ţin de performanţă (trendul vânzărilor spre exemplu).

În continuare, vom prezenta aspectele problematice esenţiale cu care se confruntă designerii în proiectarea mega meniurilor cu recomandările de rigoare.

1. Viteza

În implementarea unui meniu mega drop-down viteza este esenţială, pentru realizarea unei interfeţe de utilizator receptive. Elementele interfeţei trebuie să răspundă în maximum 0,1 secunde pentru a sugera funcţionalitatea site-ului şi a-i determina pe utilizatori să perceapă modificările apărute la ecran ca rezultate directe ale acţiunilor sale. Redarea lentă ale elementelor de interfaţă grafică va încetini procesul şi va crea utilizatorilor impresia că computerul e cel care dirijează.

Ar trebui să vă testaţi meniurile mega drop-down din punctul de vedere al timpului de redare la diverse computere şi browsere. Includeţi şi cele mai populare platforme de acum 5 ani, pentru că e un număr destul de mare de utilizatori care încă le mai folosesc.

Nu faceţi redarea prea rapidă. În cazul elementelor ce se afişează la staţionarea cursorului asupra lor, timpul de redare se recomandă a fi de 0,5 secunde. Este cazul meniurilor mega drop-down sau al indiciilor text.

Încălcând această recomandare, utilizatorii vor fi deranjaţi continuu, la orice mişcare de cursor, de licărirea ecranului. Doar după 0,5 secunde de staţionare a indicatorului mouse-ului pe unul din elementele de navigare, puteţi să vă asiguraţi că utilizatorul chiar intenţionează să vizualizeze drop-down-ul asociat.

Aşadar:

  1. Aşteptaţi 0,5 secunde.

  2. În cazul în care cursorul este încă poziţionat deasupra unui element de navigare, afişaţi drop-down-ul asociat în decurs de 0,1 secunde.

  3. Menţineţi afişat drop-down-ul asociat până când cursorul se află mai mult de 0,5 secunde în afara zonei barei de navigare şi a drop-down-ului. Iar atunci, ascundeţi-l – în cel mult 0,1 secunde.

O situaţie ce merită atenţie, referitoare la punctul 3, este „problema diagonalei” care se manifestă atunci când utilizatorul vrea să ajungă la unul din elementele drop-down-ului asociat, intersectând în acelaşi timp zona activă din bara de navigare a unei alte categorii decât cea aferentă drop-down-ului dorit. Web site-urile bine proiectate „simt” această mişcare a utilizatorului şi lasă vizibilă lista de navigare secundară a primei categorii pentru mai mult de 0,5 secunde. Mulţi utilizatori vor reuşi să mişte cursorul mouse-ului din zona activă a categoriei în mai puţin de 0,5 secunde, dar trebuie luaţi în consideraţie şi utilizatorii mai puţin iniţiaţi, care vor mişca mouse-ul atât de încet, încât drop-down-ul va dispărea în timp cei ei vor încerca disperaţi să ajungă la elementul dorit.

2. Gruparea opţiunilor într-un mega meniu

Principalele recomandări în gruparea meniurilor sunt:

  • Separaţi opţiunile pe seturi logice, la fel ca în cazul cord sorting-ului (sortarea cartonaşelor) – tehnică prin care utilizatorii aranjează fiecare element în funcţie de caracteristicile lui într-o structură ce i se pare logică.

  • Menţineţi un nivel mediu de detalizare. Nu exageraţi cu un număr prea mare de grupuri cu numeroase opţiuni aferente, care ar necesita mai mult timp pentru vizualizarea lor integrală. Totodată nu creaţi grupuri individuale prea mici cu drop-down-uri ample, dificile de înţeles.

  • Utilizaţi nume concise, dar descriptive pentru fiecare grup de categorii. Ţineţi cont de regulile scrierii pe web (web writing): sporiţi capacitatea utilizatorilor de a „scana” conţinutul printr-un cuvânt cât mai consistent, dar totodată evitaţi termenii complicaţi. Folosiţi cuvinte scurte şi directe, „verbe tari” în locul locuţiunilor verbale. Diferenţiaţi numele categoriilor, ca să nu induceţi în eroare utilizatorul.

  • Ordonaţi grupurile şi opţiunile. Puteţi recurge la aranjarea într-o ordine logică a elementelor conform etapelor consecutive de lucru sau conform importanţei lor, plasând cel mai important sau mai frecvent utilizat element în vârful listei (în cazul unui drop-down vertical) sau în partea stângă (pentru listele orizontale, luând în consideraţie specificul scrisului de la stânga spre dreapta, precum e cazul limbii române).

  • Afişaţi fiecare opţiune o singură dată. Dublând opţiunile, utilizatorii se vor întreba dacă cele două elemente sunt la fel sau sunt diferite. Surplusul face întreaga interfaţă să pară mai mare şi mai greoaie.

3. Păstraţi simplitatea meniurilor mega

Recomandarea fundamentală a uzabilităţii de a păstra simplitatea este valabilă şi pentru meniurile mega drop-down. Doar pentru că aţi putea include orice doriţi în ele, nu înseamnă că ar trebui chiar să o faceţi.

Evitaţi utilizarea elementelor interfeţei grafice care presupun o mai complicată interacţiune cu utilizatorul decât simplele acţiuni „click-to-go”. Meniurile mega drop-down sunt doar nişte liste temporare, ele nu trebuie să înlocuiască casetele de dialog (dialog box), care sunt, de altfel, destinate unor interacţiuni mai complexe şi chiar le şi suportă mai bine. Printre alte avantaje, casetele de dialog au o metodă standardă de revocare – butoanele OK/ Cancel, ce rămân afişate pe ecran atât timp cât nu sunt dezactivate şi pot fi mişcate în orice parte a ecranului, dacă utilizatorul doreşte, spre exemplu, să vizualizeze informaţia aflată în spatele casetei.

Evitaţi includerea în bara de navigare a unor categorii precum „Contul meu”, care să afişeze în drop-down un adevărat mini-ecran de autentificare. Este de preferat ca astfel de categorii să fie activate cu un simplu link, care să direcţioneze utilizatorii către o nouă pagină de autentificare, sau, în caz ideal, categoria respectivă să se afle în poziţia lor obişnuită – colţul drept superior, unde se află, de obicei, toate butoanele utilitare.

În mod similar, dar şi mai grav, e cazul când meniul mega drop-down include în lista sa de opţiuni şi caseta de căutare (search box). Este grav deoarece:

  • caseta de căutare trebuie să fie mereu vizibilă pe pagină şi nu doar atunci când utilizatorii activează meniul drop-down,

  • prezenţa elementelor de interfaţă grafică (un câmp de text sau un buton de comandă) îngreunează interacţiunea cu meniul mega drop-down în loc să o faciliteze.

4. Accesibilitate şi vizualizare

Deoarece elementele dinamice ale ecranului întotdeauna pot cauza probleme de accesibilitate, este important să le codaţi adecvat cu cititoarele de ecran (screen reader) şi alte tehnologii.

Chiar dacă sunt codate corect, mega meniurile drop-down oricum ar putea cauza probleme pentru utilizatorii ce se confruntă cu probleme de vedere şi care utilizează lupa de ecran (screen magnifier) pentru a mări porţiuni diferite ale ecranului (problemă ce afectează, de asemenea, utilizatorii de iPhone-uri şi ai altor dispozitive mobile). De obicei, partea mărită va afişa doar o porţiune a meniului mega drop-down. Zonele de margine vor fi omise pentru că nu sunt încărcate cu vreun semnal vizual puternic, de genul umbrei, creând astfel impresia unui meniu complet. În acest caz, site-ul pierde din vânzări, vizite, click-uri – este o situaţie comună site-urilor destinate utilizatorilor în etate.

De asemenea, elementele selectabile mici deranjează utilizatorii de ecrane tactile (touchscreen) şi sunt dificile pentru a fi depăşite de către utilizatorii cu deficienţe motorii.

Problema mega meniurilor este că ele chiar sunt mega. Respectiv ele pot crea probleme şi la vizualizarea meniului, în special atunci când e vorba de dimensiunile ecranului. Mega meniurile pot deveni complet nefuncţionale în cazul în care utilizatorul vizualizează pagina web printr-un ecran îngust, cum ar fi cel al telefoanelor mobile sau al netbook-urilor. Se va afişa doar o parte a mega meniului, iar restul opţiunilor, care pot fi destul de extinse, vor rămâne în afara zonei vizibile şi nu vor putea fi accesate. Bineînţeles, aţi putea derula pagina, dar e de-a dreptul enervant. În cazul unui meniu tradiţional situaţia e simplă, însă în cazul mega meniurilor – utilizatorul nu va putea derula liniştit ecranul. De ce? Deoarece mega meniul drop-down e afişat doar atât timp cât cursorul e poziţionat deasupra meniului. Dacă mişcaţi cursorul către bara de derulare, mega meniul va dispărea. Şi aici deranjaţi vizitatorul. Deci, chiar e complicat de utilizat mega meniul la un ecran îngust.

În căutarea unei soluţii, întru îmbunătăţirea accesibilităţii şi vizualizării meniurilor mega drop-down, puteţi recurge la una din cele două abordări principale:

  • Simplă – nu vă complicaţi să creaţi un drop-down accesibil în sine. În locul acestui efort, încercaţi să faceţi din fiecare categorie din bara meniului de navigare principală o zonă clickabilă, care să direcţioneze utilizatorul către o pagină web obişnuită, unde să-i prezentaţi toate opţiunile drop-down-ului într-o manieră amplă şi accesibilă. Aici însă, se impune sarcina atriburii caracteristicilor unui link fiecărui element, astfel ca vizitatorii să îşi dea seama că au posibilitatea accesării acestor categorii nu doar prin meniul drop-down.

  • Avansată – includeţi scurtăturile de la tastatură (keytip) pentru a adăuga accesibilitate meniului de navigare. Keytip-urile servesc ca alternative pentru accesarea unor elemente şi sunt uşor de înţeles. Un model de lucru cu keytip-urile poate fi următorul:

  • Tastaţi „Alt” pentru a intra în regimul keytip.

  • Tastaţi unul din caractere pentru a alege o categorie din bara de navigare şi pentru a afişa drop-down-ul asociat cu cheile corespondente fiecărei opţiuni de meniu.

  • În drop-down, lăsaţi utilizatorul să tasteze unul sau două caractere pentru a selecta opţiunile. Deoarece cheia de acces e afişată atât timp cât drop-down-ul este în regim de keytip, utilizatorul nu are nevoie să se bizuie pe memorie.

Dacă e vorba de un site amplu sau sunteţi preocupaţi de accesibilitate, puteţi implementa ambele abordări. Deşi, totuşi, multiple site-uri vor prefera abordarea simplă, anume pentru simplitatea ei.

Mega-caracteristici pentru opţiuni semnificative

Mega meniurile oferă cel puţin două avantaje imense, care permit:

  • Structurarea opţiunilor în panouri şi zone specifice – divizaţi clar zonele aferente fiecărei categorii şi subcategorii. Evitaţi separarea unei liste de opţiuni asociate unei singure categorii pe mai multe zone, deoarece creaţi confuzie şi abuzaţi de conceptul mega meniului. Categoriile din liste lungi trebuie structurate în subcategorii, fiecare cu un subtitlu propriu. Totodată, evitaţi „pădurile” de opţiuni care ascund „copacii” – bineînţeles că este o metaforă, dar care e chiar valabilă situaţiei când în faţa ochilor utilizatorilor apare o adevărată „pădure” de opţiuni din care este practic imposibil de găsit în mod rapid „copacul” necesar. Meniul mega drop-down nu reprezintă harta site-ului. Utilizatorul va fi copleşit de abundenţa opţiunilor şi ar putea renunţa într-un final. Este o variantă facilă pentru designeri, dar nu şi pentru utilizatori, ei fiind cei care fac alegerile. În fine, doar pentru că mega meniurile sunt mari şi au destul spaţiu pentru multiple opţiuni, nu înseamnă că ar trebui să le supraîncărcaţi. Respectaţi simplitatea. Mai puţine opţiuni înseamnă mai puţin pentru a „scana”, mai puţin pentru a înţelege, mai puţin pentru a greşi.

  • Ilustrarea opţiunilor – imaginile trebuie să comunice un anumit mesaj, trebuie să fie însoţite de un meniu, cu un nume semnificativ, simpla lor prezenţă nu adaugă valoare site-ului. Ca de obicei, în ceea ce priveşte design-ul interfeţei grafice pentru utilizator, urmaţi zicala „doar pentru că poţi, nu înseamnă că ar trebui”. Meniurile mega pot beneficia de pe urma implementării ilustraţiilor, însă numai atunci când ele ilustrează opţiuni actuale şi facilitează „scanarea” conţinutului. Se cunoaşte deja că utilizatorii ignoră imaginile lipsite de conţinut de pe paginile web. Meniurile trebuie editate riguros, chiar mai mult decât paginile web în totalitate. Meniurile ar trebui să se focalizeze pe îmbunătăţirea opţiunilor oferite utilizatorilor şi să-i ghideze cât mai rapid posibil către destinaţia dorită. Ele trebuie să explice şi să structureze opţiunile astfel ca utilizatorii să nu fie impuşi în a citi o listă lungă de categorii.

Aranjarea în ordine alfabetică: în coloane, nu rânduri

Unele website-uri adoptă nişte principii de organizare a meniurilor greu de înţeles la prima vedere, care complică semnificativ „scanarea” site-ului. E important să conştientizaţi că utilizatorii nu au timp să studieze design-ul site-ului dvs. pentru a înţelege de ce aţi inclus un anumit element într-un loc anume. Şi, din păcate, în cazul în care utilizatorii nu percep rapid structura, este foarte probabil ca aceştia să prefere mişcări dezordonate pe site.

Ordonarea elementelor meniului drop-down trebuie să fie verticală, deoarece utilizatorii tind să „scaneze” vertical conţinutul site-ului. Orientarea orizontală este caracteristică textelor narative. Iar un meniu nu este un text narativ. Acesta urmează a fi „scanat” şi nu citit.

Aranjarea elementelor în meniurile drop-down nu presupune neapărat ordonarea alfabetică (de la A la Z). Ordinea alfabetică nici nu mai contează atunci când, de exemplu, elementele sunt aranjate orizontal. Utilizatorii vor ignora, pur şi simplu, şirul alfabetic, urmând direcţia verticală a meniului, sau vor atrage atenţie conţinutului aflat în mijlocul drop-down-ului.

6 probleme ale mega meniurilor enunţate de către Spool

Şi Jared Spool a specificat într-unul din articolele sale că mega meniurile ar putea să declanşeze o serie de probleme. El stabileşte 6 argumente împotriva mega meniurilor, care, de fapt, nu sunt caracteristice doar mega meniurilor şi nu sunt chiar atât de problematice în opinia noastră.

  1. Meniurile nu sunt butoane. Odată ce meniul nu este un buton, utilizatorii nu vor şti că ei trebuie să facă ceva pentr a-l extinde. De fapt, ei pur şi simplu, nu vor şti că meniul se poate extinde şi vor intenţiona să facă un click, pentru a vizualiza opţiunile. Iar această variantă e mai binevenită decât eventualitatea neafişării meniului mega drop-down.

  2. Lipsa cuvintelor declanşatoare. Cu alte cuvinte, deoarece mai multe opţiuni vor fi ascunse, utilizatorii nu vor şti că ele există. Iar afişarea tuturor opţiunilor pe o pagină întreagă, asemeni hărţii site-ului nu va soluţiona problema.

  3. Numele categoriilor insuficient de semnificative. Este o problemă a tuturor meniurilor de navigare şi ţine de probleme de structurare a informaţiei mai mult decât de problema interfeţei.

  4. Utilizatorii aşteaptă până a mişca mouse-ul. Deci, dacă ei nu pot vizualiza ce doresc, vor sta „paralizaţi” fără a face vreun click. Şi, iarăşi, nu e problema doar a mega meniurilor. Ci a categoriilor din bara de navigare principală. Nu contează că e vorba de un meniu simplu, tradiţional drop-down sau mega drop-down, utilizatorii vor reacţiona la mesajul categoriilor din bara de navigare principală, şi dacă li se va părea interesant – le vor accesa. Cel puţin, mega meniul drop-down elimină problema „paraliziei” utilizatorului la fiecare categorie/ subcategorie, limitându-se doar la meniul principal de navigare.

  5. Mega meniurile ascund informaţia din spatele lor. Aceasta problemă apare când utilizatorul trece întâmplător cu indicatorul mouse-ului peste meniul de navigare care ascunde conţinutul site-ului. Este un moment neplăcut, dar într-un site bine proiectat, meniul dispare atunci când utilizatorii trec cu cursorul în afara zonei active a meniului şi acest fapt este cunoscut de mai mulţi utilizatori. Această problemă pare a fi mai puţin însemnată din punctul de vedere al uzabilităţiii, decât problema afişării neintegrale a meniului la ecranele mai mici, unde secţiuni întregi ale meniului nu sunt vizibile, clickabile sau, în genere, utilizabile.

  6. Probleme cu dispozitivile fără indicatoare. Trecem, încetul cu încetul, la aparate care nu necesită utilizarea cursorului, mouse-ului, astfel că pot apărea probleme la afişarea meniului extins. Iarăşi nu e vorba despre o problemă specifică mega meniurilor, problema fiind de altfel soluţionată, dovadă servind telefoanele cu ecran tactil.

Surse: Raised by Turtles, Use it

Despre cine a scris sau tradus și adaptat acest articol

avatar

Senior Contributor @ UX.md

Studentă masterandă la Jurnalism European. Licenţiată în Ştiinţe Economice. Însetată de cunoaştere, de corectitudine şi de frumos. Contribuie la dezvoltarea UX.MD traducând articole.

  • http://www.facebook.com/ion.bargan Ion Bargan

    Util articol, chiar îmi doream să aflu mai multe despre meniurile mega drop-down. Cred că acesta este viitorul prezentării categoriilor pe interfața site-urilor, cel puțin până va fi inventat ceva mai comod.

Citește în continuare...

landing-pages-1

Practici bune pentru paginile de destinație (landing pages)

Citește →