sviluppo di siti web - dia.uniroma3.it · – ricerca esplorativa: "che cosa si intende per...
TRANSCRIPT
1
Sviluppo di siti Web
Paolo Atzeni
Paolo Atzeni, maggio 2001 2
Quadro metodologico per siti Web
• Obiettivi
• Considerazioni preliminari
• Il ciclo di vita di un sito Web
• Pianificazione
• Progettazione
• Realizzazione
• Valutazione e avvio
• Gestione
2
Paolo Atzeni, maggio 2001 3
Obiettivi
• La qualità di un sito (come di molti altri prodotti o sistemi) deve essere perseguita dall'inizio, non "aggiunta" a posteriori
• Il quadro metodologico tiene conto, nelle varie fasi, dei vari attributi che contribuiscono alla qualità (secondo la nostra metodologia di analisi)
• Si concentra sulla "pubblicazione di informazioni", perché i siti di interesse la vedono come funzionalità prevalente
Paolo Atzeni, maggio 2001 4
Contesto
• Utilizzo produttivo, non (o, almeno, non solo) "surfing":
– i servizi debbono essere offerti in modo ufficiale e professionale
• Il sito Web di una amministrazione o azienda è una risorsa importante e va gestito con pianificazione e controllo (Piano Triennale)
• Va inquadrato non solo nel contesto dei sistemi informativi, ma anche con riferimento a scelte strategiche complessive; interagisce fortemente con le attività di produzione della documentazione e con le iniziative di comunicazione (L.150/2000)
3
Paolo Atzeni, maggio 2001 5
Ruoli e responsabilità
• Debbono essere definiti adeguatamente
• Il "responsabile" deve essere autorevole (posizione dirigenzialeelevata) o almeno avere un mandato e una "copertura" forti
• Può essere utile un "comitato editoriale" o "di indirizzo", che rappresenti i vari settori
• Il Web interessa sia l'amministrazione nel senso stretto sia gliuffici di staff del vertice politico:
– la comunicazione riguarda sia gli aspetti di servizio (URP) sia quelli politici (portavoce, addetto stampa)
• Il responsabile strategico o il comitato sono (o meglio, rappresentano) i "committenti" del sito; la struttura operativa (interna o esterna) è il "fornitore"
Paolo Atzeni, maggio 2001 6
La struttura operativa
• La struttura operativa prevede competenze diverse
– tecnologiche (e metodologiche correlate alle tecnologie)
– redazionali e relative alla comunicazione (spesso con interazioni con tutta l'amministrazione)
• La sua collocazione non è ovvia:
– nella struttura del sistema informativo
– nella struttura amministrativa dedicata alla comunicazione e alle relazioni con il pubblico
– nello staff del vertice politico
• A lungo termine (servizi "veri"), il Web potrebbe diventare l'interfaccia verso i sistemi informativi e quindi associata ad essi, ma con una funzione di "servizio" verso i "clienti" interni
4
Paolo Atzeni, maggio 2001 7
Ulteriori considerazioni preliminari
• Possibile affidamento all'esterno
– consueti problemi di individuazione dei confini della fornitura
• sviluppo appaltato e gestione interna
• affidamento della gestione: infrastruttura, aggiornamento dei contenuti, evoluzione del sito; i contenuti richiedono quasi sempre un'interazione con gli uffici responsabili/interessati
• Sito centrale e "sottositi" ("siti satellite"):
– vantaggi e svantaggi
Paolo Atzeni, maggio 2001 8
Il ciclo di vita di un sito Web
• Pianificazione
• Progettazione
• Realizzazione
• Valutazione e avvio
• Gestione
5
Paolo Atzeni, maggio 2001 9
Pianificazione
• Definizione del progetto e impostazione delle attività successive
• Dalla visione strategica e dalla diagnosi della situazione attuale, si individuano gli interventi prioritari
• Specifica del progetto ("documenti" approvati da committente e fornitori):
– definizione della missione del sito
– individuazione degli obiettivi del sito (specifici, misurabili, ottenibili in un tempo definito)
– individuazione degli utenti del sito, con aspettative e caratteristiche
– definizione degli elementi fondamentali del sito (sezioni principali, servizi da offrire), delle fonti di informazione e del "taglio" del sito
Paolo Atzeni, maggio 2001 10
Attività
• Possibile articolazione
– una attività per ciascuna "sezione" del sito
– attività trasversali:
• definizione dell'architettura
• definizione dell'interfaccia e della grafica
• revisione dei documenti
• controllo di qualità
• formazione
6
Paolo Atzeni, maggio 2001 11
Conclusione della pianificazione
• Valutazione costi/benefici
• Decisione
Paolo Atzeni, maggio 2001 12
Il ciclo di vita di un sito Web
• Pianificazione
• Progettazione
• Realizzazione
• Valutazione e avvio
• Gestione
7
Paolo Atzeni, maggio 2001 13
Progettazione
• Descrizione dettagliata del sito, da utilizzare in fase di realizzazione
• Vediamo un possibile insieme di attività e prodotti, molti dei quali tengono conto a priori delle esigenze di qualità, affrontandole direttamente oppure fornendo linee guida
Paolo Atzeni, maggio 2001 14
Progettazione: attività e prodotti
• "tema dominante"
• organizzazione generale del sito
• sistema di navigazione (ed etichettatura)
– strumenti integrati (barre di navigazione, menu a comparsa, frame [??])
– strumenti ausiliari (mappa, indice generale e analitico)
• funzionalità di ricerca
• definizione degli aspetti plurilingue
8
Paolo Atzeni, maggio 2001 15
Un inciso: Information architecture
• Organizzazione delle informazioni
• Navigazione
• "Labelling"
• Indicizzazione e ricerca
Paolo Atzeni, maggio 2001 16
Organizzazione delle informazioni, difficoltà
• Classificare può essere molto utile per organizzare, ma le classificazioni, se il contesto si estende soffrono di problemi di vario tipo:
– ambiguità
– eterogeneità (classificazioni multiple, formati diversi, …)
– differenze di prospettiva
– rapporti "politici" (dalle denominazioni alle enfasi e alle priorità)
9
Paolo Atzeni, maggio 2001 17
Organizzazione: schemi e strutture
• Schema organizzativo:
– definisce le caratteristiche degli elementi e le modalità secondo cui sono raggruppati
• Struttura organizzativa:
– definisce i tipi di correlazioni fra elementi e gruppi di elementi
• È utile distinguere l'organizzazione delle informazioni da altri aspetti, pur ad essa legati (ma di "livello più basso):
– navigazione, "labelling", indicizzazione
Paolo Atzeni, maggio 2001 18
Schemi organizzativi
• Schemi "esatti"; dividono e organizzano le informazioni secondo criteri univoci (ad esempio, partizioni mutuamente esclusive)
– alfabetico
– cronologico
– geografico (con piccoli rischi di ambiguità: qual è la montagna più alta d'Europa? Monte Bianco o Elbrus)
• Schemi "ambigui":
– per argomento
– per funzione (inserimento, modifica, ecc..)
– per categoria di utente
– basasti su metafora (il desktop dei PC, una biblioteca, …)
– schemi ibridi (vedi esempio)
10
Paolo Atzeni, maggio 2001 19
Strutture organizzative
• Gerarchica; aspetti importanti:
– classificazioni mutuamente esclusive?
– sviluppo in ampiezza o in profondità?
– funziona spesso, ma non sempre
• Ipertestuale:
– complessa e potenzialmente rischiosa, come struttura primaria
• "Entity-Relationship" :
– adatta a "sottositi" strutturati
• Nota: gerarchica ~ top-down
ipertestuale e E-R ~ bottom-up
Paolo Atzeni, maggio 2001 20
Organizzazione, sintesi
• Siti complessi richiedono schemi organizzativi e strutture organizzative multiple e integrate
• Schemi esatti sono efficaci quando le ricerche sono basate su "chiavi" certe, schemi ambigui sono efficaci quando l'utente nonsa esattamente che cosa sta cercando. In alcuni contesti sono utili entrambi i tipi
• Molti siti prevedono strutture organizzative con componenti gerarchiche, ipertestuali e "E-R", di solito con un livello più esterno di tipo gerarchico
12
Paolo Atzeni, maggio 2001 23
Navigazione
• Supportata in modi diversi
– dai browser ("back", "history", "bookmark", digitazione URL, colore dei link visitati); attenzione a non disabilitarle/sporcarle
– indicazione del contesto; molto utile se si arriva "dall'esterno", oppure se si stampa una pagina
• "Voi siete qui" (ad esempio, cammino dalla home-page)
• titolo della pagina, intestazione del sito (identità del sito)
– "sistema di navigazione"
• tipi di sistema di navigazione
• strumenti integrati
• strumenti ausiliari
Paolo Atzeni, maggio 2001 24
Sistemi di navigazione: tipi
• Gerarchia del sito e struttura E-R
• Supporto globale (in tutte le pagine del sito, anche a livelli)
• Supporto locale ("sottositi"): sostitutivo o complementare?
• Ad-Hoc (link immersi):
– alcuni molto utili, troppi controproducenti (specie se troppo immersi); attenzione al contesto ("clicca qui" spesso fuorviante)
13
Paolo Atzeni, maggio 2001 25
Strumenti di navigazione integrati
• Barre di navigazione
– testuali e/o grafiche? (velocità, browser testuali, "ALT", manutenzione, icone furovianti)
– sopra/sotto o a lato? Scuole diverse!
• Frame: un costrutto controverso
• Menu a tendina
Paolo Atzeni, maggio 2001 26
Strumenti di navigazione ausiliari
• Sono un supporto, che non potrà mai compensare una struttura primaria inadeguata
• Possono/debbono permettere l'accesso diretto alle pagine
• Indice generale ("Table of contents"): illustra sinteticamente la gerarchia
• Indice analitico ("Index"); indice analitico, spesso a granularità molto fine
• Mappa del sito: rappresentazione grafica della "informationarchitecture"; attenzione al livello di astrazione
• "Guided Tour"
14
Paolo Atzeni, maggio 2001 27
"Labeling"
• "Labeling is a form of representation. Just as we use spoken words to represent thoughts, we use labels to represent larger chunks of information in our web sites"
• Il problema si pone in molti contesti:
– "oggetto" delle lettere o dei messaggi di e-mail
– titoli delle cartelline
– nomi degli uffici
• Nel Web il problema è accentuato dalla eterogeneità dei contesti e degli utenti e dalla difficoltà di intervenire per chiedere o fornire spiegazioni
• Poiché considera solo l'aspetto terminologico, il "labelling" è un problema successivo alla definizione dell'organizzazione e dellanavigazione
Paolo Atzeni, maggio 2001 28
Labeling, aspetti generali
• "Labeling systems, not labels"
– la coerenza (almeno locale) è essenziale:insiemi di link con nomi disomogenei disorientano;
• Due tipi di etichette:
– testuali
– iconiche
• Due tipi di uso:
– link
– titoli
15
Paolo Atzeni, maggio 2001 29
Labeling e navigazione
• La coerenza è importante, nell'ambito del sito e di ciascuna pagina
– stessa etichetta per lo stesso scopo
– coerenza "grammaticale" (es. tutti verbi o tutti sostantivi in un elenco di link)
• Esempi
– Main, Main page, Home, Home page
– Contact, Contact Us, Contact Webmaster, Feedback
– Help, FAQ, Frequently Asked Questions
Paolo Atzeni, maggio 2001 30
Labeling, altri aspetti
• Labeling e indicizzazione: titoli, keyword
• link immersi: coerenza locale più che generale
• titoli di sezione: coerenza di terminologia, di granularità e di stile tipografico (nell'ambito della singola pagina e di pagine simili)
• icone: eleganti, efficaci, ma con cautela (utile accompagnarle con testo)
– alcune sono universalmente comprese (es. una casetta per la home page) altre richiedono uno sforzo
– il linguaggio delle icone è ristretto
• l'etichettatura è efficace se adatta all'utente!
16
Paolo Atzeni, maggio 2001 31
Strumenti di ricerca
• Non debbono sostituire una progettazione inefficace
• Richiedono uno sforzo non trascurabile (se si vuole che siano efficaci)
• Le ricerche possono essere di vario tipo:
– ricerche di informazioni ben precise (un'interfaccia di interrogazione o motore di ricerca)
– ricerca di "esistenza": "esiste un driver per la stampante HPxxxx che stampi quattro pagine su ogni foglio?"
– ricerca esplorativa: "che cosa si intende per 'colori freddi'"?
– ricerca generale: "tutto lo scibile umano sulla usabilità dei siti web"
Paolo Atzeni, maggio 2001 32
Strumenti di ricerca: flessibilità
• Si procede per iterazioni successive: "associative learning"
• Gli obiettivi di ricerca si evolvono (a mano a mano che l'utenteacquisisce informazioni)
• Ricerca e browsing debbono essere integrati (gli utenti alternano)
• Si dovrebbe supportare qualcosa di analogo alla richiesta di informazioni ad uno sportello (con operatore umano)
17
Paolo Atzeni, maggio 2001 33
Strumenti di ricerca: funzionalità
• I motori di ricerca (e altri strumenti) possono e debbono essereconfigurati:
– sulla base delle caratteristiche degli utenti
– tipi di ricerche
• La personalizzazione porta ad integrare le form di ricerca con (porzioni di) mappa o indice
• Indicizzazione del contenuto
• Zone, sottositi
• Attenzione al rapporto fra strumenti di ricerca e pagine generate dinamicamente
Paolo Atzeni, maggio 2001 34
Definizione delle specifiche e della Information Architecture
• Interazione con il committente (in una riunione)
– Introduzione
– Revisione critica (che cosa piace e che cosa no) di siti Web esistenti (in azienda o fuori)
– Il concetto di Information Architecture (con riflessioni sui siti)
– Obiettivo generale del progetto
– Un sito o una struttura con siti satellite? Riflessione sulla struttura organizzativa, sulle responsabilità e sulel esigenze di omogeneizzazione
– Metriche di successo
– Architettura e caratteristiche del sito principale
18
Paolo Atzeni, maggio 2001 35
Progettazione della Information Architecture
• Brainstorming alla lavagna!• 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
Paolo Atzeni, maggio 2001 36
20
Paolo Atzeni, maggio 2001 39
Progettazione della navigazione
• Rapporto costi/benefici:
– una molteplicità di elementi è utile/necessaria
– troppe opzioni possono fuorviare l'utente
• Un possibile processo:
– struttura principale basata sulla gerarchia e sull'E-R
– le pagine di livello più alto nella gerarchia dovrebbero essere accessibili da (quasi) ogni pagina
– definizione di strutture ausiliarie
– verifiche di usabilità?
Paolo Atzeni, maggio 2001 40
Prodotti della Information Architecture (secondo Lynch e Horton)
• Detailed site design specification
• Detailed description of site content
– site map, thumbnails, outlines, table of contents
• Detailed technical support specification
– Browser technology supported
– Connection speed supported
– Web server and server resources
• Proposal to create programming or technology for specific features
• A schedule for design and construction
• One or more site prototypes for multiple pages
• Multiple graphic design and interface design sketches or roughs
21
Paolo Atzeni, maggio 2001 41
Progettazione: attività e prodotti (2)
• specifica di dettaglio dei contenuti delle pagine (o tipi di pagine) e individuazione delle fonti delle informazioni
• definizione di pagine specifiche (se opportune):
– novità
– risposte a domande frequenti (FAQ)
– presentazione dell'amministrazione (e interazione con essa)
– interazione con i gestori del sito
– rilevazione del gradimento
– gruppi di discussione
• progettazione della home-page
Paolo Atzeni, maggio 2001 42
Progettazione di dettaglio
• Definizione completa (del contenuto) delle pagine, con "schemi" via via più dettagliati
– partizionamento dell'informazione ("information chunking")
• Il rapporto con l'utente diventa meno stretto
• A seconda della dimensione del sito, i soggetti coinvolti (e quindi i documenti necessari) saranno diversi
22
Paolo Atzeni, maggio 2001 43
"Content mapping"
• La "Information Architecture" è definita soprattutto con un processo top-down
• In fase di progettazione, si arriva spesso a dover dettagliare tutte le informazioni necessarie anche con un processo bottom-up
• Alla fine, si debbono "riconciliare" i due approcci, inquadrandotutte le informazioni nell'architettura di dettaglio, ad esempiostabilendo la corrispondenza ("mapping") fra fonti delle informazioni e pagine (ma lo stile può essere diverso)
• È anche utile un "inventario delle pagine" (uno schema potrebbe non essere gestibile)
Paolo Atzeni, maggio 2001 44
24
Paolo Atzeni, maggio 2001 47
Paolo Atzeni, maggio 2001 48
Progettazione: attività e prodotti (3)
• Progettazione dell'interfaccia e dell'impostazione grafica. La grafica è importante, ma non fine a se stessa.
– Approccio sistematico (identificabilità e caratterizzazione)
– Semplicità e facilità d'uso
– Accessibilità (connessioni lente, utenti disabili, indipendenza dal browser e dal monitor)
– Possibilità di stampa generalizzata
25
Paolo Atzeni, maggio 2001 49
Progettazione dell'interfaccia
• Premessa:
– problemi analoghi valgono in altri contesti, ad esempio nella produzione e stampa dei libri (stile di scrittura; rilegatura, numerazione delle pagine, indici, copertina, pagine iniziali);ci sono differenze ma anche concetti che restano validi
• Una differenza importante: le pagine Web debbono essere "autonome" una dall'altra (nota, nei libri non serve, ma in giornali e riviste può essere utile);regole base: what-who-when-where
– titolo (sia HTML sia nella pagina)
– autore (persona o ente)
– data di creazione o ultima modifica
– link alla home page (e url, utile in stampa) e altre importanti
Paolo Atzeni, maggio 2001 50
Interfaccia, spunti
• L'utente è il centro dell'attenzione: usabilità
– supporto alla navigazione, etc. (vedi Information Arch.)
– utilizzo della larghezza di banda opportuna
– semplicità e coerenza
– inegrità e stabilità
– feedback e dialogo con gli utenti
– supporto agli utenti disabili
– accessibilità: "viewable with any browser", ogni SO, anche monitor piccoli
– "graceful degradation"
26
Paolo Atzeni, maggio 2001 51
modem lento
modem veloce
T1
1 secondo
2KB
8KB
100KB
10 secondi
34KB
150KB
2MB
Tempo di risposta e attenzione dell'utente
• fino a un decimo di secondo, l'utente ha la sensazione di una risposta istantanea
• fino a un secondo l'utente, pur notando il ritardo, ha la sensazione di un dialogo e non si distrae (non ha tempo di pensare ad altro)
• fino a dieci secondi l'utente mantiene l'attenzione al probelma anche se mentalmente si distrae
• oltre i dieci secondi l'utente inizia a dedicarsi ad altre attività, aspettando una risposta "asincrona"
Paolo Atzeni, maggio 2001 52
10 regole euristiche per l'usabilità nel Web
Keith Instone
http://webreview.com/97/10/10/usability/sidebar.html
• Derivate dalle euristiche proposte da Jakob Nielsen per le interfacce utente in generale (http://www.useit.com/papers/heuristic/heuristic_list.html)
• Il criterio generale è l'uso efficace dei link
27
Paolo Atzeni, maggio 2001 53
Regole euristiche … (2)
1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation
Paolo Atzeni, maggio 2001 54
Regole euristiche … dettagli
1. Visibility of system status
– The system should always keep users informed about what is going on, through appropriate feedback within reasonabletime.
– "Where am I?" e "Where can I go next?"
2. Match between system and the real world– The system should speak the users' language, with words,
phrases and concepts familiar to the user, rather thansystem-oriented terms. Follow real-world conventions,making information appear in a natural and logical order.
– Non si debbono (di solito) fare ipotesi restrittive sugli utenti
28
Paolo Atzeni, maggio 2001 55
Regole euristiche … dettagli (2)
3. User control and freedom
– Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave theunwanted state without having to go through an extendeddialogue. Support undo and redo.
– Il browser già ci aiuta, il link alla home è fondamentale
– Attenzione all'uso di nuove tecnologie, a forzare colori o assumere versioni specifiche dei browser
Paolo Atzeni, maggio 2001 56
Regole euristiche … dettagli (3)
4. Consistency and standards
– Users should not have to wonder whether different words,situations, or actions mean the same thing. Follow platform conventions.
– Coerenza di titoli, link, terminologia, ...
– Coerenza con gli standard e le usanza del Web (colori dei link, ...)
5. Error prevention– Even better than good error messages is a careful design
which prevents a problem from occurring in the first place. – Ad esempio: link corretti, controlli sulle form
29
Paolo Atzeni, maggio 2001 57
Regole euristiche … dettagli (4)
6. Recognition rather than recall
– Make objects, actions, and options visible. The user shouldnot have to remember information from one part of thedialogue to another. Instructions for use of the systemshould be visible or easily retrievable whenever appropriate.
– Correlato con il punto 1 (system status)
– Attenzione alle mappe cliccabili (in particolare sul server)
– Etichette e sistemi di navigazione.
Paolo Atzeni, maggio 2001 58
Regole euristiche … dettagli (5)
7. Flexibility and efficiency of use
– Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
– Nel Web: bookmarks (e anche cammini predefiniti)
– Le pagine debbono essere "facili da annotare neibookmark":
• senza frame, con URL stabili, form con "GET"
30
Paolo Atzeni, maggio 2001 59
Regole euristiche … dettagli (6)
8. Aesthetic and minimalist design
– Dialogues should not contain information which is irrelevantor rarely needed. Every extra unit of information in adialogue competes with the relevant units of information anddiminishes their relative visibility.
– Evitare informazione non pertinente
– Riscrivere per il Web
– Procedere per raffinamenti
Paolo Atzeni, maggio 2001 60
Regole euristiche … dettagli (7)
9. Help users recognize, diagnose, and recover from errors
– Error messages should be expressed in plain language (nocodes), precisely indicate the problem, and constructively suggest a solution.
– Ad esempio, nel caso di una ricerca senza esito, fornire un supporto (senza dire solo "rendi la ricerca meno restrittiva")
10. Help and documentation– Even though it is better if the system can be used without
documentation, it may be necessary to provide help anddocumentation.Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and notbe too large.
31
Paolo Atzeni, maggio 2001 61
Progettazione delle pagine: obiettivi
• Rendere efficace l'interazione degli utenti ("soddisfarli" e farli restare e tornare)
– mantenere viva l'attenzione
– rendere gradevole l'attività
– dare le "giuste" priorità
• È la "concretizzazione" della progettazione dell'interfaccia
• È necessario un approccio sistematico (coordinato conl'information architecture e il sistema di navigazione)
Paolo Atzeni, maggio 2001 62
Fasi della "acquisizione" delle pagine da parte degli utenti
I promessi sposi
Quel ramo del lago di Como che volge a mezzogiorno, fra catenedi monti
32
Paolo Atzeni, maggio 2001 63
È necessaria una "struttura visuale"
• Articolazione, idea di organizzazione, contrasto
Paolo Atzeni, maggio 2001 64
Coerenza
• È opportuno che la struttura visuale sia applicata in modo coerente nell'ambito di un sito
– per dare unità (caratterizzazione, riconoscibilità)
– per facilitare l'utente (che "si abitua")
• Ovviamente si possono (e si debbono) avere "variazioni sul tema"; ad esempio
– stessa disposizione grafica con colori che cambiano nelle sezioni del sito
– colori stabili e varianti di logo nelle sezioni
33
Paolo Atzeni, maggio 2001 65
Progettazione delle pagine: considerazioni
• Sul Web di solito non si legge, ma si "dà un occhiata", si campiona; i documenti lunghi vengono poi stampati.Tener conto degli utenti previsti e delle funzionalità preferite:
– leggeranno i documenti in rete oppure li cercheranno per stamparli e archiviarli?
• who-what -when-where, strumenti di navigazione, etc.
• La grafica ha un ruolo fondamentale per evitare pagine troppo piatte e noiose ma …prudenza con grafica e colori
• Portabilità:
Paolo Atzeni, maggio 2001 66
Portabilità
– differenze fra i browser (es. una piccola spaziatura)
– funzionalità proprietarie e non "affermate" (Nielsen: "aspettate una anno o due")
– grande variabilità nella dimensione degli schermi (solo schermi?)
– graceful degradation
34
Paolo Atzeni, maggio 2001 67
"Screen real estate"
• Lo spazio sullo schermo è prezioso (come il terreno edificabile in una metropoli) e quindi va sfruttatto al meglio
– la porzione in alto a sinistra è l'unica ad essere sempre vista
• Lo spazio in una pagina è usato in vario modo:
– sistema operativo e browser (il contorno della finestra e le barre di navigazione del browser e simili), non controllabili dal progettista del sito
– navigazione sul sito
– contenuto
– (pubblicità)
– niente
Paolo Atzeni, maggio 2001 68
La griglia, ovvero dimensione fisse?
• Autori diversi hanno opinioni diverse:
– se le pagine si adattano alla dimensione della finestra, si sfrutta tutto lospazio (e si tiene conto anche della risoluzione del monitor)
– se le dimensioni sono fissate, si ha un controllo più preciso del layout (ma allora anche i caratteri devono avere dimensione fissa?)
• Comunque, attenzione alle tabelle:
– anche se flessibili, debbono avere "dimensioni minime", sotto le quali non si deve scendere
35
Paolo Atzeni, maggio 2001 69
Separazione di contenuto e presentazione
• Idea presente nel Web sin dall'inizio:
– HTML specifica "formattazione logica"
• I browser e i terminali possono essere diversi (e in futuro lo saranno sempre di più)
• Un'importante linea guida, da perseguire in vari modi:
– usare comandi di formattazione logica: <H1> e non <FONT SIZE=3> (e dimensioni percentuali?)
– usare ALT per le immagini
– usare fogli di stile (disabilitabili)
Paolo Atzeni, maggio 2001 70
Il frame, un costrutto controverso
• Frame: "meta-documento" o "superdocumento" che riunisce e visualizza in un'unica finestra più documenti
• Permette di "modularizzare" le pagine
• Rifiutato da molti (J. Nielsen: "Frames? Just say no!")
– principio fondamentale: la pagina Web riunisce molti concetti in un'unica idea:
• la percezione dell'unità informativa attuale
• l'unità informativa accessibile con un link (o bookmark)
• un indirizzo (URL)
• l'unità di memorizzazione
– i frame rompono questa unitarietà
36
Paolo Atzeni, maggio 2001 71
Difetti dei frame
• l'unità di informazione dipende dalla sequenza delle azioni di navigazione ("open frame in new window")
• bookmark non funzionano
• URL non funzionano
• portabilità: la gestione su schermi diversi è difficilissima
• difficoltà con la stampa
• difficoltà con i motori di ricerca
• difficoltà di utilizzo per utenti non specializzati
Paolo Atzeni, maggio 2001 72
Progettazione delle pagine e stampa
• Nonostante tutto, si stampa molto (ed è anche naturale, almeno per ora, ma forse per molto tempo)
• Lo schermo è orizzontale, i fogli (di solito) verticali
• Attenzione alle larghezze fisse (ma evitare indicazioni "stampare in landscape"!)
• Può essere utile predisporre due versioni dei documenti lunghi
– per la consultazione (magari valorizzando la struttura ipertestuale)
– per la stampa (un unico file, anche in altro formato, es PDF)
• In Europa e USA i fogli hanno dimensioni diverse
37
Paolo Atzeni, maggio 2001 73
Progettazione: attività e prodotti (4)
• Definizione dell'infrastruttura tecnica (hardware, sistema operativo, server HTTP, sistema di basi di dati, ambiente di sviluppo)
• Realizzazione dei programmi (per la generazione dinamica di pagine); attenzione alla sicurezza, se necessario
• Pianificazione della fase di produzione e valutazione delle risorse necessarie anche per la gestione (dei contenuti, in particolare)
Paolo Atzeni, maggio 2001 74
Progettazione: attività e prodotti (5)
• Realizzazione di una guida per la produzione, cruciale per il perseguimento degli obiettivi di qualità:
– connettività (dimensione delle pagine e compressione delle immagini)
– correttezza dei cammini di navigazione e del codice HTML
– qualità del contenuto
• coerenza con gli obiettivi
• comprensibilità dell'informazione e qualità del linguaggio
• identificazione storica dell'informazione
• dichiarazione e autorevolezza delle fonti
38
Paolo Atzeni, maggio 2001 75
Progettazione: verifiche intermedie
• Numerose attività di valutazione, interne al gruppo responsabile(meglio se con persone dedicate) e con il committente
• Sono utili "approvazioni" esplicite:
– tema dominante
– architettura
– caratteristiche dell'interfaccia e della grafica
• Si possono utilizzare prototipi del sito e pagine campione (con soli contenuti o sola grafica, a seconda dei casi)
Paolo Atzeni, maggio 2001 76
39
Paolo Atzeni, maggio 2001 77
Paolo Atzeni, maggio 2001 78
Il ciclo di vita di un sito Web
• Pianificazione
• Progettazione
• Realizzazione
• Valutazione e avvio
• Gestione
40
Paolo Atzeni, maggio 2001 79
Realizzazione
• Rigorosa applicazione delle regole fissate nella fase di progettazione (emendate in itinere se necessario) con
– rispetto delle linee guida
– valutazioni periodiche della qualità, secondo il piano impostato all'inizio
Paolo Atzeni, maggio 2001 80
Il ciclo di vita di un sito Web
• Pianificazione
• Progettazione
• Realizzazione
• Valutazione e avvio
• Gestione
41
Paolo Atzeni, maggio 2001 81
Valutazione e avvio
• Prima del "lancio" (del sito o di una sua estensione) è opportuna una valutazione sistematica:
– ad esempio con la nostra metodologia
– preferibilmente da parte di soggetti non troppo coinvolti nello sviluppo
– con coinvolgimento del committente (anche finale) e degli utenti (anche e soprattutto esterni)
• Il sito va "promosso", in modo tradizionale e tecnico
Paolo Atzeni, maggio 2001 82
Il ciclo di vita di un sito Web
• Pianificazione
• Progettazione
• Realizzazione
• Valutazione e avvio
• Gestione
42
Paolo Atzeni, maggio 2001 83
Gestione
• Risorse non trascurabili
• Passaggio di consegne dal gruppo di sviluppo (affiancamento)
• Aggiornamento dei contenuti
• Monitoraggio
• Piccola manutenzione
• Evoluzione:
– valutazione periodica
– comitato editoriale
– gruppi di utenti
– pianificazione di nuove iniziative
Paolo Atzeni, maggio 2001 84
Riferimenti
• P.J. Lynch and S. Horton. Web Style Guide: Basic DesignPrinciples for Creating Web Sites, Yale University Press, 1999.http://info.med.yale.edu/caim/manual(edizione italiana: Web guida di stile , Apogeo, 2000)
• L. Rosenfeld and P. Morville. Information architecture for the World Wide Web. O'Reilly, 1998.
• J. Nielsen. Designing Web Usability: The Practice of Simplicity. New Riders, 1999. (edizione italiana: Web usability, Apogeo 2000)