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
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
Prototipo editoriale
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
R.Polillo - Ottobre 2010
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
R.Polillo - Ottobre 2010
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
16
Linee guida: esempio
R.Polillo - Ottobre 2010
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
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
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
R.Polillo - Ottobre 2010
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
R.Polillo - Ottobre 2010
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
R.Polillo - Ottobre 2010
utente osservatore
facilitatore
sistema in prova
appunti
think aloud
istruzioni
Organizzazione informale
R.Polillo - Ottobre 2010
25
27
Webcam
Microfono
SW di ScreenRecording
R.Polillo - Ottobre 2010
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à
R.Polillo - Ottobre 2010
29
Tasso di successo: esempio
R.Polillo - Ottobre 2010
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
R.Polillo - Ottobre 2010
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
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
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
R.Polillo - Ottobre 2010
# 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
R.Polillo - Ottobre 2010
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
R.Polillo - Ottobre 2010
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
R.Polillo - Ottobre 2010
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
R.Polillo - Ottobre 2010
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
R.Polillo - Ottobre 2010
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
R.Polillo - Ottobre 2010
Top Related