Slides del corso di Laboratorio Internet del prof.R.Polillo, Università di Milano Bicocca, A.A.2010-11

1. 10. FASI FINALI 1 Corso Laboratorio Internet – Prof. Roberto Polillo Università degli Studi di Milano Bicocca – Anno Accademico 2010-11

3. Prototipo funzionale [scelta e] messa a punto dei plugin / widget Aspetti: Armonizzazione grafica e labelling (no inglese!) Personalizzazione funzionale (semplificazione!) utilizzando la parametrizzazione standard del componente Testing (!) Condividere le informazioni sulla social network

4. Prototipo editoriale Redazione dei contenuti (testi, immagini, video, …) Aspetti: Tipografia Scrittura adatta al Web (!) Embedding della mltimedialità

6. Font: pochi e omogenei (!), meglio senza grazie

7. Tutto maiuscolo solo nei menu e nei titoli

8. Bold accettabile solo nei titoli e nei menu

9. Corsivo mai

10. Sottolineato solo nei link

12. 7 R.Polillo - Ottobre 2010

13. Heat-map di tre pagine web (da J.Nielsen, www.useit.com/alertbox/reading_pattern) Heat map 8 R.Polillo - Ottobre 2010

14. Quale allineamento? Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figure di fiume, tra un promontorio a destra, e un’ampia costiera dall’altra parte; e il ponte, che ii congiunge le due rive, par che renda ancor più sensibile all’occhio questa trasformazione, e segni il punto in cui il lago cessa, e l’Adda ricomincia, per ripigliar poi nome di lago dove le rive, allontanandosi di nuovo, Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figure di fiume, tra un promontorio a destra, e un’ampia costiera dall’altra parte; e il ponte, che ii congiunge le due rive, par che renda ancor più sensibile all’occhio questa trasformazione, e segni il punto in cui il lago cessa, e l’Adda ricomincia, per ripigliar poi nome di lago dove le rive, allontanandosi di nuovo, Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figure di fiume, tra un promontorio a destra, e un’ampia costiera dall’altra parte; e il ponte, che ii congiunge le due rive, par che renda ancor più sensibile all’occhio questa trasformazione, e segni il punto in cui il lago cessa, e l’Adda ricomincia, per ripigliar poi nome di lago dove le rive, allontanandosi di nuovo,

16. Titoli / sottotitoli brevi e significativi

17. Paragrafi brevi: un concetto per paragrafo

18. No figure retoriche

19. Forme attive e dirette

20. Un concetto per paragrafo, spaziare i paragrafi

21. Tenere sotto controllo lo scrolling verticale alla risoluzione privilegiata (1024x768)

23. Esempio

24. Stile a piramide invertita SINTESI DETTAGLIO MATERIALEAGGIUNTIVO link link 13 R.Polillo - Ottobre 2010

25. Cose da non fare mai Testi a simmetria centrale!!!! Questo è un testo a simmetria centrale che non si legge facilmente Non mettere troppi punti esclamativi!!!!!! Evitare le sigle e le abbreviazioni

26. Come scrivere i link No: Università (www.unimib.it) Ma: Università No: per spiegazioni cliccare qui Ma: Spiegazioni

27. Linee guida: esempio R.Polillo - Ottobre 2010 16 Scrivere frasi brevi Usare parole del linguaggio comune Usare pochi termini tecnici e spiegarli Usare poco abbreviazioni e sigle Usare verbi nella forma attiva e affermativa Legare le parole e le frasi in modo breve e chiaro Usare in maniera coerente le maiuscole, le minuscole e la punteggiatura Evitare neologismi, parole straniere e latinismi Uso del congiuntivo Usare in maniera corretta le possibilità di composizione grafica del testo (dalla Direttiva sulla semplificazione del linguaggio dei testi amministrativi, emessa dal Ministro per la Funzione Pubblica nel maggio 2002)

28. Linee guida: esempio Usare parole precise (per es. termini concreti anziché astratti) Esempi: documento > relazione; divisione > parete; togliere > svitare; modificare > correggere Usare parole semplici Esempi: appellativo > nome; remunerazione > compenso; conferire > dare; delucidare > chiarire. Usare espressioni semplici Esempi: allo scopo di > per; nel momento in cui > quando; in base al fatto che > poiché; fare uso di > usare. Omettere le parole inutili Esempi: se è vero che > se; questo è un argomento che > questo argomento; il fenomeno, considerato nella sua natura > il fenomeno. Omettere le precisazioni superflue Esempi: il successo finale del corso > il successo del corso; eliminare del tutto > eliminare; assolutamente indispensabile > indispensabile; unire insieme con > unire con. Costruire periodi semplici Esempi: Per la sua complessità, la procedura è suddivisa in passi distinti, ciascuno dei quali corrisponde a una sequenza elementare di operazioni e fornisce un risultato autonomo > Per la sua complessità, la procedura è suddivisa in passi distinti. Ogni passo corrisponde a una sequenza elementare di operazioni e fornisce un risultato autonomo.

29. Linee guida: esempio (segue) Tenere vicini i termini collegati Esempi: Rimandiamo a domani la decisione, quando avremo dati più precisi > rimandiamo la decisione a domani, quando avremo dati più precisi; il testo viene composto, dopo i vari passi di revisione, nella sua forma finale > dopo i vari passi di revisione, il testo viene composto nella sua forma finale. Esprimere le idee analoghe in forma analoga Esempi: La qualità si ottiene progettando con attenzione e con una realizzazione accurata > La qualità si ottiene progettando con attenzione e realizzando con cura; il piano di profondità controlla il beccheggio. Il rollio è controllato dagli alettoni. Con il timone si controlla l’imbardata > Il piano di profondità controlla il beccheggio. Gli alettoni controllano il rollio. Il timone controlla l’imbardata. Preferire la costruzione positiva a quella negativa Esempi: non credo che accetterò l’incarico > credo che rifiuterò l’incarico; quel treno non arriva mai in ritardo > quel treno arriva sempre in orario. Usare la forma passiva in modo ponderato Esempi: La comprensione è facilitata dalla semplicità di linguaggio > la semplicità del linguaggio facilita la comprensione; questo atteggiamento può essere interpretato dal pubblico come un segno di disinteresse > il pubblico può interpretare questo atteggiamento come un segno di disinteresse. (da R.Lesina, Il nuovo manuale di stile (edizione 2.0) – Guida alla redazione di documenti, relazioni, articoli, manuali, tesi di laurea, ed. Zanichelli, 1994).

31. 20 R.Polillo - Ottobre 2010 Osservatore Osservato Test di usabilità Utenti campione usano il sistema in un ambiente controllato, sotto osservazione da parte di esperti di usabilità che raccolgono dati, li analizzano e traggono conclusioni

32. Tipi di test di usabilità Test formativi Servono a scoprire problemi di usabilità all’interno di un ciclo iterativo di progettazione e sviluppo, per poterli rimuovere subito Test sommativi Servono a stabilire l’usabilità di un sito (o confrontare più siti), fornendo un quadro completo e sistematico 21 R.Polillo - Ottobre 2010

33. Tipi di test di usabilità 22 Test di compitoAgliutentivienechiesto di svolgerecompitispecifici, chepermettano di esercitare le funzioniprincipali del sistema (es. Provareidiversicasid’uso) Test di scenarioAgliutentivieneindicato un obiettivo da raggiungereattraversounaserie di compitielementari, senzaindicarliesplicitamente: l’utentedovràquindiimpostareunapropriastrategia di azioni R.Polillo - Ottobre 2010

34. Esempio: test di compito (sito di e-commerce) 23 Task 1: Registrarsi Task 2: Verificare se si può pagare con Visa e qual è l’importo minimo di un ordine Task 3: Verificare quali sono i tempi di consegna Task 4: Acquistare una scatola da 500 gr di tonno sott’olio Task 5: Cercare una confezione di sciroppo di acero Task 6: Verificare lo stato degli ordini effettuati Task 7: Verificare se esistono offerte speciali di pasta R.Polillo - Ottobre 2010

35. Esempio: test di scenario (sito di e-commerce) 24 Scenario 1: Domani sera hai due amici a cena, ma non hai tempo di andare al supermercato. Decidi di fare la spesa on-line, pagando con la tua Visa. Collegati al sito e ordina gli ingredienti per una cena veloce e poco costosa, ma simpatica. R.Polillo - Ottobre 2010

36. utente osservatore think aloud appunti sistema in prova istruzioni facilitatore Organizzazione informale R.Polillo - Ottobre 2010 25

37. Thinking aloud 26 Si chiede all’utente di esprimere ad alta voce ciò a cui sta pensando: che cosa sta cercando di fare che cosa vede sullo schermo come pensa di dover proseguire quali dubbi e difficoltà sta provando R.Polillo - Ottobre 2010

38. 27 SW di ScreenRecording Webcam Microfono R.Polillo - Ottobre 2010

39. 28 R.Polillo - Ottobre 2010

41. Descrizione compiti/scenari

42. Modulo per raccolta annotazioni e misure

43. Questionario per intervista finale

44. Stazione di test

45. Appunti , misure e registrazioni

46. Interviste finaliOrganizzare un test di usabilità R.Polillo - Ottobre 2010 29

47. Tasso di successo: esempio R.Polillo - Ottobre 2010 30 Tasso di successo : (9 + (4*0.5)) / 24 = 46% successi successiparziali numeroprove Legenda: S=successoF=fallimentoP=successo parziale

48. Quanti utenti? 31 Dipende dagli obiettivi del test e dalla complessità del sistema Esempio: per un sito web, tipicamente Check-up rapido, durante lo sviluppo:- 5-7 utenti- 5-7 compiti ciascuno(20-40 minuti per ciascun utente) Valutazione approfonditadi un sito complesso:- 10-15 utenti- 1 – 1,5 h per ciascun utente R.Polillo - Ottobre 2010

49. Quali compiti o scenari? E’ una decisione critica Compromesso fra copertura delle situazioni possibili e tempo/risorse Basarsi sulle priorità espresse nei requisiti R.Polillo - Ottobre 2010 32

50. Preparazione materiali e ambiente di prova 33 Scheda utente (esperienza, conoscenza del sistema, …) Descrizione scritta dei compiti/scenari, da dare agli utenti Modulo di raccolta misure e osservazioni, per l’osservatore (uno per ogni utente e compito/scenario) Questionario per l’intervista finale agli utenti R.Polillo - Ottobre 2010

52. Briefing agli utenti Mettere gli utenti a proprio agio, per ridurre al massimo lo stress da esame Spiegare che lo scopo è di provare il sistema, non l’utente Spiegare quali registrazioni verranno fatte, e la politica relativa alla privacy Fornire agli utenti l’elenco scritto dei compiti/scenari R.Polillo - Ottobre 2010 35

53. Il ruolo dell’osservatore 36 Sì: a che cosa stai pensando? continua a parlare non scoraggiarti, tenta ancora No: a che cosa serve quel bottone? perchè hai cliccato lì? NB:Interferenza cognitiva del think-aloud R.Polillo - Ottobre 2010

54. Intervista o focus group finale 37 Per discutere:- punti di forza e di debolezza dell’applicazione- aspetti da migliorare- aspetti graditi e sgraditi È utile predisporre un questionario ad uso dell’intervistatore R.Polillo - Ottobre 2010

56. Analisi dei risultati e proposte finali 39 Analisi dettagliata dei dati e della registrazione Elenco dei singoli problemi, e loro gravità (es. bloccanti / bypassabili / lievi) Elenco degli interventi suggeriti, e loro priorità Stesura del rapporto di valutazione R.Polillo - Ottobre 2010

57. 40 (Compito: registrazione utente in un sito di e-commerce) Elenco dei problemi: esempio

58. Classificazione dei problemi Problema irrilevante: può non essere risolto Problema secondario: da risolvere con bassa priorità Problema rilevante: da risolvere con alta priorità Problema bloccante: deve necessariamente essere risolto prima che il sistema venga rilasciato R.Polillo - Ottobre 2010 41

59. 42 R.Polillo - Ottobre 2010 Elenco interventi suggeriti: esempio

61. Un folder contenenteIl documento dei requisiti (versione finale) Il piano di qualità (versione finale) Il rapporto del test di usabilità (template sul sito) Scheda riassuntiva del progetto (importantissima, vedi slide seguente) 43 R.Polillo - Ottobre 2010

62. Scheda di progetto: struttura Nome della organizzazione per cui è stato fatto il sito URL del sito realizzato URL del vecchio sito se esistente Nome, cognome, corso di laurea, email di tutti i membri del gruppo Data di completamento del progetto CMS utilizzato Hosting service utilizzato Elenco di tutti i plugin/widget utilizzatiPer ciascuno: Nome Breve descrizione (min 1 max 3 righe) Eventuali note aggiuntive 44 R.Polillo - Ottobre 2010 Disponibile template Word sul sito

63. Calendario prossime revisioni 23 dicembre 11 gennaio 13 gennaio (21 gennaio: esame) xx febbraio (17 febbraio: esame)

64. BUON LAVORO!

65. Buon lavoro!

66. Queste slides… Queste slide sono disponibili con licenza Creative Commons (attribuzione, non commerciale, condividi allo stesso modo) a chiunque desiderasse utilizzarle, per esempio a scopo didattico, senza necessità di preventiva autorizzazione. La licenza non si estende alle immagini fotografiche e alle screen shots, i cui diritti restano in capo ai rispettivi proprietari, che sono stati indicati, ove possibile. L’autore si scusa per eventuali omissioni, e resta a disposizione per correggerle. 48 R.Polillo - Ottobre 2010