�ݺ�ߣ

Web Design Andrea Crevola [email_address] http://webdesign.3juice.com

Obiettivo del corso Il corso ha per obiettivo l’esame delle diverse componenti e attività che contribuiscono alla progettazione e alla realizzazione di un sito web. Significherà prendere in considerazione sia aspetti puramente tecnici sia elementi di carattere progettuale e metodologico.

Web design? Diamo una definizione: un sito web è una rete di unità informative contraddistinte da una omogeneità tematica e stilistica e veicolate telematicamente attraverso il protocollo HTTP. Ma è molto di più! è un atto di comunicazione; è uno spazio di interazione; è un artefatto tecnologico complesso;

Ecologia dell’informazione Un sito web è la risposta data dal team di progetto e sviluppo ad una precisa ecologia dell’informazione. Questa risposta è spesso un compromesso: il web design è l’arte e la scienza dell’individuare il miglior equilibrio possibile tra le diverse componenti dell’ecologia dell’informazione Contesto Contenuti Utenti Tecnologia

Un duplice punto di vista Web design come “arte”: realizzare un prodotto digitale è un attività pratica molto influenzata dalle particolari richieste e necessità di un determinato progetto. Web design come “scienza”: l’attività di progetto e sviluppo può però essere guidata da una conoscenza più teorica e astratta, tale da garantire un framework concettuale e operativo che è garanzia di buoni risultati:

Il design dei siti web: argomenti Durante le prossime lezioni introdurremo e discuteremo i seguenti temi: User centered design; Architettura dell’informazione; Usabilità; Accessibilità; Tecnologie web; Device independence; Semantic web;

La “vita” di un progetto web Parallelamente, si cercherà di considerare il processo e le migliori metodologie di lavoro per ottenere risultati di qualità. Ogni sito web attraversa almeno cinque fasi prima di essere pubblicato: Analisi preliminare Ideazione / Progettazione Realizzazione / Sviluppo Test e debug Pubblicazione e manutenzione Inoltre si tratta pressoché sempre di un’opera collettiva, che richiede la partecipazione di differenti professionalità.

Il web come professione Un sito web è il risultato di un processo di lavoro collettivo che vede coinvolte differenti figure professionali: Project manager Analista Art director / graphic designer Developer Esperto di interazione uomo-macchina Content manager Information architect A ciascuna di queste fa capo una o più competenze specifiche che difficilmente possono essere padroneggiate da una sola persona. Esiste tuttavia un minimo comune denominatore e un luogo di incontro per i componenti del team: l’interfaccia utente.

L’interfaccia L’interfaccia è la superficie di contatto tra l’utente e le funzionalità offerte da uno strumento. Ogni oggetto con cui entriamo in relazione può essere considerato come dotato di un’interfaccia (es. il volante, il cruscotto, i pedali e il cambio sono l’interfaccia di un automobile). Nel caso dei sistemi informatici, due sono le principali funzioni di un’interfaccia: Consentire un’azione diretta sull’oggetto (input); Comunicare all’utilizzatore lo stato dell’oggetto (output); Non solo: l’interfaccia è il luogo dell’interazione e della comunicazione tra i destinatari e gli autori del sistema.

Una prima distinzione I siti web si possono classificare secondo due principali categorie. Siti orientati ai contenuti: il sito web è principalmente un insieme di contenuti informativi che l’interfaccia utente deve presentare, rendere navigabili e reperibili con semplicità Siti orientati ai processi: il sito web è un insieme di funzionalità volte alla gestione di una base informativa, in modo simile ai normali software (web application): l’interfaccia deve consentire determinate operazioni di trattamento dei dati e deve fornirne un’adeguata rappresentazione.

Interfacce web Il web è un ambiente di comunicazione in cui è il protagonista è l’utente; Web design significa progettare interfacce che accompagnano il flusso operativo dell’utente in modo naturale, anticipando le sue esigenze, dialogando in modo cooperativo e senza mostrare il proprio funzionamento interno; Lo strumento deve essere un interlocutore e un collaboratore dell’azione, non un’autorità che impone il proprio modo di lavorare e di funzionare (mentre spesso accade l’inverso…);

User experience Non esiste, però, solo una dimensione “funzionalistica” dell’esperienza d’uso; In molti casi l’efficienza e l’efficacia dello strumento è solo una delle componenti che contribuiscono al valore di un sito web; Il web designer è autore di un progetto di comunicazione e interazione che mira a soddisfare numerose altre componenti; Ma la qualità della dimensione operazionale è fondamentale! [http://semanticstudios.com/publications/semantics/000029.php]

Interaction design (1) Il design di uno strumento interattivo deve essere funzionale all’esperienza d’uso che ne dovrà derivare per l’utente; Idealmente, un utente non dovrebbe chiedersi come un sito “funziona”, ma dovrebbe poter immediatamente intuire come soddisfare la propria necessità informativa (“Don’t make me think!”, S. Krug); L’utente del web è poco propenso a voler investire tempo ed energie per imparare come funziona un particolare sito; L’utente non deve accorgersi (breakdown) della presenza di un mediatore informatico tra sé e l’obiettivo (trasparenza); Necessario lavorare affinché sia la tecnologia ad adeguarsi agli utenti, non viceversa;

Interaction design (2) Il web designer deve costruire strumenti che comunichino chiaramente il modo in cui possono essere utilizzati: devono consentire all’utente di apprendere rapidamente il modello di organizzazione dell’informazione e di funzionamento interattivo del sistema; Uno dei compiti del web designer consiste nel rendere il più breve possibile il gap di conoscenza/abilità necessaria all’utente per cominciare ad utilizzare lo strumento senza errori;

Modello implementativo Vs Modello mentale Modello implementativo Modello mentale dell’utente Immagine del sistema Azione Feedback [D. Norman] Team di progetto e sviluppo Utente http:// Sistema

L’azione umana Formazione dello scopo Formazione dell’intenzione Specificazione dell’azione Esecuzione Interpretazione Percezione Valutazione del risultato [D. Norman] Utente http://

L’utente di un sito web dovrebbe… Scegliere se utilizzare il sito: a fronte di un proprio bisogno, dovrebbe giudicare il sito un canale idoneo e utile per soddisfare tale necessità; A quale scopo utilizzare il sito: dovrebbe potersi formare un’intenzione precisa circa quali contenuti o servizi utilizzare; In che modo utilizzarlo: dovrebbe capire come interagire con l’interfaccia per raggiungere il proprio obiettivo ed elaborare una sequenza di azioni orientata al conseguimento del risultato; Eseguire le azioni pianificate: dovrebbe poter applicare il piano di azione che ha ideato in modo efficiente ed efficace; Percepire il risultato della propria azione: dovrebbe poter verificare se a seguito della sua azione lo stato del sistema è cambiato e in che modo / misura; Interpretare correttamente tale percezione: dovrebbe poter comprendere il significato del cambiamento avvenuto; Valutare il risultato: dovrebbe poter valutare se le risposte ottenute sono soddisfacenti rispetto agli obiettivi iniziali;

Il compito del designer Il ruolo del web designer è rendere ottimale l’interazione: “ The function of the designer is to communicate the design model via the system image” [B. Tognazzini]; “ Good visual design is clear thinking made visible” [E. Tufte]; “ Things should be as simple as possible, but not simpler” [A. Einstein]; Come? Conoscendo i propri utenti: Se contenuti e funzionalità del sito esistono già, è necessario strutturarli e rappresentarli secondo forme adeguate alle conoscenze e le abilità degli utenti; Se il sito è in fase di ideazione, è necessario conoscere i propri utenti al fine di identificare quali contenuti/servizi proporre e come strutturarli e rappresentarli;

Progettazione user-centered La progettazione centrata sull’utente è una filosofia di progettazione che cerca di incorporare la figura dell’utente nella vita di un prodotto, fin dalle battute iniziali. Nel caso dei siti web, è necessario conoscere i propri destinatari non solo dal punto di vista socio-demografico, ma anche dal punto di vista della loro alfabetizzazione informatica, dei loro comportamenti di ricerca dell’informazione, dei loro modelli di classificazione e organizzazione della realtà. Gli utenti non sono tutti uguali: Utenti primari, secondari e occasionali; Utenti esperti, novizi e “perpetuamente intermedi”;

Conoscere gli utenti La ricerca sull’HCI ha messo a punto alcuni metodi utili ad aumentare le conoscenze circa i propri destinatari. Interviste agli stakeholders; Analisi dei siti competitors; Focus group e interviste agli utenti finali; Osservazione; Metodi sperimentali e test di usabilità; Coinvolgimento partecipativo (partecipatory design); Ma l’utente non è un designer! Spesso l’utente non ha idea di cosa sia effettivamente meglio per sé; L’utente non ha la visione di insieme del progetto (i limiti economici, le necessità “politiche”, i contenuti disponibili, i vincoli tecnologici…); Il ruolo del progettista è riuscire ad interpretare i dati ottenuti dall’analisi degli utenti e, grazie ad essi, fornire risposte adeguate ai problemi di design;

Modelli dell’utente: il metodo delle personae Partendo dalle informazioni raccolte, il designer deve costruire un modello dei potenziali utenti da utilizzare come parametro di riferimento nelle successive fasi del progetto; Il metodo delle personae ha per obiettivo la costruzione di rappresentazioni di classi di utenti specifici, con precisi obiettivi e capacità e calati in precisi contesti d’uso; Una persona è una descrizione di un ipotetico utente che possiede adeguate caratteristiche, possiede determinate competenze e motivazioni e che persegue obiettivi ben precisi in un contesto d’uso plausibile. Sono costruzioni finzionali che si poggiano sui risultati della fase di analisi degli utenti.

Personae: un esempio Paola è una studentessa lavoratrice di Scienze della Comunicazione. Deve ancora sostenere otto esami e la tesi; A causa dei suoi impegni, non può recarsi fisicamente al punto informativo, dunque visita il sito web del CdL per restare aggiornata; Paola vorrebbe poter sapere quali sono i programmi dei corsi e le date degli appelli e vorrebbe poter stampare con facilità le informazioni raccolte; Paola vorrebbe reperire anche le dispense che i docenti hanno utilizzato per preparare le lezioni che non ha potuto frequentare; In merito agli esami da sostenere, Paola vorrebbe essere rassicurata dal docente stesso circa il livello di preparazione richiesto all’esame, il tipo di domande che potrà ricevere, le modalità di preparazione di una tesina ecc. Infine, Paola vorrebbe potersi iscrivere agli esami senza doversi recare tre giorni prima presso il punto informativo (le è difficile ottenere un altro permesso dal suo capo!). Anni 23; Buone competenze informatiche; Si collega da casa con una connessione a 56 Kbit/s;

Personae: utilità Danno “sostanza” al concetto di utente con obiettivi, motivazioni e necessità plausibili anche se finzionali; Danno “complessità” agli ipotetici comportamenti degli utenti; Aiutano chi progetta a delimitare l’ambito del progetto; Costituiscono un parametro per valutare in itinere la qualità del prodotto; Aiutano a non cadere in errori concettuali come il design per i casi limite, il design auto-referenziale o il design indifferenziato; Facilitano il consenso all’interno del team di design: è più chiaro a tutti chi è il destinatario;

Attività #1 Scegliete un sito web e immaginate vi venga chiesto di realizzarne una nuova versione. Provate a costruire una persona che corrisponda ad un ipotetico utente di tale sito. Non limitatevi al vostro punto di vista; provate a coinvolgere amici o compagni di corso che utilizzano il sito da voi scelto e chiedete loro come lo utilizzano e cosa vorrebbero poter trovare nel sito: evidenziate obiettivi e comportamenti ricorrenti; Fornite un profilo verosimile, colorandolo con elementi che diano riconoscibilità e “vita” alla persona : date un nome al vostro personaggio e cercate di attribuire ad esso un volto e una descrizione plausibile. Cercate on-line una fotografia che rappresenti il vostro personaggio; Immaginate un breve elenco di obiettivi che questo personaggio potrebbe avere nell’interazione con il sito; chiedetevi se questi sono coerenti o meno con l’utente che avete descritto e cercate di restringerli a quelli che vi paiono prioritari per quel particolare utente; Siate sintetici : una pagina è più che sufficiente!

Riferimenti D. Norman, “La caffettiera del masochista”, Giunti; A. Cooper, “Il disagio tecnologico”, Apogeo; P. Morvillle, “Ambient Findability”, O’Reilly;

�ݺ�ߣ

Lezione 01/2006

More Related Content

Lezione 01/2006