Gli artefatti digitali Progettare multimedia Maggio 2000 Gli artefatti digitali Gli artefatti

L’abbinamento strutturale Progettare multimedia Maggio 2000 L’abbinamento strutturale Il design attua l’abbinamento tra corpo e artefatto digitale mediante criteri grafici Forma, colore, dimensione, posizione, orientamento, texture e trasformazioni temporali (animazioni, video) Un’azione viene avviata tramite action triggers Pulsanti o bottoni raggruppati in menu Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

L’abbinamento strutturale Utente Interfaccia dell’utensile o artefatto Azione o compito Sistemi multimediali M.A. Alberti Gli artefatti digitali

Progettare multimedia Maggio 2000 Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

L’interfaccia Il progetto di un’interfaccia riguarda: l’analisi delle sequenze operative che l’utente deve compiere per eseguire determinati compiti le componenti visive tramite cui si costituisce lo spazio operativo sullo schermo del monitor Sistemi multimediali M.A. Alberti Gli artefatti digitali

Infodesign non è infostyling. L’interfaccia Il progetto di un’interfaccia consiste: scelta delle funzioni loro denominazione organizzazione in gruppi di similitudine individuare una gerarchica su livelli diversi trattamento visivo Nella concezione riduzionistica del design esso si limita all’ultimo passo. Infodesign non è infostyling. Sistemi multimediali M.A. Alberti Gli artefatti digitali

Ingegneria vs design Punto di vista dell’ingegneria Punto di vista del design Il programma viene valutato in termini di velocità affidabilità prestazione... facilità e rapidità d’apprendimento da parte di utenti non necessariamente esperti Sistemi multimediali M.A. Alberti Gli artefatti digitali

Il design Il design non può essere applicato dopo che il prodotto è stato realizzato Anche se questo è quello che comunemente si crede Il design deve essere parte integrante del processo di sviluppo per essere efficace Sistemi multimediali M.A. Alberti Gli artefatti digitali

Il processo del design Simile alle tipiche metodologie dell’ingegneria Una comprensione iniziale del problema basata sull’esperienza o sulla ricerca Seguita da un processo iterativo di generazione e valutazione fino alla soluzione che meglio soddisfa i requisiti Sistemi multimediali M.A. Alberti Gli artefatti digitali

Il contesto del design Analizzare e interpretare i processi operativi Specificare la funzionalità d’uso Organizzare i comandi Definire i flussi delle diverse sequenze operative storyboards Design dei componenti grafici Design della documentazione i manuali parte integrante del progetto di interfaccia Design del materiale promozionale Sistemi multimediali M.A. Alberti Gli artefatti digitali

Il ruolo del designer Svolge un servizio L’infodesign offre poche opportunità di soddisfare tendenze narcisistiche e diffondere creazioni egocentriche. Si suppone che il pubblico non sia particolarmente interessato a queste manifestazioni personali. L’infodesign è in primo luogo un servizio. Questa constatazione contrasta con le ambizioni di espressione individualistica. Gui Bonsiepe Sistemi multimediali M.A. Alberti Gli artefatti digitali

Il ruolo del designer Svolge un ruolo cognitivo in quanto è un coautore selezione dei contenuti ordinamento gerarchizzazione collegamenti distinzioni visive Azione efficace Sistemi multimediali M.A. Alberti Gli artefatti digitali

Il designer sceneggiatore Il ruolo del designer d’interfacce è simile al ruolo dello sceneggiatore teatrale Una rappresentazione di oggetti e di ambienti per fornire un contesto per l’azione In scena: disegni di oggetti che hanno alcune funzioni (porte che si aprono), luci per attirare attenzione (colore intensità orientamento), pannelli che rappresentano elementi di architettura Nelle interfacce: disegni degli oggetti modellati dal sw, del modo per impartire loro un comportamento e dell’ambiente in cui si svolgono azioni Sistemi multimediali M.A. Alberti Gli artefatti digitali

Una rappresentazione del mondo Lo sceneggiatore e il designer grafico creano rappresentazioni del mondo reale Simulando aspetti del reale Ma il design visuale non è tutta l’interfaccia Come lo sceneggiatore non scrive completamente il pezzo teatrale Sistemi multimediali M.A. Alberti Gli artefatti digitali

Arte e design Il designer non è un artista Spesso un elemento di confusione L’arte è valutata per la sua originalità ed espressività Il design deve risolvere conflitti imposti dal problema, dal budget, dalla tempistica Più vicino all’ingegneria Trova continuamente compromessi (trade-off) Sistemi multimediali M.A. Alberti Gli artefatti digitali

There are no simple answers, only tradeoffs Donald A. Norman

La via del successo Un reale successo può essere raggiunto solo attraverso la stretta collaborazione tra Designer sensibili alle problematiche di sviluppo del sistema Programmatori e produttori sensibili alle problematiche del design visuale e concettuale Sistemi multimediali M.A. Alberti Gli artefatti digitali

Progettare multimedia Maggio 2000 Enciclopedia GIOVANE (Rizzoli), 1999 da Dorlink Kinderley, 1997-1998 Cattivo esempio di affordance, troppi elementi sulla pagina, niente strutturazione delle azioni possibili. Elementi grafici come I rulli colorati cui non è chiaro se corrisponde una funzione, coesistenza di elementi molto realistici con elementi astratti, troppi riquadri e niente griglia. Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Dalle etichette dai link di questa pagina non appare neppure chiaro di cosa si occupi il sito. http://www.rottentomatoes.com/ Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 www.unisource.it Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 www.itholding.it Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 OK, ma da dove devo cominciare? Perchè lo chiamano così? E’ lì che devo cliccare? Ma a che cosa serve questo sito? Questi due link sembrano uguali. Perchè? Perchè lo hanno messo lì? Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Sistemi multimediali M.A. Alberti Gli artefatti digitali http://www.betterphoto.com Gli artefatti

La manipolazione diretta Termine introdotto da Shneiderman Una rappresentazione continua e consistente dell’oggetto d’interesse Azioni fisiche che eliminano la necessità di apprendere sintassi complesse per modificare il comportamento degli oggetti Rapide operazioni incrementali e reversibili, immediatamente visibili grazie a feedback Sistemi multimediali M.A. Alberti Gli artefatti digitali

Ruolo della manipolazione diretta La manipolazione diretta crea un senso di coinvolgimento diretto ed è la chiave dell’interazione uomo-macchina Sketchpad, Sutherland 1963 Nel mondo digitale tutto ciò che importa è la rappresentazione, in cui inter-agiscono utenti, oggetti software e elementi dell’interfaccia Una sorta di WYSIWYG esistenziale Termine coniato allo Xerox PARC: un paradigma per interfacce a manipolazione diretta Sistemi multimediali M.A. Alberti Gli artefatti digitali

Progettare multimedia Maggio 2000 Sliders BUONA AFFORDANCE MAC OS 8 Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Bottoni Buona affordance Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 BOTTONI O TITOLI? CATTIVA AFFORDANCE Nei primi tempi delle interfacce GUI questo errore veniva spesso compiuto. In questa applicazione, il designer ha scelto di dare alle etichette delle sezioni un aspetto tridimensionale evidentemente per metterle in risalto e distinguerle dai campi di testo. In questo modo però li ha resi confondibili con i bottoni. Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 CATTIVA AFFORDANCE La preoccupazione del designer poteva essere quella di presentare un’interfaccia bilanciata, ma l’inclusione di bottoni che non rappresentano comandi costituisce un elemento di grande disturbo. Potrebbe anche essere che nelle intenzioni del designer quei bottoni rappresentano comandi accessibili in altri contesti e non nell’attuale, quindi la scelta di nasconderne l’etichette. Ma in una tipica applicazione Windows i bottoni disabilitati nel contesto attuale hanno le etichette che evidenziano lo stato non-attivo, tra l’altro in modo non molto diverso da ‘Exit Profile Viewer’, che invece è selezionabile. ? Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 AFFORDANCE ? WINDOWS 2.0 Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 AFFORDANCE ? WINDOWS 95 Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Usabilità La efficacia, efficienza e soddisfazione con cui determinati utenti possono raggiungere determinati obiettivi in determinati ambienti d’uso ISO 9241 Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Usabilità La efficacia, efficienza e soddisfazione con cui determinati utenti possono raggiungere determinati obiettivi in determinati ambienti d’uso ISO 9241 Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Usabilità La efficacia, efficienza e soddisfazione con cui determinati utenti possono raggiungere determinati obiettivi in determinati ambienti d’uso ISO 9241 Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Usabilità La efficacia, efficienza e soddisfazione con cui determinati utenti possono raggiungere determinati obiettivi in determinati ambienti d’uso ISO 9241 Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Tre variabili indipendenti Progettare multimedia Maggio 2000 Tre variabili indipendenti ambienti obiettivi utenti Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Usabilità La efficacia, efficienza e soddisfazione con cui determinati utenti possono raggiungere determinati obiettivi in determinati ambienti d’uso ISO 9241 l’accuratezza e completezza con cui raggiungo l’obiettivo le risorse spese per ottenere tale risultato le risorse spese per ottenere tale risultato Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Usabilità La efficacia, efficienza e soddisfazione con cui determinati utenti possono raggiungere determinati obiettivi in determinati ambienti d’uso ISO 9241 Possiamo definire delle metriche Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 chi è? Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 chi è? Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Sfondo rosso ?!? Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 I principi del dialogo 1. Adeguatezza al compito 2. Autodescrittività 3. Controllabilità 4. Conformità alle aspettative dell’utente 5. Tolleranza agli errori 6. Adeguatezza alla personalizzazione 7. Adeguatezza all’apprendimento (ISO 9241-10) Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

1. Adeguatezza al compito Progettare multimedia Maggio 2000 1. Adeguatezza al compito “Un dialogo è adeguato al compito nella misura in cui supporta l’utente nell’efficace ed efficiente completamento del compito” ISO 9241-10 Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 2. Auto-descrittività “Un dialogo è autodescrittivo nella misura in cui ogni passo di dialogo è immediatamente comprensibile attraverso un feedback del sistema oppure è spiegato all’utente quando questi richieda l’informazione rilevante” ISO 9241-10 help Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Esempio Premendo Help: You tried to create a copy of a file that uses the same filename and location as the original file. You cannot copy a file to itself. To correct this problem: type a new filename or path. Il messaggio è generato dalla funzione FindFile di Microsoft’s Word quando si cerca di copiare un file nella stessa locazione in cui è archiviato. Cosa si deve fare? Sembrerebbe che premere i bottoni ‘Cancel’ o ‘OK sia equivalente. Ma gli effetti sono diversi a seconda del numero di file che si cerca di copiare. Secondo il manuale d’uso: Se è selezionato un file, Word cancella l’operazione in risposta sia a ‘OK sia a ‘Cancel’. Se più file sono selezionati allora Word cancella la funzione per un file alla volta se si usa il bottono ‘OK e cancella tutta l’operazione altrimenti. Se premete il pulsante ‘Help’ per avere chiarimenti in merito o semplicemente per scoprire quanto detto ottenete il messaggio riportato, piuttosto tautologico e che non aggiunge informazioni a quello che già avevate capito. Da: Microsoft Word for Windows Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Esempio Questo messaggio generato dall’ambiente di sviluppo SQL Windows viene sollevato quando il programmatore ha introdotto un’istruzione non corretta nel contesto. Ma il messaggio è privo di contenuto informativo: cosa succede se premo ‘yes’? Viene mantenuta l’istruzione scorretta? Il programmatore impara per esempi. Quando l’ambiente genera messaggi privi di contenuto informativo il programmatore non viene messo nelle condizioni di ricordare cosa succede. Inoltre è sempre ambiguo usare domande che contengono una negazione. In generale la risposta affermativa è ambigua: vuol dire sì l’istruzione non è corretta o no, l’istruzione è corretta nel contesto. I messaggi dell’ambiente di programmazione svolgono una importante funzione di documentazione dell’ambiente e didattica, che sollecitano il programmatore a implementare a sua volta una messaggistica significativa. Da: SQL Windows Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

3. Controllabilità “Un dialogo è controllabile nella misura in cui l’utente è capace di mantenere il controllo sull’intero corso dell’interazione fino a quando l’obiettivo è stato raggiunto” ISO 9241-10 Sistemi multimediali M.A. Alberti Gli artefatti digitali

4. Conformità alle aspettative “Un dialogo è conforme alle aspettative dell’utente nella misura in cui corrisponde alla conoscenza del compito, alla formazione e all’esperienza dell’utente, e alle convenzioni comunemente seguite” ISO 9241-10 Sistemi multimediali M.A. Alberti Gli artefatti digitali

5. Tolleranza agli errori “Un dialogo è tollerante agli errori nella misura in cui, a dispetto di evidenti errori di input, I risultati desiderati possono essere ottenuti senza (o con minime) azioni correttive” ISO 9241-10 Sistemi multimediali M.A. Alberti Gli artefatti digitali

6. Adeguatezza alla personalizzazione Progettare multimedia Maggio 2000 6. Adeguatezza alla personalizzazione “Un dialogo è adeguato alla personalizzazione nella misura in cui il sistema di dialogo è costruito in modo da permettere adattamenti alle necessità e capacità individuali dell’utente per un dato compito” ISO 9241-10 Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

7. Adeguatezza all’apprendimento “Un dialogo è adeguato all’apprendimento nella misura in cui esso fornisce mezzi, guida e stimolo all’utente durante le fasi di apprendimento” ISO 9241-10 Sistemi multimediali M.A. Alberti Gli artefatti digitali

Progettare multimedia Maggio 2000 Esempio Eccelente esempio di interfaccia (macintosh). L’utente leggendo da sinistra a destra come è convenzione viene guidato ad effettuare le necessarie operazioni nell’ordine temporale giusto. I valori che appaiono nel menu’ a tendina sono valori di default nel caso in cui l’utente non scelga diversamente. Il campo consente di editare la stringa da cercare. L’etichetta del bottone evidenzia l’azione che verrà eseguita. Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Esercizio Quale delle due interfacce utente che seguono è più adeguata? Compito: formattare uno o più dischetti Utente: uno di noi Contesto: uso tipico: casa o ufficio Sistemi multimediali M.A. Alberti Gli artefatti digitali

Soluzione 1 Sistemi multimediali M.A. Alberti Gli artefatti digitali

Soluzione 2 Sistemi multimediali M.A. Alberti Gli artefatti digitali

Esercizio Quale delle due interfacce utente che seguono è la migliore? Compito: search & replace di stringhe Sistemi multimediali M.A. Alberti Gli artefatti digitali

Soluzione 1 Sistemi multimediali M.A. Alberti Gli artefatti digitali

Soluzione 2 Sistemi multimediali M.A. Alberti Gli artefatti digitali

Progettare multimedia Maggio 2000 Creatività e design Quali processi permettono di creare nuovi artefatti? Mimesi Ibridazione Metafora Mutazione … Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Mimesi Maggio 2000 Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Mimesi Sistemi multimediali M.A. Alberti Gli artefatti digitali

Mimesi Sistemi multimediali M.A. Alberti Gli artefatti digitali

Progettare multimedia Maggio 2000 Mimesi Le prime automobili ricalcavano il modello di carrozze in modo molto evidente. Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Ibridazione Letteralmente: incrociare piante o animali di specie diverse in modo da ottenere ibridi Esempio: lavagna + proiettore  lavagna luminosa Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Ibridazione Maggio 2000 Lettore CD e applicativo per fissare Data e ora di Windows. Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Metafora Dal greco trasferimento: il processo linguistico basato su analogia o similitudine sottointesa, per cui si traspone un vocabolo o una locuzione dal senso proprio a un senso figurato. sei un cannone, sei un fulmine, annegare nei debiti, l’ondeggiare delle spighe, una grandine di pugni. La similitudine originaria può non essere più presente il braccio della lampada o la gamba del tavolo. Un mezzo espressivo, un arricchimento semantico Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Metafore comuni nel sw Il secchio di vernice per la funzione di colorazione di superfici. Il pennello per la funzione di colorazione delle linee. Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Mutazione Fenomeno per cui in una specie si origina un individuo che presenta alcuni caratteri diversi dai suoi ascendenti, e li trasmette alla discendenza. Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Il design generativo Progettare un artefatto e generarne automaticamente delle mutazioni genetiche. Progettare le caratteristiche essenziali di un artefatto e un computer genera possibili istanze metadesign o design di specie. Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Metadesign Le sedie sono ottenute automaticamente: sono tutte diverse, ma condividono i caratteri genetici http://soddu2.dst.polimi.it/ Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Emergent design: Chair farm Sistemi multimediali M.A. Alberti Gli artefatti digitali

Un metaprogetto architetturale Progettare multimedia Maggio 2000 Un metaprogetto architetturale Diversi modelli 3D ottenuti dallo stesso meta-progetto Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Basilica, C.Soddu, 1998 Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Progettare multimedia Maggio 2000 Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Evoluzione degli artefatti Elettrodomestici specializzati nell’elaborazione di informazione Strumenti musicali elettrici, tastiere varie: l’infodomestico musicale Macchine fotografiche digitali, visori Apparecchi medicali Sistemi multimediali M.A. Alberti Gli artefatti digitali

Gli infodomestici intelligenti Progettare multimedia Maggio 2000 Gli infodomestici intelligenti Oggetti che inglobano comportamento intelligente. Il progetto TTT Things that think del MIT http://www.media.mit.edu/ttt/ Kitchen Sync: una cucina che ha conoscenza tanto da sapere che voi volete il vino bianco chardonnay freddo e il sugo caldo; oppure conosce le misure di un pizzico, un cucchiaio … Mort: un pinguino parlante Toys to Think With Programmable Bricks Hyperinstruments Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti

Pro e contro Vantaggi La specializzazione consente di assolvere bene un dato compito e di realizzare un design ottimale Strutturazione fisica su misura Interfaccia adeguata Conseguente facilità di utilizzo Sistemi multimediali M.A. Alberti Gli artefatti digitali

Pro e contro Svantaggi Perdita di possibilità di condivisione dati Maggiore flessibilità del computer general pourpose Maggiore costo complessivo Sistemi multimediali M.A. Alberti Gli artefatti digitali

Progettare multimedia Maggio 2000 Bibliografia Shneiderman, B. Designing the User Interface. Strategies for Effective Human-Computer Interaction Addison Wesley,Reading MA 1987. Sistemi multimediali M.A. Alberti Gli artefatti digitali Gli artefatti