Rapid Prototyping - Arte e artigianato

@rainwiz #iias12 #prototyping

rapid prototyping
arte e artigianato

Raffaele Boiano

ITALIAN IA SUMMIT 2012

@rainwiz #prototyping

A intro B materia C tavolozza D processo E outro @rainwiz #iias12 #prototyping

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

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


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


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


Persona
[per-soh-nuh]
n. Un personaggio inventato che rappresenta obiettivi e
comportamento di un gruppo di utenti.

Neil James Turner, UXfortheMasses

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


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


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.

Annotated wireframe - © Fondazione Enasarco


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.


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.


che significa
fedeltà?


visual 1

B/N o grafica coordinata al brand?


functional 2

Completamente statico o dinamico?


content 3

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


depth 4

Un solo stato per component o tutti gli stati?


breadth 5

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

demo
naked code

prototype

guide
VISUAL

wireframe
FUNCTIONAL

mockup


la materia
design patterns & components

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


di cosa parliamo quando parliamo di

design patterns?


“ 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

“ 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


design pattern
[dih-zahyn pat-ern]
n. A global solution to a common design problem


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

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


Signpost: page title, url, favicon, logo


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


i design pattern si basano spesso su

convenzioni


Io, un bagno e la Germania


e quindi cosa sono i

components?


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


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



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



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


components
vs
patterns


andare dal pattern al component

istanziare
Active Tab Inactive Tab Inactive Tab Inactive Tab Inactive Tab


andare dal pattern al component

istanziare
Active Tab Inactive Tab Inactive Tab


andare dal component al pattern

astrarre

Video Player Pattern

Brandplace Search Authenticate
Global nav Register
Window controls Advertising

Video player
Get info
Rating
Recommend

Authenticate

Advertising

AvantGo
Popular content

Search
Brandplace
Register Authenticate
Blurb

Register

Advertising
Tabs
Video player
Popular content

Main navigation

Rating


Shared components: 0
Shared patterns: 7

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


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


EXERCISE 1
patterns vs components

Brand

Sign up

Featured

Call to action

Brand

Colophon

Toh.. Una splash page!


la tavolozza
creare una design library

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


component
value


Qual è il component?

?
entrambi: dipende dal grado di riuso



Frequenza di riuso

Alta

Media

Bassa



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


Header

NYT - U.S.


Header

NYT - Travel


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


Variazioni di stato

Utente anonimo

Utente
loggato


Variazioni di target


consistency
[kuhn-sis-tuhn-see]
n. Il grado di uniformità e coerenza tra le parti che
costituiscono il tutto (la composizione, l’esperienza ecc)


stability
Quante iterazioni hanno vissuto i component?

Sono stati testati?


Frequenza delle iteractions

approved

completed

iterated

drafted

notyetstarted

Benoît Meunier


component
library


Sun Component Library


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

Project with signiﬁcant
custom design work wireframes visual code

Project reusing visual
existing components wireframes check code


Organizzare il component catalog senza barriere

Un content inventory per soli IA


organizzazione 1

Come raggruppare i component?
Come nominarli?


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 contengono
componenti che possono avere
variazioni ognuna delle quali ha almeno un
esempio

variazione
categoria

G 01 v1 x1
esempio
componente



responsabilità 2

Assegnare a una persona la gestione della libreria


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


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!


Un sistema di regole, un lessico
comune crea il team


EXERCISE 2
built 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


il processo
rapid prototyping HTML/CSS/JS

Lucio Fontana, concetto spaziale, 1959


visual content ia & ux dev
designer strategist team team

Todd Zaki Warfel, Methods & Tools Comparision Martix


un mondo di

tools


HTML

CSS

JS

design concept prototyping production


Esserver o non esserver?

Èsserver o non esserver? oggetti di design


la cassetta degli attrezzi di oggi

firefox & firebug


on your mark, get set, go
http://dl.dropbox.com/u/950969/8b_iias12.zip


so what?
che mi porto a casa?


1
hai un amico e non lo sai

si chiama git


2
c’ho messo un po’ a imparare come

essere responsive


3
strumenti
i deliverables sono documenti che

raccontano storie

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

“ Storytelling reveals meaning
without committing the
error of defining it.

”
Hannah Arendt

“Storieswho are able to tell
those
only happen to

them.

”
Paul Auster

“Those who tell the
stories rule society.

”
Platone


I love you guys!
Raffaele Boiano @rainwiz

Mentors
Nathan A Curtis
Andrew Payne

Rapid Prototyping - Arte e artigianato

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Rapid Prototyping - Arte e artigianato

Ähnlich wie Rapid Prototyping - Arte e artigianato (20)

Rapid Prototyping - Arte e artigianato