Rapid Prototyping - Arte e artigianato

Ra!aele Boiano

ITALIAN IA SUMMIT 2012

arte e artigianato

@rainwiz #prototyping

rapid prototyping

@rainwiz #iias12 #prototyping

e perché ci siete anche voi?perché sono qui?

A intro B materia tavolozzaC processoD outroE @rainwiz #iias12 #prototyping

about me[chi]rainwiz a.k.a. Raffaele Boiano

[dove]Fondazione Enasarco, Roma

[cosa]User Experience Team Leader

[perché]Perché fare prototipi e come?

[addictions]Rugby, Refn, Radiohead, Renato Rosaldo, Remo Remotti

@rainwiz

A intro B materia tavolozzaC processoD outroE

Voi...

RIsposte all’indagine 6/10 maggio 2012


HTML

CSS

JS

XML

25%

per niente poco medio abbastanza molto

32%

32% 38%

32%

32%

38%32%

Stories

Proverbs

Personas

Scenarios

Content Inventories Analytics

User SurveysConcept MapsSystem MapsProcess Flows

Wireframes

Storyboards

Concept Designs

Prototypes

Narrative Reports

Presentations

PlansStyle Guides

SpecificationsDesign Patterns

User EXperience Treasure Mapby Jeffery Callender and Peter Morville

http://semanticstudios.com/publications/semantics/000228.php




PersonaUn personaggio inventato che rappresenta obiettivi e comportamento di un gruppo di utenti.

[per-soh-nuh]

n.


Neil James Turner, UXfortheMasses

Angel Brown, TheTeam

EOL 2008: personas analisys

PERSONAGGIO PRIMARIO

Paolo Stanchi Agente pensionando (agente attivo)

PROFILO

Paolo Scarpi ha fatto l’agente di commercio per quasi 40 anni. È giovanile e

potrebbe continuare ma dopo tanto tempo vorrebbe smettere per stare

accanto alla sua famiglia e crescere i nipotini.

Crede di avere diritto alla pensione ma non ne è sicuro al 100%. È interessato a

capire a quanto ammonterebbe il suo assegno nel caso andasse subito in

pensione o nel caso restasse al lavoro per un altro paio di anni.

INFORMAZIONI PERSONALI Età: 63 Sesso: M Studi: Ragioniere

USO DI INTERNET Esperienza: 1 anno Attività svolte: posta elettonica Ore/sett.: 2 Pc: Windows – IE7 Connessione: Dial up (56kb)

OBIETTIVI PERSONALI

Usa il sito per:

•  Calcolare la sua pensione e simulare

altri scenari nel caso resti 1 o 2 anni;

•  informarsi,scaricare la modulistica e

inviare la domanda di pensione.

OBIETTIVI AZIENDALI

Vogliamo che usi il sito per:

•  Inviare una domanda di pensione

corretta, cioè recante tutta la

documentazione necessaria.

MOTTO “Tra poco andrò in pensione ma non so ancora a quanto ammonterà!”

Raffaele Boiano, © Fondazione Enasarco 2008

ScenarioUna storia plausibile su una persona in una situazione specifica mentre usa il prodotto/servizio futuro che state progettando

[si-nair-ee-oh]

n.


Priyanka Chaurasia

Post it scenario

WireframeÈ una schematizzazione di un artefatto.

Nel caso di una pagina web, il wireframe rappresenta il layout, indicando i contenuti, gli elementi dell’interfaccia, il sistema di navigazione e descrive le relazioni tra tutti questi elementi.

[si-nair-ee-oh]

n.


Sketch

Mainstream wireframe

Annotated wireframe - © Fondazione Enasarco

MockupUn mockup (o mock-up), è un modello, in scala o a dimensione, di un prodotto.

È usato per valutare il design, per fare formazione, promozione o altri scopi. Un mockup è un prototipo se è in grado di simulare almeno una parte delle funzionalità del sistema e consente quindi dei veri e propri test del design.

[mok-uhp]

n.


Fabio e i suoi alianti LS10-S

Photoshop look&feel

PrototypeUn prototipo è un mockup che permette la simulazione di almeno uno scenario.

Consente cioè a una persona di vivere l’esperienza di un prodotto potenziale. Non è il prodotto, è qualcosa che ne simula l’esperienza.

[proh-tuh-tahyp]

n.


che significafedeltà?


B/N o grafica coordinata al brand?

visual 1


Completamente statico o dinamico?

functional 2


“Lorem ipsum” o contenuti reali (testi, label)?

content 3


Un solo stato per component o tutti gli stati?

depth 4


Un solo step/pagina o tutto il flusso/sito?

breadth 5


VISUAL

FU

NC

TIO

NA

L

mockup

guide

demo

wireframe

prototype

naked code

design patterns & componentsla materia


Piet Mondrian, composition II in red, blue and yellow, 1930

di cosa parliamo quando parliamo di

design patterns?


“

”Cristopher Alexander, 1977

Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over without ever doing it the same way twice


“

”Jenifer Tidwell

In essence, pattern are structural and behaviourial features that improve the habitability of something - a user interface, a website, an object oeriented program or even a building. They made things easier to understand or more beautiful; they make tools more useful and usable.

As such, patterns can be a description of best practices within a given design domain. They capture common solutions to design tensions.

n.

[dih-zahyn pat-ern]

A global solution to a common design problem

design pattern


come fanno gli utenti a sapere dove sono, dove andare e come muoversi?

navigation


Routes

Directions

Placeholders

Mappe http://www.clarksbury.com/cdl/maps.html

http://www.clarksbury.com/cdl/maps.html

http://www.clarksbury.com/cdl/maps.html

Signpost: page title, url, favicon, logo


Breadcrumbs

Directions: navigation elements (list item, dropdown Menu, shifting bar, tabs)


Navigation menu

Navigation dock

i design pattern si basano spesso su

convenzioni


Io, un bagno e la Germania


e quindi cosa sono i

components?


Pensiamo in maniera gerarchica

hierarchy

Elements

Componentscomposed of

Pagesassembled via

Collectionsof flows & hierarchies of

An

Experienceis made up

Linkto the shopping cart

Cart Summarycomponent with a

Productpage with a

Shoppingflow that includes a

An

E-commercesite includes a

Zoom inelement

Visual Mapcomponent with a

Resultspage that includes a

Searchflow that contains

A

Travelsite has a

Sharebutton

Action buttoncomponent with a

Articlepage that has a

World Newssection with a

A

Newssite includes a

Nathan A Curtis, Modular Web Design


Elements

Componentscomposed of

Pagesassembled via

Collectionsof flows & hierarchies of

An

Experienceis made up

Linkto the shopping cart

Cart Summarycomponent with a

Productpage with a

Shoppingflow that includes a

An

E-commercesite includes a

Zoom inelement

Visual Mapcomponent with a

Resultspage that includes a

Searchflow that contains

A

Travelsite has a

Sharebutton

Action buttoncomponent with a

Articlepage that has a

World Newssection with a

A

Newssite includes a



13components

!"#$%&"' ()*+,)-.'/#-%+%+0 1,)0 2%.")' 3-4"#' 5$"+6'!"#$%&

7)+6-&685%096!9-4"''"()'*+,-*.'/)+01012.'+13'(/4-)'2-1-)+,'01560)0-*.'7(1/+7/'6*'%0+'/4-'8(,,(9012'(:/0(1*;

79-68:)*

'» <=+0,'» >+,,'» !+%-'?*'>+,,'@(6'» !"#$%&'%()*+,)-(.

A#&%&

!%0+8;+8:)*

?*-)1+=-'

B+**9()3'''C-=-=D-)'=-'(1'/40*'7(=:6/-)

' '!%0+8;+

"()2(/'E(6);' ?*-)1+=-

:)68<"68-8=">?"#@

>)-+/-'+1'+77(61/ '8()'+77-**'/('-024/*4+:-*F7(=F

()*+,)-.''GH(76=-1/'1+=-I'GH(76=-1/'1+=-IGH(76=-1/'1+=-I

J#K%&

"#&%&

DE'GL6/4()'J+=-I8()'-024/*4+:-*F7(=GM(1/4I'GHHI.'G@@@@I

N())():()6='560'(30/-=:()-='+3'56(30+-'7/(/+/-='56('0:*+='*61/-'%(,6:/6*.'(77+D'0:0/-'(30+/6)'*-30/'+)70-10'/0*70=(',6:/+/6*'-+56-'%(,('06*.'%-1/.'5661/'4+)70:*+='-/')-:-)0*'1(1'-(*+-'76*'=+0(*'-*-560*'+,0/.'1(1*-)('302-10-/'+:0-/'0*0'+D():())6='%(,6:/6)O'L/'3(,6:/0+/0'*-)-:63'+13+1/6)')-:/+*'6,:+)74'0,0/+/-='0:*6*')-'+77+/'-10-1-*'/0+13+-'(3'6/'+1/'862+F'L/'+6/'%(,-13+=',+D())('D,+D()'*6136703'-(*+'%-,,056(30'56+/'%(,6:/+/')-:-3'-*/)6='3(,-*/.'(:/0*'61/'862+F'J-='-070-1/'01':-':-30+*:'-)0()-*/0+='+6/'-P'-P-)())6='6,:+)0+'%(,,+D():()'*-1/F

*/'.)01'.)%"$"#(2(%)(3%431)5(3'64.)'3)#(2($$(3'.)%')#(.(74()"+,)-'0()*6='%(,())('3(,6:/+=6*3+'1(1-*'%-,'06)-:/+-'16*700*'*017/+/-='-6='4+)6='56+='+D()-':(*':())()-'1(D0/+*':-)61/'-6='*01')-)6='0=0,'-P:,0+'3(,-1-/'+6/-'1(1'-P-)8-)-:-)('/-76*+1'3-,,0210=-':(*/(/+/-*/.'+*')-:)-06=')-='56(3'61/'560'3(,-10=-10*'-(*+'%-,-*'-06='56+-'*0=01706='56+/6)O'Q+D()6='8620/'-P7-:630/'862+F'J+='56+-'76='-*'*-130*01'-10*0/'0,056(*'3(,-7/0'6/',0*'56+/6*/0(*'*(,6:/+*0=+'7(1'1(1*-560*'3(,6:/+*'+=-'3(,('-P'-**-56+='560'7()0'(=10=6*'+-)1+/0*'+:-)+'%(,-7/('/+/0D6*.'560D6*'*-307036*F

80()#(6)041)0.).'31(3'.)6")6'9)"+,)-0/":);1)(19)74'.)5($'<3'.1)2$0/":)L:-)-:630*'+=.'*0/+'*0=016*.'/-1/6)'*-56+/-':,+776*'%0/-=56-'-+560*'+63+=.'(30*':)('/()-':-,,+=.'%(,()0/-',+/-*'-*/('7(=10*'3(,6:/+/F

C+/6).'*0/0'61/'30/+*'61/0+'%(,6:/+'/0()-*'-P:,+6/':()'+/-10/'862+F'L*'+*'.4.03%')-1'"3.(74'.)3'64.0)-"3.(#")"+,)-101'0)."$"#)0$'74')#()5(3'.)3'.))-7/0*'06*'+6/'5603'56-'%-,0/0*'-+)70+=.'1(1':+)6='06='*01/6).'*6='16='+3'560*'-P:-)0/'+/-=:-)0D6*F

R)-:)+/'0(1*-76',,+630+=-':-)0/+-'))()-.'16='-P-)6='1(D0*'3-)0D-+'7(=1040/'+6/'-+/-='0:*6='8620+/-'7-:)+-'560'D,+=.'+7-*'-P:,02-'10+1/0*'56+/-='%03-=56+-'%(,('0170'(=10*'+6/'-*'-*/'%(,6:/0(*'+,05603'=+'+:-,-*/0()+'30*')-'7()-=:('))(%03-D0/'+10*/(/+='76*+=.'+:-,'=0,0+/6*'+630/'560'01%-10*7030/'%(,()0(')-:)-='-P:-,'-%-,-*'-%-,0/'61/'862+F'J+='36*'+)0D6*'30/'-/'+7-))('-/'6,,():()0+'3(,()0+'/0()-*-30*'3(,6:/+'*:-)1+/F

A2%.")8/%6,"BGS03-('3-*7)0:/0(1'Q+6/'0*0/0('7(=10=+'%-,-1/0*/'+6/'862+F'?/'+6/',056(3'=(30/+/-'03'-+56-'-(*'16=5603'5661/'0,07'/-=:-3'56+/6)-':-)8-)6='862+F'"-)I'» M()-'<024/A4+:-*'S03-(*

6:3+/-3'GTTI'3+E*.'GTTI'4(6)*.'GTTI'=016/-*'+2(

GL)/07,-'/0/,-'/4+/'7+1'*:+1'+'16=D-)'(8',01-*'3-:-13012'(1'/4-'/0/,-I

C#6%&,"8D%09,%096'

=) GL)/07,-'4024,024/I=) GL)/07,-'4024,024/I=) GL)/07,-'4024,024/I=) GL)/07,-'4024,024/I

'A4+)- ''' '<=+0,''' 'B)01/'''U-P/'A0V-;'C8C8C

Component Composition

1. Logo2. Utility Bar3. Search4. Primary Navigation5. Article Title6. Article Highlights7. Author Attribution8. Video9. Article Tasks10. Article Content11. Contact Us12. Sign In13. Downloads14. Footer

Page Layout Source Code


the Web is rectagles!


n.

[kuhm-poh-nuhnt]

A reusable building block for consistent interface design specific to a design system

Also sometimes called a module, page chunk, portlet, widget etc

Component


componentsvspatterns


andare dal pattern al component

istanziare


Active Tab Inactive Tab Inactive Tab Inactive Tab Inactive Tab

andare dal pattern al component

istanziare


Inactive TabActive Tab Inactive Tab

andare dal component al pattern

astrarre


Video Player Pattern

SearchGlobal navBrandplace Authenticate

Register

Advertising

Video player

Rating

Advertising

AvantGo

Window controls

Authenticate

Recommend

Popular content

Get info

SearchBrandplace AuthenticateRegister

Advertising

Video player

Rating

Blurb

Tabs

Register

Main navigation

Popular content

Shared components: 0Shared patterns: 7

Brandplace, authenticate, register, search, advertising, video player, popular content


proviamo a ricapitolare le

differenzepattern component

Tipocomportamento, flusso, page chunk page chunk

Specificitàprincipi generali applicabili in molti contesti

specifici di un design, contraddistinti dal look&feel

Posizionenon dipendono dalla posizione sono istanziati in una zona specifica

del layout

Stileaperti a trattamenti di stile molto diversi

specifici di un sistema, possono avere molte variazioni

CopyNon presentano linee editoriali Hanno un tono, lessico e carattere

specifico

MarkupPossono essere rappresentati da un codice generico

Hanno un HTML/CSS/JS definito per funzionare in un sistema specifico


EXERCISE 1patterns vs components


Toh.. Una splash page!

Brand

Sign up

Featured

Colophon

Call to action

Brand

+1 The splash page ;)

creare una design libraryla tavolozza


Hieronymus Bosch, trittico del giardino delle delizie, 1840/1890

componentvalue


Qual è il component?

?

entrambi: dipende dal grado di riuso



Frequenza di riuso


Alta

Media

Bassa


Un gruppo di component che spesso sono presentati insieme nella stessa page region

Non sono un unico component perché possono essere presentati anche separatamente

component cluster


Header

NYT - U.S.


Header

NYT - Travel


Ogni cluster o singolo component può assumere diversi stati

Le variazioni sono un’opportunità per comunicare in maniera più accurata delle situazioni e personalizzare l’esperienza utente

variations


Variazioni di stato


Utente anonimo

Utente loggato

Variazioni di target


n.

[kuhn-sis-tuhn-see]

Il grado di uniformità e coerenza tra le parti che costituiscono il tutto (la composizione, l’esperienza ecc)

consistency


Quante iterazioni hanno vissuto i component?

Sono stati testati?

stability


Frequenza delle iteractions

Benoît Meunier

notyetstarted


drafted

iterated

completed

approved

http://www.benoitmeunier.info/

http://www.benoitmeunier.info/

componentlibrary


Sun Component Library


Project with significant custom design work wireframes visual code

Project reusing existing components wireframes

visualcheck code


Quando un design system è maturo il visual si può concentrare sull’innovazione (nuovo/redesign)


Organizzare il component catalog senza barriere

Un content inventory per soli IA


Come raggruppare i component?Come nominarli?

organizzazione 1

Classi di component


Global (Global Nav, Header, Footer)

Navigation (Secondary or Local)

Sidebar (Sidenav, Right Rail, Related Links)

Content (Body, Main)

Spotlight (Lead, Billboard, Hero, Big Top)

Popup (Popins, Hovers, Lightboxes)


sun.com

• Global• Navigation• Side• Content• Spotlight



cisco.com

• Global• Navigation• Side• Content• Spotlight



Dare il giusto nome alle cose



categorie contengonocomponenti che possono avere

variazioni ognuna delle quali ha almeno unesempio

G 01 v1 x1categoria

variazione

esempiocomponente


Assegnare a una persona la gestione della libreria

responsabilità 2

Il mastro di chiavi deve:


gestire le richieste di nuovi componentsaper delegare la progettazione di componentcontrollare le iterazioni in corsoevangelizzare il team

è il pm che sogni


Semplice per gli sviluppatoriSemplice per il team di front-endSemplice per il content strategy & copySemplice per il marketingSemplice per il boss

Accessibile agli utenti!

comunicazione 3

Un sistema di regole, un lessico comune crea il team


EXERCISE 2built your library


Materiali

Avete una serie di pagine. Una è speciale!


1. Organizzare

Guardate le differenze tra le pagine e individuate i component più usati


2. Isolare

Tagliate ogni component dal foglio


3. Raggruppare

Scegliete delle caratteristiche per raggruppare i component


4. Classificare

Trovate etichette per i gruppi che avete individuato


5. Archiviare

Date un nome ad ogni component e pensate alle possibili variazioni


rapid prototyping HTML/CSS/JSil processo


Lucio Fontana, concetto spaziale, 1959

Lucio Fontana


visualdesigner

contentstrategist

ia & uxteam

devteam

Todd Zaki Warfel, Methods & Tools Comparision Martix

E X P L I C I T C O D E S O O N

un mondo di

tools


production


HTML

CSS

JS

design concept prototyping

VISUAL

FU

NC

TIO

NA

L

mockup

guide

demo

wireframe

prototype

naked code

Esserver o non esserver?

Èsserver o non esserver? oggetti di design



la cassetta degli attrezzi di oggi

firefox & firebug

http://dl.dropbox.com/u/950969/8b_iias12.zip

on your mark, get set, go




che mi porto a casa?so what?


hai un amico e non lo sai

si chiama git

1


https://github.com/

https://github.com

https://github.com

c’ho messo un po’ a imparare come

essere responsive


2

http://mediaqueri.es/

http://mediaqueri.es

http://mediaqueri.es

i deliverables sono documenti che

raccontano storiestrumenti


3

Touchpoints management

Portale inEnasarco Blog Newsletter Youtube Twitter Facebook LinkedIN Press & Media Magazine Contact Cent. Sedi

enasarco.it

EnasarcoMagazineFONDAZIONE 01

Affrontare il cambiamento:la nuova sfida per il presenteAgente: un lavoroche dà valore all’aziendaSpeciale convenzioniSoggiorni termali e climatici 2010

Adatto ma non ideale Inadatto

social media management

Tweet & relate

Update professional network & projects

3UHVV�RIÀFH�activity & media relations

Produce awareness video

Manage customer relation

Face to face relations & solutions

Send targeted messages

Write post & manage interactions

Design & development 24/7 self-service

Content & knowledge base management

Socialize contents & manage interactions

Write & produce editions

Primari: gestione iscritti, entrate, uscite, attività ispettiva'L�VXSSRUWR��VLVWHPL�H�LQIUDVWUXWWXUD��SURFXUHPHQW��+5��ÀQDQFH��OHJDOH��LQWHUQDO�DXGLWLQJ��UHOD]LRQL�LVWLWX]LRQDOL

owned digital media management owned press staff training

3URJHWWDUH�H�UHDOL]]DUH�VWUXPHQWL�IURQW�RIÀFH��EDFN�RIÀFH6YLOXSSDUH�XQ�SLDQR�GL�PDUNHWLQJ�H�FRPXQLFD]LRQH

6YLOXSSR�DSSOLFDWLYR��XVHU�UHVHDUFK��GHVLJQ��SURFHVV�DQDO\VLV��NQRZOHGJH�EDVH�PDQDJHPHQW��FRS\ZULWLQJ��QHZVPDNLQJ*HVWLRQH�HYHQWL��XIÀFLR�VWDPSD��PHGLD�UHODWLRQV��FXVWRPHU�UHODWLRQ�PDQDJHPHQW

press

FONDAZIONE ENASARCO - TOUCHPOINTS MANAGEMENT

Touchpoints

LINE OF VISIBILITY

LINE OF INTERNAL ACTION

Scoprire novità

Discutere/condividere

Chiedere aiuto/info

Processi

LINE OF USER INTERACTION

Approfondire

Attività

Fruire di servizi core

Inviare feedback

Fare network

Ideale

Strategia

Ambito

Interventi

“

”Hannah Arendt

Storytelling reveals meaning without committing the error of defining it.

“

”Paul Auster

Stories only happen to those who are able to tell them.

“

”Platone

Those who tell the stories rule society.

Raffaele Boiano

I love you guys!@rainwiz


Nathan A CurtisAndrew Payne

Mentors

Rapid Prototyping - Arte e artigianato

Technology

Transcript of Rapid Prototyping - Arte e artigianato