1.5 La progettazione del sito web della Direzione Informatica e Telecomunicazioni dell'Università degli Studi di Trento

Michela Ferron

Il tirocinio formativo previsto dal Corso di Laurea in Scienze e Tecniche di Psicologia Cognitiva Applicata è stato realizzato nella forma di internato presso una delle strutture interne all'Università degli Studi di Trento, la Direzione Informatica e Telecomunicazioni. Quest'ultima si occupa della gestione, a livello centralizzato, della rete e dei servizi telematici dell'Ateneo, dei sistemi informativi e della formazione informatica, mentre a livello decentrato amministra i servizi informatici delle sedi periferiche dell'Università.

La Direzione Informatica e Telecomunicazioni è articolata in diverse strutture chiamate Aree Trasversali di Interesse (ATI), dedicate allo sviluppo della rete telematica, dei sistemi informativi, della formazione informatica e dell'area multimediale, e in Presidi periferici presso le facoltà dell'Ateneo.

In particolare, il tirocinio formativo è stato svolto presso l'Area Trasversale di Interesse Network, che coordina la gestione della rete d'Ateneo e di tutti i servizi di rete centralizzati.

L'attività svolta in merito all'architettura dell'informazione, che ha comportato lo studio di una nuova riorganizzazione della struttura informativa attraverso la procedura sperimentale del card sorting, verrà trattata in maniera più approfondita nel secondo capitolo.

Per quanto riguarda invece l'interfaccia grafica e il linguaggio di markup HMTL (Hypertext Markup Language), è stata operata una riprogettazione nel rispetto dei maggiori requisiti di usabilità e accessibilità e delle direttive specificate dal World Wide Web Consortium.

Le modifiche apportate al codice HMTL sono state per lo più strutturali e, salvo alcuni piccoli accorgimenti, non hanno intaccato in maniera importante il layout originale delle singole pagine. Le motivazioni di questa scelta risiedono nella necessità di rispettare l'identità visiva del sito web dell'Università degli Studi di Trento, mantenendo in tal modo un elevato grado di coerenza con le altre pagine ipertestuali.

L'attività di rielaborazione si è concentrata quindi soprattutto sulla realizzazione di una delle maggiori linee guida in materia di usabilità e di accessibilità, ossia la separazione tra contenuto e presentazione. L'innegabile vantaggio di questa linea guida può essere illustrato facendo riferimento alla nascita del World Wide Web e ai suoi successivi sviluppi.

In origine, quando Internet veniva utilizzato principalmente da scienziati e ricercatori per lo scambio di dati sperimentali, HTML aveva la funzione di definire la struttura delle pagine web, ripartendone il contenuto in maniera ordinata (Boscarol, 2002b). Per adempiere a tale finalità furono introdotte le tabelle, utili ad incorporare accuratamente e sistematicamente i dati.

In seguito tuttavia si diffuse la cattiva abitudine di utilizzarle per controllare l'aspetto visivo delle informazioni, inserendovi immagini, annidandovi altre tabelle, e consentendo di posizionare il testo con la massima precisione (ibidem).

Questo genere di approccio, purtroppo ancora in uso, consente di presentare visivamente il documento in un certo modo, ma, oltre ad appesantire notevolmente le pagine in termini di dimensioni del file, ne impedisce la corretta visualizzazione nel momento in cui viene utilizzata una tecnologia differente da quella per cui è stato progettato. Una tale situazione si potrebbe verificare nel caso in cui si utilizzi una diversa risoluzione del monitor, o un dispositivo con uno schermo di dimensioni ridotte, o ancora, nel caso in cui le immagini non possano essere visualizzate.

La logica della distinzione tra contenuto e modalità visiva di presentazione è stata introdotta per superare questi problemi.

Dal punto di vista tecnico la separazione del markup semantico da quello rappresentazionale si ottiene attraverso l'utilizzo dei fogli di stile a cascata, inserendo tutte le informazioni relative al layout delle pagine in un apposito file CSS (Cascading Style Sheets). Il termine "a cascata" fa riferimento ad una fondamentale caratteristica di questa tecnologia, ossia alla possibilità di incorporare nel documento HMTL fogli di stile diversi, ognuno dei quali in grado di prevalere sull'altro grazie a delle regole gerarchiche. In tal modo, quando si accede alla pagina web, il browser viene indirizzato al file CSS per recuperare le informazioni relative alle modalità di visualizzazione del contenuto.

Dal punto di vista concettuale, i vantaggi di questo approccio sono innumerevoli.

Innanzitutto, l'uso dei fogli di stile permette di alleggerire il sito web accorciandone sensibilmente i tempi di caricamento, in quanto un unico file CSS è in grado di controllare la rappresentazione grafica di tutte le pagine.

In secondo luogo, questa tecnica offre all'utente la possibilità di personalizzare alcune caratteristiche relative al layout e di modificare le impostazioni predefinite come la grandezza del testo o i colori, a seconda delle proprie esigenze.

Nell'ottica dell'accessibilità la separazione del contenuto dalla presentazione permette di presentare le pagine web in modi diversi a seconda del dispositivo utilizzato per la navigazione, consentendo al visitatore di accedere alle informazioni tramite sintesi vocale, display Braille o browser testuali, senza impedirne l'accesso da parte di strumentazioni incapaci di interpretare i file CSS (Ellero, 2003; Lilley, 2003). Inoltre, l'eliminazione degli elementi di stile dal file HTML comporta una maggiore enfasi sugli elementi strutturali incrementando notevolmente l'efficienza della navigazione da parte di persone affette da disabilità cognitive, fisiche, uditive o visive (ibidem).

Un ulteriore vantaggio pratico dell'utilizzo dei fogli di stile riguarda il mantenimento e l'aggiornamento del sito web: i contenuti possono essere aggiornati indipendentemente dalle modalità di presentazione, oltre che in maniera più veloce, dal momento che il file HTML, scévro dagli attributi di stile, risulta pulito e ordinato. Dall'altro lato, il layout del sito web può essere trasformato, anche in maniera importante e relativamente ad un gran numero di pagine, modificando solamente un file, a parità di contenuti. Questo comporta un notevole risparmio in termini di costi interni di manutenzione, permettendo di minimizzare i tempi e le risorse dedicate all'aggiornamento del sito (Castaldo, 2004; Cohen, 2004).

Infine, l'utilizzo di un unico file CSS per controllare lo stile di tutte le pagine conferisce un elevato grado di coerenza visiva al sito internet, consentendo una navigazione piacevole, semplice e ordinata.

Uno degli obiettivi conseguiti nelle attività di tirocinio formativo si proponeva di dimostrare l'attuabilità della riprogettazione, secondo i criteri di accessibilità precedentemente individuati, dell'originario sito web dell'Area Trasversale di Interesse Network, costruito senza prendere in considerazione il principio della separazione tra contenuto e presentazione.

Nell'ambito di questa finalità rientrava anche l'intento di mantenere un elevato grado di coerenza grafica con le altre pagine del sito web dell'Ateneo. è stato dimostrato infatti che un'interfaccia coerente consente di ridurre i tempi di esecuzione del compito, i tempi di apprendimento e il numero degli errori, mentre comporta l'accrescimento della soddisfazione dell'utente (Koyan, Balley & Nall, 2003).

Per adempiere a questo scopo si è fatto riferimento al manuale di identità visiva, redatto dalla Direzione Servizi e Comunicazione (2003) dell'Università degli Studi di Trento. Il manuale si propone di definire alcune caratteristiche grafiche standard, che identifichino l'immagine trasmessa dall'Università, con lo scopo di coordinare le modalità di comunicazione delle diverse strutture accademiche, conferendo una base efficace e coerente per la presentazione dell'Ateneo.

In particolare, il manuale web è stato utilizzato ampiamente per individuare le fondamentali peculiarità grafiche e stilistiche da includere nella progettazione del sito web dell'Area Trasversale di Interesse Network. In linea con questo approccio, la testata delle pagine (figura 1.2) è stata modificata nel rispetto delle indicazioni del manuale di identità visiva, e il logo della Direzione Informatica e Telecomunicazioni è stato ideato utilizzando caratteri e colori standard.

a)

b)

Figura 1.2 Layout dell'interfaccia del sito web dell'Area Trasversale di Interesse Network prima e dopo la riprogettazione.

Nota . a) La testata originaria del sito web dell'Area Trasversale di Interesse Network. b) La nuova testata, riprogettata secondo i criteri di identità visiva espressi dal manuale web della Direzione Servizi e Comunicazione dell'Università degli Studi di Trento.

Tuttavia, pur nel rispetto delle indicazioni del manuale web, sono state apportate delle modifiche di impatto trascurabile per quanto riguarda la conformità stilistica agli standard grafici dell'Università, ma che consentono di incrementare l'usabilità e l'accessibilità del sito. Per esempio, le immagini che inizialmente costituivano la pulsantiera delle funzionalità principali sono state sostituite con del testo, più accessibile e leggero, mentre lo sfondo rigato è stato eliminato per agevolare la percezione visiva delle parole.

Infine, per quanto riguarda il rispetto degli standard e la verifica della qualità del codice, sono stati utilizzati gli strumenti di controllo automatici messi a disposizione dal Consorzio Mondiale del Web. La principale ragione dell'importanza del rispetto degli standard risiede nel fatto che in tal modo è possibile assicurare l'accessibilità degli elementi e della struttura della pagine web alla più vasta gamma di utenti possibile (Splaine & Stefan, 2001). Il superamento dei test di valutazione del World Wide Web Consortium, sia per quanto riguarda i file HTML, sia relativamente al file CSS, è stato certificato mediante la concessione di apporre sul sito web le apposite icone rilasciate dallo stesso Consorzio (figura 1.3).

Figura 1.3 Certificazioni rilasciate dal World Wide Web Consortium, relative alla conformità del codice HTML e CSS alle specifiche e alle raccomandazioni dettate da questo organismo internazionale.

Durante la progettazione del sito web è stato necessario prendere in considerazione le diverse modalità di presentazione delle pagine da parte di vari tipi di browser, tra cui Internet Explorer, Opera, Mozilla e Netscape Navigator, dal momento che questi ultimi interpretano in maniera differente gli attributi dei documenti HTML e CSS. Ad ogni modo, è opportuno notare che il rispetto degli standard di per sè favorisce un elevato grado di compatibilità tra i differenti strumenti utilizzati per la navigazione.

è stata inoltre prestata una particolare attenzione al formato delle immagini, le quali possono comportare un significativo aumento dei costi in termini di tempi di download dei documenti che le contengono. Il formato ritenuto più adatto per incontrare le particolari esigenze del sito web dell'Area Trasversale di Interesse Network è il Portable Network Graphic (PGN), ideato dal World Wide Web Consortium appositamente per sostituire le immagini web più semplici in formato GIF (Graphics Interchange Format). Il formato PNG, al contrario del GIF, è gratuito, permette di comprimere le dimensioni del file senza perdite di informazioni, ed è in grado di incorporare nelle immagini delle stringhe di testo, funzionalità importante per l'esecuzione di ricerche (ibidem).

Nel presente capitolo sono state esaminate le principali linee guida per quanto riguarda l'usabilità e l'accessibilità dei siti web, con particolare riferimento all'intefaccia grafica. In linea con questo orientamento, è stata illustrata l'attività di riprogettazione del sito web dell'Area Trasversale di Interesse Network dell'Università degli Studi di Trento per quanto riguarda l'aspetto del layout visivo. Tuttavia, l'usabilità di un sito web non è determinata solamente dalla semplicità d'uso dell'interfaccia, ma anche dalla facilità con cui è possibile reperire le informazioni, strettamente connessa con le modalità che definiscono l'organizzazione delle pagine.

Pertanto, nel capitolo successivo l'architettura informativa verrà esaminata in maniera più dettagliata dal punto di vista teorico, prendendo in considerazione le maggiori tipologie di schemi e strutture organizzative ed analizzandone le principali caratteristiche.

Verrà inoltre presentata l'attività del tirocinio formativo riguardante lo studio di una nuova architettura dell'informazione per il sito web dell'Area Trasversale di Interesse Network attraverso la tecnica del card sorting, esaminata nei suoi aspetti metodologici.