Le regole da seguire nella creazione di un dropdown menu usabile.
I menu a tendina sono un’ottima soluzione per rendere accessibili più pagine ai visitatori del sito. Possono essere realizzati usando solo i CSS o anche JavaScript, ma è comunque necessario rispettare alcune regole:
* Le voci devono avere un’area estesa, comodamente selezionabile, per consentire una navigazione facile. Sono sconsigliate le etichette di testo troppo lunghe.
Dropdown menu
* E’ utile un ritardo di qualche frazione di secondo su apertura e chiusura del menu, per evitare attivazioni involontarie spostando il mouse
* Il menu deve potersi riposizionare a seconda delle dimensioni della finestra del browser, spostandosi in un’area visibile quando si trova vicino ai margini della stessa. Un classico errore è mostrato nell’immagine: Un esempio di menu a tendina con comportamento errato, ai margini della finestra del browser.
* All’apertura della tendina, l’utente deve vedere tutte le voci insieme, senza necessità di effettuare scroll della pagina
* I link di primo livello devono avere una destinazione, che sarà utilizzata anche se il menu non è accessibile (ad esempio JavaScript disabilitato)
* Un menu a tendina non è una mappa del sito, è inutile e dannoso elencare tutte le pagine
* Le voci selezionate dall’utente all’interno del menu dovrebbero rimanere evidenti Menu con voci selezionate
* Il menu dovrebbe essere perfettamente navigabile anche da tastiera
* I menu realizzati esclusivamente con i CSS spesso sono poco usabili: a volte è meglio evitarli. Senza JavaScript infatti non è possibile gestire alcuni aspetti come il ritardo sull’apertura e sulla chiusura.
* Con JavaScript disabilitato il sito deve essere comunque navigabile
* Le voci dei sottomenu è bene che siano accessibili agli screen reader senza nasconderle con display: none (ma con position: absolute) Queste regole andrebbero rispettate in ogni occasione: per alcune potrebbe essere concessa qualche eccezione a seconda delle circostanze, ma alcuni requisiti come l’usabilità sono fondamentali. Un menu a tendina deve essere facile da utilizzare, perchè è il mezzo principale per far navigare gli utenti nel vostro sito. In certi casi conviene mantenere un menu classico, se l’alternativa deve essere poco usabile. Esempi di menu a tendina Esistono diverse risorse disponibili per realizzare un menu a tendina senza troppi problemi. Non tutte però seguono i principi elencati: ve ne segnalo un paio. Potete usarle come un ottimo punto di partenza per i vostri siti:
* Free CSS DropDown menu Framework: una soluzione modulare, con diversi temi grafici già pronti
* MenuMatic: un plugin per la libreria Mootools che trasforma una lista di link HTML in un menu a tendina Se conoscete altre risorse interessanti segnalatele pure nei commenti, le aggiungerò a questa lista.
Related articles
- Likno Software Releases New Version 5.3.870 of AllWebMenus, its Popular Drop Down Menu, CSS Menu and JavaScript Menu Builder (prweb.com)
- Create a cool CSS-based drop-down menu (huaweichris.wordpress.com)
