Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

10. Fasi finali del progetto

1,744 views

Published on

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

  • Be the first to comment

10. Fasi finali del progetto

  1. 1. 10. FASI FINALI<br />1<br />Corso Laboratorio Internet – Prof. Roberto Polillo<br />Università degli Studi di Milano Bicocca – Anno Accademico 2010-11<br />
  2. 2. Documento dei requisiti<br />Prototipo di navigazione<br />Prototipo funzionale<br />Prototipo editoriale<br />Sistema on line<br />Prototipo di comunicazione<br />Piano di qualità<br />1<br />3<br />4<br />5<br />6<br />7<br />2<br />Definizionedei requisiti<br />Web design<br />Visual design<br />Sviluppo<br />Redazionedei contenuti<br />Avviamentodel progetto<br />Gestione del sito<br />Pubblicazione<br />Prototipofunzionale:<br /><ul><li>messa a puntodefinitivadei plugin/widget</li></ul>Prototipoeditoriale:<br /><ul><li>messa a puntodefinitivadeicontenutiinformativi</li></ul>Poi: test di usabilità finale edesame(checosaportare)<br />Fasi finali<br />
  3. 3. Prototipo funzionale<br />[scelta e] messa a punto dei plugin / widget<br />Aspetti:<br />Armonizzazione grafica e labelling (no inglese!)<br />Personalizzazione funzionale (semplificazione!) utilizzando la parametrizzazione standard del componente<br />Testing (!)<br />Condividere le informazioni sulla social network<br />
  4. 4. Prototipo editoriale<br />Redazione dei contenuti (testi, immagini, video, …)<br />Aspetti:<br />Tipografia<br />Scrittura adatta al Web (!)<br />Embedding della mltimedialità<br />
  5. 5. Il testo nel Web: aspetti tipografici<br /> Le linee guida tipografiche dovrebbero essere state definite nella fase di visual design.Riassumiamole:<br /><ul><li>Dimensione leggibile
  6. 6. Font: pochi e omogenei (!), meglio senza grazie
  7. 7. Tutto maiuscolo solo nei menu e nei titoli
  8. 8. Bold accettabile solo nei titoli e nei menu
  9. 9. Corsivo mai
  10. 10. Sottolineato solo nei link
  11. 11. Contenuti: caratteri scuri su fondo chiaro</li></li></ul><li>La lettura sul Web<br />R.Polillo - Ottobre 2010<br />6<br />Il processo di lettura di una pagina web è diverso da quello di un testo normale, ed è più simile alla lettura della pagina di un quotidiano<br />L’occhio “scorre” qua e là, soffermandosi brevemente su quegli elementi che forniscono “indizi” sui contenuti (vedi esperimenti di eye tracking)<br />Il testo deve essere organizzato di conseguenza (“scannable text”) <br />
  12. 12. 7<br />R.Polillo - Ottobre 2010<br />
  13. 13. Heat-map di tre pagine web (da J.Nielsen, www.useit.com/alertbox/reading_pattern)<br />Heat map<br />8<br />R.Polillo - Ottobre 2010<br />
  14. 14. Quale allineamento?<br />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,<br />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,<br />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,<br />
  15. 15. Come scrivere i testi: contenuti<br /><ul><li>Concisione, concisione, concisione
  16. 16. Titoli / sottotitoli brevi e significativi
  17. 17. Paragrafi brevi: un concetto per paragrafo
  18. 18. No figure retoriche
  19. 19. Forme attive e dirette
  20. 20. Un concetto per paragrafo, spaziare i paragrafi
  21. 21. Tenere sotto controllo lo scrolling verticale alla risoluzione privilegiata (1024x768)
  22. 22. Collegamenti ipertestuali quando sono utili le definizioni (interni al sito, o a wikipedia, o …)</li></li></ul><li>“Wall of text”<br />Fonte: Jakob Nielsen, www.useit.com<br />11<br />
  23. 23. Esempio<br />
  24. 24. Stile a piramide invertita<br />SINTESI<br />DETTAGLIO<br />MATERIALEAGGIUNTIVO<br />link<br />link<br />13<br />R.Polillo - Ottobre 2010<br />
  25. 25. Cose da non fare mai<br />Testi a simmetria centrale!!!!<br />Questo è un testo<br />a simmetria<br />centrale<br />che non si legge facilmente<br />Non mettere troppi punti esclamativi!!!!!!<br />Evitare le sigle e le abbreviazioni<br />
  26. 26. Come scrivere i link<br />No: Università (www.unimib.it) <br />Ma: Università<br />No: per spiegazioni cliccare qui<br />Ma: Spiegazioni<br />
  27. 27. Linee guida: esempio<br />R.Polillo - Ottobre 2010<br />16<br />Scrivere frasi brevi<br />Usare parole del linguaggio comune<br />Usare pochi termini tecnici e spiegarli<br />Usare poco abbreviazioni e sigle<br />Usare verbi nella forma attiva e affermativa<br />Legare le parole e le frasi in modo breve e chiaro<br />Usare in maniera coerente le maiuscole, le minuscole e la punteggiatura<br />Evitare neologismi, parole straniere e latinismi<br />Uso del congiuntivo<br />Usare in maniera corretta le possibilità di composizione grafica del testo<br />(dalla Direttiva sulla semplificazione del linguaggio dei testi amministrativi, emessa dal Ministro per la Funzione Pubblica nel maggio 2002)<br />
  28. 28. Linee guida: esempio<br />Usare parole precise (per es. termini concreti anziché astratti)<br />Esempi: documento > relazione; divisione > parete; togliere > svitare; modificare > correggere <br />Usare parole semplici<br />Esempi: appellativo > nome; remunerazione > compenso; conferire > dare; delucidare > chiarire. <br />Usare espressioni semplici<br />Esempi: allo scopo di > per; nel momento in cui > quando; in base al fatto che > poiché; fare uso di > usare.<br />Omettere le parole inutili<br />Esempi: se è vero che > se; questo è un argomento che > questo argomento; il fenomeno, considerato nella sua natura > il fenomeno. <br />Omettere le precisazioni superflue<br />Esempi: il successo finale del corso > il successo del corso; eliminare del tutto > eliminare; assolutamente indispensabile > indispensabile; unire insieme con > unire con.<br />Costruire periodi semplici<br />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.<br />
  29. 29. Linee guida: esempio (segue)<br />Tenere vicini i termini collegati<br />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.<br />Esprimere le idee analoghe in forma analoga<br />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.<br />Preferire la costruzione positiva a quella negativa<br />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.<br />Usare la forma passiva in modo ponderato<br />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.<br />(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).<br />
  30. 30. Documento dei requisiti<br />Prototipo di navigazione<br />Prototipo funzionale<br />Prototipo editoriale<br />Sistema on line<br />Prototipo di comunicazione<br />Piano di qualità<br />1<br />3<br />4<br />5<br />6<br />7<br />2<br />Definizionedei requisiti<br />Web design<br />Visual design<br />Sviluppo<br />Redazionedei contenuti<br />Avviamentodel progetto<br />Gestione del sito<br />Pubblicazione<br />Prototipofunzionale:<br /><ul><li>messa a puntodefinitivadei plugin/widget</li></ul>Prototipoeditoriale:<br /><ul><li>messa a puntodefinitivadeicontenutiinformativi</li></ul>Poi: test di usabilità finale edesame(checosaportare)<br />Fasi finali<br />
  31. 31. 20<br />R.Polillo - Ottobre 2010<br />Osservatore<br />Osservato<br />Test di usabilità<br />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<br />
  32. 32. Tipi di test di usabilità<br />Test formativi<br /> Servono a scoprire problemi di usabilità all’interno di un ciclo iterativo di progettazione e sviluppo, per poterli rimuovere subito<br />Test sommativi<br /> Servono a stabilire l’usabilità di un sito (o confrontare più siti), fornendo un quadro completo e sistematico <br />21<br />R.Polillo - Ottobre 2010<br />
  33. 33. Tipi di test di usabilità<br />22<br />Test di compitoAgliutentivienechiesto di svolgerecompitispecifici, chepermettano di esercitare le funzioniprincipali del sistema (es. Provareidiversicasid’uso)<br />Test di scenarioAgliutentivieneindicato un obiettivo da raggiungereattraversounaserie di compitielementari, senzaindicarliesplicitamente: l’utentedovràquindiimpostareunapropriastrategia di azioni<br />R.Polillo - Ottobre 2010<br />
  34. 34. Esempio: test di compito (sito di e-commerce)<br />23<br />Task 1: Registrarsi<br />Task 2: Verificare se si può pagare con Visa e qual è l’importo minimo di un ordine<br />Task 3: Verificare quali sono i tempi di consegna <br />Task 4: Acquistare una scatola da 500 gr di tonno sott’olio<br />Task 5: Cercare una confezione di sciroppo di acero <br />Task 6: Verificare lo stato degli ordini effettuati<br />Task 7: Verificare se esistono offerte speciali di pasta <br />R.Polillo - Ottobre 2010<br />
  35. 35. Esempio: test di scenario (sito di e-commerce)<br />24<br />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.<br />R.Polillo - Ottobre 2010<br />
  36. 36. utente<br />osservatore<br />think aloud <br />appunti<br />sistema in prova<br />istruzioni<br />facilitatore<br />Organizzazione informale<br />R.Polillo - Ottobre 2010<br />25<br />
  37. 37. Thinking aloud<br />26<br />Si chiede all’utente di esprimere ad alta voce ciò a cui sta pensando:<br />che cosa sta cercando di fare<br />che cosa vede sullo schermo<br />come pensa di dover proseguire<br />quali dubbi e difficoltà sta provando<br />R.Polillo - Ottobre 2010<br />
  38. 38. 27<br />SW di ScreenRecording<br />Webcam<br />Microfono<br />R.Polillo - Ottobre 2010<br />
  39. 39. 28<br />R.Polillo - Ottobre 2010<br />
  40. 40. Requisiti<br />PIANIFICAZIONE(a inizio progetto)<br /> Utenti<br />ANALISIE PROPOSTE<br />PREPARAZIONE<br />ESECUZIONE<br /> Piano di test<br /> Rapporto divalutazione<br /><ul><li> Modulo per informazioni anagrafiche
  41. 41. Descrizione compiti/scenari
  42. 42. Modulo per raccolta annotazioni e misure
  43. 43. Questionario per intervista finale
  44. 44. Stazione di test
  45. 45. Appunti , misure e registrazioni
  46. 46. Interviste finali</li></ul>Organizzare un test di usabilità<br />R.Polillo - Ottobre 2010<br />29<br />
  47. 47. Tasso di successo: esempio<br />R.Polillo - Ottobre 2010<br />30<br />Tasso di successo : (9 + (4*0.5)) / 24 = 46%<br />successi<br />successiparziali<br />numeroprove<br />Legenda: S=successoF=fallimentoP=successo parziale<br />
  48. 48. Quanti utenti?<br />31<br />Dipende dagli obiettivi del test e dalla complessità del sistema<br />Esempio: per un sito web, tipicamente<br />Check-up rapido, durante lo sviluppo:- 5-7 utenti- 5-7 compiti ciascuno(20-40 minuti per ciascun utente)<br />Valutazione approfonditadi un sito complesso:- 10-15 utenti- 1 – 1,5 h per ciascun utente<br />R.Polillo - Ottobre 2010<br />
  49. 49. Quali compiti o scenari?<br />E’ una decisione critica<br />Compromesso fra copertura delle situazioni possibili e tempo/risorse<br />Basarsi sulle priorità espresse nei requisiti<br />R.Polillo - Ottobre 2010<br />32<br />
  50. 50. Preparazione materiali e ambiente di prova<br />33<br />Scheda utente (esperienza, conoscenza del sistema, …)<br />Descrizione scritta dei compiti/scenari, da dare agli utenti<br />Modulo di raccolta misure e osservazioni, per l’osservatore (uno per ogni utente e compito/scenario)<br />Questionario per l’intervista finale agli utenti<br />R.Polillo - Ottobre 2010<br />
  51. 51. <ul><li>. Dati personali</li></ul>Nome: _____________________Età: __Titolo di studio: _____________________ <br />Professione: _____________________<br /><ul><li>. Livello di conoscenza di Internet </li></ul>Giudichi di avere una esperienza d’uso del web:<br /> scarsa – media – buona - ottima <br />In media quante ore alla settimana usi il web? <br /> meno di 1 – tra 1 e 5 – più di 5 – più di 10<br />Hai mai partecipato ad un forum o ad una chat su Internet?<br /> Sì – No<br /><ul><li>. Livello di conoscenza del sito</li></ul>Hai già utilizzato il sito in esame?<br /> No – Sì, meno di 3 volte – Sì, più di 3 volte - Sì, più di 10 volte<br />Se sì, quali operazioni hai effettuato?<br /> ____________________________________________________<br />Hai mai utilizzato siti simili? <br /> No – Sì,qualche volta – Sì, spesso<br /> Se sì, quali? _____________________<br />Esempio:Scheda utente<br />R.Polillo - Ottobre 2010<br />
  52. 52. Briefing agli utenti<br />Mettere gli utenti a proprio agio, per ridurre al massimo lo stress da esame<br />Spiegare che lo scopo è di provare il sistema, non l’utente<br />Spiegare quali registrazioni verranno fatte, e la politica relativa alla privacy<br />Fornire agli utenti l’elenco scritto dei compiti/scenari<br />R.Polillo - Ottobre 2010<br />35<br />
  53. 53. Il ruolo dell’osservatore<br />36<br /> Sì:<br />a che cosa stai pensando?<br />continua a parlare<br />non scoraggiarti, tenta ancora<br /> No:<br />a che cosa serve quel bottone?<br />perchè hai cliccato lì?<br />NB:Interferenza cognitiva del think-aloud<br />R.Polillo - Ottobre 2010<br />
  54. 54. Intervista o focus group finale<br />37<br />Per discutere:- punti di forza e di debolezza dell’applicazione- aspetti da migliorare- aspetti graditi e sgraditi<br />È utile predisporre un questionario ad uso dell’intervistatore<br />R.Polillo - Ottobre 2010<br />
  55. 55.
  56. 56. Analisi dei risultati e proposte finali<br />39<br />Analisi dettagliata dei dati e della registrazione <br />Elenco dei singoli problemi, e loro gravità (es. bloccanti / bypassabili / lievi)<br />Elenco degli interventi suggeriti, e loro priorità<br />Stesura del rapporto di valutazione<br />R.Polillo - Ottobre 2010<br />
  57. 57. 40<br />(Compito: registrazione utente in un sito di e-commerce)<br />Elenco dei problemi: esempio<br />
  58. 58. Classificazione dei problemi<br />Problema irrilevante: può non essere risolto<br />Problema secondario: da risolvere con bassa priorità<br />Problema rilevante: da risolvere con alta priorità<br />Problema bloccante: deve necessariamente essere risolto prima che il sistema venga rilasciato<br />R.Polillo - Ottobre 2010<br />41<br />
  59. 59. 42<br />R.Polillo - Ottobre 2010<br />Elenco interventi suggeriti: esempio<br />
  60. 60. Che cosa portare all’esame<br /><ul><li>Il prototipo finale (editoriale) online
  61. 61. Un folder contenente</li></ul>Il documento dei requisiti (versione finale)<br />Il piano di qualità (versione finale)<br />Il rapporto del test di usabilità (template sul sito)<br />Scheda riassuntiva del progetto (importantissima, vedi slide seguente)<br />43<br />R.Polillo - Ottobre 2010<br />
  62. 62. Scheda di progetto: struttura<br />Nome della organizzazione per cui è stato fatto il sito<br />URL del sito realizzato<br />URL del vecchio sito se esistente<br />Nome, cognome, corso di laurea, email di tutti i membri del gruppo<br />Data di completamento del progetto<br />CMS utilizzato<br />Hosting service utilizzato<br />Elenco di tutti i plugin/widget utilizzatiPer ciascuno: <br />Nome<br />Breve descrizione (min 1 max 3 righe)<br />Eventuali note aggiuntive<br />44<br />R.Polillo - Ottobre 2010<br />Disponibile template Word sul sito<br />
  63. 63. Calendario prossime revisioni<br />23 dicembre<br />11 gennaio<br />13 gennaio<br />(21 gennaio: esame)<br />xx febbraio<br />(17 febbraio: esame)<br />
  64. 64. BUON LAVORO!<br />
  65. 65. Buon lavoro!<br />
  66. 66. Queste slides…<br /> 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. <br /> 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.<br />48<br />R.Polillo - Ottobre 2010<br />

×