Il documento tratta la definizione dei requisiti di progetto per siti web, descrivendo la struttura necessaria per un documento di specifica. Vengono esplorate metodologie di raccolta dei requisiti e presentati esempi pratici di requisiti funzionali e non funzionali, oltre a scenari d'uso per identificare i bisogni degli utenti. Infine, si discute del modello di qualità e delle linee guida per la progettazione dell'architettura e dei contenuti del sito.

1. Corso Laboratorio Internet – Prof. Roberto Polillo
Università degli Studi di Milano Bicocca – Anno Accademico 2010-11
5. LA DEFINIZIONE DEI REQUISITI1

2. Che cosa faremo oggi
• Che cosa sono i requisiti di progetto
• Come deve essere strutturato il documento
di specifica dei requisiti per il progetto
3 4 5 6 7
Web
design
Visual
design
Sviluppo Redazione
dei contenuti
Pubblicazione
1
Definizione
dei requisiti
Documento
dei requisiti
Prototipo di
navigazione
Prototipo
funzionale
Prototipo
editoriale
Sistema
on line
Prototipo di
comunicazione
2
Avviamento
del progetto
Piano di
qualità
Gestione
del sito
2
R.Polillo - Ottobre 2010

3. Requisiti
 Dal latino “requisitus”=richiesto
 I requisiti di prodotto (product requirements) sono
le proprietà richieste al prodotto
 Vengono raccolti per iscritto in un documento
strutturato, che fornisce l’input alle attività di
progettazione
 Vengono raccolti attraverso analisi condotte con
varie metodologie
R.Polillo - Ottobre 2010
3

4. Esempi
Esempio 1:
 Il sito deve permettere all’utente di inserire nel carrello di
acquisto i prodotti di cui sta valutando l’acquisto.
Il carrello deve poter contenere almeno 15 prodotti
contemporaneamente
Esempio 2:
 L’intero processo di acquisto di un prodotto dovrebbe
richiedere al massimo 5 minuti
R.Polillo - Ottobre 2010
4
Requisito
funzionale
Requisito non
funzionale

5. La definizione dei requisiti
R.Polillo - Ottobre 2010
5
ESPLORAZIONE
(“elicitation”)
Richieste del
committente
Interviste
con gli
stakeholder
Analisi della
concorrenza
[Analisi del
prodotto da
sostituire]
Appunti e
materiale vario
Linee guida
ORGANIZZAZIONE
(Stesura dei
requisiti)
Requisiti
REVISIONE E
APPROVAZIONE
Attività di
progettazione e
sviluppo

6. Esplorazione: metodi
• Interviste individuali*
• Questionari
• Focus group
• Osservazioni sul campo
• Suggerimenti spontanei degli utenti
• Analisi degli accessi al [vecchio] sito
* Ci si può ispirare al questionario in Appendice 2 del libro
(disponibile in formato Word sul sito)
R.Polillo - Ottobre 2010
6

7. Analisi degli accessi: esempio (www.rpolillo.it)
R.Polillo - Ottobre 2010
7

8. Analisi della concorrenza
 Per individuare le “pratiche migliori” del settore
 Per individuare i punti di forza e di debolezza dei siti
concorrenti
 Per caratterizzare il nostro sito in rapporto ad essi:
 che cosa lo contraddistingue?
 Che cosa gli dà valore?
R.Polillo - Ottobre 2010
9

9. Indice suggerito per il documento
Sommario
Parte prima: Generalità
1. Il committente
2. Situazione attualle
3. Obiettivi generali del nuovo sito
4. Utenti
1. Categorie di utenti
2. Obiettivi per ciascuna categoria
3. Profilo utenti
5. Scenari d’uso
6. Posizionamento competitivo
Parte seconda: Requisiti del sito
<indice basato sul modello di qualità>
Parte terza: Requisiti di gestione progetto
Appendice 1: Glossario
Appendice 2 : Analisi della concorrenza
R.Polillo - Ottobre 2010
10
Usate il template Word, sul
sito del corso, con l’indice
completo e suggerimenti su
che cosa scrivere nelle
varie voci
Nel vostro caso, da non fare

10. Quale utente?
R.Polillo - Ottobre 2010
11
 A quali categorie di utenti è destinato il sito?
 Qual è il loro profilo tipico?
 Quali categorie sono prioritarie e quali quelle
secondarie?
 Quali sono gli obbiettivi e i bisogni di ciascuna
categoria?

11. Una categoria fondamentale
 Chi opera nel back-office:
 Chi sono?
Quali competenze informatiche?
 Come si suddivideranno il lavoro (ruoli)?
 Quali permessi avranno?
 Ricordare i ruoli WordPress (amministratore,
redattore, autore, collaboratore)
R.Polillo - Ottobre 2010
13

12. Attenzione!
 Bisogni noti e loro priorità
 Bisogni non noti
 Falsi bisogni
 Il progettista deve saperli interpretare, con la
sua esperienza, ed avere un ruolo attivo!
 Un ausilio importante: scenari d’uso
R.Polillo – Ottobre 2010
14

13. Scenari d’uso
R.Polillo - Ottobre 2010
15
Uno scenario d’uso è una narrazione, in linguaggio
comune, di una possibile storia dell’uso del sito da parte
di uno specifico utente, in uno specifico contesto
 Contesto, concretezza, visione non soggettiva
 Mettono in evidenza requisiti inespressi

14. Scenari d’uso: esempio
 Marco è un ragazzo di 19 anni, studente universitario del primo anno di Architettura.
Lavora saltuariamente come cameriere ed è appassionato di cinema, anche se le
sue possibilità economiche sono molto limitate. Sceglie i film da vedere con molta
cura sulla base delle recensioni sui giornali, dei consigli di amici e dei propri
interessi.
 Qualche tempo fa, nel multisala più vicino a casa sua, è rimasto deluso dal posto
assegnatogli all’interno della sala. Per questo motivo, venuto a conoscenza che il
cinema ha un nuovo sito internet che permette, agli utenti registrati, di scegliere
personalmente il posto, si è registrato.
 Quando vuole andare al cinema, Marco si collega al sito e procede velocemente con
l’operazione di prenotazione che è accessibile direttamente dalla home page.
Inserisce nome utente e password e il sistema autorizza l’operazione fornendo come
risposta le diverse opzioni di scelta. Marco ora può scegliere tra i titoli dei film in
programmazione, il giorno della settimana e l’ora. A questo punto gli viene
presentata la mappa della sala cinematografica, nella quale sono indicati i posti liberi
(in verde) e quelli già prenotati (in rosso). Marco finalmente può scegliere il posto
che preferisce facendo clic sulla figura e, dopo averlo confermato, avrà un resoconto
dell’operazione, che gli sarà anche inviato con un messaggio di posta elettronica.
 La sera, almeno 15 minuti prima dell’inizio della proiezione, Marco si presenta alle
casse del multisala con un documento d’identità. La cassiera procede a stampare i
biglietti prenotati, che Marco paga. A questo punto Marco potrà accomodarsi nella
sala cinematografica e vedere comodamente la proiezione del film direttamente dalla
R.Polillo - Ottobre 2010
19

15. Scenari d’uso: suggerimenti
 Devono “mettere in scena” situazioni d’uso tipiche, ma non ovvie
 Non devono contenere dettagli irrilevanti allo scopo
 Devono essere complete, indicando le motivazioni e le conseguenze
dell’uso del sito nella particolare situazione
 Possono essere realizzati con tecniche diverse (testi / immagini / video)
R.Polillo - Ottobre 2010
20

16. Personae: esempi
R.Polillo - Ottobre 2010
21

17. R.Polillo - Ottobre 2010
22

18. Un esempio
Da: Steve Mulder, http://www.slideshare.net/MulderMedia/the-user-is-
always-right-making-personas-work-for-your-site
R.Polillo - Ottobre 2010

19. R.Polillo - Ottobre 2010
24

20. Scenario d’uso (I)
R.Polillo - Ottobre 2010
25

21. Scenario d’uso (II)
R.Polillo - Ottobre 2010
26
Francis and Michael have agreed that she’ll take charge of learning more about the home-buying process. She goes online,
does a Google search for “Atlanta real estate,” and follows a link to the site’s home page. She sees that she can search for
houses from the home page, so just for fun, she does a quick Atlanta search to see what kinds of houses show up. There
are lots of houses in many different neighborhoods, and she easily narrows her results down to the area where she and
Michael live, using a map. There are still many results, and she’s not quite sure which search options to use to narrow the
search further. Then she notices a link for first-time home buyers and follows, it hoping for basic how-to information.
The link takes Francis to a step-by-step tutorial that explains the whole process, and she immediately feels like she’s found
the right site from which to begin her house search. She carefully reads some articles for first-time home buyers, taking
notes as she reads. She bookmarks other articles she wants to go back and read later. She also comes across the site’s
calculator and starts trying different combinations of numbers to find out what she and Michael can afford. She
particularly likes the glossary of terms so that she can finally figure out what “points” are and learn more about different
types of mortgages. After an hour and a half of reading, her brain is full, and she shuts her computer down for the day,
feeling like she got an excellent start.
The next day, she comes back to the site to look up information specific to Atlanta neighborhoods and finds lots of
information on each. She’s able to focus on five neighborhoods that look particularly good. The fun begins that night,
when she takes Michael through all that she has learned, and they set up a regular schedule for looking at online house
listings.

22. Indice suggerito per il documento
Sommario
Parte prima: Generalità
1. Il committente
2. Situazione attualle
3. Obiettivi generali del nuovo sito
4. Utenti
1. Categorie di utenti
2. Obiettivi per ciascuna categoria
3. Profilo utenti
5. Scenari d’uso
6. Posizionamento competitivo
Parte seconda: Requisiti del sito
<indice basato sul modello di qualità>
Parte terza: Requisiti di gestione progetto
Appendice 1: Glossario
Appendice 2 : Analisi della concorrenza
R.Polillo - Ottobre 2010
27
1. Requisiti di architettura
2. Requisiti di comunicazione
3. Requisiti funzionali
4. Requisiti di contenuto
5. Requisiti di gestione
6. Requisiti di accessibilità
7. Requisiti di usabilità

23. Il modello di qualità
R.Polillo - Ottobre 2010
28
Contenuto
Il contenuto informativo
è corretto, e adeguato
agli scopi del sito?
Comunicazione
Il sito raggiunge i suoi
obiettivi di
comunicazione?
Accessibilità
Il sito è di facile
accesso per tutti?
Funzionalità
Le funzioni del sito sono
adeguate e corrette?
Gestione
L’operatività del sito
è ben gestita ?
Architettura
La struttura e la navigazione
del sito sono adeguate?
Usabilità
Il sito è facile
da usare?

24. Requisiti di architettura
 Architettura informativa
Riportare la scaletta logica dei contenuti del sito, corredata dei
commenti necessari.
 Navigazione
Specificare i requisiti della struttura di navigazione e gli eventuali ausilii
richiesti alla navigazione.
Se utile indicare alcuni siti a cui ispirarsi, o riportare una gabbia schematica
della home page.
Indicare se nella home page dovranno essere inserite delle scorciatoie per
raggiungere altre parti del sito
R.Polillo - Ottobre 2010
29

25. Scaletta logica dei contenuti
• Indica la organizzazione logica dei contenuti informativi
• Serve a comunicare al Web designer in quali categorie
vogliamo che i contenuti informativi siano classificati e quali
sono i nomi (labelling) che vogliamo vengano usati per
queste categorie
• Ha, per un sito Web, la stessa funzione dell’indice di un libro,
ma non descrive ancora la struttura del sito in pagine
R.Polillo - Ottobre 2010
30

26. Esempio
31
R.Polillo - Ottobre 2010
Usare la
visualizzazione
in modalità
“struttura” nel
word processor

27. Esempio
R.Polillo - Ottobre 2010
Home
Chi siamo
Il DISCo
Il personale
Le attività del DISCo
L’offerta didattica
Corsi di laurea di primo livello
Corsi di laurea di secondo livello
Master universitari
Dottorato di ricerca
La ricerca
La ricerca al DISCo
I laboratori di ricerca
I progetti di ricerca
Il Dottorato di ricerca
Studenti interni
Avvisi
Guida dello studente
Corsi di Studio
Corso di laurea di primo livello in Informatica
Regolamenti e procedure
Immatricolazioni e iscrizioni
Piani di studio
Vincoli per l’accesso al II anno
Regolamento degli stage e della prova finale
Orario delle lezioni
Primo semestre
Secondo semestre
Programmi e siti web dei corsi

28. Requisiti di navigazione
 Bisogna dare le linee guida per progettarla, NON progettarla
fin d’ora!
 Esempio:
R.Polillo - Ottobre 2010
33
logo payoff data
barra di navigazione globale
menu servizi standard
area
login
area per
richiesta
preventivo
noleggio
offerte
speciali
banner?

29. Requisiti di comunicazione
• Identità di marca (immagine aziendale)
• Tono e stile della comunicazione
• Grafica e multimedialità
• Lingua e localizzazione
34
R.Polillo - Ottobre 2010

30. R.Polillo - Ottobre 2010
Esempio: WWF Usa, Fr, It

31. Identità di marca della CocaCola?
36 R.Polillo - Ottobre 2010

32. Requisiti funzionali
Tre sezioni:
 Casi d’uso
 [Base di dati]
 Sicurezza e privacy
R.Polillo - Ottobre 2010

33. Casi d’uso
Un caso d’uso è un insieme di interazioni
finalizzate a uno scopo, fra l’utente (o più utenti)
e il sito
Esempio (per un sito di e-commerce):
 Ricerca prodotto
 Ordina prodotto
 Visualizza dati utente
 Inserisci prodotto
 Modifica prodotto
R.Polillo - Ottobre 2010
38

34. Diagramma dei casi d’uso
R.Polillo - Ottobre 2010
39
Ricerca
prodotto
Ordina
prodotto
Visualizza
dati utente
Inserisci
prodotto
Modifica
prodotto
Sistema
bancario
Utente
Gestore
del
negozio
È un sistema
informativo,
non un utente
umano

35. Descrizione di un caso d’uso: esempio
Acquista prodotto:
Scenario principale:
1. Il cliente naviga nel catalogo e seleziona gli articoli da acquistare
2. Il cliente si avvia alla cassa (check out)
3. Il cliente fornisce le informazioni relative alla spedizione (indirizzo; scelta fra consegna in giornata o
entro 3 giorni)
4. Il sistema presenta un prospetto con il conto totale, comprese le spese di spedizione
5. Il cliente riempie un modulo con le informazioni sulla carta di credito
6. Il sistema autorizza l’acquisto
7. Il sistema conferma immediatamente la vendita
8. Il sistema invia al cliente una email di conferma
Scenari alternativi:
3a. Il cliente è abituale:
1. Il sistema visualizza le preferenze memorizzate riguardanti le spedizioni, il pagamento e la fattura
2. Il cliente può accettera il default o ridefinire le preferenze, in questo caso ritorna al passo 6 dello
scenario principale
6a. Il sistema non autorizza l’acquisto con carta di credito:
1. Il cliente può inserire nuovamente le informazioni e riprovare oppure annullare l’acquisto
R.Polillo - Ottobre 2010
40

36. Nel nostro caso:
 Non sviluppiamo software, ma usiamo funzioni già
fornite dal CMS, o funzioni realizzate da plugin o widget
che “montiamo” sulle nostre pagine.
 Quali casi d’uso elencare e descrivere?
 NO funzioni di backoffice (fa tutto il CMS)
 NO funzioni di navigazione (sono implicite)
 NO funzioni di ricerca e widget elementari (es. filtri)
 Sì interazioni significative dell’utente esterno
41
R.Polillo - Ottobre 2010

37. Esempi
 Registrazione al sito
 Login
 Donazione on-line
 Sottoscrizione al bollettino
 Utilizzo del social network
 ….
 (specificando il componente che lo realizza)
42
R.Polillo - Ottobre 2010

38. Basi di dati
• La metodologia prevede una bozza dello
schema concettuale della base di dati, con
una notazione a scelta per diagrammi entità-
relazioni
• Ovviamente, non la base dati usata dal CMS
• Nel vostro caso, di solito non ne avete
R.Polillo - Ottobre 2010
43

39. Sicurezza e privacy
 Sicurezza e privacy saranno gestiti dal CMS, mediante il
settaggio di opportuni parametri, qui si devono solo
specificare i requisiti
R.Polillo - Ottobre 2010
44

40. Requisiti di contenuto
Facendo riferimento alla scaletta logica dei contenuti già
definita, descrivere i requisiti relativi ai contenuti informativi
di ciascuna componente logica:
 quali informazioni dovrà contenere
 come dovranno essere espresse (es. testo, foto, video,…)
 dove potranno essere reperite
R.Polillo - Ottobre 2010
45

41. Esempio
R.Polillo - Ottobre 2010
46

42. Nel vostro caso…
 Il contenuto è ciò che fa la differenza per questi siti…
 Far capire agli utenti (potenziali donatori/volontari/…)
che cosa fa l’associazione, mostrando i risultati
(immagini, video, documenti,…)
 Mostrare “la faccia” delle persone dell’associazione
 Creare INTERESSE, FIDUCIA, SIMPATIA
 E’ bene che una persona del gruppo di dedichi fin da
subito alla raccolta dei contenuti
47
R.Polillo - Ottobre 2010

43. Requisiti di gestione
 Gestione dei sistemi
 Computer interno (quale? chi lo gestisce?) o
 Hosting (quale provider?)
 Amministrazione del sito (chi? esperienza?)
 Redazione dei contenuti (chi? esperienza?)
I ruoli di redattore e autore sono differenziati?
 Gestione degli utenti (chi? come?)
R.Polillo - Ottobre 2010
48

44. Accessibilità
 “La capacità dei sistemi informatici, nelle forme e nei limiti consentiti
dalle conoscenze tecnologiche, di erogare servizi e fornire
informazioni fruibili, senza discriminazioni, anche da parte di coloro
che a causa di disabilità necessitano di tecnologie assistive o
configurazioni particolari.”
R.Polillo - Ottobre 2010
49
Legge 4/2004

45. Requisiti di accessibilità
Intendiamo accessibilità in senso più ampio:
 Prestazioni
 Reperibilità
 Specificare attraverso quale URL il sito dovrà essere accessibile e se
il dominio ègià disponibile
 Specificare gli obiettivi di posizionamento in relazione ai principali
motori di ricerca e indicare quali azioni dovranno essere attuate per
raggiungerli.
 Compatibilità con i browser
 Sostanzialmente, a carico del CMS
 Accessibilità da parte di utenti disabili
R.Polillo - Ottobre 2010
50

46. Alcuni numeri
• Almeno il 10% della popolazione mondiale è disabile.
• Nell’Unione Europea, almeno 37 milioni di cittadini sono
disabili, e il 70% ha un’età superiore ai 70 anni.
• In Italia, i disabili sono oltre 2.800.000, pari a circa il 5%
della popolazione. Di questi, il 75% ha almeno 65 anni
(Fonte: Istat, 2003).

R.Polillo - Ottobre 2010
51

47. • Utenti non vedenti
Lettori di schermo e browser vocali
• Utenti ipo-vedenti
Realizzare il sito in modo che il testo possa essere visualizzato, su richiesta
dell’utente, in caratteri più grandi o di colore più contrastato rispetto al colore
dello sfondo
• Utenti daltonici
Realizzare il sito in modo che esso risulti comprensibile anche a chi non
distingua i colori
• Disturbi nella percezione del colore sono presenti:
 nel 9% dei maschi (1 ogni 12)
 nel 0,5% delle femmine (1 ogni 165)
• Sono dovuti a difetti di pigmentazione dei coni della retina
• I disturbi più frequenti riguardano la capacità di distinguere il rosso dal
verde (circa nel 5% delle persone), ma ci sono diversi tipi di disturbi
52
R.Polillo - Ottobre 2010
Disabilità visive

48. 53
R.Polillo - Ottobre 2010

49. www.smartmoney.com
In questo sito l’utente può
selezionare la coppia di
colori qui a destra
54 R.Polillo - Ottobre 2010

50. Esempio: www.disco.unimib.it
R.Polillo - Ottobre 2010
55

51. Esempio
56 R.Polillo - Ottobre 2010

52. 57 R.Polillo - Ottobre 2010

53. <img src="immagini/logo_trasp.gif"
width="160" height="80"
alt="Logo dell'UIC"
hspace="0" align="left">
58 R.Polillo - Ottobre 2010

54. Requisiti di usabilità
 I vari prototipi del sito saranno sottoposti a prove d’uso
 Ci sarà un test di usabilità strutturato alla fine
R.Polillo - Ottobre 2010
59

55. Queste slides…
… si basano sul libro “Facile da usare”, dell’autore, dove si trovano
tutte le necessarie spiegazioni. Vedi www.rpolillo.it
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, nelle didascalie del libro. L’autore si
scusa per eventuali omissioni, e resta a disposizione per
correggerle.
60
R.Polillo - Ottobre 2010