Your SlideShare is downloading. ×
Dall'idea al prototipo: I documenti nelle varie fasi del progetto web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,548

Published on

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

No Downloads
Views
Total Views
2,548
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
93
Comments
0
Likes
5
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. Milano, 20-22 ottobre - Fieramilanocity 1 Dall’idea al prototipo I documenti nelle diverse fasi del progetto web Maria Cristina Lavazza
  • 2. Milano, 20-22 ottobre - Fieramilanocity 2 Ore 9.00 brainstorming… Anna, PM Elena e Francesco, marketing Fiammetta, art director Filippo, IT
  • 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. Milano, 20-22 ottobre - Fieramilanocity 4 Progettiamo per un ecosistema
  • 5. Milano, 20-22 ottobre - Fieramilanocity 5
  • 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. 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. Milano, 20-22 ottobre - Fieramilanocity 8 Ideazione >> ascolto e classifica dei servizi
  • 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. Milano, 20-22 ottobre - Fieramilanocity 10 ideazione >> analisi competitiva Ilmiogatto.com gattomania.co m miglioreamico.it PAGINA PRODOTTO PAGINA INTERNAHOMEPAGE
  • 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. 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. Milano, 20-22 ottobre - Fieramilanocity 13 ideazione >> personae Carlo Zanetti “Non rinuncio mai alle mie passioni” - 36 anni - Programmatore informatico - Single
  • 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. Milano, 20-22 ottobre - Fieramilanocity 15 progettazione >> mappa del sito HOME . . . . . . . . . . . . . . . . . . . . .
  • 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. 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. 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. 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. 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. 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. Milano, 20-22 ottobre - Fieramilanocity 22 progettazione >> pattern design
  • 23. Milano, 20-22 ottobre - Fieramilanocity 23 progettazione >> prototipo
  • 24. Milano, 20-22 ottobre - Fieramilanocity 24 GRAZIE mc.lavazza@gmail.com

×