Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progettare un sito in 10 mosse

4,653 views

Published on

Come progettare un sito rapidamente e bene concentrandosi sulle funzioni narrative e strutturali.

Published in: Internet

Progettare un sito in 10 mosse

  1. 1. Come creare un sito in 10 mosse Federico Badaloni @fedebadaloni
  2. 2. Architettura dell’Informazione • è il collante fra i contesti dell’interazione uomo/informazione • adatta le informazioni ai contesti • progetta i processi dell’interazione
  3. 3. "IA è garantire l'integrità strutturale del significato nei diversi contesti" (J. Arango)
  4. 4. La homepage non è il portale
  5. 5. Report interno NYT 2014
  6. 6. conseguenza #1 Ogni pagina è un “portale” ● in che ambiente mi trovo? ● perché questo contenuto si trova in questo ambiente? ● quali altri contenuti posso trovare sullo stesso tema? ● quali altri contenuti ci sono in questo ambiente? ● chi lavora qui? ● perché lo fa? ● come faccio a contattarli? ● (...)
  7. 7. conseguenza #2 Cambia il ruolo dei menu
  8. 8. conseguenza #3 Un sito è un insieme di funzioni narrative e strutturali ● Narrative (abilitano la comprensione, come “raccontare una storia”, “raccontare il contesto”, “mostrare altri contenuti sullo stesso tema”...) ● Strutturali (abilitano un’azione, come “commentare”, “loggarsi”, “stampare”...)
  9. 9. La progettazione funzionale
  10. 10. Una funzione per l’intero sito Una funzione per ogni pagina Una funzione per ogni zona di una pagina
  11. 11. 1 Trova la funzione per l’intero sito: Raccontare la Prima Guerra Mondiale attraverso i diari dei soldati e dei civili
  12. 12. 2. Mappa i contenuti - Fa’ la lista di tutti i contenuti disponibili (content inventory) - Suddividili secondo la forma (intesa come “formato” e come tipo di fruizione) - Quali strumenti tecnologici abbiamo a disposizione? (si possono creare nuovi content types? se ne può modificare la struttura? si possono creare categorie? si possono utilizzare tag? si possono gestire attraverso un pannello di controllo? eccetera) 3. Mappa l’ecosistema tecnologico
  13. 13. Le funzioni narrative nascono dai bisogni degli utenti!
  14. 14. 4 Mostrare obiettivo e contenuti del sito Mostrare la lista dei temi trattati Mostrare la lista degli eventi bellici Mostrare la lista degli autori Mostrare la lista degli estratti Mostrare un estratto Mostrare la scheda autore Mostrare la lista degli estratti associati a un tema Mostrare la lista degli estratti associati a un evento Crea l’alberatura (una funzione per pagina) Esempio: il sito della Grande Guerra
  15. 15. 5. Definisci gli attributi degli elementi narrativi di base
  16. 16. Temi: Granularità Univocità Destinazione d'uso Usabilità Scalabilità
  17. 17. 6. Definisci le classi necessarie
  18. 18. Quanti tipi di classi si possono usare? 4
  19. 19. In base alla caratteristica dell’arco in un grafo http://espresso.repubblica.it/grandeguerra/index.php?page=autore&id=1 Estrarre tutti gli “Estratti” associati a un medesimo “Autore” Autore Estratto Estratto Estratto Esempio: il sito della Grande Guerra
  20. 20. In base a una caratteristica del nodo Estrarre gli “Estratti” che si riferiscono allo stesso luogo Estratto (attributo x) Estratto (attributo x) Estratto (attributo x) Estratto (attributo x) Esempio: il sito della Grande Guerra http://espresso.repubblica.it/grandeguerra/index.p hp?page=estratto&id=1
  21. 21. In base alla natura del nodo Estrarre tutti i tipi di contenuto “Autore” http://espresso.repubblica.it/grandeguerra/index.php?page=autori Autore Autore Autore Autore Esempio: il sito della Grande Guerra
  22. 22. In base ad un criterio esterno Estrarre tutti gli “Estratti” più condivisi http://espresso.repubblica.it/grandeguerra/index.php?page=estratto&id=237 Criterio ESTRATTO ESTRATTO ESTRATTO Esempio: il sito della Grande Guerra
  23. 23. 7. Fa’ la matrice tassonomica attributo x attributo y (...) C. T. 1 C. T. 2 C. T. 3 (...) ● Classi Secondarie (ottenute per intersezione) ● Classi Primarie
  24. 24. 8. Fa’ la mappa funzionale di ogni pagina (una zona, una sola funzione)
  25. 25. Dare informazioni generali sul sito Raccontare un estratto Mostrare il luogo dell’estratto Mostrare estratti che trattano gli stessi temi Mostrare altri estratti dello stesso autore Mostrare gli estratti sugli stessi luoghi Condividere Breadcrumb Navigazione attiva
  26. 26. 21 Marcia J. Bates http://ptarpp2.uitm.edu.my/silibus/TOWARDANINTEGRATEDMODEL.pdf
  27. 27. 9. Associa le funzioni alle classi ClassiFunzioni Raccontare un estratto dell’autore Mostrare il luogo a cui si riferisce lo scritto Mostrare gli estratti dello stesso autore Mostrare gli estratti più condivisi Mostrare gli estratti che trattano gli stessi temi Raccontare un estratto dell’autore Mostrare il luogo a cui si riferisce lo scritto Estrarre tutti i valori presenti in uno specifico content type “Autore” Mostrare altri estratti che sono stati associati agli stessi C.T. di tipo “tema” Mostrare altri C.T. “Estratti” associati al medesimo C.T. “Autore” Mostrare altri C.T. “Estratti” in base alla frequenza della condivisione Mostrare su mappa i valori long/lat presenti nello specifico C.T. Esempio: il sito della Grande Guerra
  28. 28. 10. Fa’ il wireframe di ogni tipo di pagina (meglio se in html)
  29. 29. …sui quali si baseranno i moke up grafici
  30. 30. Riepiloghiamo! ● Mappa le funzioni narrative e strutturali di cui hai necessità (in base alla user needs list) Funzione X Funzione Y Funzioni Struttura Funzione X Funzione Y Associazione struttura-funzioni ● Mappa le classi di cui hai necessità ● Definisci Alberatura e Mappe funzionali associando le classi alle funzioni ● Crea i wireframe in cui si definiscono i valori da estrarre per ogni elemento della struttura Testo Testo Testo Testo Testo Testo Testo Testo Creazione wireframe ● Realizza la matrice tassonomica (struttura)
  31. 31. linearizza le funzioni narrative e strutturali per il mobile
  32. 32. Testare Testare Testare Testare Testare Testare Testare Testare
  33. 33. Ogni sito ha una funzione narrativa complessiva Domandati "a cosa serve" il tuo sito Se la risposta non sta in una frase, preoccupati
  34. 34. Ogni tipo di pagina del tuo sito una funzione narrativa complessiva Domandati "a cosa serve" ogni tipo Se la risposta non sta in una frase, preoccupati
  35. 35. La homepage è la pagina per gli utenti che tornano su un sito dopo averne scoperto un contenuto di dettaglio grazie a un link postato in un social network Fa' la lista dei motivi per cui dovrebbero farlo: quei motivi sono gli ingredienti della home
  36. 36. Gli utenti si suddividono in due polarità: lean forward e lean back Suddividi le funzioni narrative del tuo sito secondo questi insiemi e controlla che siano bilanciati Fa' in modo che in ogni pagina ci sia una componente per ogni insieme
  37. 37. Twitter @fedebadaloni Blog www.snodi.it Mail federico.badaloni@gmail.com Grazie!

×