Web design patterns nell'era della digital transformation

e-xtrategy.net

chi sono? Antonio Dell’Avaextrategy

coding tocreate

e-xtrategy.net

chi sono? Antonio Dell’Avaextrategy

coding tocreate

[email protected]@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


> Super-patterns and preamble

e-xtrategy.net

come è descritto?

1



> Statement of problem

e-xtrategy.net

come è descritto?

1




> Discussion

e-xtrategy.net

come è descritto?

1




> 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


> ogni pattern descrive un problema ricorrente in un dato contesto e offre una soluzione

e-xtrategy.net

riassunto

1



> i pattern sono relazionali e gerarchici

e-xtrategy.net

riassunto

1




> 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



> 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


- 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




- puoi inviare al punto vendita le tue playlist preferite spotify per “suggerire” la musica da riprodurre

e-xtrategy.net




- 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


> ogni organizzazione, anche non legata ai media, può trarre vantaggio dalle tecnologie digitali per evolvere

e-xtrategy.net

cosa significa?

2



> fa emergere nuove attività che migliorano l’efficienza il “vecchio modo di fare le cose”

e-xtrategy.net

cosa significa?

2




> non necessariamente si parla di B2C ma anche processi aziendali

e-xtrategy.net

cosa significa?

2




> 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


> nasce 80 anni fa come casa editrice per i temi legali e fiscali

e-xtrategy.net

contesto

3



> dal 2009 Giuffrè produce anche software per gli avvocati, nasce Giuffrè Informatica dall’acquisizione di Sedlex

e-xtrategy.net

contesto

3



> 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


> fascicoli, anagrafiche e agenda, documenti e mail

e-xtrategy.net

cliens+

3



> depositi, notifiche in proprio

e-xtrategy.net

cliens+

3




> sincronizzato con le cancellerie dei tribunali

e-xtrategy.net

cliens+

3





> connesso alla banca dati di giuffrè

e-xtrategy.net

cliens+

3






> single page application (angular.js)

e-xtrategy.net

cliens+

3






> single page application (angular.js)

> desktop e mobile

e-xtrategy.net

sfide della nostra digital transformation

3

e-xtrategy.net


3

> base utenza “obbligata” all’uso della tecnologia

e-xtrategy.net


3


> dominio complesso

e-xtrategy.net


3


> dominio complesso

> i dati sono il patrimonio di un avvocato

e-xtrategy.net


3


> dominio complesso


> leggi cambiano continuamente

e-xtrategy.net


3


> dominio complesso


> 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

> 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

> 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

> 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

> integrabile su diversi livelli

non tutti padroneggiano scss :/

e-xtrategy.net

come è fatto?

3


csssemplice

unico file css

assets in base64

e-xtrategy.net

come è fatto?

3


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


> es. modale

e-xtrategy.net

come è fatto?

3


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


> meno codice => più qualità e cambiamenti più impattanti

e-xtrategy.net

risultati

3



> tutto il team può prendere l’80% delle decisioni progettuali

e-xtrategy.net

risultati

3




> impatto del lavoro

e-xtrategy.net

risultati

3




> 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: [email protected]

grazie

Web design patterns nell'era della digital transformation

Technology

Transcript of Web design patterns nell'era della digital transformation