Slide a supporto del workshop "Prototipare in Axure" tenuto da Stefano Pedrioli e Alessio Zazzarini per il Milan UX Book Club al coworking Login di Milano il 5 dicembre 2013 http://milanuxbookclub.wordpress.com/2013/11/20/5-dicembre-2013/

1. Prototipare
in
WORKSHOP
Stefano Pedrioli
UX director - AconAdv
about.me/stenopedro
Alessio Zazzarini
UX designer - Ogilvy Interactive
twitter
.com/Alessiozazza
Milano, giovedì 5 dicembre 2013 @
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
1

2. “prototyping is a process,
not a product...
It’s only a means to an end...”
Todd Zaki Warfel
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
2

3. AGENDA
•
•
•
•
•
Chi siete
Prototipare
Perchè Axure
Master Dinamic panel, variable
,
Axure 7 e responsiveness
• Esercitazione
12/12/2013
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
3

4. 1
CHI SIETE
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
4

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

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

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

8. 2
PROTOTIPARE
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
8

9. PERCHÈ
• comunicare meglio
• ridurre tempi e costi
• migliorare la user experience
12/12/2013
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
9

10. PER CHI
• utenti
• clienti
• team
12/12/2013
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
10

11. QUANDO E COME
Prototyping by Todd Zaki Warfel
Rosenfeld Media, 2009
12/12/2013
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
11

12. QUANDO E COME
ricerca
personas
scenari
flussi
architettura
sketch
wireframe
prototipi
12/12/2013
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
12

13. PER COSA
• navigazione
• interazione
12/12/2013
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
13

14. 3
PERCHE’ AXURE
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
14

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
15

16. PERCHÈ NO
• strumenti di disegno limitati
• collaborazione ancora scarsa
• costo ($289-$589)
12/12/2013
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
16

17. 3
MASTER,
DYNAMIC PANEL,
VARIABLE
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
17

18. PRIMO IMPATTO
... per chi non c’era...
12/12/2013
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
18

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

20. MASTER
• centralizzazione di elementi
• riutilizzabilità
• aggiornamento “automatico”
12/12/2013
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
20

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
21

22. MASTER
Esempio 1
12/12/2013
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
22

23. DINAMIC PANEL
• interazione
• simulazione
• animazione
12/12/2013
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
23

24. DINAMIC PANEL
•
•
•
•
•
•
mouserover
slider
tab
accordion
ajax style
form
12/12/2013
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
24

25. DINAMIC PANEL
Esempio 2
12/12/2013
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
25

26. DINAMIC PANEL
Esempio 3
12/12/2013
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
26

27. VARIABLE
• simulazioni avanzate
• consistenza dell’interazione nel
passaggio tra le “pagine”
12/12/2013
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
27

28. VARIABLE
Esempio 4
12/12/2013
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
28

29. 5
AXURE 7
Alessio Zazzarini
share.axure.com/GV28DP
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
29

30. 6
ESERCITAZIONE
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
30

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
31

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
32

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
33

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
34

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
35

36. REQUISITI FUNZIONALI
Campo
Obbligatorio
Tipo di campo
Controllo
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
Privacy
SI
Check box
Dipende da
Professione
Checked
12/12/2013
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
36

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
37

38. Buon
divertimento!
12/12/2013
Workshop Prototipare in Axure – Milano, 5 dicembre 2013
38

39. Prototipare
in
WORKSHOP
milanuxbookclub.wordpress.com
Stefano Pedrioli
UX director – AconAdv
stafano.pedrioli@gmail.com
about.me/stenopedro
Grazie!
Alessio Zazzarini
UX designer - Ogilvy Interactive
alessio.zazzarini@gmail.com
twitter
.com/Alessiozazza
Milano, giovedì 5 dicembre 2013 @
Workshop Prototipare in Axure – Milano, 5 dicembre 2013