I design pattern e la loro importanza per creare interfacce usabili e antifragili rispetto al cambiamento continuo.

2. e-xtrategy.net
chi sono? Antonio Dell’Ava
extrategy
coding to
create

3. e-xtrategy.net
chi sono? Antonio Dell’Ava
extrategy
coding to
create

4. e-xtrategy.net
chi sono? Antonio Dell’Ava
extrategy
coding to
create

5. e-xtrategy.net
chi sono? Antonio Dell’Ava
extrategy
coding to
create
a.dellava@extrategy.net
@creativecaos

6. come il concetto di
design pattern migliora
processi di
digital transformation?
0

7. e-xtrategy.net
organizzazione
0
1 introduzione teorica a design pattern e
digital transformation
2 case history
3 pratica

8. design pattern
1

9. //2007
lezione di
Antonio Rizzo
nel corso di
Design dei
Media Digitali

10. e-xtrategy.net
sorpresa: il concetto di design pattern
nasce in architettura!
Christopher Alexander
A Pattern Language:
Towns, Buildings,
Construction 1977
storia
1

11. e-xtrategy.net
analisi
1
proviamo a vedere
alcuni passi..

12. 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

13. 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

14. 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

15. 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

16. e-xtrategy.net
come è descritto?
1
INTIMACY GRADIENT (es)
ogni pattern è descritto in 5 punti

17. e-xtrategy.net
come è descritto?
1
INTIMACY GRADIENT (es)
> Super-patterns and preamble

18. e-xtrategy.net
come è descritto?
1
INTIMACY GRADIENT (es)
> Super-patterns and preamble
> Statement of problem

19. e-xtrategy.net
come è descritto?
1
INTIMACY GRADIENT (es)
> Super-patterns and preamble
> Statement of problem
> Discussion

20. e-xtrategy.net
come è descritto?
1
INTIMACY GRADIENT (es)
> Super-patterns and preamble
> Statement of problem
> Discussion
> Sub-patterns to consult

21. e-xtrategy.net
come si
riconosce?
1
il loro uso corretto
è visibile a tutti

22. e-xtrategy.net
risultato la buona applicazione di un design pattern
si riconosce solo all’esperienza

23. e-xtrategy.net
riassunto
1
> parte dal bisogno di inclusività in
una comunità per affrontare problemi
complessi migliorando tempi e qualità
nelle soluzioni

24. 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

25. 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

26. 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

27. 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

28. e-xtrategy.net
riassunto
1
> implica la
cooperazione e
l’impegno delle
persone

29. e-xtrategy.net
riassunto
1
andiamo avanti..

30. digital transformation
2

31. e-xtrategy.net
2
cosa significa?

32. 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

33. e-xtrategy.net
2
capiamo dagli esempi..

34. e-xtrategy.net
Starbucks

35. e-xtrategy.net
Starbucks
- il processo di vendita e pagamento è
mediato da un’app
- ti fa saltare la fila

36. 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

37. 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

38. 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

39. 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%

40. e-xtrategy.net
Kärcher

41. e-xtrategy.net
Kärcher
- ogni macchina ha un IP

42. 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

43. 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

44. e-xtrategy.net
GE Predix

45. e-xtrategy.net
GE Predix
- Predix è una soluzione predittiva che
analizza vari parametri delle
macchine prodotte da GE

46. 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

47. e-xtrategy.net
GE Predix
2
> risparmio di 1B di dollari

48. e-xtrategy.net
cosa significa?
2
> un passo avanti alla “coda lunga”

49. 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

50. 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”

51. 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

52. 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

53. e-xtrategy.net
in sintesi
2
chi vuole essere un
tecnosauro?

54. e-xtrategy.net
in sintesi
2
in un'evoluzione rapida e
continua è evidente che
anche il modo di
sviluppare e progettare
le interfacce cambia

55. instrumenti
un caso studio
3

56. e-xtrategy.net
contesto
3
Progetto nasce nell’ambito della
collaborazione di extrategy con Giuffrè
Editore

57. 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

58. 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

59. 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..

60. e-xtrategy.net
cliens+
3
gestionale cloud web

61. e-xtrategy.net
cliens+
3
gestionale cloud web
> fascicoli, anagrafiche e agenda, documenti
e mail

62. e-xtrategy.net
cliens+
3
gestionale cloud web
> fascicoli, anagrafiche e agenda, documenti
e mail
> depositi, notifiche in proprio

63. 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

64. 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è

65. 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)

66. 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

67. e-xtrategy.net
sfide della nostra
digital
transformation
3

68. e-xtrategy.net
sfide della nostra
digital
transformation
3
> base utenza “obbligata” all’uso della
tecnologia

69. e-xtrategy.net
sfide della nostra
digital
transformation
3
> base utenza “obbligata” all’uso della
tecnologia
> dominio complesso

70. 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

71. 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

72. 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

73. e-xtrategy.net
3
molto complicato gestire
la progettazione

74. e-xtrategy.net
creare un proprio set di design pattern
instrumenti è un repo
dedicato ai componenti UI
soluzione
3

75. e-xtrategy.net
come è fatto?
3
> dividere le responsabilità

76. e-xtrategy.net
come è fatto?
3
> dividere le responsabilità
es. layout1: strutturare lo spazio in
verticale

77. e-xtrategy.net
come è fatto?
3
> ogni pattern fa solo una cosa codice

78. e-xtrategy.net
come è fatto?
3
> ogni pattern fa solo una cosa codice

79. e-xtrategy.net
come è fatto?
3
> logica lego

80. e-xtrategy.net
come è fatto?
3
> fatto con dimensioni standard

81. e-xtrategy.net
come è fatto?
3
> come faccio a conoscere come posso
comporre?

82. e-xtrategy.net
come è fatto?
3
> ogni pattern è documentato ispirandosi ad
Alexander

83. e-xtrategy.net
come è fatto?
3
> 7 pattern relazionali con comportamenti
diversi tra MOBILE e DESKTOP
1 2
3 4

84. e-xtrategy.net
come è fatto?
3
> 7 pattern relazionali con comportamenti
diversi tra MOBILE e DESKTOP
5 6
7

85. e-xtrategy.net
come è fatto?
3
> I 7 pattern sono a loro volta componibili
tra loro

86. e-xtrategy.net
come è fatto?
3
> Come si ottiene questo layout?

87. e-xtrategy.net
come è fatto?
3
layout4
(navigation drawer)

88. e-xtrategy.net
come è fatto?
3
layout5
(status bar)

89. e-xtrategy.net
come è fatto?
3
layout1

90. e-xtrategy.net
come è fatto?
3
layout7

91. e-xtrategy.net
come è fatto?
3
layout1

92. e-xtrategy.net
come è fatto?
3
layout1

93. e-xtrategy.net
come è fatto?
3
> aggiungiamo gli altri componenti

94. e-xtrategy.net
come è fatto?
3
> ecco fatto!

95. e-xtrategy.net
come è fatto?
3
> e su mobile?

96. e-xtrategy.net
come è fatto?
3
> e su mobile?

97. e-xtrategy.net
come è fatto?
3
> scss e gestione dei parametri,
automatizzato tramite grunt

98. e-xtrategy.net
come è fatto?
3
> scss e gestione dei parametri

99. e-xtrategy.net
come è fatto?
3
> scss e gestione dei parametri

100. e-xtrategy.net
come è fatto?
3
> integrabile su diversi livelli
non tutti padroneggiano scss :/

101. e-xtrategy.net
come è fatto?
3
> integrabile su diversi livelli
css
semplice
unico file css
assets in base64

102. 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
css
semplice
unico file css
assets in base64

103. e-xtrategy.net
come è fatto?
3
> scss
//app.scss
cliens+

104. e-xtrategy.net
come è fatto?
3
> bootstrap friendly

105. e-xtrategy.net
come è fatto?
3
> automation & gestione degli assets tramite
sketch tool
[...]

106. e-xtrategy.net
come è fatto?
3
> automation & gestione degli assets tramite
sketch tool
scss, doc,
icofont
sketch sketch tool

107. e-xtrategy.net
come è fatto?
3

108. e-xtrategy.net
come è fatto?
3
> agnostico rispetto al framework, non ha
parte js
INSTRUMENTI

109. e-xtrategy.net
come è fatto?
3
> agnostico rispetto al framework, non ha
parte js
> es. modale

110. e-xtrategy.net
come è fatto?
3
> agnostico rispetto al framework, non ha
parte js

111. e-xtrategy.net
come è fatto?
3
> agnostico rispetto al framework, non ha
parte js

112. e-xtrategy.net
3
conclusioni..

113. e-xtrategy.net
grammatica
3
lessico
patterns
style guide
forma
funzione

114. e-xtrategy.net
risultati
3
> velocity e facilità di cambiare, distruggere e
ricreare

115. e-xtrategy.net
risultati
3
> velocity e facilità di cambiare, distruggere e
ricreare
> meno codice => più qualità e cambiamenti
più impattanti

116. 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

117. 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

118. 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

119. e-xtrategy.net
prerequisiti
3
> Persone e “Crescita personale”

120. domande?

121. proviamo!?
4

122. e-xtrategy.net
step1
4
dovete dividervi in gruppi
da 3/4 persone

123. 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/

124. e-xtrategy.net
step3
25min
4
avete un nuovo incarico:
“dovere ri-progettare il
modo per avviare una
call hangout
direttamente da gmail”

125. e-xtrategy.net
step4
4
presentazione!?

126. Potete contattarmi all’indirizzo:
a.dellava@e-xtrategy.it
grazie