View
79
Download
0
Category
Preview:
Citation preview
e-xtrategy.net
chi sono? Antonio Dell’Avaextrategy
coding tocreate
e-xtrategy.net
chi sono? Antonio Dell’Avaextrategy
coding tocreate
e-xtrategy.net
chi sono? Antonio Dell’Avaextrategy
coding tocreate
e-xtrategy.net
chi sono? Antonio Dell’Avaextrategy
coding tocreate
a.dellava@extrategy.net@creativecaos
come il concetto di design pattern migliora processi didigital transformation?
0
e-xtrategy.net
organizzazione
0
1 introduzione teorica a design pattern e digital transformation
2 case history
3 pratica
design pattern
1
//2007lezione di
Antonio Rizzo nel corso di
Design dei Media Digitali
e-xtrategy.net
sorpresa: il concetto di design pattern nasce in architettura!
Christopher Alexander
A Pattern Language: Towns, Buildings, Construction 1977
storia
1
e-xtrategy.net
analisi
1
proviamo a vedere alcuni passi..
e-xtrategy.net
perché è stato scritto?
1
“At the core […] is the idea that people should design for themselves their own houses, streets and communities. This idea […] comes simply from the observation that most of the wonderful places of the world were not made by architects but by the people.”
— Alexander, 1977
e-xtrategy.net
cosa sono?
1
“Each pattern describes a problems which occurs over and over again in our environment, and then describes the core of the solution to the problem, in such way that you use the solution a million times over, without ever doing the same way twice”
— Alexander, 1977
e-xtrategy.net
ipotesi in evoluzione
1
“each pattern represents our current best guess as to what arrangement of the physical environment will work to solve the problem presented. [...] the patterns are still hypotheses, all 253 of them—and are therefore all tentative, all free to evolve under the impact of new experience and observation.”
— Alexander, 1977
e-xtrategy.net
generativo
1
“The pattern is in short, at the same time a thing, which happens in the world, and the rule which tells us how to create that thing, and when we must create it. It is both process and a thing; both a description of a thing which is alive, and a description of the process which will generate that thing”
— Alexander, 1977
e-xtrategy.net
come è descritto?
1
INTIMACY GRADIENT (es)
ogni pattern è descritto in 5 punti
e-xtrategy.net
come è descritto?
1
INTIMACY GRADIENT (es)
> Super-patterns and preamble
e-xtrategy.net
come è descritto?
1
INTIMACY GRADIENT (es)
> Super-patterns and preamble
> Statement of problem
e-xtrategy.net
come è descritto?
1
INTIMACY GRADIENT (es)
> Super-patterns and preamble
> Statement of problem
> Discussion
e-xtrategy.net
come è descritto?
1
INTIMACY GRADIENT (es)
> Super-patterns and preamble
> Statement of problem
> Discussion
> Sub-patterns to consult
e-xtrategy.net
come si riconosce?
1
il loro uso corretto è visibile a tutti
e-xtrategy.net
risultato la buona applicazione di un design pattern si riconosce solo all’esperienza
e-xtrategy.net
riassunto
1
> parte dal bisogno di inclusività in una comunità per affrontare problemi complessi migliorando tempi e qualità nelle soluzioni
e-xtrategy.net
riassunto
1
> parte dal bisogno di inclusività in una comunità per affrontare problemi complessi migliorando tempi e qualità nelle soluzioni
> ogni pattern descrive un problema ricorrente in un dato contesto e offre una soluzione
e-xtrategy.net
riassunto
1
> parte dal bisogno di inclusività in una comunità per affrontare problemi complessi migliorando tempi e qualità nelle soluzioni
> ogni pattern descrive un problema ricorrente in un dato contesto e offre una soluzione
> i pattern sono relazionali e gerarchici
e-xtrategy.net
riassunto
1
> parte dal bisogno di inclusività in una comunità per affrontare problemi complessi migliorando tempi e qualità nelle soluzioni
> ogni pattern descrive un problema ricorrente in un dato contesto e offre una soluzione
> i pattern sono relazionali e gerarchici
> ipotesi che vanno declinate o anche creati
e-xtrategy.net
riassunto
1 > parte dal bisogno di inclusività in una comunità per affrontare problemi complessi migliorando tempi e qualità nelle soluzioni
> ogni pattern descrive un problema ricorrente in un dato contesto e offre una soluzione
> i pattern sono relazionali e gerarchici
> ipotesi che vanno declinate o anche creati ed evoluti
> generativi
e-xtrategy.net
riassunto
1
> implica la cooperazione e l’impegno delle persone
e-xtrategy.net
riassunto
1
andiamo avanti..
digital transformation
2
e-xtrategy.net
2
cosa significa?
e-xtrategy.net
definizione
2
“Digital transformation is part of a larger technological process, and is the change associated with the application of digital technology in all aspects of human society.”
— Wikipedia
e-xtrategy.net
2
capiamo dagli esempi..
e-xtrategy.net
Starbucks
e-xtrategy.net
Starbucks - il processo di vendita e pagamento è mediato da un’app
- ti fa saltare la fila
e-xtrategy.net
Starbucks - il processo di vendita e pagamento è mediato da un’app
- ti fa saltare la fila- premi fedeltà- il NY times mette a disposizione
dentro l’app alcuno dei suoi articoli e abbonamento NY si traduce in buoni
e-xtrategy.net
Starbucks - il processo di vendita e pagamento è mediato da un’app
- ti fa saltare la fila- premi fedeltà- il NY times mette a disposizione
dentro l’app alcuno dei suoi articoli e abbonamento NY si traduce in buoni
- puoi inviare al punto vendita le tue playlist preferite spotify per “suggerire” la musica da riprodurre
e-xtrategy.net
Starbucks - il processo di vendita e pagamento è mediato da un’app
- ti fa saltare la fila- premi fedeltà- il NY times mette a disposizione
dentro l’app alcuno dei suoi articoli e abbonamento NY si traduce in buoni
- puoi inviare al punto vendita le tue playlist preferite spotify per “suggerire” la musica da riprodurre
- ricarica batteria wirelss gratis grazie alla partnership con duracell
e-xtrategy.net
Starbucks
2
> 20M di utenti in tutto il mondo
> $145M di investimenti per il 2014, $250M nel 2015, $275M nel 2016
> vendite sono aumentate del tra il 7% e il 9% a seconda del paese, e i ricavi del 17%
e-xtrategy.net
Kärcher
e-xtrategy.net
Kärcher - ogni macchina ha un IP
e-xtrategy.net
Kärcher - ogni macchina ha un IP- manda in cloud e a real-time a
schermo diagnosi, location, costo per pulizia, stato di salute della batteria
e-xtrategy.net
Kärcher - ogni macchina ha un IP- manda in cloud e a real-time a
schermo diagnosi, location, costo per pulizia, stato di salute della batteria
- tutte queste informazioni sono poi utilizzate dalla casa madre per le proprie attività progettuali
e-xtrategy.net
GE Predix
e-xtrategy.net
GE Predix - Predix è una soluzione predittiva che analizza vari parametri delle macchine prodotte da GE
e-xtrategy.net
GE Predix - Predix è una soluzione predittiva che analizza vari parametri delle macchine prodotte da GE
- permette di prevedere danni, malfunzionamenti, efficienza da remoto tramite un software cloud
e-xtrategy.net
GE Predix
2
> risparmio di 1B di dollari
e-xtrategy.net
cosa significa?
2
> un passo avanti alla “coda lunga”
e-xtrategy.net
cosa significa?
2
> un passo avanti alla “coda lunga”
> ogni organizzazione, anche non legata ai media, può trarre vantaggio dalle tecnologie digitali per evolvere
e-xtrategy.net
cosa significa?
2
> un passo avanti alla “coda lunga”
> ogni organizzazione, anche non legata ai media, può trarre vantaggio dalle tecnologie digitali per evolvere
> fa emergere nuove attività che migliorano l’efficienza il “vecchio modo di fare le cose”
e-xtrategy.net
cosa significa?
2
> un passo avanti alla “coda lunga”
> ogni organizzazione, anche non legata ai media, può trarre vantaggio dalle tecnologie digitali per evolvere
> fa emergere nuove attività che migliorano l’efficienza il “vecchio modo di fare le cose”
> non necessariamente si parla di B2C ma anche processi aziendali
e-xtrategy.net
cosa significa?
2
> un passo avanti alla “coda lunga”
> ogni organizzazione, anche non legata ai media, può trarre vantaggio dalle tecnologie digitali per evolvere
> fa emergere nuove attività che migliorano l’efficienza il “vecchio modo di fare le cose”
> non necessariamente si parla di B2C ma anche processi aziendali
> Nessun business è troppo grande per fallire o troppo piccolo per avere successo
e-xtrategy.net
in sintesi
2
chi vuole essere un tecnosauro?
e-xtrategy.net
in sintesi
2
in un'evoluzione rapida e continua è evidente che anche il modo di sviluppare e progettare le interfacce cambia
instrumentiun caso studio
3
e-xtrategy.net
contesto
3
Progetto nasce nell’ambito della collaborazione di extrategy con Giuffrè Editore
e-xtrategy.net
contesto
3
Progetto nasce nell’ambito della collaborazione di extrategy con Giuffrè Editore
> nasce 80 anni fa come casa editrice per i temi legali e fiscali
e-xtrategy.net
contesto
3
Progetto nasce nell’ambito della collaborazione di extrategy con Giuffrè Editore
> nasce 80 anni fa come casa editrice per i temi legali e fiscali
> dal 2009 Giuffrè produce anche software per gli avvocati, nasce Giuffrè Informatica dall’acquisizione di Sedlex
e-xtrategy.net
contesto
3
Progetto nasce nell’ambito della collaborazione di extrategy con Giuffrè Editore
> nasce 80 anni fa come casa editrice per i temi legali e fiscali
> dal 2009 Giuffrè produce anche software per gli avvocati, nasce Giuffrè Informatica dall’acquisizione di Sedlex
> dal 2014 in Italia entra in uso il processo telematico che è in continuo cambiamento, da qui nasce la nostra sfida..
e-xtrategy.net
cliens+
3
gestionale cloud web
e-xtrategy.net
cliens+
3
gestionale cloud web
> fascicoli, anagrafiche e agenda, documenti e mail
e-xtrategy.net
cliens+
3
gestionale cloud web
> fascicoli, anagrafiche e agenda, documenti e mail
> depositi, notifiche in proprio
e-xtrategy.net
cliens+
3
gestionale cloud web
> fascicoli, anagrafiche e agenda, documenti e mail
> depositi, notifiche in proprio
> sincronizzato con le cancellerie dei tribunali
e-xtrategy.net
cliens+
3
gestionale cloud web
> fascicoli, anagrafiche e agenda, documenti e mail
> depositi, notifiche in proprio
> sincronizzato con le cancellerie dei tribunali
> connesso alla banca dati di giuffrè
e-xtrategy.net
cliens+
3
gestionale cloud web
> fascicoli, anagrafiche e agenda, documenti e mail
> depositi, notifiche in proprio
> sincronizzato con le cancellerie dei tribunali
> connesso alla banca dati di giuffrè
> single page application (angular.js)
e-xtrategy.net
cliens+
3
gestionale cloud web
> fascicoli, anagrafiche e agenda, documenti e mail
> depositi, notifiche in proprio
> sincronizzato con le cancellerie dei tribunali
> connesso alla banca dati di giuffrè
> single page application (angular.js)
> desktop e mobile
e-xtrategy.net
sfide della nostra digital transformation
3
e-xtrategy.net
sfide della nostra digital transformation
3
> base utenza “obbligata” all’uso della tecnologia
e-xtrategy.net
sfide della nostra digital transformation
3
> base utenza “obbligata” all’uso della tecnologia
> dominio complesso
e-xtrategy.net
sfide della nostra digital transformation
3
> base utenza “obbligata” all’uso della tecnologia
> dominio complesso
> i dati sono il patrimonio di un avvocato
e-xtrategy.net
sfide della nostra digital transformation
3
> base utenza “obbligata” all’uso della tecnologia
> dominio complesso
> i dati sono il patrimonio di un avvocato
> leggi cambiano continuamente
e-xtrategy.net
sfide della nostra digital transformation
3
> base utenza “obbligata” all’uso della tecnologia
> dominio complesso
> i dati sono il patrimonio di un avvocato
> leggi cambiano continuamente
> UI condivisa con altri prodotti (PDA) fatti con altre tecnologie e da altri team
e-xtrategy.net
3
molto complicato gestire la progettazione
e-xtrategy.net
creare un proprio set di design pattern
instrumenti è un repo dedicato ai componenti UI
soluzione
3
e-xtrategy.net
come è fatto?
3
> dividere le responsabilità
e-xtrategy.net
come è fatto?
3
> dividere le responsabilità
es. layout1: strutturare lo spazio in verticale
e-xtrategy.net
come è fatto?
3
> ogni pattern fa solo una cosa codice
e-xtrategy.net
come è fatto?
3
> ogni pattern fa solo una cosa codice
e-xtrategy.net
come è fatto?
3
> logica lego
e-xtrategy.net
come è fatto?
3
> fatto con dimensioni standard
e-xtrategy.net
come è fatto?
3
> come faccio a conoscere come posso comporre?
e-xtrategy.net
come è fatto?
3
> ogni pattern è documentato ispirandosi ad Alexander
e-xtrategy.net
come è fatto?
3
> 7 pattern relazionali con comportamenti diversi tra MOBILE e DESKTOP
1 2
3 4
e-xtrategy.net
come è fatto?
3
> 7 pattern relazionali con comportamenti diversi tra MOBILE e DESKTOP
5 6
7
e-xtrategy.net
come è fatto?
3
> I 7 pattern sono a loro volta componibili tra loro
e-xtrategy.net
come è fatto?
3
> Come si ottiene questo layout?
e-xtrategy.net
come è fatto?
3
layout4
(navigation drawer)
e-xtrategy.net
come è fatto?
3
layout5
(status bar)
e-xtrategy.net
come è fatto?
3
layout1
e-xtrategy.net
come è fatto?
3
layout7
e-xtrategy.net
come è fatto?
3
layout1
e-xtrategy.net
come è fatto?
3
layout1
e-xtrategy.net
come è fatto?
3
> aggiungiamo gli altri componenti
e-xtrategy.net
come è fatto?
3
> ecco fatto!
e-xtrategy.net
come è fatto?
3
> e su mobile?
e-xtrategy.net
come è fatto?
3
> e su mobile?
e-xtrategy.net
come è fatto?
3
> scss e gestione dei parametri, automatizzato tramite grunt
e-xtrategy.net
come è fatto?
3
> scss e gestione dei parametri
e-xtrategy.net
come è fatto?
3
> scss e gestione dei parametri
e-xtrategy.net
come è fatto?
3
> integrabile su diversi livelli
non tutti padroneggiano scss :/
e-xtrategy.net
come è fatto?
3
> integrabile su diversi livelli
csssemplice
unico file css
assets in base64
e-xtrategy.net
come è fatto?
3
> integrabile su diversi livelli
scss
solo i moduli importanti per il singolo progetto
file variabili ricreati dentro il progetto
csssemplice
unico file css
assets in base64
e-xtrategy.net
come è fatto?
3
> scss
//app.scss
cliens+
e-xtrategy.net
come è fatto?
3
> bootstrap friendly
e-xtrategy.net
come è fatto?
3
> automation & gestione degli assets tramite sketch tool
[...]
e-xtrategy.net
come è fatto?
3
> automation & gestione degli assets tramite sketch tool
scss, doc, icofont
sketch sketch tool
e-xtrategy.net
come è fatto?
3
e-xtrategy.net
come è fatto?
3
> agnostico rispetto al framework, non ha parte js
INSTRUMENTI
e-xtrategy.net
come è fatto?
3
> agnostico rispetto al framework, non ha parte js
> es. modale
e-xtrategy.net
come è fatto?
3
> agnostico rispetto al framework, non ha parte js
e-xtrategy.net
come è fatto?
3
> agnostico rispetto al framework, non ha parte js
e-xtrategy.net
3
conclusioni..
e-xtrategy.net
grammatica
3
lessico
patterns
style guide
forma
funzione
e-xtrategy.net
risultati
3
> velocity e facilità di cambiare, distruggere e ricreare
e-xtrategy.net
risultati
3
> velocity e facilità di cambiare, distruggere e ricreare
> meno codice => più qualità e cambiamenti più impattanti
e-xtrategy.net
risultati
3
> velocity e facilità di cambiare, distruggere e ricreare
> meno codice => più qualità e cambiamenti più impattanti
> tutto il team può prendere l’80% delle decisioni progettuali
e-xtrategy.net
risultati
3
> velocity e facilità di cambiare, distruggere e ricreare
> meno codice => più qualità e cambiamenti più impattanti
> tutto il team può prendere l’80% delle decisioni progettuali
> impatto del lavoro
e-xtrategy.net
risultati
3
> velocity e facilità di cambiare, distruggere e ricreare
> meno codice => più qualità e cambiamenti più impattanti
> tutto il team può prendere l’80% delle decisioni progettuali
> impatto del lavoro
> richiedere un enorme sforzo nel fare i bene i pattern
e-xtrategy.net
prerequisiti
3
> Persone e “Crescita personale”
domande?
proviamo!?
4
e-xtrategy.net
step1
4
dovete dividervi in gruppi da 3/4 persone
e-xtrategy.net
step2
25min
4
complimenti!! Google vi ha assunto!
il vostro team è ora responsabile di..
Gmail
i vostri predecessori non hanno lasciato documentazione o sorgente, dovete riconoscere cosa ha fatto e quali pattern ha utilizzato.
tip: http://ui-patterns.com/
e-xtrategy.net
step3
25min
4
avete un nuovo incarico:
“dovere ri-progettare il modo per avviare una
call hangout direttamente da gmail”
e-xtrategy.net
step4
4
presentazione!?
Potete contattarmi all’indirizzo: a.dellava@e-xtrategy.it
grazie
Recommended