Grafica ed interfacce per la comunicazione Scienze della Comunicazione A.A. 2013/14

Transcript

1 Grafica ed interfacce per la comunicazione Scienze della Comunicazione A.A. 2013/14 Paola Vocca Lezione 4: Progettazione utente Lucidi tradotti e adattati da materiale presente su e

2 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. 2013/14 2

3 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. 2013/14 3/

4 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. 2013/14 4

5 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. 2013/14 5

6 Un template di progetto Parte Prima: Generalità o o o o o o Descrizione generale del prodotto Obiettivi del prodotto Utenti Contesti d uso Scenari d uso Fattibilità tecnologica Parte Seconda: Posizionamento o o o Situazione attuale Analisi della concorrenza Posizionamento competitivo Parte Terza: 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. 2013/14 6

7 L approccio tradizionale Grafica ed interfacce per la comunicazione A.A. 2013/14 7

8 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. 2013/14 8

9 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. 2013/14 9

10 Il nuovo approccio CALL 3 CALL 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. 2013/14 10

11 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. 2013/14 11

12 Esempio: fuori Che cosa non va? Grafica ed interfacce per la comunicazione A.A. 2013/14 12

13 Esempio: (dentro) Grafica ed interfacce per la comunicazione A.A. 2013/14 13

14 Interaction design Interazione cognitiva Oggetto interattivo Interazione fisica Utente Grafica ed interfacce per la comunicazione A.A. 2013/14 14

15 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 15

16 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 Grafica ed interfacce per la comunicazione A.A. 2013/

17 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 17

18 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 quesro corso.quindi deve essere ben compresa di solito, questo non succede! Grafica ed interfacce per la comunicazione A.A. 2013/14 18

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

20 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 20

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

22 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 22

23 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 23

24 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 24

25 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. 2013/14 25

26 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. 2013/14 26

27 Casi d'uso Requisiti scaricabili da Grafica ed interfacce per la comunicazione A.A. 2013/14 27

28 Struttura di navigazione Grafica ed interfacce per la comunicazione A.A. 2013/14 28

29 Prototipo (Power Point) Grafica ed interfacce per la comunicazione A.A. 2013/14 29

30 SOS Aiuto (iphone) Grafica ed interfacce per la comunicazione A.A. 2013/14 30

31 SOS Emergenze (iphone) Grafica ed interfacce per la comunicazione A.A. 2013/14 31

32 SOS Emergenze (iphone) Grafica ed interfacce per la comunicazione A.A. 2013/14 32

33 SOS Emergenze (iphone) Grafica ed interfacce per la comunicazione A.A. 2013/14 33

34 S.O.S. (iphone) Grafica ed interfacce per la comunicazione A.A. 2013/14 34

35 Emergenze (iphone) Grafica ed interfacce per la comunicazione A.A. 2013/14 35

36 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. 2013/14 36

37 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. 2013/14 37

38 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. 2013/14 38

39 Esempio: cellulare Grafica ed interfacce per la comunicazione A.A. 2013/14 39

40 Grafica ed interfacce per la comunicazione A.A. 2013/14 40

41 Grafica ed interfacce per la comunicazione A.A. 2013/14 41

42 Grafica ed interfacce per la comunicazione A.A. 2013/14 42

43 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. 2013/14 43

44 Descrizione di un caso d uso Caso d uso incluso Esempio Grafica ed interfacce per la comunicazione A.A. 2013/14 44

45 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? 45 Grafica ed interfacce per la comunicazione A.A. 2013/14 45

46 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. 2013/

47 Contenitore per acqua minerale: una possibile proposta Grafica ed interfacce per la comunicazione A.A. 2013/14 47

48 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 Grafica ed interfacce per la comunicazione A.A. 2013/14 48

49 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: o Contesto, concretezza, visione oggettiva o Mettono in evidenza requisiti inespressi 49 Grafica ed interfacce per la comunicazione A.A. 2013/14 49

50 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 50 Grafica ed interfacce per la comunicazione A.A. 2013/14 50

51 Scenari d uso: esempi Esempi di scenari d uso per device mobili, realizzati con semplici video: o (2 ) o (1 ) 51 Grafica ed interfacce per la comunicazione A.A. 2013/14 51

52 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) 52 Grafica ed interfacce per la comunicazione A.A. 2013/14 52

53 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. 2013/14 53

54 Esempio 54 Grafica ed interfacce per la comunicazione A.A. 2013/14 54

55 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. 55 Grafica ed interfacce per la comunicazione A.A. 2013/14 55

56 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). 56 Grafica ed interfacce per la comunicazione A.A. 2013/14 56

57 tecnologie inadeguate Accessibilità Un sistema si dice accessibile se minimizza le barriere all accesso Grafica ed interfacce per la comunicazione A.A. 2013/14 57

58 Accessibilità Linee guida della WAI (Web Accessibility Initiative), o un gruppo di lavoro costituito dal W3C, il consorzio per il web diretto da Tim Berners-Lee. Il WAI ha generato il WCAI (Web Content Accessibility Initiative). Il WCAI ha rilasciato a più riprese una serie di documenti contenenti principi e linee guida cui attenersi per realizzare contenuti web che siano accessibili al maggior numero di persone possibili. Secondo le linee guida i contenuti dovrebbero essere accessibili da utenti con vari gradi di disabilità fisiche e cognitive, il che porta come beneficio accessorio una maggior facilità di visualizzazione anche per chi ha dotazioni software e hardware minoritarie. Grafica ed interfacce per la comunicazione A.A. 2013/14 58

59 Accessibilità- disabilità Le disabilità vanno o dall'impossibilità a dirigere un mouse, fino a cecità totali o selettive ai colori, per arrivare ai non vedenti veri e propri. L'incidenza di queste disabilità nella società è più ampia di quanto si pensi Secondo le stime del WAI, gli utenti interessati in qualche modo a questi problemi variano dal 10% al 20% della popolazione. Si pone dunque un reale problema di democrazia dell'accesso alle risorse di rete.. Grafica ed interfacce per la comunicazione A.A. 2013/14 59

60 Accessibilità - dotazioni hw Per quanto riguarda le dotazioni hardware/software, o la variabilità va da computer molto vecchi e lenti, fino ai nuovissimi dispositivi portatili, come palmari o cellulari di ultima generazione. o La variabilità di visualizzazione che è comunque una regola nel web, diventa ancora più grande se pensiamo che questi dispositivi hanno browser dedicati, display piccolissimi e un numero di colori spesso più basso di quello cui ci siamo abituati con i recenti monitor da tavolo Grafica ed interfacce per la comunicazione A.A. 2013/14 60

61 Accessibilità, ma come? l'approccio del WAI è molto razionale e realistico. Si fonda su un principio fondamentale: o non tutti possono vedere allo stesso modo tutto, ma il nocciolo del contenuto dovrebbe comunque essere reso accessibile a tutti. In pratica, secondo il WAI le pagine web dovrebbero essere costruite secondo 2 criteri: o consentire un'elegante trasformazione della pagina (da parte di browser particolari) o i contenuti dovrebbero essere resi facilmente navigabili e comprensibili (che è il principale obiettivo dell'usabilità) Grafica ed interfacce per la comunicazione A.A. 2013/14 61

62 Accessibilità un testo può essere reso accessibile ad un utente cieco attraverso un browser vocale che lo legga, anche un'immagine o una tabella di dati possono essere descritte dallo stesso software (Il progettista della pagina abbia costruito il codice in modo appropriato tramite il testo alternativo). L'accessibilità si basa in larga parte sui concetti di compatibilità e portabilità del codice. Il WCAI entra anche nel merito della strutturazione e della comprensibilità dei contenuti: aree delle quali, guarda caso, si occupa anche l'usabilità. Grafica ed interfacce per la comunicazione A.A. 2013/14 62

63 Accessibilità in Italia In Italia la verifica tecnica di accessibilità si basa sulla metodologia indicata nell'allegato A del Decreto Ministeriale 8 luglio 2005 e resa disponibile assistenza nell'eventuale percorso di certificazione di accessibilità per la richiesta al CNIPA del logo di accessibilità. Grafica ed interfacce per la comunicazione A.A. 2013/14 63

64 Accessibilità e usabilità Per usabilità si intende "il grado in cui un prodotto può essere usato da specifici utenti per raggiungere specifici obiettivi con efficacia, efficienza e soddisfazione in uno specifico contesto d'uso" (definizione data dallo standard ISO , Ergonomic requirements for office work with visual display terminals - Guidance on usability). Progettare un sito o un'applicazione web secondo criteri di usabilità implica che i suoi contenuti e le sue funzionalità siano facilmente reperibili e fruibili dai suoi utenti. Un portale può contenere tante funzionalità, servizi e risorse utili, ma se queste risorse non sono organizzate secondo le aspettative e gli effettivi bisogni dei destinatari, possono risultare addirittura introvabili e, di fatto, inutilizzate. Un progetto di usabilità evita questa ed altre spiacevoli evenienze e fa sì che l'utente sia gratificato dall'esperienza d'uso e di navigazione, che ne tragga beneficio e che ripeta l'esperienza. Grafica ed interfacce per la comunicazione A.A. 2013/14 64

65 Accessibilità e usabilità Per accessibilità, invece, si intende la realizzazione di un sito web che favorisca la fruizione e l'interazione rispettando le esigenze e le preferenze degli utenti, senza esclusioni. Un sito accessibile porta inoltre grandi benefici a tutti gli utenti, perché rende possibile la fruizione indipendentemente dalle condizioni ambientali (ad esempio in luoghi rumorosi o male illuminati), dagli strumenti di navigazione (ad esempio dispositivi mobili, postazioni prive di mouse, browser testuali), dall'età (ad esempio agli anziani) o da altre limitazioni quali la disponibilità di banda Grafica ed interfacce per la comunicazione A.A. 2013/14 65

66 Usabilità vs accessibilità Utenti per cui il sistema è usabile Utenti per cui il sistema è accessibile Grafica ed interfacce per la comunicazione A.A. 2013/14 66

67 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. 2013/14 67

68 Usabilità universale contesto d uso usabilità universale particolare generale usabilità specifici generici utenti Grafica ed interfacce per la comunicazione A.A. 2013/14 68

69 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. 2013/14 70

70 Progettazione universale A B C Grafica ed interfacce per la comunicazione A.A. 2013/14 71

71 In sintesi: Human Centred Design (HCD) Mettere l utente al centro del processo di progettazione Grafica ed interfacce per la comunicazione A.A. 2013/14 72

72 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. 2013/14 73

73 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. 2013/14 75

74 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. 2013/14 76

75 Quale di questi prodotti è più invisibile? Grafica ed interfacce per la comunicazione A.A. 2013/14 77

76 Esercizio Individuare almeno 5 prodotti invisibili che usate quotidianamente Grafica ed interfacce per la comunicazione A.A. 2013/14 78

77 Sulla carta forse funziona, ma... provare è indispensabile Grafica ed interfacce per la comunicazione A.A. 2013/14 83

78 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. 2013/14 84