Prima di decidere il tipo di menu, considera prima dove sarà nel layout. Sinistra o destra? Verso l’alto o allineato con il basso? Naturalmente, gli utenti hanno delle abitudini, ma non c’è né ci sarà mai un design ideale che ogni utente scava, indipendentemente da un miliardo di altri fattori. Ecco perché le specifiche dello scopo del sito web sono così importanti. Inoltre, se vuoi davvero assicurarti che il tuo sito web e la sua funzionalità di navigazione siano facili da usare, considera di fare uno studio sulla sua usabilità, su un buon campione. Un buon menu del sito web deve essere coerente con un sito web generale ed essere orientato all’utente.

1. Menu della barra delle schede orizzontale : utilizzato principalmente su pagine più piccole, di solito è una scheda nella parte superiore della pagina, proprio sopra il campo del contenuto.

Tale soluzione, sebbene trovata abbastanza spesso, presenta sia vantaggi che svantaggi. La chiarezza è sicuramente un vantaggio; così è il fatto che un tale menu è perfettamente visibile subito dopo essere entrati nel sito. Inoltre, non occupa troppo spazio dedicato ai contenuti. Sembra anche abbastanza naturale. Per quanto riguarda gli aspetti negativi: richiede una pianificazione perfetta prima del lancio del sito a causa del numero limitato di slot – è difficile espanderlo con nuovi pulsanti, soprattutto quando entrano in gioco diversi dispositivi di visualizzazione. Di solito ci sono circa 6-8 slot. Inoltre, qualsiasi testo di collegamento in un tale menu deve essere breve, preferibilmente di una parola. I menu orizzontali possono essere utilizzati sia come unico strumento di navigazione, sia in combinazione, ad esempio, con menu laterali (ad esempio per le sottocategorie).

2. Menu a discesa, menu a comparsa, menu a comparsa, ecc .: sono menu orizzontali, ma presentano vari sottomenu di schede a discesa. Una soluzione molto apprezzata, in particolare nell’e-commerce. Le categorie principali sono allineate lungo il menu orizzontale e, dopo averci posizionato sopra (a volte solo dopo aver fatto clic), viene visualizzato un sottomenu con le sottocategorie.

Questa soluzione presenta tutti i vantaggi e gli svantaggi di un menu orizzontale standard. Un ulteriore vantaggio, tuttavia, è la chiarezza che offrono: tutte le sottocategorie sono chiaramente collegate alle loro categorie principali, suggerendo così all’utente dove si trovano all’interno del sito web. Inoltre, è una soluzione davvero intuitiva: se ben progettata, la logica dietro le pagine e le pagine sarà ovvia per chiunque. Per quanto riguarda gli svantaggi: questo menu può occupare molto spazio nel layout della pagina principale, spingendo tutto il contenuto verso il basso, tuttavia, con i sottomenu a discesa, di solito non è un problema. Il menu a discesa funziona bene fino a una struttura di navigazione a 2 livelli; più sono presenti le categorie “sotto-”, meno chiaro diventa il menu.

3. Menu laterale : un elenco, che di solito struttura una categoria sotto l’altra. A volte, un elenco di sottocategorie si espande lateralmente (non è una soluzione perfetta, a proposito, richiede una precisione del cursore quasi perfetta per fare clic sul collegamento giusto, specialmente con menu a più livelli), come nel caso della foto. I menu laterali si trovano spesso, soprattutto negli e-commerce con un’ampia gamma di prodotti. Può supportare il menu in alto o essere un elemento completamente separato. Di solito si trova sul lato sinistro (poiché le persone nella maggior parte dei paesi del mondo leggono da sinistra a destra, quindi in teoria, il menu è il primo a inciampare). A meno che il tuo obiettivo non sia convincere l’utente a leggere prima il contenuto e solo dopo guardare il menu, quindi allinearlo con il bordo destro.

Come puoi vedere, il design incentrato sull’utente deve essere culturalmente sensibile; conosci sempre il tuo utente di destinazione – mentre la maggior parte delle lingue sono sinistro-destrale – leggi da sinistra a destra, altre sono destro-sinistra – quindi, altrimenti; anche il movimento degli occhi durante la scansione di un sito web è culturalmente relativo (per alcuni utenti vengono prima gli sguardi e solo dopo si passa alla selezione delle categorie – i fattori qui sono abitudini, consumismo, ecc.).

Un menu laterale consente di strutturare un’ampia gamma di prodotti per categoria: i collegamenti a lungo elenco staranno bene al suo interno. Inoltre, è una buona soluzione quando è necessaria una navigazione a più livelli, che mostri ancora chiaramente le relazioni tra categorie e sottocategorie. Anche i nomi lunghi non sono un problema: i nomi delle categorie possono contenere anche poche parole. Inoltre, un tale menu è scalabile – l’aggiunta di nuove categorie non è un problema – quindi sembra una buona scelta se stai cedendo alla possibilità dell’espansione dell’offerta.

Lo svantaggio del menu laterale è che spesso occupa molto spazio sul sito web; inoltre è meglio comunicare chiaramente che i livelli di categoria possono essere ulteriormente esplorati – per rendere l’intera struttura il più chiara possibile.

È sicuramente una soluzione molto diffusa. Spesso integra il menu in alto. Ad esempio, la barra in alto elenca le categorie principali, collegandosi alle pagine, dove è disponibile anche un menu laterale con sottocategorie, il tutto per una navigazione del sito web ancora più agevole.

L’e-commerce nella foto sopra utilizza sia il menu in alto che quello laterale, e anche i cosiddetti breadcrumb – link alle pagine visitate in precedenza. Questo rende la navigazione del sito ancora più intuitiva.

4. Menu Hamburger : un’icona per un menu nascosto che si apre per impostazione predefinita. Utilizzato principalmente in app mobili, siti Web e portali; reso famoso nel 2010 da Facebook, che ora ha allontanato questa soluzione. “Hamburger”, perché sembra uno 🙂

Tuttavia, l’icona stessa risale agli anni ’80, essendo un progetto di Norm Cox (co-fondatore di Cox & Hall, una delle principali società di design) per Xerox.

Questo tipo di menu funziona particolarmente bene su tutti i dispositivi mobili: app o siti Web, tuttavia, vengono spesso utilizzati anche come soluzione desktop. Si adatta alle ultime tendenze del design visivo. Dopotutto, il minimalismo governa il design in tutto il mondo. Alcuni si oppongono ai menu degli hamburger, sostenendo una chiarezza insufficiente di tale soluzione, almeno non per tutti.