10. Fasi finali del progetto

10. FASI FINALI1

Corso Laboratorio Internet – Prof. Roberto Polillo

Università degli Studi di Milano Bicocca – Anno Accademico 2010-11

3 4 5 6 7Web

designVisual design

Sviluppo Redazionedei contenuti

Pubblicazione

1Definizionedei requisiti

Documento dei requisiti

Prototipo di navigazione

Prototipo funzionale

Prototipo editoriale

Sistema on line

Prototipo di comunicazione

2Avviamentodel progetto

Piano di qualità

Gestione del sito

Prototipo funzionale:- messa a punto definitiva dei plugin/widget

Prototipo editoriale:- messa a punto definitiva dei contenuti informativi

Poi: test di usabilità finale ed esame (che cosa portare)

Fasi finali


[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


Redazione dei contenuti (testi, immagini, video, …)

Aspetti: Tipografia Scrittura adatta al Web (!) Embedding della mltimedialità

Il testo nel Web: aspetti tipografici

Le linee guida tipografiche dovrebbero essere state definite nella fase di visual design.Riassumiamole: Dimensione leggibile Font: pochi e omogenei (!), meglio senza grazie Tutto maiuscolo solo nei menu e nei titoli Bold accettabile solo nei titoli e nei menu Corsivo mai Sottolineato solo nei link Contenuti: caratteri scuri su fondo chiaro

6

La lettura sul Web

R.Polillo - Ottobre 2010

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

L’occhio “scorre” qua e là, soffermandosi brevemente su quegli elementi che forniscono “indizi” sui contenuti (vedi esperimenti di eye tracking)

Il testo deve essere organizzato di conseguenza (“scannable text”)

7 R.Polillo - Ottobre 2010

Heat-map di tre pagine web (da J.Nielsen, www.useit.com/alertbox/reading_pattern)

Heat map8


http://www.useit.com/alertbox/reading_pattern

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,

Come scrivere i testi: contenuti• Concisione, concisione, concisione• Titoli / sottotitoli brevi e significativi• Paragrafi brevi: un concetto per paragrafo• No figure retoriche• Forme attive e dirette• Un concetto per paragrafo, spaziare i paragrafi• Tenere sotto controllo lo scrolling verticale alla

risoluzione privilegiata (1024x768)• Collegamenti ipertestuali quando sono utili le

definizioni (interni al sito, o a wikipedia, o …)

11

“Wall of text”

Fonte: Jakob Nielsen, www.useit.com

Esempio

13

Stile a piramide invertita

SINTESI

DETTAGLIO

MATERIALEAGGIUNTIVO

link

link


Cose da non fare mai

Testi a simmetria centrale!!!!Questo è un testo

a simmetriacentrale

che non si legge facilmente

Non mettere troppi punti esclamativi!!!!!! Evitare le sigle e le abbreviazioni

Come scrivere i link

No: Università (www.unimib.it) Ma: Università

No: per spiegazioni cliccare qui Ma: Spiegazioni

http://www.unimib.it/

16

Linee guida: esempio


1. Scrivere frasi brevi

2. Usare parole del linguaggio comune

3. Usare pochi termini tecnici e spiegarli

4. Usare poco abbreviazioni e sigle

5. Usare verbi nella forma attiva e affermativa

6. Legare le parole e le frasi in modo breve e chiaro

7. Usare in maniera coerente le maiuscole, le minuscole e la punteggiatura

8. Evitare neologismi, parole straniere e latinismi

9. Uso del congiuntivo

10. 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)

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.

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

3 4 5 6 7Web

designVisual design

Sviluppo Redazionedei contenuti

Pubblicazione

1Definizionedei requisiti

Documento dei requisiti

Prototipo di navigazione



Sistema on line

Prototipo di comunicazione

2Avviamentodel progetto

Piano di qualità

Gestione del sito

Prototipo funzionale:- messa a punto definitiva dei plugin/widget

Prototipo editoriale:- messa a punto definitiva dei contenuti informativi

Poi: test di usabilità finale ed esame (che cosa portare)

Fasi finali

Test di usabilità20

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


Osservatore Osservato

Tipi di test di usabilità

Test formativiServono a scoprire problemi di usabilità all’interno di un ciclo iterativo di progettazione e sviluppo, per poterli rimuovere subito

Test sommativiServono a stabilire l’usabilità di un sito (o confrontare più siti), fornendo un quadro completo e sistematico

21


Tipi di test di usabilità22

Test di compitoAgli utenti viene chiesto di svolgere compiti specifici, che permettano di esercitare le funzioni principali del sistema (es. Provare i diversi casi d’uso)

Test di scenarioAgli utenti viene indicato un obiettivo da raggiungere attraverso una serie di compiti elementari, senza indicarli esplicitamente: l’utente dovrà quindi impostare una propria strategia di azioni


utente osservatore

facilitatore

sistema in prova

appunti

think aloud

istruzioni

Organizzazione informale


25

27

Webcam

Microfono

SW di ScreenRecording


28 R.Polillo - Ottobre 2010

PIANIFICAZIONE(a inizio progetto)

PREPARAZIONE

Rapporto divalutazione

ESECUZIONEANALISI

E PROPOSTE

Utenti

• Modulo per informazioni anagrafiche• Descrizione compiti/scenari• Modulo per raccolta annotazioni e

misure• Questionario per intervista finale

• Stazione di test

• Appunti , misure e registrazioni

• Interviste finali

Piano di test

Requisiti

Organizzare un test di usabilità


29

Tasso di successo: esempio


30

Compito 1 Compito 2 Compito 3 Compito 4 Compito 5 Compito 6

Utente 1 F F S F F S

Utente 2 F F P F P F

Utente 3 S F S S P S

Utente 4 S F S F P S

Legenda: S=successo F=fallimento P=successo parziale

Tasso di successo : (9 + (4*0.5)) / 24 = 46%

successisuccessiparziali

numeroprove

Quanti utenti?31

Dipende dagli obiettivi del test e dalla complessità del sistema

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

Esempio: per un sito web, tipicamente


Quali compiti o scenari?

E’ una decisione critica Compromesso fra copertura delle

situazioni possibili e tempo/risorse Basarsi sulle priorità espresse nei

requisiti


32

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


1 . Dati personaliNome: _____________________Età: __Titolo di studio: _____________________ Professione: _____________________

2 . Livello di conoscenza di Internet

Giudichi di avere una esperienza d’uso del web:scarsa – media – buona - ottima

In media quante ore alla settimana usi il web? meno di 1 – tra 1 e 5 – più di 5 – più di 10

Hai mai partecipato ad un forum o ad una chat su Internet?Sì – No

3 . Livello di conoscenza del sito

Hai già utilizzato il sito in esame? No – Sì, meno di 3 volte – Sì, più di 3 volte - Sì, più di 10 volte Se sì, quali operazioni hai effettuato? ____________________________________________________

Hai mai utilizzato siti simili?

No – Sì,qualche volta – Sì, spesso

Se sì, quali? _____________________

1 . Dati personaliNome: _____________________Età: __Titolo di studio: _____________________ Professione: _____________________

2 . Livello di conoscenza di Internet

Giudichi di avere una esperienza d’uso del web:scarsa – media – buona - ottima

In media quante ore alla settimana usi il web? meno di 1 – tra 1 e 5 – più di 5 – più di 10

Hai mai partecipato ad un forum o ad una chat su Internet?Sì – No

3 . Livello di conoscenza del sito

Hai già utilizzato il sito in esame? No – Sì, meno di 3 volte – Sì, più di 3 volte - Sì, più di 10 volte Se sì, quali operazioni hai effettuato? ____________________________________________________

Hai mai utilizzato siti simili?

No – Sì,qualche volta – Sì, spesso

Se sì, quali? _____________________

Esempio:Scheda utente


# Domanda Risposta

1 Quale impressione generale ti ha fatto il sito?

2 Quali aspetti ti sono piaciuti di più?

Perché?

3 Quali aspetti non ti sono piaciuti affatto?

Perché?

4 Quali parti o funzioni secondo te sarebbe utile

aggiungere al sito?

5 Quali parti o funzioni secondo te si potrebbero

eliminare?

6 La struttura del sito ti è sembrata adeguata ?

7 Come si potrebbe migliorare?

8 Ti è sembrato facile navigare nel sito?

9 Hai dei miglioramenti da suggerire per quanto

riguarda la navigazione?

10 I termini usati sono di facile comprensione?

Quali termini modificheresti e come?

11 A tuo parere la home page fa capire subito lo

scopo del sito?

12 Hai dei miglioramenti da suggerire nella home

page?

13 Il sito ti sembra coerente con l’immagine che

vuole dare?

14 Ti piace la grafica del sito?

Come la miglioreresti?

15 Trovi che i caratteri siano ben leggibili?

16 Trovi che le immagini siano ben scelte?

17 Lo stile usato per i testi ti sembra giusto?

18 Ti sembra che sia facile trovare le

informazioni nel sito?

22 Il sito ti è sembrato, nel complesso, facile da

usare?

23 Come giudichi questo sito in rapporto a siti

analoghi che già conosci? (Specificare quali)

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


40

(Compito: registrazione utente in un sito di e-commerce)

Elenco dei problemi: esempio

REGISTRAZIONE

PROBLEMA IDENTIFICATO PRIORITA’

1 Se si accede alla registrazione dalla Home Page, nella prima videataviene richiesta “la verifica del CAP”. L’utente non comprende ilsignificato dell’acronimo CAP (ritiene si tratti di un codice personalepost-registrazione). Dopo l’intervento del facilitatore per segnalare ilsignificato dell’acronimo, l’utente dichiara di non comprendere l’utilità ditale verifica.

A

2 Difficoltà nel comprendere il significato dei campi: [Domanda] e[Risposta]: non viene data alcuna informazione sul motivo di talerichiesta.

A

3 Non viene in alcun modo segnalato che il numero di caratteri che sipossono inserire, sia per la [Domanda] che per la [Risposta], sonolimitati. L’utente non ha la possibilità di accorgersi che entrambe lestringhe di testo inserite saranno troncate.

A

4 Iniziale smarrimento nella conferma della registrazione: l’utente siattendeva un comando “Invia” e non “Salva i dati password” (etichettaricavata dal nome dell’immagine “Salva_dati password.gif”)

B

5 Viene dato l’obbligo di inserire due numeri telefonici creandofrustrazione in chi non ha un secondo numero utile per gli scopi indicati:l’utente si mostra riluttante.

A

6 Al momento di inserire i dati per la consegna ad una terza persona,trovando reinseriti i propri dati, non si accorge del vero scopo di quellaschermata, e aggiunge i suoi dati, lamentandosi inoltre che gli vienerichiesto il CAP per la terza volta.

A

7 Identifica il simbolo di Page Up [^], posto a piè pagina, come unindicatore per muoversi sequenzialmente all’interno delle pagine(Forward, Back) anziché che per la funzione di scrolling nella pagina

M

8 L’utente dimostra di non gradire l’opzione di default “Accetto di esserecontattato da SPESACLIC per eventuali ricerche di mercato”.

M

9 Gli acronimi non vengono sciolti. A


41

Classificazione dei problemi

1. Problema irrilevante: può non essere risolto2. Problema secondario: da risolvere con bassa priorità3. Problema rilevante: da risolvere con alta priorità4. Problema bloccante: deve necessariamente essere risolto

prima che il sistema venga rilasciato

42

CARRELLO – CASSA – SCONTRINO

RACCOMANDAZIONI PRIORITA’

1 Lasciare sempre in vista i contenuti del carrello 1

2 Di fianco ad ogni prodotto del carrello inserire il comando “elimina dal

carello” oppure “elimina”. Il comando “svuota il carrello” può restare in

alto ad inizio lista.

1

3 I prodotti inseriti nel carrello saranno quelli che verranno conteggiati per

la spesa. Non occorrerà selezionarli

1

4 Cambiare il “Totale Spesa” con il “Totale Carrello” 2

5 Sostituire il termine “conferma l’ordine” con il comando “Invia l’ordine”,

più chiaro e convenzionale in Internet

1

6 Trovare una modalità più chiara per scegliere la data e la fascia oraria di

consegna; ad esempio, sottolineando con un link ogni possibilità di scelta

1

7 Dare informazioni sulle possibili modalità di pagamento ed offrire un link

verso la pagina che contiene informazioni di dettaglio

1

8 Indicare i dati riassuntivi della spesa appena effettuata ed inviare

messaggio di conferma alla casella e-mail del cliente

1

9 Rendere possibile la funzione di stampa dalla pagina contenente i dati

riassuntivi

2

10 Eliminare i termini scontrino e cassa che risultano termini arbitrari in

quanto non corrispondenti a delle funzioni reali ed utili per effettuare la

spesa on-line.

2


Elenco interventi suggeriti: esempio

Che cosa portare all’esame

• Il prototipo finale (editoriale) online• Un folder contenente

Il 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


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 utilizzati

Per ciascuno: Nome Breve descrizione (min 1 max 3 righe)

Eventuali note aggiuntive

44


Disponibile template Word sul sito

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

BUON LAVORO!

Buon lavoro!

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


10. Fasi finali del progetto

Education

Transcript of 10. Fasi finali del progetto