il tao della progettazione
DESCRIPTION
Quali sono i documenti che segnano gli step dell'interaction design? Quali sono gli strumenti del mestiere dell'architetto dell'informazione e dello user experience designer? Cosa significa progettare oggi nell'universo digitale?TRANSCRIPT
![Page 1: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/1.jpg)
Il TAO della progettazione: dall’idea al prototipo, la documentazione nelle varie fasi del progetto web di M.C. Lavazza
![Page 2: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/2.jpg)
COSA VEDREMO OGGI…
TEORIA
1. cosa intendiamo per interaction design
2. come cambia la progettazione
3. il concetto di crossmedialità
4. nuove discipline e nuove figure
5. progettare in un ecosistema
6. progettare per gli altri (TAO)
PRATICA
1. le fasi progetto
2. dall’idea al prodotto
3. ruoli e compiti
4. la documentazione
sul comportamento degli utenti
di strategia
di progettazione
![Page 3: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/3.jpg)
IDEA
INTERAZIONE
![Page 4: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/4.jpg)
IERI
![Page 5: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/5.jpg)
OGGI
![Page 6: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/6.jpg)
Dalle esperienze ponte…
![Page 7: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/7.jpg)
alle esperienze crossmediali
![Page 8: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/8.jpg)
![Page 9: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/9.jpg)
ENTRAMBE
UTENTI
![Page 10: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/10.jpg)
COMPASSIONE
SEMPLICITÀ
UMILTÀ
![Page 11: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/11.jpg)
USER CENTERE
D DESIGN
![Page 12: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/12.jpg)
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 marketingsauce
Analisi di mercato
Fonte: IWA Web Skill Profiles
Le aree del progetto
![Page 13: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/13.jpg)
UX DESIGN
IDEADefinizione
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
Marketanalysis
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
Conce
pt m
odel
Usabi
lity
Plan
Usabi
lity re
port
Conte
nt
inve
ntor
yDef
. Per
sona
s
Site m
apW
irefra
mes
Flowch
art
Prot
otyp
ing
Analisi fattibilità
Progetto di Interaction designIA/UXBrand strategyProject/Program managementMarketingIT 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
Accesib
ilità
Usabilit
à
![Page 14: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/14.jpg)
![Page 15: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/15.jpg)
sul comportamento degli utenti
di strategia
di design
3 TIPOLOGIE DI DOCUMENTO*
Dan Brown www.communicatingdesign.com/
![Page 16: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/16.jpg)
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 livelli del documento
![Page 17: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/17.jpg)
I documenti sul comportamento degli utenti Le personas
La progettazione dei test di usabilità
I risultati dei test di usabilità
![Page 18: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/18.jpg)
LE PERSONAS
![Page 19: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/19.jpg)
Format per creare Personas
![Page 20: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/20.jpg)
http://www.enginegroup.co.uk/service_design/m_page/personas
Personas di Engine Service Design
![Page 21: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/21.jpg)
Person
as
di KIV
IO
![Page 22: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/22.jpg)
Ananda, situata nelle colline vicino Assisi, è un ritiro spirituale che
Personas di Openmoko
![Page 23: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/23.jpg)
Personas di Viget Labs
Personas iQContent
http://www.viget.com/advance/why-personas-are-valuable/
![Page 24: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/24.jpg)
http://www.slideshare.net/toddwarfel/data-driven-personas
Personas di Todd Warfel
![Page 25: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/25.jpg)
http://bobulate.com/documents/scenarios.pdf
Personas Razorfish
![Page 26: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/26.jpg)
LA PROGETTAZIONE E I RISULTATI DEI TEST DI USABILITÀ
![Page 27: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/27.jpg)
A cosa serve l’usabilità in un progetto di interaction design?
![Page 28: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/28.jpg)
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à?
![Page 29: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/29.jpg)
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
![Page 30: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/30.jpg)
I documenti di strategia
analisi competitiva
concept model
content inventory
![Page 31: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/31.jpg)
L’analisi competitiva
![Page 32: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/32.jpg)
Il concept model
![Page 33: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/33.jpg)
Il content inventory
![Page 34: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/34.jpg)
Esempi di content inventory
1
2
![Page 35: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/35.jpg)
I documenti di design
mappe
wireframes
flowchart
prototyping
![Page 36: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/36.jpg)
HOME
Mappe semplici…
![Page 37: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/37.jpg)
o complesse…
![Page 38: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/38.jpg)
![Page 39: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/39.jpg)
Mappe meno classiche
![Page 40: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/40.jpg)
Un vocabolario visuale
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/
![Page 41: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/41.jpg)
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
Aree di flusso e diagrammi
www.jjg.net/ia/visvocab/
![Page 42: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/42.jpg)
Esempio di flowchart
START
END
1 abbonamento più abbonamentivuoi
Loc. + ID key card + Tipo
abb.
Es. RM 123456 GN
1
Loc. + ID key card + Tipo
abb.
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
a1 a2 a3
a
Cinzia vuole fare un abbonamento al teatro tramite mobile
![Page 43: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/43.jpg)
altri esempi di flowchart
![Page 44: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/44.jpg)
I WIREFRAMES
![Page 45: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/45.jpg)
base
specifico
Tipologie di wireframes
![Page 46: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/46.jpg)
Disegnati a mano….
![Page 47: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/47.jpg)
O quasi
![Page 48: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/48.jpg)
![Page 49: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/49.jpg)
IL PROTOTYPING
![Page 50: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/50.jpg)
Prototipi
![Page 51: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/51.jpg)
![Page 52: Il Tao della progettazione](https://reader036.vdocuments.pub/reader036/viewer/2022081603/5592f94e1a28ab33478b45ee/html5/thumbnails/52.jpg)