i menu visuali

tecnica web design
f Simona De Robertis
– [email protected] e Silvia Burigana – [email protected]
i menu visuali
Q
uando progettano menu iconici, i creativi
del Web partono prima di tutto da un’analisi approfondita delle finalità del sito e degli utenti ai quali quest’ultimo intende rivolgersi. Icone luminose, morfologicamente originali, ludiche e dai cromatismi
accesi si prestano per ambienti di intrattenimento e per un target più adolescenziale. Al contrario,
icone molto semplici e rigorose possono adattarsi a contesti Web funzionali o informativi, rivolti prevalentemente a
un pubblico esperto e professionale. Anche il meccanismo
di funzionamento dei menu visuali e il loro specifico rapporto con l’interfaccia varia in funzione delle esigenze comunicative e del grado di esperienza degli utenti tipo.
Navigare per immagini
La scelta delle icone che compongono i menu visuali è
uno dei momenti progettuali più critici. A queste, infatti,
è delegato il compito di rappresentare e sintetizzare i
contenuti delle sezioni sottostanti o delle azioni messe a
disposizione dell’utente, senza tuttavia trascurare l’impatto
emotivo o funzionale che si vuole ottenere. La scelta di
utilizzare icone che rappresentano fedelmente oggetti
della realtà quotidiana consente, per esempio, di rendere
il menu intuitivo. È un menu, in sostanza, che si presta
a essere fruito da un pubblico molto vasto, che spesso
ricerca un ambiente Web graficamente appagante. Il sito
ufficiale di Barbie [www.barbie.com] è un valido esempio di
menu ambientale, che diviene un tutt’uno con la schermata
complessiva dell’interfaccia Web. Il sito, dedicato alle
LE TIPOLOGIE DI MENU
amanti della famosa bambola americana, consente loro di
navigare all’interno del sito attraverso il facile e immediato
riconoscimento degli oggetti che popolano il mondo
di Barbie. Si tratta di un’esplorazione ludica, in perfetta
sintonia con i codici e i segni identificativi del giocattolo.
I menu ambientali si integrano perfettamente al layout di
pagina, richiamando fedelmente lo stile, i cromatismi e le
font caratteristiche del brand. Sono menu che coinvolgono
gli utenti in un gioco esplorativo, invogliandoli a proseguire
nella navigazione per scoprire che cosa c’è in un’altra «stanza». Talvolta si riprende lo schema di un videogioco a più livelli, ma non sempre ci si rivolge ai più giovani. Si ricreano
strade, case e persino aeroporti, come nel sito di Flamingo
[www.flamingo-international.com], che ci fa salire a bordo di un
jet su una pista d’atterraggio con relativa sala d’attesa, per
poi scoprire che nel sito si parla di tutt’altro e che la modalità d’interazione mira soprattutto a comunicare i virtuosismi
grafici e tecnici dell’azienda rappresentata. Il limite di questi
menu risiede nella scarsa flessibilità e nelle relative difficoltà d’aggiornamento. Si tratta, quindi, di soluzioni applicabili
e consigliabili per quegli ambienti Web che presentano una
struttura molto semplice, lineare e costante nel tempo.
Nel caso si voglia ricostruire online un negozio con un catalogo prodotti che richiede frequenti aggiornamenti sulle categorie e sulla disponibilità della merce, per esempio,
diventa strategico prevedere un’area di catalogo coerente
con l’interfaccia e con i codici del brand, ma completamente autonoma dal punto di vista grafico e funzionale; un vero e proprio shop online, distinto dalla navigazione ambientale del sito.
LE TIPOLOGIE DI MENU
testuali
didascalici
simbolici
Il linguaggio iconico
permette di dare
una forte caratterizzazione
alla navigazione
di un sito attraverso
metafore di oggetti
e funzioni specifiche.
È necessario, però,
valutare bene
obiettivi e destinatari
testuali
didascalici
simbolici
www.barbie.com
nka.com.mk
www.flamingo.com
www.porte-voix.com
visuali
visuali
I menu visuali-didascalici utilizzano immagini e oggetti, disegni e simboli che rappresentano fedelmente
il contenuto della sezione corrispondente
I menu visuali-simbolici fanno un uso fortemente creativo di immagini e simboli
e giocano sulla sorpresa e sull’impatto emotivo
Internet News dicembre 2002
77
tecnica web design
L’uso improprio
di un sistema
iconico
Il sito Migueluza
[www.migueluza.com] o il sito
porte-voix
[www.porte-voix.com/mac]
sono un valido esempio
di uso improprio di un sistema
iconico: può rivelarsi un divertente
e suggestivo metodo
di navigazione per quei siti
che vogliono proporsi in Rete
in chiave del tutto creativa
e originale, meno per chi mira a
comunicare informazioni
oppure offrire servizi.
Nei due significativi esempi,
le icone metaforizzano
aree contenutistiche ben definite
o addirittura un sistema operativo
fortemente connotato
e si offrono ai visitatori
quali ambienti da scoprire,
semplicemente interagendo
con essi.
Nella schermata iniziale, il menu di Barbie è integrato nel file in Flash e l’animazione si
attua attraverso semplici rollover. Nelle successive aree il menu e gli altri contributi per la
navigazione sono sviluppati in DHtml e sono compatibili con Netscape . e Opera ..
È un menu di semplice utilizzo anche se, generalmente, la barra orizzontale è sempre indice
di menu a cascata, che invece in questo caso specifico viene a mancare
Il menu è realizzato interamente in Flash e integrato nel file principale. Preso
singolarmente non è molto difficile da realizzare, ma nel complesso delle
interazioni sicuramente richiede una conoscenza approfondita dell’ActionScript.
È ben integrato nel dinamismo della pagina ed è di facile utilizzo e consultazione
Metafore e simboli
Il menu è sviluppato in
Html. I link richiamano
funzioni Javascript per aprire
nuove finestre in modalità
chromeless, che tuttavia è
supportata solo da Internet
Explorer. In Netscape, dopo
il clic su una voce, si aprirà
una finestra a popup
Non tutte le icone sono autoesplicative e non
tutte le immagini rappresentano direttamente
i contenuti della sezione sottostante: talvolta
costituiscono dei punti interrogativi, delle evocazioni che introducono gli utenti in una particolare atmosfera. Quando tutto questo è il risultato di una scelta consapevole e parte di un
progetto mirato, possiamo parlare di menu visuali-simbolici. Sono generalmente quelli preferiti e maggiormente gratificanti per i Web designer, in quanto consentono loro di esprimere
la propria creatività, attraverso soluzioni grafiche dal forte impatto emotivo e suggestivo. In
generale, questa peculiare tipologia gioca più
sull’intuizione e sull’effetto «a sorpresa» piuttosto che sulla funzionalità. Questa tipologia di
menu si presta a valorizzare tutti quei progetti Web che si pongono l’obiettivo di stupire, di
destare interesse e restare fortemente impressi nella memoria dei loro utenti. Si prestano,
quindi, a tutte le presenze online che non vo-
gliono offrire informazioni dettagliate, ma che
al contrario intendono comunicare una suggestione, una particolare filosofia, un’emozione e
tutto ciò che niente ha a che fare con la funzionalità e la concretezza della Rete. Spesso e
volentieri, inoltre, sono siti costruiti grazie alle
nuove tecnologie, che richiedono tempi di scaricamento molto lunghi, giustificati da una successiva gratificazione visiva e sensoriale.
L’effetto sorpresa è una delle più comuni chiavi
di lettura di questo genere di menu.
Nel caso del sito nka [nka.com.mk//nka.htm],
sviluppato in Flash, al passaggio del mouse
l’utente attiva inaspettatamente i rettangoli
verticali, che si colorano e si animano svelandone i contenuti nascosti.
Generalmente questo particolare tipo di menu
richiede d’essere fruito da un utente esperto e
paziente, che sappia apprezzare con attenzione e curiosità la soluzione innovativa, anche
laddove quest’ultima richieda tempi d’attesa
piuttosto lunghi.
L’utilizzo di Flash consente di creare un puntatore differente da quello standard del browser. La personalizzazione deve, però, essere compatibile con le norme generali di usabilità
78
Internet News dicembre 2002
Il menu è realizzato in DHtml e Php. È costituito
da una serie di livelli che vengono accesi o spenti
a seconda delle scelte d’interazione dell’utente. Si
tratta di un sistema molto complesso,che utilizza
diffusamente Javascript
Testo e immagini s’incontrano
In molti casi, i menu di navigazione vedono la
presenza simultanea di elementi verbali e iconici, che solo raramente producono un fastidioso e
problematico effetto di ridondanza. Spesso e volentieri, infatti, quest’integrazione riesce a generare elementi che sono al contempo informativi
e creativi, strumenti funzionali e graficamente interessanti, che non degenerano in inutili ermetismi difficilmente decodificabili o in noiose e monotone etichette verbali. Fra questi menu, alcuni utilizzano elementi grafici e testuali in qualità
di supporto descrittivo al contenuto della sezione che rappresentano. Questa scelta è tanto più
sensata quanto più i link testuali sono poco rappresentativi dei contenuti delle pagine a essi collegate. In altri casi, come per esempio nel sito largedesign [www.largedesign.com], la componente
grafica e cromatica è utilizzata per rendere
logica e ordinata la lettura del menu testuale, che consente all’utente di comprendere
immediatamente la struttura delle pagine e
Il menu principale di sinistra è interamente sviluppato in Flash.
Gli effetti applicati sono semplici rollover alle voci che gestiscono
anche la pianta presente sulla destra. Il menu che s’ncontra in
alcune sezioni - nella parte alta della pagina - è un semplice rollover
di voci testuali, ottenuto attraverso l’utilizzo dei Css
delle differenti aree del sito.
Il sito deepend [www.deepend.it] ha scelto una soluzione visuale molto bilanciata, all’interno della
quale elementi grafici e testi complementari vivono in perfetto equilibrio. La mappa dell’ufficio
è interattiva e consente ai visitatori di navigare
all’interno dell’ambiente; le componenti testuali,
invece, esplicitano e raccontano i contenuti relativi ad ogni differente ambiente o postazione di
lavoro. Gli elementi grafici e testuali possono anche essere progettati in forma più simbolica, dosando gli elementi a disposizione, al fine di approdare a una metafora visiva connotante che,
se correttamente interpretata, possa facilitare la
navigazione, rendendola allo stesso tempo esaustiva, interessante e originale. Nel sito artistasu
[www.artistasu.com], per esempio, le differenti sezioni sono connotate da un cromatismo riconoscibile e rappresentativo: l’utente, cliccando all’interno di una boccetta di colore, accede all’area corrispondente, intrisa dei codici cromatici della boccetta stessa.
z
Il menu laterale è tutto sviluppato in Flash.
È di facile realizzazione, se si possiede una
sufficiente conoscenza del software
e dell’Actionscript
I programmi da scoprire
Sothink DHTMLMenu
[www.sothink.com] è un programma (in
versione trial, , MB di set up) che consente
di realizzare menu DHtml molto complessi,
senza che sia necessario conoscere alcun
linguaggio di programmazione. L’interfaccia
del programma è intuitiva e semplice da
utilizzare. Cliccando su Top Level Menu si accede
a un pannello di controllo utile all’iniziale
configurazione del menu che si desidera
ottenere; una volta effettuata questa prima
configurazione, il programma consente
l’inserimento delle voci di menu principali. È
inoltre possibile scegliere font, colori di sfondo,
immagini da inserire ed effetti rollover.
Cliccando su Preview è possibile controllare
direttamente sul browser il risultato delle
scelte effettuate, per poi procedere con tutte
le modifiche o le integrazioni del caso. Il
programma offre, inoltre, una vasta raccolta di
template, che si possono utilizzare e modificare
facilmente.
Cliccando sul pulsante Publish è possibile
inserire il menu all’interno della pagina Web
attraverso una procedura di pubblicazione
guidata.
Internet News dicembre 2002
DHTML Menu Builder
[software.xfx.net/utilities/dmbuilder]
è un altro programma (in versione trial, , MB
di set up) utile alla creazione di menu dinamici
e consente di creare menu professionali senza
che sia necessario scrivere una sola stringa di
codice. Non richiede l’installazione di plug in né
la compilazione Html e, attraverso procedure
molto semplici, offre la possibilità d’inserire
all’interno delle proprie pagine Web menu
dall’aspetto professionale. Il software consente,
inoltre, di associare alle immagini effetti speciali
e di generare oggetti di navigazione intuitivi e
grafici. I menu creati con questo programma
presentano un codice che risulta compatibile
al  con Internet Explorer , , ., .,
Netscape Navigator  e , Opera , Mac e Linux.
79