USABILITÀ DEI SITIE0.pdf · Itis Euganeo – Nicola Ceccon 1 Autore: Nicola CECCON Classe: QUINTA...

Itis Euganeo – Nicola Ceccon 1

Autore: Nicola CECCON

Classe: QUINTA INFORMATICA (5IA)

Anno scolastico: 2003/2004

Scuola: Itis Euganeo

USABILITÀ DEI SITI

Sintesi sulla tematica della usabilità dei siti considerati dei software, digitali, che vengono progettati, realizzati, venduti e consumati. Anche i siti, pertanto, devono essere usabili, cioè l’usabilità deve essere una caratteristica necessaria di ogni sito.

Dopo una introduzione teorica, necessaria per una corretta progettazione, si analizzano, nella forma di un tutorial, le principali buone pratiche di usabilità per un sito, ricorrendo alle schermate delle pagine di un sito reale.

Usabilità dei siti: teoria


Introduzione

L’usabilità è un neologismo derivato dal termine inglese “usabilty” ed è una caratteristica di un qualsiasi prodotto creato dall’uomo per l’uomo 1.

Un prodotto usabile fa venire in mente un prodotto che può essere utilizzato in modo facile e amichevole per l’utente, senza la necessità di un lungo e difficile apprendimento, attraverso la lettura di manuali e ripetuti tentativi di utilizzo/apprendimento, come specificato dallo standard ISO/IEC 9126 che definisce l'usabilità come la capacità del software di essere compreso, appreso, usato e gradito dall’utente quando usato in determinate condizioni.

Jakob Nielsen2 definisce l'usabilità come la misura della qualità dell'esperienza dell'utente in interazione con qualcosa, sia esso un sito o un applicazione software tradizionale o qualsiasi altro strumento con il quale l'utente può operare. In questa sua definizione un prodotto è usabile quando è facile da apprendere (meccanismi di navigazione interna), consente una efficienza di utilizzo, è facile da ricordare (meccanismi di interazione), permette pochi errori di interazione e di bassa gravità, è piacevole da usare (soddisfazione dell’utente). È ovvio, inoltre, che il sito deve essere utile, cioè i contenuti devono fornire informazioni di una qualche utilità per l’utente

L’esperienza reale di navigazione dell’utente, nota come User Experience, risulta fondamentale nella progettazione di un prodotto usabile: si deve valutare il comportamento dell’utente (cosa fa?), i risultati che ottiene (cosa ottiene?) e le sensazioni che prova (che sensazioni ha del prodotto?) inizialmente con dei test, detti di usabilità, e successivamente con il monitoraggio e l’analisi statistica dei Log (file di testo che memorizzano il traffico di un sito).

Da queste definizioni si comprende che l'usabilità ha senso solo in presenza di un utente e di una relazione d'uso e non esiste nel prodotto in sé. Non è, quindi, una proprietà assoluta di un prodotto, ma relativa al compito da svolgere, all’utente e all’ambiente d’uso3. Così, per esempio, uno spremiagrumi non necessariamente deve essere usabile se l’uso non è fare una spremuta di arance, ma essere un elemento di arredamento oppure la scrittura di un messaggio SMS può essere un impresa per un adulto e una cosa banale per un ragazzo.

Un prodotto usabile quindi dovrebbe permettere all’utilizzatore di concentrarsi sul cosa fare e non sul come.

1 Si pensi all’utilizzo del cellulare, alla mappa di una metropolitana, alla visualizzazione di un film in DVD, ad un distributore di bevande, ad una fotocopiatrice… 2 Uno dei maggiori esperti nel campo dell’usabilità. 3 Per esempio l’interfaccia di un software di monitoraggio di uno strumento cardiologo può essere usabile in un ambulatorio, ma non usabile in una sala di rianimazione (si pensi alla diversa illuminazione).

Prodotto usabile

ISO/IEC 9126

Utente e relazione d’uso

User Experience

Definizione



Oggetti e attori del web

Sito come prodotto

Il sito, come tutti gli strumenti che si utilizzano, è un prodotto con il quale si svolgono dei compiti aspettandoci una qualche utilità. È infatti un prodotto software, digitale, che viene progettato, realizzato, venduto e consumato.

In questo prodotto utilizzato dall’utente l’usabilità deve essere una caratteristica necessaria del sito e in questa prospettiva assume rilevanza cruciale l'interfaccia del prodotto 4: essa deve rendere immediatamente conto delle possibilità, dei limiti e delle modalità di funzionamento del prodotto, evidenziando la relazione tra le azioni che l'utente può compiere sull'interfaccia stessa ed i risultati che può ottenere. Quindi, nel caso di un sito, come attivare un collegamento o come capire se un collegamento porta all’informazione cercata o come distinguere le aree dei contenuti da quelle di navigazione…

In un sito usabile l’utente si concentra sulle informazioni presenti e non sul come accedervi: dovrebbe essere idealmente autoevidente5 e non, come spesso accade, costringere l’utilizzatore a concentrarsi sullo scoprire dove sono i collegamenti oppure cosa significa e dove porta un collegamento o cosa contiene una determinata pagina.

L’autoevidenza è una condizione difficile e per questo l’interfaccia dovrebbe essere almeno autoesplicativa, cioè fornire all’utente, dopo un breve e non ambiguo sforzo di interpretazione, le informazioni necessarie per la navigazione e l’analisi del contenuto.

Per Krug6 la prima regola di usabilità di un sito è “Non mi far riflettere”: la pagina non deve far pensare, cioè non deve comportare uno sforzo di decodifica del suo contenuto. Per esempio, in una pagina web dovrebbero essere evidenti i collegamenti, senza invece obbligare l’utente a cercarli (o peggio indovinarli).

4 L’usabilità per il web presenta una complessità superiore a causa delle differenze tra software e sito. Come Nielsen afferma, in “Designing Web Usability: The Practice of Semplicity” internet ribalta l'immagine di ciò che avveniva nel tradizionale processo di sviluppo del software: il cliente aveva percezione dell'usabilità del prodotto solo dopo il suo l'acquisto, le software house potevano quindi riparare alla scarsa usabilità dei loro prodotti, ad esempio, attraverso l'istituzione di help-desk (con un costo rilevante)… Internet ribalta questa situazione: ora, gli utenti hanno esperienza dell'usabilità di un sito prima dell'interagire con esso e prima che essi abbiano speso soldi in possibili acquisti. In altri termini nell’economia tradizionale l’utente prima compra e poi usa, mentre nell’economia web prima usa poi compra. Siti e software sono diversi nell’interfaccia e di conseguenza deve (o dovrebbe) essere anche la loro progettazione. 5 Secondo Don Norman, in “Il computer invisibile” – Apogeo - 2000, è un falso concetto quello secondo cui il design possa rendere tutto intuitivamente ovvio. In realtà l’intuizione è legata alla pratica e alla esperienza. Con minime eccezioni, le cose che definiamo intuitive sono semplicemente capacità che abbiamo praticato per così tanti anni da non ricordare più quanto difficile sia stato apprenderle…Le attività difficili devono sempre essere insegnate e apprese… Non è obbligatorio che il buon design sia autoesplicativo: alcuni compiti sono intrinsicamente troppo complessi. 6 Steve Krug in “Don’t make me think!” - Hops libri - 2001.

Interfaccia autoevidente

Interfaccia autoesplicativa

Prima regola dell’usabilità?



Cos’è un sito?

Un sito è un insieme di contenuti e servizi che una azienda7 rende disponibile in internet allo scopo di raggiungere i propri obiettivi (vendite, informazione, assistenza ai clienti, riduzione dei costi, promozione prodotti, contatto fornitori, formazione personale...), in cui sia i contenuti che i servizi8 sono importantissimi.

Azienda e web

La presenza di una azienda nel web è necessaria, ma la sola presenza su internet non è sufficiente a garantirne l’utilità per l'organizzazione. Nel momento in cui l’azienda decide di investire in un sito, e più in generale in internet, è necessario che si ponga seriamente il problema del suo utilizzo: una presenza in rete approssimativa, in alcuni casi, risulta non solo inutile, ma dannosa, in quanto compromette l'immagine dell'organizzazione.

Nielsen9 identifica tra gli errori che il management (i dirigenti) o la proprietà (imprenditore nel caso tipico di una piccola e media azienda o artigiano) di un'organizzazione deve assolutamente evitare nell’approccio al web:

− Non sapere il perché . Andare in internet perché lo fanno tutti è inutile e dannoso, bisogna avere una consapevolezza del mezzo, dei limiti, delle potenzialità.

− Considerare il web come un medium10 secondario e sottovalutarne l'impatto strategico. L'importanza del sito varia a seconda della tipologia dell'organizzazione, dell'area geografica in cui si colloca, del contesto culturale dei suoi utenti.

− Non avere una strategia11 nella presenza in internet.

7 Per altre organizzazioni possono cambiare gli obiettivi. 8 La creazione di servizi sulla rete è un passo importante verso il commercio elettronico. Il sito commerciale si costruisce infatti attorno ad un servizio che può anche essere non direttamente legato all’attività commerciale, ma capace comunque di attirare l’attenzione dei clienti. Infatti il ruolo dei servizi per il successo del sito è quello di instaurare una relazione di lunga durata con il consumatore e quindi la vendita dei prodotti (direttamente nel caso del commercio elettronico). Sinteticamente la relazione si instaura con il seguente processo: prima viene il bisogno del visitatore, quindi il servizio che risponde alle sue esigenze e infine il sito che lo eroga. Come sostiene Visciola: un sito senza contenuti e funzionalità (servizi) non svolge nessuna funzione e pertanto è destinato a vita breve. 9 Jakob Nielsen in www.useit.com 10 Parola latina che significa mezzo o media. 11 Il primo e più semplice utilizzo del web da parte di molte aziende è quello detto della “Presenza” o “Testimonianza” in cui mettono online il proprio marchio, cioè si presentano. E’ questo l’uso tipico del web che molte aziende hanno fatto alla fine degli anni ‘90 quando hanno cominciato a valutare l’opportunità di entrare in internet. Ma questo primo passo spesso è anche l’unico, in particolare per le piccole e medie imprese. In molti casi questi siti aziendali hanno un approccio molto autoreferenziale alla comunicazione: l’azienda spiega chi è e cosa fa, pubblica il bilancio dell’ultimo anno, talvolta mostra le foto dei dipendenti e dei proprietari… una tipica comunicazione di una brochure di carta messa nel web. Dovrebbe apparire chiaro che il potenziale commerciale di un sito del genere è praticamente nullo. Anche la capacità

Contenuti e servizi

Errori di Nielsen nell’approccio al web



I servizi minimali, per realizzare un sito di una certa qualità, sono la posta elettronica12 e il catalogo dei prodotti: in molti casi, la posta elettronica assume la stessa funzione di un numero verde, cioè un’opportunità che l’azienda offre ai propri interlocutori al fine di favorire il contatto e la comunicazione, mentre la possibilità di ricercare i prodotti in un catalogo online aumenta il richiamo commerciale del servizio.

Per non incorrere nel fatale secondo errore di Nielsen è utile sinteticamente13

capire il medium web.

Il web

Il web è un mezzo di comunicazione, basato sulla ipermedialità online, cioè sull’accesso remoto a contenuti multimediali strutturati in ipertesti14.

di incidere nel ricordo di un visitatore è debole, se non nullo. Un sito stile tipo “depliant elettronico” è un sito di bassa qualità e destinato pertanto al fallimento. 12 L’email è un modo per avvicinare l’azienda al cliente, cioè per passare da una entità lontana, inavvicinabile e sostanzialmente sconosciuta al cliente a qualcosa di definibile, noto e vicino tramite l’instaurazione di un rapporto (asincrono). La posta elettronica assolve a funzioni importanti, come l’assistenza pre-vendita e post-vendita: dalle informazioni sul prodotto sino alle informazioni sul suo utilizzo. Inoltre, un buon sito aziendale deve offrire al visitatore la possibilità di entrare in contatto con il personale interno. L’assistenza via email, oltre ad essere un utile e buon servizio di per sé, genera in azienda maggior consapevolezza sui reali bisogni dei visitatori del sito. Conoscere i motivi e i bisogni che guidano una persona a visitare il tuo sito, infatti, non è scontato e ciò che i visitatori chiedono aiuta a focalizzare meglio i loro bisogni. 13 Si lascia alle diverse risorse in internet un approfondimento della tematica del web come mezzo di comunicazione. 14 Sul tema si evidenzia come la non linearità non è la caratteristica distintiva (e fondamentale) dell’ipertesto, lo è il collegamento “digitale”, Il fatto è che il computer ci fornisce una perfetta 'macchina di navigazione' all'interno dei percorsi ramificati stabiliti attraverso i link di un ipertesto. Un ipertesto elettronico assomiglia insomma a un parco in cui il viandante disponga di una sorta di 'macchina di teletrasporto' per muoversi con facilità da un incrocio di sentieri a un altro, da un percorso a un altro...Gino Roncaglia in mediamente (mediamente.rai.it). Ipertestualità ingloba l’interattività e l’utilizzo oltre al testo di altre componenti mediali (animazioni, immagini, suono e video) trasforma il tutto in ipermedia, anche se

Contenuti e servizi minimali e utenti Fig. 1



Ogni mezzo (televisione, radio, telefono, CDRom, libro, giornale, poster…) possiede caratteristiche e qualità particolari che in alcuni casi sono esclusive del mezzo e in altri comuni. Queste caratteristiche e qualità influenzano il modo in cui può essere utilizzato il mezzo e le qualità espressive che gli autori possono potenzialmente utilizzare nella creazione di informazioni.

Il confronto tra le caratteristiche esclusive del web con gli altri mezzi di comunicazione tradizionali può aiutare lo sviluppatore nella progettazione e realizzazione di un sito.

Le caratteristiche esclusive sono:

− Senza limiti spazio-temporali : una pagina web è pubblicamente disponibile in internet su un server web mediante un browser. Considerare il web come insieme di espressioni (opere) senza limiti spazio-temporali significa che queste sono virt ualmente in ogni luogo sulla rete (Anywhere) in qualsiasi momento (Anytime) e in copie illimitate.

− Sistema a contenuto infinito: questa caratteristica è evidenziata da Livraghi e Postai15:

La struttura ipertestuale (a differenza di qualsiasi altro veicolo di comunicazione) permette una quantità “potenzialmente infinita” di informazione. La conseguenza è che quando una persona si collega a un sito web (o a qualsiasi sistema di informazione disponibile in rete) si aspetta di trovare tutto ciò che cerca e se non lo trova rimane delusa. Questo non accade con un annuncio, con un film e neppure con un libro: contenitori “finiti” da cui non ci si può aspettare “tutto”. Ma la completezza e ricchezza di informazioni (con un ben articolato sistema di accesso e orientamento) diventa un’esigenza inderogabile nel caso di un sito web.

− Ambiente a ricezione variabile : si tratta di un problema molto rilevante per gli sviluppatori e consiste nella grande variabilità di ricezione delle pagine web da parte dell'utente. Questo dipende da diversi elementi legati all’hardware e al software e dai diversi comportamenti dell’utente, che fanno sì che la pagina venga visualizzata in modo differente su differenti sistemi. Il web, quindi, non permettendo il controllo completo della visualizzazione della pagina comporta ad una diversità progettuale tra una pagina web e la stampa: nella stampa il progettista ha il controllo a livello di singolo punto (pixel) e quindi non c’è differenza tra prodotto realizzato e prodotto fruito/visualizzato, cioè la disposizione degli elementi e pertanto la visualizzazione del progettista coincide con la visualizzazione dell’utente finale. Questo

attualmente limitato alle sole componenti testo, immagini e animazioni a causa dell’attuale larghezza di banda effettivamente disponibile. 15 Giancarlo Livraghi e Sofia Postai in “Le imprese e internet” – www.gandalf.it

Caratteristiche esclusive



problema viene affrontato cercando di utilizzare i linguaggi disponibili (HTML, JavaScript, CSS…) per controllare e impedire il più possibile la variabilità. Postai16 esprime il concetto di variabilità identificando il web come un mezzo a ricezione variabile e si tratta di una caratteristica che lo differenzia in modo inequivocabile da altri mezzi di comunicazione.

Le caratteristiche non esclusive del web sono:

− Multiruolo : gli utenti del web possono essere non soltanto consumatori di informazioni, ma anche fornitori17.

− Dinamicità: dato che un sito non è memorizzato permanentemente su un mezzo, come un titolo multimediale su cdrom, la dinamicità dipende dal flusso di contenuto causato dai siti collegati e dal flusso tecnico legato all’innovazione tecnica18.

− Interattività: l’interattività è presente sia in forma di selezione, attraverso le scelte dell’utente nell’ipertesto, sia in forma di interattività completa grazie alla programmazione di servizi di interattività come moduli (form), email, chat, forum, webconference.

− Porosità : un sito presenta punti di ingresso multipli, cioè l’utente può accedere ad una qualsiasi pagina del sito e non necessariamente esclusivamente alla home page; per esempio, da un collegamento come risultato di una ricerca, da un collegamento esterno da un altro sito, da un accesso diretto scrivendo indirizzo URL della pagina.

− Competitività: a causa della caratteristica di essere distribuito, delle

qualità dinamiche e della gratuità 19 dell’accesso al sito, i siti e quindi gli 16 Sofia Postai in “Siti che funzionano” - Apogeo - 2002: il problema è ben noto ai web designer che devono accettare questa variabilità e farsela amica, rinunciando al controllo di ogni singolo pixel in virtù di una progettazione flessibile che tenga conto delle differenze di visualizzazione fra piattaforme diverse (vedi anche e nel sito www.sitichefunzionano.it) 17 Si pensi ai forum o ai blog, per esempio. 18 Nuovi browser, server di comunicazioni, collegamenti internet, nuovi linguaggi. 19 Tranne per particolari tipologie di siti.

Caratteristiche non esclusive, cioè le qualità

Porosità Fig. 2



sviluppatori di contenuti si confrontano con una competizione estrema ed aggressiva per conquistare l’attenzione dell’utente.

− On demand: il web è un medium on demand in cui l’utente richiede le informazioni con un atto di volontà. L’utente rispetto all’offerta di contenuti è attivo, e non passivo come nel caso della televisione. Quindi la dinamica di fruizione è diversa rispetto ai media tradizionali: la decisione di visitare un sito è lasciata all’utente ed è guidata dai click del mouse, che sono ovviamente gesti volontari.

Questo mezzo “nuovo” di comunicazione assomiglia ad un altro?

La risposta ce la fornisce Livraghi20:

Forse perché si guarda su uno schermo, molti pensano che la rete somigli alla televisione. Invece è molto più simile alla stampa – con importanti differenze dovute alla struttura “ipertestuale”… Come si può constatare, la struttura del messaggio in rete è molto più simile alla “carta stampata” che alla televisione. Con una differenza fondamentale: l’assai maggiore possibilità di approfondimento, e di gestione da parte del lettore, offerta dalla comunicazione elettronica.

Non si deve dimenticare il punto centrale, il grande valore del medium web, dato dall’interattività: la comunicazione sul web è a due vie. L’unica forma altrettanto ricca e diffusa di comunicazione a distanza a due vie è quella telefonica.

Le altre forme di comunicazione sono invece monodirezionali (la TV, i giornali e le riviste, la radio), cioè la comunicazione in internet è basata su uno scambio di informazioni21 e non semplicemente sull’invio di informazioni. Questo elemento è estremamente rilevante soprattutto per le aziende perché esige un radicale ripensamento del modo di dialogare con il proprio mercato. Più in generale, l’interattività della comunicazione porta ad una conseguenza fondamentale: la rete non è solo un mezzo per diffondere informazioni, ma un’occasione per costruire e mantenere le relazioni e questa costruzione di relazioni è l’obiettivo strategico dell’azienda in rete anche se non svolgono l’ecommerce22.

20 Giancarlo Livraghi in “L’umanità dell’internet (le vie della rete sono infinite) – www.gandalf.it 21 Nel web, essendo interattivo, assumono una particolare importanza la sicurezza e la privacy, che sono problemi molto sentiti dagli utenti. 22 Il termine ecommerce o e-commerce si usa per descrivere ogni transazione commerciale in internet. Quindi, vedere un prodotto in un sito web e poi andare in un negozio e comperarlo non è ecommerce, ma ordinare il prodotto attraverso il sito lo è (per esempio, l’acquisto di un libro in un bookshop e pagamento con carta di credito).

Scambio di informazioni e non semplice invio

Il valore del medium web



Utente e web

Un utente web (o navigatore o visitatore) è secondo Visciola23:

una persona interessata all’interazione mediante il web, dalla quale vuole ottenere informazioni o più genericamente accesso a beni e servizi per soddisfare specifici e molteplici bisogni.

Queste definizioni ci permettono di dire che la finalità di un sito è quella di rendere disponibile le informazioni24, e che l’utente indipendentemente dalla tipologia di sito naviga all’interno delle sue pagine alla ricerca dell’accesso a ciò che gli interessa.

Ma, questo incontro tra informazioni disponibili e informazioni recuperate spesso avviene parzialmente e ancor più spesso con un eccessivo sforzo25 da parte dell’utente.

Questo genera nell’utente, soprattutto se novizio, una esperienza di insoddisfazione o di frustrazione:

− Insoddisfazione per non aver trovato quello che cerca che porta spesso ad un giudizio fortemente negativo 26.

− Frustrazione per un senso di incapacità27, cioè per non essere riuscito a trovare l’informazione che c’é.

E’ questa una esperienza tipica perché, oggi, nel web c’è un differenziale (gap) tra informazione “trasferibile” e informazione “comunicabile”, che dipende dal

23 Michele Visciola in “Usabilità dei siti Web” - Apogeo - 2000. 24 Il web è informazione e lo scopo primario di qualsiasi metodologia di progettazione dovrebbe essere quella di progettare siti in cui sia facile e rapido recuperare informazioni, ma vi sono siti in cui è fondamentale, invece, fornire emozioni attraverso l’uso di una grafica di impatto e la sperimentazione dei collegamenti tra le pagine. L’aspetto emozionale non è comunque da sottovalutare in nessuna tipologia di sito perché l’emozione incide sulle capacità cognitive dell’utente, si pensi in particolare ai sito di ecommerce, una vera sfida progettuale, che devono raggiungere contemporaneamente due obiettivi: trattenere e motivare i navigatori casuali (emozione) e fornire rapidi e semplici accessi ai prodotti per i navigatori che entrano nel sito con obiettivi precisi (informazione). Nella “Web Style Guide” di P. Lynch il diagramma che segue posiziona il tipo di sito rispetto alle due opposte esigenze dell’utente: sensazione e informazione.

25 O in un linguaggio corretto con un eccessivo carico cognitivo. 26 La smitizzazione del mito internet: non è vero quello che dicono. 27 L’utente pensa o meglio è consapevole che l’informazione sia presente e spesso conosce altri utenti che hanno recuperato l’informazione nello stesso sito.

Finalità di un sito

Gap

Problema dell’incontro tra informazioni

Esperienza di insoddisfazione e frustrazione



sistema di organizzazione delle informazioni, da cui dipendono i sistemi di ricerca, e dalla modalità di visualizzazione delle informazioni.

Questo differenziale vale per il web, nel suo complesso, ma anche per il singolo sito. Infatti, una errata progettazione può portare alla realizzazione di siti che non riescono a trasferire le informazioni perché le nascondono o perché forniscono una quantità tale di informazioni non assimilabili 28.

Cosa vuole l’utente

L’utente web agisce ricercando informazioni utili in un mare sterminato di informazioni, presenti in un nuovo medium di comunicazione non facile da usare, ricevendo una quantità enorme di informazioni, spesso inutili.

Ha quindi delle aspettative/esigenze fondamentali:

− Contenuto (informazioni): qualità, chiarezza e comprensione delle informazioni.

− Organizzazione del contenuto: disposizione del contenuto e diverse rilevanze dello stesso.

− Servizi e funzionalità: ricerca mediante motore, mailing list, personalizzazione…

− Navigazione:Accedere facilmente alle informazioni.

Fallimento del sito

Avere, quindi, definito contenuti qualitativamente importanti (appetibili per i navigatori), servizi interessanti (che aumentano l’audience29 e innestano la fidelizzazione 30) e aver promosso in modo efficace il sito (ottima targetizzazione31) non costituiscono, generalmente, la garanzia di successo: il tutto dipende dalle caratteristiche di un qualsiasi documento online, che sono il contenuto e l’accesso. Se una delle due caratteristiche è qualitativamente scarsa il sito non trasmette informazioni o perché non ci sono o perché sono troppe o perché sono nascoste o perché non fruibili32 (a causa del tempo di

28 Overloading informativo. 29 Pubblico previsto per il sito. 30 Visite ripetute nel sito da parte di un utente. 31 Aver collocato nei motori di ricerca, negli alberi di ricerca e nei diversi canali pubblicitari il sito in modo da raggiungere la tipologia di utenti (target) definito per il sito… 32 Nel web, e più in generale nell’ipermedialità online, il trasferimento di dati e informazioni in modo interattivo, presenta il problema della reale fruibilità dell’informazione. Con questo termine si vuole evidenziare il fatto che una pagina ha un peso (spazio complessivo di una pagina web dato dalla somma tra lo spazio del file della pagina e di tutti gli elementi esterni, come le immagini) e che il suo trasferimento dal server web al client web (browser) impiega del tempo che è tempo che l’utente deve attendere per la visualizzazione. Oltre una certa soglia di tolleranza, di alcuni secondi, l’utente ricerca in altri siti l’informazione, cioè non fruisce dell’informazione presente. Il sistema di fruizione nel suo complesso (capacità elaborativa e velocità trasmissiva) costituisce un vincolo sia nel tipo di componenti multimediali utilizzabili sia nel senso delle risoluzioni dei componenti.



trasferimento), cioè fallisce: il sito non risponde alla richiesta di informazioni dell’utente.

Contenuto e accesso

Il contenuto in un sito è l’elemento principale poiché, come in precedenza si è evidenziato, nelle interfacce delle pagine, i compiti che gli utenti possono svolgere su di esse sono sempre legati al reperimento e la consultazione di informazioni, cioè l’informazione è sempre al centro delle azioni dell’utente.

L’accesso ai contenuti è però altrettanto fondamentale.

Non assicurarsi che l’utente possa svolgere i propri compiti nel modo migliore significa:

1. Danneggiare in primo luogo l’utente stesso, il quale può sentirsi frustrato o inadeguato rispetto al sistema e quindi decidere di abbandonarlo.

2. Danneggiare in secondo luogo, il committente del sito, il quale ha investito economicamente ed in risorse umane su di esso con il rischio, sicuramente elevato, di non poter raggiungere gli obiettivi sperati: un utente che abbandona un sito, infatti, perché non riesce ad usufruirne in modo adeguato, è un utente che molto difficilmente vi ritornerà33, come diverse indagini statistiche dimostrano.

Il problema del contenuto e dell’accesso è così spiegato da Livraghi34:

Conciliare le due esigenze (ricchezza di contenuto e facilità di accesso) è tutt’altro che facile. Ma se chi imposta il progetto “ipertestuale” fa bene il suo lavoro ciò che troviamo è un sistema semplice, chiaro, accessibile che ci semplifica la ricerca e l’esplorazione. Il criterio fondamentale è quello che governa tutti i buoni sistemi di comunicazione: non solo la qualità dei contenuti, ma anche il modo in cui sono organizzati e proposti deve essere pensato, realizzato e organizzato dal punto di vista di chi legge.

Tipi di ricerca

Per soddisfare l’esigenza di accesso si devono considerare le diverse modalità con cui l’utente ricerca le informazioni all’interno dello spazio informativo del sito.

Il vincolo è rappresentato dal transfer rate e dalla, ovvia, relazione inversa tra peso e velocità di trasferimento che fa coppia con l’altra importante relazione nella produzione di opere multimediali: la relazione diretta tra qualità e peso. Queste relazioni implicano una relazione inversa tra qualità e velocità, cioè un’alta qualità si paga in termini di velocità di visualizzazione. 33 E, quindi, un utente non diventerà un cliente (ma un cliente di un altro citando una celebre frase di un manager). 34 Giancarlo Livraghi in “L’umanità di internet (le vie della rete sono infinite)”, anche in www.gandalf.it/uman/19.htm

Ruolo centrale dell’informazione



Gli studi35 sulle modalità di ricerca degli utenti nel web dimostrano che un navigatore attua un comportamento che si distribuisce tra due metodologie complementari:

− La ricerca orientata agli obiettivi, detta Search: è una ricerca caratterizzata da una notevole precisione nella individuazione delle informazioni da ricercare, cioè il navigatore ricerca una determinata e precisa informazione nel sito (per esempio “Turbo diesel” in un sito di automobili). Nel web, a questa ricerca corrisponde l’interazio ne mediante l’interrogazione di un motore di ricerca.

− La ricerca orientata ai contenuti, detta Browse: è una ricerca caratterizzata da una elevata incertezza sulle informazioni disponibili e necessarie e si basa sul farsi guidare dai contenuti informativi disponibili. Nel web, a questa ricerca corrisponde l’interrogazione tramite navigazione, cioè seguendo i link.

Risulta evidente che la mancanza di un servizio di ricerca interna nel sito è un grave errore di usabilità perché rende il sito non usabile agli utenti che preferiscono l’utilizzo di questa modalità di ricerca.

La maggioranza dei navigatori effettua una ricerca mediante navigazione, nonostante sia dimostrato che spesso nel caso di search efficiente36 il numero 35 Nielsen distingue appunto gli utenti in due categorie: search-dominant e link-dominant. 36 Il sistema di ricerca di un sito è uno degli aspetti più delicati nella progettazione e realizzazione perché c’è il rischio concreto dell’overloading informativo; il caso classico è quello dei motori di ricerca che spesso non forniscono le informazioni desiderate , perché le risposte sono quantitativamente poco gestibili e qualitativamente irrilevanti a causa della imprecisione degli algoritmi di indicizzazione (robot o spyder) utilizzati. Questo è un serio problema da considerare nella fase di progettazione di un sito, poiché il fallimento dell’esperienza tra utente e sito può non solo dipendere da “poche” informazioni, ma anche da “troppe”. La tematica è stata ampiamente affrontato in un settore della ricerca noto come “information retrivial” il cui scopo è quello di conciliare due requisiti difficilmente compatibili: la completezza e la precisione della risposta a interrogazioni di database. L’equilibrio consiste nel ricercare soluzioni che siano un compromesso tra la spinta a

Metodo preferito

Searching e browsing

Browse (in viola) e search (in rosso) per accedere alla pagina con il contenuto “PC” Fig. 3



dei click (e quindi il tempo complessivo) è inferiore rispetto al browse, e questo comporta per l’utente una fondamentale esigenza di navigazione che si sostanzia nell’avere a disposizione una interfaccia che lo aiuti a trovare le informazioni e che lo motivi all’attivazione 37 dei collegamenti, tramite una anticipazione dei contenuti.

Dato che il collegamento è l’elemento chiave attraverso cui il web offre contenuti permettendo all’utente di creare i propri contenuti significativi, la capacità di attraversare questi collegamenti è per l’utente fondamentale. Questa capacità si sostanzia in esigenze di navigazione.

Esigenze di navigazione

Le esigenze di navigazione sono:

− Le funzioni di navigazione messe a disposizione da un browser, che in sintesi sono la visualizzazione dell’informazione, l’attivazione e l’individuazione dei collegamenti con la possibilità di distinguere tra visitati e non, il movimento tra le pagine visitate in precedenza, la registrazione degli indirizzi delle pagine38 per permettere un accesso diretto in un secondo momento, il controllo del flusso con la possibilità di interrompere la ricezione

− La disponibilità di strumenti per la navigazione tra le pagine , in modo da permettere, oltre ad una rapida ricerca, la possibilità di tornare a punti di partenza come la home page, che costituendo la pagina principale del sito è anche la pagina di riferimento in caso si smarrimento (il porto sicuro…).

− La non ambiguità tra i nomi dei collegamenti, detti etichette, e il contenuto della pagina associata.

− La possibilità di individuare immediatamente i collegamenti senza la necessità di effettuare una ricerca in modalità “mosca cieca”: posizionamento del puntatore del mouse verso gli elementi sospettati di essere collegamenti per verificare se lo è controllando la trasformazione del puntatore dalla freccia alla manina..

Non tener conto di queste esigenze è un grave errore che comporta un notevole carico cognitivo per l’utente.

La visualizzazione, scelta e attivazione del collegamento costituisce l’essenza della navigazione web. Ma in questo processo l’utente si affatica e questo si riflette sulla sua capacità di capire la pagina e nella sua volontà di rimanerci: privilegia un sistema semplice, che permetti di familiarizzare e padroneggiare il sistema stesso ai fini del raggiungimento dell'obiettivo (efficacia), con il minimo sforzo di attenzione/concentrazione (efficienza).

recuperare il maggior numero di informazioni disponibili e il rischio di risultati imprecisi. 37 Sostanzialmente, l’attivazione di un collegamento implica una transazione tra l’utente e il browser web: in base all’esperienza derivante dalla visualizzazione dell’informazione, l’utente sceglie un collegamento ipertestuale per trasmettere questa scelta al browser. 38 Inserimento in un’area preferiti con la possibilità di organizzazione in cartelle.

Essenza della navigazione web



Riduzione degli sforzi dell’utente

L’utente presenta dei vincoli cognitivi che devono essere considerati nella progettazione, pena il fallimento della interazione, mediante una progettazione che miri a ridurre il più possibile il carico cognitivo nell'elaborazione delle informazioni.

E’ quindi utile tener conto di alcuni studi che affrontano la tematica della riduzione, tra i quali si presentano:

− Studi di Miller in base ai quali risulta impossibile per l'utente (sistema cognitivo) percepire contemporaneamente tutti gli stimoli presenti nell'ambiente dato che l'attenzione permette di selezionarne alcuni. Miller individua nel numero di 7 più o meno 2 gli elementi di informazio ne assimilabili. Quindi, in un elenco molto lungo di collegamenti (menu denso) automaticamente ne saranno scartati o dimenticati alcuni, mentre in una pagina densa di testo saranno scartati e dimenticati diversi dati che successivamente potrebbero, invece, essere utili.

− Studi di Gibson, ripresi da Norman, evidenziano come l'interfaccia, per allegerire il carico di lavoro ed essere interpretata rapidamente, deve puntare a tradurre le diverse informazioni in fenomeni sensoriali adeguati all'uomo, sfruttando la cosiddetta “recognition over recall”, ossia la capacità dell'essere umano di identificare le funzioni sulla base di un innesco, detto affordance39, piuttosto che sull'apprendimento e il ricordo.

− Studi dimostrano che si deve strutturare il testo in modo che guidi l'utente nell'assumere le informazioni con un approccio semplice, chiaro e schematico utilizzando delle parole chiave per sfruttare l'effetto Von Ristoff: le parole evidenziate sono memorizzate in maniera più immediata, fornendo un modello automatico si interazione. In un testo mediante la posizione, la tipologia del carattere, la grandezza, il colore... se legati da una conformità logica, si riduce il carico cognitivo agevolando l'interazione. E' chiaro che una pagina testuale ricca di effetti stile “Las Vegas”40 obbliga l'utente ad un notevole carico cognitivo.

− Studi dimostrano che la lettura su video è più faticosa della lettura su carta e il tempo di lettura è del 25% superiore.

− Studi dimostrano che l’ipertesto disorienta, il web per il navigatore è uno spazio informativo virtuale su cui effettuare ricerche, un ciberspazio 41 che in quanto tale è visto senza fine e senso centro.

39 Il concetto di Affordance è fondamentale nella progettazione dell’interfaccia. 40 Sofia Postai, in “Siti che funzionano”, Hops libri, 2002. 41 L'introduzione del termine 'ciberspazio' (cyberspace) si deve allo scrittore di fantascienza William Gibson, autore del fortunato romanzo Neuromancer (Neuromante) del 1984. Il romanzo di Gibson è collocato in un futuro nel quale i dati conservati all'interno della rete mondiale di computer costituiscono un unico spazio virtuale (la 'matrice') nel quale si muovono sia programmi sia operatori umani. Secondo

Vincoli cognitivi o sforzi dell’utente



− Studi dimostrano che il tempo di attesa42 per la visualizzazione è molto breve: si stima in 10 secondi il tempo di attesa prima che l’utente perda la concentrazione e quindi lasci, molto probabilmente, il sito.

Affordance

Una interfaccia “buona” deve rendere visibile il rapporto tra comando ed effetto (detta visibilità dei comandi) e inoltre deve rendere esplicito il rapporto tra i comandi e il loro effetto (detta mapping dei comandi) poiché l’utente di un prodotto software spesso non ha una rappresentazione del significato dei comandi: quale effetto ha il comando C1? o quale comando ha l’effetto E1?

Nella progettazione dell’interfaccia, secondo Norman, un oggetto acquisisce alcune proprietà intrinsiche che sono l’invito o il suggerimento al loro uso: la maniglia invita ad aprire o il pulsante invita a premere.

Questo fondamentale concetto nella progettazione delle interfacce è noto come affordance che Norman43 così introduce così in un suo libro:

Come può il design44 segnalare le azioni appropriate? (...) Un insieme importante di segnali ci arriva attraverso i vincoli naturali degli oggetti, vincoli fisici che limitano le possib ilità di azione. Un altro insieme di segnali viene da quelle che abbiamo chiamato affordance, gli inviti forniti dagli oggetti, che trasmettono messaggi circa i loro possibili usi, azioni e funzioni. Una piastra liscia invita a spingere, un contenitore vuoto a riempirlo, e così via. Le affordance possono segnalare come si può muovere l'oggetto, che cosa è in grado di sorreggere, se qualcosa può incastrarsi nei suoi incavi, sopra e sotto. Da che parte lo si afferra, quali sono le parti mobili e quali fisse? Gli inviti d'uso suggeriscono la gamma delle possibilità, i vincoli limitano il numero delle alternative. L'uso intelligente di inviti e vincoli d'uso combinati nella progettazione fa sì che l'utente possa determinare prontamente il corso esatto delle azioni, anche in una situazione del tutto nuova.

Prendiamo spunto da Postai per esprime bene il ruolo tra affordance e interfaccia.

Il concetto di affordance ci aiuta a mettere a fuoco un altro aspetto di una buona interfaccia, che deve sempre essere adatta all'utente e adatta al compito.

la definizione fornita da Gibson - che ne esplora in primo luogo le implicazioni sociali e politiche - il ciberspazio è dunque "un'allucinazione consensuale ... una rappresentazione grafica di dati tratti dalle banche dati di ogni computer nel sistema umano...". Per approfondire la tematica vedere gli studi di McFadden (teoirco dell’informazione). 42 Gli utenti si aspettano che un evento si riproduca sempre nello stesso tempo. 43 Don Norman in “Il computer invisibile” – Apogeo - 2000. 44 Progettista.

Visibilità e mapping dei comandi



Deve cioè esprimere in modo univoco e chiaro una funzionalità, utilizzando un linguaggio (visuale o meno) compreso dall'utente.

Nella progettazione di un sito si deve tener conto di alcuni comportamenti dell’utente nella sua attività di interazione con il sito e con internet.

Comportamenti dell’utente

I comportamenti da considerare sono:

− Focalizzazione : il lettore vede inizialmente la pagina come una massa di aree e colori, con gli elementi in primo piano che contrastano con lo sfondo. Successivamente focalizza l’attenzione sulle aree e infine inizia a leggere.

− Scansione : diversi studi45 evidenziano come l’approccio del navigatore

ad un testo in una pagina web è completamente diverso dall’approccio ad un libro.

L’utente non legge parola per parola 46 il testo della pagina web, ma usa un approccio a “scansione”, cioè ricerca velocemente nella pagina la presenza di collegamenti47 e di quegli elementi che gli permettono di capire in tempi rapidissimi se nella pagina è presente il contenuto che soddisfa e giustifica l’azione di ricerca in quella pagina.

Una volta trovato lo spunto passa alla lettura della pagina o della sezione di pagina che gli interessa, mediante un processo di esclusione che porta a sfocare tutto ciò che è esterno alla zona di interesse. Se questa lettura, superficiale, fallisce l’utente scarta l’intera pagina premendo solitamente il pulsante “Indietro” del browser, poiché ritiene che non vi sia quello che cercava.

45 Come per primo ha evidenziato Nielsen nel famosissimo articolo “User don’t read!”, in www.useit.com 46 Modalità tipica della lettura di un documento su carta. 47 Cerca, come evidenzia Krug tutto ciò che è cliccabile.

Focalizzazione Fig. 4



Risulta pertanto fondamentale focalizzare l’attenzione sulla modalità di fruizione 48 da parte dell’utente del contenuto, partendo dalla differenza tra un testo su carta e un testo su una pagina web, poiché questa diversità incide sulla progettazione 49 della visualizzazione e anche dei contenuti.

− Satisficing : l'utente non valuta tutte le scelte possibili per scegliere successivamente la migliore, ma sceglie la prima opzione ragionevole50 adottando una strategia nota come satisficing, cioè non appena viene trovato il collegamento che potrebbe portare all’informazione cercata è altamente probabile che sia attivato dato che l’utente ha fretta e sbagliare non comporta costi, si effettua il Back…

− Plausibilità: di fronte a qualsiasi tecnologia, pochi leggono tutte le istruzioni51. Si procede cercando di cavarsela, costruendosi una versione personale vagamente plausibile di ciò che stanno facendo e del perché funzioni...

Questi comportamenti hanno come implicazione la necessità di una particolare attenzione nella progettazione, e in particolare in quella dell’interfaccia della pagina.

Sviluppatore e web Lo sviluppatore o progettista è l’attore che si occupa di far combaciare, nel web e mediante esso, gli obiettivi dell’azienda con gli obiettivi dell’utente. Si tratta di una figura centrale dotata di diverse professionalità che spesso sono concentrate in un’unica persona.

Il problema fondamentale è data dalla tendenza degli sviluppatori a farsi abbagliare dal miraggio della tecnologia, cioè a privilegiare la capacità nell’utilizzo delle nuove tecnologie rispetto ad una corretta progettazione centrata sugli utenti.

48 Questa diversa modalità di fruizione di una pagina web incide sulla progettazione dell’interfaccia della pagina e su quella dei contenuti. Si deve prevedere una organizzazione del testo che favorisca la scansione utilizzando, per esempio, i titoli di paragrafo ed elenchi puntati o numerati al posto di un testo. E allo stesso tempo un testo per la stampa va riportato nel web con delle modifiche tali da ridurne lo spazio con un linguaggio semplice, immediato e sintetico. 49 Nel caso di articoli o descrizioni di prodotti se il documento è lungo l’utente preferisce dopo una breve lettura stamparlo... e quindi non prevedere una versione stampabile dei documenti lunghi è un errore. 50 La maggioranza degli utenti sceglie di seguire il primo link abbastanza interessante della prima schermata, anziché esaminare tutte le schermate e scegliere il link migliore in assoluto: i link più importanti devono comparire nella prima schermata, poiché non sempre lo scrolling viene effettuato. 51 Si pensi al manuale del telecomando di un videoregistratore o di un cellulare: quanti lo hanno letto tutto e quanti conoscono tutte le funzionalità?



La progettazione Nella progettazione si mira a un progetto di sito che permetta la trasformazione del primo contatto (audience) in una storia duratura (ripetute interazioni52), cioè, in termini di obiettiv i dell’azienda: “dal contatto al cliente”.

Da dove partire?

Per quanto esposto in precedenza gli assi della progettazione sono tre:

1. L’utente: a chi si rivolge il sito, come ricerca le informazioni, quali informazioni cerca.

2. L’azienda : obiettivi dell’azienda, tecnologia di cui dispone, risorse finanziarie e umane.

3. I contenuti: la tipologia e la quantità.

Risulta, quindi, fondamentale stabilire, prima della progettazione, in modo chiaro e completo questi tre assi.

Questa definizioni si ottengono dalla definizione dello scopo del sito, da cui dipende come conseguenza il progetto del sito e anche il successo: senza uno scopo è difficile valutare la funzionalità del sito e pure per il gruppo di progetto scegliere tra i diversi tipi di siti. Inoltre, spesso una mancanza o non chiara definizione di scopo porta all’utente un messaggio nebuloso: l’utente si chiederà che “Che cos’è questo?”, e quindi probabilmente lascerà il sito.

Lo scopo si definisce ponendo delle domande e fornendo delle risposte in modo da creare la tematica del sito, nonché una lista di utenti finali, organizzata in base alle priorità del sito.

Le domande tipiche:

Come può il sito concorrere al raggiungimento degli obiettivi dell’azienda? Per fare cosa è stato creato questo sito? Chi dovrebbe venire a vedere il sito? Quando e perché gli utenti dovrebbero venire? Quali sono i compiti che l’utente potrebbe desiderare eseguire e che ora il sito web non gli permette di fare? Cosa deve lasciare al navigatore la visita del sito?

Lo scopo, quindi, si ottiene attraverso la definizione dei seguenti elementi:

− Lo scopo dell’azienda nella realizzazione di un sito (e più in generale nell’adozione delle tecnologie internet).

− L’area del soggetto: individuazione della tematica che serve per il contesto per ciò che il sito propone. Per esempio “studio della fisica” o “Studio della Fisica attraverso il computer”.

− Il pubblico del sito (detto user target): gran parte della domanda “Per fare cosa è stato creato questo sito?” si risolve attorno allo specifico

52 Utile una statistica che evidenzia con il numero di pagine che un utente visita in una interazione sia mediamente inferiore a 4.

Scopo del sito



pubblico menzionato nella definizione dello scopo. Per esempio “Studenti interessati alla fisica” o “Appassionati di fisica”.

− Il livello di dettaglio delle informazioni: specifica se il sito fornisce informazioni generali oppure specifiche. Per esempio “Panoramica completa sulla fisica per studenti di fisica” o “ Fisica di base per studenti di fisica”.

− Il beneficio o la risposta attesi dell’utente: si definisce che cosa ricaveranno gli utenti dal sito. Per esempio “Essere aggiornati sulla fisica” o “Seguire gli ultimi sviluppi della fisica”.

− Le funzioni del sito: informare, instaurare relazioni tra utente e organizzazione, fornire servizi, vendere prodotti…

Consideriamo tre esempi di definizione di scopo53:

− Lo scopo di questo sito è quello di presentare la produzione di piante da appartamento della famiglia Anthurium Andreanum, Bromeliaceae e Orchidee da vaso a grossisti e garden center italiani e tedeschi. Questo sito aiuta i clienti a scegliere le piante tra la produzione dell’azienda fornendo le immagini fotografiche delle piante e dei particolari oltre ai dati fisici (larghezza vaso, numero piante per scatola…). Inoltre il sito deve informare il cliente sulle nuove piante prodotte.

− Lo scopo di questo sito è quello di fornire un accesso ad un’ampia gamma di informazioni provenienti e riguardanti il Giappone, con l’obiettivo di creare una conoscenza più approfondita su società, politica, industria giapponese e, l’aspetto più importante, sul popolo di questo paese.

− Questo sito web è dedicato a soddisfare le esigenze dei ricercatori, degli studenti delle superiori, degli insegnanti delle superiori e dei professionisti interessati allo studio della Fisica attraverso il computer. Il Centro studi Fisica attraverso il computer “FAC” aiuta le persone a condividere le informazioni, a stabilire contatti, a collaborare e a tenersi informati sugli sviluppi e sugli eventi.

Dalla definizione si ricava il pubblico o i pubblici generici (profili degli utenti iniziali) che deve essere definita per guidare lo sviluppatore nell’attività di creazione del sito. Per esempio la definizione “grossisti interessati alle piante da appartamento: Anthurium Andreanum, Bromeliaceae e Orchidee da vaso ” è diversa da “Chiunque sia interessato alle piante Anthurium Andreanum, Bromeliaceae e Orchidee da vaso ”. Quest’ultimo, infatti, definisce un pubblico molto vasto ed eterogeneo (comprendente anche quello della prima definizione) e allora i due siti saranno pertanto diversi nei contenuti e anche nell’interfaccia.

Può essere utile utilizzare i diagrammi di Venn per l’individuazione del pubblico, in cui gli ovali rappresentano i diversi utenti e gli ovali sovrapposti rappresentano utenti diversi e le relazioni di inclusione/esclusione.

53 Adattamento di alcuni esempi di John December.

Pubblico del sito



ITIS Euganeo –TIC B

App. Tutti i moduli 26

Venn per FAC

Professori di fisica Ricercatori di fisica

StudentiUniversitaridi fisica

Insegnantifisica dellesuperiori

Studenti fisica superiori

Il pubblico definito nello scopo viene successivamente meglio de lineato54 (targhetizzazione dell’utenza) e questa conoscenza è importante perché questo dato, come la definizione dello scopo, aiuta a dare forma la contenuto e all’interfaccia.

Come progettare prodotti usabili?

Si risponde a questa domanda cercando di capire le ragioni, del fallimento nella usabilità di un prodotto.

Il punto di partenza come scrive Bonaiuti55 è:

…iniziare con il prendere consapevolezza che ogni prodotto incorpora il lavoro di un progettista e che, come tale si trova collocato in uno spazio culturale e in un tempo specifici. Nel caso di un programma software, ma la regola vale anche davanti ad altre tecnologie, nell'interazione tra uomo e macchina si trovano quindi a confronto tre "soggetti": l'utente (colui che utilizza il sistema), il computer (che con il suo programma provvede all'esecuzione di istruzioni) e chi ha progettato il programma. L'incomprensione da parte dell'utente finale del funzionamento di un programma per computer, e quindi la difficoltà d'uso di un prodotto, può nascere proprio dal disallineamento tra le aspettative dell'utente e le funzioni definite dal progettista.

54 L’identificazione può essere collettiva (come nel caso dei portali) o individuale, come nel caso dei siti delle aziende. Le tecniche di raccolta delle informazioni sui profili, che sono i dati critici per lo sviluppo, sono diversi e si lascia alle risorse presenti in internet oppure alla letteratura in materia i necessari approfondimenti. 55 Giovanni Bonaiuti in formare.erickson.it - 2002

Domanda fondamentale per il progettista

Diagramma di Venn per il sito FAC Nicola Ceccon Slide 1



La progettazione quindi è fondamentale per il successo del sito, poichè le difficoltà di interazione nascono quando il progettista non tiene conto del modello dell’utente e/o quando non riesce a trasmettere all’utente, attraverso l’interfaccia del prodotto, il proprio modello. In questi casi, l’utente non riesce ad intuire le modalità di funzionamento del sito e deve sforzarsi di eseguire azioni che non risultano completamente rispondenti con le sue naturali modalità di esecuzione dell’attività e con le sue aspettative.

Progettare per l’usabilità

Nella progettazione orientata all’usabilità56 si devono sviluppare soluzioni usabili mettendo al centro del processo di analisi e sviluppo l'utente57, valutarne le esigenze ed i comportamenti e verificare iterativamente, attraverso adeguate tecniche di valutazione 58 dell’usabilità, la risposta dello stesso alle soluzioni che si stanno sviluppando: è con questa centralità che si riduce la distanza tra il modello del progettista e il modello dell’utente.

Corretta metodologia e successo del sito

L’adozione di una corretta metodologia di progettazione incide sul successo del sito, come scrive in un articolo Tognazzini59:

Horrib le websites, built by amateurs, appear every day. The companies involved maintain a blissful ignorance throughout the development process, often turning away from the most glaring evidence that something is seriously amiss...

56 Nota con Usability Design. 57 Lo sviluppo centrato sull’utente è una progettazione basata sulle caratteristiche dell’utente a cui il sist ema è destinato, mentre la progettazione orientata al progettista (“System centered design”) è basata su aspetti di convenienza per il progettista. 58 Esistono diversi metodi di valutazione di usabilità, ciascuno dei quali presenta caratteristiche specifiche che lo rendono adeguato in relazione a particolari momenti del ciclo di vita del sito (creazione, aggiornamento, redesign) e ai particolari obiettivi di valutazione. Tra le diverse tecniche si accenna alle:

− Tecniche di testing in cui utenti rappresentativi sono osservati mentre svolgono dei compiti rappresentativi e tipici (azioni o task, come acquistare un libro in un libreria virtuale o scaricare un driver per una scheda madre o sapere l’orario di apertura di un ufficio) usando il sistema (o il protot ipo) e gli sviluppatori analizzano i risultati ottenuti per vedere se il sistema supporta efficacemente il lavoro svolto dagli utenti.

− Tecniche di Inspection : esperti di usabilità o sviluppatori esaminano gli aspetti di usabilità del prodotto da valutare. Si tratta di valutazioni analitiche, dette analisi euristiche, basate su linee guida (guidelines) secondo regole di buon senso ricavate dall’esperienza ed adottate dalla comunità degli sviluppatori, che si propongono di prevedere il tipo di problemi che gli utenti potranno incontrare utilizzando un sistema senza coinvolgerli direttamente. Queste tecniche richiedono almeno una specifica o un prototipo su cui effettuare la valutazione. Tra i diversi metodi c’è il “Discount usability engineering” di Nielsen che può essere effettuato non appena sono disponibili le prime bozze di interfaccia, anche di tipo cartaceo.

59 Bruce Tognazzini in www.asktog.com

Tecniche di valutazione

La diversità dei modelli garanzia di fallimento del sito



The penalty for this decision is death. The Web is no longer an amateur playground. Sites such as Amazon and Ebay have set people's expectations for how the web should work. If you try to feed them an incompetent design, they will turn away and you will be out of business...

Ogni qualvolta l’utente è costretto ad una operazione di decodifica60

dell’informazione che riceve l’interazione è difficile e il sito è a rischio.

Metodologia di progettazione

La metodologia di sviluppo nota come “user centered design”61, di tipo partecipativo62, consiste in una procedura iterativa di prototipazione-test-prototipapazione -test in cui si definiscono gli elementi in tutte le fasi del processo di sviluppo.

In questa fase è importante, se non fondamentale, progettare più di un prototipo di partenza in modo da avere diverse alternative corrispondenti a diversi punti 60 Il caso tipico è quello dell’utilizzo delle metafore e icone non standard: questa scelta implica che l’utilizzo di metafore e stili già collaudati e codificati durante la sua storia di navigazione nel web è comunque una scelta centrata sull’utente poiché riconosce la valenza e l’importanza della sua esperienza. 61 Descritta da Norman e Sraper nel libro 'User centered system design: New perspective on human-computer interaction' (Erlbaum Associates - 1986) e oggi 'normato' anche nello standard ISO 13407. 62 Questa metodologia di sviluppo è definita “Partecipatory design”: nel partecipatory gli utenti vengono coinvolti nella progettazione ad ogni stadio e partecipano alle decisioni dei progettisti. Si parla di “progettazione con” e non di “progettazione per” gli utenti. E’ dai secondi anni Novanta che emerge la progettazione partecipata: l’idea di base di questo approccio è che anche il miglior specialista di usabilità non può riuscire a dar conto delle "conoscenze situate" relative alle pratiche, alla cultura del lavoro, all’uso delle tecnologie nei diversi contesti lavorativi. Si passa perciò dal diretto coinvolgimento degli specialisti al diretto coinvolgimento degli utenti. "L’utente partecipa quindi a tutte le fasi definitorie del processo assumendo il ruolo di corresponsabile, insieme al progettista, del prodotto finito. La produzione del software non è più un processo lineare ma un processo iterativo in cui si perviene al risultato finale attraverso aggiustamenti successivi guidati dalla continua verifica delle esigenze e delle necessità dell’utente finale".

“make change after test”

Metodologia di progettazione Fig. 5



di vista, è cioè buona regola cercare di saturare lo spazio di progettazione in modo da scegliere63 la soluzione migliore e non quella che sembra la migliore, se non altro perché l’unica proposta.

In linea con l’usabilità la progettazione dovrebbe comportare necessariamente l’ausilio degli utenti con l’ausilio di esperti di usabilità, ma raramente questo succede sia perché la tematica dell’usabilità non è ancora una pratica stabile e anche perché costosa: se una grande azienda può permettersi il costo, questo diventa proibitivo per una piccola o media azienda (dovrebbe comunque essere un investimento).

Quindi che fare?

Si deve iniziare tutto il percorso progettuale considerando il problema dell’usabilità, cioè il progettista deve avere la consapevolezza di questo problema e successivamente se possibile testare con gli utenti.

Postai64 sull’usabilità:

L'attenzione, al momento, sembra essere puntata soprattutto sui test di usabilità, indubbiamente utili, se non altro per avere la conferma di aver correttamente progettato. Credo però che si possa fare di meglio e di più: cioè che si debba iniziare a pensare all'usabilità da subito: che questo debba diventare un background indispensabile in ogni site designer degno di questo nome… Senza contare che un puro test può solo evidenziare un problema, ma non trovare la soluzione.

Il problema per il progettista è che non esistono degli standard di usabilità, ma invece sono disponibili delle linee guida65 che sono gli standard ISO per quanto riguarda le interfacce uomo-computer (ISO 13407, ISO 9241) e standard “de facto”, cioè standard prodotti e in uso nella comunità di professionisti nello studio della progettazione dei siti (e più in generale nell’iterazione uomo-computer). Si tratta di analisi, concetti e metodologie che si diffondono rapidamente e capillarmente tanto da diventare standard operativi, cioè best practice66.

Il progettista, quindi, indipendentemente dal sito deve iniziare il lavoro aderendo alle best practice, anche ricorrendo ad una precedente analisi critica dei siti simili (in termine di scopo del sito e utenti di riferimento) per recuperare idee di progettazione e per allinearsi alle best practice di usabilità. Copiare?

Non si tratta di copiare, ma di una linea di progettazione (delle interfacce e non solo) che possiamo definire come “Prestito intelligente”: è molto meglio

63 E presentare ai committenti diverse alternative. 64 Dal sito www.sitichefunzionano.it 65 Sono un numero veramente elevato e quindi è anche difficile orientarsi. 66 Buone pratiche.

Saturazione dello spazio di progettazione



scegliere le buone idee di altri piuttosto che ideare ogni volta idee “geniali”. Infatti:

− E’ difficile avere nuovo idee che risultano essere buone e quindi è utile prendere a prestito dalle fonti giuste.

− prendere a prestito idee di interfaccia altrui salva moltissimo tempo di progettazione.

Utenti e testing

Per quanto riguarda gli utenti67 e il testing un approccio pratico è quello di Krug:

Testare anche un solo utente è 100 volte meglio che non testarne nessuno. Testare un solo utente all’inizio del progetto è meglio che testarne 50 verso alla fine. Raccattare un po’ di gente. Quasi tutto vanno bene, se usano il web.

Conviene comunque testare il sito almeno con utente anche se la valutazione non sarà ottimale, ma sicuramente saranno individuati degli errori.

Prototipazione

Nella progettazione si ricorre ai prototipi per i seguenti motivi:

− Per avere un rapido feedback sulla progettazione, ricorrendo a test con gli utenti.

− Per sperimentare progetti alternativi, saturando lo spazio progettuale. − Per eliminare i problemi di usabilità o funzionalità prima della

realizzazione, cioè prima della scrittura del codice. − Per mantenere la progettazione centrata sull’utente finale. − Per ridurre i costi di progettazione.

Le tecniche di prototipazione sono diverse e tra queste consideriamo il Low-fidelty prototyping e l’Hi- fidelty prototyping, relativamente all’interfaccia della pagina. Il risultato della progettazione è un documento chiamato wireframe mediante il quale si devono schematicamente rappresentare:

− Gli elementi presenti sulla pagina. − Lo spazio occupato da ogni elemento. − La gerarchia degli elementi. − L’ordine degli elementi.

Low-fidelt y prototyping.

Si tratta di prototipi approssimati in cui mancano molti dettagli, basati su “Paper sketches” di interfacce utente. Gli sketches, disegni “bozze” su carta dell’interfaccia, hanno il vantaggio di non richiedere particolari abilità tecniche e di permettere l’analisi e il testing dato che:

67 Gli utenti devono essere selezionati sulla base del pubblico previsto del sito e vi sono anche diversi studi sul numero minimo di utenti.

Prototipo cartaceo… righello e matite colorate



− Rendono visibile il design. − Permettono di confrontare rapidamente idee diverse. − Permettono la simulazione di quasi tute le interazioni.

La rapidità della prototipazione presenta, inoltre, il vantaggio di percorrere diverse alternative progettuali. Gli svantaggi, invece, sono la difficoltà della modifica e l’eventuale traduzione manuale in formato elettronico.

Hi- fidelty prototyping.

Si tratta di prototipi che assomigliano al prodotto finale, basati su l’utilizzo di prototyping tools o sull’uso del software di realizzazione. I vantaggi sono la presenza dei dettagli e la fruizione “reale”, mentre lo svantaggio è dato dai tempi e i dai costi elevati.

Prototipazione in pratica

Si inizia con la creazione di una o più pagine dette master68, che descrivono i diversi tipi di pagina, definendo la gabbia grafica con la specifica del contenuto di ogni area. Questa gabbia contiene il posizionamento degli oggetti, che non sono parte dell’organizzazione del sito, sulla pagina (strumenti di navigazione, contenuto, logo, mission…) e non le specifiche di formattazione come il tipo di carattere, il colore e il tipo di strumento di navigazione (testuale o grafico).

E’ utile iniziare con un cartoncino di grandezza tale da contenere: l’area della pagina che nel caso della schermata 69 è di 780 x 410 pixel e nell’ipotesi di max due schermate per pagina è di 28,17 cm per 28,2 cm. Su questo cartoncino si evidenzia l’area della prima schermata che equivale a 28,17 cm x 14,2 cm e lo spazio per eventuali note e specifiche.

68 Costituiscono, quindi, la struttura standard delle pagine del sito. 69 Corrisponde alla risoluzione 800x600 pixel per il browser IE 6 WIN. Per altri browser le misure differiscono, anche di molto, e in linea generale una misura di sicurezza è di 744x410 pixel. Inoltre si deve considerare lo spazio dell’offset, cioè la cornice che circonda il contenuto della pagina che varia a seconda del browser e che comunque è riducibile, sino alla eliminazione, nell’HTML o con i CSS.

Gabbia grafica

Dimensione del supporto cartaceo



Successivamente si passa ai prototipi dettagliati70 in cui si inseriscono gli elementi grafici per il contrasto visuale.

Questi prototipi si sottopongono ad un altro controllo di usabilità.

70 E’ utile in questo caso produrre sul prototipo il template con gli elementi, i font alternativi e la grafica alternativi.

Primo prototipo Fig. 6

Secondo prototipo Fig. 7



Elementi della progettaz ione

Nella progettazione si definiscono:

− L’Architettura Informativa (o Information Architecture), cioè l’organizzazione del sito, il sistema di navigazione, il sistema di ricerca e i nomi dei collegamenti.

− Interfacce delle pagine. − Interfaccia del contenuto. − Servizi web71, cioè la progettazione delle pagine e delle tecnologie

software di interazione (progettazione delle pagine dei form, dei moduli software per la validazione dei form, per l’accesso ai database).

Architettura Informativa

Una definzione?

Fornire una definizione formale è difficile come Rosenfeld e Morville72 evidenziano fornendo queste tre definizioni:

- La combinazione di organizzazione, categorizzazione e schemi di navigazione all’interno di un sistema di informazioni. - Il design strutturale di uno spazio informativo atto a facilitare l’esecuzione dei compiti e l’accesso intuitivo ai contenuti. - L’arte e la scienza della strutturazione e classificazione dei siti web e delle intranet per assistere gli utenti a trovare e gestire le informazioni.

Più utile per capire questa disciplina risulta essere73:

Come gli edifici, anche i siti web possiedono una architettura con la quale interagiamo. Alcuni siti web sono dotati di una struttura logica che ci aiuta a trovare le risposte e portare a termine gli obiettivi. Altri mancano di una qualsiasi intelligibile organizzazione e frustrano i nostri tentativi di navigare al loro interno: non siamo in grado di trovare i prodotti che cerchiamo; non siamo in grado di ritrovare la relazione che avevamo visto la settimana precedente; ci siamo persi in un carrello della spesa online. Questi siti ricordano edifici malamente realizzati: case con tetti che gocciolano, cucine anguste, grattacieli per uffici con finestre che non si aprono, aeroporti simili a labirinti con segnaletica ingannevole.

71 Questo tema non viene trattato in questa pubblicazione. 72 Louis Rosenfeld e Peter Morville in “Architettura dell’informazione” – Hops libri – 2003. 73 Louis Rosenfeld e Peter Morville in “Architettura dell’informazione” – Hops libri – 2003.



Una definizione non formale.

L’architettura informativa AI è il processo di organizzazione, etichetizzazione e visualizzazione dei sistemi di navigazione e ricerca degli ipertesti e una buona AI, organizzando il sistema dei collegamenti ai vari documenti del sito, rende un sito facile da usare.

Quindi, l’architettura informativa è un sistema per dare una organizzazione ai contenuti informativi, poiché affinché l’informazione comunicabile sia trasferibile (cioè fruita, usata e finalizzata) ha bisogno di essere organizzata e presentata. E gli errori progettuali, in questo ambito, portano a diminuire l’informazione trasferita, cioè a nascondere l’informazione.

E’ chiaro che questo ambito progettuale è un elemento critico nello sviluppo di un sito e pertanto nel caso di siti complessi, come un motore di ricerca, dovrebbe essere affidato ad un esperto di AI.

Questi, l'architetto dell'informazione, è artefice dell'organizzazione concettuale dell'informazioni proposte da un sito: crea, cioè, la struttura attraverso la quale l'utente dovrà raggiungere, agevolmente, l'informazione ricercata. Cerca, quindi, con un lavoro invisibile di rendere il complesso semplice.

ITIS E

uganeo –

TIC

B


Complessità• Scopo della AI è

rendere il complesso semplice

• Il lavoro è invisibile, mentre ciò che è visibile è l’interfaccia della pagina web che non è lo scopo della AI

contesto utente

contenuto

Si conclude questa parte introduttiva cercando di stabilire i confini dell’AI definendo cosa non è:

Alcune cose chiaramente non sono architettura dell’informazione74:

- La grafica non è architettura dell’informazione. - Lo sviluppo software non è architettura dell’informazione. - L’ingegneria dell’usabilità non è architettura dell’informazione.

74 Louis Rosenfeld e Peter Morville in “Architettura dell’informazione” – Hops libri – 2003.

Complessità dell’AI Nicola Ceccon Slide 1



I confini, però, sono sfumati, cioè non sono netti e invalicabili: i collegamenti presenti in una barra di navigazione sono il risultato del lavoro di un architetto dell’informazione poiché questi ha determinato la loro presenza e anche i nomi utilizzati.

Ma se un nome scelto non può essere usato per problemi di spazio?

Si esce da quest’area grigia tra AI e progettazione dell’interfaccia con il lavoro interdisciplinare tra le diverse professionalità coinvolte.

La progettazione di un sito coinvolge diverse tematiche e discipline che devono essere patrimonio del progettista o del gruppo di progetto.

ITIS E

uganeo –

TIC

B


Keywords• Architettura Informativa

• Usabilità e Accessibilità

• User Centered Design

• Best Practice

• Prototipazione

Lavoro interdisciplinare?

Non sempre la progettazione di un sito e la sua realizzazione sono il frutto di un lavoro interdisciplinare, ma quello di una unica persona o poche.

Questo comporta, però, la necessità per qualsiasi progettista di avere le conoscenze di base75 che gli permettano la realizzazione di una navigazione che rispecchi le esigenze degli utenti.

Infatti, Postai76:

Strutturare una valida architettura informativa è probabilmente la parte più importante del lavoro di progettazione, e nei fatti determina la reale usabilità del sito e della sua interfaccia. Tutto il resto si può, più o meno facilmente aggiustare in seguito, ma se l’architettura è sbagliata o casuale, il rimedio successivo

75 Si consiglia di accedere alle risorse in internet e la lettura per esempio del libro Information Architecture di Laura Caprio e Beatrice Ghiglione – Tecniche nuove oppure “la bibbia” di Louis Rosenfeld e Peter Morville in “Architettura dell’informazione” – Hops libri – 2003. 76 Sofia Postai nell’articolo “La viabilità del sito” – Internet news – marzo 2004 – pagina 82.

Keywords della progettazione Nicola Ceccon Slide 4



potrà essere solo drastico: iniziare tutto da capo, riuscendo – in teoria – a salvare solo il look & feel. In pratica non si salverà neppure quello…

La progettazione dell’architettura deve partire da tre considerazioni fondamentali, che sono state spesso introdotto e su cui si insiste per la loro importanza:

− Le aspettative che spingono le persone a ricercare informazioni sono diverse.

− I navigatori sono diversi, hanno bisogni informativi diversi. − I navigatori ricercano le informazioni in modo diverso e spesso

integrano le due diverse modalità search e browse.

Componenti dell’AI

Information Architecture

I componentidell’Information Architecture

Sistemi organizzativi: come raggruppiamo le informazioni? Ad es. per oggetto o per cronologia.

Sistemi di labeling: come rappresentiamo le informazioni? Ad es, terminologia scientifica o parole d’uso comune.

Sistemi di ricerca: come cerchiamo le informazioni? Ad. Es. effettuando una ricerca o per mezzo di un indice.

Sistemi di navigazione: come ci muoviamo attraverso le informazioni? Ad es. cliccando in una struttura gerarchica o scegliendo delle scorciatoie.

www.informationarchitecture.it

Si evince dai componenti che l’organizzazione dell’informazione gioca un ruolo molto importante per il successo del sito: suddividere il contenuto in aree, attribuire un nome alle aree, realizzare gli strumenti interni di navigazione e ricerca sono operazioni basilari per permettere all’utente di trovare ciò che cerca.

Particolare attenzione deve essere rivolta ai sistemi organizzativi poiché partendo dai contenuti le possibilità di costruire percorsi di navigazione diversi sono quasi illimitate: dalla struttura sequenziale a quella a rete in cui tutte le pagine sono collegate tra di loro.

Componenti dell’AI Luigi Moar, Beatrice Ghiglione, Laura Caprio Slide 3



Organizzazione del sito

Definire l’organizzazione consiste nello stabilire come le pagine web sono in relazione tra di loro, quindi scegliere la struttura organizzativa più idonea a migliorare l’esperienza dell’utente.

Le tipiche strutture organizzative sono:

− Albero: è una struttura gerarchica ad albero rovesciato, in cui il livello più alto è costituito dalla Home page e le pagine si distribuiscono tra i rami dell’albero in diversi livelli.

− Lineare : l’Home page è la prima pagina di una sequenza di pagine.

− Lineare con alternative : è una struttura lineare che prevede delle alternative che consentono di uscire dal cammino principale e che si possono ricongiungere al ramo principale in un punto diverso di quello di partenza oppure possono continuare fino a raggiungere una “fine”.

− Rete : è una struttura le cui pagine non hanno (oppure lo hanno in misura

limitata) una struttura organizzata. Queste strutture tendono a privilegiare la navigazione libera e consentono al navigatore di vagare

liberamente tra le pagine.

Albero su tre livelli Fig. 8

Rete Fig. 10

Lineare con alternative Fig. 9



Quale struttura?

− La struttura ad albero è la struttura tipica dei siti per le aziende. − Le strutture lineari sono ottime per consentire la consultazione di

documenti che abbiano per propria natura una struttura lineare (brevi storie, istruzioni passo-passo o di addestramento) oppure possono essere adatte quando si vuole esplicitamente impedire che il navigatore possa prendere altre strade. Le struttura lineari sono spesso inserite in alcune aree della struttura gerarchica, quando si devono rendere disponibili pagine molto strutturate ma lineari, come nel caso delle FAQ.

− Le strutture a rete sono eccellenti per informazioni non correlate o quando si desidera incoraggiare la libera navigazione, ma il problema di queste strutture è la possibilità di perdersi. Un esempio di organizzazione a rete è costituito dal un MUD (Multi-User Dungeon – labirinto multiutente). L’ambiente è organizzato in modo che ogni pagina corrisponda a un determinato luogo in modo che da tale luogo ci si possa spostare in varie direzioni, esplorando l’ambiente un pò come ci si sposta da una stanza ad un’altra di un edificio del mondo reale. Ogni stanza prevede una serie di link che la collegano con le stanze adiacenti. Seguendo i link sarà quindi possibile esplorare tutte le stanze dell’ambiente. Questa struttura, salvo appunto casi particolari (giochi, fiction ipertestuale, siti educational) è spesso un fallimento a causa del disorientamento del navigatore.

Come si definisce l’organizzazione

Nella definizione dell’organizzazione si deve considerare che:

− La struttura svolge una funzione di ausilio non dichiarato alla navigazione: fornisce al navigatore un contesto in cui gli diventa possibile orientarsi, crearsi aspettative e anticipazioni di informazioni, incide cioè su ciò che si chiama findability: la capacità degli utenti di reperire le informazioni in maniera semplice e intuitiva.

− L’utente ha un proprio modello mentale dell’organizzazione delle informazioni: per esempio in un sito di una azienda che vende prodotti hardware si aspetta una volta entrato nella pagina “Computer” la possibilità di accedere alla pagina “Portatili” oppure “Personal Computer” e non certo alla pagina “Toner”, che invece si aspetta nella pagina “Stampanti”.

La metodologia di organizzazione consiste nello scegliere uno schema di classificazione in modo da definire delle categorie di contenuto attraverso un raggruppamento delle pagine, cioè si applica ai contenuti, se già esistono, lo schema organizzativo scelto oppure si crea la struttura partendo dallo schema scelto, se i contenuti non esistono.

L’utente possiede un proprio modello mentale della struttura del sito

Metodologia di organizzazione



Il primo approccio è detto top-down, dal generale al particolare, il secondo bottom-up77, dal particolare al generale. In quest’ultimo caso si dovrebbe prevedere un diretto coinvolgimento degli utenti che prevede di arrivare alla struttura a partire dalle pagine.

E’ chiaro che a seconda dello schema che si adotta si ottiene una classificazione oppure un’altra.



Sistemi organizzativi:i modelli di classificazione



Sistemi organizzativi:i modelli di classificazione

Forme! Colori!

77 Una tecnica nota è il Card Sorting e si lascia alle risorse in internet gli approfondimenti.

Modelli di classificazione Luigi Moar, Beatrice Ghiglione, Laura Caprio Slide 6

Classificazione Luigi Moar, Beatrice Ghiglione, Laura Caprio Slide 5



Il criterio di raggruppamento più comune78 è la relazione genitore-figlio che porta inevitabilmente ad una struttura gerarchica in cui le informazioni sono sempre più dettagliate man mano che si scende nella gerarchia, come per esempio il sito di una azienda in cui l'Home page è nel primo livello, la categoria prodotti (e servizi, storia...) nel secondo, le diverse categorie di prodotti nel terzo, i prodotti di ogni categoria nel quarto e infine le informazioni su uno specifico prodotto nel quinto.

Il raggruppamento, quindi, porta a delle macrocategorie di contenuti che si scompongono in sottoinsiemi a complessità decrescente, fino ad ind ividuare l’atomo informativo costituito dalla pagina, per esempio nel caso di un azienda: macrocategoria dei prodotti (diverse tipologie di prodotti), macrocategoria di interazione (email, newsletter, forum, mailing list, supporto online…), macrocategoria di supporto (aiuto, mappe del sito, indici, tour guidati, statistiche), area istituzionale (chi siamo, storia, mission, dove), area clienti, area fornitori…

Quindi, scopo del raggruppamento è mettere le pagine in relazione raggruppandole in base ad un criterio, applicare schemi organizzativi ai contenuti. E in questo risulta utile una chiara e completa descrizione dello scopo.

78 Non è l’unico criterio, un altro criterio è per tipologia di utente: quando gli utenti possono essere suddivisi per interessi o altra caratteristica. Per esempio nel caso di una azienda di software la distinzione tra utenti domestici, piccole aziende, medie aziende, grandi aziende, settore pubblico. Un altro criterio è quello alfabetico oppure quello cronologico. E' importante sottolineare che i criteri non si escludono, cioè possono essere utilizzati contemporaneamente per tutto il sito oppure in alcune aree.

Anzi spesso è la soluzione ottimale per tener conto delle diverse tipologie di utenti e fornire diversi schemi di accesso, cioè diversi percorsi per arrivare alla stessa pagina. Per esempio in un sito sulla pittura del '900 si potrebbe arrivare a Magritte attraverso ordine alfabetico, costituito da un indice, oppure attraverso un percorso che prevede Surrealismo > Magritte oppure attraverso un percorso Pittori belgi > Surrealismo > Magritte.

Struttura categorie-sottocategorie

Criterio di raggruppamento genitore-figlio



ITIS Euganeo –TIC B


Raggruppamento FAC

Informazioni FACDescrizione sitoCampo di studio

Persone StudentiInsegnantiProfessionistiContattiRicercatori

RisorseFisicaComputerInformazioni

AttivitàSviluppiEventi

Informazioni

Home page FAC

Le caratteristiche del web determinano l’impossibilità di controllare il comportamento di ricerca dell’utente e questo incide fortemente sulla progettazione del sito non essendo possibile un unico punto di entrata.

E’ chiaro che se l’intento degli sviluppatori può essere quello di guidare gli utenti attraverso una serie di pagine secondo un modello che si definisce a “bottiglia”, l’utilizzo reale, invece, potrebbe essere differente.

Nel modello di sito a bottiglia l’utente è guidato attraverso una sequenza di pagine utilizzando suggerimenti di navigazione e una progettazione dei collegamenti delle singole pagine per supportare un percorso guidato.

E’ evidente che il modello reale è diverso, ma comunque è sicuramente un modello con pochi gradi di libertà per l’utente dato che l’azienda o l’organizzazione ha delle proprie esigenze informative, cioè ha dei contenuti che ritiene prioritario comunicare.

Raggruppamento per il sito FAC Nicola Ceccon Slide 7

Modello a bottiglia Fig. 11



Si deve infatti considerare il rapporto nel web tra autore e lettore, esposto da Burigana e De Robertis79:

…la Rete, infatti, ha apparentemente riequilibrato tale rapporto, rendendo l’utente in grado di assumere un ruolo attivo nella comunicazione. In realtà, però, questo accade solamente in una minoranza di casi. Esistono, infatti, “scelte multiple” a disposizione dei lettori (basti pensare al concetto stesso di ipertesto), ma si tratta quasi sempre di percorsi predefiniti dall’autore stesso. In ultima analisi, l’unica vera libertà per l’utente è quella di cambiare sito o di chiudere il collegamento e, data la sua cultura e competenza critica, non sarà certo restio a farlo.

Questo è ancor più vero nelle grandi organizzazioni o nelle organizzazioni complesse in cui i diversi settori tendono ad avere una propria particolare visone del sito, cercando di far emerge il proprio settore 80.

Comunque nonostante l’obiettivo di controllare il punto di ingresso o il percorso dell’utente sia di difficile attuazione, è comunque possibile pensare ad un modello di comportamento dell’utente secondo il modello a bottiglia, progettando un modello di sito guidato, avendo preliminarmente effettuato con degli utenti delle valutazioni di usabilità per identificare il percorso tipico.

E’ fondamentale giungere ad una chiara gerarchia ed è sempre fondamentale porsi dalla parte dell’utente, Boscarol81:

…orientate la navigazione in maniera che sia un ausilio per le scelte d'azione dell'utente, piuttosto che perché sia onnicomprensiva dell'azienda o dell'ente. Un sito non è una brochure: non è fatto per essere guardato, ma utilizzato con scopi precisi. Solo se non vi è niente che sia possibile fare sul sito, un approccio 'da guardare' può essere quello più adeguato. I gruppi di voci istituzionali (relativi all'azienda o al 'chi siamo') dovrebbero essere ben distinti da quelli relativi alle offerte o alla struttura informativa. Il che non impedisce una certa ridondanza: è possibile che vi sia un indice complessivo dei prodotti in un gruppo di navigazione, e un elenco delle diverse categorie di prodotti a costituire un altro gruppo. Fornire più vie d'accesso ai contenuti è normalmente un aiuto per l'utente, a patto che i criteri delle diverse categorizzazioni siano ben distinti e non si possano confondere. Detto in maniera più semplice: non dovrebbero esserci due voci possibili per la stessa azione, ma solo due voci per arrivare allo stesso punto attraverso azioni ed intenzioni differenti. Consultare un indice è ben diverso dal cercare all'interno di una precisa

79 Silvia Burigana e Simoma De Robertis in “ Web design” – Internet news libri - 2002 80 Anche nel sito si riflettono le logiche interne dell’organizzazione e i diversi rapporti di forza. 81 Articolo in www.usabile.it



categoria dei prodotti, ma in entrambi i modi posso giungere al prodotto.

Ad ogni categoria corrisponde un’area82 del sito e il risultato finale di questa suddivisione logica del contenuto del sito sono pagine web collegate tra di loro da diversi percorsi.

I diversi percorsi sono:

− Percorsi principali tra le aree. − Percorsi locali nelle aree. − Percorsi trasversali, o scorciatoie tra un'area e un'altra: si tratta di

collegare informazioni che sono correlate ma appartenenti ad aree diverse, cioè percorsi diversi, oppure informazioni che non appartengono a nessuna area ma che possono essere utili in più punti. Questi collegamenti secondari si trovano tipicamente all'interno del contenuto (o alla fine) e il loro uso deve essere limitato per non disorientare l'utente.

Emerge chiaramente che una struttura del sito rigidamente ad albero risulta essere la più idonea per rappresentare le relazioni genitori- figli e qualsiasi raggruppamento basato su una tassonomia (utenti per esempio), permettendo la navigazione per menu e sottomenu e l’inserimento in ogni pagina di elementi che dicono all’utente dove si trova.

L’albero: la struttura tipica

Adottare questo tipo di organizzazione ha un duplice vantaggio:

− E’ la stessa del sistema di organizzazione dei files delle memorie di massa.

− E’ facile da fruire, poiché permette una ricerca incrementale partizionando i contenuti. Una pagina contenente un centinaio di link non strutturati, ad esempio, costringe l'utente ad una ricerca di tipo seriale piuttosto scomoda, e invece attraverso una struttura ad albero la ricerca viene spezzata in due (o più) passaggi. Nel primo passaggio l'utente identifica la categoria di interesse, passando nella pagina di riferimento. Nel secondo il compito consiste nel trovare la risorsa cercata in un elenco limitato e molto più facile da leggere.

I problemi più significativi di questa soluzione sono:

− Che spesso l'utente può non conoscere o non condividere i criteri che portano alla classificazione e quindi può non immaginare in quale ramo sia riposta la risorsa che a lui interessa. Si deve evitare che sia l’utente a doversi adeguare allo schema organizzativo e al linguaggio dell’azienda. Questo è ancor più vero nei siti delle aziende (e delle organizzazioni in genere e pubbliche in particolare) che tendono a portare nel sito la

82 Da questo punto in poi categoria, area, sezione e gruppo sono sinonimi.

Percorsi tra le pagine



propria organizzazione interna (uffici e dipartimenti), organizzazione sconosciuta e difficile per gli utenti.

Questo problema si risolve progettando il sito sulle necessità e gli interessi degli utenti del sito e non su come l’azienda (organizzazione in generale) è organizzata.

− La struttura ad albero implica, almeno concettualmente, l'idea di partizione: una pagina contenuta in un ramo dell'albero non può essere presente in un altro ramo. Si tratta di un problema interessante che si manifesta perché si sono compiuti degli errori nel raggruppamento o perché dei contenuti appartengono logicamente a più di un gruppo, cioè un contenuto in una pagina (pagina A2) appartenente ad un gruppo (gruppo A) può essere, anche molto, interessante per gli utenti che stanno leggendo una pagina (pagina C3) in un’altra sezione (gruppo C). Il problema si risolve inserendo dei collegamenti nel contenuto, come collegamenti nel testo o su di un’area separata al suo interno. Quindi, nell’esempio si inserisce il collegamento nella pagina C3 che porta alla pagina A2. E’ evidente che in questo caso non si ottiene un albero perfetto, ma uno spurio, cioè un albero con collegamenti trasversali tra le aree e in questo caso risulta fondamentale utilizzare degli strumenti che indicano in modo chiaro la posizione dell’utente rispetto al gruppo in cui in ogni momento si trova.

Albero perfetto e imperfetto Fig. 13

Organizzazione del sito e organizzazione che si aspetta l’utente Fig. 12



L’organizzazione ad albero si presta alla organizzazione dei contenuti secondo un gradiente83 di importanza delle pagine: questo prevede una organizzazione basata sul modello dal generale al particolare, cosa non sempre possibile e nemmeno facile da realizzare.

Questo significa che le pagine dei primi livelli saranno complesse e dense di informazioni con molti collegamenti, mentre le pagine dei livelli più profondi84 saranno caratterizzate da semplicità e pochi o nessun collegamento ad altre pagine in relazione con il contenuto.

L’Home page fornisce le informazioni di natura più generale e definisce i collegamenti principali con le pagine che si trovano al livello inferiore ed eventualmente in livelli più profondi della gerarchia.

In una struttura ad albero oltre all’Home page e alle pagine di contenuto sono presenti delle pagine, detto Hub page, di menu di collegamenti che raggruppano i collegamenti di ogni area/sezione di pagine.

In altri termini si caratterizza il gruppo con una propria pagina di menu che raggruppa i collegamenti di ogni gruppo, che diviene una specie di home page locale per il gruppo.

Il raggruppamento in particolare per siti con centinaia di pagine può portare ad un albero sviluppato in verticale, cioè stretto e lungo, in cui i menu sono diluiti su più pagine e su più livelli.

All’opposto si può avere un albero sviluppato in orizzontale, cioè ampio e corto, in cui i menu sono concentrati su poche pagine, ma con molte voci. 83 TopTo Bottom. 84 E’ importante sottolineare che le pagine dal terzo livello in poi, dette profonde, anche se contengono informazioni non fondamentali, devono comunque essere progettate con cura: si nota infatti tra gli sviluppatori una tendenza ad una scarsa attenzione progettuale per queste pagine.

Ruolo dell’Home page nell’albero

Hub page

Gradiente nell’albero Fig. 14

Gradiente dell’albero



Si tratta di due organizzazioni non ottimali85 poiché l’albero profondo costringe l’utente a navigare tra diverse pagine di menu prima di arrivare al contenuto, mentre l’albero esteso con la presenza di menu con molte voci aumenta il carico cognitivo dell’utente.

Il primo caso comporta un numero di passaggi (click) eccessivi e il secondo un indubbio eccesso di collegamenti (scelte) per l’utente.

Il progettista deve intervenire sull’organizzazione per giungere ad un albero non troppo profondo 86 e con una limitata estensione per ogni ramo.

Nel caso di un albero profondo si riduce la profondità eliminando, o permettendo di saltare, i livelli intermedi aumentando il numero dei menu nelle pagine Hub del livello superiore: si passa ad una organizzazione gerarchica bilanciata in cui le pagine Hub sono molto dense di menu con poche voci e sono presenti nei livelli iniziali, possibilmente solo nel primo livello, in modo da fornire un accesso il più possibile diretto.

Nel caso di un albero esteso si riduce l’estensione creando dei nuovi gruppi, quindi si introducono dei nuovi livelli, possibilmente uno solo, tra l’Home page e la pagine dei contenuti.

E’ chiaro che in entrambi i casi si deve intervenire in modo bilanciato per non introdurre carico cognitivo per diminuire i click e viceversa.

Dal manuale di stile della Yale University (del 1997, ma ancora attuale):

The goal here is to provide the user with the information they want in the fewest possible steps, and in the shortest time. This means you must design an efficient hierarchy of information, to minimize the number of steps through menu pages. Interface studies have

85 Si ricordano le esigenze dell’utente. 86 L’eccesso di passaggi (steps) tra pagine di menu per arrivare all’informazione comportano seriamente la possibilità di abbandono del sito, come diversi studi dimostrano.

Albero con bilanciamento dei menu Fig. 15



shown that users prefer menus that present a minimum of five to seven links, and that users prefer a few very dense screens of choices over many layers of simplified menus.

Sistemi di navigazione

Progettare il sistema di navigazione significa progettare l’esperienza complessiva di consultazione del sito da parte dell’utente poiché gli strumenti di navigazione non sono semplicemente l’accesso alle informazioni, ma anche informazioni sui percorsi e obiettivi che l’utente ha a disposizione:

Infatti, Burigana-De Robertis87:

Lo scopo principale degli strumenti di navigazione di un sito web è quello di fornire all’utente indicazioni su dove possa andare e come passo farlo.

La progettazione dei sistemi di navigazione è la progettazione dell’interfaccia che permette il movimento all’interno della struttura del sito attraverso il browsing. Si tratta di un elemento critico: il lavoro di progettazione dei contenuti e organizzazione delle pagine può essere vanificato da una interfaccia che disorienta o nasconde i contenuti.

Nella progettazione del sistema di navigazione complessivo si devono raggiungere i seguenti obiettivi:

− Fornire al visitatore un'idea di cosa presenta il sito. − Realizzare un contesto 88 nel quale il navigatore familiarizza con gli

strumenti di navigazione e i contenuti. − Facilitare la ricerca di informazioni, fornendo un'idea di come è

costruito e strutturato il sito, in modo che possa orientarcisi. "Dove trovo cosa?" e “Come torno dov’ero?” sono le domande cui dovrebbero contribuire a rispondere.

− Capire dove siamo, dove possiamo andare. − Permettere al’utente rapidamente e senza ambiguità di capire dove è

stato, dove si trova e dove può andare.

La regola di progettazione da seguire consiste nell’integrare i diversi sistemi di navigazione, che convivono nella maggior parte delle pagine, evitando che un sistema monopolizzi lo spazio nella pagina nascondendo gli altri.

E’ importante sottolineare che la navigazione non coincide con la struttura del sito, ma copre tutte le possibilità di un ipertesto: il movimento in verticale nello stesso ramo, il movimento orizzontale tra più rami e il ritorno all’Home page.

87 Silvia Burigana e Simona De Robertis in Web design – Tecniche Nuove – 2001 – 122 pagine. 88 Ambiente legato ai contenuti.



Schematicamente i sistemi di navigazine sono:

− Sistemi globali. − Sistemi locali. − Sistemi contestuali. − Sistemi supplementari. − Sistemi di ausilio. − Sistemi centrati sugli utenti.

Sistemi globali, o global navigation

Sono sistemi basati sulla gerarchia dei contenuti. Sono costituiti da strumenti, o elementi, che permettono di passare da un punto all’altro indipendentemente dal punto in cui l’utente si trova all’interno della gerarchia del sito accedendo alle aree individuate nel raggruppamento e a pagine o servizi di particolare importanza (secondo il progettista e il committente).

Gli strumenti presentano la caratteristica di essere fissi89, cioè sempre con gli stessi collegamenti, e presenti in tutte le pagine. Gli strumenti tipici sono la barra di navigazione, il menu a tendina, la directory anche se attualmente emerge come strumento dominante la barra di navigazione in posizione orizzontale di tipo testuale e/o iconico, costituita da link inseriti in una o più caselle di forma geometrica o pittorica.

Seguendo l’impostazione della struttura del sito ad albero organizzato in Hub page gli strumenti di navigazione globale forniscono l’accesso alle Hub page del primo livello.

89 E per questo si parla di navigazione fissa.

Navigazione globale Fig. 16



Come si è detto la navigazione globale è presente in tutte le pagine, ma serve veramente?

Il punto è: quali sono le probabilità che il visitatore abbia veramente bisogno di passare da una sezione all'altra del sito senza fare ritorno all'Home page?

Apparentemente l’utente non dovrebbe avere la necessità di passare da un punto all’altro delle aree del sito: gli basterebbe semplicemente fare click sul pulsante “Back” del browser per tornare all’Home page, e in effetti il passaggio tra le aree non è una attività comunque frequente per gli utenti.

Quasi tutti gli autori però concordano che la navigazione globale, oltre a consentire di cambiare rapidamente l’area principale, fornisce una chiara cornice di riferimento alla pagina contribuendo così a darle identità.

Cioè, come sostiene Nielsen: senza nessuna cornice intorno, le pagine diventerebbero orfane, non sarebbero contestualizzate: anche se non ne faranno uso, gli utenti devono sempre poter sapere dove potrebbero andare: pensiamo al caso in cui un utente entri nel sito da una pagina interna, non c'è niente di peggio che capitare in una pagina priva di riferimenti, ed è purtroppo una prassi assai comune in molti siti che presentano molti testi, articoli che vengono aggiornati periodicamente, ma con conduzione amatoriale.



Sistemi locali, o local navigation

Sono sistemi basati sulla gerarchia dei contenuti.

Sono costituiti da strumenti di navigazione che permettono la navigazione all’interno di un’area di pagine 90, individuate nel raggruppamento, permettendo di esplorare le aree di contenuto immediatamente collegate a quelle selezionate.

Gli strumenti presentano le caratteristiche di prevedere una navigazione che varia al variare delle aree, di essere presente in tutte le pagine interne di un’area e di essere fissi sempre all’interno dell’area.

Gli strumenti di navigazione sono gli stessi del globale ed emerge come dominante il menu di collegamenti in verticale su una a colonna a destra o a sinistra del contenuto.

Seguendo l’impostazione della struttura del sito ad albero organizzato in Hub page gli strumenti di navigazione locale forniscono l’accesso alle pagine di ogni Hub page.

Lo strumento di navigazione locale si affianca a quello globale e questa convivenza nella pagina deve essere tale da non comportare una interfaccia completamente diversa, anche se si deve evidenziare la diversa funzione di navigazione.

90 Si pensi alle aree “Prodotti” e “Servizi”.

Navigazione locale Fig. 17



Sistemi contestuali

Sono sistemi basati sulla gerarchia dei contenuti.

Sono i collegamenti che portano ad argomenti 91correlati o associati all'interno del sito o all’esterno del sito che presentano la caratteristica di essere posizionati nell’area del contenuto.

In particolare si definiscono:

− Collegamenti topici: conducono a ulteriori informazioni riguardo all'argomento trattato.

− Collegamenti associativi: conducono a pagine dal contenuto simile o correlato a quella attuale, che l'utente potrebbe perciò trovare interessante. Per esempio, i famosi "titoli correlati" nel caso ci si trovi in un sito che vende libri.

Il problema dei collegamenti nel contenuto è il loro posizionamento.

Con posizionamento ci si riferisce alla posizione dei collegamenti nella pagina e all’interno del testo, dato che non tutti sono d'accordo nell'inserire dei collegamenti dentro il testo, poiché si corre il rischio di spezzare troppo la lettura.

I collegamenti associativi sono raggruppati e collocati nella pagina al di fuori del contenuto testuale costituendo l’area “Also” o “Related” o “Altri collegamenti”, tipicamente alla fine del contenuto o a destra dello stesso.

I collegamenti topici rimangono nel testo oppure sono anch’essi raggruppati in un’area apposita.

Per quanto riguarda il posizionamento, in linea generale, la scelta è tra: − Inserire i collegamenti alle altre pagine nel contenuto (link testuali). − Raggruppare i collegamenti in un sistema di navigazione contestuale (a

destra o a sinistra della pagina) senza inserire o limitando i collegamenti nel contenuto.

− Raggruppare i collegamenti in un sistema di navigazione contestuale alla fine del contenuto, senza inserire collegamenti o limitando i collegamenti nel contenuto.

E’ importante sottolineare, la necessità di scegliere tra una di queste possibilità e mantenere la scelta per tutte le pagine.

Un caso particolare sono i collegamenti all'esterno verso altri siti che costituiscono un ulteriore problema92 per:

− L’aumento della probabilità di abbandono del sito, cosa che incide sul numero basso di collegamenti esterni presenti nei siti aziendali.

− L’attendibilità dei contenuti: il contenuto può cambiare in modo inaspettato portando l’utente ad informazioni non più correlate e

91 Quindi non si deve sottovalutarne l’importanza e a progettazione. 92 Ma anche una peculiarità del web.

Posizionamento dei collegamenti

Problemi dei collegamenti esterni al sito



pertinenti. E’ chiaro che la presenza di collegamenti esterni necessita di un continuo monitoraggio degli stessi.

− Lo stato delle connessioni dei collegamenti: un collegamento verso l’esterno può essere vecchio (stale link) cioè la risorsa può essere non più accessibile in modo permanente oppure può essere interrotto (broken link) come quando un server è temporaneamente indisponibile (fuori linea).

Nella progettazione si deve decidere quale strategia adottare per l’inserimento e mantenimento dei collegamenti.

Le possibili strategie sono:

− Centralizzato : una pagina o un insieme di pagine contengono tutti i collegamenti. Il vantaggio di questa strategia è quella che gli utenti possono avere dei suggerimenti per proseguire quando lasciano il sito, grazie ad una breve descrizione della risorsa. Questa soluzione permette ad un sito di fornire il servizio 93 di centro di risorse allo scopo di diventare un punto di partenza per la navigazione nel web. In questo caso è fondamentale il continuo monitoraggio dei collegamenti e il loro aggiornamento nonché una strutturazione che guidi rapidamente l’utente alla risorsa che lo interessa.

− Uscita libera: non ci sono restrizioni all’inserimento dei collegamenti.

Questo fornisce al navigatore ulteriori opportunità di navigazione, ma anche il rischio di uscita anticipata dal sito. Questa strategia implica una attenta cura progettuale di questa particolare tipologia di navigazione che consiste nell'evidenziare che si esce94 dal sito.

− Nessun collegamento verso l’esterno : è la possibilità che elimina il problema alla radice dato che stabilisce di non effettuare nessun collegamento tra il sito e le risorse che non sono sotto il diretto controllo degli sviluppatori. Questa scelta, però, toglie all’utente il beneficio del vantaggio e del valore dei collegamenti impedendogli di soddisfare95 i propri bisogni informativi esternamente al sito.

93 E’ questo servizio una opportunità per il mantenimento di un rapporto con i visitatori 94 Una soluzione consiste nell'inserirli in un'area separata o nello specificare l'uscita l'attributo TITLE del tag <A> o nell’utilizzare una apposita icona. 95 E a ben vedere si tratta di un errore di usabilità anche se spesso si trova come regola, in qu alche elenco di regole, di corretta progettazione.

Centralizzazione dei collegamenti esterni Fig. 18



− Livello di buffer: i collegamenti esterni sono disponibili da un certo livello in poi, cioè posti oltre l’attenzione iniziale dell’utente in modalità uscita libera.

Sistemi supplementari

Sono sistemi esterni alla gerarchia dei contenuti, cioè non compresi nella struttura delle pagine e indipendenti dal contenuto o dalla funzionalità proposte sul sito, che forniscono una alternativa di accesso al browsing e al searching mediante un accesso ad altre viste del sito.

Esempi di queste viste sono la Guida, la Mappa del sito, l’Indice del sito, il Glossario 96 e il Tour97.

La mappa ha un ruolo determinante per il successo del sito, perché contribuisce, di molto, alla navigabilità, dato che fornisce la visione chiara e intuitiva dell’organizzazione sito (pur non costituendo la via di accesso primaria alle risorse può essere utilizzata a tale scopo).

L’indice permette di elencare documenti e pagine in modo strutturato e normalmente porta a pagine profonde.

Si tratta di uno strumento importante perché permette al navigatore di cogliere il contenuto del sito attraverso questo familiare strumento tipico dei documenti su stampa.

A differenza dell’indice di un libro non sono riportate tutte le occorrenze delle parole, ma solo le più importanti poiché l’utente ha a disposizione il motore di ricerca interno.

La pagina indice contiene quindi le parole più rilevanti ed è chiaro che la costruzione dell’indice comporta una accurata fase di indicizzazione delle pagine.

La mappa e l’indice forniscono un diverso modo di accesso alle informazioni rispetto al browsing: con la mappa il navigatore prende visione dello schema dell’organizzazione delle informazioni con la possibilità di adattarvi il suo schema, con l’Indice ha una visione alla struttura ordinata alfabeticamente dei contenuti per un accesso diretto, mentre nel browsing il navigatore ha sempre una vista parziale del sito.

96 In questo caso oltre alla spiegazione spesso si prevede dalle singoli voci l'accesso alle pagine. 97 Serve per presentare, tipicamente, i servizi offerti. Anche in questo caso l’eventuale accesso alle pagine dei servizi caratterizza lo strumento come un elemento di navigazione supplementare.

Mappa e Indice



Sistemi di ausilio

Sono degli strumenti di navigazione di appoggio ai precedenti che hanno un ruolo non secondario nell’aiutare il navigatore a capire dove si trova e dove andare.

Si ricorda che nel web un sito è facile perdersi, e durante la navigazione si possono verificare vari fenomeni di disorientamento:

− L’utente non sa più dove si trova. − L’utente non sa più perché si trova lì, cioè non ricorda il suo obiettivo

iniziale. − L’utente non sa più come tornare a una certa pagina.

Infatti, per l’utente lo spazio web è diverso in alcuni aspetti dallo spazio reale: non ha il senso delle proporzioni (10, 100 o 1000 pagine?), nessun senso della direzione (al limite muoversi verso l’alto o verso il basso se il sito è dotato di una gerarchia), nessun senso della posizione, per tornare ad una pagina non si affida alla sensazione fisica di dov’è, ma si deve ricordare la posizione nella gerarchia concettuale, e non a caso il pulsante indietro del browser rappresenta non meno del 30% dei click complessivi dell’utente.

I principali sono:

− Gli strumenti del Browser (pulsanti di movimento, barra di stato, Cronologia e Preferiti).

− Collegamento diretto all’Home page. Con questo strumento il navigatore direttamente accede alla Home page, quindi al punto di partenza. Si tratta di uno strumento di navigazione molto importante che deve essere presente in tutte le pagine poiché a causa della porosità il navigatore può accedere a qualsiasi pagina, quindi anche alle pagine profonde. E’ fondamentale non creare pagine “orfane”, cioè pagine che non presentano possibilità di collegamenti ad altre pagine. Lo strumento può essere testuale e/o iconico, anche se si preferisce testuale con l’etichetta standard “Home”, inoltre è ormai prassi associare anche al logo il collegamento.

Spazio web e spazio reale

Mappa, browsing e indice per giungere alla stessa pagina (contenuto “Lupo”) Fig. 19



− Menu nel Footer. Vi è ormai un'abitudine consolidata nel ripetere in

fondo alla pagina (soprattutto in pagine lunghe, dove è probabile che l'utente avrà necessità di scorrerle) una serie di link testuali che richiamano solitamente la navigazione primaria 98 e in alcuni casi i collegamenti ad altre pagine come per esempio il contatto con gli autori del sito o la “reception” dell’azienda, la pagina sulla Privacy e il Copyright.

− Strumenti “Voi siete qui”. Si tratta di strumenti/elementi che hanno l'obiettivo di mostrare la posizione nel contesto della gerarchia del sito e svolgono un ruolo di ausilio alla navigazione molto importante. Come spiega Krug:

Uno dei modi con cui la navigazione può contrapporsi alla sensazione di smarrimento è il mostrarmi dove mi trovo nell'ordine delle cose, allo stesso modo di un indicatore “Voi siete qui” su una mappa di un centro commerciale. Sul web, questo si realizza evidenziando la sua attuale posizione sulla barra di navigazione, sulle liste o sui menu che appaiono nella pagina.

E' fondamentale l'uso di questi segnali e per ridurre la non percezione è necessario applicare un tratto distintivo senza però creare un disturbo alla pagina.

Strumenti “Voi siete qui”

Gli strumenti sono:

− Indicatore visuale, costituito dall’inserimento di una icona di tipo puntatore accanto al collegamento o dal cambiare il colore del testo o dall’evidenziare il testo con il neretto o dal cambiare il colore dello sfondo.

− Titolo di pagina: che compare nella barra in alto della finestra del browser. Un titolo 99 del documento, che non deve essere troppo lungo perché altrimenti viene visualizzato parzialmente nella barra del

98 Jakob Nielsen in Homepage usability (Apogeo, 2002) sottolinea l'inutilità di questo menu. 99 Quando si aggiunge la pagina alla lista dei preferiti viene riportato il titolo, pertanto deve essere posta particolare attenzione alla sua scelta che deve facilmente ricordare, esprimere, il contenuto della pagina anche per visite successive.

Porosità da un collegamento esterno e ruolo del collegamento all’Home page Fig. 20



browser, indica lo scopo e il pubblico di una pagina e risulta molto utile per orientare l’utente. Per esempio un titolo del tipo “Elenco rappresentanti del Veneto” aiuta immediatamente l’utente a capire che cosa aspettarsi dalla pagina. Lo spunto “Elenco rappresentanti Veneto - Nome azienda” è uno spunto migliore perché fornisce l’informazione relativa all’azienda, mentre “Nome Azienda” è uno spunto inefficace perché non fornisce informazioni sul contenuto100.

− Breadcrumbs trial (letteralmente: tracciato di briciole di pane) o Path101. Esso è un indicatore di posizione che serve per orientare il navigatore e si presenta come una serie di passi successivi che indicano il posizionamento logico della pagina nella struttura complessiva e non la strada che l'utente ha fisicamente seguito per arrivarci. Posto in testa alla pagina, costituisce un' importante indicazione della propria posizione all'interno del sito, permettendo all'utente di svolgere le due principali attività che sono il salire di un livello e il tornare all’Home page. Questa funzionalità di navigazione risulta utile nel caso di un sito caratterizzato per intensità informativa e profondità (molte pagine, molti collegamenti ipertestuali), poiché il navigatore può facilmente perdere l'orientamento. Il percorso solitamente viene rafforzato con l'etichetta “Voi siete qui:” oppure “Sei in:” e le diverse voci sono separate da un simbolo di separazione102 come “:” oppure “>”.

Questi strumenti devono essere utilizzati contemporaneamente poiché uno solo non è sufficiente per indicare all’utente la posizione, e chi no sa dove si trova non capisce nemmeno il percorso appena fatto e nemmeno i possibili da fare.

Sistemi centrati sugli utenti

Sono sistemi di navigazione che si creano per gruppi di utenti in base ai profili o per singolo utente in base ai dati di profilo assunti a seguito di una registrazione ad un servizio o alla registrazione delle navigazioni effettuate nel sito.

Nel primo caso la navigazione è statica e basata sul raggruppamento effettuato per i profili degli utenti, per esempio nel caso di un sito di ecommerce si ha una navigazione per i clienti, cioè gli utenti registrati, una navigazione per i visitatori suddivisi per età... Nell’altro la navigazione è dinamica, cioè varia a seconda dell’utente.

Esiste anche il sistema customizzata in cui l’utente crea la propria navigazione, ma si tratta di un sistema ancora sperimentale e non molto diffuso.

100 Anche se fornisce informazione sull’editore del sito e quindi permette di distinguere e identificare il sito rispetto agli altri siti presenti nel web. 101 Rievoca il sentiero della favola di Hansel e Gretel. 102 Diversi studi dimostrano che il simbolo di separazione preferito è “>”.



Labeling

Il labeling o etichettatura consiste nella definizione e scelta delle parole o frasi usate nei sistemi di navigazione, nelle categorie di prodotti, nei servizi del sito e nei collegamenti103.

Si tratta di un elemento progettuale estremamente importante dato che tutti gli strumenti di navigazione sono basati su etichette testuali e quindi è indispensabile che le informazioni siano identificate con etichette giuste, cioè i nomi scelti per ogni elemento e ogni sezione devono essere il più possibile significativi per l'utente finale e riflettere i contenuti del sito. Invece una “cattiva” etichettatura può provocare disorientamento nel navigatore.

Fondamentale è il labeling dei collegamenti.

Un collegamento è caratterizzato da 3 elementi: l’etichetta del collegamento, l’indirizzo http (o URL) e l’informazione associata quando il puntatore vi passa sopra.

Questi tre elementi devono essere armonizzati, cioè l’etichetta deve anticipare senza ambiguità il contenuto, cioè deve far capire all’utente dove porterà l’utente prima che abbia cliccato, e il nome della pagina web (o il percorso nell'URL) devono fornire informazioni dato che l’indirizzo appare nella barra di stato del browser e nel caso di stampa della pagina nel piè di pagina.

Le etichette, quindi, devono essere:

− Chiare e descrittive: devono anticipare in modo conciso l’informazione che il navigatore trova attivando il collegamento. Per esempio nel caso del collegamento all’Home page l’utilizzo della etichetta “Principale” o “Top of Azienda” non anticipa chiaramente dove porta il collegamento, mentre “Home” oppure “Home Azienda” fornisce una informazione chiara. Le etichette oscure o non descrittive non forniscono l’idea al navigatore di cosa deve aspettarsi (dove sta andando) obbligandolo a interpretare ed azzardare il collegamento.

− Corrette: devono anticipare correttamente l’informazione. Per esempio l’etichetta “Servizi per i venditori” deve portare ad una pagina che illustra i servizi per i venditori e non, per esempio, ad una pagina di presentazione della campagna pubblicitaria dei prodotti

− Consistenti: l’etichetta deve essere unica, cioè una pagina deve avere una unica etichetta e non può essere referenziata in diversi modi. Per esempio le etichette “Partner”, “Programma partner”, “Area partner” sono inconsistenti se portano alla medesima pagina delle aziende partner.

− Appropriate: le etichette devono usare un linguaggio familiare agli utenti del sito. Per esempio nel caso della pagina che informa sulle

103 Ma anche per il singolo prodotto, l’intestazione delle tabelle o la didascalia delle immagini allo scopo di permettere all'utente una chiara e immediata assunzione dell'informazione.



ultime novità dell’azienda “Flash” non è appropriata, mentre lo è “Novità” oppure “Ultimissime novità”.

Un errore diffuso nel labelling che crea disorientamento è la difformità tra il nome usato nel collegamento e il titolo della pagina: si tratta di una rottura di un contratto tacito tra utente e sito, come evidenzia Krug “il nome della pagina corrisponderà alle parole su cui ho cliccato per arrivarci”.

Buone pratiche per i collegamenti

L’etichetta non deve superare la riga e comunque non essere troppo lunga: nel caso di link testuale su due righe l'utente potrebbe pensare che si tratta di due link diversi. E’ consigliabile linkare poche parole ma significative ed evitare il "clicca qui", perché non fornisce indicazioni sulla destinazione.

Esempio scorretto:

− In questo approfondimento potrai affrontare in dettaglio il tema dell’accessibilità per le persone non normodotate.

− Per approfondire il tema dell’accessibilità clicca qui. − Approfondisci il tema dell’accessibilità per le persone non normodotate.

Esempio corretto:

− Approfondisci il tema dell’accessibilità per le persone non normodotate.

Se possibile è utile usare del testo di spiegazione nelle vicinanze del collegamento oppure usare l'attributo TITLE del TAG A per far comparire una breve descrizione (un testo lungo non viene letto) relativa al link, che contenga informazioni essenziali: breve descrizione del contenuto che l’utente troverà e non la ripetizione dell’etichetta.

Nei collegamenti ad altre risorse non web, come i documenti portabili 104 o i file compressi, è indispensabile fornire le informazioni che si attiverà il 104 Formato può essere visualizzato e stampato da qualsiasi piattaforma hw/sw. Il sistema prevede un sw di produzione (spesso a pagamento) e un sw di lettura, detto lettore gratuito. Il lettore esiste per tutte le piattaforme hw e sw. Il formato più diffuso è il PDF realizzato da Adobe. Il sw produttore è Acrobat e il lettore è Acrobat Reader. L’utilizzo di documentazione portabile è molto frequente nel web, in particolare nei siti delle aziende che utilizzano questo formato per distribuire manualistica, schede di presentazione, schede tecniche, White Paper e materiale pubblicitario, anche perché si possono associare tecniche di webmarketing (assunzione di informazioni sugli utenti e pubblicità) come la richiesta dell’iscrizione alla mailing list per accedere al downloading. Le soluzioni che prevedono l’uso di documentazione portabile hanno il vantaggio di:

− Poter recuperare il patrimonio della documentazione dell’azienda (istituzionale e tecnica) senza effettuare pesanti “interventi di usabilità”.

− Soddisfare gli utenti che preferiscono avere una copia stampata del contenuto per la visualizzazione offline e la sua conservazione.

− Semplificare l’aggiornamento del sito, essendo costituito da meno pagine. Gli svantaggi sono:

− L’utilizzo di un Plug-In. − Tempo di scaricamento lungo. − Possibile crash del sistema nel caso questo non sia recente.



collegamento o il download ad un tipo di informazione non web o che è necessario un plug- in.

Esempio scorretto:

− Istruzioni di assemblaggio. − Scarica la domanda di ammissione .

Esempio corretto:

− Istruzioni di assemblaggio (necessario Flash, 421 KB). − Scarica la domanda di ammissione (formato RTF, 47 KB).

Un problema legato ai collegamenti è quello della riconoscibilità: il navigatore come minimo deve essere messo in condizioni di capire immediatamente quali sono i collegamenti, cioè si deve rendere ovvio il cliccabile.

Questo problema è relativo, salvo l’errore di usare il sottolineato per evidenziare il testo, nel caso di utilizzo di collegamenti grafici e nell’uso del non-sottolineato, lasciando al colore il compito di evidenziare il collegamento 105.

Molte ricerche fanno emergere come i collegamenti testuali con la sottolineatura siano i migliori perché:

− L’utente li riconosce come collegamenti. − Esplora prima i testuali e poi gli altri.

Come scrive Postai:

Le parole sottolineate sono link, le parole non sottolineate non lo sono.

I collegamenti con colore diverso obbligano l’utente ad uno sforzo di riconoscibilità e possono ingannare. Il problema si può risolvere nella progettazione dell’interfaccia del contenuto non prevedendo l’utilizzo di altri colori: deve essere chiaro che il colore diverso significa collegamento

Per quanto riguarda il colore la scelta del blu rispetta la “storia” del web106 ma si possono utilizzare anche altri colori che permettano di evidenziare nettamente che si tratta di un collegamento.

− Non leggibilità a causa delle diverse versioni dello stesso prodotto. − Cambio radicale nell’interfaccia con diversi meccanismi di scrolling e

visualizzazione con necessità di zoom. Ma l’uso di questo formato presenta diversi problemi di usabilità che secondo Nielsen, si misura in un peggioramento del 300% rispetto alla pagina HTML, e nel caso di utilizzo, sempre Nielsen, consiglia di progettare una pagina “Abstract” che fornisca le seguenti informazioni:

− breve sintesi del documento, − indice del documento

e di non collegare mai in nessun’altra pagina direttament e al documento PDF, ma sempre all’abstract. 105 Possibilità ammessa dai CSS. 106 Secondo Nielsen devono essere solo blu!



Nella scelta dei colori, comunque,si deve fare attenzione con i collegamenti, Postai107:

Non dimentichiamo che l'ipertestualità della rete usa come segnale base il colore (oltre alla sottolineatura) così che, contro i due colori tipici della stampa su carta (nero su bianco) abbiamo cinque colori da scegliere per un progetto web e, precisamente il fondo della pagina, il testo, il colore del link, dei link visitati, dei link attivi (nell'attimo in cui si clicca).

C'è concordanza tra gli esperti di usabilità che i link devono avere un colore più visibile del testo. Un discorso a parte meritano i link attivi che grazie all'utilizzo

dei CSS possono essere dotati di un effetto rollover 108, in questo caso si opta per un colore più evidenziato di quello del collegamento.

Ricerche varie indicano che la colorazione dei link non sono il principale problema, ma comunque un problema importante. Diventa un grave problema quando si sceglie il colore identico a quello del testo e quando non si associa al colore il sottolineato. Lo stesso nel caso di colori identici tra parole chiavi e collegamenti, sempre Nielsen:

...perchè altrimenti i lettori faranno click sul testo pensando che sia un collegamento.

Anche i collegamenti mediante immagini109 al di fuori di strumenti di navigazione spesso possono ingannare: è comunque preferibile l’utilizzo del testo rispetto alle icone o in quest’ultimo caso dell’accoppiata icona/testo di esplicitazione.

Si deve ricordare e rendere riconoscibile all’utente se il link è già stato visitato poiché evidenziare con diverso colore, tipicamente il rosso, il violetto o un colore simile110 a quello del link, è considerato un forte aiuto alla navigazione.

107 Sofia Postai, in “Siti che funzionano” - Hops libri – 2002. 108 Cambio di stato al passaggio del mouse, come un cambio di colore, cambio di forma... 109 I collegamenti grafici sono spesso e tipicamente utilizzati negli strumenti di navigazione perché permettono a parità di area l’inserimento di un numero maggiore di collegamenti. I collegamenti presenti, di norma, non sono sottolineati poiché si lascia alla organizzazione spaziale dei collegamenti e agli effetti di visual design la riconoscibilità di collegamento. 110 Sfumatura del colore del link.



Sistemi di ricerca

I sistemi di ricerca sono costituiti da strumenti che permettono una ricerca diversa dal browsing come il motore di ricerca interno del sito e strutture di navigazione supplementare di ricerca come l’indice alfabetico o altri tipi di indici.

Motore di ricerca

Si deve porre particolare attenzione all’usabilità del motore, poiché il navigatore deve essere in grado di utilizzare facilmente il sistema di interrogazione sia in termini di inserimento dei dati da ricercare che in termini di visualizzazione dei risultati.

La progettazione dello strumento di ricerca, in realtà, consiste nella progettazione di tre interfacce (pagine) e dell’indicizzazione delle pagine.

Le pagine da progettare sono:

− Interrogazione. − Risultati. − Errori.

Nella progettazione dello strumento di ricerca si deve prestare attenzione:

− Alla lunghezza del campo di inserimento che deve essere tale da chiarire che possono essere inserite frasi lunghe.

− Alle istruzioni di interrogazione, chiare e semplici: è importante che vi siano le spiegazioni essenziali di come funziona il sistema di ricerca e di come formulare la domanda, e un esempio (tips di usabilità) aiuta più di una lunga spiegazione. In particolare si deve spiegare con chiarezza (e sempre con esempi) se e come il motore permette l’utilizzo degli operatori booleani (e, o, and, or, .and., .or. ?).

− Alla posizione del campo di inserimento nella pagina.

Interfaccia della pagina dei risultati

Svolge un ruolo fondamentale perché orienta il navigatore nelle decisioni e azioni da intraprendere. Si deve progettare la quantità e qualità delle informazioni da visualizzare. Oltre all’elenco dei link si devono inserire informazioni statistiche relativamente ai link trovati e il numero di pagine del risultato della ricerca. E’, anche, consigliabile fornire la possibilità di una nuova ricerca anche per sfruttare la possibilità tecnologica di effettuare una ricerca più in dettaglio sull’insieme dei risultati.

Spesso i motori forniscono un numero di link elevati a causa della duplicazione dei link ad una stessa pagina e questo insieme alla elevata numerosità dei link costituisce un fattore di non usabilità.

E’ opportuno progettare la risposta eliminando i link duplicati e configurando l’indicizzazione delle pagine in modo mirato. In altri termini, la presentazione dei risultati deve essere organizzata.



I risultati devono permettere una rapida consultazione e scelta e le informazioni, a questo scopo, da inserire sono:

− Il titolo della pagina con il collegamento alla stessa. − La descrizione del contenuto − Data di pubblicazione − Dimensione − Tipo di pagina (nel caso di documenti non HTML, come PDF, Word…)

Interfaccia della pagina dell’Errore

Nel caso di dati non trovati deve essere fornita una spiegazione e deve essere data sempre l’opportunità di ripetere la ricerca; poiché spesso questo è dovuto ad un errore nella digitazione 111 si può prevedere il suggerimento di alcune parole o frasi simili da ricercare.

L’efficacia e la correttezza, cioè la capacità di trovare quanto cercato dipende:

− Dal software di ricerca utilizzato. − Dalla indicizzazione delle pagine.

L’indicizzazione delle pagine costituisce una vera e propria strutturazione del sito ad un livello nascosto al navigatore, consiste nell’agire a livello del linguaggio HTML con il marcatore di tipo META KEYWORD.

Una buona indicizzazione contribuisce al successo del sito perché permette l’efficacia del sistema di ricerca interno di un sito.

I problemi dell’indicizzazione consistono nella definizione delle parole chiave (Keyword) di ricerca.

Un numero insufficiente di parole chiave o l’utilizzo di parole che sono standard per l’azienda, ma non per l’utente, può portare al fallime nto della ricerca pur essendoci l’informazione: è questo un caso che si presenta quando l’utente ricerca per un sinonimo non contemplato negli indici.

Per ovviare a questo caso è necessario una valutazione di usabilità delle parole da utilizzare che porti alla definizione di un vocabolario controllato (o più).

Il termine vocabolario controllato sta ad indicare che è stato svolto un controllo delle parole usate nel sito ed è stata inserita una descrizione delle pagine, che comprende sinonimi, varianti, acronimi, frasi, parole speciali, errori di digitazione permettendo di minimizzare gli effetti negativi della variabilità culturale e linguistica. Successivamente, l’analisi delle query di ricerca permetterà di verificare se il vocabolario è completo oppure no (per esempio nel caso dei sinonimi non sono effettivi ma ad esempio parole che vengono utilizzate dagli utenti del sito per consultarlo).

111 Invece, nel caso di errore del server è fondamentale fornire una spiegazione che chiarisca che si tratta di un evento del tutto eccezionale.

Vocabolario controllato

Problemi indicizzazione



E’ infatti poco realistico aspettarsi che il navigatore faccia uno sforzo per “indovinare” il termine usato nel sito per indicare cosa stanno cercando, se la ricerca ha fallito al primo tentativo.

Per esempio l’indicizzazione di una pagina che prevede informazioni sulla tecnologia di rete deve prevedere come indici: “rete”, “rete computer”, “LAN”, “rete locale”, “locale”, “condivisione”. Prevedere come indice solo “LAN”, taglia fuori chi non conosce il termine.

Il thesaurus è uno schema di classificazione gerarchico tra le parole, dal generale al particolare e associativo.

I thesauri possono essere utilizzati come strumenti aggiuntivi per la navigazione o la ricerca in un sito, permettendo agli utenti di raffinare continuativamente le ricerche svolte.

Thesaurus

(Preferrred )crackers

(Broader)Prodotti da forno

(Related)formaggio

(Related)party

(Variant)biscotti

(Variant)gallette

(Narrowed)Crackers integrali

Thesaurus

Thesaurus Luigi Moar, Beatrice Ghiglione, Laura Caprio Slide 8



Interfaccia della pagina

La progettazione dell’interfaccia della pagina consiste nel collocare e nel rendere identificabili nella pagina: il contenuto, il sistema complessivo di navigazione e i collegamenti nel testo in modo che la pagina aiuti il recupero veloce delle informazioni e l’assunzione chiara e altrettanto veloce delle altre possibilità di navigazione.

Gli elementi dell’interfaccia della pagina sono:

− L’identità del sito. − Il contenuto che si vuole trasmettere. − La navigazione all’interno del sito. − Lo spazio pubblicitario 112.

E’ principalmente nell'interfaccia che si applicano i principi e i diversi studi di usabilità e la via maestra è partire dalle caratteristiche del web come mezzo (o ambiente) di comunicazione e dai comportamenti dell’utente.

Krug consiglia un semplice test basato su semplici domande, che chiama test del portabagagli, per verificare la qualità dell'interfaccia della pagina:

− Che sito è? − Su che pagina sono? − Quali sono le sezioni principali del sito? − Quali opzioni ho a disposizione in questo livello? − Dove mi trovo nello schema delle cose? − Come posso effettuare una ricerca?

Dato che non esistendo una procedura standard, algoritmica, per progettare l'interfaccia della pagina, allora assumere questo test113 come cartina di tornasole e considerare i principali studi di usabilità è un metodo accettabile di progettazione: se si guarda la pagina definitiva o un prototipo e in tempi rapidi si riesce a trovare tutti gli elementi che rispondono alle domande allora la pagina assolve al suo compito.

Il compito primario della progettazione, per quanto detto in precedenza, consiste quindi nello stabilire una gerarchia visuale114, suddividendo l’intera pagina in blocchi visivamente separati e raggruppati per funzionalità, sistema noto nella progettazione delle interfacce con il termine di clustering.

Obiettivo del clustering è fornire all’utente una organizzazione percettiva, cioè l’interfaccia deve fornire il senso di organizzazione degli elementi della pagina e il navigatore deve percepire immediatamente queste differenze115.

112 Successivamente non si tratterà questo elemento dell’interfaccia, normalmente posizionato nella parte alta e destra della pagina e avente la forma di un rettangolo (il Banner pubblicitario). 113 Non si devono dimenticare le valutazioni di usabilità con gli utenti. 114 Si tratta quindi di un Visual design. 115 L’organizzazione percettiva è il tipico lavoro del grafico.

Elementi dell’interfaccia della pagina

Test del portabagagli

Gerarchia visuale

Organizzazione percettiva



Primo obiettivo è sottoporre la pagina ad una lottizzazione 116 distinguendo le aree della navigazione dalle aree del contenuto.

Il primo passo, però, anche se sembra ovvio, consiste nel capire che la pagina è visualizzata su schermo e non su stampa, quindi:

− La schermata è più larga e più corta di un foglio A4 e più piccola del foglio di un settimanale.

− L’unità grafica su stampa sono due pagine (affiancate) mentre nel web l’unità è la singola pagina, visualizzata parzialmente.

− Nel web la pagina ha una profondità verticale (lunghezza) variabile.

La pagina deve essere progettata non in termini di pagina, come fosse la pagina su carta, ma in termini di schermata, a causa del supporto di visualizzazione e del comportamento tipico del navigatore che è riluttante ad effettuare lo scrolling117.

Questo significa che le pagine che prevedono in testa immagini, titoli come nei giornali e nelle riviste sono un errore progettuale per il web, dato che la pagina non è in competizione con altre pagine come in una edicola.

Lynch118 evidenzia efficacemente l’errore:

When faced with laying out a Web page most people do the obvious thing—they emulate the print documents, newsletters, and magazine layouts they’ve seen all their lives. You see the results on thousands of Web pages: Plunk a big graphic on the top of the page to make it “interesting,” then start listing the links, text content, or minor graphics below the graphic dominating the top of the page. The ironic result is that the important stuff—the menu links, navigation links, and descriptive information—gets pushed off the bottom edge of the screen where it can’t be seen.

116 Nielsen in Homepage Usabulity specifica anche le percentuali, che aumentano per l'Home page, di queste aree: il 20% per la navigazione e l'80% per il contenuto. 117 Sullo scrolling sono state effettuate diverse ricerche a partire da quella di Nielsen che nel 1995 inserisce lo scrolling tra i 10 maggiori e più frequenti errori di usabilità. Nella realtà, come sostiene Sofia Postai, poiché gli utenti sono abituati ad effettuare lo scrolling lavorando al computer, si pensi all'uso di un sw di videoscrittura o alla visione del contenuto di una cartella, effettuano questa operazione. E' certo però che l'aumentare della lunghezza della pagina comporta: un peso sempre più maggiore e quindi tempi di caricamento maggiore; un affaticamento nella lettura; una diminuzione del senso della ipertestualità. Pertanto, l'approccio deve essere quello di evitare molte schermate e trovare soluzioni diverse per i documenti lunghi. 118 Patrick Lynch in patricklynch.net

Si progetta per la schermata e non per la carta

Una pagina web non è una pagina di un giornale

Pagina e schermata Fig. 20



La progettazione basata sulla schermata prevede la progettazione della pagina in base al gradiente verticale di importanza, cioè nella pagina le informazioni si inseriscono sulla base di una prioritarizzazione che vede i sistemi di navigazione e le informazioni di identificazione dell’organizzazione posizionati in alto, le informazioni principali “core information” (costituite dal contenuto testuale e grafico e dai collegamenti a pagine in relazione con il contenuto) nella zona centrale e le informazioni secondarie verso il basso della pagina.

Si riporta il passo dell’articolo “10 Ten fundamentals of Web design“ di Lynch119 relativamente alla progettazione della pagina:

Every page in your site should provide a navigation framework, but the relative position of pages within your site should dictate the overall complexity of the interface and navigation elements provided on each page. The small size of most display screens also requires that most navigation elements be placed near the top of individual Web pages, as that is the only part of the page the reader is certain to see. In a well-designed site the top pages in the site hierarchy (home pages, major menu pages) should be dense with functionality, but content pages deeper within the site should offer a simpler page framework that is less distracting to the reader.

Nella lottizzazione è fondamentale tener conto delle regole della percezione visiva della Getsalt 120: la percezione di un evento è molto differente dalla semplice somma dei fenomeni che lo compongono presi separatamente.

La Gestalt cerca di comprendere le leggi o i principi con cui si strutturano le percezioni.

Due delle quattro regole basilari di organizzazione percettiva, Boscarol121 le sintetizza in questo modo:

Vicinanza: è il primo criterio di raggruppamento figurale: voci vicine sono percepite come un'unità. Attenzione però: le voci non dovrebbero essere così vicine da creare difficoltà nell'atto di cliccare! E' bene rinunciare in parte al concetto di vicinanza, piuttosto che creare menu con voci talmente piccole e fitte che richiedano molta attenzione per essere correttamente selezionate. L'utenza media non è così abile nel manovrare il mouse, e spesso neanche l'utenza esperta...

119 Patrick Lynch in patricklynch.net 120Corrente di pensiero tedesca degli anni venti. 121 Maurizio Boscarol in www.usabile.it

Gradiente verticale della pagina su schermo

Regole della percezione visiva

Gradiente Fig. 21



Somiglianza: voci dall'aspetto simile sono più facilmente percepite come un gruppo. Pertanto le voci dello stesso gruppo dovrebbero avere un aspetto simile. Evitare se possibile voci troppo più lunghe delle altre e disposte magari su due righe: contrastano l'effetto di somiglianza. Guardate il vostro layout: la gerarchia è chiara? Ci sono elementi che competono fra loro per rilevanza visuale? Che creano 'rumore di fondo' ostacolando la leggibilità?…

L’organizzazione della pagina, però, da sola non basta poiché l’attenzione dell’utente deve essere catturata, si deve cioè guidare l’occhio attraverso un contrasto visuale degli elementi che si ottiene usando il colore, la grafica e le colonne.

Il colore

Un ruolo importante giocano i colori. Postai122:

Il colore è un segno molto forte, in grado di cambiare completamente l'aspetto di qualsiasi oggetto. Il colore appare ad una analisi superficiale un non problema o un problema banale. Invece si tratta di un problema serio che va al di là del semplice evitare l'errore123, più diffuso di quanto si pensi, dei prolemi di leggibilità nell'accostamento tra colore di sfondo e colore in primo piano.

I termini del problema sono legati al fatto che nel web il colore è uno degli elementi espressivi fondamentali: è per esempio tramite il colore che si effettua il contrasto e quindi l'organizzazione percettiva, ma il web in quanto ambiente a ricezione variabile non permette al web designer di prevedere124 l'effetto finale del prorio lavoro.

122 Sofia Postai in “Siti che funzionano” - Hops libri - 2002. 123 La percezione del colore è talmente importante da far trascurare la percezione della forma, per esempio le persone daltoniche sviluppano una maggiore capacità di distinguere le forme. 124 I diversi monitor in termini di qualità, le diverse piattaforme hardware/software, le diverse configurazioni, i diversi browser utilizzati rendono impossibile l'utilizzo di uno qualsiasi dei 16 milioni di colori possibili e la soluzione consiste nello scegliere il colore

Contrasto visuale

Contrasto visuale Fig. 22



Quindi, oltre alla leggibilità125 si deve considerare il significato 126, le evocazioni, il tipo di emozione che un colore e gli accostamenti forniscono: armonia, energia, serietà... si tratta di una tematica affrontata nelle diverse teorie dei colori ed esistono software che permettono di fornire delle associazioni armoniche dei colori, ma poi nella decodifica prevalgono fattori culturali.

Postai:

Mi piacerebbe riuscire a dare qui un'ordinata tabellina che associ tinte ad emozioni/ambiti/evocazioni, ma credo che sia praticamente impossibile: possiamo trovare delle ricorrenze, ma non delle regole, possiamo registrare delle tendenze, ma non delle associazioni stabili.

Il colore si utilizza nella organizzazione visuale e percettiva della pagina per definire le aree, contrastare, evidenziare e come segnale. In quanto segnale, il colore, permette di distinguere le aree di un sito, distinguere l'appartenenza di una pagina ad un'area specifica (per esempio cambiando colore ad un pulsante della barra del titolo), segnalare variazioni di stato come nel caso dei link visitati che informano che quella pagina è stata visitata.

Oggi il web è prevalentemente bianco, mentre alle origini era grigio: domina una struttura mista che prevede l'utilizzo di un colore per le zone di navigazione della pagina, spesso deciso, e il bianco per i contenuti al centro dell'interfaccia.

Indubbiamente i colori devono essere attentamente scelti127 per evitare che riducano la leggibilità128 e la maggiore leggibilità si ha con lo sfondo bianco e il primo piano in nero o comunque con l’utilizzo come sfondo di colori tenui

all'interno di un insieme di 216 colori considerati sicuri (browser safe), cioè che si vedono sempre allo stesso modo. I principali programmi di grafica permettono di selezionare i colori dal sottoinsieme di 216 colori. Comunque oggi questo problema è meno frequente di un tempo e quindi si può anche scegliere di utilizzare uno dei milioni di colori disponibile, anche perché il colore è gratis: non occupa larghezza di banda. 125 E' curioso notare come il colore del link sia il blu o meglio l'azzurro, cioè un colore che su sfondo bianco risulta abbastanza difficile da leggere, perché l'occhio umano a meno recettori per questo colore... probabilmente chi ha progettato il web non era un progettista di interfacce. 126 Inoltre la pervasività pone problemi culturali nel caso di localizzazione legati al diverso significato che le diverse culture assegnano ai colori: per esempio il bianco nella cultura occidentale è il colore della sposa, mentre nel mondo orientale è il colore del lutto, mentre l'abito da sposa è rosso, oppure si pensi al significato attribuito al verde nei paesi islamici... 127 In alcuni casi, però, la scelta è quasi obbligata se l’azienda ha dei colori sociali, cioè i colori del proprio logo o che utilizza normalmente nelle proprie pubblicazioni, che sono parte integrante della riconoscibilità dell’azienda o dei prodotti (fino ad esserne un sostituto del nome). Questa considerazione, però, non deve pregiudicare l’usabilità, nel senso che progettare la presenza nel web di una azienda riproducendone l'immagine creata per altri mezzi è secondo alcuni autori, e Nielsen tra questi, uno dei motivi che portano a problemi di usabilità: l''immagine nel web è data dalla capacità dell'azienda di soddisfare la user experience dell'utente e non da altro. 128 E' importante considerare che una parte rilevante della popolazione ad una certa età ha problemi di percezione dei colori.

Colori della pagina dominanti



(pastello o colori della terra), mentre l'utilizzo di immagini di sfondo è problematico poiché uno sfondo grafico129 può interagire con il riconoscimento visivo dei caratteri e delle parole.

La grafica

La grafica gioca un ruolo molto importante nella riuscita dell’interfaccia dato che:

− E’ un potente strumento di ausilio alla prioritarizzazione delle informazioni, permette infatti di suddividere visivamente l’interfaccia in aree contenenti informazioni prioritarie e secondarie. Questo è particolarmente vero per le pagine che presentano una elevata densità di informazioni e collegamenti, come per esempio nei portali, permettendo la riduzione del sovraccarico e informativo. Evidenzia i percorsi che l’utente può fare.

− Crea associazioni visive tra elementi e contenuti per facilitare la navigazione.

− Organizza lo spazio della pagina. − Organizza visivamente gli strumenti di navigazione evitando l’insorgere

di confuzsione

Per esempio semplici linee o box permettono in modo efficace ed elegante di raggiungere l’obiettivo di aiutare l’utente nell’avere una esperienza positiva del web, senza comunque non esagerare per non incorrere nel rischio di aggiungere a confusione altra confusione.

Il problema della grafica

La prima decisione nella progettazione dell’interfaccia della pagina è se usare o no la grafica per la realizzazione degli strumenti di navigazione, mentre per il contenuto130 il problema non si pone poiché è abbastanza illogico veicolare informazioni testuali in formato grafico.

129 Nel caso di utilizzo è fondamentale la scelta di immagini con motivi delicati, quasi impercettibili... curioso è notare come la gran parte dei siti amatoriali abbondino di sfondi grafici. 130 Vi sono informazioni che sono meglio veicolate con la grafica rispetto al testo, come per esempio: una mappa stradale, immagini dei prodotti, un grafico. La grafica è quindi utile se aiuta a prendere delle decisioni. La regola da utilizzare è quella di inserire la grafica se la descrizione testuale non esprime efficacemente lo stesso contenuto informativo dal punto di vista qualitativo o quantitativo. Chiaramente è molto più chiara una mappa rispetto alla descrizione del percorso per andare da un punto ad un altro. Nel caso della grafica per esprimere contenuto si deve considerare il tempo di download e quindi l’immagine deve essere trattata per permettere un tempo e una qualità accettabile. Una soluzione consiste nell’inserire una miniatura (thumb) oppure l’immagine in bassa risoluzione, con la possibilità di visualizzare l’immagine a grandezza naturale (originaria) o alla qualità prevista in una finestra Pop-Up. E’ importante sottolineare l’importanza della consistenza: se l’immagine viene elaborata con effetti (ombreggiatura, cornice…) o marcata con l’identificazione dell’azienda, queste impostazioni devono essere mantenute per tutte le immagini.



Il dilemma tra tempi lunghi, ma attrattità, e tempi veloci, senza particolare attrattività, è spesso risolta utilizzando un banner grafico all’inizio della pagina contenente logo, mission, barra di navigazione primaria e barra contestuale seguito poi dalla navigazione locale e dal contenuto con eventuali inserti grafici per separare le aree e fornire ulteriore attrattività.

Questo dilemma è ancor più importante nel caso della Home page in cui si deve coniugare velocità, densità di informazioni, densità di collegamenti e attrattività.

La grafica, quindi, ha la capacità di potenziare o depotenziare la comunicazione e l’usabilità: il risultato dipende dall’utilizzo e dalle scelte progettuali.

Ma, l’uso della grafica dipende anche dagli utenti di riferimento. Nel caso di un target di giovani un sito senza l’utilizzo della grafica (e di dinamismo anche spinto) non sembra la soluzione più azzeccata: nel caso dei bambini è praticamente obbligatoria131.

Gli obiettivi di un sito sono trasmettere informazioni e/o comunicare con i potenziali clienti e in genere con i navigatori. Se l’obiettivo fondamentale è trasmettere informazioni (scuola, università) la grafica non appare necessaria, mentre può esserlo negli altri casi.

Nell’intrattenimento, per esempio, la grafica è fondamentale.

Tutto, quindi, dipende dal target e dalle capacità progettuali e quindi l’utilizzo di un grafico (inteso come esperto della comunicazione mediante la grafica) è indispensabile.

Colonne

Mediante le colonne si crea organizzazione della pagina e anche contrasto, quindi si aumenta la leggibilità e la funzionalità: le colonne si utilizzano per dividere la pagina in aree per la navigazione, per il contenuto principale e per quello secondario e inoltre accentuando lo spazio tra le colonne si ottiene contrasto visuale.

131 Pensate al sito della Barbie in solo testo.

Target di riferimento

Il dilemma della grafica

Utilizzo delle colonne

Colonne Fig. 23



La competizione

Il contrasto visuale con le diverse tecniche viste permette, per esempio, che gruppi di navigazione diversi non competano tra di loro.

In altri termini deve essere chiaro che un gruppo di collegamenti è lo strumento di navigazione principale (menu principale), un altro il gruppo dei collegamenti meno significativi (informazioni correlate), come scrive Boscarol132:

In ogni caso, non vi devono essere conflitti gerarchici con altre immagini o elementi. Don Norman sostiene che "fra gli oggetti e la loro localizzazione deve esistere una corrispondenza spaziale naturale: in altre parole deve esserci una ragione per collocare gli oggetti nel luogo in cui si trovano". Ogni volta che si dispongono gli oggetti sulla pagina bisognerebbe tener presenti queste affermazioni.

Bilanciamento tra organizzazione e contrasto

Il contrasto è fondamentale, ma deve esserci un bilanciamento tra il senso di organizzazione e il contrasto visuale poiché una pagina senza contrasto è illeggibile nel web come una pagina organizzata male.

Il bilanciamento permette di minimizzare il rumore visivo evitando il sovraffolamento di solecitazioni visive, noto come effetto Las Vegas, e il rumore di fondo, noto come effetto Party, in cui nessun elemento domina, ma tutti producono un brusio visivo.

Secondo Krug133:

In fase di progetto è meglio partire dal presupposto che tutto, sino a prova contraria, è rumore visivo.

Una volta stabilita l’interfaccia delle pagine134 è importante mantenerla stabile, mantenere cioè la consistenza.

Consistenza

Un principio fondamentale da rispettare nella progettazione è quello della consistenza, cioè l’interfaccia delle pagine deve essere uguale in tutte le pagine 135. Con questo si vuol significare che, tranne nei casi di siti di sistema 136, la struttura della pagina e il layout grafico devono rimanere inalterati, poiché questo permette all’utente di sapere sempre in quale spazio informativo si trova. 132 Maurizio Boscarol in www.usabile.it 133 Steve Krug in “Don’t make me think” - Hops libri - 2001. 134 Si parla correttamente di pagine e non di pagina perché in un sito non esiste una unica interfaccia di pagina, ma almeno due: l’Home page e le altre pagine. E’ importante, comunque, mantenere uno stile grafico comune. 135 L'inconsistenza è abbastanza diffusa nel web: spesso, all'interno dello stesso sito, si vedono pagine con font diversi per dimensione, stile e colori e analogamente, i link vengono proposti in svariati formati: standard (sottolineato), in grasset to (ma senza la sottolineatura)... 136 Sito di sistema è costituito da più siti.

Consistenza tra le pagine



Per esempio, gli strumenti di navigazione devono rimanere sempre nella stessa posizione ed avere la stessa veste grafica: si perde di consistenza se la barra di navigazione cambia di posizione al cambiare delle pagine, oppure se si utilizzano in una pagina icone e in altre il testo.

La consistenza è importante anche perché permette all'utente di trasferire agevolmente la conoscenza da una pagina all'altra, e il conseguente aumento della predicibilità delle azioni e dei comportamenti del sistema ne favorisce l'apprendibilità.

In sintesi, la consistenza deve essere garantita a diversi livelli:

− Consistenza del linguaggio e nella grafica: la stessa parola, la stessa icona, lo stesso colore devono identificare lo stesso tipo di informazione o lo stesso tipo di azione entro tutto il prodotto.

− Consistenza degli effetti: gli stessi comandi, le stesse azioni, gli stessi oggetti devono avere lo stesso comportamento e produrre gli stessi effetti in situazioni equivalenti; non associare agli stessi comandi, azioni e oggetti comportamenti diversi.

− Consistenza nella presentazione: gli stessi oggetti o lo stesso tipo di informazioni devono essere collocati tendenzialmente nella stessa posizione, avere la stessa forma e lo stesso ordine.

Si ricorda, inoltre, la consistenza tra i siti: gli utenti navigano tra siti diversi, e imparano come funzionano certi oggetti di interfaccia e pertanto entrando in un sito si aspettano di ritrovare la stessa tipologia di oggetti che si comporta nel modo che hanno imparato.

Schema della pagina

La pagina web, costituita da più schermate, presenta il classico schema di una pagina a stampa suddivisa nelle tre classiche zone in ordine di gradiente:

− Intestazione: spazio per gli elementi di identità del sito, gli strumenti di navigazione principale e supplementare e la ricerca.

− Corpo : spazio per la navigazione locale e il contenuto. − Footer o piè di pagina : spazio per il menu del footer e la firma della

pagina. La firma specifica l’identità dell’autore (nome azienda e

Consistenza (a sinistra) e non consistenza (a destra)

Consistenza a sinistra e incosistenza a destra Fig. 24

Predicibilità



indirizzo), il contatto (email), l’URL della Home page (per mantenere una relazione 137 tra la pagina e la fonte della pubblicazione) e la data138 dell’ultimo aggiornamento. Inoltre spesso si inserisce il feedback (contatto) con il team di sviluppo del sito per segnalazioni e suggerimenti.

Posizionamento degli elementi

Il posizionamento degli elementi di navigazione e testuali è la scelta fondamentale nella progettazione dell'interfaccia.

Facendo una sintesi delle diverse indagini e analisi139, i diversi elementi si posizionano nel modo che segue:

− Logo nell’intestazione. − Navigazione globale nell’intestazione − Navigazione supplementare nell’intestazione in orizzontale o vertica le. − Ritorno alla home page in alto sull'angolo sinistro. − Ricerca interna nell’intestazione al centro.

137 L’indirizzo viene riportato in caso di stampa o salvataggio su file della pagina. 138 Si tratta di un elemento importante perché gli utenti preferiscono stampare le pagine lunghe e la data di revisione permette a loro di sapere se hanno l’ultima versione del documento. 139 Negli studi di Bernard, per esempio la navigazione locale è nel 96% dei casi posizionato a destra (quadrati neri), mentre il collegamento alla home page nell’angolo superiore destro per il 90% dei casi (blu scuro):

Analisi di posizionamento

Schema classico della pagina Fig. 25



− Navigazione locale sotto il logo a sinistra. − Navigazione contestuale a destra del contenuto o alla fine. − Carrello della spesa in alto nell’intestazione. − Menu del Footer nel footer.

Interfaccia unica per tutto il sito?

La risposta è generalmente no poiché possiamo almeno individuare sei tipologie di pagine diverse per funzionalità:

− Home page − Hub page − Pagine dei contenuti − Pagina di ricerca − Pagine di interazione (registrazione ad un servizio, iscrizioni ad un

servizio, invio dati) − Pagine del processo di acquisto in un sito di ecommerce.

In particolare la progettazione dell’interfaccia dell’Home page risulta diversa dalla progettazione delle altre pagine.

L’Home page è la pagina più importante del sito dato che quasi sicuramente è la pagina di entrata al sito 140. Quasi, dato che a causa della porosità non necessariamente l’utente entra nel sito da questa pagina, indipendentemente dalla organizzazione del sito.

E’ quindi evidente che la trasformazione dell’audience in visitatori fedeli141 (o potenziali) dipende da questa pagina: può spingere verso la navigazione interna oppure respingere la navigazione.

140 E quindi la pagina a frequenza maggiore nelle statistiche di accesso anche perché la pagina inviata di default dal server web quando si scrive il nome di dominio e anche perché tutte le pagine interne ne prevedono (o dovrebbero) il collegamento. 141 O nel caso di una azienda in clienti diretti tramite l'ecommerce o indiretti se si rivolgono al canale tradizionale.

Posizionamento degli elementi nella pagina Fig. 26



Progettazione dell’Home page

Il ruolo vitale dell’Home page porta ad una progettazione ad hoc di questa pagina che si differenzia dalle altre, mantenendo però la consistenza, per i seguenti elementi:

− Spazio della navigazione maggiore. − Navigazione può essere diversa in termini di posizione della

navigazione globale differente oppure assenza della navigazione globale in favore della tabella dei contenuti, cioè di una descrizione delle sezioni del sito.

− Spazio maggiore per l’identità del sito.

Funzioni dell’Home page

Alla progettazione dell’Home page deve essere dedicata una particolare cura poiché deve rispondere a delle funzionalità specifiche.

Le funzionalità sono:

− Fornire la navigazione ai contenuti principali del sito (directory dei contenuti).

− Presentare il sommario delle novità più importanti e delle iniziative dell'azienda.

− Fornire la funzione di ricerca con un motore interno. − Fornire identità. − Fornire un accesso diretto a zone del sito per gli utenti abituali.

In merito alla funzione, molto importante, di fornire identità, cioè dire che sito si tratta e a che cosa serve, il che significa anche marcare questo sito rispetto allo spazio ipertestuale del web, gli elementi che si utilizzano sono:

− Logo. − Tagline.

Logo

Il Logo è il principale elemento grafico che risponde alle domande che l'utente si pone: cosa fa questo sito? Chi è l'azienda? In che sito sono? La pagina a quale sito appartiene?

Boscarol142:

Il logo andrebbe posto in alto a sinistra per un motivo molto semplice: è il punto gerarchicamente più importante della pagina. Spostarlo da lì significa rischiare di inserire qualcosa al di "sopra", e se qualcosa sta sopra il logo nella gerarchia della pagina, si possono creare dubbi e confusione all'utente. Se siete certi che non si generano confusioni, allora, in virtù di un'impaginazione particolare, il logo può anche essere posto in qualche altro luogo rilevante della pagina. In ogni caso, non vi devono essere conflitti

142 Maurizio Boscarol in www.usabile.it



gerarchici con altre immagini o elementi. Don Norman sostiene che "fra gli oggetti e la loro localizzazione deve esistere una corrispondenza spaziale naturale: in altre parole deve esserci una ragione per collocare gli oggetti nel luogo in cui si trovano". Ogni volta che si dispongono gli oggetti (non soltanto il logo) sulla pagina bisognerebbe tener presenti queste affermazioni.

Tagline

Si tratta riportando la definizione di Krug143 di una frase posta a destra o sotto il logo (e quindi al secondo posto della gerarchia della pagina) di:

Una frase stringata che caratterizza l'intera iniziativa, riassumendone il significato e i pregi.

è quindi la frase che dice al navigatore appena arrivato e ignaro cosa troverà nel sito e deve contenere poche informazioni chiare, precise e vere.

La progettazione oltre da questo è influenzata, in particolari nelle organizzazioni di una certa complessità, dal fatto che si tratta di un'area contesa, come scrive Krug144:

...è la proprietà più pregiata del web, l’immobile più prezioso dalla disponibilità limitata. Tutti (si pensi ad una azienda) vogliono un link alla sezione, vogliono la massima visibilità.

Utenti abituali

Le scorciatoie145 per gli utenti abituali si realizzano con diversi strumenti come un menu di collegamenti (in alcuni casi ridondanti) o un controllo dropdown 146 o nel caso di utenti registrati il form di registrazione.

E’ importante specificare un’area nell’Home page apposita e renderla distinta dalle altre.

Vincoli

Nella progettazione si deve considerare il vincolo del peso della pagina: la pagina deve essere veloce da caricare per evitare l’abbandono del sito.

143 Steve Krug in “Don’t make me think” - Hops libri - 2001. 144 Steve Krug in “Don’t make me think” - Hops libri - 2001. 145 Dette Quick Link o Short -Cut. 146 Se i controlli dropdown sono usati per la navigazione per l’accesso diretto a collegamenti o aree è importante ai fini dell’usabilità evitare il submit automatico e prevedere sempre il pulsante di invio.



Modello di Home page

Navigando nel web ci si accorge che non esiste un unico modello di Home page, cioè non esiste una unica strategia di progettazione.

Lynch147 individua quattro strategie di base:

− Splash screen. L’Home page è costituita da una pagina di copertina e si tratta di un argomento molto controverso del design poiché è indubbio che per molti utenti questa pagina è semplicemente un click addizionale non gradito, quindi un ostacolo alla loro azione di ricerca di informazione che nell’economia della navigazione diventa un costo (in tempo perso). La scelt a della pagina copertina dipende dalla funzione del sito e soprattutto dall’audience: se è progettato per la singola visita (siti di pubblicità di un prodotto o presentazione di un film) può essere una scelta percorribile, altrimenti è assolutamente da evitare.

− Menu based. Questa tipologia prevede una pagina caratterizzata da un

elevato numero di collegamenti di tipo testuale o grafico, spesso combinati mediante design sofisticati, con l’obiettivo di presentare agli utenti un numero elevato di scelte di navigazione. I menu sono raggruppati in base all'area di appartenenza oppure alla categoria.

− Path based. L’Home page è suddivisa in aree tematiche o per gruppi di utenti in modo da individuare immediatamente l’audience nelle aree del sito specifiche che forniscono le informazioni. E’ il caso dei siti che hanno una elevata audience in cui è impossibile presentare nella singola home page i contenuti del sito.

− News oriented. In questo caso la Home page è caratterizzata dalla presenza di una o più aree dedicate ai servizi News (novità, attività correnti, avvisi, comunicazioni, prodotti “hot”…) anche in tempo reale (quotazioni di borsa, notizie delle agenzie di stampa selezionate o meno). Si tratta di una soluzione che ha l’obiettivo di generare visite

147 Patrick Lynch in “Web style guide seconda edizione” - Apogeo – 2002.

Albero con pagina di copertina Fig. 27



ripetute, ma è chiaro che può essere attuata da quelle aziende che hanno novità interessanti per il navigatore cliente o potenziale, come per esempio le aziende che rinnovano con molta frequenza i prodotti. In questo caso l’interfaccia deve rimanere stabile nel tempo per non disorientare gli utenti che sono già impegnati con l’elevata dinamicità delle aree di news.

In base alla tipologia di pagina si imposta l’interfaccia dedicando alle aree le funzioni tipiche dell’Home e le peculiarità del modello. Per esempio una predominanza dell’area news nel modello news oriented rispetto al modello menu based che prevede comunque un’area dedicata allo scopo.

Modello dominante

Il modello dominante di Home page è costituto da una pagina in cui l'area di navigazione occupa parte principale dell'area della pagina, basata sul modello menu con un'area sintetica per le news.

In alcuni casi, in particolare per le aziende con diverse tipologie di clienti, la pagina utilizza il modello Path based con molti menu.

Per quanto riguarda l’organizzazione delle aree e il posizionamento degli elementi si assiste ad una impostazione in colonne occupate da un’area News e dai menu dotati di titolazione. I menu sono costituiti dalle voci delle sezioni, da eventuali sottosezioni di particolare importanza e da altri gruppi di collegamenti a pagine significative.

La pagina è molto densa di menu e le voci di ogni menu sono limitate.

All’inserimento di elementi grafici, all’uso del colore e alla titolazione è lasciato il fondamentale compito di evidenziar e le aree e i menu della pagina.

Organizzazione della pagina

Modello di Home page basato sui menu Fig. 28



Una alternativa per quanto riguarda i menu è la loro sostituzione con elenchi di contenuti, cioè si assiste ad una impostazione dell’Home page in colonne con l’utilizzo della tabella dei contenuti, che è molto di più di un elenco di link poiché fornisce una presentazione dell’organizzazione senza rompere il flusso della narrazione. La tabella dei contenuti consiste in menu in cui ogni collegamento è accompagnato da breve testo di sommario anticipatorio che ha lo scopo di invitare all’attivazione del collegamento che identifica l’area o la pagina. In particolare per ogni collegamento si ha:

− Il titolo che è il collegamento con il sommario. − L’eventuale collegamento posto alla fine del sommario con l’utilizzo di

una etichetta (per esempio “continua”) oppure un simbolo grafico (per esempio “>>>”).

I navigatori percepiscono questa impostazione come facilità nel recupero delle informazioni, maggiore comprensibilità e professionalità.

In alcuni casi è assente lo strumento di navigazione globale, ma non la navigazione globale specificata negli elementi della tabella.

Modello pagina Hub

La pagina Hub è una pagina di navigazione per un’area del sito costituita da un numero significativo di pagine fortemente correlate. Poiché la navigazione locale varia al variare di ogni Hub page un tipico problema che si riscontra è nel contenuto di queste pagine: si assiste spesso a pagine che presentano il menu locale e la ripetizione dello stesso menu in forma testuale nell'area del contenuto. La soluzione consiste nell’utilizzare dei modelli di pagine che prevedono una impostazione simile all'Home page basata sulla tabella dei contenuti oppure il

Modello Home page basato sulla tabella dei contenuti Fig. 29



modello con la navigazione locale che costituisce il menu dell'Hub e con la tabella dei contenuti ne ll’area dei contenuti. Esistono diverse varianti e tra queste si segnalano:

− Navigazione globale a destra − Navigazione locale a destra.

Modello pagina dei contenuti

Nella pagina dei contenuti predomina il contenuto sulla navigazione e il modello dominante prevede la presenza di due colonne occupate dall’area di navigazione locale, nella forma di un menu verticale, posta a sinistra e l’area del contenuto. Il contenuto è inserito armonicamente nella pagina in base a specifiche linee di progettazione. Nella pagina dei contenuti, e in generale in qualsiasi altra pagina diversa dalla Home page, è fondamentale specificare all'utente dove si trova poiché per la porosità148 un utente può accedere da qualsiasi altra pagina in una pagina qualsiasi del sito. La posizione dell'utente deve essere mostrata a livello di web e al livello della struttura del sito.

148 I collegamenti dall'esterno, detti link in profondità, puntano sempre ad una pagina interna e non alla Home perché questa non potrà mai essere altrettanto specifica o utile quanto una pagina interna che fornisce concretamente le informazioni cercate – Jakob Nielsen.

Modello pagina Hub Fig. 30



In tutte le pagine deve, quindi, esserci il nome del sito poiché per l'utente tutte le pagine sono simili e l'esperienza dell'utente è del web e non del singolo sito dato che ricerche dimostrano che una visita dell'utente in media non supera le quattro o cinque pagine. Come scrive Nielsen149:

Il rischio è che un utente non si accorga del sito in cui si trova a meno che non siate voi a dirglierlo. Quindi la prima regola di navigazione è di mettere in ciascuna pagina il logo un altro identificatore del sito. Il logo dovrebbe essere sempre nella stessa posizione (preferibilmente angolo superiore sinistro, se la lingua della pagina si legge da destra verso sinistra) e dovrebbe contenere un link alla Home page, così che gli utenti possano raggiungerla da qualsiasi pagina.

In questa pagina sono presenti elementi di ausilio alla navigazione come il cammino a briciole di pane posto immediatamente sotto la barra di navigazione globale e prima del titolo della pagina.

Le altre pagine

Una domanda tipica è: le altre pagine possono essere diverse dalla Home page?

Non solo le altre pagine possono essere diverse nel layout dall’Home page, ma c’è ormai una predominanza di Home page diverse dalle pagine interne, fermo restando la necessità di fornire consistenza.

La diversità è legata alla necessità sempre più forte di trasformare l’audience catturata con la promozione del sito in navigatori del sito, esigenza che si 149 Jakob Nielsen in “Web usability” - Apogeo – 2000.

Modello pagina contenuti Fig. 31



traduce in un aumento della densità di informazioni e soprattutto di collegamenti nell’Home page.

Progettazione del contenuto

Si deve partire da una definizione di contenuto.

Per contenuto si intende l’informazione testuale (con eventualmente grafica, audio e video), che viene trasmessa e i collegamenti150 che forniscono l’accesso ad altra pagine il cui contenuto è in stretta relazione.

La progettazione dell’area del contenuto stabilita nella progettazione dell’interfaccia della pagina risponde ad esigenze diverse dagli altri elementi come il sistema di navigazione, ma non deve essere staccata, non è cioè un corpo a parte.

Nella progettazione dell'intrerfaccia del contenuto e nella sua scrittura si deve anche aver ben presente il valore del contenuto per l'utente: il contenuto è il componente fondamentale dell’ipermedia web, il principale veicolo di informazione.

Nielsen:

Secondo studi di usabilità, ciò che spinge gli utenti è la ricerca di contenuti; quando arrivano su una nuova pagina, gli utenti guardano sulla parte di schermo dedicata ai contenuti e le danno una scorsa, alla ricerca di titoli e di altre indicazioni relative all'argomento della pagina. Solo in un secondo tempo, se decidono che la pagina non è di loro interesse, guardano l'area di navigazione alla ricerca di altre zone da visitare. Il contenuto viene prima di tutto.

Come progettare il contenuto?

Si deve partire considerando al differenza con il contenuto che per noi è abituale: quello su carta.

Il contenuto testuale online è diverso dal contenuto su carta a causa:

− Del testo. − Del lettore. − Del medium.

La scrittura per il web deve quindi essere diversa: un testo stampato non può essere meccanicamente riportato su una pagina web, cioè la creazione del contenuto per il web non può seguire le regole della scrittura per la stampa e per questo la scrittura per il web deve essere affidata possibilmente a specialisti (Web Writer).

150 E’ importante sottolineare che i collegamenti forniscono anch’essi informazioni per l’utente. Per esempio un link del tipo “Hub dual band 10/100 a 32 porte” all’interno di un elenco di prodotti o come novità, informa dell’esistenza (commercializzazione) del prodotto.



In altri termini, la scrittura per il web non si risolve nella formattazione del testo su carta, tenendo conto di “best practice” di usabilità, ma nella scrittura ex-novo del contenuto che viene fruito in un nuovo ambiente (il web), da nuovi fruitori (i navigatori) che non sono lettori (non-lettori) quando navigano.

Linee guida per la progettazione

Il contenuto e la sua presentazione (stile del testo) deve facilitare e velocizzare nel più breve tempo possibile la scansione, cioè deve permettere al navigatore di capire se la pagina è in grado di soddisfare il proprio bisogno informativo: il testo deve essere progettato per la scansione e la presentazione deve orientare, catturare, l’attenzione del navigatore in modo che possa rispondere immediatamente alla domanda fondamentale “C’è quello che cerco?”.

E’ un vincolo molto importante della progettazione: l’importanza è data dal fatto che se si costringe il navigatore a leggere tutto il testo per cercare quello che cerca è molto probabile che abbandoni la pagina.

Si tratta di un vincolo molto spesso disatteso.

Lynch151, in un articolo nel suo sito esprime questa inadeguatezza del web design al mezzo web con il concetto che “il web è un nuovo mezzo in un vecchio contesto”:

The Web is a new medium in an old context.

151 L'utilizzo di questi è legata alla risoluzione dei video attualmente a 72 dpi, con il tempo e il passaggio a 300 dpi il carattere più leggibile è probabilmente destinato ad essere il Times New Roman o similare.

Pagina piatta e pagina per la scansione Fig. 32



The editorial conventions of English, and the complex traditions of document design were not invented along with the Web in the early 1990s. Most of what you need to know about to create a high-quality Web site has been in the Chicago Manual of Style for decades. Virtually every major page layout, typography, or illustration convention useful for Web design was present in books published in late nineteenth or early twentieth centuries, and most fundamental layout practices predate Gutenberg. Our current page layout conventions have survived and evolved through centuries of natural selection that has weeded out the bad ideas and rewarded the useful ones. The best Web design “innovations” are simply careful adaptations of existing document conventions and genres, and thus it pays to respect the lessons of communications history.

Elementi della progettazione

La progettazione del contenuto testuale consiste nella progettazione:

− Dell’organizzazione logica: struttura del contenuto di tipo gerarchico. − Dell’organizzazione visuale: presentazione del contenuto effettuando il

contrasto visuale. − Nella scrittura per il web: utilizzo di uno stile specifico diverso da

quello su carta.

Organizzazione logica

Il contenuto non è semplicemente testo visualizzato o stampato, ma è dotato di una organizzazione, una struttura che prevede la seguente gerarchia:

− Titolo della pagina. − Sintesi/presentazione del contenuto della pagina152. − Titolo del paragrafo. − Sottotitolo del paragrafo. − Paragrafo.

Organizzazione visuale

L’organizzazione visuale permette di rendere il contenuto attraente e funzionale alla trasmissione dell’informazione, permette cioè di aumentare la leggibilità del contenuto dato che la sola strutturazione non è sufficiente.

L’organizzazione visuale si ottiene agendo sui seguenti parametri di formattazione del testo:

− L’allineamento del contenuto a sinistra. Altri allineamenti, in particolare il giustificato che è lo standard del testo stampato, comportano una pagina poco bilanciata diminuendo la leggibilità complessiva.

152 Presente nel caso di articoli o pubblicazioni in genere.



− Lunghezza massima 153 della riga di un paragrafo da 10 a 15 parole a seconda della dimensione del carattere utilizzato. Non si deve utilizzare una riga di testo troppo larga poiché gli occhi faticano a mantenersi su una riga lunga, come dimostrato da studi sulle capacità visive di lettura dell’occhio umano in base ai quali una riga non lunga su un monitor aumenta la leggibilità. Se si utilizzano i fogli di stile (CSS) che permettono di fissare la dimensione dei caratteri con il font Times New Roman a 12 punti e con una larghezza di colonna a 365 pixel si hanno circa caratteri per un numero di parole comprese tra 9 e 10 per riga. La riduzione della lunghezza della riga si attua con una gabbia grafica che prevede l’utilizzo di due colonne nell’area del contenuto.

− Spazio tra i paragrafi di una o due righe per velocizzarne l'identificazione e quindi favorire la scansione.

− Spazio tra le righe di un paragrafo (interlinea) dipendente dalla lunghezza delle righe, cioè si utilizza una spaziatura maggiore rispetto al caso di righe corte e la dimensione si ottiene aumentando la dimensione del carattere di alcune unità di punti (2 o più).

− Tipo di carattere utilizzato: Font Screen standard 154. Oltre a essere facilmente riconosciuto, il che aiuta la lettura, si evita di creare inconvenienti visivi a quegli utenti che non dispongono di una particolare font. I caratteri più diffusi sono: l'Arial e il Verdana, senza grazie, più leggibili su monitor specialmente con caratteri di dimensioni piccole (soprattutto il Verdana); il Courier, carattere con grazie monospaziato, che ricorda la macchina da scrivere. La scelta è diversa dalla carta stampata in cui prevalgono i font con “serif” come il Times New Roman.

− Dimensione del carattere : variabile a seconda se si tratta di titoli o

testo. Nel caso del testo si utilizza una dimensione compresa tra 11 e 12 punti per permettere la leggibilità in tutti i sistemi: per esempio 6 punti sono leggibili in Windows e illeggibili in Macintosh. La dimensione di 10 punti è ottima per i sistemi Windows. Queste specifiche non tengono conto di chi ha problemi di vista e pertanto sarebbe opportuno fornire la possibilità all'utente di aumentare la dimensione per aumentare la leggibilità con un comando nella pagina. I titoli e i sottotitoli prevedono una dimensione superiore proporzionale alla dimensione del testo.

153 E’ importante sottolineare come non sempre sia attuata soprattutto nei siti delle aziende, per esempio nel sito dell’IBM che possiamo considerare come un punto di riferimento non si utilizza. 154 Director Web Design and Development, and Yale Center for Advanced Instructional

Media.

San serif e serif Fig. 33



− Colore del testo che assicuri un buon contrasto con lo sfondo: tipicamente nero su sfondo bianco.

− Enfatizzazione del testo con il neretto o con altro colore. E' da evitare il sottolineato che viene interpretato come segnale di collegamento.

− Maiuscolo/Minuscolo: minuscolo con la prima lettera del paragrafo o dei nomi in maiuscolo. L’utilizzo de l maiuscolo disturba la lettura e risulta essere particolarmente pesante per interi paragrafi.

Area contenuto con navigazione contestuale separata dal testo Fig. 31 bis



Indice della pagina

L’indice della pagina è una tabella di presentazione dei contenuti della pagina, tipicamente posta a destra del titolo 155, che ha lo scopo di presentare in modo estremamente sintetico il contenuto della pagina.

Spesso l’indice è costituito dai titoli della pagina e con collegamenti all’interno della pagina per permettere un rapido accesso al paragrafo di interesse.

155 O immediatamente sotto nella forma di un elenco puntato con la specifica “Questa pagina contiene:” o “In questa pagina:”.

Area contenuto con navigazione contestuale all’interno del testo Fig. 31 tris



Molti autori sono contrari all’utilizzo dei collegamenti interni alla pagina e nel caso siano utilizzati si deve rendere chiaro all’utente che si tratta di un collegamento interno, anche utilizzando una colorazione diversa per il collegamento utilizzando le possibilità dei fogli di stile. Stile di scrittura

Si è più volte accennato che la scrittura per il web è un nuovo modo di scrivere e che non è ancora stabile, nel senso che non c’è ancora uno standard di “stile” trattandosi di un nuovo medium.

Si tratta di un elemento fondamentale per il successo del sito poiché alla fine è il testo l’elemento fondamentale della ricerca del navigatore. Per questo è necessario affidare la scrittura dei contenuti ad esperti del settore che vanno da subito inseriti nel team di sviluppo del sito e fatti partecipare nella progettazione e realizzazione di ogni pagina, home page compresa. Krug evidenzia come sia prassi non coinvolgere gli esperti del contenuto nella progettazione della home page e lo ritiene un grave errore da dato che si tratta della pagina più importante che oltre ad assolvere al compito di punto di smistamento per la navigazione interna presenta anche i contenuti del sito. Quindi, se il contenuto è fondamentale a maggior ragione lo è nella pagina più importante.

Si lascia alle risorse in internet156 il tema dello stile di scrittura evidenziando che come un testo su carta non può essere meccanicamente riportato sul web non solo perché nel web si ha a che fare con un ipertesto e non con un testo, ma anche perché un testo lungo corre il rischio di non essere letto per un eccessivo 156 www.mestierediscrivere.it è un buon punto di partenza.

Indice interno della pagina Fig. 31 quater



scrolling e/o per tempi lunghi di caricamento.

In linea generale se a seguito della riduzione del contenuto, in particolare rispetto alla versione originaria a stampa, questo risulta essere ancora troppo lungo le possibilità sono le seguenti:

− Presentare l’intero contenuto facendo particolare attenzione alla progettazione del contenuto in modo da invogliare la lettura: scelta che comunque comporta una pagina meno usabile.

− Suddividere il contenuto in diverse pagine (Paging) trasformando la

singola pagina in una struttura sequenziale: scelta che privilegia la facilità di lettura e la velocità di downloading, ma che presenta lo svantaggio dei click necessari per assumere tutto il contenuto.

− Creare una pagina di presentazione del contenuto (abstract) fornendo la possibilità di scaricare l’intero contenuto nella versione a stampa in un formato “portabile” (come Adobe PDF).

Paging

In questo caso l’interfaccia di ogni pagina deve essere progettata per contenere:

− L’indice delle pagine. Poiché l’indice permette la presentazione sintetica del contenuto complessivo del documento e l’accesso diretto alla pagina che interessa è necessario suddividere il documento non in base alla rigida applicazione del numero di schermate, ma in base al contenuto individuando per ogni pagina l’argomento e il titolo della pagina.

L’indice viene posizionato a sinistra o a destra della pagina e a tutti gli effetti è un sistema di navigazione locale. Nel caso di indici complessi è opportuno strutturare l’indice su più livelli (ad albero) usando come strumento di navigazione un menu con sottomenu che si attivano per espansione in modo che l’indici rimanga all’interno della prima schermata.

− I collegamenti di movimento all’interno della sequenza (Avanti, Indietro eventualmente Inizio).

Pagina lunga e schermata Fig. 34



I collegamenti possono essere iconici (VCR-Like) o testuali ed è consigliato anticipare il contenuto della pagina successiva.

Il collegamento per fornire la possibilità di visualizzare e stampare l’intero documento .

− Barra della sequenza delle pagine con i numeri di pagina che collegano direttamente alla pagina della sequenza. La barra serve anche per evidenziare la pagina corrente.

Si deve prestare attenzione alla differenza che esiste tra i pulsanti di navigazione del Browser e gli strumenti di movimento nella sequenza dato che i primi effettuano il movimento nella sequenza delle pagine visitate e i secondi all’interno della sequenza stabilita dagli autori: non necessariamente i due strumenti forniscono lo stesso risultato.

La stampa

Il servizio di stampa della pagina nasce dal fatto che è abitudine degli utenti stampare le pagine che trovano interessanti e che quindi rispondono appieno ai bisogni informativi.

Un utile approfondimento del tema è offerto da Patrick J. Linch, che evidenzia come il navigatore utilizzi i documenti Web in due modo distinti, uno diretto e uno indiretto:

Differenza tra i pulsanti Fig. 36

Paging Fig. 35



The Web is both a direct experience and a delivery medium. Readers use online documents in two distinct ways that should govern the design of Web pages: - As a direct online experience, where the utility or content of the page is experienced directly from the screen - As a delivery medium where more complex documents are either printed or saved to disk to be read from the screen at some later time. Each experience requires a different design approach. Pages for online use should be relatively short, with text content that has been carefully edited to allow fast scanning. In general, “online” copy is broken up with more subheads, bullet lists, and pull quotes than the print equivalent. But the Web is also a great distribution medium for more complex fare. Most readers will simply print long documents, and read from the paper version. Both approaches are legitimate, but always resist the notion that Web-based content must be “dumbed-down” to appeal to “screenagers” who are allergic to sophisticated print narratives. Slate, Salon, the Chronicle of Higher Education, and the New York Times Web sites prove this nonsense wrong every day...

La stampa della pagina si può ottenere:

− Sfruttando la possibilità dei browser di stampare la pagina impostando, però, un foglio di stile per la stampa su ogni pagina.

− Creando un servizio del sito prevedendo una versione per la stampa depurata dall’interfaccia e appositamente progettata (font per stampa come il Times New Roman e una formattazione che tenga conto della maggior area disponibile).

La pagina (che funge anche da anteprima di stampa) può essere aperta nella stessa finestra oppure in una finestra separata. Nel primo caso deve esserci sempre il collegamento per ritornare alla pagina destinazione, mentre nel secondo il collegamento per la chiusura della pagina (esecuzione di una funzione nel linguaggio di scripting).

− Prevedere una versione per la stampa appositamente progettata per la fruizione su tradizionale, mediante l’uso di formati portabili (come Adobe PFD). Questa soluzione tiene conto del cambio di contesto d’uso e presenta il contenuto nella forma migliore per la fruizione offline.



Errrori da evitare

I principali errori da evitare nello sviluppo di un sito oltre a quelli già visti in precedenza sono:

− Non avere un chiaro scopo del sito. Senza uno scopo è difficile valutare la funzionalità del sito e pure per il gruppo di progetto scegliere tra i diversi tipi di siti. Inoltre, spesso una mancanza o non chiara definizione di scopo porta all’utente un messaggio nebuloso: l’utente si chiederà che “Che cos’è questo?”, e quindi probabilmente lascerà il sito. Nella definizione dello scopo si devono definire: l’area del soggetto, cioè l’individuazione della tematica che serve per il contesto per ciò che il sito propone. Per esempio “studio della fisica” o “Studio della Fisica attraverso il computer”. Il pubblico, cioè specificare il pubblico a cui il sito si riferisce, la conoscenza del pubblico a cui si rivolge (Target) aiuta a dare forma all’intero contenuto informativo del sito oltre che al suo aspetto (interfaccia). Gran parte della domanda “Per fare cosa è stato creato questo sito?” si risolve attorno allo specifico pubblico menzionato nella definizione dello scopo. Per esempio “Studenti interessati alla fisica” o “Appassionati di fisica”. Il livello di dettaglio delle informazioni, cioè specificare se il sito fornisce informazioni generali oppure specifiche. Per esempio “Panoramica completa sulla fisica per studenti di fisica” o “ Fisica di base per studenti di fisica”. Il beneficio o la risposta attesi dell’utente, cioè definire che cosa ricaveranno gli utenti dal sito. Per esempio “Essere aggiornati sulla fisica” o “Seguire gli ultimi sviluppi della fisica”.

− Approccio tecnologico : spesso il progetto di un sito è affrontato come un problema tecnologico e i progetti iniziano con l’utilizzo di particolari tecnologie web (linguaggi di scripting, DHTML) e browser plug- in (Flash), ma non considerando le reali necessità degli utenti e dell’azienda. Questo approccio comporta mancanza di usabilità per le caratteristiche dell’ambiente web (ricezione variabile) e per il problema della reale fruibilità della pagina.

− Fretta della presenza: il sito deve essere pubblicato quando finito e testato e quindi non si deve pensare, come spesso capita di vedere, di accelerare la presenza nel web con un sito per occupare lo spazio per poi successivamente arrivare al prodotto finito e quindi al “vero” sito dell’azienda.

− La morte lenta: nel web si assiste al fenomeno di molte pubblicazioni aziendali e operazioni di comunicazione: ad una fase di avvio entusiastica subentra poi il disinteresse e l’abbandono. Questo nel caso di un sito è un errore gravissimo, poiché i contenuti e i servizi si devono evolvere nel tempo per mantenere l’audience catturata inizialmente. Un sito statico, che non si innova probabilmente perderà il pubblico di riferimento dato che non ci sarà ad ogni visita la ricezione da parte del navigatore di “qualcosa”, del valore aggiunto della visita. Un sito non è un manifesto o una brochure, cioè un progetto con una vita prestabilita e



contenuto statico, ma un processo di comunicazione e la mancanza di questa prospe ttiva porta alla fine di moltissimi siti, in particolare di piccole e medie aziende, che sono come delle cattedrali digitali: memorie digitali (in cui l’informazione presente nella sezione novità ha la data dell’anno prima…).

− Sito orfano: il sito di tutti non è di nessuno, cioè nel caso di una organizzazione complessa il progetto web deve essere una scelta dell’intera azienda e non il risultato dell’azione di un gruppo o di un singolo isolati dal resto, cioè lo sviluppo del sito deve essere partecipata, condivisa, rispettosa degli obiettivi e deve esserci un responsabile del progetto.

− Fenomeno del “Scope Creep” : consiste nell’aggiunta graduale e inesorabile di contenuti, funzioni e caratteristiche non previste nella pianificazione. E’ questa la causa prevalente del fallimento di un progetto Web e non vi è un elemento specifico che comporta la rottura, il fallimento, ma la lenta accumulazione di modifiche che fa implodere il progetto. E’ la sindrome del “just one more page”, che si può bloccare specificando il numero massimo di pagine e trattare il numero come “un gioco a somma zero”: se una pagina viene aggiunta, un’altra deve essere tolta. Questo non significa che non ci possano essere aggiunte e modifiche in corso d’opera, anche nella fase di realizzazione; anzi spesso sono indispensabili.

− Integrazione organizzativa : condizione necessaria affinché il sito possa avere successo è che sia parte integrante dell’ organizzazione, deve cioè essere condiviso e non visto come qualcosa di separato. Si deve inoltre tene r conto che nella grande maggioranza dei casi l’organizzazione, con i suoi ruoli e le sue gerarchie, è precedente e indipendente dalla nascita e crescita del web e della cultura web.

− Non considerare l’esperienza dell’utente : gli utenti si aspettano il rispetto delle convenzioni che si sono consolidate, cosa che gli permette di capire immediatamente le caratteristiche dell’interfaccia proposta senza uno sforzo cognitivo di decodifica. E’ importante considerare sempre l’esperienza dell’utente: gli strumenti di navigazione dei siti web, esattamente come la segnaletica nel mondo reale, poggiano ormai su alcune convenzioni consolidate. Come evidenzia Nielsen157 gli utenti passano la maggior parte del loro tempo su altri siti. Per questo, qualsiasi convenzione, utilizzata nella maggior parte degli altri siti, sarà nel cervello degli utenti la regola e l'allontanamento da tale convenzione comporta necessariamente seri problemi di usabilità (una violazione della regola incomprensibile e fastidiosa). Nielsen riporta un esempio (reale) estremamente significativo relativo al “carrello”:

157 Jakob Nielsen nell’articolo “Do Interface Standards Stifle Design Creativity?” – agosto 1999, in www.useit.com



Eric Davis, an Information Architect with Resource Marketing, recently reported on a usability test of shopping cart terminology. The draft design featured the term "Shopping Sled" since the site (selling winter sports products) had a desire to stand out and avoid standard terminology. Result: "50% of users did not understand The Sled concept. The other 50% said that they figured out what it meant because it was in the same location as a cart would be. They knew that you had to add to something, and the only something that made any kind of sense was the Sled." Lesson: Do not try to be smart and use new terms when we have good words available that users already know.

L’idea di sostituire il termine carrello per la spesa (shopping cart) con slitta per la spesa (Shopping Sled) , per ragioni di brand158, è stata completamente bocciata dalle valutazioni di usabilità.

− Non aggiornare i contenuti: la mancanza di aggiornamento diminuisce il valore comunicativo e relazionale del sito.

− Fornire informazioni di bassa qualità : l’utente è interessato ai contenuti.

− Non controllare lo stato e la pertinenza dei collegamenti esterni: indice di poca credibilità.

158 Brand è il marchio.



Sintesi

In base a quanto detto risulta evidente che l’usabilità è un fattore di garanzia “di vita” del sito, condizione dovuta alla pervasività del web: la diffusione del web e di internet è tale che la quantità di utilizzatori e la loro qualità in termini cultura (informatica) rende “fondamentale” porsi il problema dell’usabilità di un sito 159.

Tutte le definizioni di usabilità disponibili e la considerazione che l’usabilità è relativa al sistema contesto/sito/utente pongono l’accento sul primo e fondamentale passo dello sviluppo di un sito che deve essere la conoscenza:

− Dello spazio web. − Delle caratteristiche degli utenti. − Del contesto organizzativo e sociale nel quale sono inseriti e operano.

Concludendo, si può affermare che: il contenuto è una condizione necessaria ma non sufficiente160 per il successo di un sito161, serve l’usabilità intesa come accessibilità ai contenuti e quindi una attenta e particolare progettazione.

159 Come è rilevante la problematica della accessibilità delle persone speciali (non normodate e anziani), poiché il non considerare le loro esigenze di accesso alle informazioni è nei fatti una esclusione (e questo vale in modo particolare per i siti istituzionali e i siti della pubblica amministrazione). E’ importante sottolineare che usabilità e accessibilità sono diverse: un sito usabile può non essere accessibile e viceversa un sito accessibile può non essere usabile. La tematica della accessibilità, estremamente interessante in particolare per la valenza sociale, frutto di una recente attenzione del legislatore culminata in una apposita legge del 2003, non viene affrontata in questa dispensa e si lascia pertanto alla ampia letteratura disponibile anche in internet. 160 A meno che l’utente non sia obbligato perché solo nel sito c’è l’informazione o perché l’utente è all’interno di una intranet aziendale (cosa che non giustifica). 161 Per successo del sito si intende un sito che fornisce ai propri utenti ciò che vogliono e che risponda, al contempo, agli obiettivi dell’azienda.



Definizione di sito usabile

Alla conclusione della parte teorica si fornisce la definizione di sito usabile di Visciola 162:

Un sito Web è usabile quando soddisfa i bisogni informativi dell'utente finale che lo sta visitando e interrogandolo, fornendogli facilità di accesso e navigabilità e consentendo un adeguato livello di comprensione dei contenuti. Nel caso non sia disponibile tutta l'informazione, un buon sito demanda ad altre fonti informative.

In questa definizione si amplia il requisito della facilità d’uso introducendo i concetti di navigabilità, comprensibilità e completezza dei contenuti ed è importante sottolineare come:

− La facilità d’uso non è la proprietà esclusiva dell’interfaccia. Cioè, una interfaccia facile da usare non comporta automaticamente l’usabilità del sito.

− I collegamenti all’esterno del sito non solo sono una ricchezza/opportunità, ma anche una condizione di usabilità.

162 Michele Visciola in “Usabilità dei siti Web” – Apogeo – 2000.


Tutorial

Si presenta una serie di schermate del sito dell’Itis Euganeo con le quali si evidenziano i diversi elementi dell’interfaccia di una tipica pagina dei contenuti, con una breve spiegazione riassuntiva.

Usabilità siti: tutorial


Layout della pagina

1. Intestazione

Identità (logo e tagline), navigazione supplementare e navigazione globale in un banner con evidenziazione delle aree di navigazione.

2. Corpo

Area di navigazione locale in una colonna evidenziata da una colorazione di sfondo diversa dallo sfondo dell’area dei contenuti.

3. Corpo

Area del contenuto.

4. Footer

Menu del footer e firma della pagina in un banner di chiusura evidenziato da una diversa colorazione.



1. Intestazione

2. Corpo

3. Corpo

4. Footer



Area del banner

1. Logo nell’angolo superiore sinistro di tutte le pagine

Scopo trasmettere identità sull’editore del sito e, quindi, spesso sui contenuti che il navigatore può trovare se il logo è noto perché associato ad un marchio di una azienda o organizzazione nota. La grandezza del logo è tale da essere leggibile e immediatamente identificabile.

2. Tagline in prossimità del logo in tutte le pagine

Scopo anticipare i contenuti del sito mediante una frase sintetica che fornisce immediatamente cosa l’utente può trovare. E’ posta sotto il logo e si estende per tutta la sua lunghezza.

3. Collegamento diretto all’Home page nell’area del logo/tagline in tutte le pagine

Scopo permettere l’accesso diretto alla Home page, al punto di partenza, per tener conto della porosità del sito. Il collegamento è implicito, cioè sull’area.

4. Collegamento esplicito e diretto all’Home page

Scopo permettere l’accesso diretto alla Home page, al punto di partenza, per tener conto della porosità del sito. Il collegamento è implicito, cioè sull’area. Lo strumento può essere testuale e/o iconico, anche se si preferisce testuale con l’etichetta standard “Home”, inoltre è anche ormai prassi associare al logo il collegamento.



1. Logo

2. Tagline

3. Collegamento implicito Home page

4. Collegamento esplicito alla Home page



Strumenti di navigazione

1. Strumento di navigazione supplementare in ogni pagina, nella stessa posizione e con i collegamenti costanti

Scopo fornire l’accesso a pagine che non appartengono alla gerarchia dei contenuti, ma a pagine particolari per il contenuto o la funzione per svolgere funzioni particolari.

2. Strumento di navigazione globale in ogni pagina, nella stessa posizione e con i collegamenti costanti

Scopo è fornire l’accesso/passaggio alle pagine fondamentali, alle aree principali nel caso il sito sia organizzato gerarchicamente in aree come tipicamente succede, ai servizi e funzioni in modo immediato e diretto senza dover tornare alla Home page.

La barra di navigazione principale è lo strumento più utilizzato e può essere testuale e/o iconico. E’ costituita da un menu orizzontale di link inseriti in una o più caselle di forma geometrica o pittorica.

La grafica, colore di sfondo celeste, agisce per evidenziare l’area di navigazione globale e distinguerla dalle altre aree di navigazione (e dal contenuto) evitando di creare competizione visiva.

3. Strumento di navigazione locale in ogni pagina, nella stessa posizione

Scopo è permettere la navigazione all’interno delle aree di contenuto costituite dalle sezioni e dalle sottosezioni, cioè in quest’ultimo caso da pagine che fanno riferimento ad un argomento della sezione. I collegamenti della navigazione locale variano a seconda della sezione in cui si trova il navigatore. Il menu verticale è lo strumento più utilizzato e la posizione dominate è alla sinistra della pagina. La grafica agisce per evidenziare l’area di navigazione globale e distinguerla dalle altre aree di navigazione (e dal contenuto) evitando di creare competizione visiva.

4. Breadcrumbs trial o percorso briciole di pane in ogni pagina e nella stessa posizione

Scopo è orientare il navigatore specificando la posizione tramite una serie di passi successivi che indicano il posizionamento logico della pagina nella struttura complessiva: non la strada che l'utente ha fisicamente seguito per arrivarci.



1. Navigazione supplementare

2. Navigazione primaria

3. Navigazione locale

4. Percorso briciole di pane



Footer

1. Menu footer presente in ogni pagina

Scopo è ripetere il menu supplementare che contiene degli schemi di accesso alternativo e il collegamento diretto alla Home page.

2. Firma presente in tutte le pagine

Scopo è fornire l’identità degli editori del sito, l’indirizzo della Home page e la data dell’ultimo aggiornamento

3. Vai all’inizio della pagina presente per le pagine che superano la prima schermata

Scopo è permettere di tornare all’inizio della pagina ed assume la forma della classica icona della freccia verso l’alto.



1. Menu footer

2. Firma

3. Vai all’inizio pagina



Contenuti

1. Titolo della pagina

Scopo identificare il contenuto della pagina. Il titolo è evidenziato da una diversa colorazione e da una diversa grandezza.

2. Titolo paragrafo

Scopo permettere una rapida scansione. I titoli del paragrafo sono evidenziati da una diversa colorazione e da una diversa grandezza.



Strumenti di ausilio

1. Titolo barra del browser

E’ il titolo della pagina visualizzata che compare nella barra in alto della finestra del browser. Particolare attenzione deve essere posta nella scelta del titolo che deve fornire due informazioni: informazione sul sito con il nome dell'azienda e l'informazione sul contenuto della pagina.

2. Nome del file nell’indirizzo http

Il nome del file della pagina web (o il percorso nell'URL) deve fornire informazioni, dato che l’indirizzo appare nella barra di stato del Browser e nel piè di pagina nel caso di stampa della pagina. Inoltre l’utente potrebbe accedere successivamente direttamente alla pagina scrivendo l’indirizzo completo.

3. Nome della pagina alla fine del percorso a briciole di pane

Scopo mostrare all’utente la posizione dove si trova. 4. Indicatore visuale “Voi siete qui”

Scopo mostrare all’utente la posizione dove si trova. L’indicatore è costituito da una icona di tipo puntatore accanto al collegamento, dalla disattivazione del collegamento nel menu di navigazione locale con una diversa colorazione rispetto al blu dei collegamenti.


Scopo è specificare all’utente dove si trova e cosa trova nella pagina.



1. Titolo barra del browser

2. Nome del file

3. Nome della pagina alla fine del percorso di briciole di pane

4. Indicatore visuale “Voi siete qui”


Bibliografia – Sitografia - Note


Bibliografia

Michele Visciola, Usabilità dei siti Web, Apogeo 2001, Milano

Jeremy Rifkin, L’era dell’accesso, Saggi Mondadori 2000, Milano

Bruce Schneier, Applied cryptography, John Wiley & Soon 1996, New York

Nicholas Negroponte, Essere digitali, Sperling & Kupfer Editori 1995, Milano

John Hagel III e Marc Singer, Net Worth, Apogeo 2001, Milano

Lev Manovich, The Language of New Media, MIT Boston, 2001

Sofia Postai, Siti che funzionano, Apogeo Milano, 2001

Autori vari, Guida al commercio elettronico II edizione, INDIS e Ministero dell’Industria e del Commercio 1999, Roma

Patrick j. Lynch e Sarah Hoerton, Web Style Guide 2nd edition , Yale University Press 2002, New Have

Sitografia

www.sitichefunzionano.it

www.webstyleguide.com

www.useit.com


www.usabile.it

www.asktog.com

www.digitalweb.com

www.alisapart.com

www.rai.it/smartweb

www.jsd.com

Bibliografia – Sitografia - Note

Note

Questo documento che nasce dalla sistematizzazione di alcune dispense per gli studenti dell’indirizzo tecnologico informatica e per i corsi del fondo sociale europeo, costituisce la “bozza” di un futuro libro sulla progettazione usabile dei siti che vedrà la luce quando avrò il tempo di formalizzare tutte le parti, rivedere i contenuti (anche grazie al feedback di alcuni volenterosi) e, infine, quando riuscirò a portare il numero totale delle pagine ad un multiplo di 32 o 64…

Lo scopo, comunque, non è quello di esaurire l’argomento (ammesso che lo sia), ma fornire una cornice di riferimento per futuri approfondimenti.

Si prega, infine, di non diffondere ad altri il documento per ovvi motivi legali (non miei, ma degli autori a cui ho preso a prestito e non ancora giustamente citati…).

Nicola Ceccon


Indice

Teoria

Introduzione pagina 2

Oggetti e attori pagina 3

Progettazione pagina 18

Interfaccia della pagina pagina 58

Errori da evitare pagina 86

Sintesi pagina 89

Definizione di sito usabile pagina 90

Tutorial

Tutorial pagina 90

Note varie

Bibliografia pagina 103

Sitografia pagina 103

Note pagina 104

Titolo: Usabilità in sintesi

Autore: Nicola Ceccon

Email: [email protected]

Classe: QUINTA INFORMATICA (5IA)

Anno scolastico: 2003/2004

Scuola: Itis Euganeo Via Borgofuro 6 - 35042 Este (PD) - Italy Telefono 0429.21.16 - 0429.34.72 Fax 0429.41.86 http://www.itiseuganeo.it [email protected]

Note legali: Diffusione consentita con obbligo di citarne le fonti

USABILITÀ DEI SITIE0.pdf · Itis Euganeo – Nicola Ceccon 1 Autore: Nicola CECCON Classe: QUINTA...

Documents

Transcript of USABILITÀ DEI SITIE0.pdf · Itis Euganeo – Nicola Ceccon 1 Autore: Nicola CECCON Classe: QUINTA...