1. @rainwiz #iias12 #prototyping
rapid prototyping
arte e artigianato
Raffaele Boiano
ITALIAN IA SUMMIT 2012
@rainwiz #prototyping

2. A intro B materia C tavolozza D processo E outro @rainwiz #iias12 #prototyping
perché sono qui?
e perché ci siete anche voi?

3. A intro B materia C tavolozza D processo E outro
about me @rainwiz
[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

4. A intro B materia C tavolozza D processo E outro
Voi...
HTML 32% 38%
CSS 25% 32%
JS 32% 38%
XML 32% 32%
per niente poco medio abbastanza molto
RIsposte all’indagine 6/10 maggio 2012

5. A intro B materia C tavolozza D processo E outro
Stories Scenarios
Personas Content Inventories Analytics
Proverbs
Process Flows
System Maps Concept Maps User Surveys
Wireframes
Prototypes
Storyboards
Concept Designs Narrative Reports
Presentations
Design Patterns Style Guides Specifications Plans
User E Xperience Treasure Map
by Jeffery Callender and Peter Morville
http://semanticstudios.com/publications/semantics/000228.php

6. A intro B materia C tavolozza D processo E outro
Persona
[per-soh-nuh]
n. Un personaggio inventato che rappresenta obiettivi e
comportamento di un gruppo di utenti.

7. Neil James Turner, UXfortheMasses

8. Angel Brown, TheTeam

9. PERSONAGGIO PRIMARIO
Paolo Stanchi
Agente pensionando (agente attivo)
INFORMAZIONI PERSONALI
Età: 63
PROFILO Sesso: M
Studi: Ragioniere
Paolo Scarpi ha fatto l’agente di commercio per quasi 40 anni. È giovanile e USO DI INTERNET
potrebbe continuare ma dopo tanto tempo vorrebbe smettere per stare Esperienza: 1 anno
Attività svolte: posta elettonica
accanto alla sua famiglia e crescere i nipotini.
Ore/sett.: 2
Crede di avere diritto alla pensione ma non ne è sicuro al 100%. È interessato a Pc: Windows – IE7
Connessione: Dial up (56kb)
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.
OBIETTIVI PERSONALI OBIETTIVI AZIENDALI MOTTO
Usa il sito per: Vogliamo che usi il sito per: “Tra poco andrò in
• Calcolare la sua pensione e simulare • Inviare una domanda di pensione
pensione ma non so
ancora a quanto
altri scenari nel caso resti 1 o 2 anni; corretta, cioè recante tutta la
ammonterà!”
• informarsi,scaricare la modulistica e documentazione necessaria.
inviare la domanda di pensione.
EOL 2008: personas analisys
Raffaele Boiano, © Fondazione Enasarco 2008

10. A intro B materia C tavolozza D processo E outro
Scenario
[si-nair-ee-oh]
n. Una storia plausibile su una persona in una situazione
specifica mentre usa il prodotto/servizio futuro che state
progettando

11. Priyanka Chaurasia

12. Post it scenario

13. nForm

14. A intro B materia C tavolozza D processo E outro
Wireframe
[si-nair-ee-oh]
n. È 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.

15. Sketch

16. Mainstream wireframe

17. Annotated wireframe - © Fondazione Enasarco

18. A intro B materia C tavolozza D processo E outro
Mockup
[mok-uhp]
n. Un 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.

19. Fabio e i suoi alianti LS10-S

20. Photoshop look&feel

21. A intro B materia C tavolozza D processo E outro
Prototype
[proh-tuh-tahyp]
n. Un 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.

22. A intro B materia C tavolozza D processo E outro @rainwiz #iias12 #prototyping
che significa
fedeltà?

23. A intro B materia C tavolozza D processo E outro
visual 1
B/N o grafica coordinata al brand?

24. A intro B materia C tavolozza D processo E outro
functional 2
Completamente statico o dinamico?

25. A intro B materia C tavolozza D processo E outro
content 3
“Lorem ipsum” o contenuti reali (testi, label)?

26. A intro B materia C tavolozza D processo E outro
depth 4
Un solo stato per component o tutti gli stati?

27. A intro B materia C tavolozza D processo E outro
breadth 5
Un solo step/pagina o tutto il flusso/sito?

28. demo
naked code
prototype
guide
VISUAL
wireframe
FUNCTIONAL
mockup

29. A intro B materia C tavolozza D processo E outro @rainwiz #iias12 #prototyping
la materia
design patterns & components

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

31. A intro B materia C tavolozza D processo E outro
di cosa parliamo quando parliamo di
design patterns?

34. A intro B materia C tavolozza D processo E outro
“ 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
Cristopher Alexander, 1977

35. A intro B materia C tavolozza D processo E outro
Christopher Alexander, A pattern Language, © 1977

36. “ 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.
Jenifer Tidwell

37. A intro B materia C tavolozza D processo E outro
design pattern
[dih-zahyn pat-ern]
n. A global solution to a common design problem

38. A intro B materia C tavolozza D processo E outro
navigation
come fanno gli utenti a sapere dove
sono, dove andare e come muoversi?

40. Routes

41. Directions

42. Placeholders

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

44. A intro B materia C tavolozza D processo E outro
Signpost: page title, url, favicon, logo

45. Breadcrumbs

46. Breadcrumbs

47. Breadcrumbs

48. A intro B materia C tavolozza D processo E outro
Directions: navigation elements (list item, dropdown Menu,
shifting bar, tabs)

49. Navigation menu

50. Navigation dock

51. A intro B materia C tavolozza D processo E outro
i design pattern si basano spesso su
convenzioni

52. A intro B materia C tavolozza D processo E outro
Io, un bagno e la Germania

53. A intro B materia C tavolozza D processo E outro
e quindi cosa sono i
components?

54. A intro B materia C tavolozza D processo E outro
An
Experience
hierarchy
is made up
Collections
of flows & hierarchies of
Pensiamo in maniera gerarchica
Pages
assembled via
Components
composed of
Elements
Nathan A Curtis, Modular Web Design

55. A intro B materia C tavolozza D processo E outro
An A A
E-commerce Travel News
site includes a site has a site includes a
Shopping Search World News
of flow that includes a flow that contains section with a
Product Results Article
page with a page that includes a page that has a
s Cart Summary Visual Map Action button
component with a component with a component with a
Link Zoom in Share
to the shopping cart element button
Nathan A Curtis, Modular Web Design

56. 13
components

57. A intro B materia C tavolozza D processo E outro
the Web is rectagles!
Page Layout Component Composition Source Code
!"#$%&
!"#$%&"' /#-%+%+0 ()*+,)-.' 1,)0 2%.")' 3-4"#' 5$"+6'
1. Logo
6:3+/-3'GTTI'3+E*.'GTTI'4(6)*.'GTTI'=016/-*'+2( C#6%&,"8D%09,%096'
A#&%&
2. Utility Bar
7)+6-&685%096!9-4"'
3. Search
=) GL)/07,-'4024,024/I '
GL)/07,-'/0/,-'/4+/'7+1'*:+1'+'16=D-)' =) GL)/07,-'4024,024/I "()'*+,-*.'/)+01012.'+13'(/4-)'2-1-)+,'
=) GL)/07,-'4024,024/I 01560)0-*.'7(1/+7/'6*'%0+'/4-'8(,,(9012'
(8',01-*'3-:-13012'(1'/4-'/0/,-I =) GL)/07,-'4024,024/I (:/0(1*;
DE'GL6/4()'J+=-I 79-68:)*
4. Primary Navigation
8()'-024/*4+:-*F7(=
GM(1/4I'GHHI.'G@@@@I »'
»'
<=+0,
>+,,
5. Article Title
N())():()6='560'(30/-=:()-='+3'56(30+-'7/(/+/-='56('0:*+='*61/-'
»' !+%-'?*'>+,,'@(6
%(,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'
»' !"#$%&'%()*+, -(.
)
6. Article Highlights
+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+8;+8:)* 7. Author Attribution
-)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='
) ?*-)1+=-'
8. Video
4+)6='56+='+D()-':(*':())()-'1(D0/+*':-)61/'-6='*01')-)6='0=0,' B+**9()3'
-P:,0+'3(,-1-/'+6/-'1(1'-P-)8-)-:-)('/-76*+1'3-,,0210=-':(*/(/+/-*/.'
+*')-:)-06=')-='56(3'61/'560'3(,-10=-10*'-(*+'%-,-*'-06='56+-'
'
'C-=-=D-)'=-'(1'/40*'7(=:6/-) 9. Article Tasks
*0=01706='56+/6)O'Q+D()6='8620/'-P7-:630/'862+F'J+='56+-'76='
10. Article Content
-*'*-130*01'-10*0/'0,056(*'3(,-7/0'6/',0*'56+/6*/0(*'*(,6:/+*0=+'7(1' !%0+8;+
1(1*-560*'3(,6:/+*'+=-'3(,('-P'-**-56+='560'7()0'(=10=6*'+-)1+/0*' ' '
+:-)+'%(,-7/('/+/0D6*.'560D6*'*-307036*F
"()2(/'E(6);' ?*-)1+=-
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
A2%.")8/%6,"B
GS03-('3-*7)0:/0(1'Q+6/'0*0/0('7(=10=+'%-,-1/0*/'+6/'862+F' :)68<"68-8=">?"#@
11. Contact Us
?/'+6/',056(3'=(30/+/-'03'-+56-'-(*'16=5603'5661/'0,07'
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'.)
)
/-=:-3'56+/6)-':-)8-)6='862+F'"-)I
»' M()-'<024/A4+:-*'S03-(*
>)-+/-'+1'+77(61/ '8()'+77-**'/('
-024/*4+:-*F7(=F 12. Sign In
)-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-+'
'A4+)- ''' '<=+0,''' 'B)01/''U-P/'A0V-;' C8 8
' CC J#K%&
()*+,)-.' 13. Downloads
7(=1040/'+6/'-+/-='0:*6='8620+/-'7-:)+-'560'D,+=.'+7-*'-P:,02-'10+1/0*' 'GH(76=-1/'1+=-I
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*'
'GH(76=-1/'1+=-I
GH(76=-1/'1+=-I
14. Footer
3(,6:/+'*:-)1+/F
Nathan A Curtis, Modular Web Design

58. A intro B materia C tavolozza D processo E outro
Component
[kuhm-poh-nuhnt]
n. A reusable building block for consistent interface design
specific to a design system
Also sometimes called a module, page chunk, portlet,
widget etc

59. A intro B materia C tavolozza D processo E outro
components
vs
patterns

60. A intro B materia C tavolozza D processo E outro
andare dal pattern al component
istanziare
Active Tab Inactive Tab Inactive Tab Inactive Tab Inactive Tab

61. A intro B materia C tavolozza D processo E outro
andare dal pattern al component
istanziare
Active Tab Inactive Tab Inactive Tab

62. A intro B materia C tavolozza D processo E outro
andare dal component al pattern
astrarre
Video Player Pattern

63. Brandplace Search Authenticate
Global nav Register
Window controls Advertising
Video player
Get info
Rating
Recommend
Authenticate
Advertising
AvantGo
Popular content

64. Search
Brandplace
Register Authenticate
Blurb
Register
Advertising
Tabs
Video player
Popular content
Main navigation
Rating

65. A intro B materia C tavolozza D processo E outro
Shared components: 0
Shared patterns: 7
Brandplace, authenticate, register,
search, advertising, video player,
popular content

66. A intro B materia C tavolozza D processo E outro
proviamo a ricapitolare le
differenze
pattern component
comportamento, flusso, page chunk page chunk
Tipo
principi generali applicabili in molti specifici di un design, contraddistinti
Specificità contesti dal look&feel
non dipendono dalla posizione sono istanziati in una zona specifica
Posizione del layout
aperti a trattamenti di stile molto specifici di un sistema, possono avere
Stile diversi molte variazioni
Non presentano linee editoriali Hanno un tono, lessico e carattere
Copy specifico
Possono essere rappresentati da un Hanno un HTML/CSS/JS definito per
Markup codice generico funzionare in un sistema specifico

67. @rainwiz #iias12 #prototyping
EXERCISE 1
patterns vs components

68. Brand
Sign up
Featured
Call to action
Brand
Colophon
Toh.. Una splash page!

69. +1 The splash page ;)

70. A intro B materia C tavolozza D processo E outro @rainwiz #iias12 #prototyping
la tavolozza
creare una design library

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

72. A intro B materia C tavolozza D processo E outro
component
value

73. A intro B materia C tavolozza D processo E outro
Qual è il component?
?
entrambi: dipende dal grado di riuso
Nathan A Curtis, Modular Web Design

74. A intro B materia C tavolozza D processo E outro
Frequenza di riuso
Alta
Media
Bassa
Nathan A Curtis, Modular Web Design

75. A intro B materia C tavolozza D processo E outro
component cluster
Un gruppo di component che spesso sono
presentati insieme nella stessa page region
Non sono un unico component perché possono
essere presentati anche separatamente

76. A intro B materia C tavolozza D processo E outro
Header
NYT - U.S.

77. A intro B materia C tavolozza D processo E outro
Header
NYT - Travel

78. A intro B materia C tavolozza D processo E outro
variations
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

79. A intro B materia C tavolozza D processo E outro
Variazioni di stato
Utente anonimo
Utente
loggato

80. A intro B materia C tavolozza D processo E outro
Variazioni di target

81. A intro B materia C tavolozza D processo E outro
consistency
[kuhn-sis-tuhn-see]
n. Il grado di uniformità e coerenza tra le parti che
costituiscono il tutto (la composizione, l’esperienza ecc)

84. A intro B materia C tavolozza D processo E outro
stability
Quante iterazioni hanno vissuto i component?
Sono stati testati?

85. A intro B materia C tavolozza D processo E outro
Frequenza delle iteractions
approved
completed
iterated
drafted
notyetstarted
Benoît Meunier

86. A intro B materia C tavolozza D processo E outro
component
library

87. A intro B materia C tavolozza D processo E outro
Sun Component Library

88. A intro B materia C tavolozza D processo E outro
Quando un design system è maturo il visual si può
concentrare sull’innovazione (nuovo/redesign)
Project with significant
custom design work wireframes visual code
Project reusing visual
existing components wireframes check code
Nathan A Curtis, Modular Web Design

89. Organizzare il component catalog senza barriere

90. Un content inventory per soli IA

91. A intro B materia C tavolozza D processo E outro
organizzazione 1
Come raggruppare i component?
Come nominarli?

92. A intro B materia C tavolozza D processo E outro
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)
Nathan A Curtis, Modular Web Design

93. A intro B materia C tavolozza D processo E outro
sun.com
• Global
• Navigation
• Side
• Content
• Spotlight
Nathan A Curtis, Modular Web Design

94. A intro B materia C tavolozza D processo E outro
cisco.com
• Global
• Navigation
• Side
• Content
• Spotlight
Nathan A Curtis, Modular Web Design

95. A intro B materia C tavolozza D processo E outro
Dare il giusto nome alle cose
categorie contengono
componenti che possono avere
variazioni ognuna delle quali ha almeno un
esempio
variazione
categoria
G 01 v1 x1
esempio
componente
Nathan A Curtis, Modular Web Design

96. A intro B materia C tavolozza D processo E outro
responsabilità 2
Assegnare a una persona la gestione della libreria

97. A intro B materia C tavolozza D processo E outro
Il mastro di chiavi deve:
gestire le richieste di nuovi component
saper delegare la progettazione di component
controllare le iterazioni in corso
evangelizzare il team
è il pm che sogni

98. A intro B materia C tavolozza D processo E outro
comunicazione 3
Semplice per gli sviluppatori
Semplice per il team di front-end
Semplice per il content strategy & copy
Semplice per il marketing
Semplice per il boss
Accessibile agli utenti!

99. A intro B materia C tavolozza D processo E outro
Un sistema di regole, un lessico
comune crea il team

100. @rainwiz #iias12 #prototyping
EXERCISE 2
built your library

101. A intro B materia C tavolozza D processo E outro
Materiali
Avete una serie di pagine. Una è speciale!

102. A intro B materia C tavolozza D processo E outro
1. Organizzare
Guardate le differenze tra le pagine e individuate i component più usati

103. A intro B materia C tavolozza D processo E outro
2. Isolare
Tagliate ogni component dal foglio

104. A intro B materia C tavolozza D processo E outro
3. Raggruppare
Scegliete delle caratteristiche per raggruppare i component

105. A intro B materia C tavolozza D processo E outro
4. Classificare
Trovate etichette per i gruppi che avete individuato

106. A intro B materia C tavolozza D processo E outro
5. Archiviare
Date un nome ad ogni component e pensate alle possibili variazioni

107. A intro B materia C tavolozza D processo E outro @rainwiz #iias12 #prototyping
il processo
rapid prototyping HTML/CSS/JS

108. Lucio Fontana, concetto spaziale, 1959

109. Lucio Fontana

110. A intro B materia C tavolozza D processo E outro
visual content ia & ux dev
designer strategist team team

111. Todd Zaki Warfel, Methods & Tools Comparision Martix

112. EXPLICIT CODE SOON

113. A intro B materia C tavolozza D processo E outro
un mondo di
tools

114. A intro B materia C tavolozza D processo E outro
HTML
CSS
JS
design concept prototyping production

115. demo
naked code
prototype
guide
VISUAL
wireframe
FUNCTIONAL
mockup

117. A intro B materia C tavolozza D processo E outro
Esserver o non esserver?
Èsserver o non esserver? oggetti di design

118. A intro B materia C tavolozza D processo E outro
la cassetta degli attrezzi di oggi
firefox & firebug

119. A intro B materia C tavolozza D processo E outro
on your mark, get set, go
http://dl.dropbox.com/u/950969/8b_iias12.zip

120. A intro B materia C tavolozza D processo E outro @rainwiz #iias12 #prototyping
so what?
che mi porto a casa?

121. A intro B materia C tavolozza D processo E outro
1
hai un amico e non lo sai
si chiama git

122. https://github.com/

123. A intro B materia C tavolozza D processo E outro
2
c’ho messo un po’ a imparare come
essere responsive

124. http://mediaqueri.es/

125. A intro B materia C tavolozza D processo E outro
3
strumenti
i deliverables sono documenti che
raccontano storie

126. FONDAZIONE ENASARCO - TOUCHPOINTS MANAGEMENT
Processi Primari: gestione iscritti, entrate, uscite, attività ispettiva
Strategia
LINE OF INTERNAL ACTION
Attività
Ambito owned digital media management social media management press owned press staff training
LINE OF VISIBILITY
Content & Design & Write post Send Produce Tweet & Socialize Update Write & Manage Face to face
knowledge development & manage targeted awareness relate contents professional activity produce customer relations &
Interventi base 24/7 self- interactions messages video & manage network & & media editions relation solutions
management service interactions projects relations
FONDAZIONE 01
Enasarco Magazine
Affrontare il cambiamento:
la nuova sfida per il presente
Agente: un lavoro
che dà valore all’azienda
Speciale convenzioni
Soggiorni termali e climatici 2010
Touchpoints enasarco.it
Portale inEnasarco Blog Newsletter Youtube Twitter Facebook LinkedIN Press & Media Magazine Contact Cent. Sedi
LINE OF USER INTERACTION
Fruire di servizi core
Inviare feedback
Discutere/condividere
Chiedere aiuto/info
Fare network
Scoprire novità
Approfondire
Ideale Adatto ma non ideale Inadatto
Touchpoints management

128. “ Storytelling reveals meaning
without committing the
error of defining it.
”
Hannah Arendt

129. “Storieswho are able to tell
those
only happen to
them.
”
Paul Auster

130. “Those who tell the
stories rule society.
”
Platone

131. A intro B materia C tavolozza D processo E outro
I love you guys!
Raffaele Boiano @rainwiz
Mentors
Nathan A Curtis
Andrew Payne