Ce este Mobile Menu (Hamburger Menu)?

Definiție Mobile Menu (Hamburger Menu)

Mobile menu (meniul hamburger, dupa iconita cu 3 linii orizontale) este meniul de navigare adaptat pentru dispozitive mobile. Pe ecrane mici, meniul complet nu incape, asa ca este ascuns in spatele unei iconite. Trebuie sa fie usor de deschis, navigat si inchis, cu elemente suficient de mari pentru atingere.

De ce contează Mobile Menu (Hamburger Menu)

Pe dispozitivele mobile, meniul hamburger este singurul punct de acces la navigarea completa a site-ului — un meniu lent, confuz sau nefunctional blocheaza efectiv 60%+ din vizitatorii site-ului. Studiile UX arata ca 52% din utilizatori isi reduc increderea intr-o companie cand experienta mobila este slaba. Desi iconita hamburger a devenit universala, multe implementari sufera de probleme de performanta si accesibilitate.

Cum verifici Mobile Menu (Hamburger Menu)

SoftAudit testeaza meniul mobil la rezolutiile standard (360px, 390px, 414px) verificand: viteza de deschidere (sub 300ms), accesibilitatea cu screen reader (aria-expanded, aria-controls), functionarea sub-meniurilor pe mai multe niveluri si posibilitatea de inchidere prin buton, swipe sau click in afara meniului.

Greșeli frecvente

Animatia de deschidere a meniului care blocheaza interactiunea pentru 500ms+ frustreaza utilizatorii obisnuiti cu aplicatii native fluide. Lipsa butonului explicit de inchidere (X) si imposibilitatea de a inchide meniul prin tap in afara lui forteaza utilizatorul sa gaseasca singur solutia, ceea ce multi abandoneaza.

Bune practici

Implementeaza meniul ca un off-canvas panel cu tranzitie CSS transform (nu JavaScript animation) de maxim 200ms. Adauga aria-expanded pe butonul hamburger, trap focus-ul in interiorul meniului deschis si inchide-l cu Escape, click/tap exterior si butonul X vizibil. Limiteaza adancimea la maxim 2 niveluri pe mobil.

Întrebări frecvente

Termeni asociați