Presentazione del modello di qualità per i siti Web 1.0, in tre lezioni, descritto nel libro "Il check-up dei siti Web" di Roberto Polillo (ed.Apogeo, 2004). Liberamente utilizzabili a scopo didattico. Attenzione: la presentazione non è stata più aggiornata dal 2004.

1. UN MODELLO DI QUALITA ’ PER I SITI WEB Roberto Polillo Ultimo aggiornamento: 2004

3. Introduzione al modello

5. Esempio: un modello di qualità per alberghi NB: Un modello di qualità è sempre, in una certa misura, arbitrario 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

8. Produzione e gestione di un sito web Strategia e fattibilità Management, Consulenti 1 Visual design Visual designer 3 Esercizio del sito Web master 6 Gestione dei server Web farm 7 Sviluppo del software System integrator 4 5 Content editor Gestione dei contenuti Web designer 2 Web design & user experience Connettività internet Internet Service Provider 8

9. Build Check Design

10. Le caratteristiche di qualità del modello Strategia e fattibilità Management, Consulenti 1 Visual design Web designer 2 Sviluppo del software System integrator 3 Esercizio del sito Web master 5 Gestione dei server Web farm 6 Connettività internet Internet Service Provider 7 Content editor 4 Gestione dei contenuti Web design & user experience 8 Visual designer Comunicazione Usabilità Funzionalità Contenuto Obiettivi Architettura Accessibilità Gestione

11. Produzione e gestione di un sito web 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 Strategia & concept Consulenti 1 Graphical design & user experience Web agency 2 Sviluppo del sito System integrator 3 Esercizio del sito Application manager 5 Server housing Web farm 6 Connettività ISP 7 Content manager 4 Gestione dei contenuti

12. Una visione globale Usabilità Architettura Comunicazione Funzionalità Contenuto Gestione Accessibilità

13. Confronto di due siti 0 0,5 1 1,5 2 2,5 3 3,5 4 Usabilità Architettura Comunicazione Funzionalità Contenuto Gestione Accessibilità

14. Analisi delle caratteristiche del modello

15. Comunicazione Il sito raggiunge i suoi obiettivi di comunicazione? Accessibilità Il sito è di facile accesso per tutti? Funzionalità Le funzioni del sito sono adeguate e corrette? Gestione L’operatività del sito è ben gestita ? Il nostro modello di qualità per i siti web Contenuto Il contenuto informativo è corretto, e adeguato agli scopi del sito? Architettura La struttura e la navigazione del sito sono adeguate? Usabilità Il sito è facile da usare?

16. 1. Architettura dell ’ informazione

19. Struttura del sito E’ molto utile rappresentare la struttura del sito con un diagramma ad albero, e quindi valutarne la adeguatezza B C D E A HOME D1 D2 D3 A2 A1 A2.2 A2.3 A2.1 1° livello 2° livello 3° livello

20. Un esempio

22. Prodotti Punti vendita Mondo Fidaty Lavorare con noi Azienda HOME Catalogo Fidaty Vantaggi Le carte Fidaty Valori e principi Storia Il cliente I fornitori Le risorse umane 1° livello 2° livello 3° livello Fidaty oro

23. Analizzando meglio il sito, si vede però che la mappa del sito non ne rappresenta completamente la struttura, che è più complessa: Prodotti Punti vendita Mondo Fidaty Lavorare con noi Azienda HOME Parlare con noi Spesa on line Accesso utenti registrati Saper scegliere Area utenti Area stampa Intratte- nimento Mappa Ricerca Info English “ scorciatoie” varie servizi “standard”

29. Due mappe ben fatte Ma questa si sviluppa su più schermate: è scomoda

31. Vari tipi di navigazione B C D E A HOME D1 D2 D3 A2 A1 A2.2 A2.3 A2.1 navigazione orizzontale navigazione trasversale navigazione verticale

32. 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 E A HOME D1 D2 D3 A2 A1 A2.2 A2.3 A2.1 D

33. Esempio pubblicità pubblicità contenuti

34. Esempio

35. Navigazione globale Navigazione locale Navigazione contestuale Dove sono? Cosa c’è vicino? Cosa è relativo a cosa? Orientamento Dove posso andare? Dove posso andare? Dove posso andare? Navigazione

36. Una variante: navigazione locale in orizzontale Strutturalmente, è la stessa cosa <contenuti Linea Cash>

37. Un’altra variante: navigazione locale in menu a tendina

38. Un’altra variante: navigazione globale a tab (metafora dello schedario) A B C D E

40. Struttura a schedario con navigazione locale A B C D E D1 D2 D3 pagina D1 A B C D E pagina D1 D1 D2 D3

41. inserzione pubblicitaria <contenuti della pagina>

42. <contenuti: Idee regalo fino a 10.99 euro>

43. Navigazione a tre livelli

44. <contenuti: Idee regalo fino a 10.99 euro>

45. 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 navigazione locale navigazione locale navigazione globale navigazione trasversale

46. Un difetto tipico: duplicazione degli accessi a una stessa pagina

47. Orientamento: breadcrumbs

48. Fluidità della navigazione Evitare le redirezioni di link, che impediscono al tasto back di funzionare come l’utente si attende A B C Indietro 1 2

49. 2. Comunicazione

52. Home page: qual è lo scopo di questo sito?

53. E di questo ?

56. L’uso dei rollover

60. Verificare che la impostazione del sito sia coerente con i “tratti distintivi del brand”

62. www.cocacola.com nel 2001

63. CocaCola tedesca nel 2003

64. CocaCola USA nel 2003

65. www.cocacola.com nel 2003

68. 800x600 1024x768 1680x1050

70. 800x600 1024x768 1680x1050

71. 800x600 1680x1050

72. 800x600 1024x768 1680x1050

76. Gestalt

77. Gestalt

78. Colore

79. Colore

80. Colore

81. Colore

82. Colore

83. Colore

86. Tipografia

87. Tipografia

88. Attrattiva

89. Una visione globale Usabilità Architettura Comunicazione Funzionalità Contenuto Gestione Accessibilità

90. 3. Funzionalità

103. Funzionalità: Correttezza Le funzioni del sito sono corrette?

104. Una visione globale Usabilità Architettura Comunicazione Funzionalità Contenuto Gestione Accessibilità

105. 4. Contenuto

108. triangoli stelle cerchi bianchi neri grigi

109. www.msn.it www.virgilio.it Amori e incontri 5minutidi ANSA Notizie Annunci Aste online Broadband Business Business Calcio Casa Casa Cinema e TV Cucina Community Donne Donne e bellezza Famiglia Giochi GQ Junior Intrattenimento Lavoro Lavoro Mobile Money Motori Motori Musica Musica Salute e benessere Shopping Sapere e libri Sport Shopping Tecnologia Sociale Telefonia Soldi Viaggi Sport Videogiochi Tecnologia Viaggi Esplora Virgilio

115. SINTESI DETTAGLIO MATERIALE AGGIUNTIVO

117. 1 2 3

120. a) b)

123. Una visione globale Usabilità Architettura Comunicazione Funzionalità Contenuto Gestione Accessibilità

124. 5. Gestione

133. 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.

136. Una visione globale Usabilità Architettura Comunicazione Funzionalità Contenuto Gestione Accessibilità

137. 6. Accessibilità

140. Fattori che influenzano le prestazioni di accesso Banda verso UAP Caratteristiche dell ’UAP Itinerario sulla rete Caratteristiche del SAP Banda verso SAP Dimensionamento del server “ peso” delle pagine web del sito User Site Access Provider User Access Provider Web Server Internet

144. Motori di ricerca: esempio

154. 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 lingue straniere o con abbreviazioni. 5. Creare tabelle che si trasformino bene : assicurarsi che le tabelle abbiano i marcatori necessari affinché siano Trasformate 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 siano accessibili 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 le pagine 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 funzionino correttamente, 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 gli utenti 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.

156. I livelli di conformità del WAI 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

160. Una visione globale Usabilità Architettura Comunicazione Funzionalità Contenuto Gestione Accessibilità

161. 7. Usabilità