Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito
Progettare un sito in 10 mosse
49
Come creare un sito in 10 mosse Federico Badaloni @fedebadaloni
-
Upload
federico-badaloni -
Category
Internet
-
view
2.324 -
download
3
description
Come progettare un sito rapidamente e bene concentrandosi sulle funzioni narrative e strutturali.
Transcript of Progettare un sito in 10 mosse
Come creare un sito in 10 mosse
Federico Badaloni
@fedebadaloni
Architettura dell’Informazione
• è il collante fra i contesti dell’interazione uomo/informazione
• adatta le informazioni ai contesti
• progetta i processi dell’interazione
"IA è garantire
l'integrità strutturale del significato
nei diversi contesti"
(J. Arango)
La homepage non è il portale
Report interno NYT 2014
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?
● (...)
conseguenza #2
Cambia il ruolo dei menu
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”...)
La progettazione funzionale
Una funzione per l’intero sito
Una funzione per ogni pagina
Una funzione per ogni zona di una pagina
1 Trova la funzione per l’intero sito:
Raccontare la Prima Guerra Mondiale
attraverso i diari dei soldati e dei civili
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
Le funzioni narrative nascono dai bisogni degli utenti!
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
5. Definisci gli attributi degli elementi narrativi di base
Temi:
Granularità
Univocità
Destinazione d'uso
Usabilità
Scalabilità
6. Definisci le classi necessarie
Quanti tipi di classi si possono usare?
4
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
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
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
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
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
8. Fa’ la mappa funzionale di ogni pagina(una zona, una sola funzione)
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
21
Marcia J. Bates http://ptarpp2.uitm.edu.my/silibus/TOWARDANINTEGRATEDMODEL.pdf
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
temiRaccontare 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
10. Fa’ il wireframe di ogni tipo di pagina(meglio se in html)
…sui quali si baseranno i moke up grafici
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)
linearizza le funzioni narrative e strutturali per il mobile
Testare
Testare
Testare
Testare
Testare
Testare
Testare
Testare
Ogni sito ha una funzione narrativa complessiva
Domandati "a cosa serve" il tuo sito
Se la risposta non sta in una frase, preoccupati
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
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
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
