Il TAO della progettazione:   dall’idea al prototipo,  la documentazione  nelle varie fasi del progetto web   di M.C. Lava...
COSA VEDREMO OGGI… <ul><li>TEORIA </li></ul><ul><li>cosa intendiamo per interaction design </li></ul><ul><li>come cambia l...
I DEA I NTER A ZIONE
IERI
OGGI
Dalle esper i enze  p onte …
al l e  esperienze crossm e diali
 
ENTRAMBE UTENTI
COMPASSIONE SEMPLICITÀ UMILTÀ
US E R CENTERED D E SIGN
PROGETTAZIONE IDEAZIONE REALIZZAZIONE MARKETING Nascita idea Formalizzazione idea Definizione scopo Progettazione strategi...
UX DESIGN IDEA Definizione obiettivi Business analysis Definizione requisiti Formalizzazione progetto Sviluppo  grafico Sv...
 
sul comportamento degli utenti di strategia di design 3   TIPOLOGIE DI DOCUMENTO * Dan Brown www. communicatingdesign .com...
Ananda, situata nelle colline vicino Assisi, è un ritiro spirituale che accoglie tutti coloro che cercano un significato e...
I docu m enti sul comportamento deg l i uten t i <ul><li>Le personas </li></ul><ul><li>La progettazione dei test di usabil...
LE PERSO N AS
Format per creare P e rsonas
http://www.enginegroup.co.uk/ service_design / m_page / personas   Person a s di Engine Service Des i gn
Pers o nas d i  KIVIO
Ananda, situata nelle colline vicino Assisi, è un ritiro spirituale che Pe r sonas d i  Ope n moko
Pers o nas di  V iget La b s Person a s i Q Cont e nt http://www.viget.com/ advance / why-personas-are-valuable /
http://www.slideshare.net/ toddwarfel / data-driven-personas   Per s onas di Todd War f el
http:// bobulate.com / documents / scenarios.pdf   Pe r sonas Razor f ish
LA  P ROGETTAZIONE E I RISULTATI DEI  TEST  DI USABI L ITÀ
A cosa ser v e  l ’usabilità in un progetto di inter a ction des i gn?
<ul><li>Scegliamo un approccio </li></ul><ul><li>Pianificare la ricerca </li></ul><ul><li>Selezione tester e logistica </l...
<ul><li>Obiettivi </li></ul><ul><li>Logistica e metodologia </li></ul><ul><li>Descrizione </li></ul><ul><li>Risultati </li...
I docu m enti  di str a tegia <ul><li>analisi competitiva </li></ul><ul><li>concept model </li></ul><ul><li>content invent...
L ’ anal i si competi t iva
I l  concept mod e l
I l  content inventory
Ese m pi di content invent o r y 1 2
I docu m enti  di des i gn <ul><li>mappe </li></ul><ul><li>wireframes  </li></ul><ul><li>flowchart </li></ul><ul><li>proto...
Map p e semplic i … HOME
o comples s e…
 
Ma p pe meno cla s siche
Un vo c abolario vi s uale Pagina File Gruppo di pagine Gruppo di file connettori frecce crossbar Add to chart label Fn fo...
area area repetitiva area secondaria richiamo di flusso punto di continuità in out set di area secondaria punti decisional...
Esemp i o di flowchart START END 1 abbonamento più abbonamenti vuoi Loc. + ID key card + Tipoabb. Es.  RM   123456  GN 1 L...
a l tri esempi di flo w chart
I  WIR E FRAMES
b a se sp e cif i co Tip o logie di wiref r ames
Disegnati a m a no….
O qua s i
 
I L  P ROTOTY P ING
Prot o tipi
 
 
Graz i e! mc.lavazza @ gmail.com
Upcoming SlideShare
Loading in...5
×

Il Tao della progettazione: i documenti nelle varie fasi di un progetto web

1,247
-1

Published on

Published in: Design, Business, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,247
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Il Tao della progettazione: i documenti nelle varie fasi di un progetto web

  1. 1. Il TAO della progettazione: dall’idea al prototipo, la documentazione nelle varie fasi del progetto web di M.C. Lavazza
  2. 2. COSA VEDREMO OGGI… <ul><li>TEORIA </li></ul><ul><li>cosa intendiamo per interaction design </li></ul><ul><li>come cambia la progettazione </li></ul><ul><li>il concetto di crossmedialità </li></ul><ul><li>nuove discipline e nuove figure </li></ul><ul><li>progettare in un ecosistema </li></ul><ul><li>progettare per gli altri (TAO) </li></ul><ul><li>PRATICA </li></ul><ul><li>le fasi progetto </li></ul><ul><li>dall’idea al prodotto </li></ul><ul><li>ruoli e compiti </li></ul><ul><li>la documentazione </li></ul><ul><ul><li>sul comportamento degli utenti </li></ul></ul><ul><ul><li>di strategia </li></ul></ul><ul><ul><li>di progettazione </li></ul></ul>
  3. 3. I DEA I NTER A ZIONE
  4. 4. IERI
  5. 5. OGGI
  6. 6. Dalle esper i enze p onte …
  7. 7. al l e esperienze crossm e diali
  8. 9. ENTRAMBE UTENTI
  9. 10. COMPASSIONE SEMPLICITÀ UMILTÀ
  10. 11. US E R CENTERED D E SIGN
  11. 12. PROGETTAZIONE IDEAZIONE REALIZZAZIONE MARKETING Nascita idea Formalizzazione idea Definizione scopo Progettazione strategica SEO Pianificazione tempi, costi, risorse SEM Progettazione tecnica Sviluppo Produzione contenuti Pubblicazione Testing e valutazioni Pure marketing sauce Analisi di mercato Fonte: IWA Web Skill Profiles Le ar e e del proge t to
  12. 13. UX DESIGN IDEA Definizione obiettivi Business analysis Definizione requisiti Formalizzazione progetto Sviluppo grafico Sviluppo IT Test RILASCIO Relazioni esterne Commerciale Customer care Studi e analisi Brand strategist Marketing Business strategy Aree operative Information technologist Progettazione operativa Usability test (esistente) Target analysis Market analysis Heuristic analysis Piano di Marketing IT Brand strategist Scala requisiti Piano attività Value proposition Marketing SEO SEM Brand strategy Template Look & feel CMS personalizzazione accessibilità usabilità IT management Html Project/Program management Information architecture & user interaction design (IA/UX) User test Check requisiti Concept model Usability Plan Usability report Content inventory Def. Personas Site map Wireframes Flowchart Prototyping Analisi fattibilità Progetto di Interaction design IA/UX Brand strategy Project/Program management Marketing IT management Test accessibilità Prog. e gestione risorse Linee guida Analisi scenari Modelli di interazione Analisi costi/ricavi Metodologia Labeling/naming Prog. sistemi/flussi di aggiornamento Valutazione scelte IT Modelli di interazione Analisi previsionale di sviluppo Accesibilità Usabilità
  13. 15. sul comportamento degli utenti di strategia di design 3 TIPOLOGIE DI DOCUMENTO * Dan Brown www. communicatingdesign .com/
  14. 16. Ananda, situata nelle colline vicino Assisi, è un ritiro spirituale che accoglie tutti coloro che cercano un significato elevato e valori profondi per la propria vita. Ananda, situata nelle colline vicino Assisi, è un ritiro spirituale che accoglie tutti coloro che cercano… Ananda, situata nelle colline vicino Assisi, è un ritiro spirituale che accoglie tutti coloro che cercano un significato elevato e valori profondi per la propria vita. Ogni anno, Ananda, situata nelle colline vicino Assisi, è un ritiro spirituale che Ananda, situata nelle colline vicino Assisi, è un ritiro spirituale che Ananda, situata nelle colline vicino Assisi, è un ritiro spirituale che I l i velli del do c umento
  15. 17. I docu m enti sul comportamento deg l i uten t i <ul><li>Le personas </li></ul><ul><li>La progettazione dei test di usabilità </li></ul><ul><li>I risultati dei test di usabilità </li></ul>
  16. 18. LE PERSO N AS
  17. 19. Format per creare P e rsonas
  18. 20. http://www.enginegroup.co.uk/ service_design / m_page / personas Person a s di Engine Service Des i gn
  19. 21. Pers o nas d i KIVIO
  20. 22. Ananda, situata nelle colline vicino Assisi, è un ritiro spirituale che Pe r sonas d i Ope n moko
  21. 23. Pers o nas di V iget La b s Person a s i Q Cont e nt http://www.viget.com/ advance / why-personas-are-valuable /
  22. 24. http://www.slideshare.net/ toddwarfel / data-driven-personas Per s onas di Todd War f el
  23. 25. http:// bobulate.com / documents / scenarios.pdf Pe r sonas Razor f ish
  24. 26. LA P ROGETTAZIONE E I RISULTATI DEI TEST DI USABI L ITÀ
  25. 27. A cosa ser v e l ’usabilità in un progetto di inter a ction des i gn?
  26. 28. <ul><li>Scegliamo un approccio </li></ul><ul><li>Pianificare la ricerca </li></ul><ul><li>Selezione tester e logistica </li></ul><ul><li>Scrivere le linee guida </li></ul><ul><li>Attuare la facilitazione </li></ul><ul><li>Analizzare i risultati </li></ul><ul><li>Suggerire le raccomandazioni </li></ul>Quali step per l’usabilità?
  27. 29. <ul><li>Obiettivi </li></ul><ul><li>Logistica e metodologia </li></ul><ul><li>Descrizione </li></ul><ul><li>Risultati </li></ul><ul><li>Indice </li></ul><ul><li>Overview </li></ul><ul><li>Executive summary </li></ul><ul><li>Obiettivi </li></ul><ul><li>Metodologia Partecipanti Training Procedure </li></ul><ul><li>Criteri Errori critici Errori secondari Valutazione soggettive </li></ul><ul><li>Obiettivi raggiunti completamento percorso </li></ul><ul><li>Classificazione problemi </li></ul><ul><li>Reporting risultati </li></ul>1 2
  28. 30. I docu m enti di str a tegia <ul><li>analisi competitiva </li></ul><ul><li>concept model </li></ul><ul><li>content inventory </li></ul>
  29. 31. L ’ anal i si competi t iva
  30. 32. I l concept mod e l
  31. 33. I l content inventory
  32. 34. Ese m pi di content invent o r y 1 2
  33. 35. I docu m enti di des i gn <ul><li>mappe </li></ul><ul><li>wireframes </li></ul><ul><li>flowchart </li></ul><ul><li>prototyping </li></ul>
  34. 36. Map p e semplic i … HOME
  35. 37. o comples s e…
  36. 39. Ma p pe meno cla s siche
  37. 40. Un vo c abolario vi s uale Pagina File Gruppo di pagine Gruppo di file connettori frecce crossbar Add to chart label Fn footnote Connettori secondari Frecce secondarie www.jjg.net/ia/visvocab/
  38. 41. area area repetitiva area secondaria richiamo di flusso punto di continuità in out set di area secondaria punti decisionali ramo secondario selettore secondario Area di flusso Ar e e di flusso e diagrammi www.jjg.net/ia/visvocab/
  39. 42. Esemp i o di flowchart START END 1 abbonamento più abbonamenti vuoi Loc. + ID key card + Tipoabb. Es. RM 123456 GN 1 Loc. + ID key card + Tipoabb. X n. volte Es. RM 123456 GN 123456 GN… INVIA SMS Hai acquistato entro 30 ottobre Hai acquistato dopo 30 ottobre Tariffa scontata Tariffa piena RICEVI SMS di CONFERMA Commissione carta SI 0,25 Valido come ricevuta d’acquisto da esibire all’entrata valuta a 1 a2 a 3 a Cinzia vuole fare un abbonamento al teatro tramite mobile
  40. 43. a l tri esempi di flo w chart
  41. 44. I WIR E FRAMES
  42. 45. b a se sp e cif i co Tip o logie di wiref r ames
  43. 46. Disegnati a m a no….
  44. 47. O qua s i
  45. 49. I L P ROTOTY P ING
  46. 50. Prot o tipi
  47. 53. Graz i e! mc.lavazza @ gmail.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×