Grafica ed interfacce per la comunicazione Scienze della Comunicazione A.A. 2014/15

Grafica ed interfacce per la comunicazione Scienze della Comunicazione A.A. 2014/15 Paola Vocca Lezione 5: Progettazione utente Lucidi tradotti e adattati da materiale presente su http://www.hcibook.com/e3/resources/ e http://www.robertopolillo.it

Scopo di questa lezione Introdurre, con esempi, il concetto di progettazione human-centred (HCD), per progettare sistemi usabili Grafica ed interfacce per la comunicazione A.A. 2014/15 2

Ciclo di vita di un sistema informativo Comprende tutte le attività svolte da analisti, progettisti, utenti, esperti della comunicazione nello sviluppo e utilizzazione dei sistemi informativi E un attività iterativa... un ciclo di operazioni o spesso durante l esecuzione di una attività occorre rivedere decisioni prese nelle attività precedenti Grafica ed interfacce per la comunicazione A.A. 2014/15 3

Ciclo di vita di un sistema informativo 2 nascita dell'esigenza: tende a migliorare la situazione esistente tramite il perseguimento di determinati obiettivi. studio di fattibilità: serve a definire in maniera per quanto possibile precisa i costi delle varie alternative possibili, ad effettuare la conseguente analisi costi/benefici ed a stabilire le priorità della realizzazione delle varie componenti del sistema. raccolta e analisi dei requisiti: consiste nell'individuazione e nello studio delle proprietà e delle funzionalità che il sistema informativo dovrà avere. Questa fase richiede un'interazione con gli utenti del sistema e produce una descrizione completa ma generalmente informale dei dati coinvolti e delle operazioni su di essi. Vengono inoltre stabiliti i requisiti software e hardware del sistema informativo. Grafica ed interfacce per la comunicazione A.A. 2014/15 4

Ciclo di vita di un sistema informativo 3 progettazione: si divide generalmente in progettazione dei dati, progettazione delle applicazioni e progettazione dell'architettura tecnica di sistema. Nella prima si individua la struttura e l'organizzazione che i dati dovranno avere, nella seconda si definiscono le caratteristiche dei progetti applicativi. Queste due attività sono complementari e possono procedere in parallelo o in cascata. Le descrizioni dei dati e delle applicazioni prodotte in questa fase sono formali e fanno riferimento a specifici modelli. La progettazione dell'architettura tecnica di sistema, infine, rappresenterà l'infrastruttura individuandone le caratteristiche in termini di sistemi (server), connettività, sicurezza fisica e logica. Questa fase è strettamente dipendente dal sistema che si sta realizzando Nel caso dei sistemi interattivi non può prescindere dalla definizione dei casi d uso e degli scenari d uso, e dal designdell interfaccia Grafica ed interfacce per la comunicazione A.A. 2014/15 5

Ciclo di vita di un sistema informativo 4 realizzazione: consiste nella realizzazione del sistema informativo secondo la struttura e le caratteristiche definite nella fase di progettazione. Viene costruita e popolata la base di dati e viene prodotto il codice dei programmi. (non riguarda le vostre attività) validazione e collaudo: serve a verificare il corretto funzionamento e la qualità del sistema informativo. La sperimentazione deve prevedere, per quanto possibile, tutte le condizioni operative. o Nella validazione di un sistema interattivo è molto importante la valutazione dell usabilità e dell accessibilità Grafica ed interfacce per la comunicazione A.A. 2014/15 6

Ciclo di vita di un sistema informativo 5 avviamento: è la fase di messa in funzione del sistema. Si erogano i corsi di formazione, si travasano i dati da eventuali realizzazioni preesistenti che vengono sostituite, si attivano i collegamenti con le altre applicazioni e si parte con l'operatività reale. funzionamento: in questa fase il sistema informativo diventa operativo a regime ed esegue i compiti per i quali era stato originariamente progettato. Se non si verificano malfunzionamenti o revisioni delle funzionalità del sistema, questa attività richiede solo operazioni di gestione e manutenzione. manutenzione: con la manutenzione correttiva si consolida il sistema, mentre con la manutenzione evolutiva lo si completa ed arricchisce di funzionalità inizialmente non individuate. (Fornire aggiornamenti) Grafica ed interfacce per la comunicazione A.A. 2014/15 7

Fasi preliminari alla progettazione Raccolta dei requisiti Produzione di una serie di documenti che definiscono l ambito del nostro progetto Dalla raccolta dei requisiti dovranno scaturire i seguenti documenti: Obiettivi del prodotto Utenti Contesti d uso Scenari d uso Fattibilità tecnologica Situazione attuale Analisi della concorrenza Posizionamento competitivo (identificare i punti di forza e debolezza del progetto in relazione alla concorrenza Grafica ed interfacce per la comunicazione A.A. 2014/15 8

Progettare vs realizzare PROGETTARE (dal lat. proicere, gettare avanti; in inglese: to design ) immaginare, ideare qualcosa e studiare il modo di attuarla REALIZZARE (dal lat. res, realtà) rendere reale qualcosa, attuandola praticamente Grafica ed interfacce per la comunicazione A.A. 2014/15 9/

Progettare Ciò che esiste Ciò che vogliamo che esista Conoscenza della situazione attuale Bisogni, desideri Descrizione della situazione desiderata Visione Grafica ed interfacce per la comunicazione A.A. 2014/15 10

Requisiti di prodotto Dal latino requisitus =richiesto I requisiti di prodotto 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 Grafica ed interfacce per la comunicazione A.A. 2014/15 11

Un template di progetto La documentazione da produrre dovrà seguire il seguente schema Parte Prima: Generalità o Nome del progetto o Team di lavoro o Descrizione generale del prodotto o Obiettivi del prodotto o Utenti o Contesti d uso o Scenari d uso o Fattibilità tecnologica o Descrizione di una possibile evoluzione temporale del progetto Parte Seconda : Gannt o Descrizione della tempistica e delle diverse attività necessarie per la realizzazione del progetto Parte Terza: Posizionamento o Situazione attuale o Analisi della concorrenza o Posizionamento competitivo (identificare i punti di forza e debolezza del progetto in relazione alla concorrenza) Parte Quarta: Requisiti o Casi d uso o Analisi dei compiti o Requisiti per la esperienza utente o Altri requisiti Riferimenti Grafica ed interfacce per la comunicazione A.A. 2014/15 12

L approccio tradizionale Grafica ed interfacce per la comunicazione A.A. 2014/15 13

L approccio tradizionale Es.: Ascensore - Andare al piano n - Aprire / chiudere porta - Fermarsi - Inviare allarme Ci chiediamo quali funzioni il sistema deve fornire al suo utente, le progettiamo e le realizziamo (Progettazione orientata al sistema) Grafica ed interfacce per la comunicazione A.A. 2014/15 14

Il nuovo approccio Es.: Ascensore - Andare al piano n - Aprire / chiudere porta - Fermarsi - Inviare allarme Es.: Ascensore - Chiama l'ascensore - Entra nell'ascensore - Seleziona un piano - Ferma l'ascensore - Chiede aiuto - Esce dall'ascensore Ci chiediamo quali sono i «casi d uso» dell utente rispetto al sistema... (Progettazione orientata all'utente) Grafica ed interfacce per la comunicazione A.A. 2014/15 15

Il nuovo approccio CALL 3 CALL 2 3 2 1 Es.: Ascensore - Chiama l'ascensore - Entra nell'ascensore - Seleziona un piano - Ferma l'ascensore - Chiede aiuto - Esce dall'ascensore 0 Stop Alarm e progettiamo l interazione di conseguenza (Interaction Design) Grafica ed interfacce per la comunicazione A.A. 2014/15 16

Esempio: Un altro ascensore Casi d'uso - Chiama l'ascensore per scendere per salire - Entra nell'ascensore - Seleziona un piano - Ferma l'ascensore - Chiede aiuto - Apre porte - Chiude porte - Esce dall'ascensore Fuori Dentro Grafica ed interfacce per la comunicazione A.A. 2014/15 17

Esempio: fuori Che cosa non va? Grafica ed interfacce per la comunicazione A.A. 2014/15 18

Esempio: (dentro) Grafica ed interfacce per la comunicazione A.A. 2014/15 19

Interaction design Interazione cognitiva Oggetto interattivo Interazione fisica Utente Grafica ed interfacce per la comunicazione A.A. 2014/15 20

La nozione di caso d uso Un caso d uso è un insieme di interazioni finalizzate a uno scopo utile per l utente, fra l utente (o più utenti) e il sistema SÌ: Chiama l'ascensore NO: Preme il pulsante di chiamata Grafica ed interfacce per la comunicazione A.A. 2013/14 21 Grafica ed interfacce per la comunicazione A.A. 2014/15 21

Diagrammi dei casi d uso Chiama l'ascensore Utente al piano Entra in ascensore Seleziona un piano Ferma ascensore Utente in ascensore Chiama aiuto Esci da ascensore Addetto alla sorveglianza ed per la A.A. 2013/14 22 Grafica ed interfacce per la comunicazione A.A. 2014/15 22

I casi d'uso vanno pensati per l'utente Identificare l'utente/utenti (CLASSE DI UTENZA) (chi è? quali caratteristiche?) Identificare i bisogni (espressi / inespressi) (che cosa gli serve? perché?) Identificare il contesto d'uso (dove? quando? in che situazione?) Identificare i casi d'uso Analizzare i compiti Descrivere i casi d'uso in termini di compiti elementari Grafica ed interfacce per la comunicazione A.A. 2013/14 23 Grafica ed interfacce per la comunicazione A.A. 2014/15 23

Due approcci diversi Progettazione a partire dalle funzioni del sistema Progettazione a partire dai casi d'uso Sono due approcci completamente diversi, che conducono a risultati completamente diversi! NB: La nozione di caso d uso è, dopo la nozione di usabilità, quella più importante di tutto questo corso.quindi deve essere ben compresa di solito, questo non succede! Grafica ed interfacce per la comunicazione A.A. 2013/14 24 Grafica ed interfacce per la comunicazione A.A. 2014/15 24

Esempio: il mio sistema HIFI Telecomando universale circa 200 pulsanti (+ 70 sui pannelli frontali) + 48 pulsanti = 320 Grafica Grafica ed ed interfacce interfacce per per la la comunicazione A.A. A.A. 2013/14 2014/15 25 25

Esempio: il mio sistema HiFi Fornisce tutte le funzioni che mi servono: TV, TV satellitare, player DVD, player CD musicali, radio, player e recorder VHS,, player dischi vinile Ma ogni componente viene comandato separatamente, mediante un pannello di controllo frontale posto sul componente, o da remoto (con uno specifico telecomando ne servono 5!) Invece io desidero usare servizi che sono realizzate dalla cooperazione di più componenti (es. guardare un film sulla TV satellitare) e non voglio sapere quali componenti sono coinvolti e come Grafica ed interfacce per la comunicazione A.A. 2013/14 26 Grafica ed interfacce per la comunicazione A.A. 2014/15 26

Disegno cortesia di Alberto Iobbolo Grafica ed interfacce per la comunicazione A.A. 2013/14 27 Grafica ed interfacce per la comunicazione A.A. 2014/15 27

Il mio sistema HI-FI: Analisi dei casi d uso Molto spesso: Vedere il telegiornale delle 20,30 Vedere i programmi satellitari alle 21 Spesso: Ascoltare CD audio (mentre lavoro al computer) Raramente: Ascoltare CD audio Vedere DVD Grafica ed interfacce per la comunicazione A.A. 2013/14 28 Grafica ed interfacce per la comunicazione A.A. 2014/15 28

Il mio sistema HI-FI: Analisi del contesto TV PRANZO Qui vedo il telegiornale Qui vedo gli altri programmi e i DVD Qui ascolto musica mentre lavoro DIVANO TV MIA SCRIVANIA SISTEMA HIFI Grafica ed interfacce per la comunicazione A.A. 2013/14 29 Grafica ed interfacce per la comunicazione A.A. 2014/15 29

La soluzione (diversa da quella fornita) Azione telecomando TV PRANZO Ripetitore di segnale DIVANO TV MIA SCRIVANIA SISTEMA HIFI Web radio Grafica ed interfacce per la comunicazione A.A. 2013/14 30 Grafica ed interfacce per la comunicazione A.A. 2014/15 30

Esempio: Progetto Help! Applicazione per smartphone (touch screen e GPS, internet) che permette di: o Effettuare chiamate di emergenza automatiche (voce sintetizzata) o Trovare punti di interesse nelle vicinanze (farmacie, ospedali, guardie mediche, e stazioni di polizia) o Consultare una guida online di pronto soccorso Grafica ed interfacce per la comunicazione A.A. 2014/15 31

Utenti e contesto Utenti generici del cellulare (ogni età, normodotati) Contesti di emergenza Copertura cellulare e GPS (?) Grafica ed interfacce per la comunicazione A.A. 2014/15 32

Casi d'uso Requisiti scaricabili da http://bit.ly/vsa0lr Grafica ed interfacce per la comunicazione A.A. 2014/15 33

Struttura di navigazione Grafica ed interfacce per la comunicazione A.A. 2014/15 34

Prototipo (Power Point) Grafica ed interfacce per la comunicazione A.A. 2014/15 35

SOS Aiuto (iphone) Grafica ed interfacce per la comunicazione A.A. 2014/15 36

SOS Emergenze (iphone) Grafica ed interfacce per la comunicazione A.A. 2014/15 37

S.O.S. (iphone) Grafica ed interfacce per la comunicazione A.A. 2014/15 40

Emergenze (iphone) Grafica ed interfacce per la comunicazione A.A. 2014/15 41

La nozione di caso d uso Un caso d uso è un insieme di interazioni finalizzate a uno scopo utile per l utente, fra l utente (o più utenti) e il sistema Esempio: Guardare il telegiornale Grafica ed interfacce per la comunicazione A.A. 2014/15 42

Come si analizzano i casi d uso Un caso d uso ha un nome e una descrizione Spesso, verbo + complemento oggetto Chiama l ascensore al piano Seleziona canale televisivo Acquista prodotto Prenota volo Iscriviti al forum Grafica ed interfacce per la comunicazione A.A. 2014/15 43

Casi d uso e funzionalità Sono due cose completamente diverse - In un caso d uso il soggetto è l utente Es.: Ascoltare un CD - Una funzionalità è una prestazione realizzata dal sistema Es.: Acquisizione del CD Un caso d uso viene realizzato solitamente mediante più funzionalità del sistema Grafica ed interfacce per la comunicazione A.A. 2014/15 44

Esempio: cellulare Grafica ed interfacce per la comunicazione A.A. 2014/15 45

Grafica ed interfacce per la comunicazione A.A. 2014/15 46

Diagrammi dei casi d uso ATTORE: Utente CASO D USO: Acquista prodotto significa: L Utente invoca il caso d uso Acquista prodotto Grafica ed interfacce per la comunicazione A.A. 2014/15 49

Esempio 50 Grafica ed interfacce per la comunicazione A.A. 2014/15 50

Descrizione di un caso d uso Nei requisiti, inseriamo la descrizione di tutti i casi d uso Descrizione informale, in italiano(non esiste uno standard) Indica al progettista che cosa si intende (descrizione «a grana grossa») Tipicamente: o Scenario principale di successo o Estensioni Grafica ed interfacce per la comunicazione A.A. 2014/15 51

Descrizione di un caso d uso Caso d uso incluso Esempio Grafica ed interfacce per la comunicazione A.A. 2014/15 52

Definizione dei requisiti: temi principali Analisi dell utente: a quali utenti è destinato il prodotto? Analisi dei bisogni: quali sono le necessità di tali utenti? Analisi del contesto: quale sarà il contesto d uso del prodotto? Analisi dei casi d uso: in quali modi i diversi utenti interagiranno con il prodotto? Analisi della concorrenza: quali sono i punti di forza e di debolezza rispetto ai prodotti concorrenti? 53 Grafica ed interfacce per la comunicazione A.A. 2014/15 53

Esempio: progetto di un contenitore per acqua minerale Utenti: A. Generico consumatore di acqua minerale B. Trasportatori di confezioni multiple Bisogni: Trasporto e stoccaggio più efficienti Contesto d uso: A. Acquisto in supermercato o in negozio A. Conservazione in frigorifero A. Consumo in tavola B. Trasporto ai punti di vendita in furgoni Casi duso: A-B. Trasporto manuale di confezione multipla A. Estrazione del contenitore singolo dalla confezione multipla A. Trasporto manuale di contenitore singolo A. Stoccaggio/estrazione nel/dal frigorifero A. Apertura e chiusura del contenitore A. Mescita nel bicchiere A. Schiacciamento verticale per dismissione Grafica ed interfacce per la comunicazione A.A. 2014/15 54 54

Contenitore per acqua minerale: una possibile proposta Grafica ed interfacce per la comunicazione A.A. 2014/15 55

Nota L esempio è tratto, con adattamenti, dall articolo: E. Attaianese, Il controllo dell usabilità per il design del packaging di prodotti di consumo, Atti del VII Congresso Nazionale della Società Italiana di Ergonomia, Firenze, Settembre 2001 56 Grafica ed interfacce per la comunicazione A.A. 2014/15 56

Scenari d uso Storie immaginarie d uso del sistema da parte di persone fittizie, ma concrete, che rappresentano bisogni, contesti e modalità d uso tipiche del sistema da progettare («personae») Gli scenari «mettono in scena» una serie di casi d'uso, collocandoli nel contesto: Contesto, concretezza, visione oggettiva Mettono in evidenza requisiti inespressi 57 Grafica ed interfacce per la comunicazione A.A. 2014/15 57

Alcune difficoltà nella progettazione Tendiamo a concentrarci sull oggetto della progettazione, trascurando il contesto d uso Tendiamo a vedere noi stessi come utenti tipici: e quindi progettiamo per noi stessi, e questo è sbagliato D altro canto, se pensiamo agli utenti come semplici ruoli immaginari, rischiamo di mancare di concretezza Gli scenari d'uso servono proprio ad aiutarci a progettare per utenti concreti, diversi da noi stessi 58 Grafica ed interfacce per la comunicazione A.A. 2014/15 58

Scenari d uso: esempi Esempi di scenari d uso per device mobili, realizzati con semplici video: o http://www.youtube.com/watch?v=ljli4aw897u (2 ) o http://www.youtube.com/watch?v=htw-uoaqz8s (1 ) 59 Grafica ed interfacce per la comunicazione A.A. 2014/15 59

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 prodotto nella particolare situazione Possono essere realizzati con tecniche diverse (testi / immagini / video) 60 Grafica ed interfacce per la comunicazione A.A. 2014/15 60

Scenari d uso: esempio Progettazione di un sistema di prenotazione via web per un albergo di prima categoria di Catania. Persona: Luigi è un ingegnere di 35 anni, sposato, lavora in una società edile. Viaggia spesso per lavoro o vacanza, in Italia e all estero, e si tratta bene. Non è mai stato in Sicilia. Scenario d uso: Luigi deve andare a Catania per lavoro. Desidera prenotare una camera in un albergo di prima categoria vicino alla filiale della sua azienda, che si trova in centro, ad un passo da Piazza del Duomo. Deve pagare con carta American Express intestata all azienda, per la politica aziendale. Starà a Catania due notti, forse tre (non lo sa ancora, dipende dall esito di una trattativa). Preferisce alberghi moderni, e desidera una camera doppia per uso singolo. 61 Grafica ed interfacce per la comunicazione A.A. 2014/15 61

Scenari d uso: esempio (segue) Lo scenario contiene molti requisiti impliciti. Infatti, per accontentare Luigi, il sito dovrebbe: o visualizzare sulla mappa di Catania gli alberghi di prima categoria; o mostrare la mappa in modo che Piazza del Duomo sia facilmente individuabile (Luigi non conosce Catania); o mostrare delle fotografie dell albergo (Luigi preferisce alberghi moderni); o permettere di prenotare camere doppie ad uso singolo; o accettare carte American Express; o non addebitare subito l intero importo del soggiorno (Luigi dovrà probabilmente prenotare tre notti, e riservarsi di liberare in seguito la camera per la terza notte). 62 Grafica ed interfacce per la comunicazione A.A. 2014/15 62

Progettazione universale L usabilità di un sistema è relativa a una situazione specifica. Come può un progettista progettare un sistema usabile per tutti (usabilità universale)? È molto difficile. Può però cercare di soddisfare le esigenze più diffuse, e fornire la possibilità di personalizzare il sistema (progettazione universale) o (anticipazione cambiamento) Grafica ed interfacce per la comunicazione A.A. 2014/15 63

Usabilità universale contesto d uso usabilità universale particolare generale usabilità specifici generici utenti Grafica ed interfacce per la comunicazione A.A. 2014/15 64

Progettazione Universale "Progettazione Universale" o "Design for all", prevede principi e metodi che tengono conto dell'esistenza di diverse tipologie di utenti (tra cui quelli con disabilità) e dei diversi contesti d'uso (tra cui l'uso delle tecnologie assistive da parte degli utenti con disabilità). Prevede interfacce di complessità scalabile, la personalizzazione delle interazioni alle preferenze degli utenti e la personalizzazione delle modalità di presentazione dell'informazione. Grafica ed interfacce per la comunicazione A.A. 2014/15 66

Progettazione universale A B C Grafica ed interfacce per la comunicazione A.A. 2014/15 67

In sintesi: Human Centred Design (HCD) Mettere l utente al centro del processo di progettazione Grafica ed interfacce per la comunicazione A.A. 2014/15 68

Interdisciplinarietà dell Interaction Design (ID) Psicologia (studia i processi mentali dell uomo) Linguistica (ne studia il linguaggio) Sociologia (ne studia i comportamenti sociali) Ergonomia (studia l interazione con gli strumenti di lavoro) Marketing (studia i fenomeni di mercato) Informatica (studia le possibilità dei computer) Grafica ed interfacce per la comunicazione A.A. 2014/15 69

Livelli di maturità della progettazione PRIMO LIVELLO: Il prodotto funziona SECONDO LIVELLO: Il prodotto fornisce le funzioni richieste (system centered design) TERZO LIVELLO: Il prodotto è facile da imparare e da usare (human centred design) QUARTO LIVELLO: Il prodotto è invisibile durante l uso Grafica ed interfacce per la comunicazione A.A. 2014/15 70

Un prodotto invisibile Quando uso un prodotto invisibile, penso al compito che sto svolgendo, e non al prodotto Il prodotto invisibile diventa visibile solo quando c è qualcosa che non va Grafica ed interfacce per la comunicazione A.A. 2014/15 71

Quale di questi prodotti è più invisibile? 1 2 3 4 5 Grafica ed interfacce per la comunicazione A.A. 2014/15 72

Esercizio Individuare almeno 5 prodotti invisibili che usate quotidianamente Grafica ed interfacce per la comunicazione A.A. 2014/15 73

Sulla carta forse funziona, ma... provare è indispensabile Grafica ed interfacce per la comunicazione A.A. 2014/15 75

In sintesi Nel progettare un oggetto interattivo, non basta progettarne le funzioni, dobbiamo progettare l interazione fra l oggetto e il suo utente, partendo dai casi d uso L obiettivo è di raggiungere la massima usabilità per specifici insiemi di utenti se possibile per tutti Progettare sistemi usabili richiede competenze e professionalità specifiche, e un atteggiamento multidisciplinare La valutazione della usabilità di un oggetto non può prescindere dall utente Verificare l accessibilità Grafica ed interfacce per la comunicazione A.A. 2014/15 76