1 Sketching Laboratorio di Interazione Uomo-Macchina – a.a. 2010/2011 F. Vernero.

Sketching

Laboratorio di Interazione Uomo-Macchina – a.a. 2010/2011F. Vernero

Lezione 2 -- 2

Cos’è?

• Uno sketch è un disegno a mano libera eseguito rapidamente.

• E’ uno strumento di lavoro, non un prodotto finito.

• Non deve essere “bello” o verosimile, ma efficace.

Laboratorio di Interazione Uomo-Macchina – a.a. 2010/2011 F. Vernero

Lezione 2 -- 3

A cosa serve?

• Pensare• Rappresentare• Comunicare

• Nel processo di design:– Annotare e sviluppare idee;– Confrontare idee;– Confrontarsi con altri progettisti;– Lavorare in gruppo su un’idea;– Spiegare un’idea ad altri membri del team;– Test con l’utente

Lezione 2 -- 4

Perché è utile?

• Veloce

• Economico

• Non necessita di strumenti sofisticati

• Alla portata di tutti

• Stimola la collaborazione

Lezione 2 -- 5

Come fare?

• Stabilire cosa si vuole esprimere/rappresentare– Oggetti reali?– Concetti astratti?

• Rappresentare gli elementi chiave– Semplificare– Usare metafore e simboli

• Usare i colori per evidenziare, chiarire, aggiungere informazioni…

Lezione 2 -- 6

Al lavoro!

• Presentatevi…• Perché avete deciso

di iscrivervi a questo laboratorio? E a “Scienze della Comunicazione”?

• Quali sono i vostri interessi?

• …

Sketching

Tecniche

Lezione 2 -- 8

Strumenti - 1

• Matita HB (adatta anche ai principaianti)– Una volta acquisita una certa confidenza, si

possono provare anche matite più morbide.– Le matite dure sono le meno adatte allo

sketching…

• Penne, pennarelli, evidenziatori:– Esplorate le differenze di tratto e gli effetti che

si possono ottenere– La cosa importante è che lo strumento scelto

sia scorrevole!

Lezione 2 -- 9

Strumenti -2

• Un comune foglio bianco (grammatura 80)– Permette di appoggiarsi comodamente sulla

superficie del tavolo– Adatto anche ai principianti– Si può appallottolare e cestinare

• Un blocco per schizzi– Adatto a chi ha acquisito buona confidenza con lo

sketching– Permette di conservare ordinatamente i propri lavori

Lezione 2 -- 10

Strumenti - 3

• Un tovagliolino– Quando viene un’idea bisogna fissarla subito!

• Cartoncini con diverse grammature, consistenze, colori…– Esplorate le differenze che si possono

ottenere per trovare gli strumenti più adatti a voi!

• P.S.: la carta riciclata va benissimo!!!

Lezione 2 -- 11

Visual Thinking

• Pensare per immagini;• Usare le immagini per stimolare e sostenere il

pensiero;• Usare la parte destra del cervello (emozionale,

creativa…) per rappresentare e organizzare l’informazione;

• Usare le immagini per risolvere problemi, per progettare, per rappresentare situazioni complesse, per comunicare efficacemente.

Lezione 2 -- 12

Visual Thinking – come?

• Acquisire un’abitudine positiva a pensare per immagini:– Avere sempre con sé carta e penna;– Prendere appunti, fare schizzi e schemi,

rappresentare visivamente le proprie idee;– Allenare la propria capacità a pensare per

immagini.

Lezione 2 -- 13

Scarabocchiare

• “Doodling”

• Libero– Allena la capacità di pensare per immagini,

• Controllato– Allena la manualità, la precisione, la capacità

di ottenere esattamente ciò che si vuole tramite il disegno.

Lezione 2 -- 14

Al lavoro!

• Scarabocchi liberi: prendete “appunti”… quali immagini vi suggeriscono queste parole?– Schianto– Bruciore– Fumo– Pietra– Scivolata

• Scarabocchi controllati: unire i puntini

Lezione 2 -- 15

Disegnare persone - 1

(da: http://communicationnation.blogspot.com/2005/12/visual-thinking-practice-draw-stick.html)

Lezione 2 -- 16

Stick figure: tutorial - 1

1. Iniziare sempre disegnando il corpo (invece che la testa).

2. Disegnare un cerchio per la testa. La posizione della testa rispetto al corpo aiuta a rappresentare molti stati d’animo e situazioni.

3. Dare un’espressione al volto: le classiche “emoticons” possono essere molto utili. Disegnare il naso (basta una riga sottile) aiuta ad indicare l’orientamento del corpo, utile soprattutto quando ci sono vari personaggi che interagiscono.

Lezione 2 -- 17

4. Aggiungere le gambe – sono fondamentali per rappresentare posizione e movimento-. I piedi possono essere rappresentati con due piccoli ovali e aiutano a connettere il personaggio ad un “suolo” immaginario.

5. Disegnare le braccia, completando la posizione o il movimento che si è iniziato con le gambe.

Lezione 2 -- 18

6. Aggiungere le mani con due piccoli tratti.

7. Usare fumetti, se necessario, per rappresentare i pensieri e le parole del personaggio e renderlo più espressivo.

Lezione 2 -- 19

Disegnare persone - 2

• La stella (star figure)

• Il blob (blob figure)

• profili

Lezione 2 -- 20

Al lavoro!

• Allenatevi a disegnare persone secondo il modello della stella e del blob:– Differenziate i personaggi

• Uomo/donna, alto/basso, magro grasso…• Con la barba, con gli occhiali, con i capelli lunghi…

– Disegnate le persone in diverse posizioni• Sedute, di profilo, che corrono, che ballano…• Che muovono un braccio…

Lezione 2 -- 21

Mani, maniglie e bottoni

• Le mani sono una delle cose più difficili da disegnare!– Semplificare: solo 4 dita (una è il pollice!)– Rappresentare in dettaglio solo quando

serve!

• Servono per afferrare maniglie, premere bottoni…

Lezione 2 -- 22

Al lavoro!

• Provate a disegnare mani che afferrano e premono:– Premere un bottone;– Afferrare un joystick;– Ruotare una maniglia;– Afferrare una pallina;– Portare una valigia

Lezione 2 -- 23

Espressioni

• Le espressioni del volto sono fondamentali per comunicare le emozioni:– Semplificare: concentrarsi sulle parti più

espressive.– Prendere ispirazione dalle emoticon:

• Semplici• Standard (o quasi)

Lezione 2 -- 24

Al lavoro!Al lavoro!

• Quante espressioni diverse riuscite a disegnare?

Lezione 2 -- 25

Metafore

• Alcune metafore visive ci permettono di rapresentare concetti astratti:– Lampadina accesa idea;– Ingranaggi lavoro

• Al lavoroAl lavoro:– Quali altre metafore vi vengono in mente?– Quali sono concetti ci sarebbe bisogni di

rappresentare parlando di HMI?

Lezione 2 -- 26

Al lavoro!

• Dividete il foglio in 12 caselle e scrivete in ognuna il nome di un oggetto di uso comune.

• Scambiate il foglio con un compagno.

• Disegnate un’icona per ciascun oggetto:– L’obiettivo è semplificare, non fare un disegno

estremamente verosimile!

Lezione 2 -- 27

Casualità - 1

• Un modo per stimolare la creatività (di nuovo!) nel pensare per immagini è quello di usare una macchia come punto di partenza. Ad esempio:– Appoggiate una bustina di the su un

cartoncino;– Quando la macchia è asciutta, provate a farne

il punto di partenza per un disegno;– Ripetete l’esercizio con costanza

Lezione 2 -- 28

Casualità - 2http://designmichaelsurtees.blogspot.com/2006/01/tea-stain-ideas.htmlhttp://communicationnation.blogspot.com/2006/01/visual-thinking-practice-randomness.htmlhttp://www.flickr.com/photos/davegray/

Sketching

Uno scenario completo

Lezione 2 -- 30

Al lavoro!

• E’ il momento di mettere tutto insieme…– Concentratevi sull’ambito dell’Interazione

Uomo-Macchina– Scegliete una situazione e qualche tipo di

metafora…– Disegnate una “storia” in quattro fasi:

• Situazione iniziale• Problema• Soluzione• Conclusione

Oltre lo sketching

Paper Prototyping

Lezione 2 -- 32

Paper prototyping

• Fare sketch per il paper prototyping– è più semplice a veloce che utilizzare qualche sw

specifico.– non pone vincoli tecnici (sulla carta, tutto si può fare!)– è veloce da modificare: si può sperimentare,

cambiare idea, fare miglioramenti, entrare in un ciclo di progettazione e riprogettazione…

– Si possono usare elementi stampati: oggetti che possono entrare nel progetto, layout interessanti da incollare, scarabocchiare, modificare…

– Consente di prendere appunti “contestuali”– E’ molto utile per rappresentare la maggior parte delle

interfacce “tradizionali”.

Lezione 2 -- 33

http://www.alistapart.com/articles/paperprototyping

Lezione 2 -- 34

Lezione 2 -- 35

Lezione 2 -- 36

Paper prototyping

• Test con utenti:– Selezionare tester rappresentativi degli

utenti finali;– Preparare scenari e task– Documentare le sessioni sperimentali

(es. con un video) per poter rilevare emozioni e stati d’animo;

– Intervistare i tester per verificare se ricordano l’interfaccia

Lezione 2 -- 37

Vantaggi & Svantaggi

• Vantaggi:– Gli utenti stessi possono fare un mock up cartaceo

per proporre le loro idee o per spiegare cosa si aspettano che succeda

– Si possono prendere appunti sul mock up stesso (dove un utente ha cliccato…)

– Non è necessario alcun supporto tecnologico• Svantaggi:

– Non permette di verificare fattori legati alla tecnologia: tempi di caricamento, scrolling…

– E’ meno immediato verificare gli aspetti visivi (font, immagini…), a meno che non si usino parti stampate.

Lezione 2 -- 38

Paper prototyping con slide

• Estendendo un po’ il concetto, è anche possibile usare delle slide per i test con gli utenti…– Le transizioni sono gestite automaticamente– Meno impegnativo per lo sperimentatore– Riproducibile (può essere inviato via email)– Permette di testare gli aspetti visivi (look and

feel), usando grafica digitale.

1 Sketching Laboratorio di Interazione Uomo-Macchina – a.a. 2010/2011 F. Vernero.

Documents

Transcript of 1 Sketching Laboratorio di Interazione Uomo-Macchina – a.a. 2010/2011 F. Vernero.

Interazione tra immunità e ambiente

Libreoffice - interazione con la community

Onde: emissione e interazione elettromagnetica

Interazione belforte del chienti

CAD - BIM – RENDERING & MOTION - SKETCHING. SOFTWARE Uno degli sforzi che WINGS ha affrontato per dare un servizio di progettazione di buon livello è

Dispensa Interazione Uomo Macchina

Interazione e sincronizzazione. M-fosset - Sistemi Operativi 2008-2009 Interazione tra processi Processi (e thread) possono interagire. Classificazione:

Chimica e fluidodinamica della combustione - wpage.unina.itwpage.unina.it/anddanna/capri/capri definitivo/7-Interazione cinetica... · Interazione cinetica-turbolenza Interazione

Emissione e interazione elettromagnetica

Q-paper-proforma - Taleem-E-Pakistan.com · 2020-04-11 · Describe the procedure of sketching for shapes, geometric figures and models Introduce the concepts of orthographic drawing.

Interazione Terreno Fondazione Sovrastruttura - Viggiani

1 Strumenti di Progettazione Collaborativa e Insegnamento a distanza dell Architettura Sketching I sistemi CSCW sono perlopiù orientati al documento testuale.

Interazione Uomo Macchina

Sandra Vernero –MD Cofondatore e Vicepresidente di Slow ...€¦ · Fare di piùnon significa fare meglio: l’importanza dell’appropriatezza Sandra Vernero –MD Cofondatore

(Metodologie Riabilitative in Logopedia 22) Irene Vernero, Oskar Schindler (Auth.)-Storia Della Logopedia-Springer Milan (2012)

CONSOLIDAMENTO DELLE FONDAZIONI DI RILEVATI … PROF. MODONI_CROCE... · PRINCIPIO DI FUNZIONAMENTO differente rigidezza interazione colonna - terreno interazione rilevato – palo

MECCANISMI DI INTERAZIONE DELLE RADIAZIONI INTERAZIONE RADIAZIONE-MATERIA RADIAZIONE-MATERIA INTERAZIONE CON LE INTERAZIONE CON LE PARTICELLE CARICHE PARTICELLE.

Gioco e interazione sociale

Interazione Fondazioni Contigue

PHP:funzioni e interazione con MySQL