2. Progettazione iterativa

Progettazione per prototipi successiviCorso di Interazione Uomo MacchinaAA 2014-2015

Roberto Polillo

Corso di laurea in InformaticaUniversità di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione

Edizione 2014-15

Queste slides…

… si basano sul libro “Facile da usare”, dell’autore, dove si trovano tutte le necessarie spiegazioni. Vedi www.rpolillo.it

Queste slide sono disponibili con licenza Creative Commons (attribuzione, non commerciale, condividi allo stesso modo) a chiunque desiderasse utilizzarle, per esempio a scopo didattico, senza necessità di preventiva autorizzazione:

http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it

La licenza non si estende alle immagini fotografiche e alle screen shots, i cui diritti restano in capo ai rispettivi proprietari, che sono stati indicati, ove possibile, nelle didascalie del libro. L’autore si scusa per eventuali omissioni, e resta a disposizione per correggerle.

R.Polillo - Marzo 20152

http://www.rpolillo.it/

http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it

Scopo di questa lezione


3

Discutere il processo di progettazione e sviluppo di sistemi interattivi per prototipi successivi, e indicare alcune semplici tecniche di prototipazione

L’ingegneria del software


4

La disciplina che si occupa de problemi tecnici e di gestione dello sviluppo dei sistemi software

Studia, tra l’altro, i vari modelli dei processi di progettazione e sviluppo dei sistemi software

Il modello tradizionale di progettazione e sviluppo


5

Requisiti

Analisi e progettazione

Realizzazione

Test

Rilascio

Modello “a cascata”: dopo una decisione, non si torna indietro

Test


6

Termine generico che denota due tipi di controlli diversi:

Verifica (verification)controllo che il prodotto sia congruente con quanto specificato (“make the thing right”)

Convalida (validation)controllo che il prodotto soddisfi effettivamente i bisogni del suo utente(“make the right thing”).

La convalida è molto più difficile della verifica, e richiede il coinvolgimento dell’utente

Modello tradizionale: pro e contro


7

PRO: fasi logiche ben definite ogni fase fornisce gli input alla fase successiva possibilità di mettere check-point fra una fase e l’altra processo (apparentemente) ben controllabile

CONTRO: il sistema prodotto si vede solo alla fine, e può non

essere soddisfacente Gli utenti sono coinvolti solo all'inizio (requisiti) e alla

fine (test) il modello è concettualmente sbagliato, e non

funziona…

Il modello corretto (iterativo)


8

Sviluppo per prototipi successivi

Prototi-pazione

TestProget-tazione

Inizio

Rilascio

Requisiti

NOTA BENE: anche i requisiti

evolvono durante il processo!

Modello iterativo: pro e contro


9

PRO: Il prodotto si vede (anche se in modo parziale), fin dall’inizio e viene

perfezionato per aggiustamenti successivi le scelte effettuate possono essere sperimentate anticipatamente: si

possono scartare quelle sbagliate è il modello concettualmente corretto per la realizzazione di sistemi

complessiCONTRO: Difficoltà di stima dei costi a preventivo Si rischia di far divergere il processo, per troppe richieste di

modifiche La fluidità delle specifiche rende più difficile la comunicazione fra le

persone coinvolte (team di progetto, committente)

Meglio: rappresentazione "a spirale"


10

Requisiti

Progettazione

Realizzazione

Test

Prototipi successivi

Rilascio fnale

User Centred Design (UCD)


11

Requisiti

Progettazione

Realizzazione

Test

Prototipi successivi

Rilascio fnale

Coinvolgimento dell'utente

In alcuni metodi, l'utente viene coinvolto anche qui

ISO 13407: “Human-centred design process for interactive systems”


12

Identifica le necessità per la progettazione

centrata sull’utente

Comprendi e specifica il

contesto d’uso

Specifica i requisiti dell’utente e

dell’organizzazioneValuta il progetto

rispetto ai requisiti

Produci soluzioni di progetto

il sistema soddisfa i requisiti dell’utente e

dell’organizzazione

Il documento dei requisiti

Descrive in forma organica le proprietà richieste al sistema da realizzare

Non solo requisiti funzionali (…!)


13

Il documento dei requisiti che dovete fare voi

Parte Prima: Generalità Descrizione generale del prodotto Obiettivi del prodotto Utenti Contesti d’uso Scenari d’uso Fattibilità tecnologicaParte Seconda: Posizionamento Situazione attuale Analisi della concorrenza Posizionamento competitivoParte Terza: Requisiti Casi d’uso Requisiti per la esperienza utente Altri requisitiRiferimenti


Valutato su forma e contenuti

14

Sintetico ma completo, ben strutturato,

Userete un template PowerPoint molto semplice, da personalizzare

Progettazione

Si utilizzano diversi strumenti di rappresentazione:Informali (es. schizzi, storyboard, diagrammi)Formali (es. diagrammi UML)


15

Diagrammi informali: navigazione


16

Storyboard


17

Prototipi

Proto-typos: "primo modello"

Modello aprossimato o parziale del sistema in corso di sviluppo, realizzato per valutarne le caratteristiche e, se necessario, "aggiustare il tiro"


18

Perchè creare prototipi?


19

Per avere un rapido feedback sul progetto, effettuando dei test iniziali di convalida con l’utente

Per sperimentare design alternativi Per migliorare il progetto prima e durante la

sua realizzazione

I test con l’utente fanno parte del processo di progettazione

Prototipi: differenti scopi


20

Ruoloper sperimentare il ruolo del prodotto nella vita del suo utente

User experienceper sperimentare l'esperienza dell’uso del prodotto

Implementazioneper sperimentare tecniche e componenti usati nella realizzazione del prodotto

Prototipi interattivi e non


21

I prototipi più utili sono quelli interattivi, perché possono essere utilizzati per test con gli utenti

Questi sono essenziali per valutare la usabilità del prodotto in corso di progettazione

Attenzione: l’interazione non può essere descritta a parole e immaginata: l’utente deve “metterci le mani sopra”

Prototipi non interattivi: esempio


22

Prototipo di cartone di iPhone

Prototipi interattivi: quali tipi


23

Alta o bassa fedeltà“assomigliano” o meno al prodotto finale

"Usa e getta" o evolutivorealizzato con tecnolgia provvisoria (viene poi buttato) o con quella definitiva (evolve fino al prodotto finale)

Orizzontale o verticalefornisce tutte le funzioni (anche se in versione limitata) o solo alcune (realizzate in dettaglio)

Prototipi orizzontali / verticali


24

prototipo orizzontalepr

otot

ipo

vert

ical

e

sistem

a co m

plet o

funzionalità

dett

aglio

I prototipi iniziali


25

Molto utili nelle prime fasi del progetto, per esplorare e valutare diverse soluzioni possibili, a costi contenuti

Bassa fedeltà, molto spesso del tipo “usa e getta”, realizzati a costi molto bassi

Possono essere usati vari strumenti di prototipazione, di solito molto semplici, per es.: carta, HTML, PowerPoint, …

Il prototipo di carta

Schermate disegnate grossolanamente su foglietti di carta

Esecuzione simulata con un paio di utenti Scopo: messa a punto della struttura della

navigazione


L’interfaccia viene disegnata a bassa fedeltà su fogli di carta …

Prototipi di carta: esempi


27

Prototipi di carta: esempi


28

Utente

Osservatori

"Sistema"

Prototipi di carta: simulazione


30

Prototipi di carta: video


31

Prototipi di carta (2’):http://it.youtube.com/watch?v=GrV2SZuRPv0

POP: Prototyping on PaperR.Polillo -

Marzo 201532

App per iPhone / iPad / Android: https://popapp.in

Iniziate così…


33

Poi così…


34

Poi fotografate e simulate con POP

Prototipi di carta


35

VANTAGGI: Velocità e basso costo di realizzazione Permettono di provare l’interazione in modo semplice Bassissimo costo delle modificheSVANTAGGI: Fedeltà molto bassa per gli aspetti di layout grafico

Video scenari


36

Prototipi di carta e scenari (3’)d’uso: un’applicazione per PDA per incontrare amici all’Università http://it.youtube.com/watch?v=c4-A-9hGn0U

Video scenari: che cosa dovete fare Un video di 3 minuti Eventualmente usando il prototipo di carta Mostrando soprattutto il contesto della vostra

applicazione, e un paio di casi d’uso tipici Può essere rozzo, ma efficace: usate il

cellulare


37

La tecnica del mago di Oz


38

Prototipi ipertestuali


39

Schermate cliccabili permettono di “navigare” nell’interfaccia, simulando l’interazione

Esempi: PowerPoint, HTML, [Flash]

Prototipi PowerPoint


40

PowerPoint può essere usato per realizzare facilmente prototipo navigabili: Ogni schermata è una slide Power Point Su ogni schermata vengono realizzate aree sensibili,

con link ad altre slide Cliccando sulle aree sensibili, l’utente “naviga”

nell’interfaccia

Prototipi PowerPoint


41

VANTAGGI: Facili da realizzare e da modificare Gli aspetti grafici possono essere definiti

“abbastanza” bene SVANTAGGI: Modello di interazione limitato (“point & click”) Limiti pratici alla complessità dell’ipertesto (oltre

un centinaio di slide diventa poco gestibile)

LoginBenvenuto nel sistema di controllo degli elettrodomestici.

Ti preghiamo di autenticarti, inserendo il tuo nome utente e la password.

NOME UTENTE

PASSWORD

OK

michele

********

HELP

Esempio


LoginBenvenuto nel sistema di controllo degli elettrodomestici.

Ti preghiamo di autenticarti, inserendo il tuo nome utente e la password.

NOME UTENTE

PASSWORD

OK

michele

********

HELP


HELP

ElettrodomesticiSeleziona uno dei link o delle icone sottostanti per accedere alle funzionalità:

Torna al menù principale

Lavatrice

Frigorifero

Lavastoviglie

Esempio (segue)


Lavatrice

HELP

generale

Programma di lavaggio delicato a bassa temperatura in corso…

Avvia

Esecuzione lavoro (interrotto)

10% completato… (in pausa)

Riprendi

dettagli

Torna al menù elettrodomestici

1

Esempio (segue)


HELP

Lavatricedettagligenerale

Produttore: Ariston

Modello: Lavasciuga 2000

Installata il 18/07/2002.

Driver aggiornato al 16/10/2002.

Ore di funzionamento: 92.

Interventi tecnici: nessuno.

Media interventi: non disponibile.

Torna al menù elettrodomestici

2

Esempio (segue)


Prototipi HTML


47

Vanno bene per i siti web, indipendentemente dalla tecnologia utilizzata per la realizzazione del sito finale

Tipicamente, prototipi "wireframe" Meglio non utilizzarli per altre applicazioni:

gli aspetti grafici sono poco controllabili (a basso costo)

lo strumento usato tende a influenzare le scelte di design

Prototipi wireframe


48

Suggerimenti


49

E’ bene evitare strumenti di prototipazione che: pongano difficoltà tecniche nella realizzazione

(devo pensare al prototipo, non allo strumento)

possano influenzare, con le loro peculiarità, il design del sistema prototipato(“questo non riesco a farlo, quindi cambio il design”)

L'ingegneria dell'usabilità


50

La disciplina che si occupa dei metodi e delle tecniche che permettano di specificare, raggiungere e verificare gli obiettivi di usabilità nella progettazione e sviluppo dei sistemi interattivi

Vari approcci, ma aspetti chiave comuni: modello di sviluppo per prototipi successivi Coinvolgimento dell’utente durante tutto il processo inserimento di “usability engineer” nel team di sviluppo definizione di metriche e effettuazione di misure di usabilità

Il vostro progetto: deliverable


51

Req

uisi

ti

Progettazione

Realiz zazio ne

Test

Requisitiiniziali

Protipo a bassa fedeltà

Protipo a alta fedeltà

Test usabilità

Scenario d'uso (video)

RevisioneEsame

Il test di usabilità

Faremo una lezione sull'argomento Sul prototipo finale deve essere fatto un test di

usabilità strutturato (3 utenti), e descritto in un rapporto di test (template Word sul sito)

Durante il processo di prototipazione possono essere fatti test di usabilità informali, non documentati


Il rapporto di test: indice di massimaObiettivi del testMetodologia usata

UtentiCompiti/scenariStrumentazioneModalità di svolgimento

Risultati del testAnalitici, con le misure

Raccomandazioni finaliAnalitiche, con livelli di priorità

Allegati:Eventuali questionari utilizzati


2. Progettazione iterativa

Education

Transcript of 2. Progettazione iterativa