Docstoc

2.2_Il_sito_della_Esselunga__www.esselunga.it___con_il_menu_

Document Sample
2.2_Il_sito_della_Esselunga__www.esselunga.it___con_il_menu_ Powered By Docstoc
					FIGURA 2.2
Il sito della Esselunga (www.esselunga.it), con il menu principale in orizzontale, sotto il marchio.




FIGURA 2.3
La mappa del sito di www.esselunga.it, la cui home page è mostrata nella Figura 2.2.
                                                                               FIGURA 2.12
                                                                               Una site map che utilizza lo schema
                                                                               grafico della metropolitana di Londra.
                                                                               La metafora non è comprensibile,
                                                                               e non ci aiuta certo a costruirci
                                                                               un modello mentale del sito.
                                                                               La mappa risale a qualche anno fa,
                                                                               ora è stata abbandonata
                                                                               (www.yell.co.uk).




FIGURA 2.19
La mappa del sito della Regione Toscana (www.regione.toscana.it) ha una grafica complessa, che nasconde la struttura
del sito, costituito dalla unione dei sette sotto-siti elencati nella parte alta dello schema: www.cultura.toscana.it,
www.turismo.toscana.it, www.sanita.toscana.it, www.retetoscana.it e così via.
                                                                              FIGURA 2.28
                                                                              L’organizzazione “a schedario” nella
                                                                              pagina dello shopping di Yahoo Italia
                                                                              (www.yahoo.it). La cartelletta mostrata
                                                                              nella figura, “Casa e giardino”,
                                                                              è associata al colore verde.




FIGURA 2.31
Un sito a schedario, che segue lo schema nella Figura 2.29 per la navigazione locale (www.dmail.it).
Per orientare meglio l’utente, ogni cartelletta utilizza un colore diverso.
FIGURA 2.32
Una navigazione a tre livelli, i primi due realizzati con la tecnica dello schedario (come nella Figura 2.29, il terzo
con un menu verticale a sinistra. A partire dalla selezione corrente (“Company” + “Gruppo Ferrari - Maserati”),
il menu a lato permette di scendere ulteriormente di livello. La selezione corrente è evidenziata dal diverso colore
dei titoli sui pulsanti, ma in modo poco visibile (i titoli selezionati sono neri, gli altri blu) (www.maserati.it).
FIGURA 3.5
La home page “muta” della Fanta (www.fanta.it) all’interno del sito della Coca-Cola italiana. Per capire
che cosa il sito ci offre bisogna esplorare con il mouse le zone tratteggiate sul piede e sulla mano: le voci
del menu appariranno una a una, come nella Figura 3.6.




FIGURA 3.6
Facendo clic sulla mano della ragazza a sinistra nella home page nella Figura 3.5, appare la scritta
“download”, con tre possibilità. Contemporaneamente, i tre giovani cambiano posizione. Altre voci di menu
appariranno, una a una, facendo clic sulle altre zone indicate dal tratteggio. Un esempio molto divertente,
ma da non seguire, almeno per siti che non siano di puro intrattenimento.
FIGURA 3.7
Quando si accede alla home page di www.ilmulinobianco.it, un’animazione mostra, uno alla volta, i menu
associati a ciascuna delle tre immagini tonde a centro pagina (in questa immagine, l’animazione è stata
“fotografata” quando era mostrato il menu di sinistra). Quando l’animazione termina, la home page rimane
come nella Figura 3.8.




FIGURA 3.8
La home page nella Figura 3.7 “a riposo”, cioè al termine dell’animazione iniziale. Le immagini tonde a centro
pagina sono dei rollover: per rivedere i menu visualizzati durante la breve animazione iniziale, l’utente deve
passarvi sopra il puntatore del mouse. Per invitare l’utente a farlo, le figure tonde “pulsano” continuamente.
L’invenzione è senza dubbio originale, ma a riposo la home page è di significato piuttosto oscuro.
                                        FIGURA 3.9
                                        La home page del sito generale
                                        della Coca-Cola (www.cocacola.com)
                                        nel 2001.




                          FIGURA 3.10
       La home page del sito generale
 della Coca-Cola (www.cocacola.com)
                            nel 2003.




                                        FIGURA 3.11
                                        La home page del sito della Coca-Cola
                                        tedesca nel 2001.




                          FIGURA 3.12
La home page del sito della Coca-Cola
              statunitense nel 2003.
FIGURA 3.16
Il sito www.fiat.it come appare su un video 800x600 e su un video ad alta risoluzione. In questo caso l'effetto
di sbilanciamento enfatizza l'impostazione grafica della pagina, con il fuoco dell'attenzione in alto a sinistra.




FIGURA 3.17
Un sito ottimizzato per video 800x600, in cui linee e riquadri sono espansi verso destra e verso il basso fino ai bordi
dello schermo, per riempire in modo gradevole lo spazio libero (www.trudi.it).
                                                  FIGURA 3.21
                                  Un quadro di Salvador Dalì
                            del 1935, intitolato “Viso di Mae
                            West che può essere usato come
                              appartamento”. Come chiarito
                                   dalla teoria della Gestalt,
                                 noi percepiamo innanzitutto
                            la forma globale, in questo caso
                                   il viso di Mae West, e non
                           gli elementi costitutivi (in questo
                           caso, elementi d’arredo che nulla
                                  hanno a che fare con il viso
                                                 dell’attrice).




                      FIGURA 3.22
La home page di un grande portale
         italiano (www.virgilio.it).
FIGURA 3.23
La home page di www.britishairways.com nella
versione italiana. Anche se l’uso dei colori è un
po’ monotono, la pagina ha un’ottima Gestalt.
Il riquadro per la prenotazione voli, il più
importante, cattura immediatamente
l’attenzione del visitatore, e si propone come
l’elemento focale della pagina. All’interno
di questo riquadro, il pulsante rosso
è immediatamente visibile. Gli elementi restanti
della pagina sono visivamente ben riconoscibili,
e organizzati in modo coerente con il loro livello
di importanza.




FIGURA 3.24
Una home page del tutto priva di Gestalt
(www.quattroruote.it).
                      FIGURA 3.25
     Nei voli proposti da Milano
         a Londra, rappresentati
   da riquadri colorati collocati
    sul calendario settimanale,
  i diversi colori sono associati
    alle diverse fasce di prezzo,
        come mostra la legenda
          nella barra orizzontale
     (www.britishairways.com).
In questo caso l’uso del colore
           facilita notevolmente
la comprensione della pagina.




                    FIGURA 3.26
 Un uso incoerente dei colori.
              Per una migliore
        comprensibilità, i nomi
  dei vari servizi (Finclassico,
           Leasing, Protezione
 e così via) avrebbero dovuto
          essere colorati come
     i riquadri alla loro destra
              (www.toyota.it).
                                                                               FIGURA 3.27
                                                                               L’uso del colore per indirizzare l’utente
                                                                               sul menu principale
                                                                               e sulle tre sezioni principali al centro
                                                                               della pagina, nella home page
                                                                               di www.tim.it.




FIGURA 3.28
La home page di qualche anno fa (ora è migliorata) di un sito di e-commerce (www.chl.it).
Troppi colori non servono a veicolare informazioni utili, ma danno una sensazione
di complessità.
                                                                       FIGURA 3.29
                                                     Un esempio di codice di colori
                                                    contrastante con le aspettative
                                                     comuni (www.mediaworld.it).




FIGURA 3.30
Un esempio da non seguire: testo chiaro su sfondo rosso saturo (www.kataweb.it di qualche anno fa).




FIGURA 3.31
Parole di colori diversi, se questi sono lontani fra loro nello spettro visibile, vengono messe a fuoco su piani diversi.
In questo esempio, le parole verdi appaiono in rilievo rispetto a quelle rosse. La lettura risulta molto faticosa.
FIGURA 3.33
La home page del sito ufficiale della Galleria degli Uffizi, un tipico sito di prima generazione
(www.uffizi.firenze.it). Spiace che uno dei musei d’arte più importanti del mondo si presenti al pubblico
con un sito così inadeguato rispetto agli standard attuali e al numero dei suoi visitatori. Come ci dice la
home page stessa, dal 30 gennaio 1996 più di 1.800.000 utenti si sono collegati al sito.


                                                                                   FIGURA 4.9
                                                                                   La segnalazione degli errori
                                                                                   in www.volendo.com. Quando l’utente
                                                                                   conferma i dati con il pulsante
                                                                                   “Avanti”, i messaggi di errore
                                                                                   appaiono in rosso, direttamente sotto
                                                                                   il campo cui si riferiscono. I campi
                                                                                   obbligatori sono indicati
                                                                                   con un quadratino. Inoltre, accanto
                                                                                   a ciascun campo c’è un link di aiuto
                                                                                   (“?”) per ottenere maggiori
                                                                                   informazioni.
FIGURA 5.11
La home page del sito del Parlamento europeo (www.europarl.eu.int). In ogni pagina di questo sito è possibile cambiare
la lingua, scegliendola fra le undici lingue ufficiali dell’Unione (barra orizzontale, in alto) e fra le dodici lingue dei Paesi
entranti (barra verticale a destra). In questa immagine è selezionata la lingua italiana, come si vede dalla posizione
della freccia nel menu in alto.




                                FIGURA 6.5
                                L’andamento dell’uptime del sito del Milan (www.acmilan.com), per un periodo di circa
                                un anno e mezzo a partire dall’estate 2002. Crocette di diverso colore corrispondono
                                a sistemi operativi diversi. Dal grafico si vede che il sito è stato trasferito da sistemi
                                Windows 2000 a sistemi Linux, e poi ancora a Windows 2000. Il periodo Linux appare
                                molto più stabile, con il massimo uptime storico di circa 100 giorni. Le linee parallele
                                di crocette tracciano rilevamenti di server diversi: il grafico mostra infatti che i server
                                Windows sono più d’uno.
                                        FIGURA 7.14
             Una pagina del sito del Ministero per
     l’Innovazione e le Tecnologie, che permette
        di scegliere le modalità di visualizzazione
  dei caratteri. In questo esempio è stata scelta
      la modalità ad alto contrasto, che presenta
caratteri grandi, gialli su fondo nero e link in blu
                        (www.innovazione.gov.it).




FIGURA 7.15
Una pagina del sito del Ministero per l’Innovazione e le Tecnologie, che permette di scegliere le modalità
di visualizzazione dei caratteri. In questo esempio è stata scelta la modalità ad alto contrasto, che presenta caratteri
grandi, gialli su fondo nero e link in blu (www.innovazione.gov.it).

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:6
posted:6/25/2012
language:
pages:16