A parte l'incipit "provocatorio", questa presentazione voleva spiegare l'importanza di riuscire a impostare un livello di comunicazione precedente alla stesura dei wireframe. Questo livello di comunicazione non viene quasi mai considerato, mentre è un momento importante per il processo creativo. In questa presentazione ho voluto sottolineare alcuni esempi e strumenti che conosco e che mi aiutano in questa fase del lavoro: carta e penna, lavagna, etc. Mi interessa molto il tuo feedback, per cui non esitare a commentare o contattarmi.

1. Il tool definitivo
dello UX designer
di Alberto Mucignat
UX Camp Firenze
17 Ottobre 2009

2. http://www.flickr.com/photos/mikeoliveri/1322688055/
L’utente.

3. Cosa fa l’UX Designer
Logo
Link 1 Link 2 Link 3
Video title Searcg
Video
img
img
img
Button 1 Button 2 Button 3 More videos
img
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse ut purus. Suspendisse tristique. Cras et sem at
odio porttitor mattis. Donec dignissim ornare tortor. Donec lectus
turpis, tempor id, cursus vitae, eleifend in, risus. Aenean turpis.
Mauris ultricies quam malesuada ligula. img
Comments
img
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Suspendisse ut purus. Suspendisse tristique. Cras
et sem at odio porttitor mattis. Donec dignissim ornare
tortor.

4. Cosa fa l’UX Designer
Logo
Link 1 Link 2 Link 3
Marketing Dirigenti
Video title Searcg
Video
img
UX Team img Stakeholders
img
Button 1 Button 2 Button 3 More videos
Brand
Sviluppatori
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
img
Manager
Suspendisse ut purus. Suspendisse tristique. Cras et sem at
odio porttitor mattis. Donec dignissim ornare tortor. Donec lectus
turpis, tempor id, cursus vitae, eleifend in, risus. Aenean turpis.
Mauris ultricies quam malesuada ligula. img
Comments
img Product
Fornitori Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Suspendisse ut purus. Suspendisse tristique. Cras
Manager
et sem at odio porttitor mattis. Donec dignissim ornare
tortor.

6. Logo
Link 1 Link 2 Link 3
Video title Searcg
Video
img
img
img
Button 1 Button 2 Button 3 More videos
img
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse ut purus. Suspendisse tristique. Cras et sem at
odio porttitor mattis. Donec dignissim ornare tortor. Donec lectus
turpis, tempor id, cursus vitae, eleifend in, risus. Aenean turpis.
Maria
Mauris ultricies quam malesuada ligula. img
Comments
22 anni, Roma Lorem ipsum dolor sit amet, consectetuer adipiscing
img
elit. Suspendisse ut purus. Suspendisse tristique. Cras
------------- ----- --- ---- -- ----- --- -- et sem at odio porttitor mattis. Donec dignissim ornare
tortor.
---- -- ----- --- - -- ---- ------ ----- ---
---- ----- --- ---- -- ---- ---- ----- ---
Obiettivi
• ------------- ----- --- ---- -- -----
• ---- -- ----- --- - -- ---- ------
• ---- ----- --- ---- -- ---- ---- -----
• ---- -- ----- --- - -- ---- ------
Task
• ------------- ----- --- ---- -- -----
• ---- -- ----- --- - -- ---- ------
• ---- ----- --- ---- -- ---- ---- -----
• ---- -- ----- --- - -- ---- ------

7. http://www.flickr.com/photos/loft42/224677076/
Carta e Penna

8. Costo
------------------------------
Tempo

9. “Using wireframes earlier in the design process
focuses time and attention
on all the wrong details and activities.”
http://www.adaptivepath.com/ideas/essays/archives/000863.php

10. “Above the bar is what the user sees. Below the bar is
what they do. An arrow connects the user’s action to a
new screen with yet another action.”
http://37signals.com/svn/posts/1926-a-shorthand-for-designing-ui-flows

11. Testata
Area utente
Contenuto principale
Altri
contenuti
Azioni secondarie
Footer
Wireframe a blocchi

12. http://www.flickr.com/photos/pasotraspaso/2561252664/
La bassa fedeltà comunica meglio.
http://www.mucignat.com/blog/archives/654-bassa-fedelta.html

13. http://www.flickr.com/photos/manueb/3275645812/
Scarabocchiare è
un modo di comunicare

14. Web Design 2.0

15. http://www.flickr.com/photos/dnorman/3492238090/
“...throwing ideas on a whiteboard
to help flesh out the concepts a bit more.”
-D’Arcy Norman

16. 3 idee finali
#1 Comunicare le idee attraverso il disegno
#2 Disegnare è un processo di comunicazione
#3 Disegnare assieme agli altri

17. Le città del futuro

18. Risorse utili
Communicating Back of the napkin
Design Dan Roam
Dan Brown
Sketching User Rapid Viz
Experience Kurt Hank
Bill Buxton

19. Grazie!
Alberto Mucignat
User Experience Designer
alberto.mucignat@gmail.com
http://www.mucignat.com
Web che funziona.