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

1. Come creare un sito in 10 mosse
Federico Badaloni
@fedebadaloni

2. Architettura
dell’Informazione
• è il collante fra i contesti dell’interazione uomo/informazione
• adatta le informazioni ai contesti
• progetta i processi dell’interazione

3. "IA è garantire
l'integrità strutturale del significato
nei diversi contesti"
(J. Arango)

4. La homepage non è il portale

8. Report interno NYT 2014

9. 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?
● (...)

10. conseguenza #2
Cambia il ruolo dei menu

13. 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”...)

14. La progettazione funzionale

15. Una funzione per l’intero sito
Una funzione per ogni pagina
Una funzione per ogni zona di una pagina

17. 1 Trova la funzione per l’intero sito:
Raccontare la Prima Guerra Mondiale
attraverso i diari dei soldati e dei civili

18. 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

21. Le funzioni narrative nascono dai bisogni degli utenti!

22. 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

23. 5. Definisci gli attributi degli elementi narrativi di base

25. Temi:
Granularità
Univocità
Destinazione d'uso
Usabilità
Scalabilità

26. 6. Definisci le classi necessarie

27. Quanti tipi di classi si possono usare?
4

28. 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

29. 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

30. 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

31. 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

32. 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

33. 8. Fa’ la mappa funzionale di ogni pagina
(una zona, una sola funzione)

34. 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

35. 21
Marcia J. Bates http://ptarpp2.uitm.edu.my/silibus/TOWARDANINTEGRATEDMODEL.pdf

36. 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

37. 10. Fa’ il wireframe di ogni tipo di pagina
(meglio se in html)

39. …sui quali si baseranno i moke up grafici

41. 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)

42. linearizza le funzioni narrative e strutturali per il mobile

43. Testare
Testare
Testare
Testare
Testare
Testare
Testare
Testare

45. Ogni sito ha una funzione narrativa complessiva
Domandati "a cosa serve" il tuo sito
Se la risposta non sta in una frase, preoccupati

46. 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

47. 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

48. 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

49. Twitter
@fedebadaloni
Blog
www.snodi.it
Mail
federico.badaloni@gmail.com
Grazie!