FIGURA 2.2 Il sito della Esselunga ( con il menu principale in orizzontale, sotto il marchio.

Transcript

1 FIGURA 2.2 Il sito della Esselunga ( con il menu principale in orizzontale, sotto il marchio. FIGURA 2.3 La mappa del sito di la cui home page è mostrata nella Figura 2.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 ( FIGURA 2.19 La mappa del sito della Regione Toscana ( ha una grafica complessa, che nasconde la struttura del sito, costituito dalla unione dei sette sotto-siti elencati nella parte alta dello schema: e così via.

3 FIGURA 2.28 L organizzazione a schedario nella pagina dello shopping di Yahoo Italia ( 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 ( Per orientare meglio l utente, ogni cartelletta utilizza un colore diverso.

4 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) (

5 FIGURA 3.5 La home page muta della Fanta ( 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.

6 FIGURA 3.7 Quando si accede alla home page di 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.

7 FIGURA 3.9 La home page del sito generale della Coca-Cola ( nel FIGURA 3.10 La home page del sito generale della Coca-Cola ( nel FIGURA 3.11 La home page del sito della Coca-Cola tedesca nel FIGURA 3.12 La home page del sito della Coca-Cola statunitense nel 2003.

8 FIGURA 3.16 Il sito 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 (

9 FIGURA 3.22 La home page di un grande portale italiano ( 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).

10 FIGURA 3.23 La home page di 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 (

11 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 ( 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 (

12 FIGURA 3.28 La home page di qualche anno fa (ora è migliorata) di un sito di e-commerce ( Troppi colori non servono a veicolare informazioni utili, ma danno una sensazione di complessità. 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

13 FIGURA 3.29 Un esempio di codice di colori contrastante con le aspettative comuni ( FIGURA 3.30 Un esempio da non seguire: testo chiaro su sfondo rosso saturo ( 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.

14 FIGURA 3.33 La home page del sito ufficiale della Galleria degli Uffizi, un tipico sito di prima generazione ( 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 utenti si sono collegati al sito. FIGURA 4.9 La segnalazione degli errori in 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.

15 FIGURA 5.11 La home page del sito del Parlamento europeo ( 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 ( per un periodo di circa un anno e mezzo a partire dall estate 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 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.

16 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 ( 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 (