principi di progettazione di un sito web - apogeo editore · si devono considerare aspetti quali la...

CAPITOLO 2

Principidi progettazione

di un sito Web

In questo capitolo

• Progettare in base al dispositivo

• Progettare l’intero sito

• Progettare considerando gli utenti

• Progettare per lo schermo

• Riepilogo

• Esercizi

Questo capitolo descrive i principi di progettazione di base che verranno applicati nell’in-tero volume. Esaminando vari siti Web si imparerà a concentrarsi sulle esigenze degliutenti e sui requisiti delle informazioni che si intendono presentare, sviluppando così unsito facile da navigare e veloce da caricare.

Le pagine Web di esempio contenute in questo capitolo sono tratte da vari siti. Il Weboffre una scelta così ampia di contenuti e stili di progettazione che non esistono pagine ingrado di rappresentarlo tutto. La maggior parte di questi esempi illustrano quali sonobuoni principi di progettazione e alcuni evidenziano anche dei difetti. Per la verità, quasiogni sito presenta dei difetti: può trattarsi di un problema di accessibilità, di un progettoeccessivamente ambizioso o di un lungo tempo di caricamento. Si devono giudicare gliesempi con un occhio critico ricercando quegli elementi del progetto che possono essere

26 CAPITOLO 2

trasferiti nel proprio lavoro. A mano a mano che si procederà nella lettura del volume siapplicheranno questi principi anche alla propria attività di progettazione Web.

Progettare in base al dispositivoQuando si progetta un sito Web si deve ricordare che il dispositivo di destinazione è loschermo di un computer e non la carta stampata, e che il linguaggio impiegato è ipertestualee non lineare. Un progettista Web deve dunque considerare che le proprie pagine verran-no esaminate sullo schermo del computer.Si devono considerare aspetti quali la disposizione degli elementi, i font e i colori e l’aspet-to che essi avranno sullo schermo. Un autore HTML deve considerare la natura nonlineare degli ipertesti e deve inserire nelle informazioni i link e le associazioni appropriate.Si deve dare agli utenti la possibilità di seguire il percorso desiderato fornendo link adargomenti correlati. Inoltre gli utenti devono sentirsi a proprio agio nel sito sapendosempre dove si trovano e dove possono andare.

Definire il “look” del sitoL’interfaccia di navigazione dell’utente determina il “look” del sito. Gli utenti possono gra-dire o meno questo look. Essi seguono il testo, creano associazioni con i link, visualizzano leimmagini, e, a seconda della libertà di navigazione offerta, creano il proprio percorso attra-verso le informazioni fornite. Dunque il look riguarda sia il funzionamento del sito Web, siail tipo di impressione che si vuole dare agli utenti. Non solo si deve cercare di fornire unacerta impressione agli utenti, ma occorre confrontare il progetto con la natura mutevole del

Figura 2.1 Una pagina CSS in Internet Explorer 5.0.

PRINCIPI DI PROGETTAZIONE DI UN SITO WEB 27

Web. Occorre assicurarsi che il maggior numero possibile di utenti possa navigare nel sito inmodo affidabile.

Come rendere trasportatile il progettoPer avere successo, il progetto del sito Web deve essere trasportabile e accessibile da partedi più browser, sistemi operativi e piattaforme hardware. Molti progettisti commettonol’errore di collaudare il sito su un solo ambiente immaginando che le pagine avranno lostesso aspetto per tutti gli utenti. Indipendentemente dalla propria esperienza di progetta-zione Web, occorre sempre ricordare di eseguire il collaudo anche se ci si sente sicuri deirisultati. Le Figure 2.1 e 2.2 mostrano la stessa pagina visualizzata in Internet Explorer 5.0e in Netscape Navigator 4.0. La pagina Web è stata realizzata utilizzando codice CSS cheNetscape non può interpretare e pertanto il risultato non sarà quello atteso.

Si può evitare questo problema rendendo trasportabile il progetto. Visualizzando lepagine con i browser impiegati dagli utenti, utilizzando i sistemi operativi più diffusi econtrollando il sito su più piattaforme hardware è possibile garantire che il sito risultiaccessibile al maggior numero possibile di utenti.

Progettare per utenti a bassa ampiezza di bandaSi devono progettare le pagine in modo che possano risultare accessibili a varie velocità diconnessione. Se le pagine vengono prelevate lentamente poiché contengono immaginimolto estese e dettagliate o animazioni complesse, gli utenti potrebbero andarsene primaancora di aver iniziato a vedere i contenuti. Come si detto nel Capitolo 1, trascorreranno

Figura 2.2 Una pagina CSS in Netscape Navigator 4.0.

28 CAPITOLO 2

ancora molti anni prima che la maggior parte degli utenti possa contare su una connessio-ne ad alta velocità con il Web. Fino ad allora, quando si progetta un sito si devono tenerein considerazione gli utenti che impiegano una bassa ampiezza di banda.

La pagina principale del sito Web Burpee, illustrata nella Figura 2.3, contiene setteimmagini distinte.

Le immagini di questa pagina occupano in totale 103 KB. Gli utenti che si connettonoal Web via modem dovranno attendere a lungo il prelevamento delle immagini. La Figura2.4 mostra l’aspetto della home page Burpee prima del prelevamento delle immagini.

I progettisti hanno tenuto in considerazione gli utenti che impiegano una bassa velo-cità di connessione fornendo alcuni indizi di navigazione sotto forma di testo alternativo(si parlerà del testo alternativo nel Capitolo 4 quando verranno introdotti gli attributiALT). Una soluzione migliore sarebbe stata realizzare una pagina contenente una minorequantità di elementi grafici, che potesse essere prelevata più rapidamente da tutti gli uten-ti e non solo da quelli che possono contare su connessioni ad alta velocità.

Chiarezza di presentazione e facilità di accesso alle informazioniIl progetto delle informazioni (ovvero la presentazione e l’organizzazione delle informazio-ni) è il fattore più importante per determinare il successo del sito. Le opzioni grafiche e dinavigazione (che determinano l’aspetto del sito) devono presentare all’utente varie opzionisenza per questo distrarlo dalla sua ricerca. Un visitatore del sito potrebbe scegliere di navi-gare casualmente nelle informazioni o potrebbe ricercare informazioni ben precise. Spessogli utenti arrivano a una pagina ricercando informazioni che si trovano molto in basso nella

Figura 2.3 La home page del sito Web Burpee.


gerarchia delle informazioni. Talvolta gli utenti arrivano a un sito ricercando elementi moltospecifici, ad esempio un numero di telefono o un modulo d’ordine. Si devono prevederequeste azioni e questi percorsi di accesso degli utenti. Si devono fornire link diretti con learee del sito più richieste.

Occorre presentare le informazioni in modo che siano facili da leggere. Molti siti Webnon rispondono a questo requisito in quanto utilizzano troppi font, troppi colori o lunghibrani di testo. Lo schermo del computer non è molto adatto alla lettura. La bassa risolu-zione riduce la leggibilità. La fonte di luce proveniente dall’interno del monitor è affati-cante per gli occhi. Si deve cercare di fornire dei colori contrastanti che risultino facili daleggere e non appesantiscano lo sguardo, ad esempio colori scuri su uno sfondo chiaro obianco.

Bisogna spezzare il testo in segmenti di dimensioni ragionevoli per semplificarne lalettura. Si deve tenere in considerazione che i lettori potrebbero avere abitudini differentiquando leggono il testo online. In genere, in queste condizioni si dà solo una rapidaocchiata al testo. È pertanto opportuno includere molti titoli in modo da consentire agliutenti di trovare con la massima rapidità i contenuti desiderati. Si deve ridurre la larghez-za del testo e fornire colonne di argomenti facili da leggere. Si deve tenere in considerazio-ne la “regola del 7 più o meno 2”: gli utenti non possono considerare insieme più di 7 (piùo meno 2) passi o elementi. Ad esempio, una procedura ben realizzata non conterrà più dinove passi. Invece di presentare lunghissime pagine che costringono a frequenti scorrimenti,è meglio spezzare le informazioni in frammenti più piccoli e collegati fra loro.

Figura 2.4 La home page Burpee prima del prelevamento delle immagini.

30 CAPITOLO 2

Progettare l’intero sitoQuando si progetta il sito, si devono pianificare i temi e le strutture unificanti che dannoal sito un aspetto uniforme. La scelta dei colori, dei font, degli elementi grafici e la dispo-sizione degli elementi sulla pagina dovrebbero comunicare all’utente uno schema visivoche dia l’impronta all’intero sito. Lo stile dovrebbe riflettere l’impressione che si intendeoffrire. Ad esempio, la Figura 2.5 mostra la home page del sito Web della NASA. Lapagina è costituita quasi unicamente da testo e convoglia un’immagine sobria; infatti icontenuti forniscono informazioni di natura rigorosamente scientifica.

L’impiego di colori tenui, di font lineari e professionali e l’uso di colonne lineari e benstrutturate sottolinea la natura scientifica della pagina.

La NASA gestisce anche un sito Web dedicato ai bambini, illustrato nella Figura 2.6.Mentre il sito ufficiale convoglia un’impressione di serietà, il sito dedicato ai bambiniutilizza colori vivaci, un font simpatico e informale ed elementi grafici semplici e gradevo-li per creare uno stile più giocoso.

Quando si progetta l’intero sito non basta considerare un’unica pagina. In un sito benintegrato si devono creare transizioni lineari, usare una griglia per creare una strutturavisuale e utilizzare spazi vuoti attivi.

Creare transizioni lineariSi deve creare un look da applicare a tutte le sezioni e le pagine del sito. Si devono ripeteregli elementi caratterizzanti del sito e creare transizioni uniformi da una pagina all’altraripetendo i colori e i font e utilizzando una disposizione degli elementi che consenta di

Figura 2.5 La home page della NASA.


creare più livelli gerarchici. Si deve evitare di cambiare senza ragione il formato dellepagine, tranne quando questo è esattamente l’effetto desiderato. L’uniformità crea unatransizione più dolce da una pagina alla successiva e rassicura gli utenti, che sapranno ditrovarsi all’interno dei confini del sito e potranno trovare le informazioni desiderate conmaggiore facilità.

Si deve pensare a un utente come se questi stesse sfogliando le pagine di un periodico.Anche se una pagina Web rappresenta un’entità distinta, fa parte del sito. Lo stile globaledi una pagina dovrebbe riflettere lo stile del sito. Ad esempio, le Figure 2.7 e 2.8 mostranola pagina principale e una pagina di livello secondario del sito Web UPS.

Queste pagine usano lo stesso schema di colori, le stesse icone di navigazione e lestesse immagini assicurando così una transizione uniforme dalla pagina principale allapagina secondaria e in questo modo definiscono lo stile del sito Web.

Usare una griglia per fornire una struttura visivaLa struttura di una pagina Web si basa sulla griglia o sul modello scelto per il progettodella pagina. La griglia è un elemento concettuale che consente di disporre gli elementidella pagina su righe e colonne. Si può definire una griglia per fornire una certa uniformi-tà al sito. Si può usare la griglia per porre l’accento sulla struttura, ma si può anche spez-zare la griglia per migliorare la varietà del sito e per evidenziare le informazioni più impor-tanti.

Per costruire le pagine, gli autori usano gli elementi per le tabelle offerti dal linguaggioHTML. Anche se originariamente erano state concepite per la visualizzazione di dati dinatura tabulare, gli elementi delle tabelle sono stati utilizzati dai progettisti come uno stru-mento per replicare la griglia di impaginazione impiegata nei mezzi di stampa tradizionali.

Figura 2.6 Il sito Web della NASA per i bambini.

32 CAPITOLO 2

Figura 2.7 La pagina principale del sito Web UPS.

Figura 2.8 Una pagina secondaria del sito Web UPS.


Molti dei migliori siti realizzati utilizzano qualche forma di tabella per migliorare la struttu-ra e l’uniformità delle pagine. Disattivando i bordi della tabella, l’utente non si accorgeràneppure che gli elementi sono contenuti in una tabella. Ciò che comparirà è una paginacoerente e ben strutturata.

Usare lo spazio vuoto attivoGli spazi vuoti sono rappresentati dalle aree vuote di una pagina. Si può usare lo spaziovuoto in modo deliberato o subirlo come una sorta di effetto collaterale. Un buon usodello spazio vuoto guida il lettore e definisce le aree della pagina. Quando lo spazio vuotoviene utilizzato in modo deliberato si chiama spazio vuoto attivo. Lo spazio vuoto attivoè una parte fondamentale del progetto di strutturazione e separazione dei contenuti. Tal-volta lo spazio vuoto rappresenta la parte più importante di un progetto. Gli spazi vuotipassivi sono le aree vuote che circondano lo schermo e che vengono prodotte a causa dielementi di dimensioni non appropriate. La Figura 2.9 illustra alcuni esempi di spazi attivie passivi.

La presentazione dei contenuti può indurre in confusione quando i progettisti nonusano una quantità sufficiente di spazio vuoto per separare e definire i contenuti stessi. Ilsito Web di America Online illustrato nella Figura 2.10 sarebbe più facile da leggere se learee fossero separate da una maggiore quantità di spazio vuoto.

La mancanza di spazio vuoto attivo crea l’impressione che la pagina contenga troppeinformazioni e questo complica la ricerca delle informazioni desiderate. Al contrario, lapagina Web Adobe rappresentata nella Figura 2.11 contiene una grande quantità di spa-

Figura 2. 9 Aree di spazio vuoto attivo e passivo

34 CAPITOLO 2

Figura 2.10 Una maggiore quantità di spazio vuoto ridurrebbe la congestione della pagina.

Figura 2.11 Una maggiore quantità di spazio vuoto migliora la leggibilità.


zio vuoto che ne agevola la lettura. Una grande quantità di spazio vuoto riduce la conge-stione e chiarifica l’organizzazione delle pagine.

Se si collogano gli elementi di navigazione nella stessa posizione di ciascuna pagina, gliutenti saranno in grado di orientarsi con maggiore facilità nella struttura di navigazione. Sidevono usare gli stessi elementi grafici di navigazione all’interno dell’intero sito in modo damigliorare l’uniformità di stile e da riutilizzare le immagini memorizzate nell’area cache.

Si possono applicare alcuni di questi principi a due importanti siti Web. Le Figure2.12 e 2.13 illustrano il sito Web della National Gallery of Art e mostrano cosa si intendeper transizione uniforme fra le pagine.

La pagina principale e la pagina secondaria condividono varie caratteristiche:• lo stesso sfondo;• la stessa posizione delle informazioni di navigazione;• la linea verticale di separazione;• un uso uniforme dei font;• un logo che identifica il sito;• grandi aree di spazio vuoto attivo.

L’uniformità di queste pagine rafforza la sensazione di trovarsi nello stesso sito. I font,i colori attenuati e lo sfondo delicato danno l’impressione di trovarsi in un museo. Unaregola progettuale che è importante notare: il logo dovrebbe rimanere sempre nella stessaposizione in tutte le pagine, altrimenti gli utenti cominceranno a chiedersi perché il logosi è spostato e ciò li distrarrà dalla lettura del messaggio che si intende offrire.

Figura 2.12 La pagina principale della National Gallery of Art.

36 CAPITOLO 2

Il sito Web Adobe, illustrato nelle Figure 2.14 e 2.15, ha un aspetto molto differentema si possono applicare gli stessi principi appena enunciati. Adobe sviluppa software diprogettazione e i suoi clienti sono probabilmente sensibili a questioni di design. Per que-sto motivo il loro sito deve avere un ottimo aspetto, obbedire alle regole di design graficoe fornire informazioni facilmente accessibili.

In queste due pagine tratte dal sito, la disposizione a colonne consente di fornire unagrande quantità di informazioni senza congestionare la pagina. Si noti che le informazionipiù importanti o più attuali vengono presentate al centro del campo visivo. Delle iconeevidenziano i riferimenti contenuti nella colonna di destra. Le opzioni di navigazione e illogo della società compaiono nella parte superiore della pagina mentre la colonna di sini-stra contiene una serie di link ai livelli secondari. L’uso dello spazio vuoto fra le colonneconsente di organizzare la pagina ed evita confusioni. Anche se entrambe le pagine usanouna disposizione a colonne, il titolo Tips & Techniques della pagina secondaria infrangelo schema delle colonne in modo da movimentare l’aspetto della pagina.

Progettare considerando gli utentiTutti gli sforzi di progettazione devono concentrarsi sugli utenti. Conoscendo il propriopubblico sarà possibile rispondere a quasi tutti i problemi di progettazione. Ciò che è utileper il proprio pubblico deve essere conservato, ciò che può distrarre o irritare deve essereeliminato. Si deve cercare di capire ciò che gli utenti si attendono dal sito. Se possibile sipuò richiedere la loro opinione tramite un modulo online. Si può creare il profilo di unutente medio osservando le risposte alle domande di base. Cosa cercano gli utenti quando

Figura 2.13 Una pagina secondaria della National Gallery of Art.


Figura 2.15 Una pagina secondaria del sito Web Adobe.

Figura 2.14 La pagina principale del sito Web Adobe.

38 CAPITOLO 2

accedono al sito? Hanno bisogno di avere un supporto tecnico, di risolvere dei problemi ovogliono acquistare qualcosa? Vogliono leggere degli articoli o ricercare delle informazio-ni? Sapendo ciò che gli utenti richiedono al sito si potrà valutare il modo in cui il progettosoddisfa il pubblico cui è destinato.

Si confrontino le pagine principali dei siti seguenti considerando il pubblico cui sonodestinati. E! online (Figura 2.16) è un sito di notizie divertenti. La pagina a quattro colon-ne contiene argomenti alternativi che attraggono lo sguardo con animazioni, testo a scor-rimento realizzato con Java, colori vivaci e forme familiari. L’effetto globale è volutamentesimile a quello della televisione, un territorio familiare per il pubblico di E! online.

Il sito Web di Pen & Ink (Figura 2.17) proietta un forte odore di inchiostro da stam-pa. Ad eccezione della foto in bianco e nero, i componenti della pagina principale sonocostituiti da testo. Il logo in estrema evidenza contiene un elemento di testo: il carattere di“e-commerciale”. I link sono evidenziati da colori a forte contrasto. Alcuni elementi ri-chiamano l’uso di penna e calamaio, esattamente ciò che l’utente letterario ricerca in ungiornale online. Questi due esempi dimostrano come l’aspetto del sito deve adattarsi alleaspettative visive del proprio pubblico. Ma occorre anche considerare i modi in cui gliutenti interagiscono con i contenuti, ovvero il tipo di sensazioni (“feel”) offerte dal sito.

Progettare per l’interazioneSi deve pensare al modo in cui l’utente può interagire con le informazioni contenute nellapagina Web. Dunque si deve progettare tenendo in considerazione i contenuti e deciderese l’utente vorrà leggere o sfogliare distrattamente le pagine.

Figura 2.16 Elementi familiari per il pubblico di E! online.


Ad esempio, si supponga che la pagina contenga una raccolta di link come nel caso diuna pagina principale o di una pagina a sezioni. Gli utenti vogliono interagire con questitipi di pagine eseguendo una scansione dei contenuti, effettuando se necessario uno scor-rimento della pagina, portando il puntatore sulle immagini per vedere se rappresentanodei link e facendo clic sul testo attivo. Si deve prevedere questo tipo di interazione del-l’utente scegliendo titoli appropriati per le colonne, link di testo e brevi descrizioni. Sidevono organizzare i link in argomenti correlati e separare i gruppi tramite spazi vuoti,elementi grafici o il semplice colore di sfondo.

Si supponga che la pagina sia un articolo contenente grossi blocchi di testo. L’utenteè abituato a interagire con le pagine di testo eseguendo scorrimenti e talvolta facendo clicsui link cui è interessato. I link possono trovarsi nel corpo dell’articolo o possono esserecontenuti in una barra laterale. Si devono progettare le pagine per questo tipo di contenu-ti cercando di usare paragrafi brevi in modo da semplificarne la consultazione online. Sideve semplificare la lettura utilizzando colonne di testo più strette rispetto alla larghezzadello schermo. Si deve mantenere leggibile il testo offrendo un contrasto sufficiente fra icolori di primo piano e di sfondo. Si devono fornire dei link che consentano all’utente disaltare rapidamente ad argomenti correlati.

Due pagine del sito WebMonkey illustrano il concetto di lettura e scansione. La Figu-ra 2.18 mostra una pagina progettata per la scansione. Gli utenti troveranno una serie dilink che consentono di raggiungere argomenti di varia natura. Quando l’utente avrà scel-to il link desiderato, potrà saltare alla relativa pagina, come illustrato nella Figura 2.19. Sinoti in entrambe le pagine la presenza dell’indicazione dell’area del sito in cui ci si trova.

Figura 2.17 Un look più “cartaceo” per il pubblico di Pen & Ink.

40 CAPITOLO 2

Figura 2.18 Pagina progettata per la scansione.

Figura 2.19 Pagina progettata per la lettura.


Questo semplice percorso consente all’utente di sapere con facilità il luogo in cui si trovaall’interno della gerarchia delle informazioni.

Disposizione degli elementiÈ difficile prevedere con esattezza il percorso di visualizzazione della pagina che verràscelto dagli utenti. Esiste però un sostanziale accordo sulle aree dello schermo che hannola maggiore importanza. La Figura 2.20 rappresenta una valutazione delle aree dello schermosecondo l’ordine di importanza.

Durante la progettazione della pagina si devono valutare le informazioni che si inten-dono realizzare e poi posizionare quelle più importanti nella parte centrale della finestra,quelle un po’ meno importanti nella parte superiore della pagina e così via, posizionandole informazioni meno importanti o statiche sul margine sinistro. Ad esempio, la Figura2.21 mostra la pagina principale del sito Adobe e l’ordine di importanza degli elementidella pagina.

Si noti che l’area 1 è riservata alle informazioni più importanti e aggiornate. Il logodella società e la barra di navigazione si trovano nell’area 2. Gli elementi che cambianocon una certa frequenza si trovano nell’area 3. I contenuti da leggere si trovano nell’area 4.L’area 5 viene utilizzata per i link che vengono visualizzati in tutte le pagine ma che sonodi importanza secondaria. Quando si pianifica il layout della pagina si deve considerare ladisposizione degli elementi. Infatti il posizionamento dei contenuti ne definisce l’importan-za relativa per l’utente.

2

5 1 3

4

Figura 2.20 Valutazione delle aree di importanza dello schermo.

42 CAPITOLO 2

Indirizzare lo sguardo dell’utenteL’utente può attraversare una pagina con lo sguardo in vari modi. Gli studi di ergonomiasui movimenti dell’occhio umano forniscono un’ampia gamma di risultati. Se si prevededi progettare le pagine considerando i movimenti dell’occhio umano, si devono conside-rare due abitudini di lettura.

Secondo le tipiche abitudini di lettura, l’occhio umano si muove da sinistra a destra epoi a capo come indicato nella Figura 2.22.

La Figura 2.23 applica questo schema di lettura al sito Web Pen & Ink. Poiché questosito Web è progettato per utenti abituati alla lettura di documenti cartacei, la pagina segueuno schema di lettura di questo tipo.

Al contrario, quando si osservano immagini di tipo panoramico, come ad esempio leimmagini televisive, l’utente può eseguire una scansione delle informazioni seguendo unoschema orario, come indicato nella Figura 2.24.

La Figura 2.25 applica questo schema di lettura al sito Web E! online. Mentre losguardo vaga per la pagina, acquisisce la maggior parte dei contenuti più importanti.Poiché questo sito è progettato per utenti abituati alla visualizzazione delle informazionisu uno schermo, la pagina incoraggia questo metodo di scansione.

Conoscendo queste abitudini è possibile posizionare adeguatamente gli oggetti inmodo da concentrare l’attenzione dell’utente, scegliendo appositamente le dimensioni deltesto e i colori utilizzati. Si deve immaginare una struttura a griglia e pensare al modo incui si intende suddividere la pagina per attrarre l’attenzione del lettore. Le dimensioni e ilpeso del testo devono comunicare l’importanza relativa delle informazioni. Si devono

Figura 2.21 La valutazione delle aree della pagina applicata al sito Adobe.

2

5 1 3

4


Figura 2.22 Lo schema di lettura a pagina cartacea.

Figura 2.23 Applicazione dello schema di lettura a un sito Web.

44 CAPITOLO 2

Figura 2.24 Uno schema di visualizzazione di tipo televisivo.

Figura 2.25 Scansione di un sito Web di tipo televisivo.


spezzare le varie sezioni tramite linee o spazi vuoti attivi. Si devono usare delle forme e deicolori che sottolineino la posizione o l’argomento. È necessario cercare di conoscere lecaratteristiche dei propri utenti considerando i due metodi di visualizzazione appena de-scritti mentre si sperimenta il posizionamento dei contenuti sulla base dei modi in cui gliutenti visualizzeranno la pagina.

Usare una gerarchia piuttosto “piatta”Gli utenti non devono vagare fra i vari livelli del sito Web per trovare le informazionidesiderate. Si deve strutturare il sito Web in modo da includere sezioni o pagine di navi-gazione che consentano agli utenti di trovare con facilità il loro percorso. Si devono forni-re evidenti elementi di navigazione che portino rapidamente l’utente ai contenuti deside-rati. Ad esempio, una barra di navigazione standard, posizionata su ogni pagina, dà al-l’utente la percezione del luogo in cui si trova e questo gli consente di muoversi nel sitocon maggiore flessibilità.

Si deve considerare se è il caso di fornire una mappa del sito che visualizzi graficamen-te la posizione all’interno del sito Web. La Figura 2.26 rappresenta una mappa del sitoWeb della Massachusetts Medical Society.

Questa rappresentazione grafica del sito Web mostra le varie parti disponibili e lasezione in cui esse si trovano. Inoltre fornisce una casella di testo all’interno della quale gliutenti possono introdurre delle parole chiave per trovare le informazioni desiderate. Gliutenti possono fare clic per accedere direttamente a una pagina, orientarsi per raggiungere

Figura 2.26 Rappresentazione grafica della struttura di un sito Web.

46 CAPITOLO 2

con facilità i vari contenuti offerti dal sito oppure eseguire ricerche nel sito. Questo è unbuon esempio di mappa grafica di un sito che risponde alle esigenze di vari tipi di utenti.

La Figura 2.27 mostra una mappa ancora più interessante, quella del sito Web CybermomDot Com, che riflette l’utenza tipica del sito. Questo sito organizza i contenuti utilizzan-do la metafora di una casa. La mappa del sito consente di fare clic su ogni stanza della casaper accedere alla relativa sezione di contenuti. I link di testo forniscono una breve descri-zione degli argomenti e rappresentano un metodo di navigazione alternativo.

Sfruttare le potenzialità dei link ipertestualiA differenza di un autore di documenti cartacei, un autore di documenti ipertestuali ha lapossibilità di aggiungere del testo e delle immagini selezionabili per guidare gli utentiall’interno delle informazioni. Questa possibilità pone però anche una certa dose di re-sponsabilità. Si prendono decisioni che determinano il modo in cui i clienti si possonomuovere nel sito alla ricerca di informazioni. Un lettore che sfoglia una rivista può saltarea una determinata pagina nell’ordine desiderato. Si può replicare questo metodo di letturanon lineare anche in un sito Web utilizzando dei link che consentano agli utenti di muo-versi da una pagina all’altra o da una sezione all’altra. Con un’accorta realizzazione degliipertesti, si possono interessare i lettori in modi completamente nuovi.

Molti siti usano colonne di link e argomenti, ma in molti casi i link non si trovanoall’interno del testo. Questa è un importante potenzialità degli ipertesti che non vieneancora sfruttata adeguatamente. Inserendo i link nel testo si offre agli utenti una grandevarietà di percorsi. Si deve evitare la sindrome del “clic” illustrata nella Figura 2.28, che

Figura 2.27 Una metafora visuale della mappa del sito.


consiste nell’abitudine di creare un link costituito da un’inutile frase “... fare clic qui”invece di fornire un testo descrittivo del link.

La Figura 2.29 mostra una pagina tratta da Artic Dawn, The Journeys of Samuel Hearne.Questa è una versione ipertestuale del diario di un esploratore del ’700. Si noti che i linkipertestuali sono inseriti direttamente nel testo. Quando gli utenti fanno clic su un link, siportano in un’altra pagina di informazioni; da tale pagina possono tornare al punto da cuierano partiti oppure passare a un’altra pagina di informazioni, e così via. L’abbondanza dilink ipertestuali consente agli utenti di creare una vista personalizzata delle informazionicontenute nel sito.

Si deve fornire una grande quantità di link per consentire agli utenti di muoversi conrapidità. Si devono usare dei link per consentire all’utente di tornare alle sezioni di naviga-zione della pagina, alla mappa del sito o alla pagina principale. Si deve evitare che gli utentidebbano eseguire frequenti scorrimenti all’interno delle pagine. Pertanto si devono prevede-re dei link che consentano agli utenti di arrivare in fondo alla pagina, di tornare all’iniziodella pagina, oppure che rappresentino un metodo certo per tornare ai livelli più elevati deicontenuti.

Si può fornire un indice ipertestuale, come quello rappresentato nella Figura 2.30,che consenta agli utenti di selezionare l’argomento desiderato.

Uno dei vantaggi degli indici ipertestuali è la codifica a colori, che mostra agli utentiquali pagine sono già state visitate. Normalmente i nuovi link sono visualizzati in blumentre i link visitati sono visualizzati in viola. Un indice ipertestuale mostra istantanea-mente il luogo in cui l’utente si trova e i luoghi in cui può andare.

Figura 2.28 La sindrome del “clic”.

48 CAPITOLO 2

Gli ipertesti semplificano la navigazione nei glossari e in altri documenti ad elevatadensità. La Figura 2.31 mostra un glossario ipertestuale che fornisce agli utenti un’ampiavarietà di link di navigazione.

Si devono prevedere dei metodi di navigazione alternativi adatti per un’ampia varietàdi utenti. In generale è meglio duplicare i link a immagini con link costituiti da testo, utilinel caso di cui gli utenti avessero disattivato la visualizzazione delle immagini o qualora leimmagini non dovessero essere caricate per qualche motivo. Inoltre anche l’attributo ALTdel tag <IMG> può fornire le necessarie informazioni di navigazione nel caso in cui nonvengano visualizzate le immagini. Per informazioni sull’inclusione dell’attributo ALT deltag <IMG>, consultare il Capitolo 5. La Figura 2.32 mostra una pagina Web contenenteutili indicazioni ALT per ogni immagine. Se le immagini non dovessero essere visualizzate,l’utente avrà comunque la possibilità di navigare all’interno del sito.

Qual è la giusta dose di contenuti?In una pagina Web è possibile inserire un’enorme quantità di informazioni. Occorre peròtenere in considerazione il carico cognitivo dell’utente, che spesso ritiene che una paginaWeb contenga una quantità eccessiva di informazioni. Il sito Web di America Online(Figura 2.33) contiene un’enorme quantità di risorse Web.

Progettata come una pagina a scansione, essa consente all’utente di individuare eselezionare in pochi secondi l’argomento desiderato. Analogamente, il sito Web di About.com(Figura 2.34) inserisce in poco spazio una grande quantità di informazioni.

Figura 2.29 Un buon uso dei link di testo.


Figura 2.31 Un glossario con varie opzioni di navigazione.

Figura 2.30 Un indice ipertestuale consente di selezionare con facilità l’argomentodesiderato.

50 CAPITOLO 2

Figura 2.32 Un buon uso dell’attributo ALT.

Figura 2.33 Il sito Web di America Online: un’enorme quantità di scelte.


Si deve resistere alla tentazione di fornire all’utente una quantità eccessiva di informa-zioni. Si devono fornire delle indicazioni che consentano di accedere con facilità ai conte-nuti desiderati e usare dei link per disporre i contenuti su più pagine.

Progettare per lo schermoLo schermo del computer, in cui vengono visualizzate le pagine Web, è molto differenterispetto a una pagina stampata. Quando si progetta per lo schermo occorre tenere inconsiderazione le seguenti differenze.• La forma dello schermo del computer. Mentre la maggior parte dei documenti stam-

pati usa pagine con una disposizione verticale, lo schermo del computer usa notoria-mente una disposizione orizzontale, ovvero e più largo che alto. Il progetto della paginadeve considerare lo spazio in cui essa verrà visualizzata e letta.

• Mentre il foglio di carta riflette la luce, lo schermo del computer è una sorgente di luce.Questo cambia la natura dei colori e dei contrasti impiegati. Si devono progettare dellepagine che abbiano un contrasto sufficiente per consentire un’agevole lettura evitan-do però colori che distraggano dai contenuti. Si deve dunque evitare di usare testo chiarosu sfondo chiaro o testo scuro su sfondo scuro. Ad esempio, nel sito Web del MediaCenter illustrato nella Figura 2.35, le righe di testo di colore blu scuro su sfondo nerosono praticamente illeggibili. Inoltre il contenuto non rientra nella tipica risoluzionedi 640 x 480 pixel.

• Lo schermo del computer ha una risoluzione molto inferiore rispetto alla pagina stam-pata. Le immagini e il testo che possono avere un ottimo aspetto se prodotti da una

Figura 2.34 Tanti contenuti e così poco tempo a disposizione.

52 CAPITOLO 2

stampante laser a 600 dpi sembreranno granulose a 72 dpi, la tipica risoluzione delmonitor di un computer. Proprio a causa di questa granularità, il testo in corsivo èparticolarmente difficile da leggere, come si può vedere nella Figura 2.36.

Lo schermo non è una paginaAnche se talvolta si fatica a resistere alla tentazione, spesso è meglio non prendere undocumento formattato per la stampa e inserirlo così com’è online senza considerare lecaratteristiche peculiari di questo mezzo. Nella maggior parte dei casi, un documentoperfettamente leggibile su carta risulterà difficile da consultare online. La lunghezza deltesto, il font utilizzato e la lunghezza dei contributi non si adattano con facilità allo scher-mo di un computer. Le Figure 2.37 e 2.38 mostrano la stessa sezione di Alice nel paese dellemeraviglie di Lewis Carroll. La Figura 2.37 mostra una tipica formattazione a pagina dilibro.

Si noti la “densità” del testo, che riempie lo schermo di grossi blocchi grigi. Poiché iltesto non rientra nella risoluzione di 640 x 480 pixel, l’utente sarà anche costretto a ese-guire continue scansioni da sinistra a destra per leggere un’intera riga. Al contrario, laFigura 2.38 mostra un testo progettato per la visualizzazione.

Lo schermo ha una larghezza limitata e può essere letto con facilità solo se non si ècostretti a eseguire scorrimenti orizzontali. Lo spazio vuoto crea un incolonnamento deltesto che rafforza la sensazione di un flusso verticale della pagina. Le illustrazioni spezzanoil testo e hanno lo scopo di deaffaticare lo sguardo.

Figura 2.35 La difficoltà di lettura di link scuri su uno sfondo scuro.


Figura 2.36 I blocchi di testo in corsivo sono difficili da leggere.

Figura 2.37 Testo formattato per la stampa.

54 CAPITOLO 2

Le differenze fra queste due pagine mostrano che il testo nel secondo caso è statopreparato considerando le esigenze della visualizzazione sullo schermo.

RiepilogoI siti Web possono avere un aspetto molto differente. Molto spesso i progettisti Web si preoccupa-no principalmente del mezzo e dimenticano il messaggio da fornire. Le lusinghe della tecnologia spin-gono a dimenticare che si sta tentando di comunicare tramite parole e immagini, come gli esseri umanihanno fatto per secoli. L’adattamento di questi elementi per la visualizzazione online, in modo daottenere un livello di comunicazione efficace, è un’operazione niente affatto banale.Si deve pianificare un sito che emerga rispetto agli altri e convogli il messaggio desiderato. Seguen-do i principi forniti in questo capitolo si sarà in grado di presentare informazioni di facile consulta-zione e coinvolgenti.• Si deve progettate in modo specifico per lo schermo del computer, considerando l’aspetto del-

l’impaginazione, dei font e dei colori sullo schermo.• Si deve definire un determinato look che deve essere mantenuto in tutto il sito. Si deve collau-

dare e raffinare l’interfaccia facendo particolare attenzione alle esigenze della visualizzazione online.• Si deve rendere trasportabile il progetto collaudandolo su vari tipi di browser, sistemi operativi

e piattaforme, utilizzando la velocità di connessione più bassa possibile.• Si deve facilitare l’accesso alle informazioni, fornendo strumenti di navigazione logici e si deve

evitare che l’utente debba fare più di due o tre clic per raggiungere la pagina desiderata.• Si deve sviluppare un look uniforme per il sito. Si deve fare attenzione a scegliere transizioni

uniformi da una pagina all’altra. Creare dei modelli per la struttura a griglia e applicarli in modouniforme.

Figura 2.38 Testo formattato per lo schermo.


• È opportuno abbondare con gli spazi vuoti. Il testo, i colori e la posizione degli elementi devo-no guidare lo sguardo dell’utente.

• Si deve cercare di conoscere il proprio pubblico e progettare le pagina a seconda delle sue esigenze,interessi e preferenze di visualizzazione.

• Si devono sfruttare le potenzialità dei link ipertestuali, fornendo agli utenti una quantità di linksufficiente per creare il proprio percorso all’interno delle informazioni.

• Si deve progettare il testo per la visualizzazione online, considerando le differenze esistenti fralo schermo e una pagina stampata.

Esercizi

Quesiti1. Come si chiama l’interfaccia con cui l’utente naviga in un sito Web?2. Qual è un errore commesso frequentemente dai progettisti Web nel collaudo del proprio sito?3. Qual è un motivo saliente per cui gli utenti lasciano un sito Web?4. Qual è il fattore più importante per determinare il successo di un sito Web?5. Quale importante fattore riduce la leggibilità delle informazioni?6. Nominare tre modi per creare un sito dal look uniforme.7. In quale modo la disposizione degli elementi a griglia migliora il progetto di un sito Web?8. Quali elementi HTML possono essere utilizzati per creare una griglia?9. Descrivere le differenze esistenti fra uno spazio vuoto attivo e passivo.

10. Elencare tre modi per creare una transizione uniforme fra le pagine di un sito Web.11. Elencare due vantaggi del posizionamento uniforme degli strumenti di navigazione.12. Descrivere le differenze esistenti fra lettura e scansione di una pagina.13. Nominare tre modi per attirare l’attenzione dell’utente.14. Spiegare perché non è efficace usare link composti dalle parole “... fare clic qui”.15. Descrivere i vantaggi dell’inserimento dei link nel testo.16. Descrivere i vantaggi degli indici ipertestuali.17. Perché l’attribuito ALT è così importante per la navigazione?18. Nominare tre differenze fra la progettazione per la carta stampata e per lo schermo.19. Descrivere una buona strategia di formattazione del testo per la visualizzazione online.

Progetti1. Navigare nel Web alla ricerca di esempi di buona progettazione.

a. Utilizzando un programma di cattura dello schermo, catturare delle immagini che mostrinodue livelli di informazioni del sito Web.

b. Indicare tramite richiami gli elementi unificanti delle pagine.c. Indicare le aree di spazio attivo e passivo.

2. Navigare nel Web alla ricerca di esempi di cattiva progettazione.a. Utilizzando un programma di cattura dello schermo, catturare delle immagini che mostrino

due livelli di informazioni del sito Web.b. Indicate tramite richiami le incongruenze presenti del sito.c. Consigliare i modi in cui è possibile migliorare il sito.

3. Scrivere un breve saggio di critica del progetto di un sito Web. Descrivere la disposizione dellestrutture del sito e determinare se le informazioni vengono presentate in modo chiaro e facilmenteaccessibile.

56 CAPITOLO 2

4. Navigare nel Web alla ricerca di siti che usano metodi di navigazione peculiari. Scrivere un brevesaggio che descrive se questi metodi di navigazione hanno successo o meno.

5. Trovare un sito Web che potrebbe essere migliorato.a. Stampare due pagine di tale sito.b. Stampare un’altra copia e metterla da parte.c. Usando le forbici, ritagliare gli elementi principali di ciascuna pagina e disporli in modo da

migliorare l’aspetto del sito.d. Confrontare l’originale con la versione migliorata.

Sviluppo di un sitoRappresentare il progetto delle pagine del sito Web schizzando una serie di pagine per i vari livelli diinformazioni del sito. Ad esempio creare una bozza della pagina principale, di una pagina seconda-ria e di una pagina di contenuti. Non ci si deve preoccupare troppo dell’esatto aspetto finale deglielementi, ma si devono indicare i componenti principali delle pagine, ad esempio i titoli, gli strumentidi navigazione, i gruppi di link, le aree di testo e così via.Iniziare a organizzare il sito. Creare uno schema grafico che indichi la pagina principale, le paginesecondarie, le pagine di contenuti e così via. Indicare i link fra le pagine. Indicare se si prevede diintrodurre dei metodi di navigazione alternativi, ad esempio un indice o una mappa del sito.

principi di progettazione di un sito web - apogeo editore · si devono considerare aspetti quali la...

Documents