un modello di qualità per i siti web

UN MODELLO DI QUALITA’ PER I SITI WEB

Roberto Polillo

Ultimo aggiornamento: 2004

Indice

• Introduzione al modello

• Analisi delle caratteristiche del modello

Introduzione al modello

Che cos’è un modello di qualità

Insieme di caratteristiche, sottocaratteristiche e rispettive relazioni, che fornisce la base per specificare requisiti di qualità e valutare la qualità di un prodotto o servizio

Esempio: un modello di qualità per alberghi

Caratteristiche Sottocaratteristiche

1 Camere comfort, dimensioni, eleganza, pulizia

2 Spazi comuni comfort, dimensioni, eleganza, pulizia

3 Servizio reception, servizi in camera, cortesia del personale

4 Ristoranti qualità del cibo, ambiente, servizio, varietà del cibo

5 Piscina comfort, dimensioni, ambiente, attrezzature, pulizia

6 Spiaggia vicinanza, privata/pubblica, attrezzature, paesaggio

7 Dintorni possibilità di escursioni, vicinanza a un centro abitato

8 Impianti sportivi tennis, golf, fitness, altri

9 Bambini nursery, zone riservate

NB: Un modello di qualità è sempre, in una certa misura, arbitrario

Un modello di qualità per i siti web

• Una selezione delle caratteristiche che fanno di un sito web un “buon” sito

• Scopo:• valutare un sito • orientarci nella sua realizzazione

• Vogliamo individuare poche caratteristiche, per poterci concentrare sugli aspetti più importanti

La qualità di un sito

Non può essere una grandezza assoluta, ma deve essere relativa a:- lo scopo del sito- la tipologia di utenti a cui si indirizza- il suo contesto d’uso

Noi useremo un modello basato su 7 caratte-ristiche, derivati da un semplice modello di produzione e gestione di un sito

Produzione e gestione di un sito webS

trat

egia

e

fatt

ibili

tà

Management,Consulenti

1

Vis

ual

des

ign

Visual designer

3

Ese

rciz

io

del

sit

o

Web master

6

Ges

tio

ne

dei

ser

ver

Web farm

7S

vilu

pp

o

del

so

ftw

are

Systemintegrator

4 5Contenteditor

Ges

tio

ne

dei

co

nte

nu

ti

Web designer

2

Web

des

ign

&

use

r ex

per

ien

ce

Co

nn

etti

vit

àin

tern

et

Internet Service Provider

8

Build Check

Design

Str

ateg

ia

e fa

ttib

ilità

Management,Consulenti

1

Vis

ual

des

ign

Web designer

2

Svi

lup

po

del

so

ftw

are

Systemintegrator

3

Ese

rciz

io

del

sit

o

Web master

5

Ges

tio

ne

dei

ser

ver

Web farm

6

Co

nn

etti

vit

àin

tern

et

Internet Service Provider

7Contenteditor

4G

esti

on

e d

ei c

on

ten

uti

Web

des

ign

&

use

r ex

per

ien

ce

8Visual

designer

Comun

icaz

ione

Usabilità

Funz

iona

lità

Conte

nuto

Accessibilità

Obi

ettiv

i

Archi

tettu

ra

Ges

tione

Le caratteristiche di qualità del modello

Produzione e gestione di un sito web

Str

ate

gia

&

co

nce

pt

Consulenti

1G

rap

hic

al d

esig

n&

use

r e

xpe

rie

nce

Web agency

2

Svi

lup

po

de

l sito

Systemintegrator

3

Ese

rciz

io

del

sito

Application manager

5

Se

rve

r ho

usi

ng

Web farm

6

Co

nne

ttivi

tà

ISP

7

Contentmanager

4

Ge

stio

ne

dei

co

nte

nu

ti

La qualità complessiva di un sito è il risultato del lavoro armonico e integratodi tutti questi attori

La robustezza di una catena è pari a quella del suo anello più

debole

Una visione globale

0

0,5

1

1,5

2

2,5

3

3,5

4

Usabilità

Architettura

Comunicazione

FunzionalitàContenuto

Gestione

Accessibilità

0

0,5

1

1,5

2

2,5

3

3,5

4

Usabilità

Architettura

Comunicazione


Gestione

Accessibilità

Confronto di due siti

Analisi delle caratteristiche del modello

ContenutoIl contenuto informativo è corretto, e adeguato

agli scopi del sito?

ComunicazioneIl sito raggiunge i suoi

obiettivi di comunicazione?

AccessibilitàIl sito è di facile

accesso per tutti?

FunzionalitàLe funzioni del sito sono

adeguate e corrette?

GestioneL’operatività del sito

è ben gestita ?

ArchitetturaLa struttura e la navigazione

del sito sono adeguate?

UsabilitàIl sito è facile

da usare?

Il nostro modello di qualità per i siti web

1. Architettura dell’informazione

Architettura dell’informazione

• Struttura: La struttura del sito è adeguata?• Mappa del sito: La mappa del sito esiste e ne

rappresenta con chiarezza la struttura?• Navigazione: La navigazione del sito è adeguata?

La struttura e la navigazione sono adeguate?

Struttura del sitoE’ molto utile rappresentare la struttura del sito con un diagramma ad albero, e quindi valutarne la adeguatezza

B C D EA

HOME

D1 D2 D3A2A1

A2.2 A2.3A2.1

1° livello

2° livello

3° livello

Un esempio

Prodotti Puntivendita

Mondo Fidaty

Lavorare con noi

Azienda

HOME

Catalogo Fidaty Vantaggi

Le carte Fidaty

Valori eprincipi

Storia

Il cliente I fornitoriLe risorse

umane

1° livello

2° livello

3° livelloFidaty

oro

Prodotti Puntivendita

Mondo Fidaty

Lavorare con noi

Azienda

HOME

Parlare con noi

Spesa on line

Accesso utenti

registrati

Saperscegliere

Areautenti

Areastampa

Intratte-nimento

Mappa Ricerca Info English

“scorciatoie”varie

servizi “standard”

Analizzando meglio il sito, si vede però che la mappa del sito non

ne rappresenta completamente la struttura, che è più complessa:

Due mappe ben fatte

Ma questa si sviluppa su più schermate: è

scomoda

B C D EA

HOME

D1 D2 D3A2A1

A2.2 A2.3A2.1navigazione orizzontale

navigazione trasversale

navigazione verticale

Vari tipi di navigazione

Una struttura di navigazione tipica

A B C D E

D1

D2

D3

pagina D1

contenuti della pagina

navigazione globale

navigazione locale

B C

D

EA

HOME

D1 D2 D3A2A1

A2.2 A2.3A2.1

D

pubblicità

pubblicità

contenuti

Esempio

Esempio

Navigazione globale

Nav

igaz

ione

lo

c ale Navigazione

contestuale

Dove sono?

Cos

a c’

èvi

cino

? Cosa è relativoa cosa?

Orientamento

Dove posso andare?

Dov

e p

osso

and

a re? Dove posso

andare?

Navigazione

<contenuti Linea Cash>

Una variante: navigazione locale in orizzontale

Strutturalmente, è la stessa cosa

Un’altra variante: navigazione locale in menu a tendina

A B C D E

Un’altra variante: navigazione globale a tab (metafora dello schedario)

A B C D E

D1 D2 D3

pagina D1

A B C D E

pagina D1

D1

D2

D3

Struttura a schedario con navigazione locale

inserzione pubblicitaria

<contenuti della pagina>

<contenuti: Idee regalo fino a 10.99 euro>

Navigazione a tre livelli

<contenuti: Idee regalo fino a 10.99 euro>

Home Natale Idee regalo

Casa funzionale

Tempo libero

Soluzioni Tecnologiche

Cura della persona

Fino a 10,99 euro

Fino a 25,99 euro

Fino a 51,99 euro

Casa funzionale

Tempo libero

Soluzioni Tecnologiche

Cura della persona

navi

gazi

one

loca

le

navi

gazi

one

loca

le

navigazione globale

navi

gazi

one

tr

asve

rsal

e

Un difetto tipico: duplicazione degli accessi a una stessa pagina

Orientamento: breadcrumbs

A B C

Indietro

1 2

Fluidità della navigazione

Evitare le redirezioni di link, che impediscono al tasto back di funzionare come l’utente si attende

2. Comunicazione

Comunicazione

• Home page: La home page comunica chiaramente gli obiettivi del sito?

• Brand image: Il sito è coerente con la brand image?• Grafica: La grafica del sito è adeguata?

Il sito raggiunge i suoi obiettivi di comunicazione?

Home page: qual è lo scopo di questo sito?

E di questo ?

Home page: i “payoff” (o “tag-line”)

• Sono frasi che caratterizzano sinteticamente lo scopo del sito

• Sono quasi sempre accostate al logo• Spesso sono accompagnate da una descrizione più

estesa dello scopo del sito

titolo slogan frase esplicativa

L’uso dei rollover

Comunicazione




Che cos’è un “brand”?

“Una miscela di attributi tangibili e intangibili, simbolizzata in un marchio, che, se gestita correttamente, crea influenza e genera valore”

(da: R.Clifton, E.Maughan (a cura di), “The future of brands”,Interbrand, MacMillan, 2000)

I brand più “forti”

1. Coca Cola 14. Marlboro2. Microsoft 15. BMW3. Gillette 16. Heineken4. Disney 17. VW5. Nescafé 18. Pepsi-Cola6. Colgate 19. Ford7. McDonald’s 20. Chanel8. McDonald’s 21. General Electric9. Pampers 22. Kodak10. IBM 23. Amex11. Sony 24. Nike12. Heinz 25. Bacardi

13. Intel 26. Smirnoff

(Fonte: Interbrand)

Verificare che la impostazione del sito sia coerente con i “tratti distintivi del

brand”

www.cocacola.com nel 2001

http://www.cocacola.com/

CocaCola tedesca nel 2003

CocaCola USA nel 2003

www.cocacola.com nel 2003

http://www.cocacola.com/

Comunicazione




Comunicazione: Grafica

• Layout: Il layout delle pagine è adeguato ai vari formati video?

• Gestalt: Il layout delle pagine facilita la comprensione dei contenuti?

• Colore: Il colore è usato in modo adeguato?• Tipografia: I caratteri usati rendono il testo ben

leggibile?• Attrattiva: La grafica è attraente?

La grafica del sito è adeguata?

800x600

1024x768

1680x1050

800x600

1680x1050

800x600

1024x768

1680x1050

Gestalt

Colore

Tipografia

Attrattiva

Una visione globale

0

0,5

1

1,5

2

2,5

3

3,5

4

Usabilità

Architettura

Comunicazione


Gestione

Accessibilità

3. Funzionalità

Funzionalità

• Adeguatezza: Le funzioni del sito sono adeguate?• Correttezza: Le funzioni del sito sono corrette?

Le funzioni del sito sono adeguate e corrette?

Funzionalità: Adeguatezza

• Transazioni: Le funzioni per effettuare le transazioni sono adeguate?

• Gestione degli errori: Il trattamento degli errori dell’utente è adeguato?

• Ricerca: Gli strumenti di ricerca delle informazioni sono adeguati?

• Comunicazione: E’ possibile comunicare in modo adeguato con chi gestisce il sito?

Le funzioni del sito sono adeguate?

Funzionalità: Correttezza

Le funzioni del sito sono corrette?

Una visione globale

0

0,5

1

1,5

2

2,5

3

3,5

4

Usabilità

Architettura

Comunicazione


Gestione

Accessibilità

4. Contenuto

Contenuto

• Categorizzazione/labelling: L’informazione è classificata in modo adeguato?

• Stile: Lo stile del testo è adeguato al web?• Informazione: L’informazione è adeguata,

pertinente, affidabile e aggiornata?• Localizzazione: Il sito è correttamente localizzato?

Il contenuto informativo è corretto, e adeguato agli scopi del sito?

triangoli stelle

cerchi bianchi

neri

grigi

www.msn.it www.virgilio.it Amori e incontri 5minutidiANSA Notizie AnnunciAste online BroadbandBusiness BusinessCalcio CasaCasa Cinema e TVCucina CommunityDonne Donne e bellezzaFamiglia GiochiGQ JuniorIntrattenimento LavoroLavoro MobileMoney MotoriMotori MusicaMusica Salute e benessereShopping Sapere e libriSport ShoppingTecnologia SocialeTelefonia SoldiViaggi SportVideogiochi Tecnologia

ViaggiEsplora Virgilio

Contenuto





SINTESI

DETTAGLIO

MATERIALEAGGIUNTIVO

1

2

3

Contenuto





Una visione globale

0

0,5

1

1,5

2

2,5

3

3,5

4

Usabilità

Architettura

Comunicazione


Gestione

Accessibilità

5. Gestione

Gestione

• Disponibilità: Il sito è sempre attivo e disponibile agli utenti?

• Monitoraggio: L’accesso al sito è adeguatamente monitorato?

• Aggiornamento: Il sito viene costantemente aggiornato e migliorato?

• Relazioni con gli utenti: Le relazioni con gli utenti sono adeguatamente presidiate?

L’operatività del sito è ben gestita?

Link spezzati

Uno studio sperimentale ha rilevato che il 5-8%

dei link seguiti durante la navigazione erano

interrotti

(Xerox, 1997)

Missing links

La presenza di pagine “in costruzione”, anche se correttamente segnalate, comunica all’utente una impressione di provvisorietà e di scarsa profes-sionalità, e va assolutamente evitata.

Gestione

• Disponibilità: Il sito è sempre attivo e disponibile agli utenti?

• Monitoraggio: L’accesso al sito è adeguatamente monitorato?

• Aggiornamento: Il sito viene costantemente aggiornato e migliorato?

• Relazioni con gli utenti: Le relazioni con gli utenti sono adeguatamente presidiate?

L’operatività del sito è ben gestita?

Una visione globale

0

0,5

1

1,5

2

2,5

3

3,5

4

Usabilità

Architettura

Comunicazione


Gestione

Accessibilità

6. Accessibilità

Accessibilità

• Tempi di accesso: I tempi di accesso sono adeguati?

• Reperibilità: Il sito è facile da trovare?• Indipendenza dal browser: Il sito è accessibile con

ogni browser?• Accessibilità per i disabili: Il sito è utilizzabile da

utenti disabili?

Il sito è di facile accesso per tutti?

User

Site Access Provider

User Access Provider

Web Server

Internet

Fattori che influenzano le prestazioni di accesso

Banda verso UAP

Caratteristiche dell’UAP

Itinerario sulla rete

Caratteristiche del SAP

Banda verso SAP

Dimensionamentodel server

“peso” delle pagine web del sito

Accessibilità




utenti disabili?


bo

l

bo

ok o

nli

ne

ve

nd

ita

lib

ri

lib

ri o

nli

ne

rom

an

zi

ita

lia

ni

Ku

nd

era

Altavista (www.altavista.com) 3 78* ---- ---- ---- ----Yahoo (www.yahoo.com) 1 77* ---- ---- ---- ----HotBot (www.hotbot.com) 2 55* ---- ---- ---- ----Excite (www.excite.com) 3 88* ---- ---- ---- ----

Google (www.google.it) 1 11* 1 ---- ---- ----Lycos (www.lycos.it) 1 33* *1* ---- ---- ----Arianna (www.arianna.it) 1 48* ---- ---- ---- ----Virgilio (www.virgilio.it) 1 32* ---- ---- ---- ----M

oto

ri d

i ri

cerc

a

Parole Chiave

Motori di ricerca: esempio

Accessibilità




utenti disabili?


Disabilità: alcuni numeri

• Almeno il 10% della popolazione mondiale è disabile.

• Nell’Unione Europea, almeno 37 milioni di cittadini sono disabili, e il 70% ha un’età superiore ai 70 anni.

• In Italia, i disabili sono oltre 2.800.000, pari a circa il 5% della popolazione. Di questi, il 75% ha almeno 65 anni (Fonte: Istat).

La legge Stanca (dicembre 2003)

• Tutela e garantisce il diritto di accesso ai servizi informatici e telematici della pubblica amministrazione e ai servizi di pubblica utilità da parte delle persone disabili, in ottemperanza al principio di uguaglianza stabilito dall’articolo 3 della Costituzione Italiana.

• In particolare, stabilisce che le pubbliche amministrazioni non possano stipulare contratti per la realizzazione e la modifica di siti Internet quando non è previsto che essi rispettino opportuni requisiti d’accessibilità

• I requisiti sono stabiliti con decreto del Ministro per l’Innovazione e le Tecnologie, nell’osservanza delle raccomandazioni dell’Unione Europea.

WAI

• Il World Wide Web Consortium (W3C) ha promosso la Web Accessibility Iniziative (WAI).

• Scopo: individuare e suggerire criteri per la realizzazione dei siti web, tali da permetterne l’accesso anche ad utilizzatori disabili.

Web Content Accessibility Guidelines

• Linee guida emesse dal WAI per la realizzazione di siti accessibili.

• Il riferimento principale è il documento WCAG 1.0, adottato come raccomandazione del W3C (1999), che elenca 14 linee guida.

• WCAG 2.0 è in corso di definizione.

SINTESI DELLE LINEE GUIDA PER L’ACCESSIBILITà DEI WEB DEL W3C (VERSIONE 1.0)

1. Fornire alternative equivalenti ai contenuti uditivi e visivi: fornire contenuti che, quando presentati all’utente,comunichino essenzialmente la stessa funzione o scopo dei contenuti uditivi e visivi.

2. Non fare affidamento solo sul colore: assicurarsi che testo e grafica siano comprensibili anche se visti senza colore.

3. Usare marcatori e fogli di stile, e farlo in modo appropriato: marcare i documenti con i corretti elementi strutturali. Controllare la presentazione con fogli di stile piuttosto che con elementi di presentazione e attributi

4. Chiarire l’uso dei linguaggi naturali: usare marcatori che facilitino la pronuncia o l’interpretazione di testi in linguestraniere o con abbreviazioni.

5. Creare tabelle che si trasformino bene: assicurarsi che le tabelle abbiano i marcatori necessari affinché sianoTrasformate correttamente dai browser accessibili e da altri programmi utilizzati dall’utente.

6. Assicurarsi che le pagine che usano nuove tecnologie si trasformino bene: assicurarsi che le pagine sianoaccessibili anche quando le nuove tecnologie non siano supportate o vengano disinserite.

7. Assicurarsi che l’utente abbia il controllo dei cambiamenti di contenuto nel tempo: assicurarsi che gli oggetti o lepagine che si muovono, che lampeggiano, che scrollano o che si auto-aggiornano possano essere fermate.

8. Assicurarsi che le interfacce utente inserite supportino direttamente l’accessibilità: assicurarsi che eventuali oggetti inseriti nel sito che abbiano un’interfaccia diretta con l’utente seguano anch’essi i principi dell’accessibilità.

9. Garantire l’indipendenza dai dispositivi: usare caratteristiche che permettano l’attivazione degli elementi della pagina attraverso una varietà di dispositivi di input.

10. Usare soluzioni provvisorie, in modo tale che le tecnologie che assistono i disabili o i browser meno recenti funzioninocorrettamente, nell’attesa di future tecnologie web che incorporino direttamente le caratteristiche necessarie.

11. Usare tecnologie e linee guida del W3C, in modo conforme alle specifiche, e seguire le linee guida per l’accessibilità.Quando non è possibile usare tecnologie W3C, fornire versioni alternative del contenuto che siano accessibili

12. Fornire informazioni di contesto e d’orientamento: fornire informazioni di contesto e di orientamento per aiutare gliutenti nella comprensione di pagine o elementi complessi.

13. Fornire chiari meccanismi di navigazione: fornire meccanismi di navigazione chiari e consistenti (informazioni di orientamento, barre di navigazione, mappe del sito, ecc.) per aumentare la probabilità che l’utente trovi ciò che cerca nel sito.

14. Assicurarsi che i documenti siano chiari e semplici, in modo che essi possano essere più facilmente compresi.

I livelli di conformità del WAI

Per ciascuna linea guida, il WAI definisce delle regole più dettagliate da applicare per soddisfarla (“checkpoint”).

I checkpoint (65 in tutto) sono classificati in tre livelli di priorità:- Priorità 1: chi realizza il sito deve soddisfare questi checkpoint- Priorità 2: chi realizza il sito dovrebbe soddisfare questi checkpoint.- Priorità 3: chi realizza il sito potrebbe soddisfare questi checkpoint.

Livello A: tutti i checkpoint di priorità 1 sono soddisfatti

Livello AA: tutti i checkpoint di priorità 1 e 2 sono soddisfatti

Livello AAA: tutti i checkpoint di priorità 1, 2 e 3 sono soddisfatti

I livelli di conformità del WAI

L’idea di base

• Progettare le pagine web in modo che siano comprensibili nonostante la disabilità e, ove ciò non sia possibile, di trasformarle in modo che esse diventino comprensibili.

• Può essere necessario usare opportune tecnologie assistive: lettori di schermo, tastiere braille, browser vocali, ecc.

Una visione globale

0

0,5

1

1,5

2

2,5

3

3,5

4

Usabilità

Architettura

Comunicazione


Gestione

Accessibilità

7. Usabilità

Usabilità

• Efficacia: L’utente raggiunge il risultato voluto in modo accurato e completo?

• Efficienza: Lo sforzo richiesto all’utente per ottenere il risultato voluto è accettabile?

• Soddisfazione dell’utente: Il sito è confortevole e bene accetto all’utente?

Il sito è facile da usare?

un modello di qualità per i siti web

Education