9.

Sintesi del capitolo

I prototipi

Questo capitolo approfondisce le caratteristiche e le finalit dei prototipi, nellambito dei processi di progettazione centrato sullutente considerati nel Capitolo 6. In particolare, dopo la definizione di prototipo secondo lISO 13407, ne viene fornita una semplice classificazione. Si sottolinea lopportunit di utilizzare strumenti descrittivi adeguati (fra cui storyboard e, soprattutto, diagrammi di vario tipo, per esempio gli statechart dello standard UML) per specificare in dettaglio linterazione fra utente e sistema, al fine di individuare eventuali problemi. Si descrivono quindi alcune tecniche utili per realizzare i prototipi nelle varie fasi del processo di progettazione: allinizio (prototipi usa-e-getta: di carta, wire-frame e ipertestuali), nelle fasi intermedie e nelle fasi finali. Si forniscono vari esempi di prototipi dei diverse tipi.

Che cos un prototipo

Il termine deriva dal greco prototipos, che potremmo tradurre con primo modello (da proto, primo e tipos, modello). Seguendo il gi citato standard ISO 13407, possiamo definire, infatti, un prototipo come: una rappresentazione di un prodotto o di un sistema, o di una sua parte, che, anche se in qualche modo limitata, pu essere utilizzata a scopo di valutazione. Questa definizione molto ampia, e comprende oggetti di natura e di complessit molto diverse. Cos, un prototipo non deve necessariamente essere un sistema funzionante, spesso pu essere utile anche un semplice modello finto (mockup). Per esempio, Jeff Hawkins, linventore del Palm Pilot, il primo PDA di successo, inizialmente tenne con s un modellino in legno dello strumento, ovviamente non funzionante, fingendo di tanto in tanto di inserirvi o di leggervi delle informazioni.1 Questo per meglio comprendere lesperienza di portare sempre con s un oggetto di questo tipo. Un altro esempio, di natura molto diversa, il prototipo del Knowledge Navigator, realizzato con un video dalla Apple nel 1987, che abbiamo gi citato (Figura 7, Capitolo 4). In questo caso, il prototipo non reale, ma solo visualizzato. Come abbiamo visto nel Capitolo 6, lo scopo principale dei prototipi quello di coinvolgere gli utenti in tutte le fasi del progetto, fino dalle fasi iniziali. I benefici di questo approccio sono molteplici. Secondo lISO 13407: rende le decisioni di progetto pi esplicite, permettendo, tra laltro, ai progettisti di comunicare meglio fin dallinizio del processo; consente ai progettisti di esplorare numerosi design concept prima della scelta finale; permette di incorporare nel progetto i feedback degli utenti, fin dalle prime fasi del ciclo di progettazione; rende possibile valutare numerose varianti del progetto e progetti alternativi; migliora la qualit e completezza delle specifiche del progetto.

Tipi di prototipi
Un prototipo , dunque, un modello approssimato o parziale del sistema che vogliamo sviluppare, realizzato allo scopo di valutarne determinate caratteristiche. Queste possono essere molto varie: definire lo scopo di un prototipo larte di identificare i problemi di progettazione pi critici. Nelle attivit di prototipazione ci si dovrebbe concentrare su quegli aspetti per i quali esistono pi soluzioni possibili, fra le quali i pro e i contro si bilanciano, oppure per i quali i rischi conseguenti a una cattiva progettazione siano pi elevati.
1

Cfr. Bergman, E. & Haitani, R., Designing the PalmPilot: A Conversation with Rob Haitani, in E.Bergman, Information Appliances and Beyond, Morgan Kaufmann, 2000.

Poich i gruppi di progetto per i sistemi interattivi sono spesso multidisciplinari, e coinvolgono persone con professionalit e priorit diverse, il termine stesso di prototipo viene usato in modo non univoco. Per esempio, un programmatore di software potrebbe chiamare prototipo il codice di un nuovo algoritmo di cui valutare le prestazioni, mentre il designer della carrozzeria di una nuova automobile chiamer prototipo un modello dellauto in scala, fatto di legno. Ci che realmente importa nella preparazione di un prototipo, in ultima analisi, il suo scopo. La tabella di mostra una possibile classificazione dei prototipi, sulla base del loro scopo, delle loro modalit duso, fedelt, completezza funzionale e durata della loro vita.

Scopo

Ruolo

Serve a valutare il ruolo del prodotto nella vita del suo utente

Interfaccia

Serve a valutare le modalit d'interazione fra utente e prodotto

Implementazione

Serve a valutare aspetti tecnici relativi alla realizzazione tecnica del prodotto

Modo duso

Statico

una rappresentazioni statica del prodotto (es.storyboard, diagrammi di vario tipo)

Dinamico

una rappresentazione dinamica (ma non interattiva) del prodotto, es.: video

Interattivo

Permette agli utenti di effettuare prove duso del prodotto, anche se semplificate e approssimate

Fedelt

Alta fedelt

Assomiglia in tutti gli aspetti al prodotto finale

Bassa fedelt

Assomiglia alla lontana al prodotto finale

Completezza funzionale

Orizzontale

Fornisce tutte le funzioni del prodotto finale, anche se in versione semplificata o limitata

Verticale

Fornisce solo alcune funzioni, realizzate in dettaglio

Durata

Usa e getta

Non viene conservato dopo luso

Evolutivo

Viene fatto evolvere fino al prodotto finale

Figura 1. Classificazione dei prototipi

Dal punto di vista del loro scopo, possiamo classificare i prototipi in tre grandi categorie2:
2

Cfr. S.Houde, C.Hill, What do Prototypes Prototype? in Handbook of Human - Computer Interaction (2nd Ed.), M. Helander, T.E.

prototipi che servono a valutare il ruolo del prodotto nella vita del suo utente (role prototype); prototipi che servono a valutare linterfaccia del prodotto, intesa come linsieme delle modalit di interazione fra utente e prodotto (look&feel prototype); prototipi che servono a valutare aspetti tecnici relativi allimplementazione del prodotto, per esempio particolari algoritmi utilizzati dal software (implementation prototype).

Questa distinzione raramente pu essere netta, poich spesso un prototipo presenta contemporaneamente pi aspetti. Ruolo, interfaccia e implementazione possono quindi essere considerati come le tre dimensioni dello spazio nel quale possiamo collocare ogni prototipo, e non come tre categorie separate (). Per esempio, il Knowledge Navigator di cui si parlato pi sopra pu considerarsi essenzialmente un prototipo di ruolo, con qualche aspetto, sia pure non approfondito, dinterfaccia, ma senza alcun aspetto implementativo. Pertanto, in figura, dovrebbe essere collocato nellarea indicata dal cerchio.

Figura 2. Lo spazio dei prototipi in relazione al loro scopo

Unaltra possibile classificazione dei prototipi relativa alla loro modalit duso: un prototipo pu essere allora statico, dinamico o interattivo. Nel primo caso, come nellesempio del Palm Pilot, consister semplicemente in una rappresentazione statica del prodotto: una serie dimmagini, un modello tridimensionale, oppure anche una rappresentazione che permette di valutare a tavolino il funzionamento dinamico del prodotto, come nel caso di un flow-chart o di uno story-board. Nel secondo caso, il funzionamento dinamico del prodotto potr essere mostrato mediante un video, come nellesempio del Knowledge Navigator. Tuttavia, evidente che i prototipi pi utili per convalidare lusabilit di un sistema saranno di solito quelli interattivi, che consentono agli utilizzatori di interagire col sistema in corso di progettazione, per sperimentarne luso - anche se in modo parziale o limitato - e individuarne, cos, pregi e difetti. Un prototipo interattivo aiuta a chiarire i requisiti di progetto, che spesso sono espressi in forma vaga. Permette di osservare le reazioni dellutente durante luso del sistema e di sperimentare soluzioni alternative, rapidamente e, in molti casi, a costi contenuti. Nella pratica corrente, a volte ci si accontenta di realizzare prototipi dinamici, consistenti in una semplice sequenza dimmagini (per esempio, una serie di slide PowerPoint), che il progettista mostra allutente in sequenza, simulando scenari duso tipici. Questo approccio, in realt, non permette di valutare la usabilit di un sistema, e non dovrebbe mai sostituire linterazione vera. Quando il progettista ci spiega, nella simulazione, come interagiremo con il sistema, mostrandocene via via la sequenza di schermate, segue un canovaccio gi predisposto, che lui conosce bene. Ci presenta uninterazione ideale, preconfezionata, che non ci permette di prefigurare le difficolt che avremo nelluso reale, quando saremo soli con il prodotto e dovremo decidere quali azioni compiere, sulla base delle indicazioni disponibili a ogni istante. Saranno sufficienti le indicazioni che vedremo sullo schermo per suggerirci, ogni volta, il comportamento
Landauer, P. Prabhu (ed.), Elsevier Science, Amsterdam, 1997. Anche in http://www.viktoria.se/fal/kurser/winograd2004/Prototypes.pdf .

corretto? Ritornando alla metafora di Norman (Capitolo 3), sar facile superare i golfi dellesecuzione e della valutazione? Saremo in grado di correggere con facilit eventuali azioni sbagliate? molto difficile poter valutare lusabilit di un sistema soltanto analizzando una sequenza dimmagini statiche, oppure assistendo a una simulazione condotta da altri. Lesperienza duso, del metterci le mani sopra non pu essere rimpiazzata dalla sua semplice narrazione. Come indicato nella tabella di , quale che sia la loro finalit e il loro livello di interattivit, i prototipi possono essere ulteriormente classificati in base alla loro fedelt al prodotto finale, alla loro durata e alla loro completezza: Fedelt al prodotto finale I prototipi che assomigliano in tutti gli aspetti al sistema finale si dicono ad alta fedelt (hi-fi prototype). Quelli che gli assomigliano poco, a bassa fedelt (lo-fi prototype). Questi ultimi possono essere realizzati, per esempio, con carta, cartone o legno, come il prototipo del Palm Pilot sopra citato. I prototipi a bassa fedelt sono normalmente oggetti semplici, economici e molto facili da realizzare, ma non per questo meno utili, come vedremo fra breve. Completezza funzionale Questa distinzione riguarda il numero e la completezza delle funzionalit realizzate nel prototipo. Un prototipo orizzontale fornisce molte funzionalit, ma realizzate in modo schematico. Un prototipo verticale, al contrario, realizza compiutamente un insieme limitato di funzionalit (). Con un prototipo orizzontale, se interattivo, si pu provare lintera interfaccia, anche se in modo approssimativo. Infatti, lutente non potr utilizzare nessuna funzionalit per intero: di ciascuna esister, per cos dire, solo linvolucro esterno, o comunque una bozza rudimentale. Fornir, quindi, unimmagine completa delle caratteristiche del prodotto, ma nessuna di esse sar realizzata nei dettagli. Durata Unaltra importante distinzione riguarda la durata della vita del prototipo. Se il prototipo, dopo la sperimentazione, non viene conservato, esso si dice usa e getta (throw-away prototype). Se, invece, viene conservato e viene fatto evolvere o comunque integrato nel prodotto finale, si dice prototipo evolutivo. Normalmente, i prototipi a bassa fedelt sono di tipo usa e getta: il modello di legno del Palm Pilot del nostro esempio non evolver certamente nel prodotto finale dopo essere stato utilizzato. I prototipi ad alta fedelt, di realizzazione normalmente pi costosa, vengono spesso fatti evolvere nel prodotto finale.

Figura 3. Classificazione dei prototipi rispetto alla completezza funzionale

In definitiva, nella realizzazione di un prototipo molte scelte sono possibili. Prototipare significa individuare di volta in volta degli obiettivi prioritari di sperimentazione, e individuare le modalit pi utili per raggiungerli, costruendo un modello parziale del prodotto ed effettuandone, in qualche modo, una valutazione. Concentrando la nostra attenzione su specifici aspetti del sistema in corso di progettazione, ne trascureremo necessariamente degli altri. In definitiva, significa fare dei compromessi. In un processo di progettazione ben condotto, i diversi prototipi ci permetteranno di valutare, via via, aspetti diversi e complementari del nostro sistema. Nonostante questampio ventaglio di possibilit, nella pratica della progettazione human-centred utile considerare, in primo luogo, quei prototipi che permettono di valutare il prodotto in rapporto con i suoi utenti. Quindi, facendo ancora una volta riferimento alla tabella di , i prototipi di ruolo e di interfaccia, in particolare interattivi, a bassa o ad alta

fedelt. Particolarmente importanti, in un processo di sviluppo iterativo, sono inoltre i prototipi costruiti nelle prime fasi del progetto (prototipi iniziali), di cui tratteremo pi ampiamente nel seguito.

Schizzi, storyboard e diagrammi

La definizione dello standard ISO 13407, che abbiamo ricordato allinizio di questo capitolo, considera prototipi anche le rappresentazioni (statiche) del sistema sulla carta. Uninterpretazione cos ampia della nozione di prototipo pu non essere condivisa: a nostro parere, sarebbe meglio considerare come prototipi solo quelle rappresentazioni che, in qualche modo, permettono di provare linterattivit del sistema, e non soltanto di descriverla. Tuttavia, anche le rappresentazioni statiche hanno grande importanza pratica per il progettista, che le usa per descrivere e definire i dettagli di quello che si propone di fare. Pertanto, ne descriviamo qui di seguito le principali tipologie, lasciando alle sezioni successive un approfondimento sui prototipi interattivi.

Schizzi
Quasi sempre lo sviluppo di unidea di progetto parte da uno schizzo, anche molto approssimativo, sulla carta. Per esempio, la mostra alcuni schizzi iniziali del progetto di un orologio con funzioni di cellulare, realizzato da alcuni studenti. Le immagini, appena abbozzate, servono solo a fissare le idee. Verranno poi organizzate in forma pi strutturata nei prototipi successivi, che permetteranno di effettuare i primi test con gli utenti (per esempio, prototipi di carta, come vedremo pi oltre).3 Nella realizzazione di questi schizzi, i progettisti non seguono di solito metodi precisi, ma cercano di visualizzare rapidamente sulla carta le prime ipotesi di lavoro. Per esempio, nel disegno di , le frecce indicano, anche se in modo non sistematico, alcune possibili sequenze dellinterazione (cio passaggi del prodotto da uno stato allaltro, per esempio a seguito della pressione, da parte dellutente, di un pulsante). Nei gruppi di progetto che coinvolgono pi persone, spesso questi schizzi sono realizzati su lavagne di grandi dimensioni, in sessioni di brainstorming durante le quali i partecipanti suggeriscono, discutono e modificano, in modo totalmente libero, soluzioni diverse. La proposta finale, condivisa, servir come base per la realizzazione di un prototipo vero e proprio, nel processo iterativo di progettazione.

Figura 4. Schizzo iniziale per un orologio da polso con funzioni di cellulare

Per altri esempi interessanti di schizzi si veda, per esempio, http://woorkup.com/2009/12/28/10-beautiful-sketches-for-websiteprototypes/.

Storyboard
La tecnica dello storyboarding, introdotta nellindustria cinematografica dagli anni 30 del secolo scorso, consiste nel realizzare una serie di disegni che illustrano, inquadratura per inquadratura, ci che verr girato sul set di ripresa (). Accanto ai disegni possono essere indicati i movimenti della macchina da presa, o brani del dialogo, o altre annotazioni. La sua funzione principale quella di supporto alla progettazione del film: aiuta il regista a trovare il modo migliore per visualizzare una scena, e a comunicare le sue idee ai membri della sua troupe (il direttore della fotografia, lo scenografo, il tecnico delle luci, ) o alla produzione. Nella progettazione degli spot pubblicitari, lo storyboard viene usato anche per comunicare al cliente le varie proposte alternative prima della realizzazione.

Figura 5. Un esempio di storyboard per uno spot pubblicitario (da http://www.attitudedesign.co.uk )

La tecnica dello storyboarding pu essere adottata anche nellinteraction design, per rappresentare una storia duso: la sequenza degli stati del sistema durante una particolare interazione con lutente. Per esempio, la mostra lo storyboard di una possibile sequenza di navigazione allinterno del sito web di un negozio di CD musicali. In questo caso gli schizzi che rappresentano le diverse schermate sono solo abbozzati, poich lobiettivo del progettista era quello di mostrare un possibile percorso di navigazione per la selezione di un CD a partire dalla scheda dellartista. Selezionando la voce Artisti nel menu principale, passando attraverso un elenco alfabetico degli artisti disponibili, si arriva alla scheda dellartista desiderato, che ne elenca la produzione discografica. Da questa, si raggiunge la scheda che descrive il CD selezionato. Per linteraction designer lo storyboard risulta utile solo in alcuni casi, soprattutto in fase di definizione dei requisiti, per esempio nella preparazione di video o animazioni che presentino degli scenari duso (Capitolo 7) o in alternativa ad essi, quando non se ne vogliono affrontare i costi di produzione. Lutilizzo degli storyboard per rappresentare sequenze dinterazione, come nellesempio di , meno frequente, poich per questo scopo esistono strumenti pi potenti, come gli statechart, che vedremo fra poco.

Figura 6. Storyboard di un sito web di un negozio di CD musicali

Diagrammi per macchine a stati

Per rappresentare adeguatamente sulla carta linterazione con lutente, ci servono strumenti pi espressivi degli storyboard, che ci permettano di rappresentare tutte le possibili sequenze dinterazione. A questo scopo sono state sviluppate svariate notazioni, che fanno generalmente uso di diagrammi bidimensionali pi o meno complessi. Ogni progettista potr scegliere la notazione che preferisce. In questo libro ne descriveremo solo una, semplice e particolarmente comoda per questo scopo: i diagrammi per macchine a stati, detti anche statechart. Si tratta di diagrammi proposti da David Harel nel 1987 come strumento di modellazione di sistemi complessi, e in seguito adottati nel linguaggio UML come uno degli strumenti di base. 4 A differenza di altri diagrammi a stati, essi permettono di descrivere un sistema in modo gerarchico, cio per livelli di astrazione successivi. Questo molto importante, per mantenere entro limiti accettabili la complessit dei diagrammi, che altrimenti potrebbero diventare troppo grandi per essere facilmente gestibili. I diagrammi per macchine a stati sono strumenti semplici ma flessibili e potenti, che servono a descrivere il comportamento di sistemi di ogni tipo. I costrutti pi utili per rappresentare le interazioni utente-sistema sono descritti nellAppendice, alla quale rimandiamo per una descrizione pi completa. Qui di seguito li presentiamo informalmente, attraverso la descrizione di un esempio elementare. Essenzialmente, uno statechart costituito da nodi e da archi ():
4

ogni nodo rappresenta uno stato del sistema: nel nostro caso, uno stato del dialogo con lutente. Per esempio,

UML (Unified Modeling Language) un linguaggio visuale standardizzato comprendente varie notazioni per la modellazione dei sistemi complessi. UML nato nella seconda met degli anni 90, dallintegrazione delle principali metodologie di progettazione di software allora esistenti, per opera di J.Rumbaugh, G.Booch e I.Jacobson. Oggi questo linguaggio correntemente usato nellingegneria del software, soprattutto per la progettazione di sistemi orientati agli oggetti.

 La transizione innescata da un evento che normalmente (ma non sempre), corrisponde a unazione dellutente, e pu causare lesecuzione di unazione del sistema. La transizione pu essere subordinata al verificarsi di una condizione. Ogni nodo rappresentato con un rettangolo dai bordi arrotondati, contenente il nome dello stato che rappresenta. Ogni arco etichettato con il nome dellevento, della condizione e dellazione associati. Evento, condizione e azione sono opzionali.

potrebbe rappresentate una particolare schermata del computer; ogni arco (orientato) rappresenta una transizione da uno stato allaltro.

Figura 7. Gli elementi di base degli statechart

Di solito, gli eventi sono costituiti da azioni dellutente: la pressione di un pulsante, la selezione di una voce di menu, la compilazione di uno o pi campi di una form, e cos via. Pertanto, per indicare un evento potremo usare semplicemente il nome del pulsante, la voce del menu o una breve frase che descriva lazione compiuta dallutente. Con questi semplici diagrammi possiamo descrivere bene interazioni complesse. Per esempio, il diagramma di definisce linterazione di una macchina erogatrice di bevande con il suo utente:

Figura 8. Statechart che definisce linterazione con un distributore di bevande

Rappresentare con degli statechart il dialogo fra utente e sistema un esercizio molto utile, perch costringe il progettista a esplicitare tutti i percorsi che lutente pu seguire interagendo con esso. Lo costringe a effettuare delle scelte, prima di realizzare il prototipo. Molto spesso questo mette in evidenza aspetti critici nella realizzazione del caso duso, che possono avere conseguenze importanti sullusabilit. Per esempio, il comportamento dellerogatrice di lascia molto a desiderare. Infatti, nel caso in cui la bevanda sia esaurita, la macchina si mette semplicemente in attesa di nuove monete, senza restituire quelle ricevute e senza segnalare alcunch.

Un grosso vantaggio degli statechart che permettono di rappresentare il sistema per livelli di astrazione successivi. Questo consente di rappresentare il dialogo nei dettagli, usando tuttavia dei diagrammi di dimensioni contenute: baster definire un diagramma separato per ogni caso duso individuato nei requisiti, e quindi costruire un diagramma di alto livello, che li richiama tutti, fornendo cos il quadro complessivo. Si rimanda allAppendice per i dettagli. Gli statechart sono particolarmente utili per definire i percorsi che corrispondono a situazioni derrore (quando, cio, lutente compie azioni scorrette). Questi percorsi possono essere numerosi e potremmo essere tentati di tralasciarli, rimandando le scelte concernenti il trattamento degli errori al momento della codifica dei programmi. Questa non una buona soluzione. molto meglio analizzare e risolvere subito tutti i problemi, per evitare che emergano nelle fasi successive, degradando lusabilit del sistema e imponendo rifacimenti costosi. Tanto pi che i diagrammi per le macchine a stati permettono di descrivere il trattamento degli errori in modo assai semplice, associando a ogni evento di errore unazione del sistema, che visualizzi il corrispondente messaggio allutente. Esistono numerosi programmi che permettono di costruire e mantenere facilmente diagrammi di ogni tipo. Uno dei pi noti Visio, della Microsoft.

Prototipi iniziali
Nelle prime fasi del progetto, molte strade sono ancora aperte, ed in genere utile esplorare pi di una soluzione, prima di scegliere quella che sar sviluppata nei dettagli. I prototipi iniziali servono proprio a questo, e sono quindi molto importanti. Essi saranno quasi sempre di tipo usa e getta, ed opportuno che siano realizzabili molto velocemente e a costi molto contenuti. I progettisti potranno cos sperimentare e valutare anche numerose soluzioni alternative. Citando ancora le parole dello standard ISO 13407: Gli utenti possono essere coinvolti molto presto nel progetto, mediante luso di modelli statici realizzati sulla carta. possibile presentare agli utenti le bozze delle schermate o una rappresentazione del prodotto, chiedendo loro di provarli in un contesto realistico. In tal modo si possono valutare rapidamente ed economicamente aspetti del progetto (per esempio, quanto sia facile navigare attraverso una gerarchia di menu). Per i prodotti hardware, analoghi benefici possono essere ottenuti con luso di modelli tridimensionali statici, costruiti con materiali semplici. Nelle fasi iniziali, anche i prototipi pi rudimentali possono risultare preziosi, per esplorare soluzioni alternative. Anche se pu essere utile presentare le soluzioni di progetto nel modo pi realistico possibile, consigliabile evitare di investire troppo tempo o denaro nella loro realizzazione, anche perch ci potrebbe produrre una resistenza alle modifiche da parte dei progettisti. In un approccio human-centred, un prototipo non semplicemente una demo per mostrare unanteprima del prodotto agli utenti. Esso serve a raccogliere le loro reazioni, per poi utilizzarle nellorientare le attivit di progettazione successive. Quando non fosse consigliabile mostrare i prototipi agli utenti allinizio del processo di progettazione (per esempio, per ragioni di riservatezza), le valutazioni potranno essere condotte da esperti. Queste possono essere utili e poco costose, e complementare i test con lutente. In ogni caso, in un processo di progettazione human-centred, almeno i test finali dovrebbero essere condotti con utenti reali.5 Le tecniche possibili, anche molto semplici, sono varie. Descriviamo qui quelle che consideriamo pi importanti: i prototipi di carta, i prototipi wireframe e i prototipi ipertestuali.

Prototipi di carta
I prototipi pi semplici che permettono di provare, anche se in modo rudimentale, linterazione con lutente, sono i prototipi di carta (paper prototype). Linterfaccia del sistema viene disegnata a bassa fedelt su fogli di carta (o cartoncini, o post-it), che vengono usati per effettuare una simulazione manuale del sistema, con utenti-cavia. La mostra alcuni cartoncini utilizzati per la simulazione di unapplicazione per un iPhone. Ogni cartoncino, in grandezza naturale, rappresenta sommariamente una singola schermata . Durante la simulazione, il progettista presenta allutente la prima schermata, e lutente interagisce con essa simulando linterazione (per esempio, premendo col dito la rappresentazione di un bottone, o fingendo di compilare un campo di input, e cos via). Il progettista risponder, in funzione delle azioni dellutente, presentando il cartoncino con la schermata successiva, e cos via. Le reazioni e le
5

Nostra traduzione dallinglese.

difficolt dellutente sono esaminate e commentate, dopodich linterfaccia si corregge, sempre sulla carta, e si riprova.

Figura 9. Prototipo di carta

I prototipi di carta sono poco utilizzati nella pratica, perch i progettisti tendono a non prenderli troppo sul serio. Sono considerati quasi dei giochi, non si comprende come riproduzioni cos rudimentali e statiche possano dare suggerimenti di una qualche utilit. troppo facile, non pu funzionare, proviamo qualcosa di pi serio. Questo un grande errore, perch i prototipi di carta sono realmente molto utili. Infatti, possono essere realizzati molto in fretta e a costi molto contenuti. Per esempio, il prototipo di rappresenta tutte le schermate principali di unapplicazione per iPhone non banale. Eppure, si tratta solo di 30 cartoncini, confezionati in un tempo molto limitato: il template di base stato semplicemente fotocopiato dal manuale delliPhone, e poi riprodotto nel numero di copie necessario. vero che linterfaccia rappresentata molto grossolonamente, a matita, che linterazione lenta e la user experience molto diversa da quella vera, ma nella fase iniziale del progetto non serve altro. Anzi, una maggior precisione ci farebbe sprecare inutilmente del tempo. Ci che ci serve una rapida simulazione del funzionamento, con uno o due utenti, che troveranno sicuramente qualcosa che non va. Infatti, le prime prove mettono spesso in evidenza difetti macroscopici. Con un prototipo di carta questi possono essere corretti in pochi minuti, e il risultato rimesso in prova con nuove simulazioni (naturalmente, con utenti diversi). La Figura 4 nel Capitolo 14 mostra unimmagine tratta dalla ripresa video della simulazione del prototipo di 6 In conclusione, veramente conveniente realizzare i prototipi di carta come primo passo, subito dopo avere adeguatamente schematizzato i vari percorsi dellinterazione con luso dei diagrammi di interazione. Questi diagrammi saranno un aiuto prezioso per la persona cui affidato il compito di gestire i cartoncini del prototipo durante la simulazione con lutente. Infatti, senza una documentazione scritta e immediatamente interpretabile, anche la simulazione di un sistema elementare potrebbe essere piuttosto laboriosa, con il rischio di fornire allutente risposte
6

La tecnica molto semplice, ma si presta a molteplici varianti. Esiste anche un intero libro sullargomento: C.Snyder, Paper Prototyping The fast and easy way to design and refine user interfaces, Morgan Kaufmann Publishers, 2003.

10

diverse da quelle previste.

La tecnica del Mago di Oz

Questa tecnica consiste nel realizzare un prototipo interattivo, in cui per le risposte o parte di esse siano fornite, se possibile allinsaputa dellutente, da parte di un essere umano che operi, per cos dire, dietro le quinte come, appunto, il mago di Oz della favola.7 Per esempio, nel prototipo di un sistema di query, lutente potrebbe formulare uninterrogazione, e un esperto nascosto (il mago di Oz) potrebbe riscrivere linterrogazione in una forma normalizzata e presentarla allutente per la sua approvazione, e quindi fornire la risposta richiesta, simulando laccesso a una base dati ancora inesistente. Oppure, la tecnica pu essere utilizzata per realizzare prototipi iniziali di sistemi che dialogano in linguaggio naturale, per esempio per raccogliere indicazioni sui costrutti linguistici preferiti dagli utenti. Altri sistemi che si prestano bene alluso di questa tecnica sono i risponditori automatici dei call center, o i cosiddetti sistemi IVR (interactive voice response systems), in cui lutente richiede a voce delle informazioni (lorario di treni o aerei, previsioni metereologiche, ecc.). e il sistema (nel nostro caso, il mago di Oz) fornisce risposte vocali a partire da script predisposti. Limpiego di questa tecnica non banale, come potrebbe sembrare a prima vista. I compiti del mago, apparentemente semplici, si rivelano spesso cognitivamente impegnativi. Affinch il prototipo risulti realistico, le risposte del mago devono essere consistenti per quanto riguarda i contenuti e i tempi di reazione. In particolare: situazioni simili devono provocare le stesse risposte, e queste devono essere conformi alle aspettative dellutente. Per esempio, se il mago fosse troppo lento nel rispondere, lutente potrebbe pensare di avere fornito una richiesta scorretta, o che il sistema sovraccarico, o che si trova in uno stato di errore. In sostanza, il mago non pu essere un improvvisatore: deve essere ben preparato e avere a disposizione una serie completa di supporti pronti alluso (diagrammi per macchine a stati, schemi delle risposte, e cos via). Per semplificare questi compiti pu essere opportuno, in molti casi, che il ruolo del mago sia sostenuto da pi di una persona: per esempio, una persona dedicata alla simulazione dellinput/output, e unaltra persona dedicata alla simulazione delle operazioni di elaborazione delle risposte.

Prototipi wire-frame
I prototipi wire-frame prendono il nome dai modelli wire-frame (letteralmente: modelli in fil di ferro) della grafica computerizzata.8 Sono prototipi interattivi a bassa fedelt, di solito usa-e-getta, nei quali la grafica estremamente semplificata, e mostra solo i contorni degli oggetti. Permettono di sperimentare le modalit principali di interazione, prima che i dettagli della grafica siano definiti. Per esempio, la metodologia di realizzazione di un sito web in sette fasi, di cui si nel Capitolo 6, prevede che il primo prototipo del sito (chiamato prototipo di navigazione) sia di tipo wire-frame. un prototipo interattivo che permette di provare la navigazione nel sito (menu, titoli delle pagine, bread-crumbs ecc.), senza che sia stata definita la grafica, e prima della redazione dei contenuti. La mostra la home page del prototipo wireframe del sito web di un importatore di birra.9 Si tratta quindi di un contenitore vuoto, ma completamente navigabile, il cui unico scopo di permettere di verificare ladeguatezza della struttura dei menu e della struttura logica delle pagine del sito.

Il nome deriva da Wonderful Wizard of Oz (1900), un celebre romanzo per ragazzi dello scrittore statunitense L. Frank Baum (1856-1919). E la storia di Dorothy, una bambina che viene trasportata da un ciclone, con tutta la sua casa, dal Kansas nel regno di Oz. Per tornare nel Kansas, Dorothy dovr compiere una serie di imprese assegnatele da un mago che controlla il regno. Alla fine, si scoprir che il mago di Oz non altro che un vecchietto senza poteri, che si nascondeva dietro un paravento per simulare le sue magie. Il primo a proporre questa tecnica, e a darle il nome, stato John F. Kelley, nella sua tesi (circa 1980).
8

Con questo termine si indica la rappresentazione grafica di oggetti tridimensionali, disegnando soltanto i bordi dell' oggetto, il quale resta in questo modo trasparente e sembra, appunto, costruito con il filo di ferro. Nella grafica computerizzata, questo metodo richiede calcoli molto pi semplici rispetto alla rappresentazione di superfici, ed quindi considerevolmente pi veloce.
9

La descrizione delle sette fasi di progettazione di questo sito, sviluppata con la metodologai citata, si trova in appendice al libro R.Polillo, Plasmare il Web, Apogeo, 2006.

11

Figura 10. Prototipo di navigazione del sito di un importatore di birra

Le pagine sono infatti costituite solo da una gabbia logica in bianco e nero, e non contengono alcuna anticipazione sulla grafica definitiva: nessuna immagine, nessun logo o decorazione, nessun colore. Sono vuote di contenuti informativi, ma contengono i titoli definitivi e a volt il testo finto inserito nella gabbia logica, per mostrare gli ingombri delle varie aree logiche previste. Il fatto che questo prototipo sia il pi possibile astratto e non mostri grafica e contenuti molto importante. In questo modo, chi prover a usare il prototipo potr concentrarsi sulla meccanica di navigazione e sulla struttura logica delle pagine, senza essere distratto da altri elementi, come per esempio i colori o le frasi del testo. Tuttavia, la forma e le dimensioni dei menu dovranno essere rappresentate con accuratezza sufficiente per apprezzarne la leggibilit nelle diverse risoluzioni del video. Un prototipo wire-frame di un sito ha il compito di rendere vivo il progetto, fino a quel momento descritto soltanto sulla carta. Ci permette di valutarne molto rapidamente pregi e difetti: il prototipo wireframe di un sito web si pu costruire in brevissimo tempo utilizzando uno strumento come DreamWeaver o PageMaker. Il fatto che questi strumenti producano delle vere pagine web molto importante: in questo modo, infatti, si potr controllare che il layout del sito sia compatibile con diverse risoluzioni video (in figura sono indicate le risoluzioni 800x600 e 1024x768). Gli eventuali problemi emergono con evidenza ed facile realizzare e provare rapidamente soluzioni alternative. Data la sua semplicit, i test saranno molto rapidi e richiederanno in genere soltanto pochi minuti.

Prototipi ipertestuali
Unaltra tecnica molto utilizzata per costruire prototipi iniziali fa uso di strumenti per la costruzione di ipertesti. In questo caso, il prototipo costituito da una serie dimmagini (snapshot) che rappresentano laspetto del prodotto in corso di progettazione. Le varie snapshot sono legate fra loro da link ipertestuali, cliccando i quali lutente passa da una snapshot allaltra, simulando cos linterazione con il prodotto. I prototipi ipertestuali possono essere realizzati facilmente, a costi molto limitati, con vari strumenti. Quelli pi usati sono i programmi per la costruzione di presentazioni (per es. PowerPoint della Microsoft), che normalmente permettono di legare fra loro le varie slide con link ipertestuali. In questo caso:

12

ogni snapshot del prodotto viene rappresentata su una slide; su ogni snapshot vengono realizzate aree cliccabili di forma opportuna (pulsanti, campi, ecc.), con link ad altre slide; cliccando su queste aree, lutente naviga nellipertesto, simulando linterazione con il prodotto.

La mostra un esempio di prototipo cliccabile realizzato con PowerPoint, relativo al cellulare da polso, di cui abbiamo visto il primo schizzo in .

Figura 11. Prototipo PowerPoint del cellulare da polso di

Si tratta della slide iniziale dellipertesto, sulla quale sono state definite diverse aree cliccabili, corrispondenti ai vari bottoni virtuali dellorologio, ipoteticamente realizzato con tecnologia touch screen. 10 Cos, cliccando sullarea inferiore, comparir una serie dicone associate ai casi duso principali, disegnate su una seconda slide. Cliccando ancora sullicona rappresentante un telefono, comparir la slide con la tastiera numerica e i pulsanti per gestire la telefonata e la rubrica (). I pulsanti presenti sulla destra in sono stati predisposti per simulare degli eventi non generati dallutente: la ricezione di una telefonata o di un sms, la ricezione di una chiamata persa, ecc. Per esempio, premendo il pulsante Chiamata da contatto, comparir la slide che mostra, sullo schermo dellorologio, il nome del chiamante e i pulsanti per accettare o rifiutare la chiamata. Anche i comportamenti condizionali possono essere realizzati con la stessa tecnica, inserendo appositi pulsanti accanto al prototipo, che determinano il percorso allinterno dellipertesto. Per esempio, dopo avere composto un numero di telefono cliccando sulla tastiera, si potr simulare la condizione di numero occupato predisponendo una coppia di pulsanti (Libero e Occupato) che permettano di scegliere il percorso desiderato nellipertesto.

10

In questo prototipo, che aveva lo scopo di verificare limpostazione generale del progetto, le dimensioni del cellulare sono pi grandi di quelle reali. In questo caso, al prototipo iniziale avrebbe dovuto seguire un prototipo di dimensioni reali, anche non interattivo ma indossabile, per definire in modo preciso le dimensioni dei tasti, dei caratteri e del display, e verificare la effettiva usabilit delloggetto.

13

Figura 12. Prototipo PowerPoint del cellulare da polso di

I vantaggi delluso di prototipi ipertestuali di questo tipo sono evidenti. Innanzitutto, i prototipi sono facili da realizzare e da modificare, e la simulazione non richiede un mago di Oz, e risulta pi realistica e fluida. Inoltre la grafica del prodotto finale pu essere simulata con un buon livello di dettaglio. Esiste tuttavia anche qualche svantaggio. In primo luogo, questi prototipi permettono solo interazioni semplici, di tipo point & click. Interazioni pi complesse non sono realizzabili a costi ragionevoli, e dovranno quindi essere simulate in modo approssimativo, o addirittura immaginate. Per esempio, se volessimo riprodurre le operazioni di composizione del numero di telefono nel cellulare da polso (), dovremmo realizzare una slide per ogni diversa cifra digitata, e inserire un link a questa slide nellarea del pulsante che porta quella cifra. Il numero delle slide dovrebbe essere uguale al numero delle combinazioni possibili. Ci non evidentemente realizzabile. e daltra parte non porterebbe alcun reale vantaggio nelle prove con gli utenti. Infatti, lo scopo di un prototipo iniziale quello di convalidare limpostazione complessiva del prodotto, e non tanto linterazione di dettaglio con i vari controlli, che si pu rimandare a un prototipo successivo, da realizzare con tecnologie pi adatte. Per tornare al nostro esempio, la composizione del numero di telefono potr essere simulata, semplicemente, cliccando in un punto qualsiasi della tastiera e facendo apparire sul display del cellulare un numero qualsiasi, sempre quello. Una slide, in questo modo, sar sufficiente. Inoltre, ci sono dei limiti pratici alla complessit degli ipertesti realizzabili, superati i quali il prototipo diventa poco gestibile da chi lo sviluppa. Lesperienza di uso di PowerPoint per questo scopo, compiuta da chi scrive in centinaia di progetti didattici realizzati dagli studenti, suggerisce che la soglia di ingestibilit dei prototipi si colloca intorno alle 150 slide. Oltre questo limite, lipertesto diventa troppo complesso, e quindi difficilmente mantenibile con gli strumenti elementari a disposizione in PowerPoint. allora conveniente spezzare i prototipi pi complessi in ipertesti separati, ciascuno dei quali dedicato a uno specifico aspetto del sistema. Se, tuttavia, la simulazione non entra in aspetti di eccessivo dettaglio, questi limiti sono ampiamente sufficienti a realizzare prototipi di ragionevole completezza, che possono essere tranquillamente contenuti in 80-100 slide. Per esempio, quello del cellulare da polso ha richiesto poco pi di 100 slide per la simulazione di tutte le principali funzioni: effettuazione e ricevimento telefonate, gestione della rubrica, invio e gestione sms, impostazione data e ora, impostazione sveglia, impostazione volume suoneria, collegamento con auricolare tramite bluetooth. La mostra il prototipo di un telecomando per un apparato multifunzionale audio-video, anchesso realizzato a scopo didattico, con PowerPoint. In questo secondo esempio, ogni slide, oltre alla immagine del telecomando, contiene una rappresentazione dello schermo del televisore e del pannello del componente controllato (in figura, il sistema VHS).

14

Cliccando sui vari tasti, limmagine dello schermo e il display del pannello viene modificata di conseguenza. Nonostante lapparente complessit del prototipo, anche in questo caso circa cento slide hanno sono state sufficienti per simulare con alcuni utenti i seguenti compiti: 1. 2. 3. 4. 5. Accendere il sistema; Visualizzare diversi canali televisivi; Visionare una videocassetta; Registrare le immagini dellultimo canale selezionato su DVD; Ascoltare della musica.

Figura 13. Prototipo PowerPoint di un telecomando per un sistema audio-video

Altri strumenti per la costruzione di ipertesti sono i generatori di pagine HTML come, per esempio, Dreamweaver della Adobe o FrontPage della Microsoft. Come abbiamo visto sopra, questi strumenti sono particolarmente adatti per la realizzazione dei prototipi di navigazione dei siti web, indipendentemente dalla tecnologia utilizzata per la realizzazione del sito finale. Sono invece sconsigliabili per la prototipazione di altri tipi di applicazioni software, perch la grafica poco controllabile e il loro orientamento alla costruzione di siti web tende a influenzare le scelte di progetto. In pratica, facile che il prototipo tenda ad assomigliare a un sito, indipendentemente dalla sua natura. In ogni caso, bene evitare di usare strumenti di prototipazione che creino difficolt tecniche, o che il progettista non padroneggi completamente. Infatti, nella realizzazione di un prototipo tutti gli sforzi dovrebbero essere concentrati sulla concezione e sulla valutazione del prodotto, e non sulla risoluzione dei problemi tecnici posti dallo strumento utilizzato. Inoltre, strumenti troppo complessi o invasivi possono influenzare, con le loro peculiarit, le scelte di progetto per il sistema prototipato (questa interfaccia troppo complicata da prototipare con questo strumento, quindi ne scelgo unaltra). Una soluzione molto valida in una grande variet di sistemi costituita dallaccoppiata prototipo di carta / prototipo

15

PowerPoint. Inizialmente si costruisce e si sperimenta un prototipo di carta a bassa fedelt. Quando la soluzione abbastanza consolidata, la si realizza nuovamente ad alta fedelt in un prototipo PowerPoint navigabile, e si effettuano nuove prove con gli utenti. La mostra una scheda del prototipo di carta di unapplicazione per palmare, accanto alla slide corrispondente del prototipo PowerPoint realizzato successivamente.

Figura 14. Dal prototipo di carta al prototipo PowerPoint

In questo progetto, pensato per un palmare, la costruzione del prototipo stata facilitata dalla disponibilit, in rete, dellimmagine precisa del modello di palmare prescelto, che stata quindi usata come base in tutte le slide del prototipo. Oggi esistono in rete numerose librerie dimmagini preconfezionate (chiamate design stencil) che possono essere usate per comporre rapidamente la grafica dei prototipi. La , per esempio, mostra un insieme di design stencil per la prototipazione di applicazioni per iPhone.11

11

Dal Design Stencil Kit versione 1.0 di Yahoo, in http://developer.yahoo.com/ypatterns/wireframes/ .

16

Figura 15. Set di design stencil per iPhone (dal Design Stencil Kit di Yahoo)

Prototipi intermedi
I prototipi iniziali, come abbiamo visto, sono spesso usa-e-getta: si costruiscono con le tecnologie pi semplici, allo scopo di avere dei rapidi feedback sulle idee iniziali della progettazione. Quando il design concept definito, potr iniziare la realizzazione effettiva del sistema, attraverso un numero adeguato diterazioni. Da questo momento in poi, almeno per quanto riguarda i prodotti software, si cercher di sviluppare i prototipi utilizzando le tecnologie finali. In questo modo, se tutto procede per il meglio, il sistema evolve per ampliamenti successivi e per modesti rifacimenti a partire da una base di codice iniziale. Le strategie che guidano il processo dovranno essere definite di volta in volta, a seconda del particolare tipo di sistema. Per esempio, nel caso dei siti web, la metodologia gi citata (nel Capitolo 6 e in questo capitolo) prevede due prototipi intermedi: il prototipo di comunicazione (che realizza, in una forma sostanzialmente finale, la grafica del sito, che tuttavia ancora vuoto di contenuti) e il prototipo funzionale (che ne realizza le funzioni interattive). La mostra un esempio di prototipo di comunicazione: come si vede, la cornice del sito, con intestazioni, grafica, menu, completa, ma le pagine sono ancora prive di contenuti.

17

Figura 16. Il prototipo di comunicazione di un sito web (http://www.disco.unimib.it , 2004)

I prototipi intermedi permettono di provare specifici aspetti del prodotto, ma non ancora le sue funzioni complessive, che potranno essere esercitate soltanto alla fine del processo.

Prototipi finali
Se il processo stato condotto bene, nelle fasi finali potremo avere una ragionevole certezza che le prove duso condotte sui diversi prototipi hanno guidato la progettazione in modo corretto. Nelle prove duso dei prototipi finali non dovrebbero quindi esserci troppe sorprese. Le prove finali per sono molto importanti, perch solo quando il sistema sostanzialmente finito che si potranno condurre prove complete per i compiti (veri e non simulati) per i quali stato costruito. Pensiamo ancora una volta, per fissare le idee, al caso di un sito web (per esempio di e-commerce). Il prototipo finale , in sostanza, il sito completo, con i suoi contenuti definitivi, le funzionalit collaudate, e con una base di dati reali o, comunque, significativi. Su questo sito si potranno effettuare prove sofisticate, in scenari duso completi e di notevole complessit. Alle tecniche utilizzabili per condurre questi test di usabilit dedicato il Capitolo 14, al quale rimandiamo il lettore per ogni dettaglio.

Ripasso ed esercizi
1. 2. 3. 4. 5. 6. Che cos un prototipo e qual il suo ruolo nella progettazione human-centred? Che cosa sintende per prototipo ad alta o a bassa fedelt? Spiega le differenze fra prototipo usa e getta e prototipo evolutivo, e fra prototipo orizzontale e verticale. Costruisci lo statechart che descrive linterazione con lascensore di un palazzo uffici (separatamente per i comandi esterni e interni allascensore). Descrivi lutilizzo dei prototipi di carta e descrivine i vantaggi. Realizza il prototipo di carta dei comandi esterni e interni dellascensore di cui allesercizio precedente, e

18

verificane lusabilit con una prova duso con due utenti. In che cosa consiste la tecnica del mago di Oz? In quali casi utile? Che cosa sono e a che cosa servono i prototipi wire-frame nella progettazione di siti web? Realizza con PowerPoint (o strumento analogo) un prototipo navigabile dei comandi dellascensore di cui allesercizio precedente, e provalo con due utenti, diversi dai precedenti. 10. Spiega vantaggi e svantaggi nelluso di PowerPoint come strumento di prototipazione nella progettazione di un sistema interattivo. 11. Che cosa sono i design stencil? 7. 8. 9.

Approfondimenti e ricerche
1. Cerca in rete e sperimenta un programma che sia adatto alla costruzione e manutenzione di statechart. I
programmi per la gestione di diagrammi bidimensionali sono numerosi, a partire da Visio della Microsoft e dai suoi concorrenti gratuiti.

2. Cerca in rete esempi di prototipi di carta, e prototipi ipertestuali, e classificane le diverse tipologie.
Suggerimento: cerca su www.youtube.com, www.slideshare.com e su Google-immagini (parole chiave: paper prototype, paper prototyping, lo-fi prototype). Su www.youtube.com esistono diversi prototipi realizzati da studenti dellautore di questo libro (parole chiave: interazione uomo macchina, polillo, corso, prototipo)

3. Cerca in rete qualche collezione di design stencil per comporre rapidamente prototipi accurati dal punto di
vista grafico, e verificane le possibilit. Puoi iniziare, per esempio, dal Design Stencil Kit di Yahoo, in http://developer.yahoo.com/ypatterns/wireframes/.

4. Esistono numerosi tool per la prototipazione dellinterfaccia utente di sistemi interattivi. Cerca in rete qualche
esempio e sperimentane luso, valutandone vantaggi e svantaggi rispetto ai programmi come PowerPoint, discussi in questo capitolo. Per esempio, puoi iniziare da http://uidesign-usability.blogspot.com/2007/03/top10-simulation-tools-for-ui.html.

19