![Page 1: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/1.jpg)
Prog. applicazioni WebProg. applicazioni Web - - 11 - -
Progettazione di applicazioni Progettazione di applicazioni WebWeb
![Page 2: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/2.jpg)
Prog. applicazioni WebProg. applicazioni Web
Sviluppo di siti: Sviluppo di siti: la guida di Yalela guida di Yale
"Web Style Guide: Basic Design Principles for Creating Web Sites""Web Style Guide: Basic Design Principles for Creating Web Sites"
P.J. Lynch and S. Horton, Yale University Press, 1999.P.J. Lynch and S. Horton, Yale University Press, 1999.http://info.med.yale.edu/caim/manualhttp://info.med.yale.edu/caim/manual
"Information architecture for the World Wide Web""Information architecture for the World Wide Web"
L. Rosenfeld and P. Morville, O'Really, 1998.L. Rosenfeld and P. Morville, O'Really, 1998.
![Page 3: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/3.jpg)
Prog. applicazioni WebProg. applicazioni Web - - 33 - -
Processo di sviluppoProcesso di sviluppo
Una possibile articolazione
I. Definizione requisiti del sito e pianificazione
II. "Information architecture"
III. Progettazione del sito
IV. Costruzione del sito
V. Promozione del sito
VI. Monitoraggio, valutazione, manutenzione
![Page 4: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/4.jpg)
Prog. applicazioni WebProg. applicazioni Web - - 44 - -
I. I. Definizione del sito e pianificazioneDefinizione del sito e pianificazione
Definizione degli obiettivi
Definizione di massima delle informazioni e delle funzionalità
Sviluppo interno o esterno?
![Page 5: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/5.jpg)
Prog. applicazioni WebProg. applicazioni Web - - 55 - -
Requisiti generaliRequisiti generali
Quali sono gli obiettivi del sito?
Chi sono gli utenti cui il sito si rivolge e che cosa si aspettano?
Il team di produzione è fatto di interni e/o di esterni?
Chi sarà responsabile del processo?
Chi sono gli "esperti del contenuto"?
Chi terrà i rapporti con i fornitori esterni?
Chi sarà il "Web master" (responsabile del sito)?
![Page 6: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/6.jpg)
Progettazione centrata sull’utenteProgettazione centrata sull’utente(User Centered Design, UCD)(User Centered Design, UCD)
Mettere l’utenteal centro
del processo di progettazione
![Page 7: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/7.jpg)
Progettazione centrata Progettazione centrata sull’utentesull’utenteLe domande a cui rispondere: Quale utente? Quali sono i compiti che deve svolgere? Qual è il contesto d’uso?
![Page 8: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/8.jpg)
Quale utente?Quale utente?
A quali categorie di utenti è destinato il prodotto che dobbiamo progettare ?
Di queste categorie, quali sono quelle prioritarie e quali quelle secondarie?
Come possiamo definire con precisione ciascuna categoria di utenti, in rapporto al prodotto che dobbiamo progettare? (sesso, età, cultura, esperienza, abilità/disabilità, interessi, …)
![Page 9: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/9.jpg)
Quali compiti?Quali compiti?
Quali sono i compiti che le diverse categorie di utenti dovranno svolgere con il prodotto?
COMPITI: A B CUTENTI:Categoria A *** * *Categoria B *** **Categoria C ***
• Quali sono quelli principali e quali quelli accessori?
• Quali metriche di efficacia e di efficienza possiamo introdurre in rapporto a questi compiti?
![Page 10: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/10.jpg)
Quale contesto d’uso?Quale contesto d’uso?
In quali diversi contesti le varie categorie di utenti dovranno svolgere i diversi compiti individuati?
Quali contesti sono prevalenti, e quali occasionali, in rapporto ai diversi compiti?
Come possiamo caratterizzare con precisione i diversi contesti?
![Page 11: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/11.jpg)
Prog. applicazioni WebProg. applicazioni Web - - 1111 - -
Requisiti: tecnologieRequisiti: tecnologie
Quali browser e sistemi operativi debbono essere supportati?
Quale accesso hanno a disposizione gli utenti?
Internet, Intranet…,
Estensioni e plug-in?
Javascript, Applet, Style sheets, …
Come potranno gli utenti contattare i gestori del sito?
posta elettronica, gruppi di discussione, questionari
È necessario l'accesso a basi di dati?
con autenticazione degli utenti
con ricerche sofisticate?
Serve un supporto Audio/video?
![Page 12: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/12.jpg)
Prog. applicazioni WebProg. applicazioni Web - - 1212 - -
Requisiti: Web server supportRequisiti: Web server support
Gestione interna o esterna?gestione di nomi di dominio?
spazio su disco?
capacità di supportare il traffico?
disponibilità e gestione delle statistiche?
motore di ricerca adeguato?
supporto per logica applicativa (CGI, middleware, accesso a basi di dati)?
capacità di gestire interazione con basi di dati interne?
![Page 13: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/13.jpg)
Prog. applicazioni WebProg. applicazioni Web - - 1313 - -
Requisiti: BudgetingRequisiti: Budgeting
Costi di personale interno
Hardware e software per personale interno
Formazione del personale interno
Costi per l'outsourcing dello sviluppo:
progettazione e sviluppo del sito
consulenza tecnica
sviluppo di applicazioni
promozione del sito
Costi di gestione:
Webmaster/Editor
supporto tecnico
manutenzione delle applicazioni
aggiornamento del contenuto (Redazione)
![Page 14: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/14.jpg)
Prog. applicazioni WebProg. applicazioni Web - - 1414 - -
II. "Information architecture"II. "Information architecture"
Definizione del "contenuto" del sito e della sua organizzazione
Premessa: chi è l'information architect?
Può avere formazione di base di vario tipo:
grafica
scienze archivistiche e bibliotecarie
giornalismo
usabilità
marketing
informatica
Dovrebbe avere competenze integrate e multidisciplinari!
![Page 15: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/15.jpg)
Prog. applicazioni WebProg. applicazioni Web - - 1515 - -
Progettazione della Information Progettazione della Information ArchitectureArchitecture
Brainstorming
Esplorazione delle metafore:
organizzativa (es.: una concessionaria: vendita auto nuove, vendita usato, officina, amministrazione, …)
funzionale (es.: una biblioteca: esplorazione del catalogo, ricerca in un indice, richiesta di info al personale)
visuale (es.: un elenco di indirizzi e numeri telefonici mostrato con icone)
Costruzione/descrizione di scenari d'uso
Definizione di un primo raffinamento dell'architettura
Prototipi di pagina (per simulare il contenuto)
Bozze di grafica (per discussione su architettura, grafica e realizzazione)
Prototipi
![Page 16: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/16.jpg)
Struttura del sito: esempio
![Page 17: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/17.jpg)
Grafica: esempio (home page)
![Page 18: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/18.jpg)
Grafica: esempio (secondo livello)
![Page 19: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/19.jpg)
Prog. applicazioni WebProg. applicazioni Web - - 1919 - -
III. Progettazione del sitoIII. Progettazione del sito
Definizione completa con dettagli necessari per la costruzione (struttura, contenuto, presentazione)
Prodotti (secondo Lynch e Horton):
Testi editati e verificati
Grafica specifica di tutte le pagine (templates, headers and footers, logos, buttons)
Struttura delle pagine
Progetto di interfaccia
Illustrazioni e fotografie
Progetto di client scripts
Progetto di database e programmi
Progetto struttura di navigazione e ricerca
![Page 20: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/20.jpg)
Prog. applicazioni WebProg. applicazioni Web - - 2020 - -
Linee guida per lo stile graficoLinee guida per lo stile grafico
Regole di presentazione delle pagine:Formato della griglia: righe e colonnePosizionamento del contenuto: banners, logo, menuProprietà di grafica: caratteri, colori, bordi e marginiRegole specifiche per dispositivi e browser
![Page 21: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/21.jpg)
Prog. applicazioni WebProg. applicazioni Web - - 2121 - -
Stile grafico – esempiStile grafico – esempi
Content positioning:Posizionamento dei Contenuti
![Page 22: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/22.jpg)
Prog. applicazioni WebProg. applicazioni Web - - 2222 - -
IV. Costruzione del sitoIV. Costruzione del sito
Prodotti (secondo Lynch e Horton)HTML delle pagine
Struttura dei link di navigazione
Base di dati e tutti i programmi
Grafici, immagini e fotografie
Verifica dei contenuti
Testing di programmi e basi di dati
Testing delle procedure di supporto
Archivi di tutti i componenti, HTML, programmi,..
![Page 23: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/23.jpg)
Prog. applicazioni WebProg. applicazioni Web - - 2323 - -
V. Promozione del sitoV. Promozione del sito
In molti contesti la promozione (marketing) è vitale, per permettere al sito di raggiungere i suoi obiettivi
Le modalità della promozione dipendono dal tipo di sito:
un sito rivolto ad una comunità locale e uno specializzato ma di interesse internazionale richiedono strategie diverse
La reperibilità attraverso motori di ricerca è importante (e può essere perseguita in vari modi), ma non è l'unica strada
La URL va pubblicizzata:
carta intestata, biglietti da visita, materiale promozionale, citazione nella pubblicità, nei cataloghi, nelle fatture e negli ordini, …
![Page 24: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/24.jpg)
Prog. applicazioni WebProg. applicazioni Web - - 2424 - -
VI. Monitoraggio, valutazione, VI. Monitoraggio, valutazione, manutenzionemanutenzione
Il Web (e il suo uso) sono molto dinamici
Si può (e deve) tenere traccia dell'uso di un sito attraverso i log:
contare gli utenti (diversi)
pagine più (o meno) usate
tipo e versione di browser
uso della grafica e dei menu
Manutenzione
contenuto (proprio e altrui, ad es. link esterni):
"schema" e "istanze"
struttura
grafica
![Page 25: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/25.jpg)
Prog. applicazioni WebProg. applicazioni Web - - 2525 - -
ValutazioneValutazione
Focus group (http://www.useit.com/papers/focusgroups.html): gruppo (5-10 persone) per la valutazione di specifici aspetti di un sito; un moderatore gestisce la discussione, con argomenti "preparati" ma dando spazio ai partecipanti
sono una buona fonte di idee ma raramente strumento di valutazione affidabile
Test di usabilità ...
Commenti e suggerimenti dagli utenti (anche con moduli da riempire, ma senza esagerare)
"Site review and design committee" da riunire periodicamente
![Page 26: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/26.jpg)
Test funzionaleTest funzionale
Che cosa: esercizio sistematico di tutte le funzioni presenti nel sito (links e forms in tutte le condizioni, comprese quelle di errore)
Chi: sviluppatori del sito (eventualmente con il committente in fase di accettazione)Come: si possono utilizzare check-list strutturate, e tools appositi (ad es. per la scoperta di link aperti)Quando: durante lo sviluppo, e prima del primo rilascio
![Page 27: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/27.jpg)
Controllo dei contenutiControllo dei contenuti
Che cosa: verifica dei contenuti (correttezza, adeguatezza, stile)
Chi: responsabile dei contenuti
Come: lettura delle pagine web
Quando: prima del rilascio
![Page 28: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/28.jpg)
Test di usabilitàTest di usabilità
Che cosa: utilizzo del sito in scenari d’uso predefiniti
Chi: utenti campione
Quando: quando opportuno, durante lo sviluppo per prototipi successivi (anche all’inizio: paper simulation)
![Page 29: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/29.jpg)
Prog. applicazioni WebProg. applicazioni Web - - 2929 - -
Test di usabilitàTest di usabilità
Scenari (prototipi semplificati)
"Simplified thinking": osservare l'utente mentre lavora, facendogli descrivere le operazioni e le impressioni (senza videoregistrare)
Card sorting
![Page 30: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/30.jpg)
Alcuni scenari d’uso vengono simulati manualmente, alla presenza di utenti-cavia…
“COMPUTER”FACILITATORE
UTENTE-CAVIA
Usability test & paper simulation
![Page 31: Prog. applicazioni Web- 1 - Progettazione di applicazioni Web](https://reader035.vdocuments.pub/reader035/viewer/2022081511/5542eb74497959361e8dd2fb/html5/thumbnails/31.jpg)
Paper simulation: materiali
Schema generale del sito
Singole pagine su cartoncino
Componenti dell’interfaccia (menu, forms, messaggi di errore,…) su cartoncino