Model - representation - interaction
Model view control
Model view controller è un pattern di software design che separa i contenuti, la presentazione e l’interazione.
Sviluppato allo Xerox Parc PARK di Palo Alto ed implementato nel linguaggio ad oggetti Smalltalk-80.
“MVC was conceived as a general solution to the problem of users controlling a large and complex data set”.\
Secondo l’inventore di questo pattern “the essential purpose of MVC is to bridge the gap between the human user’s mental model and the digital model that exists in the computer”.
MVC e modelli mentali
- l'oggetto: il cane Fido, che esiste nel mondo reale
- il modello: una descrizione di fido in un file elettronico
- la vista: un programma che trasforma i dati del modello in una modalità che l'utente può vedere con i suoi occhi, interpretare, e manipolare
- il controller coordina una o più viste, ed aggiorna lo stato del modello in base all'interazione dell'utente
Da una descrizione di Trygve Reenskaug
Il flusso
- Il modello codifica le informazioni e le offre attraverso delle interfacce.
- Una vista elabora le informazioni e le presenta all’utente.
- L’utente interagisce con l’interfaccia offerta dalla vista.
- Il controller è in ascolto, in attesa degli eventi generati dall’utente. Quando l’utente genera un evento il controller lo gestisce avviando una azione, che generalmente aggiorna il modello e-o la vista.
- La vista interroga il modello per disporre dei dati aggiornati in seguito all’input dell’utente.
- Il controller si rimette in attesa degli input dell’utente.
MVC e software design
Questo pattern è utilizzato estensivamente nei più importanti framework di sviluppo software:
- SmallTalk
- Microsoft Foundation Classes (C++), .Net
- Java (Struts, Swing, SpringMVC, Cocoon)
- ActionScript
- Pyton (Zope, Plone)
- Ruby
- PHP (Drupal, Joomla!)
Programmazione a oggetti e modelli mentali
Gli oggetti (e le classi) si riferiscono ai concetti degli utenti e ai loro modelli mentali.
Il fine della programmazione orientata agli oggetti è quello di catturare i modelli mentali nel codice.
Il pattern model view controller è finalizzato a mappare i modelli mentali dell'utente nel software
Trygve Reenskaug and James O. Coplien (2009)
Model representation interaction
Il modello raccoglie le informazioni rilevanti di ogni oggetto di ogni classe (ontologia), richieste per la rappresentazione del sistema.
La rappresentazione proietta le informazioni rilevanti in un contesto
L'interazione raccoglie le informazioni - e le scelte - che l'utente deve esplicitamente comunicare al sistema.
Il modello
Identificare i percorsi che permettono all'utente di raggiungere l'obiettivo (o completare il compito).
Identificare le risorse di cui l'utente ha bisogno per portare a termine il compito, incluse le informazioni richieste per poter decidere).
Creare una ontologia: una rappresentazione (formale) delle classi dei concetti coinvolti nell'esperienza (oggetti, agenti, contesti, comportamenti ...).
Organizzare l'informazione: macro information architecture, reti semantiche, spazi cognitivi.
La rappresentazione
Crea le viste che permettano all'utente di formarsi una rappresentazione coerente e funzionale del sistema.
Si adatta la contesto (il quando): lo scopo corrente, lo stato corrente, il canale usato, e se possible lo stato dell'ambiente.
L'interazione
L'interazione si occupa di permettere all'utente di interagire con il sistema.
Linee guida:
- chiedi all'utente solo l'input realmente necessario
- quando possibile, raccogli i dati dall'ambiente o da altre sorgenti, ma lascia all'utente il controllo di questi dati
- adatta il design ai differenti sistemi di input: tastiere fisiche o virtuali, mouse, touchscreen, voce, gesture
Vantaggi
Quali sono i vantaggi di un approccio di questo genere?
- differenziare le competenze
- progettazione cross-canale
- interfacce innovative
Competenze
Il pattern permette una migliore differenziazione delle competenze:
- il modello sarebbe di esclusiva competenza dell’architettura dell’informaizione. Anzi, il modello rappresenterebbe il core dell’IA
- il controller sarebbe di competenza dell’interaction design (il core dell’ID)
- la vista sarebbe di competenza prevalente dell’information design - visual design, con la collaborazione dell’IA per la navigazione e dell’ID per gli aspetti legati all’interazione.
Progettazione cross-canale
Una più facile progettazione di sistemi informativi cross-canale, ovvero fruibili da web, da smartphone e da altri dispositivi: il modello rimane, la vista e il controller cambiano.
Design creativo
Lo sviluppo di viste differenti può permettere al designer di sviluppare, a fianco delle interfacce più tradizionali e codificate, soluzioni creative ed innovative. Se gli utenti hanno la possibilità di decidere quale fra le differenti interfacce usare, protranno scegliere quella che più si adatta alle loro caratteristiche, esigenze, prefrenze, tenuto conto anche del contesto.
Scenario 1: Gruppo editoriale
Editore di quotidiani (La Repubblica, Il Corriere, The New York Times). Attualmente questi gruppi distribuiscono le informazioni attraverso molteplici canali:
- il quotidiano cartaceo;
- il sito web;
- il sito per il dispositivo mobile / l’applicazione per iPhone-Android;
- broadcast via radio (Radio Capital, Radio24), TV, web TV;
- futuro prossimo: e-readers.
Stesse notizie, livello di approfondimento diverso.
Soluzione: un CMS capace di generare viste e interazioni diverse per le differenti piattaforme.
Scenario 2: Museo d’arte
Scenario: un museo organizza una mostra temporanea. Deve sviluppare - aggiornare:
- il sito internet del museo, con una sezione dedicata alla mostra;
- le guide interattive al museo, che utilizzano handhelds multimediali;
- gli opuscoli gratuiti distribuiti all’interno del museo;
- gli exibit interattivi;
- il catalogo delle opere.
Modello: le ontologie
Lo sviluppo del modello si focalizzerà su due tipologie di unità informative:
- gli artisti;
- le opere.
È possibile usare dei microformati per rappresentare queste informazioni. Esempio, per gli artisti, il microformato foaf (friend of a friend).
Definizione di faccette di interrogazione: linea del tempo, nazionalità, movimento artistico, stile ....
Collocazione dell’opera nello spazio fisico del museo.
Vista: il web
Nel sito web possiamo immaginare:
- una pagina per ogni artista, che elenca le informazioni bibliografiche 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 delle opere;
- una pianta del museo con la collocazione delle opere.
Vista: la guida interattiva
La guida interattiva può prevedere
- una schermata per ogni artista;
- una schermata per ogni opera, con foto, autore, data, collezione, informazioni; descrizione audio dell’opera in formato mp3, da ascoltare con cuffie;
- interazione: possibilità di riconoscere l’opera via qrcode, rfid, codice numerico, localizzazione wireless.
Vista: l’exibit interattivo
L’installazione interattiva può permettere all’utente di giocare con le opere esposte, ad esempio usando un programma di image editing per ritoccare una copia della fotografia dei quadri.
Oppure creare dei quiz e questionari sulla conoscenza delle opere e degli artisti, utilizzando in maniera flessibile le informazioni presenti a livello del model.
Può permettere agli utenti di visualizzare il processo di restauro di un quadro, visualizzando le differenze fra le condizioni pre e post restauro e i dettagli dell’intervento.
Anche in questo caso queste stesse attività possono essere presentate anche sul sito web.
Vista: il catalogo delle opere
Il catalogo può essere generato via pdf, e può prevedere
- le pagine degli artisti, con descrizione;
- le pagine per ogni opera, con fotografia ad alta risoluzione, scheda, descrizione;
- linea del tempo;
- indice degli autori e delle opere.
<!--
--self-contained -t docx
/home/bussolon/.cabal/bin/pandoc -f markdown -t pdf
.md
-o .pdf
pandoc --filter pandoc-citeproc
-f markdown --toc
--latex-engine=xelatex
--variable=geometry:margin=0.5in --variable=geometry:paperheight=19.71cm --variable=geometry:paperwidth=14.78cm
--biblio=/home/bussolon/documenti/ricerca/bibliografia/hci/bibliografia.bib
--biblio=/home/bussolon/documenti/lavori_attuali/unitn/trentour/experience/src/tourist.bib
--biblio=/home/bussolon/documenti/ricerca/bibliografia/hci/motivazioni.bib
--csl=/home/bussolon/documenti/ricerca/bibliografia/hci/chicago-author-date.csl
/home/bussolon/documenti/lavori_attuali/unitn/trentour/deliverable/src/report.md
-o /home/bussolon/documenti/lavori_attuali/unitn/trentour/deliverable/dest/report_2013_11_27_1.pdf
-->