Skip to content Skip to navigation

Connexions

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

Navigation

Recently Viewed

This feature requires Javascript to be enabled.

Pattern emergenti dal design dell'interazione

Module by: Davide Rocchesso. E-mail the author

User rating (How does the rating system work?)
Ratings

Ratings allow you to judge the quality of modules. If other users have ranked the module then its average rating is displayed below. Ratings are calculated on a scale from one star (Poor) to five stars (Excellent).

How to rate a module

Hover over the star that corresponds to the rating you wish to assign. Click on the star to add your rating. Your rating should be based on the quality of the content. You must have an account and be logged in to rate content.

:
(0 ratings)

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, Buxton's 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.

Tabella 1: 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 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 del 2007:

  • 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)
Progetti del 2008:
  • Si presentano pattern di programmazione simili a quelli dell'anno precedente. In alcuni casi si registra la necessità di fare comunicare tra loro applicazioni diverse (client-server).

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. Un buon testo di introduzione alla programmazione in Processing è Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction -- Daniel Shiffman, Morgan Kaufmann, 2008.

Exercise 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.

Solution

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]);
    }
  }
}

Exercise 2

Modify the sketch of problem Exercise 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.

Solution

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]);
    }
  }
}

Exercise 3

A crowd in a room is not static. Add a sort of random walk to the sketch of problem Exercise 2, and you will notice that the wavefront becomes barely visible. You will need to play with color to making it noticeable again.

Solution

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]);
    }
  }
}

Content actions

Give Feedback:

E-mail the module author | Rate module ( How does the rating system work?)

Rating system

Ratings

Ratings allow you to judge the quality of modules. If other users have ranked the module then its average rating is displayed below. Ratings are calculated on a scale from one star (Poor) to five stars (Excellent).

How to rate a module

Hover over the star that corresponds to the rating you wish to assign. Click on the star to add your rating. Your rating should be based on the quality of the content. You must have an account and be logged in to rate content.

(0 ratings)

Download:

Module PDF

Add module to:

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections directly in Connexions. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need a Connexions account to use 'My Favorites'.

| A lens (?)

Definition of a lens

Lenses

A lens is a custom view of Connexions content. You can think of it as a fancy kind of list that will let you see Connexions through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to Connexions materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual Connexions member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks