Your SlideShare is downloading. ×
0
Milano, 20-22 ottobre - Fieramilanocity
1
Dall’idea al prototipo
I documenti nelle diverse fasi del progetto web
Maria Cri...
Milano, 20-22 ottobre - Fieramilanocity
2
Ore 9.00 brainstorming…
Anna, PM
Elena e
Francesco,
marketing
Fiammetta,
art dir...
Milano, 20-22 ottobre - Fieramilanocity
3
Una partita e molti giocatori
UX DESIGN
IDEA
Definizione
obiettivi
Business
anal...
Milano, 20-22 ottobre - Fieramilanocity
4
Progettiamo per un ecosistema
Milano, 20-22 ottobre - Fieramilanocity
5
Milano, 20-22 ottobre - Fieramilanocity
6
Le fasi della progettazione web
DESIGN
IDEAZIONE RILASCIO
SVILUPPO
Personae
Mapp...
Milano, 20-22 ottobre - Fieramilanocity
7
I documenti di progetto
IDEAZIONE
 Identificazione e
classificazione servizi
 ...
Milano, 20-22 ottobre - Fieramilanocity
8
Ideazione >> ascolto e classifica dei servizi
Milano, 20-22 ottobre - Fieramilanocity
9
ideazione >> analisi competitiva
www.ilmiogatto.com
Razze
Salute
Curiosità
Cerco...
Milano, 20-22 ottobre - Fieramilanocity
10
ideazione >> analisi competitiva
Ilmiogatto.com
gattomania.co
m
miglioreamico.i...
Milano, 20-22 ottobre - Fieramilanocity
11
ideazione >> mappa concettuale
FOTO
UTENTE
Flickr
ARGOMENTO
contatti
photo-stre...
Milano, 20-22 ottobre - Fieramilanocity
12
ideazione >> mappa concettuale 2
GATTI
users
curiososocial
consumatore
contenut...
Milano, 20-22 ottobre - Fieramilanocity
13
ideazione >> personae
Carlo Zanetti
“Non rinuncio mai alle mie passioni”
- 36 a...
Milano, 20-22 ottobre - Fieramilanocity
14
Attributi chiave
Basso Alto
Sapere ------------------
Esperienza-------------...
Milano, 20-22 ottobre - Fieramilanocity
15
progettazione >> mappa del sito
HOME
. .
. .
. .
.
.
. .
.
.
.
.
.
.
.
. .
.
.
Milano, 20-22 ottobre - Fieramilanocity
16
progettazione >> mappa del sito 2
HOME
FeedbackNewsletter
Contatti
Giochi e
dow...
Milano, 20-22 ottobre - Fieramilanocity
17
progettazione >> wireframe
Branding e navigazione
Servizio
Navigazione
Intestaz...
Milano, 20-22 ottobre - Fieramilanocity
18
progettazione >> wireframe 3{TITOLO PROGETTO}
Home | Contattaci | Faq
SearchSea...
Milano, 20-22 ottobre - Fieramilanocity
19
START
END
1 abbonamento più abbonamenti
vuole
Loc. + ID key
card + Tipo
abb.
Es...
Milano, 20-22 ottobre - Fieramilanocity
20
progettazione >> doc. con/su gli utenti
User group: clienti,
designers
Obiettiv...
Milano, 20-22 ottobre - Fieramilanocity
21
La metà degli utenti ha
esitato e perso tempo
nel creare da solo un
account
Fre...
Milano, 20-22 ottobre - Fieramilanocity
22
progettazione >> pattern design
Milano, 20-22 ottobre - Fieramilanocity
23
progettazione >> prototipo
Milano, 20-22 ottobre - Fieramilanocity
24
GRAZIE
mc.lavazza@gmail.com
Upcoming SlideShare
Loading in...5
×

Dall'idea al prototipo: I documenti nelle varie fasi del progetto web

2,637

Published on

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,637
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
96
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "Dall'idea al prototipo: I documenti nelle varie fasi del progetto web"

  1. 1. Milano, 20-22 ottobre - Fieramilanocity 1 Dall’idea al prototipo I documenti nelle diverse fasi del progetto web Maria Cristina Lavazza
  2. 2. Milano, 20-22 ottobre - Fieramilanocity 2 Ore 9.00 brainstorming… Anna, PM Elena e Francesco, marketing Fiammetta, art director Filippo, IT
  3. 3. Milano, 20-22 ottobre - Fieramilanocity 3 Una partita e molti giocatori 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 Conceptm odel Usability Plan Usability report Content inventoryDef.Personas Site m ap W irefram es Flowchart Prototyping Analisi fattibilità 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à
  4. 4. Milano, 20-22 ottobre - Fieramilanocity 4 Progettiamo per un ecosistema
  5. 5. Milano, 20-22 ottobre - Fieramilanocity 5
  6. 6. Milano, 20-22 ottobre - Fieramilanocity 6 Le fasi della progettazione web DESIGN IDEAZIONE RILASCIO SVILUPPO Personae Mappa Concept Progettazione strategica SEO Pianificazione SEM Progettazione tecnica Sviluppo template Produzione contenuti Pubblicazione Testing e valutazioni Analisi requisiti Analisi di mercato Idea Design patterns PrototipoWireframe
  7. 7. Milano, 20-22 ottobre - Fieramilanocity 7 I documenti di progetto IDEAZIONE  Identificazione e classificazione servizi  Analisi competitiva  Mappa Concettuale  Inventario contenuti  Personas PROGETTAZIONE  Mappa del sito  Wireframe  Process flow  Documenti con/su gli utenti  Pattern design  Prototipo STRUMENTI DI PRESENTAZIONE  Storyboard  Storytelling  Narrative report  Scenario  Presentazione TIPOLOGIA DI DOCUMENTO
  8. 8. Milano, 20-22 ottobre - Fieramilanocity 8 Ideazione >> ascolto e classifica dei servizi
  9. 9. Milano, 20-22 ottobre - Fieramilanocity 9 ideazione >> analisi competitiva www.ilmiogatto.com Razze Salute Curiosità Cerco/offro Utilità Prodotti CATEGORIE HOMEPAGE PAGINA INTERNA PAGINA PRODOTTO LAYOUT PAGINA Home page categorie sotto categori e assistenza prodotti NAVIGAZIONE PRODOTTO carrello informazion i consegna informazion i fattura conferma opzioni regalo nuovo account PROCESSO DI ACQUISTO
  10. 10. Milano, 20-22 ottobre - Fieramilanocity 10 ideazione >> analisi competitiva Ilmiogatto.com gattomania.co m miglioreamico.it PAGINA PRODOTTO PAGINA INTERNAHOMEPAGE
  11. 11. Milano, 20-22 ottobre - Fieramilanocity 11 ideazione >> mappa concettuale FOTO UTENTE Flickr ARGOMENTO contatti photo-stream utenti Flickr post temi gruppi classificazione tags contenuto contesto blogs pubblico privato preferiti persone azioni oggetti luoghi culturale temporale geografico fisico
  12. 12. Milano, 20-22 ottobre - Fieramilanocity 12 ideazione >> mappa concettuale 2 GATTI users curiososocial consumatore contenuti prodotti + foto wiki cerco/offro blog salute curiosità razze notizie/eventi newsletter login carrello prodotto X login login navigo- - mi iscrivo scelgo, acquisto ricevo navig o esploro interagisco partecipo cerco mi iscrivo UTENTI REDATTORI REDATTORI INTERNI classificazione + tag classificazione + navigazione USERS CONTENT Gatti
  13. 13. Milano, 20-22 ottobre - Fieramilanocity 13 ideazione >> personae Carlo Zanetti “Non rinuncio mai alle mie passioni” - 36 anni - Programmatore informatico - Single
  14. 14. Milano, 20-22 ottobre - Fieramilanocity 14 Attributi chiave Basso Alto Sapere ------------------ Esperienza-------------- Fiducia ----------------- Frustrazioni •Mancanza di rete wireless (3G) •Caricamenti lenti •Bassa durata delle batterie •Confusione nel lavoro online Caratteristiche ideali •Abilità a scattare foto •Abilità a caricare foto online (3G/Wifi) •Permettere agli altri di accedere alle sue foto i remoto •Abilità di mettere nome e permettere commenti alle foto Utente neofita Donna, 27 anni single, studente Amanda preferisce imparare sperimentando le cose da sola. Non è preoccupata da eventuali danni. Se ha bisogno di aiuto non usa il manuale ma interviene da sola provando a risolvere il problema. ______________ Necessità •-Condividere foto con i genitori •-Con gli amici •-Con le persone che incontra in viaggio Amanda Rolli Amanda sta per trasferirsi all’estero, i suoi genitori le hanno regalato una macchina fotografica e vogliono essere sicuri che la sappia usare. A lei piace molto la macchina perché sembra avere molte funzioni che le macchine dei suoi amici non hanno. Appena può Amanda la porta con sé e cerca di fermare nelle foto tutto ciò che le scorre davanti. Quando ha un problema non usa il manuale ma chiede agli amici o va al negozio specializzato…. “Adoro essere sempre in contatto con i miei amici” ideazione >> personae 2 Principiante fiduciosa Su di lui.. Matteo ha 45 anni ed è proprietario di una piccola azienda a Milano. Il suo business si focalizza su proge di web marketing. Gran parte del suo tempo lo passa lavorando tra casa e agenzia. I suoi 5 collaboratori so specializzati in progettazione marketing e branding pe nuovi media. Matteo si divide tra i rapporti con i clienti networking e ricerca di nuovi progetti. Il tempo libero lo passa con Laura, sua moglie, e Fab suo figlio di 7 anni… Professione: imprenditore Tipologia azienda: 6 dipendenti Anni: 45 Sede: Milano Formazione: Laurea in ingegneria Stipendio annuo: 80mila euro Matteo Acquaviva Personae primaria socialeshoppingInteressi primari sposataconviventeStato 4839Età sì a casasì a casaFigli 40mila euro35mila euroSalario annuo libera professionistaimpiegata RenataMiranda Personae
  15. 15. Milano, 20-22 ottobre - Fieramilanocity 15 progettazione >> mappa del sito HOME . . . . . . . . . . . . . . . . . . . . .
  16. 16. Milano, 20-22 ottobre - Fieramilanocity 16 progettazione >> mappa del sito 2 HOME FeedbackNewsletter Contatti Giochi e download Video Corsi e seminari EventiProdotti Area esperti Interviste Consigli e suggerimenti
  17. 17. Milano, 20-22 ottobre - Fieramilanocity 17 progettazione >> wireframe Branding e navigazione Servizio Navigazione Intestazione branding Navigazione globale Titolo della pagine e intro Navigazione secondaria Assist. clienti Login Servizio di iscrizione
  18. 18. Milano, 20-22 ottobre - Fieramilanocity 18 progettazione >> wireframe 3{TITOLO PROGETTO} Home | Contattaci | Faq SearchSearch Link | Link | Link | Link Top pagina Navig. Navig. Navig. Navig. Navig. Banner Logo Titolo Titolo TitoloTitoloNews 1 Note 1 2 2 3 3 4 4 5 5 La navigazione principale è composta da 5 macroaree… Il banner ha una funzione di comunicazione. Lancia nuovi progetti… Questa sezione è dedicata alle news che vengono lanciate… Nel footer oltre al copyright e alla private policy troviamo… La colonna di sinistra è dedicata ai progetti che…
  19. 19. Milano, 20-22 ottobre - Fieramilanocity 19 START END 1 abbonamento più abbonamenti vuole Loc. + ID key card + Tipo abb. Es. RM 123456 GN Loc. + ID key card Tipo abb. X n. volte Es. RM 123456 GN 123456 GN… INVIA SMS Ha acquistato entro 30 ottobre Ha acquistato dopo 30 ottobre Tariffa scontata Tariffa piena RICEVE SMS di CONFERMA Commissione carta SI 0,25 Valido come ricevuta d’acquisto da esibire all’entrata valuta a1 a2 a3 a Anna vuole fare un abbonamento al teatro tramite mobile progettazione >> process flow
  20. 20. Milano, 20-22 ottobre - Fieramilanocity 20 progettazione >> doc. con/su gli utenti User group: clienti, designers Obiettivo: navigazione generale della pagina La maggior parte degli utenti punta al menu utilities per muoversi ma ne rimane delusa Il menu apparentemente principale destabilizza i navigatori: non hanno chiaro dove stanno andando (i più agiscono per curiosità) e non capiscono dove finiscono. La natura degli ambienti di atterraggio sono diversi e poco omogenei: blog, pagina web, brochure… Le news e gli eventi portano fuori dal sito mentre i blogs appartengono allo stesso dominio. La maggior parte degli utenti perde il senso della navigazione. Un utente ha provato a navigare con Safari e gli è stato impossibile
  21. 21. Milano, 20-22 ottobre - Fieramilanocity 21 La metà degli utenti ha esitato e perso tempo nel creare da solo un account Frequenza nella rilevazione Alcuni utenti hanno confuso lo zip code dello stato con quello della città La combo propone solo stati USA e il Costa Rica non altri paesi di provenienza, due tester si sono bloccati Il bottone di invio risulta piccolo e troppo a destra, alcuni esitano
  22. 22. Milano, 20-22 ottobre - Fieramilanocity 22 progettazione >> pattern design
  23. 23. Milano, 20-22 ottobre - Fieramilanocity 23 progettazione >> prototipo
  24. 24. Milano, 20-22 ottobre - Fieramilanocity 24 GRAZIE 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.

×