Progettazione di un sito

1. Progettazione di un sito Corso IFTSInformatica, Modulo 3 Progettazione pagine web statiche (50 ore)

2. Credits • Prof. Roberto Polillo • Università degli Studi di Milano Bicocca • Prof. Marina Ribaudo • Dipartimento di Informatica e Scienze dell'Informazione, Università degli Studi di Genova • Prof. Fabio Vitali • Università degli Studi di Bologna C. Braghin - Web Usability

3. Il ciclo di vita del software: visione statica Analisi dei requisiti Modello a cascata Progettazione Sviluppo Test Concettualmente sbagliato: nessun artefatto di successo può nascere così Integrazione Manutenzione C. Braghin - Web Usability

4. Sviluppo per prototipi successivi Design Prototype Test Il ciclo di vita del del software: visione dinamica Concettualmente corretto C. Braghin - Web Usability

5. Define goals • Quali obbiettivi • Quali contenuti • Quali utenti • Quali compiti • Quale contesto • Concept grafico Design Prototype Test Progettazione di un sito C. Braghin - Web Usability

6. Define goals • Struttura del sito • Grafica • Scenari utente • Interazioni Design Prototype Test Progettazione di un sito C. Braghin - Web Usability

7. Specifica ed Analisi dei Requisiti

8. Progettazione centrata sull’utente(User Centered Design, UCD) Mettere l’utenteal centrodel processo di progettazione C. Braghin - Web Usability

9. Progettazione centrata sull’utente Le domande a cui rispondere: • Quale utente? • Quali sono i compiti che deve svolgere? • Qual è il contesto d’uso? C. Braghin - Web Usability

10. Quale utente? • A quali categorie di utenti è destinato il prodotto che dobbiamo progettare ? • Di queste categorie, quali sono quelle prioritarie e quali quelle secondarie? • Come possiamo definire con precisione ciascuna categoria di utenti, in rapporto al prodotto che dobbiamo progettare? (sesso, età, cultura, esperienza, abilità/disabilità, interessi, …) C. Braghin - Web Usability

11. Tipo di utente Efficienza Efficacia Soddisfazione La usabilità di un prodotto è relativa al tipo di utente Esempio: valutazioni espresse da 10 utenti di diversa esperienza relativamente a efficienza, efficacia e soddisfazione nell’uso del sito web www.dvd.it (0: pessimo, 5:ottimo) C. Braghin - Web Usability

12. Quali compiti? • Quali sono i compiti che le diverse categorie di utenti dovranno svolgere con il prodotto? • Quali sono quelli principali e quali quelli accessori? • Quali metriche di efficacia e di efficienza possiamo introdurre in rapporto a questi compiti? C. Braghin - Web Usability

13. Quale contesto d’uso? • In quali diversi contesti le varie categorie di utenti dovranno svolgere i diversi compiti individuati? • Quali contesti sono prevalenti, e quali occasionali, in rapporto ai diversi compiti? • Come possiamo caratterizzare con precisione i diversi contesti? C. Braghin - Web Usability

14. Un corollario importante Non è possibile, se non nei casi più semplici, specificare completamente le funzioni di un sistema complesso prima della sua realizzazione: il sistema cambierà i comportamenti dell’utente, e questi richiederanno modifiche al sistema ! C. Braghin - Web Usability

15. Progettazione dell’architettura dell’informazione e dell’interfaccia grafica

16. Progettazione (1) • Si crea un modello (blueprint) dell’architettura dell’informazione, uno schema in cui chiarire il modello concettuale del sistema. About the organization Sotto-siti risulutati prodotti Purchase products Pagina principale Search and browse Naviga per autore Interfaccia di ricerca feedback Naviga per argomento Naviga per titolo news C. Braghin - Web Usability

17. Branding + servizi stabili (B) Task (T) Contesto ( C ) Utente (U) Multifunzione (MF) Report ( R ) Progettazione (2) • Si crea un wireframe, prototipo della pagina. C. Braghin - Web Usability

18. Progettazione (3) • Si descrive ogni area, il suo funzionamento e i suoi stati possibili. Ad esempio progettiamo l’area utente di un sito. • ESEMPIO: • Area utente: • Contiene tutte le informazioni necessarie per identificare l’utente al sistema o viceversa • Permette all’utente di vedere la situazione attuale (abbonamenti, messaggi etc). • Ha due aspetti completamente diversi a seconda che l’utente abbia già fatto login o meno. • Nel primo caso, dunque, il sistema proporrà tutti i meccanismi per permettere all’utente di identificarsi, come maschera di login, meccanismo per accedere ai dati dimenticati, ecc. • Nel secondo caso invece l’area conterrà informazioni rispetto alla modifica del profilo e dei dati personali (inclusa la password), e alla privacy. C. Braghin - Web Usability

19. Progettazione (4) • Si descrive graficamente (interfaccia) il funzionamento C. Braghin - Web Usability

20. Esempio: Struttura del sito C. Braghin - Web Usability

21. Esempio: Interfaccia Home page C. Braghin - Web Usability

22. Esempio: Interfaccia (secondo livello) C. Braghin - Web Usability

23. Grafica: esempio (secondo livello) C. Braghin - Web Usability

24. Esempio: Interfaccia (terzo livello) C. Braghin - Web Usability

25. Esempio: Interfaccia (artisti e dischi) C. Braghin - Web Usability

26. Esempio: Scenari utente C. Braghin - Web Usability

27. Sviluppo

28. Define goals • LO-FI prototyping • HI-FI prototyping Design Prototype Test Progettazione di un sito C. Braghin - Web Usability

29. Fedeltà nei prototipi - Alta fedeltà (HI-FI): il prototipo “assomiglia” in tutti gli aspetti al prodotto finale - Bassa fedeltà (LO-FI): il prototipo “assomiglia” alla lontana al prodotto finale, con molti dettagli mancanti (es.: paper prototyping) C. Braghin - Web Usability

30. Uso di prototyping tools per il web: un’indagine C. Braghin - Web Usability http://guuui.com/issues/01_03_02.asp (settembre 2002)

31. Che cos’è un prototipo? Un modello approssimato o parziale del sistema che vogliamo sviluppare, realizzato allo scopo di valutarne le caratteristiche Ci permette di condurre dei test prima di avere il prodotto finale C. Braghin - Web Usability

32. Perchè creare prototipi di un sito web? • Per avere un feedback anticipato da parte degli utenti, per correggere il design prima di scrivere il codice • Per sperimentare design alternativi • … rapidamente e a costi contenuti C. Braghin - Web Usability

33. Paper prototyping Il sito viene prototipato sulla carta, e il suo funzionamento viene simulato a mano, per condurre rapidamente test di usabilità Esempi: - user testing della home page - user testing della struttura del sito - user testing di funzioni specifiche C. Braghin - Web Usability

34. Esempio: usability enquiry di una home page Realizzazione della home page di Sun, (Jakob Nielsen, 1995) C. Braghin - Web Usability

35. A C. Braghin - Web Usability

36. C. Braghin - Web Usability

37. 8 anni dopo…(aprile 2003) C. Braghin - Web Usability

38. FACILITATORE “COMPUTER” UTENTE-CAVIA Usability test & paper simulation Alcuni scenari d’uso vengono simulati manualmente, alla presenza di utenti-cavia… C. Braghin - Web Usability

39. Schema generale del sito Singole pagine su cartoncino Paper simulation: materiali Componenti dell’interfaccia (menu, forms, messaggi di errore,…) su cartoncino C. Braghin - Web Usability

40. Vantaggi e svantaggi • Vantaggi • non è richiesto lavoro di programmazione • si possono avere subito le reazioni dell’utente • si possono confrontare rapidamente soluzioni diverse • si possono analizzare in dettaglio interazioni particolarmente complesse (forms, menu, …) • Svantaggi • non si coprono tutti i casi • bisogna poi trasporre il disegno manualmente in forma elettronica C. Braghin - Web Usability

41. Come fare • Minimo tre persone: - facilitatore: l’unico che parla (dà istruzioni, incoraggia commenti, non fa commenti) - computer: conosce l’applicazione e la controlla, simulando le risposte; non fornisce mai spiegazioni - osservatori: prendono note • Sessione tipica: 1 ora tutto compreso C. Braghin - Web Usability

42. Valutazione dei risultati • Riordinate le osservazione • che cosa era importante? • Ci sono m olti problemi correlati? • Riassumete i risultati per iscritto • Effettuate le modifiche al prototipo • Ripetete le prove C. Braghin - Web Usability

43. Implementazione • Bisogna scrivere tutte le pagine del sito a mano??? • No!! • Adobe Dreamweaver • Adobe GoLive • Word • ….. C. Braghin - Web Usability

44. Test

45. Define goals • Test funzionale • Test di usabilità • Controllo dei contenuti Design Prototype Test Progettazione di un sito C. Braghin - Web Usability

46. Test funzionale • Che cosa: esercizio sistematico di tutte le funzioni presenti nel sito (links e forms in tutte le condizioni, comprese quelle di errore) • Chi: sviluppatori del sito (eventualmente con il committente in fase di accettazione) • Come: si possono utilizzare check-list strutturate, e tools appositi (ad es. per la scoperta di link aperti) • Quando: durante lo sviluppo, e prima del primo rilascio C. Braghin - Web Usability

47. Test di usabilità • Che cosa: utilizzo del sito in scenari d’uso predefiniti • Chi: utenti campione • Come: vedi lezione relativa • Quando: quando opportuno, durante lo sviluppo per prototipi successivi (anche all’inizio: paper sketch & simulation) C. Braghin - Web Usability

48. Controllo dei contenuti • Che cosa: verifica dei contenuti (correttezza, adeguatezza, stile) • Chi: responsabile dei contenuti • Come: lettura delle pagine web • Quando: prima del rilascio C. Braghin - Web Usability

49. 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 6 macro-attributi C. Braghin - Web Usability

50. Comunicazione 3 Accessibilità Usabilità 2 1 Gestione Funzionalità 0 Contenuto Una visione globale C. Braghin - Web Usability