Workshop Prototipare in Axure – Milano, 5 dicembre 2013

Stefano Pedrioli UX director - AconAdv about.me/stenopedro

Alessio Zazzarini UX designer - Ogilvy Interactive twitter.com/Alessiozazza

in Prototipare

WORKSHOP

1

Milano, giovedì 5 dicembre 2013 @

Workshop Prototipare in Axure – Milano, 5 dicembre 2013

“prototyping is a process, not a product...

It’s only a means to an end...”

2

Todd Zaki Warfel

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 3

AGENDA • Chi siete • Prototipare • Perchè Axure • Master, Dinamic panel, variable • Axure 7 e responsiveness

• Esercitazione

Workshop Prototipare in Axure – Milano, 5 dicembre 2013

CHI SIETE 1

4

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 5

RISULTATI POLL

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 6

RISULTATI POLL

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 7

RISULTATI POLL

Workshop Prototipare in Axure – Milano, 5 dicembre 2013

PROTOTIPARE 2

8

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 9

PERCHÈ

• comunicare meglio • ridurre tempi e costi • migliorare la user experience

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 10

PER CHI

• utenti • clienti • team

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 11

QUANDO E COME

Prototyping by Todd Zaki Warfel Rosenfeld Media, 2009

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 12

QUANDO E COME ricerca personas scenari flussi architettura sketch wireframe prototipi

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 13

PER COSA

• navigazione • interazione

Workshop Prototipare in Axure – Milano, 5 dicembre 2013

PERCHE’ AXURE 3

14

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 15

PERCHÈ SÌ

• bassa curva di apprendimento • unico strumento per wireframe,

prototipi e specifiche • elevata interazione con poca

programmazione

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 16

PERCHÈ NO

• strumenti di disegno limitati • collaborazione ancora scarsa • costo ($289-$589)

Workshop Prototipare in Axure – Milano, 5 dicembre 2013

MASTER, DYNAMIC PANEL, VARIABLE

3

17

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 18

PRIMO IMPATTO

... per chi non c’era...

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 19

PRIMO IMPATTO

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 20

MASTER

• centralizzazione di elementi • riutilizzabilità • aggiornamento “automatico”

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 21

MASTER

• header e footer • oggetti ricorrenti (box news, box

social, box contatti, ecc.)

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 22

MASTER Esempio 1

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 23

DINAMIC PANEL

• interazione • simulazione • animazione

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 24

DINAMIC PANEL

• mouserover • slider • tab • accordion • ajax style • form

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 25

DINAMIC PANEL Esempio 2

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 26

DINAMIC PANEL Esempio 3

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 27

VARIABLE

• simulazioni avanzate • consistenza dell’interazione nel

passaggio tra le “pagine”

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 28

VARIABLE Esempio 4

Workshop Prototipare in Axure – Milano, 5 dicembre 2013

AXURE 7 5

29

Alessio Zazzarini share.axure.com/GV28DP

Workshop Prototipare in Axure – Milano, 5 dicembre 2013

ESERCITAZIONE 6

30

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 31

TASK

Creare il prototipo di una landing page per la registrazione alla newsletter (futura) del Milan UX Book Club

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 32

REQUISITI DI BUSINESS

Il book club, attraverso una campagna di lead generation, vuole sfruttare la leva della newsletter per raccogliere nuovi aderenti al club, conoscerli un po’ di più e offrire un servizio migliore.

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 33

PERSONA

Barbara, 32 anni , interaction designer, fidanzata, si è trasferita da poco a Milano. Il tempo libero è poco ma vuole sfruttarlo per confrontarsi con altri “colleghi” e costruire una rete di relazioni.

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 34

SCENARIO

L’utente incappa in un banner testuale che promuove l’adesione al Book club attraverso la registrazione alla newsletter; interessato, clicca/tappa sul link e atterrà sulla landing page.

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 35

INTERAZIONE

L’utente compila la form di registrazione e riceve un messaggio di conferma.

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 36

REQUISITI FUNZIONALI Campo Obbligatorio Tipo di campo Controllo Dipende da

Nome SI Testo Max 255 caratteri

Cogmome SI Testo Max 255 caratteri

Email SI Testo Contiene @, max 255 caratteri

Professione NO Elenco

Ruolo NO Elenco Professione

Privacy SI Check box Checked

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 37

REQUISITI FUNZIONALI Professione

Studente

Designer

Altro

Ruolo Professione = Designer

Information architect

Interaction designer

User experience designer

Web designer

Web Developer

Altro

Il campo ruolo appare solo in questo caso

12/12/2013 Workshop Prototipare in Axure – Milano, 5 dicembre 2013 38

Buon divertimento!

Workshop Prototipare in Axure – Milano, 5 dicembre 2013

Stefano Pedrioli UX director – AconAdv stafano.pedrioli@gmail.com about.me/stenopedro

Alessio Zazzarini UX designer - Ogilvy Interactive alessio.zazzarini@gmail.com twitter.com/Alessiozazza

in Prototipare

WORKSHOP

Milano, giovedì 5 dicembre 2013 @

Grazie!

milanuxbookclub.wordpress.com