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 [email protected] about.me/stenopedro
Alessio Zazzarini UX designer - Ogilvy Interactive [email protected] twitter.com/Alessiozazza
in Prototipare
WORKSHOP
Milano, giovedì 5 dicembre 2013 @
Grazie!
milanuxbookclub.wordpress.com
Top Related