Usabilità dei siti Web.

Presentazione sul tema: "Usabilità dei siti Web."— Transcript della presentazione:

1 Usabilità dei siti Web

2 Usabilità dei siti Web La prima considerazione da fare alla luce di quanto abbimo visto sino ad ora è che molti dei problemi del World Wide Web derivano probabilmente dalla giovane età di questo servizio. Come abbiamo già detto in precedenza i nuovi media sono infatti strumenti in cui molto del "saper fare" acquisito con i media tradizionali non può essere applicato direttamente ma deve essere ripensato sperimentato, metabolizzato

3 Usabilità dei siti Web A fronte di queste aspettative che il nuovo mezzo suscita, si innestano i requisiti progettuali che le nuove normative hanno fissato.

4 Usabilità dei siti Web Con l'economia di Internet, l'usabilità ha acquisito un'importanza sempre più alta rispetto al passato. Con oltre 100 milioni di siti web gli utenti hanno più che mai la possibilità di scegliere. Nella progettazione esistono due tipi di approcci: quello estetico e quello funzionale. Le due anime possono, però, e debbono coesistere: non ci sono motivi validi perché la scelta cada su uno solo dei due approcci. "Tutti i vostri concorrenti sono solo ad un click di distanza" (J.Nielsen)

5 Usabilità dei siti Web Sul web c'è bisogno di rendere semplice lo svolgimento di attività che hanno un fine pratico senza che la grafica sia d'impiccio o d'impedimento ma anzi funzionale e gradevole. Per progettare, sostiene Jacob Nielsen in Web usability, “c'è bisogno di ispirazione e creatività”, ma prosegue: “l'innovazione è per il 10% ispirazione e per il 30% traspirazione”, ossia sudore.

6 Usabilità dei siti Web Vediamo meglio quali sono, in una prima fase di approccio, gli errori da non commettere nel progetto di sviluppo di un sistema di informazione su Web Modello di business: non trattare il Web come una brochure ma come un progresso fondamentale che cambierà il modo di concepire il business nell’economia di rete. Gestione del progetto: non gestire un progetto Web come se fosse un progetto aziendale o istituzionale tradizionale, focalizzando l’attenzione verso l’interno dell’azienda e della istituzione. Un progetto Web dovrebbe, viceversa, essere gestito come un progetto sui generis di interfaccia verso i clienti.

7 Usabilità dei siti Web Architettura informativa: non strutturare il sito riproducendo la struttura interna dell’azienda o dell'istituzione. Al contrario, il sito dovrebbe essere costruito per rispecchiare l’immagine che gli utenti hanno dello spazio informativo e la struttura delle operazioni che vogliono compiere su di esso. Design delle pagine: non creare pagine sgargianti che suscitano emozioni favorevoli nelle dimostrazioni interne. Le demo interne non hanno mai ritardi nel tempo di risposta, elemento determinante dell’usabilità Web, né mostrano mai le difficoltà di un utente nell’identificare e nel comprendere i diversi elementi della pagina. Imponetevi, invece, l’obiettivo di ottimizzare l’esperienza dell'utente in circostanze realistiche, anche se le vostre demo saranno meno appariscenti e di "effetto"

8 Usabilità dei siti Web Produzione dei contenuti: non scrivere nello stesso stile lineare con cui avete sempre scritto. Sforzatevi, invece, di scrivere nel nuovo stile ottimizzato per i lettori online, che scorrono il testo senza leggerlo e hanno bisogno di pagine molto brevi dove le informazioni secondarie sono relegate in pagine secondarie. Strategie connettive: non trattare il vostro sito Web come se fosse l’unico importante, senza link adeguati verso altri siti e senza punti di ingresso predeterminati a cui altri siti possano puntare. Molte aziende non usano i link giusti nemmeno quando citano il proprio sito nelle proprie pubblicità. Invece, ricordatevi che l’ipertesto è il fondamento del Web e che nessun sito è un’isola.

9 Usabilità dei siti Web In ciascuno di questi casi, il comportamento spontaneo in un progetto Web, che si basa sulle proprie esperienze al di fuori della Rete, si dimostra sbagliato. Il Web è un nuovo medium e richiede un nuovo tipo di approccio. Vediamo allora insieme alcune delle linee guida, che possono essere utilizzate nella fase progettuale di un sito al fine di rendere più efficace ed efficiente la sua capacità comunicativa in Internet.

10 Linee guida di progettazione

11 Linee guida di progettazione
Anche se agli sviluppatori molte delle indicazioni sotto riportate appariranno scontate o già conosciute è fondamentale, che da parte degli "addetti ai lavori" ci sia una forte condivisione degli strumenti metodologici e dei criteri di usabilità con cui i siti www vengono costruiti. La realizzazione di un sito web efficace, efficiente e che soddisfi i bisogni dell'utente richiede una progettazione orientata all'utenza e la collaborazione di competenze diverse: esperti del domino, esperti di linguaggio html, grafici e ergonomi cognitivi esperti in usabilità.

12 Linee guida di progettazione
La progettazione orientata all'utente si basa sull'applicazione di criteri e linee guida ormai consolidate derivate dall'ergonomia cognitiva finalizzate ad assicurare l'usabilità del sistema e considera il continuo confronto e la verifica dell'efficacia del sistema con l'utente, fondamentali nel corso delle diverse fasi di progettazione e sviluppo.

13 Linee guida di progettazione
Progettazione modulare: organizzate una struttura ad albero in quanto consente piu' facilmente di mantenere e tenere aggiornato il sito. I sistemi di pagine costruiti modularmente seguendo una struttura ad albero consentono un facile e veloce aggiornamento dei documenti on line che non comporta la necessità di sostituzione in blocco dell'informazione. Facilitano inoltre la comprensibilità della struttura logica ed i legami tra le informazioni.

14 Linee guida di progettazione
Livelli: definite un numero limitato di livelli. Strutturare i contenuti in modo tale che la gerarchia non scenda oltre il quarto livello. Livelli ulteriori sono difficili da distinguere e tendono a disorientare l'utente.

15 Linee guida di progettazione
Sezioni: suddividete il contenuto in brevi sezioni. Evitare di creare pagine eccessivamente lunghe che trattano piu' di un argomento. Non mettere lunghe parti di testo, anche se relativo allo stesso tema, in un'unica pagina infinita. Definite una pagina iniziale all'interno della quale viene fornita una sintesi degli argomenti delle pagine successive e un sommario. Una pagina non dovrebbe essere mai troppo piu' lunga della finestra in cui appare. Dopo circa quattro facciate di "scrolling" l'utente tende a perdere il senso dell'orientamento e il contesto di appartenenza.

16 Linee guida di progettazione
Sezioni monotematiche: strutturate delle sezioni che siano monotematiche. L'utente puo' arrivare direttamente alla consultazione di qualsiasi pagina del sito. E' necessario pertanto che il contenuto del messaggio sia strutturato in sottoparti dotate di significato autonomo e comprensibili anche al di fuori del contesto cui appartengono.

17 Linee guida per la strutturazione del testo

18 Linee guida per la strutturazione del testo
Spesso la maggior parte del contenuto delle pagine Web è costituito dal testo. Scrivere un testo per una pagina web è molto diverso che scriverlo per la carta stampata. La scrittura di un documento web infatti deve tenere conto del fatto che la lettura di un testo direttamente dal video è molto piu' stancante e circa 25 volte più lenta della lettura su stampa; inoltre il 79% degli utenti che consultano pagine web non leggono la pagina parola per parola ma "scannerizzano" la pagina, alla ricerca dell'informazione che li interessa. Di seguito sono riportati alcuni suggerimenti per facilitare la leggibilità e la comprensibilità di un documento web in relazione all’uso della tipografia, della struttura della frase, dell'uso della grafica e delle immagini.

19 Linee guida per la strutturazione del testo
Tipografia: quando le pagine sono composte per la maggior parte di testo la tipografia è cio' che definisce il design della pagina. Organizzate testo e grafica in modo tale che la localizzazione e l'organizzazione delle informazioni siano immediatamente comprensibili. Definite uno schema per l'organizzazione del testo e utilizzalo coerentemente. L'uso coerente dello stesso tipo di schema facilita l'individuazione dell'informazione da parte dell’utente e aumenta la comprensibilità complessiva della pagina.

20 Linee guida per la strutturazione del testo
Definite il minor numero di stili per titoli sottotitoli e per il corpo del documento e utilizzateli con coerenza. Evitare contrasti che rendono difficoltosa la lettura, come l’uso di background non uniformi.

21 Linee guida per la strutturazione del testo
Evitate l'uso consistente del grassetto per tutto il testo. Mettere in evidenza tutto equivale a non evidenziare niente. Evidenziate le parole chiave presenti nel testo. Limitate il numero degli items in una lista a non più di nove Limitate i livelli degli elenchi a non più di due. Utilizzate titoli e sottotitoli significativi Presentate le informazioni più salienti nella parte superiore della pagina. Nel seguito della pagina possono trovarsi le informazioni più dettagliate per chi è già interessato all'argomento.

22 Linee guida per la strutturazione del testo
Inserite la didascalia in grafici e figure a meno che il contenuto cui si riferisce non sia cosi chiaro da rendere ridondante la spiegazione. La didascalia deve illustrare unicamente il contenuto della tavola o della figura cui si riferisce. La definizione della didascalia non deve essere la stessa utilizzata per esempio per il titolo della sezione.

23 Struttura della frase e stile

24 Struttura della frase e stile
Siate sintetici. Utilizzate circa la metà delle parole che utilizzereste per scrivere lo stesso contenuto per un mezzo tradizionale come la stampa. Usate periodi brevi e con pochi incisi. Usate semplici strutture di frasi. Evitate l'uso delle parentesi "a catena".

25 linguaggio

26 linguaggio Parlate il linguaggio dell'utente.
Usate un linguaggio semplice e informale. Evitate di usare uno stile promozionale con affermazioni troppo autocelebrative.

27 Immagini e grafica

28 Immagini e grafica i documenti in cui c'è molto testo, senza nessun contrasto dato dall’uso della grafica, delle immagini e delle scelte tipografiche, sono molto difficili da leggere, in particolare sui monitor dei computer. L'uso delle immagini può contribuire a rendere le pagine più gradevoli, e più attraente il loro contenuto. Comunque è anche vero che delle pagine ad alto contenuto di grafica rischiano di disturbare il lettore offrendo un cattivo bilanciamento fra sensazione visiva, informazione testuale, e collegamenti ipertestuali.

29 Immagini e grafica La grafica e le immagini devono sempre essere di complemento al testo, per non essere solo un elemento distraente nella lettura. Cercate di armonizzare l'uso di testi e immagini. Il rapporto ottimale tra il testo e la immagine si ha quando il testo imposta le ragioni non visibili di ciò che l'immagine descrive.

30 Migliorare la navigazione e favorire l’orientamento

31 Migliorare la navigazione e favorire l’orientamento
L’efficienza della comunicazione sul web è influenzata non soltanto dal livello di leggibilità del contenuto ma anche dalla facilità con la quale l’utente riesce ad interagire con il sistema. Nel seguito sono riportati alcuni criteri generali da tenere presenti per evitare all’utente difficoltà nella comprensione della funzionalità dei comandi nella navigazione.

32 Migliorare la navigazione e favorire l’orientamento
Coerenza: applicate costantemente gli stessi principi di base sull'organizzazione del documento ipertestuale ad ogni pagina che viene creata. La coerenza è un elemento chiave che facilita l'utente nella comprensione dello scopo e della struttura del sito. La continuità funzionale e grafica fra le varie componenti e i sottoparagrafi del sito fornisce all'utente un aiuto sostanziale nell'identificazione delle pagine Web e favorisce la prevedibilità dell'interfaccia e degli elementi presenti nella pagina.

33 Migliorare la navigazione e favorire l’orientamento
Fate in modo che l'utente possa apprendere velocemente e facilmente cosa aspettarsi dall'interfaccia. Cercate di andare incontro alle attese dell'utente. Per esempio non disegnare un oggetto simile ad un bottone se questo non si comporta nello stesso modo. Fate in modo che l'utente usi le capacità e le conoscenze che già possiede. Usate metafore familiari all'utente.

34 Migliorare la navigazione e favorire l’orientamento
navigabilità: la metafora del viaggio contribuisce a caratterizzare uno dei problemi piu' frequenti di fronte ai quali puo' trovarsi l'utente che è quello del disorientamento. Di seguito sono riportati alcuni suggerimenti per migliorare l'orientamento e facilitare la navigazione. Fornite all'utente facilitazioni per: identificare la posizione in cui si trova; ricostruire la strada che lo ha portato all'attuale posizione; distinguere opzioni diverse per muoversi da quella posizione.

35 Migliorare la navigazione e favorire l’orientamento
Fornite supporti multipli alla navigazione che consentano all'utente sia una navigazione libera che una ricerca mirata dell'informazione. Fornite facili scorciatoie di accesso ai percorsi che si ritiene l'utente segua piu' spesso. Usate una descrizione dell'informazione cui rimanda il link. Fornite facilitazioni alla navigazione sia rispetto alla "direzione" che alla "distanza".

36 Migliorare la navigazione e favorire l’orientamento
Direzione: Ricordate che spostarsi in avanti o indietro in un ipertesto non ha lo stesso valore. La navigazione avanti avviene quando l'utente cerca una nuova informazione muovendosi verso un nodo che non ha ancora esplorato, mentre la navigazione indietro avviene quando l'utente cerca di raggiungere un nodo che ha già esplorato precedentemente e che quindi già conosce.

37 Migliorare la navigazione e favorire l’orientamento
Distanza: rispetto alla distanza si deve distinguere tra "steps" e "jumps". Gli "steps" sono quelli che l'utente fa quando segue il collegamento che lo porta dal nodo nel quale si trova a quello immediatamente successivo. Nel fare un salto (jump) l'utente, invece, raggiunge un nodo che non è immediatamente collegato alla posizione o al nodo nel quale si trova. In questo caso è particolarmente importante assistere l'utente nella navigazione quando deve percorrere una certa distanza per tornare indietro ad un nodo che non è piu' immediatamente visibile.

38 Migliorare la navigazione e favorire l’orientamento
Usate layout di pagina coerenti. Minimizzate il numero di click neccessari al raggiungimento del contenuto informativo. Assicurarsi che gli utenti possano raggiungere l'informazione utile in non piu' di quattro click. assicuratevi che le pagine appaiano complete anche su un piccolo schermo e che non rimangano nascosti bottoni o link importanti.

39 Migliorare la navigazione e favorire l’orientamento
Fornite da ogni pagina links alla lista dei contenuti del sito, alla mappa del sito ed alla home page. Includete in ogni pagina bottoni per la navigazione sia in testa che in fondo al fine di minimizzare la necessità di scorrere la pagina su e giù con il cursore. usate titoli della pagina che possano essere bookmark significativi. Spiegate quali informazioni sono contenute nei link.

40 Migliorare la navigazione e favorire l’orientamento
Tempi di risposta: il limite perché l'utente abbia l'impressione che il sistema stia rispondendo istantaneamente è di circa un decimo di secondo. In questo caso no c'è bisogno di feed-back aggiuntivo alla visualizzazione del risultato. Tra un decimo di secondo e un secondo l'utente ha la percezione del ritardo e la sensazione di non avere più un controllo diretto sui dati ma entro il secondo il ritardo è ritenuto accettabile.

41 Migliorare la navigazione e favorire l’orientamento
Il limite di tempo massimo prima che l'utente distolga la sua attenzione è di 10 secondi. In caso di ritardi maggiori, passa ad altre occupazioni durante l'attesa e questo può influire negativamente sulla concentrazione durante la navigazione. Attenzione però anche agli eccessi opposti. Ad es. tempi di permanenza di un testo in una finestra a scorrimento troppo brevi possono risolversi nell'impossibilità da parte dell'utente di utilizzarli. Questo può indurre un senso di disagio altrettanto forte.

42 Tecnologie per il web

43 Tecnologie per il web Con l'espressione "tecnologie per il web" si indicano solitamente una pluralità di elementi (hardware e software) che concorrono alla realizzazione di applicazioni World Wide Web: L'hardware su cui risiede l'applicazione è il server il cui sistema operativo può essere MicrosoftWindows, Linux, Unix, OSXIl,... il server Web può essere Apache, Microsoft iis,... gli strumenti di sviluppo possono essere Macromedia Flash, Dreamweaver, Frontpage,…i linguaggi di scripting sono l’ASP il PhP il Perl il Javascript,...i data base relazionali per l'archiviazione dei dati possono essere My SQL, Microsoft SQL Server, Oracle,… ……………………………………………………………………...

44 Tecnologie per il web ……………………………………………………………………...
Riuscire a districarsi in questo complesso sistema di termini e di funzioni non è, in questa fase, né necessario né tanto meno utile. Gli aspetti che devono essere, invece, tenuti in forte considerazione in questo scenario tecnologico così complesso sono per così dire le conseguenze delle scelte tecnologiche e non le tecnologie vere e proprie. Possiamo, a tale scopo, individuare cinque punti principali:

45 Tecnologie per il web La trasportabilità: scegliere tra tutte le possibili soluzioni hardware e software quelle maggiormente "standard" ovvero quelle che possono essere facilmente trasportate su server e su sistemi operativi diversi tra loro, senza che questo implichi la riscrittura del codice. Una applicazione che rispetta gli standard e che utilizza tecnologie largamente diffuse sarà più facile da mantenere e più indipendente dal singolo programmatore o dalla singola azienda.

46 Tecnologie per il web La compatibilità: l'uso di tecnologie particolarmente sofisticate e poco diffuse (specialmente in ambito multimediale:audio e video) costringe l'utente a doversi dotare di strumenti di visualizzazione spesso difficili da reperire in rete oppure lo costringe a dover utilizzare sempre l'ultima versione di un browser quella "più aggiornata". Usiamo invece tecnologie che non complichino la vita all'utente e che siano compatibili con il maggior numero di browser, anche con le versioni meno recenti e aggiornate.

47 Tecnologie per il web Il Content Management: ovvero la gestione dei contenuti. Se non progettiamo un efficiente sistema di aggiornamento delle informazioni presenti sul Web, per quanto queste possano essere affiancate da effetti speciali o contenute in pagine altamente ergonomiche, il risultato sarà comunque "deludente". Un sito efficiente deve avere una base di dati quotidianamente aggiornata da una vera e propria redazione e l'utente deve poter sempre trovare notizie e servizi "aggiornati". Questo aspetto, da un punto di vista tecnologico si traduce nella presenza di un data base dal quale vengono generate in maniera "dinamica" le pagine Web. Modificando le informazioni sul data base, attraverso una semplice interfaccia, si modificano "automaticamente" anche le pagine del sito con un notevole risparmio di tempo e di risorse.

48 Tecnologie per il web La manutenzione: Qualunque sito, per quanto sia ben progettato, necessita di una manutenzione regolare. Prevedete, sempre, nei vostri progetti di comunicazione in Internet una attività di manutenzione sia ordinaria che straordinaria. La prima si riferisce a interventi di piccola entità ma che soprattutto nella fase successiva alla "pubblicazione" di un sito si rendono spesso necessari come ad esempio la correzione del codice di una pagina, la soluzione di un problema di funzionamento, l'aggiunta o la cancellazione di un bottone ecc. La manutenzione straordinaria invece si riferisce ad interventi meno frequenti e di maggiore complessità come ad esempio la creazione di una nuova sezione, l'attivazione di un nuovo servizio, l'aggiornamento della grafica del sito. Avendo previsto costi e procedure di manutenzione il vostro sito sarà sempre ben funzionante e voi potrete dormire "sonni tranquilli".

49 Rapporto costi/benefici

50 Rapporto costi/benefici
Quanto incide la progettazione orientata all'utente sui costi di realizzazione di un sito Internet? Secondo l'analisi condotta da George M. Donauhe in "Usability is good businness" il rapporto costi/benefici riferito all'ingegneria del software varia da 1/10 fino a 1/100. Ovvero per ogni euro speso nella ricerca sull'usabilità il produttore riceve un beneficio che varia da un minimo di 10 a un massimo di 100 euro. Questo rapporto così favorevole, come abbiamo più volte ricordato sino ad ora, è ampiamente giustificato da due importanti fattori:

51 Rapporto costi/benefici
dal punto di vista della programmazione e dello sviluppo del codice che sta alla base dell'applicazione Web, avanzare nel progetto attraverso l'uso di prototipi che vengono costantemente valutati e verificati si traduce in un notevole risparmio di tempo e quindi di risorse. E', infatti, molto più facile correggere un errore nella fase iniziale dello sviluppo che alla fine. Dover porre rimedio ad un inconveniente di cui ci si accorge solo al termine del progetto può voler dire, infatti, riscrivere grandi quantità di codice e quindi far "lievitare" i costi di produzione.

52 Rapporto costi/benefici
L'altro fattore importante è rappresentato dalla selezione che il mercato opera nei confronti dei "cattivi prodotti". La cosiddetta "fidelizzazione", ossia la "fedeltà" dell' utente ad un sito e la capacità di attrazione di quest'ultimo, è l'indicatore principale della sua competitività. Anche qualora non ci fosse un danno economico diretto (come ad esempio nei siti di commercio elettronico) la mancanza di usabilità di un sito può danneggiare l'immagine del proprietario.

53 Rapporto costi/benefici
Vediamo anche altri possibili vantaggi derivanti dall'utilizzo della progettazione orientata all'utente di un sito: Aumento dei visitatori: un utente soddisfatto della facilità d'uso di un sito e della possibilità di portare sempre a termine nel migliore dei modi la navigazione, sarà stimolato a "ritornare" su quelle pagine.

54 Rapporto costi/benefici
Contenimento dei costi: una buona "comunicazione" in rete diminuisce la necessità di assistenza e di supporto agli utenti con un risparmio del numero di persone e del tempo dedicato a questa attività che se erogata attraverso gli strumenti tradizionali (telefono, fax, front office ecc) avrebbe costi più alti. Nel caso in cui si svolgano anche attività di commercio elettronico il volume dei profitti sarà direttamente proporzionale alla facilità di acquisto, alla facilità di pagamento, alla facilità di gestione delle rese e delle sostituzioni. .

55 Rapporto costi/benefici
Rafforzamento del Marchio: infine, come ultima conseguenza, una piacevole esperienza "on line" si tradurrà in un immediato rafforzamento dell'immagine dell'istituzione o dell'azienda "visitata".