Download pdf - Lean UX Development

Transcript
Page 1: Lean UX Development

@Fabbrucci

Welcome

@Fabbrucci

Page 2: Lean UX Development

@Fabbrucci

6 volontari da formare 2 team di 3 persone

@Fabbrucci

Cominciamo con un GIOCO

Page 3: Lean UX Development

@Fabbrucci

Una meravigliosa estate

Si disegna in silenzio

Seguite le istruzioni che vi darò su un foglio

Avete tutti gli strumenti che servono

1 minuto di tempo per disegnare insieme

http://blog.crisp.se/2009/02/18/davidbarnholdt/1234986060000

Page 4: Lean UX Development

@Fabbrucci@Fabbrucciicona di Samuel Q. Green - the Noun Project

Page 5: Lean UX Development

@Fabbrucci

Squadra ADisegnare una meravigliosa estate con fiori rossi e blu in un prato verde, alcune mucche e degli uccelli in volo mentre il sole splende

Page 6: Lean UX Development

@Fabbrucci

Squadra B

• 10 fiori blu con 5 petali ciascuno• 5 fiori blu con 6 petali ciascuno• 13 fiori rossi con 6 petali ciascuno• 2 mucche con 3 macchie nere• 1 mucca con 5 macchie nere• 2 uccelli nell’angolo in alto a sinistra• 3 uccelli nel centro• 1 sole con cinque raggi solari

Disegnare una meravigliosa estate con

Page 7: Lean UX Development

@Fabbrucci

La vision era la stessaDisegnare una meravigliosa estate …

Page 8: Lean UX Development

@Fabbrucci

Quale vi piace di più?

Disegno A? [su le mani]

Disegno B? [su le mani]

@Fabbrucci

Page 9: Lean UX Development

@Fabbrucci

I dettagli aiutano a raggiungere la vision?

Quando sviluppate un taskvi ricordate la vision del progetto/prodotto?

Trovate delle analogie con il vostro lavoro?

Riflettiamo

@Fabbrucci

Page 10: Lean UX Development

@Fabbrucci

Lean UX Development Approach and toolkit

@Fabbrucci

Codemotion 2014, Roma

Page 11: Lean UX Development

@Fabbrucci

Ciao, sono FabioDipendente, imprenditore, startupper; ora freelancer

Frontend Developer presso GNV & Partners

Agile practitioner presso Avanscoperta

Mi piace mangiare, conoscere le persone, Scrubs

@Fabbrucci

Page 12: Lean UX Development

@Fabbrucci@Fabbrucci

Vision di questo talkCondividere con voi la mia esperienza

nell’intento di fornivi strumenti da sperimentare nel vostro team

Page 13: Lean UX Development

@Fabbrucci

No!

@Fabbrucci

Page 14: Lean UX Development

@Fabbrucci

Fonti

Page 15: Lean UX Development

@Fabbrucci

Cos’è #leanux

Roadmap

Approcci alla #leanux

Cosa posso fare io come Developer

@Fabbrucci

Page 16: Lean UX Development

@Fabbrucci

Donald Arthur “Don” Norman

Cos’è #leanux @Fabbrucci

User experience encompasses

all aspects of the end-user's interaction with the company, its services, and its products.

Page 17: Lean UX Development

@FabbrucciCos’è #leanux

Jeff Gothelf

Lean UX is the practice of bringing the true nature of a product to light faster,

in a collaborative, cross-functional way that reduces the emphasis on through

documentation while increasing the focus on building a shared

understanding of the actual product experience being designed.

Page 18: Lean UX Development

@FabbrucciCos’è #leanux

Lean UX significa progettare UX

applicando principi lean.

dal tizio qui presente Fabio Fabbrucci

Page 19: Lean UX Development

@Fabbrucci

Roadmap

Cos’è #leanuxApprocci alla #leanux

Cosa posso fare io come Developer

@Fabbrucci

Page 20: Lean UX Development

@Fabbrucci

Proposte e azioniApprocci alla #leanux

Page 21: Lean UX Development

@FabbrucciApprocci alla #leanux

Trasparenza e vision

Page 22: Lean UX Development

@Fabbrucci

CodesignApprocci alla #leanux

Page 23: Lean UX Development

@Fabbrucci

Divergere e convergereApprocci alla #leanux

Page 24: Lean UX Development

@Fabbrucci

Trovare il giusto linguaggio

Approcci alla #leanux

Page 25: Lean UX Development

@Fabbrucci

Interruzioni e urgenzahttp://www.hanselman.com/blog/ScottHanselmansCompleteListOfProductivityTips.aspx

Approcci alla #leanux

Do it now

IDecide

when to do it

II

Delegate itIII

Dump itIV

UrgencyIm

port

ance

Page 26: Lean UX Development

@Fabbrucci

DelegaApprocci alla #leanux

Page 27: Lean UX Development

@Fabbrucci

Parliamo un po’ di iterazioni …

Approcci alla #leanux

Page 28: Lean UX Development

@Fabbrucci

Utenti Team

Approcci alla #leanux

Page 29: Lean UX Development

@Fabbrucci

Utenti Cliente

Team

Approcci alla #leanux

Page 30: Lean UX Development

@Fabbrucci

Iterazioni: primo approccio

http://bit.ly/1mOepcT

Approcci alla #leanux

No fallimento e “ni” opportunitàMilestones

Page 31: Lean UX Development

@Fabbrucci

Si possono prioritizzare per:

Valore finanziario

Costo

Conoscenza

Riduzione del rischio

User storiesSono un requisito

Approcci alla #leanux

espressione di un bisogno

Page 32: Lean UX Development

@FabbrucciApprocci alla #leanux

IncertezzaTempo

Certe

zza

Page 33: Lean UX Development

@FabbrucciApprocci alla #leanux

EsplorazioneHow

What

HowWhat

Page 34: Lean UX Development

@FabbrucciApprocci alla #leanux

Quick but unsustainable

wins

IEnduring success

II

Slow failureIII

Fast failureIV

Right Way

Righ

t Thi

ng

Rischio

Page 35: Lean UX Development

@FabbrucciApprocci alla #leanux

Iterazioni: secondo approccio

Framework di ipotesiRoadmap condivisa

Iterazioni “retroattive”

https://twitter.com/search?q=how%20spotify%20build%20a%20product&src=typd

Page 36: Lean UX Development

@Fabbruccihttps://twitter.com/Icelord/status/423739304691912705/photo/1

Approcci alla #leanux

Coaching

Page 37: Lean UX Development

@Fabbrucci

Soft LinkingApprocci alla #leanux

Business vision

Execution

Strategy

Page 38: Lean UX Development

@Fabbrucci

Paura di perdere il controllo

Approcci alla #leanux

Page 39: Lean UX Development

@Fabbrucci

Roadmap

Cos’è #leanuxApprocci alla #leanux

Cosa posso fare io come Developer

@Fabbrucci

Page 40: Lean UX Development

@Fabbrucci

Cosa posso… cosa dovrei

Cosa posso fare io come Developer

Page 41: Lean UX Development

@Fabbrucci

Uscire allo scoperto

Cosa posso fare io come Developer

Deploy automatico #continuous-delivery

Setting dell’environment #devops

Comunicazione al resto del team

Page 42: Lean UX Development

@Fabbrucci

Ridurre gli sprechiStyleguide Development

Cosa posso fare io come Developer

Page 43: Lean UX Development

@Fabbrucci

È un dizionario

Designer

Developer

Cliente

Cosa posso fare io come Developer

Styleguide

Page 44: Lean UX Development

@Fabbrucci

https://github.com/styleguide

Cosa posso fare io come Developer

Page 45: Lean UX Development

@Fabbrucci

https://ux.mailchimp.com/patterns

Cosa posso fare io come Developer

Page 46: Lean UX Development

@FabbrucciCosa posso fare io come Developer

Un esempio di interazione

Frontender campiona testoDesigner crea PSD

Frontender crea CSS

Page 47: Lean UX Development

@FabbrucciCosa posso fare io come Developer

Problemi

Il design rischia di esplodere negli stili

Il design rischia di bloccare la prototipazione

Il designer si dimentica i line-height

Page 48: Lean UX Development

@Fabbrucci

Proviamo un approccio

più semantico …

Cosa posso fare io come Developer @Fabbrucci

Page 49: Lean UX Development

@FabbrucciCosa posso fare io come Developer @Fabbrucci

Page 50: Lean UX Development

@FabbrucciCosa posso fare io come Developer

Caratteristiche

ManutenibileAccessibile

Azionabile

@Fabbrucci

Page 51: Lean UX Development

@FabbrucciCosa posso fare io come Developer

Accessibile

Capistrano + EC2Multistage

Customized:Silex + Twig + Yeoman + Bower + Grunt

@Fabbruccihttp://demo.patternlab.io/

Page 52: Lean UX Development

@FabbrucciCosa posso fare io come Developer

Manutenibile

TestingCSS ad oggetti o modulare

@Fabbrucci

Page 53: Lean UX Development

@FabbrucciCosa posso fare io come Developer

CSS Modulare

OOCSSPrecompilatori (LESS, SASS)

Atomic DesignBEM, SMACSS

@Fabbrucci

Page 54: Lean UX Development

@FabbrucciCosa posso fare io come Developer

Testing

Testing CSS: Phantom CSSTesting JS: Phantom JS

http://csste.st

@Fabbrucci

Page 55: Lean UX Development

@FabbrucciCosa posso fare io come Developer

Page 56: Lean UX Development

@FabbrucciCosa posso fare io come Developer

Come developer posso…

aiutare a rimuovere gli sprechiuscire allo scoperto

@Fabbrucci

Page 57: Lean UX Development

@FabbrucciCosa posso fare io come Developer

Come developer dovrei…

lavorare sulle mie soft-skill

sviluppare un dizionario cross-funzionale

lavorare in team non è scontato…

e infine…

@Fabbrucci

Page 58: Lean UX Development

@FabbrucciCosa posso fare io come Developer

Alzare lo sguardo

Agile non è un framework.Che cos’è? Se lo cerco, per quale motivo?

Proviamo a capire ed ascoltareprima di infamare

La nostra felicità non è un side-project

Alleniamoci ad ottenere il meglio da ciò che abbiamo, e a sfruttare le differenze

@Fabbrucci

Page 59: Lean UX Development

@Fabbrucci

Grazie a queste aziende

Page 60: Lean UX Development

@Fabbrucci

Grazie a tuttiDomande?http://fabbrucci.me

[email protected]

@Fabbrucci