Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

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

on

  • 2,788 views

 

Statistics

Views

Total Views
2,788
Views on SlideShare
2,646
Embed Views
142

Actions

Likes
4
Downloads
86
Comments
0

5 Embeds 142

http://www.smau.it 130
http://www.expocomm.it 5
http://future.smau.it 3
http://www.linkedin.com 3
https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. Dall’idea al prototipo I documenti nelle diverse fasi del progetto web Maria Cristina Lavazza
  • 2. Ore 9.00 brainstorming… Anna, PM Elena e Francesco, marketing Fiammetta, art director Filippo, IT
  • 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 Concept model Usability Plan Usability report Content inventory Def. Personas Site map Wireframes 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. Progettiamo per un ecosistema
  • 5.  
  • 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 Prototipo Wireframe
  • 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. Ideazione >> ascolto e classifica dei servizi
  • 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 categorie assistenza prodotti NAVIGAZIONE PRODOTTO carrello informazioni consegna informazioni fattura conferma opzioni regalo nuovo account PROCESSO DI ACQUISTO
  • 10. ideazione >> analisi competitiva Ilmiogatto.com gattomania.com miglioreamico.it PAGINA PRODOTTO PAGINA INTERNA HOMEPAGE
  • 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. ideazione >> mappa concettuale 2 GATTI users curioso social 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 navigo esploro interagisco partecipo cerco mi iscrivo UTENTI REDATTORI REDATTORI INTERNI classificazione + tag classificazione + navigazione USERS CONTENT Gatti
  • 13. ideazione >> personae Carlo Zanetti “ Non rinuncio mai alle mie passioni ” - 36 anni - Programmatore informatico - Single
  • 14. 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 progetti di web marketing. Gran parte del suo tempo lo passa lavorando tra casa e agenzia. I suoi 5 collaboratori sono specializzati in progettazione marketing e branding per i 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 Fabio 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 sociale shopping Interessi primari sposata convivente Stato 48 39 Età sì a casa sì a casa Figli 40mila euro 35mila euro Salario annuo libera professionista impiegata Renata Miranda Personae 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, student e
    • 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 ”
  • 15. progettazione >> mappa del sito HOME . . . . . . . . . . . . . . . . . . . . .
  • 16. progettazione >> mappa del sito 2 HOME Feedback Newsletter Contatti Giochi e download Video Corsi e seminari Eventi Prodotti Area esperti Interviste Consigli e suggerimenti
  • 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. progettazione >> wireframe 3 { TITOLO PROGETTO } Home | Contattaci | Faq Search Search Link | Link | Link | Link Top pagina Navig. Navig. Navig. Navig. Navig. Banner Logo Titolo Titolo Titolo Titolo News 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 i 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. progettazione >> process flow START END 1 abbonamento più abbonamenti vuole Loc. + ID key card + Tipoabb. Es . RM 123456 GN Loc. + ID key card Tipoabb. 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 a 1 a2 a 3 a Anna vuole fare un abbonamento al teatro tramite mobile
  • 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. 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. progettazione >> pattern design
  • 23. progettazione >> prototipo
  • 24. GRAZIE [email_address]