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

  • 1,087 views
Uploaded on

 

More in: Design , Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,087
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
17
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Il TAO della progettazione: dall’idea al prototipo, la documentazione nelle varie fasi del progetto web di M.C. Lavazza
  • 2. COSA VEDREMO OGGI…
    • TEORIA
    • cosa intendiamo per interaction design
    • come cambia la progettazione
    • il concetto di crossmedialità
    • nuove discipline e nuove figure
    • progettare in un ecosistema
    • progettare per gli altri (TAO)
    • PRATICA
    • le fasi progetto
    • dall’idea al prodotto
    • ruoli e compiti
    • la documentazione
      • sul comportamento degli utenti
      • di strategia
      • di progettazione
  • 3. I DEA I NTER A ZIONE
  • 4. IERI
  • 5. OGGI
  • 6. Dalle esper i enze p onte …
  • 7. al l e esperienze crossm e diali
  • 8.  
  • 9. ENTRAMBE UTENTI
  • 10. COMPASSIONE SEMPLICITÀ UMILTÀ
  • 11. US E R CENTERED D E SIGN
  • 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
  • 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à
  • 14.  
  • 15. sul comportamento degli utenti di strategia di design 3 TIPOLOGIE DI DOCUMENTO * Dan Brown www. communicatingdesign .com/
  • 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
  • 17. I docu m enti sul comportamento deg l i uten t i
    • Le personas
    • La progettazione dei test di usabilità
    • I risultati dei test di usabilità
  • 18. LE PERSO N AS
  • 19. Format per creare P e rsonas
  • 20. http://www.enginegroup.co.uk/ service_design / m_page / personas Person a s di Engine Service Des i gn
  • 21. Pers o nas d i KIVIO
  • 22. Ananda, situata nelle colline vicino Assisi, è un ritiro spirituale che Pe r sonas d i Ope n moko
  • 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 /
  • 24. http://www.slideshare.net/ toddwarfel / data-driven-personas Per s onas di Todd War f el
  • 25. http:// bobulate.com / documents / scenarios.pdf Pe r sonas Razor f ish
  • 26. LA P ROGETTAZIONE E I RISULTATI DEI TEST DI USABI L ITÀ
  • 27. A cosa ser v e l ’usabilità in un progetto di inter a ction des i gn?
  • 28.
    • Scegliamo un approccio
    • Pianificare la ricerca
    • Selezione tester e logistica
    • Scrivere le linee guida
    • Attuare la facilitazione
    • Analizzare i risultati
    • Suggerire le raccomandazioni
    Quali step per l’usabilità?
  • 29.
    • Obiettivi
    • Logistica e metodologia
    • Descrizione
    • Risultati
    • Indice
    • Overview
    • Executive summary
    • Obiettivi
    • Metodologia Partecipanti Training Procedure
    • Criteri Errori critici Errori secondari Valutazione soggettive
    • Obiettivi raggiunti completamento percorso
    • Classificazione problemi
    • Reporting risultati
    1 2
  • 30. I docu m enti di str a tegia
    • analisi competitiva
    • concept model
    • content inventory
  • 31. L ’ anal i si competi t iva
  • 32. I l concept mod e l
  • 33. I l content inventory
  • 34. Ese m pi di content invent o r y 1 2
  • 35. I docu m enti di des i gn
    • mappe
    • wireframes
    • flowchart
    • prototyping
  • 36. Map p e semplic i … HOME
  • 37. o comples s e…
  • 38.  
  • 39. Ma p pe meno cla s siche
  • 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/
  • 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/
  • 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
  • 43. a l tri esempi di flo w chart
  • 44. I WIR E FRAMES
  • 45. b a se sp e cif i co Tip o logie di wiref r ames
  • 46. Disegnati a m a no….
  • 47. O qua s i
  • 48.  
  • 49. I L P ROTOTY P ING
  • 50. Prot o tipi
  • 51.  
  • 52.  
  • 53. Graz i e! mc.lavazza @ gmail.com