Cele mai bune practici de proiectare a meniului pe mai multe niveluri

Navigarea și găsirea sunt aspecte centrale ale designului experienței utilizatorului. Dacă utilizatorii nu pot ajunge unde doresc sau nu pot găsi ceea ce au nevoie, vor deveni frustrați și pot decide să caute în altă parte. Pe site-urile web cu arhitectură informațională deosebit de complexă, meniurile pe mai multe niveluri reprezintă o modalitate eficientă de a îmbunătăți navigarea și găsirea, oferind astfel experiențe web eficiente care promovează încrederea în produs și stimulează conversiile.

Deoarece produsele și dispozitivele pe care sunt utilizate variază foarte mult, nu există o soluție universală care să ofere meniul perfect pe mai multe niveluri. Cu toate acestea, există reguli generale care vă vor ajuta să construiți meniuri pe mai multe niveluri care îmbunătățesc navigarea și găsirea pe orice dimensiune a ecranului.

Sfaturi de proiectare pentru ecran de orice dimensiune

Un meniu bun pe mai multe niveluri ar trebui să aducă utilizatorii acolo unde trebuie să meargă rapid, prezentând informațiile într-o manieră clară și intuitivă. Înainte de a intra în liniile directoare specifice dimensiunii, să ne uităm la câteva practici care se aplică tuturor meniurilor.

Utilizați nu mai mult de două niveluri de submeniuri. Orice mai mult de două niveluri de submeniuri vor deruta și vor copleși probabil utilizatorii. Menținerea navigației relativ plată îmbunătățește găsirea pentru utilizatori și reduce sarcina cognitivă necesară pentru a-și aminti unde se află. Dacă structura paginii site-ului este profundă, luați în considerare adăugarea unui meniu de navigare local în partea de sus a paginilor strâns legate. De exemplu, Zoho, care proiectează produse complexe de asistență pentru afaceri, a plasat un meniu local specific produsului în partea de sus a fiecărei pagini de produs, chiar sub meniul principal. În timp ce meniul principal din partea de sus enumeră ofertele de bază ale Zoho, meniurile locale oferă acces la pagini cu informații mai detaliate, cum ar fi cazuri de utilizare și prețuri.

Submeniuri de semnalizare cu pictograme. Gestionați așteptările utilizatorilor clarificând întotdeauna când există submeniuri disponibile. Opțiunile familiare includ o pictogramă mică cu unghi în jos sau o pictogramă triunghi. De asemenea, luați în considerare răsturnarea pictogramelor indicator atunci când submeniurile sunt deschise.

Organizați informațiile în mod intuitiv. Asigurați-vă că ierarhia informațiilor se aliniază cu modelele mentale ale utilizatorilor. Pe un site de comerț electronic, de exemplu, luați în considerare dacă un cumpărător este mai probabil să se aștepte ca articolele să fie organizate după marcă sau tip de articol. Dacă un utilizator face clic pe categoria „Pantofi”, se va aștepta ca submeniul să prezinte opțiuni pentru adidași, sandale și cizme? Sau se vor aștepta să vadă un submeniu care listează fiecare marcă de încălțăminte pe care o deține magazinul? Privind atât cercetarea utilizatorilor, cât și cercetarea concurenților, va clarifica acest lucru.

Asigurați-vă că utilizatorii știu în orice moment unde se află. Evidențiați întotdeauna linkul din meniul principal care corespunde paginii în care se află utilizatorul. Dacă pagina curentă se află într-un submeniu, evidențiați linkul submeniului și elementul părinte din meniul principal, de asemenea. De exemplu, dacă cineva care folosește un site web guvernamental pentru a-și reînnoi permisul de conducere ar trebui să navigheze de la linkul „Rezidenți” din meniul principal la linkul „Servicii șoferi” din submeniu și apoi la o pagină cu un formular de reînnoire, atât „ Legăturile „Rezidenți” și „Servicii șoferi” vor rămâne evidențiate.

Păstrați copierea simplă. Un meniu nu este locul potrivit pentru jocuri de cuvinte inteligente; asigurați-vă că etichetele linkurilor au un parfum puternic de informații. Aceasta înseamnă să păstrați numele etichetelor simple și descriptive, astfel încât utilizatorii să știe imediat ce vor găsi atunci când dau clic. Cu cât copia este mai clară, cu atât utilizatorii vor găsi mai repede ceea ce au nevoie.

Prioritizează lizibilitatea. Utilizați un tip de caractere simple sans-serif și asigurați-vă o spațiere adecvată în jurul articolelor pentru a evita dezordinea. Asigurați-vă că fundalul este suficient de opac pentru a bloca orice se află în spatele meniului. Dar nu ignora brandingul general al site-ului. Deși lizibilitatea este pe primul loc, asigurați-vă că stilul meniului completează restul aspectului site-ului.

Faceți clicul și atingerea accesibile. Pentru a face meniul accesibil pentru utilizatorii cu deficiențe de control al motricității fine, urmați instrucțiunile Google Material Design și formatați elementele pe care se poate face clic pentru a avea o dimensiune de cel puțin 48 x 48 pixeli.

Sfaturi de proiectare pentru desktopuri

Chiar și cu o tendință în creștere către dispozitive mobile, există încă o mulțime de motive pentru care clienții pot avea nevoie de site-uri desktop cu caracteristici complete. De exemplu, ar putea fi nevoie să facă disponibile online mai multe informații decât este fezabil pentru un site mobil, cum ar fi un site web pentru o universitate sau o instituție financiară. Sau cercetările lor ar putea arăta că utilizatorii lor pur și simplu se bazează mai mult pe desktop-uri.

Un meniu de pe desktop ar trebui să fie ușor de scanat, să ofere interacțiuni clare și, desigur, să fie receptiv. De asemenea, ar trebui să fie cât mai consistent cu site-ul mobil pentru a face experiența intuitivă pentru vizitatorii care revin.

Meniurile ar trebui să se deschidă prin clic, nu cu mouse-ul. Una dintre cele mai fundamentale decizii pe care va trebui să le iei este modul în care utilizatorii vor accesa meniul site-ului. Va fi suficientă trecerea cursorului peste elementul părinte – numele categoriei – pentru a declanșa apariția meniului sau utilizatorii vor trebui să facă clic pe el?

Abordarea hover este populară, dar clic pentru a deschide este cea mai bună modalitate de a vă asigura că meniul funcționează în mod fiabil și intuitiv pe toate dispozitivele. Abordarea prin clic permite site-urilor web să funcționeze mai consecvent pe monitoarele computerelor tradiționale și pe ecranele tactile deopotrivă și evită multe frustrări care apar cu abordarea hover, inclusiv:

• Tuneluri înguste. Un tunel de hover este calea pe care trebuie să o parcurgă mouse-ul pentru a naviga menținând meniul deschis. Dacă este prea îngust, meniul poate dispărea înainte ca utilizatorul să ajungă la linkul dorit.
• Deschidere accidentală. Un meniu hover este predispus să se deschidă din neatenție dacă un utilizator încearcă să navigheze peste el în drum spre altă locație de pe pagină. Setarea unei scurte întârzieri rezolvă această problemă, dar poate provoca frustrare atunci când utilizatorul dorește să deschidă meniul.
• UX inconsecvent pe ecranele tactile. Meniurile de trecere cu mouse-ul nu funcționează pe ecranele tactile. Acestea necesită o remediere a codului pentru a detecta ecranele tactile și pentru a comuta la atingere pentru a deschide; pe măsură ce linia dintre laptop și tabletă se estompează din ce în ce mai mult, aceste soluții pot deveni învechite.
• Întrebări despre ce se poate face clic. Cu meniurile de trecere cu mouse-ul, utilizatorii nu știu întotdeauna dacă linkul părinte poate sau nu poate da clic până când încearcă să facă clic. Acesta este opusul intuitiv.
• Accesibilitate. Meniurile cu cursorul pot prezenta probleme utilizatorilor care folosesc cititoare de ecran sau navighează prin tastatură.

Alegeți aspectul potrivit: meniu drop-down vs. Mega. Dacă site-ul desktop folosește un meniu tradițional (o bară de meniu orizontală situată în partea de sus a paginii), există două tipuri de submeniuri pe care le puteți lua în considerare: un meniu standard cu o singură coloană sau un mega meniu cu mai multe coloane.

Luați în considerare utilizarea unui meniu derulant dacă categoria părinte conține mai puțin de opt linkuri. Dacă meniul derulant este suficient de lung pentru a necesita o derulare verticală, ar trebui să luați în considerare organizarea diferită a informațiilor - poate ca un mega meniu sau prin rafinarea categoriilor părinte.

Un mega meniu este un tip de meniu imbricat care utilizează de obicei un aspect larg care poate extinde lățimea browserului. Ar trebui să utilizați acest tip de meniu dacă submeniurile conțin multe link-uri diferite care pot fi grupate în coloane. De obicei, vedeți astfel de meniuri pe site-uri mari de comerț electronic.

Când proiectați un mega meniu, luați în considerare următoarele:

• Adăugați imagini sau pictograme pentru a face informațiile mai ușor de scanat.
• Adăugați titluri la paginile asociate grupului.
• Adăugați descrieri dacă numele categoriilor nu sunt evidente.

Mega meniurile pot fi dificil de citit și de navigat pe mobil, dar uneori îmbunătățirea UX pe un ecran mai mare face ca merită să faci munca suplimentară pentru a reconfigura informațiile pentru dispozitivele mobile.

Adăugați stări clare de trecere cu mouse-ul. Chiar și cu meniuri cu clic pentru a deschide, inclusiv stări clare de trecere cu mouse-ul pentru toate elementele pe care se poate face clic, face interacțiunile satisfăcătoare și asigură utilizatorii că linkurile sunt active. Puteți face fundalul zonei pe care se poate face clic să fie ușor mai întunecat pentru a indica o stare de trecere. Doar asigurați-vă că zona de trecere cu mouse-ul se potrivește cu zona pe care se poate face clic. Dacă testele arată că utilizatorii au nevoie de mai multe îndrumări sau context, luați în considerare adăugarea de nume de etichete mai descriptive sau un sfat explicativ, atâta timp cât nu blochează nimic important.

Faceți clic pentru a închide submeniurile. Păstrați lucrurile intuitive închizând meniurile atunci când utilizatorii dau clic în altă parte sau când deschid un alt submeniu. Așa funcționează câmpurile de introducere derulante în formulare, astfel încât majoritatea utilizatorilor vor găsi acest lucru familiar.

Activați navigarea cu tastatura pe desktop. Nu toată lumea folosește un mouse pentru a naviga, așa că meniul ar trebui să permită utilizatorilor să navigheze folosind doar o tastatură. Aceasta înseamnă că toate legăturile ar trebui să aibă stări focalizate distincte, astfel încât utilizatorii să poată vedea unde se află dintr-o privire. De obicei, un cadru de culoare mai închisă funcționează bine pentru a indica starea focalizată.

Sfaturi de design pentru ecrane mobile

Dacă nu proiectați deja în primul rând mobil, va trebui să optimizați meniul pentru un dispozitiv portabil. Aspectele tradiționale de meniu rareori funcționează bine pe ecrane foarte mici - dacă pur și simplu micșorați bara de meniu de pe desktop, nimeni nu o va putea citi. Aceste instrucțiuni vă vor ajuta să treceți cu succes la micul ecran.

Simplificați meniul principal. Deoarece ecranele smartphone-urilor sunt atât de mici, multe dintre informațiile pe care le-ați găsi într-un meniu de pe desktop vor trebui ascunse inițial. Bara de meniu principală va trebui să fie foarte simplă, dar este o idee bună să afișați cele mai importante link-uri pentru a îmbunătăți găsirea. Puteți atașa bara de meniu în partea de jos sau în partea de sus a ecranului.

Adăugați un declanșator de meniu. Deoarece tot sau o parte din meniul mobil poate fi ascuns, utilizatorii vor avea nevoie de o modalitate de a-l găsi. Adăugarea unei pictograme hamburger în bara de meniu sau într-un buton plutitor ușor de accesat este o soluție populară, pe care mulți utilizatori o vor recunoaște. Cu toate acestea, meniul de hamburger nu este singura alegere. Dacă proiectați pentru utilizatori mai în vârstă, ar putea fi mai bine să utilizați o casetă cu cuvântul „Meniu”, de exemplu. Sau, dacă doriți să faceți caracteristicile site-ului mai proeminente, poate doriți să le afișați într-un meniu cu file în partea de sus sau de jos.

Puneți meniul într-o bară laterală. Există multe moduri diferite în care puteți crea un meniu mobil. Puteți utiliza un aspect cu lățime completă, care funcționează în orice situație; un sertar de jos, care este cel mai bun atunci când există doar câteva legături; sau un meniu circular de colț, care este o opțiune cu aspect futurist pentru un meniu mic fără submeniuri. O opțiune bună este să utilizați o bară laterală cu un fundal întunecat, translucid, care blochează conținutul paginii, eliminând astfel distragerile și le permite utilizatorilor să o atingă cu ușurință pentru a o închide. Luați în considerare, de asemenea, folosirea unei animații cu glisare de la stânga pentru a evita o experiență tulburătoare. Pentru meniurile din bara laterală și din sertarul de jos, asigurați-vă că meniul poate fi derulat vertical, astfel încât nimic să nu fie tăiat pe ecranele mai mici sau în modul peisaj.

Permite utilizatorilor să închidă cu ușurință meniul. Utilizatorii pot atinge intuitiv un meniu pentru a-l închide, dar ia în considerare și adăugarea unui buton X. Puteți transforma pictograma hamburger într-un X sau puteți adăuga una în colțul din dreapta sus al meniului.

Utilizați secțiuni extinse pentru submeniuri individuale. Luați în considerare utilizarea secțiunilor extinse dacă meniul are un singur nivel de submeniuri. Puteți să le extindeți sub elementul părinte și să utilizați o culoare de fundal diferită pentru claritate. De asemenea, puteți permite utilizatorilor să extindă mai multe submeniuri în același timp. Luați în considerare utilizarea unui unghi în jos sau a unei pictograme triunghi în partea dreaptă a elementului părinte pentru a indica faptul că este disponibil un submeniu.

Înlocuiți mega meniuri și submeniuri multiple cu meniuri suprapuse. Dacă trebuie să extindeți mai mult de un submeniu sau să reconfigurați un mega meniu, optați pentru o abordare suprapusă: în loc să extindeți un submeniu sub sau lângă părinte, solicitați submeniului să înlocuiască părintele. Cu această abordare, va trebui să includeți un link „Înapoi” pe toate panourile, cu excepția primului nivel. Pentru meniul de nivel superior, luați în considerare utilizarea unei pictograme unghi drept sau a unei săgeți la dreapta pentru elementele părinte.

Pre-deschideți submeniuri. Pe desktop, este util să evidențiezi pagina curentă și părintele acesteia. Pe ecranele mici, luați în considerare un pas mai departe. Dacă un utilizator atinge pentru a deschide meniul principal și pagina în care se află în prezent se află într-un submeniu, luați în considerare deschiderea automată a submeniului, astfel încât utilizatorul să înțeleagă unde se află în raport cu restul elementelor din meniu.

Păstrați-l clar și consecvent

Navigarea este o componentă crucială a experienței clienților. Utilizatorii nu doresc să meargă într-o vânătoare de scavenger sau să petreacă mai mult timp făcându-și drum prin meniuri decât trebuie. Dacă nu găsesc cu ușurință ceea ce au nevoie, pot lega resursele clientului dvs. printr-un apel de asistență sau, mai rău, își pot duce afacerea în altă parte.

Un meniu pe mai multe niveluri bine conceput este o componentă cheie a oricărui site web cu o arhitectură informațională complexă. Deși aceste instrucțiuni nu ar trebui să înlocuiască niciodată cercetarea și testarea utilizatorilor, ele vă vor fi de folos într-o mare varietate de cazuri de utilizare.

Citiri suplimentare pe blogul Toptal:

• Ghidul cuprinzător al arhitecturii informaționale
• Design receptiv: cele mai bune practici și considerații
• Principiile arhitecturii informaționale pentru mobil (cu infografic)