model view controller: un pattern per l’interaction design

Model view controller: unpattern per l’interaction design

Stefano Bussolon

[email protected]

hyperlabs.net

UXCamp: Firenze, 10 2009 – p. 1

IntroduzioneIn questo intervento si sostiene che il pattern software model

view controller puo essere applicato alla progettazione diartefatti interattivi.Sommario:

• i 5 piani di Jesse James Garrett;

• Cooper, goal directed design, piattaforme e posture;

• il pattern model view controller;

• potenziali vantaggi del pattern nella progettazione diartefatti interattivi;


Jesse James Garrett: 5 pianiNel suo“The elements of user experience”JJ Garrettdistingue 5 piani:

1. the strategy plane;

2. the scope plane;

3. the structure plane;

4. the skeleton plane;

5. the surface plane.


The strategy planeA questo livello si definiscono:

• i bisogni degli utenti che l’artefatto vuole soddisfare,attraverso l’analisi degli utenti attuali e potenziali;

• gli obiettivi dei committenti:• business goals: guadagnare soldi, risparmiare soldi,

migliorare la produttivita ...• branding, advertising: far conoscere il proprio

marchio, i propri prodotti, i propri servizi a potenzialiclienti e partner.


The scope planeA questo livello vengono definiti:

• le specifiche funzionali; vanno definite:• quali funzioni vogliamo sviluppare, in che ordine di

priorita, a che iterazione;• quali funzioni non vogliamo sviluppare;

• il dominio informativo (content requirements): qualiinformazioni. Strumenti:• contenuti esistenti;• analisi competitiva – benchmarking;• richieste dei committenti: affinity diagram;• coinvolgimento degli utenti: free listing, valutazione

di importanza.


The structure planeVengono progettate, secondo JJG:

• l’interaction design: come il sistema si comporta inrisposta ai comportamenti dell’utente; definizione deiflussi di processo, flussi dei compiti degli utenti

• l’architettura dell’informazione: la strutturadell’informazione nello spazio informativo:• la struttura gerarchica – card sorting;• le microontologie.


The skeleton planeJJG definisce 3 componenti:

• l’information design: la presentazione delleinformazioni all’utente;

• l’interface design: la progettazione degli elementidell’interfaccia per permettere agli utenti di interagirecon l’applicazione;

• la progettazione della navigazione, che permette agliutenti di muoversi all’interno della struttura informativa.

Uso di convenzioni, metafore, pattern, linee guida. Vengonoprodotti wireframes.


The surface planeA questo livello si progettano gli aspetti visuali. Gli aspetti dicui tener conto sono molteplici:

• estetica;

• accessibilita;

• branding, identity;

• consistenza interna ed esterna;

• colori, tipografia, impaginazione.

Strumenti: linee guida, checklist.


Cooper: goal-directed designSe progettiamo e realizziamo prodotti attraverso

cui gli utenti possono soddisfare i propri scopi,quelle persone saranno soddisfatte, efficaci e felici,saranno soddisfatte di aver acquistato i nostriprodotti, li raccomanderanno agli amici, e questo sitraduce in un successo di business. – About face 3

Il goal directed design process: tradurre i risultati della fase diricerca in soluzioni progettuali.


About face: il processo1. Research: studiare gli utenti e il dominio

2. Modeling: utenti e contesto d’uso

3. Requirements: definire i bisogni degli utenti, i requisitidi business, i requisiti tecnici

4. Framework: definizione della struttura e dell’interazione

5. Refinement: processo iterativo di rifinitura del design,es dai wireframes ai prototipi ad alta fedelta

6. Support: collaborazione con gli sviluppatori per venireincontro alle loro esigenze salvaguardando l’integrita delprogetto.


PiattaformeMentre JJG si focalizza soltanto sui siti web, About faceipotizzano lo sviluppo per piattaforme diverse. Perpiattaforma si intende una“combinazione di hardware esoftware”che permette al prodotto di funzionare. Cooper ecolleghi identificano molteplici piattaforme:

1. i siti web e le applicazioni web;

2. i chioschi interattivi;

3. sistemi interattivi montati su veicoli e automobili;

4. handhelds (smartphone, pda, fotocamere);

5. sistemi di home entertaimnent (console per giochi, TVinterattive, home theater);

6. strumenti professionali (scientifici, medicali).


PostureSecondo Cooper i prodotti e le piattaforme si differenziano inbase a quello che definiscono postura, ovvero alla modalitaprevalente di interazione. Cooper identificano tre posture:

1. la postura sovrana: l’applicazione monopolizzal’attenzione dell’utente per un periodo prolungato;esempi: word processor, foglio di calcolo, web mail;

2. la postura transiente: l’applicazione transiente svolgeun’unica funzione, viene invocata per svolgere quellafunzione, l’interazione e generalmente breve, poi tornasullo sfondo; esempi: widgets, controlli multimediali;

3. la postura del demone: demoni sono quelle applicazioniche girano in background, svolgendo funzioni che nonrichiedono l’interazione con l’utente, se non nella fase disetup e configurazione.


Case history: l’isola dell’AsinaraContesto: progetto InDEX: Interaction Design Experience:master di primo livello della regione Sardegna.Classe Sassari 2.Scopo: far conoscere l’isola dell’Asinara a visitatori potenzialie attuali, raccontando la storia, la colonia penale, il carcere dimassima sicurezza, gli aspetti naturalistici e paesaggistici;promuovere la conoscenza delle regole del parco naturale edella riserva marina.Slogan: portare l’Asinara fuori dall’Asinara.


L’Asinara: progettiLa classe ha sviluppato 3 progetti:

1. una installazione interattiva, finalizzata a far conoscerel’isola e a“sedurre” i potenziali visitatori, da installare inaereoporti, fiere turistiche, traghetti;

2. una applicazione per smartphone (iPhone): guidaall’isola, ai punti di interesse; informazioni storiche enaturalistiche, regole del parco;

3. due installazioni all’interno di un museo nell’isola,finalizzati a raccontare la storia e l’organizzazione delcarcere.

Progetti immaginati ma non sviluppati: il sito internet, gliopuscoli informativi.


Informazioni condivise

Piattaforme diverse, interazioni differenti, ma informazionisostanzialmente condivise. L’idea: progettare una architetturainformativa comune.


Model view controlModel view controller e un pattern di software design chesepara i contenuti, la presentazione e l’interazione.Sviluppato allo Xerox Parc PARK di Palo Alto edimplementato nel linguaggio ad oggetti Smalltalk-80.MVC was conceived as a general solution to the problem ofusers controlling a large and complex data set.Secondo l’inventore di questo pattern the essential purpose ofMVC is to bridge the gap between the human user’s mentalmodel and the digital model that exists in the computer.


MVC - flusso1. Il modello codifica le informazioni e le offre attraverso

delle interfacce.

2. Una vista elabora le informazioni e le presenta all’utente.

3. L’utente interagisce con l’interfaccia offerta dalla vista.

4. Il controller e in ascolto, in attesa degli eventi generatidall’utente. Quando l’utente genera un evento ilcontroller lo gestisce avviando una azione, chegeneralmente aggiorna il modello e-o la vista.

5. La vista interroga il modello per disporre dei datiaggiornati in seguito all’input dell’utente.

6. Il controller si rimette in attesa degli input dell’utente.


MVC e software designQuesto pattern e utilizzato estensivamente nei piu importantiframework di sviluppo software:

• SmallTalk

• Microsoft Foundation Classes (C++), .Net

• Java (Struts, Swing, SpringMVC, Cocoon)

• ActionScript

• Pyton (Zope, Plone)

• Ruby

• PHP (Drupal, Joomla!)


ModelIl modello codifica le informazioni, privilegiando gli aspettiimplementativi.

E il system model di Donald Norman e l’implementation

model di Cooper.L’informazione viene codificata generalmente sotto forma di:

• basi di dati

• documenti che usano linguaggi di markup (es xml)

• file multimediali: immagini, video, suoni, musica


ViewLa vista e una delle possibili rappresentazioni delleinformazioni codificate nel modello.La rappresentazione e generalmente visiva, anche se consoftware di text to speech puo essere anche uditiva (es. lavoce del navigatore satellitare).La view deve adattarsi al modello mentale dell’utente.Corrisponde al designer’s model di Norman.La vista traduce il modello in una forma che permettaall’utente la comprensione e l’interazione.Uno degli assunti fondamentali del pattern mvc e che, perogni modello, possono esserci viste differenti.Esempio classico: una base di dati puo essere vista in formadi tabella e-o in forma di grafico.


ControllerIl controller e cio che permette all’utente di agire sul sistema,attraverso dei sistemi di input.Implementa dunque le funzionalita del sistema, permettendoall’artefatto di interagire con l’utente e di rispondere ai suoiinput.

E il collegamento fra l’utente e il sistema. Offre all’utente leaffordances per interagire con l’artefatto. Tecnicamentel’interazione avviene con il modello, ma l’utente riceve unfeedback attraverso l’aggiornamento della vista.


Software e buone praticheLa separazione del codice deputato al modello, alla vista e alcontrollo dell’applicazione costituisce una buona pratica diprogettazione nell’ambito dello sviluppo del software, inquanto:

• utilizzano strumenti e linguaggi differenti:

1. sql, java(pojo,javabeans)-python per il modello;

2. html, jsp-asp-php per la vista;

3. javascript, servlet per il controllo;

• facilita lo sviluppo, il debug, la manutenzione;

• permette la specializzazione degli sviluppatori;

• facilita lo sviluppo di applicazioni accessibili.


MVC e user experience designLa proposta e di adattare il pattern MVC al modello diprogettazione di artefatti interattivi.


Vantaggi (1) CompetenzeIl pattern permette una migliore differenziazione dellecompetenze:

• il modello sarebbe di esclusiva competenzadell’architettura dell’informaizione. Anzi, il modellorappresenterebbe il core dell’IA

• il controller sarebbe di competenza dell’interactiondesign (il core dell’ID)

• la vista sarebbe di competenza prevalentedell’information design - visual design, con lacollaborazione dell’IA per la navigazione e dell’ID per gliaspetti legati all’interazione.


Vantaggi (2) Sistemi multideviceuna piu facile progettazione di sistemi informativi multidevice,ovvero fruibili da web, da smartphone e da altri dispositivi: ilmodello rimane, la vista e il controller cambiano.


Vantaggi (3) Design creativoLo sviluppo di viste differenti puo permettere al designer disviluppare, a fianco delle interfacce piu tradizionali ecodificate, soluzioni creative ed innovative. Se gli utentihanno la possibilita di decidere quale fra le differentiinterfacce usare, protranno scegliere quella che piu si adattaalle loro caratteristiche, esigenze, prefrenze, tenuto contoanche del contesto.


Esempio: l’installazione per l’AsinaraNel progettare l’installazione finalizzata a pubblicizzarel’Asinara, gli studenti hanno esplorato diverse view econtroller. View:

• touch screen di varie dimensioni;

• proiettore o coppia di proiettori per superfici piu grandi.

Controller:

• interazione collocata sul pavimento (physical computing)

• interazione con il touchscreen;

• interazione con touchwall (physical computing)

• interazione con consolle (trackball e pulsanti)

• scenario futuribile: interazione con movementrecognition.


Scenario 1: Gruppo editorialeEditore di quotidiani (La Repubblica, Il Corriere, The NewYork Times). Attualmente questi gruppi distribuiscono leinformazioni attraverso molteplici canali:

• il quotidiano cartaceo;

• il sito web;

• il sito per il dispositivo mobile / l’applicazione periPhone-Android;

• broadcast via radio (Radio Capital, Radio24), TV, webTV;

• futuro prossimo: e-readers.

Stesse notizie, livello di approfondimento diverso.Soluzione: un CMS capace di generare viste e interazionidiverse per le differenti piattaforme.


Scenario 2: Museo d’arteScenario: un museo organizza una mostra temporanea. Devesviluppare - aggiornare:

• il sito internet del museo, con una sezione dedicata allamostra;

• le guide interattive al museo, che utilizzano handheldsmultimediali;

• gli opuscoli gratuiti distribuiti all’interno del museo;

• gli exibit interattivi;

• il catalogo delle opere.


(Museo) modello: ontologieLo sviluppo del modello si focalizzera su due tipologie di unitainformative:

• gli artisti;

• le opere.

E possibile usare dei microformati per rappresentare questeinformazioni. Esempio, per gli artisti, il microformato foaf(friend of a friend).Definizione di faccette di interrogazione: linea del tempo,nazionalita, movimento artistico, stile ....Collocazione dell’opera nello spazio fisico del museo.


(Museo) vista: webNel sito web possiamo immaginare

• una pagina per ogni artista, che elenca le informazionibibliografiche e l’elenco delle opere;

• una pagina per ogni opera, con foto, autore, data,collezione, informazioni;

• una linea del tempo interattiva;

• una mappa che geotagga il luogo di creazione delleopere;

• una pianta del museo con la collocazione delle opere.


(Museo) vista: guida interattivaLa guida interattiva puo prevedere

• una schermata per ogni artista;

• una schermata per ogni opera, con foto, autore, data,collezione, informazioni; descrizione audio dell’opera informato mp3, da ascoltare con cuffie;

• interazione: possibilita di riconoscere l’opera via qrcode,rfid, codice numerico, localizzazione wireless.


(Museo) vista: exibit interattivoL’installazione interattiva puo permettere all’utente di giocarecon le opere esposte, ad esempio usando un programma diimage editing per ritoccare una copia della fotografia deiquadri.Oppure creare dei quiz e questionari sulla conoscenza delleopere e degli artisti, utilizzando in maniera flessibile leinformazioni presenti a livello del model.Puo permettere agli utenti di visualizzare il processo direstauro di un quadro, visualizzando le differenze fra lecondizioni pre e post restauro e i dettagli dell’intervento.Anche in questo caso queste stesse attivita possono esserepresentate anche sul sito web.


(Museo) vista: catalogo delle opereIl catalogo puo essere generato via pdf, e puo prevedere

• le pagine degli artisti, con descrizione;

• le pagine per ogni opera, con fotografia ad altarisoluzione, scheda, descrizione;

• linea del tempo;

• indice degli autori e delle opere.


Scenario: orario dell’autobusAzienda di trasporti pubblici: orario degli autobus. Fruizione:

• via opuscolo da distribuire nelle biglietterie o scaricarevia web;

• via sito web;

• via applicazione per smartphone, sfruttando l’ora e lageolocalizzazione via gps;

• le paline cartacee o interattive alle fermate.


Il processo

Il flusso progettuale. L’approccio e fortemente iterativo


Il processoIl processo prevede di separare, in fase di design, laprogettazione di modello, vista e controllo.Il processo e fortemente iterativo. Nella prima iterazione ci sifocalizza, prima e soprattutto, nello sviluppo del modello. Ilmodello deve essere abbastanza flessibile da permettere diessere interrogato da viste molto differenti.Le diverse viste - interazioni vanno progettate in ordine dipriorita. Alla prima iterazione la vista / piattaforma piusemplice, testata e diffusa. Nelle iterazioni successive le viste/ piattaforme piu complesse o innovative.


Model, api, feedsLa divisione fra modello, vista e controllo puo portare allosviluppo delle diverse funzioni da parte di soggetti differenti.Se il modello espone i propri dati attraverso delle A.P.I. (soap,rest, json) permette a sviluppatori esterni di implementaredelle viste differenti e flessibili.Chi sviluppa il view - controller interroga il server, carica i datigrezzi e li elabora in modalita innovative. Se piu soggettisviluppano viste diverse in base agli stessi dati, gli utentipotranno scegliere l’interfaccia che riterranno piu utile,usabile, piacevole e conveniente, in base anche al contestod’uso.


Conclusioni?L’idea che ho presentato e quella di mettere assieme duemetodi consolidati (la metodologia di design, il patternsoftware mvc) per formalizzare qualcosa che implicitamentegia succede.Che ne pensate?


[email protected]://www.linkedin.com/in/bussolonhttp://www.facebook.com/stefano.bussolon
