Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

mercoledì 23 luglio 2014

Web Design : la funzione Menù

web usability design web design menù di navigazione internet
www.freebiezz.com
 Il "Menù" è uno strumento attraverso il quale in base ad una tassonomia possiamo effettuare delle scelte.
Dire quali siano tutte le tipologie presenti nel Web Design è assai dura in quanto essendo una funzionalità che si è affermata de facto i designer si sono sbizzarriti con la fantasia e la creatività e quindi è preferibile parlare delle versioni principali che si sono più affermate.


  • Menù ad una colonna: (widget proprietario del CMS) un classico a cui non rinunciare e con cui non è possibile sbagliare (o quasi...) usato per le pagine di navigazione se integrate funzionalità da Sito Web al Blog. Questa tipologia di menù è quello da cui si è sviluppata l'architettura/interfaccia di navigazione nella storia del Web e perciò non necessità di capacità di interpretazione in fatto di Web Usability da parte del'utenza.
  • Menù multi-livello: (CSS e Javascript) possono essere più o meno complessi e sono usati per tassonomie complesse per blog che di norma trattano con molti argomenti non necessariamente soggetti ad obsolescenza temporale. Possono includere anche foto per promuovere al meglio talune categorie. E' preferibile scegliere quelli realizzati attraverso i fogli di stile (CSS) a quelli con javascript per il caricamento più veloce mentre è tassativo verificarne la stabilità nel mantenere l'elenco dei link aperti quando il puntatore del mouse viene passato sopra e che non presenti nervosismi di alcun genere pena la non usabilità da parte dell'utenza.
  • Menù drop down: (CSS e Javascript) o a discesa vengono posti sopra l'header o subito sotto ed offrono il vantaggio di lasciare la pagina pulita per il resto delle attività oltre all'insindacabile vantaggio di rimanere sempre presente e disponibile durante lo scrolling della stessa durante la navigazione fruizione dei contenuti. Quest'ultimo è un vantaggio non da poco in ottica dell'Usability che diviene più user friendly ed esplicitata oltre che a ridurre sensibilmente il carico cognitivo deputato alla ricerca delle risorse ed i tempi di navigazione per effettuare scelte e selezioni. A mio modesto modo di vedere rimane il migliore basti pensare che ha anche il vantaggio di replicare il sistema di navigazione del più noto social media-network distribuito su scala planetaria.  (Leggi : Web Design efficacie? = Copiare Facebook)
  • Menù a selezione/scomparsa: (libreria javascript): viene usato per salvaguardare lo spazio di una pagina e di norma si attiva cliccando su una iconcina a forma di "+". Solitamente si apre un campo in cui vi sono degli approfondimenti in relazione alla voce accanto a cui è posta l'icona. Ritengo questa soluzione per quanto stilisticamente molto gradevole ed elegante una sciccheria adatta a pochi esperti con un bel po' di ore di navigazione alle spalle e che fa' troppo affido alla perspicacia dell'utente anche con un alto livello di expertise in quanto basta essere già sovraccarichi a livello cognitivo per ignorarle anche consapevolmente mentre l'obiettivo preferibile è sempre quello di mirare all'immediatezza.
  • Menù a scorrimento orizzontale: (CSS) lo ritengo tanto bello quanto poco usabile e quindi più da considerarsi di rifinitura che basilare ai fini della navigazione. Oltretutto spesso presentano una velocità troppo elevata ai fini dell'usabilità ed una cattiva stabilità.
Ovviamente il mio CMS di riferimento è Blogger mentre se cambiate piattaforma è probabile che vi siano lievi differenze malgrado ciò il punto focale su cui si deve basare la scelta di un menù è la soddisfazione delle necessità di navigazione del vostro blog e che l'usability non venga compromessa per alcun motivo:
"La comprensione dello schema di navigazione dev'essere votata all'immediatezza più esasperata e non deve portare ad interpretazioni complesse ed a possibili sovraccarichi cognitivi.

Visual Design:

Come ogni widget-gadget-funzionalità Web che si rispetti dopo aver scelto quale tipologia adoperare nel proprio layout è opportuno applicare le giuste posizioni dopo aver soppesato le valutazioni inerenti le best practice e le linee guida della Web Usability ed il Visual Design:
  • Menù Principale: deputato alla navigazione appunto primaria senza la quale non potremmo scegliere e poi consultare le categorie presenti in un Blog. Non solo non ne saremmo a conoscenza ma dovremmo affidarci solo all'obsolescenza temporale scandita dalla pubblicazione in HomePage e dal numero di post che essa può ospitare. L'eccezione sono le etichette che però essendo disposte a nuvola comportano un forte impegno cognitivo e dispendi temporale.
  • Menù secondario: serve per la navigazione di pagine che fungono da Sito Web integrato al Blog in cui appunto inserire una descrizione dell'attività, la SiteMap i Form per processi da interazione complessa e quant'altro si renda necessario per esplicitare il vostro servizio come per svilupparne di ulteriori.
  • Menù Footer: posto a piè di pagina potrebbe risultare quasi poco visibile per coloro che navigano la prima volta il Blog o che sono poco esperti in quanto presenta di norma una gran varietà di Link; tuttavia consente di non tornare in cima alla pagina agli utenti esperti e di aggiungere notizie aggiuntive come di pagine ulteriori quando abbiamo occupato tutto la spazio primario e secondario di funzionalità a cui abbiamo dato la precedenza. Nel mio style sono solito aggiungere sia una head line che descrive il core business dell'attività come un modulo contatti in quanto credo al total-frontal-page per esigenze date dalla ricerca dell'immediatezza e dall'alta visibilità prodotta dal contrasto del colore appunto del footer con gli spazi bianchi da compilare che fungono da magnete per l'attenzione dell'utenza.
  • Menù Sidebar: ritengo questa soluzione piuttosto di stile più che di usability in quanto è sempre meno visibile rispetto al sopra/sotto all'header. Deputare alla visione periferica una funzione così importante come il menù lo trovo un esercizio di stile inutile e assai barocco altro che non si scelga di adoperarlo per funzioni accessorie che sempre per ragioni di spazio non sappiamo più dove inserire.
  • Senza menù: scelta al quanto ardita che costringe l'user a reperire solo contenuti diciamo freschi di recente pubblicazione. Spesso molti blog non presentano neanche una Sitemap o le Etichette quindi consiglio per lo meno la presenza di quest'ultimi per consentire all'utenza una conoscenza più approfondita dei contenuti che avete prodotto. Talune volte non basta una pagina "About" anche scritta ad arte per conquistare fiducia ed interesse ed è necessario leggere i contenuti dell'autore per farsi un'idea o trovare ciò che stavamo cercando provenendo dalla navigazione dalle pagine di un motore di Ricerca. Infine in astrazione nessuno potrà mai sapere di cosa avete scritto.