Connexions

You are here: Home » Content » Pattern emergenti dal design dell'interazione
Content Actions

Pattern emergenti dal design dell'interazione

Module by: Davide Rocchesso

Summary: Dall'analisi di progetti di Interaction Design emergono alcuni pattern di programmazione. Lo studio di questi e altri pattern consente di facilitare il mestiere dell'interaction designer, fornendogli un vocabolario con il quale esprimere in maniera rapida dei bozzetti informatici.

"It is unfortunate that the teaching of design often concentrates almost exclusively on the visual aspect of things -- worse still, without its reformulation as propositional knowledge." Jorge Frascara, in Design Issues 23(4), 2007

La Programmazione nel Design dell'Interazione

Un oggetto interattivo contiene almeno alcune delle seguenti componenti: sensori, attuatori, microprocessore, collegamento telematico. Queste componenti, per poter essere di supporto ad una qualsiasi forma di interazione, devono essere programmate. Il design dell'interazione, quando arriva alla costruzione di prototipi che consentano di esperire l'interazione in maniera diretta e veridica, non può prescindere dalla formulazione di programmi informatici. Questi sono una combinazione di algoritmi e strutture dati, cioè di metodi per organizzare e manipolare in maniera efficiente ed efficace le informazioni. In realtà, strumenti di programmazione efficienti si possono usare in tutte le attività che normalmente precedono o costituiscono il design di un prodotto interattivo:
  • Basic design
  • Sketching
  • Prototyping

Basic Design

Nella progettazione di oggetti interattivi, in special modo se basati su interazione multisensoriale continua, ci sono molti gradi di libertà e lo spazio di progettazione risulta vastissimo. Una strategia per affrontarlo è quella di pensare costruttivamente in termini di fenomeni elementari. Cioè, dovremmo cercare le interaction gestalt, astraendole dalle interazioni effettivamente effettuate. Questo processo è facilitato dalla pratica pedagogica del basic design, nella quale gli studenti affinano le proprie abilità compositive mediante la ricerca di soluzioni a problemi ben posti, e per condivisione e discussione dei risultati. Il basic design non è orientato al prodotto, e si svolge per esercitazioni che esplorano le direzioni:
  • Esperienza sensoriale diretta;
  • Oggettivizzazione dell'esperienza a livello intellettuale;
  • Realizzazione per sintesi di fenomeni.
Esempio 1 
The body of basics (C. Chiappini, 2007): "L'obiettivo dell'esercitazione è quello di ricavare un percorso interattivo attraverso delle immagini di azioni del vostro corpo". Risultati.
Esempio 2 
Multi-stage yet continuos coupling (Rocchesso e Polotti, 2008): "L'obiettivo dell'esercitazione è quello di progettare il feedback multisensoriale per una connessione a vite (come quella della moka) in modo che il raggiungimento del giusto punto di chiusura sia facile, continuo, ed espressivo".

Sketching

Lo sketching è una attività archetipica del processo di design. Il fatto che lo sketching tradizionalmente usato in architettura e nel design di prodotto non sia più adeguato pone la questione su cosa significhi fare sketching nel design dell'interazione (Sketching User Experiences -- Bill Buxton; Morgan Kaufmann, 2007, web site). Tra le sue caratteristiche importanti, troviamo:
  • Velocità
  • Collezionabilità
  • Bassa risoluzione
  • Evocazione al posto di ri-produzione
Gli sketch servono a facilitare una miglior comprensione del problema e, quindi, a generare nuove idee. Così come nel brainstorming, la quantità è più importante della qualità. È normale, nelle fasi iniziali di un design, produrre molti sketch e confrontarli per giustapposizione. Se ci sono pattern importanti, questi dovrebbero emergere a prima vista. Una collezione di sketch abilita il confronto dialogico, come nel basic design. Sugli sketch non si fa valutazione. Attraverso gli sketch si cercano soluzioni.

Prototyping

Spesso, lo sketching viene visto come prototipazione a bassa fedeltà. Tuttavia, mentre gli sketch hanno uno scopo principalmente generativo, i prototipi sono prodotti a fine di valutazione.
Sketch vs. Prototype (Bill Buxton)
SKETCH PROTOTYPE
evocative didactic
suggest describe
explore refine
question answer
propose test
provoke resolve
tentative specific
non committal depiction
Le tre attività di basic design, sketching, e prototyping sono diverse e non c'è tra esse una relazione d'ordine. Nelle esercitazioni di basic design, si può procedere per produzione rapida di molti esemplari di soluzione (come nello sketching) e raffinarne alcuni per sottoporli a valutazione (come nel prototyping).
Nel design dell'interazione, è importante avere materiali, strumenti, e tecniche adeguate a tutte e tre le attività descritte. Processing è un linguaggio e un ambiente di sviluppo adeguato per buona parte di questi scopi. È interessante notare come i programmi Processing vengano chiamati sketch, a enfatizzare la velocità con cui si possono ottenere bozzetti interattivi, utili a esplorare un vasto ventaglio di soluzioni.

Emergenza dall'Esperienza

Nel Laboratorio di Prototipazione di Artefatti Interattivi, gli studenti di Gillian Crampton Smith e Philip Tabor, sotto la supervisione di Durrell Bishop e Davide Rocchesso, hanno sviluppato alcuni prototipi di oggetti interattivi. Nel corso della realizzazione dei progetti si sono evidenziati alcuni problemi di programmazione, per i quali sono state trovate soluzioni ad hoc. Molti di questi problemi si ritrovano in molti ambiti diversi, e vale la pena di analizzarli per studiare delle soluzioni efficaci e di applicabilità generale.
Progetti:
  • Aequilibrium
    • Object Oriented Programming (the fish class)
    • Ray tracing: distance, direction, reflection (of the fish)
    • Oscillations (of fish tails)
  • Flyer Cafe
    • Using a library API (reacTIVision)
    • Stack (of geometric transformations)
    • Object Oriented Programming (not used yet)
  • Secret Garden
    • Using a library API (BlobDetection)
    • Filtering (temporal smoothing)
    • Thresholding, hysteresis, and adaptation
    • Timers
  • That Sinking Feeling
    • Multithreading (not used yet)
    • Oscillations (waves)
    • Timers
  • Tree of Life
    • Mapping (distance to pixels)
    • Timers
    • Using a library API (Sonia, Video)
    • Thresholding and hysteresis
  • Venice 360
    • Using a library API (Sonia)
    • Thresholding and hysteresis
    • Buffers (audio)
  • WAV
    • Oscillations (visual wave)
    • Matrices (of LEDs)
    • Timers (in visual programming)
    • Multiplexing/demultiplexing (in visual programming)

Pattern

Nel design degli artefatti interattivi, così come in altre aree della progettazione, si può procedere alla risoluzione di un problema mediante identificazione di pattern, cioè di configurazioni che ricorrono sovente, e per le quali esistono soluzioni di efficacia consolidata.
Un pattern si può descrivere mediante alcuni campi, tra i quali:
  • Esempio (es., un sensore rileva la posizione di una persona in un corridoio, un'immagine sulla parete segue la persona come un'ombra)
  • Problema (es., il sensore produce numeri che dipendono nonlinearmente dalla distanza in metri. Lo spazio dell'immagine sulla parete è misurabile in pixel. Come traduco in pixel i numeri prodotti dal sensore?)
  • Vincoli (es., la traduzione deve essere efficiente e precisa in tutti i punti)
  • Principio (es., è un mapping non lineare uno-a-uno)
  • Soluzione (es., Se ho mille pixel, posso riempire un array di mille celle con i valori misurati dal sensore, eventualmente interpolando a partire da poche misure. Tuttavia, a me serve la mappa inversa, che dal sensore va ai pixel. Cioè, dovrei trovare l'indice di una cella dell'array dato il suo contenuto. Una maniera per rendere efficiente l'accesso per contenuto è di organizzare una struttura dati che si chiama hash. Oppure, usando l'array ordinato proveniente dalle misure, posso effettuare una ricerca per bisezione.)

Riferimenti

Al mondo ci sono più testi di programmazione che esemplari di Panda gigante. Molti di questi sono buoni e utili, e pochi tra i buoni e gli utili sono liberamente accessibili. In particolare, segnalo per la sua chiarezza e compattezza il free book How to Think Like a Computer Scientist: Java Version -- Allen B. Downey; Green Tea Press 2003. E' anche accessibile nei suoi contenuti Data Structures and Algorithms with Object-Oriented Design Patterns in Java -- Bruno R. Preiss, John Wiley and Sons 1999. Tra i vari linguaggi ai quali fanno riferimento i manuali di programmazione, certamente Java è quello più indicato per gli utilizzatori di Processing, visto che Processing è costruito su Java, e di questo mette a disposizione l'intero repertorio di classi. Gli autori di Processing hanno scritto il libro Processing: A Programming Handbook for Visual Designers and Artists -- Casey Reas and Ben Fry, MIT Press 2007
Problem 1
There is a crowd of autonomous communicating creatures in a room, like in a cocktail party. Each has some kind of visual display, such as a light bulb. You want to select one individual in the crowd and make that selection known to everybody by coordinating individual light modulations. One possibility is a propagating wavefront, like in Mexican waves at the stadium. A Processing sketch to test this phenomenon can be written in less than fifteen minutes.
[ Click for Solution 1 ]
Solution 1
Click over the window produced by the following code: 
   
int NOBJ = 100;
int WINSIZE = 100;
int[] objects_x = new int[NOBJ];
int[] objects_y = new int[NOBJ];
int[] distance = new int[NOBJ];
int counter = 0;

void setup() {
 size(WINSIZE, WINSIZE); 
 for (int i=0; i<NOBJ; i++) { 
   objects_x[i] = int(random(0, WINSIZE-1));
   objects_y[i] = int(random(0, WINSIZE-1));   
 }  
}

void mouseReleased() {
 for (int i=0; i<NOBJ; i++) {  
   distance[i] = int(sqrt(sq(objects_x[i] - mouseX) + sq(objects_y[i] - mouseY)));
 }
 counter = 0;
}

void draw() {
  background(200);
  counter = counter+1;
  for (int i=0; i<NOBJ; i++) {  
    if (distance[i] == counter){
      strokeWeight(4);
      point(objects_x[i], objects_y[i]);
    }
    else {
      strokeWeight(2);
      point(objects_x[i], objects_y[i]);
    }
  }
}
[ Hide Solution 1 ]
Problem 2
Modify the sketch of problem 1 to implement an imploding wavefront, and compare the two simulations to see which is the most effective for highlighting one individual in the crowd.
[ Click for Solution 2 ]
Solution 2
Click over the window produced by the following code: 
   
int NOBJ = 100;
int WINSIZE = 100;
int[] objects_x = new int[NOBJ];
int[] objects_y = new int[NOBJ];
int[] distance = new int[NOBJ];
int counter = 0;

void setup() {
 size(WINSIZE, WINSIZE); 
 for (int i=0; i<NOBJ; i++) { 
   objects_x[i] = int(random(0, WINSIZE-1));
   objects_y[i] = int(random(0, WINSIZE-1));   
 }  
}

void mouseReleased() {
 for (int i=0; i<NOBJ; i++) {  
   distance[i] = int(sqrt(sq(objects_x[i] - mouseX) + sq(objects_y[i] - mouseY)));
 }
 counter = WINSIZE - 1;
}

void draw() {
  background(200);
  counter = counter - 1;
  for (int i=0; i<NOBJ; i++) {  //ciclo for 
    if (distance[i] == counter){
      strokeWeight(4);
      point(objects_x[i], objects_y[i]);
    }
    else {
      strokeWeight(2);
      point(objects_x[i], objects_y[i]);
    }
  }
}
[ Hide Solution 2 ]
Problem 3
A crowd in a room is not static. Add a sort of random walk to the sketch of problem 2, and you will notice that the wavefront becomes barely visible. You will need to play with color to making it noticeable again.
[ Click for Solution 3 ]
Solution 3
Click over the window produced by the following code: 
   
int NOBJ = 100;
int WINSIZE = 100;
int[] objects_x = new int[NOBJ];
int[] objects_y = new int[NOBJ];
int[] distance = new int[NOBJ];
int counter = 0;
float randomConstant = 1.1;

void setup() {
 size(WINSIZE, WINSIZE); 
 for (int i=0; i<NOBJ; i++) { 
   objects_x[i] = int(random(0, WINSIZE-1));
   objects_y[i] = int(random(0, WINSIZE-1));   
 }  
 frameRate(WINSIZE/2);
}

void mouseReleased() {
 for (int i=0; i<NOBJ; i++) {  
   distance[i] = int(sqrt(sq(objects_x[i] - mouseX) + sq(objects_y[i] - mouseY)));
 }
 counter = WINSIZE - 1;
}

void draw() {
  background(200);
  counter = counter - 1;
  for (int i=0; i<NOBJ; i++) { 
    objects_x[i] =constrain(objects_x[i]+int(random(-randomConstant,randomConstant)), 
       0, WINSIZE-1);	    
    objects_y[i] =constrain(objects_y[i]+int(random(-randomConstant,randomConstant)), 
       0, WINSIZE-1);	    
    if (distance[i] == counter){
      strokeWeight(8);
      stroke(255,0,0);
      point(objects_x[i], objects_y[i]);
    }
    else {
      strokeWeight(2);
      stroke(120,120,0);
      point(objects_x[i], objects_y[i]);
    }
  }
}
[ Hide Solution 3 ]

Comments, questions, feedback, criticisms?

Discussion forum

Send feedback