SlideShare una empresa de Scribd logo
1 de 49
Descargar para leer sin conexión
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
Progettare un sito in 10 mosse
Progettare un sito in 10 mosse
Progettare un sito in 10 mosse
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
Progettare un sito in 10 mosse
Progettare un sito in 10 mosse
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
Progettare un sito in 10 mosse
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
Progettare un sito in 10 mosse
Progettare un sito in 10 mosse
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
Progettare un sito in 10 mosse
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
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
10. Fa’ il wireframe di ogni tipo di pagina
(meglio se in html)
Progettare un sito in 10 mosse
…sui quali si baseranno i moke up grafici
Progettare un sito in 10 mosse
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
Progettare un sito in 10 mosse
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
Twitter
@fedebadaloni
Blog
www.snodi.it
Mail
federico.badaloni@gmail.com
Grazie!

Más contenido relacionado

La actualidad más candente

Prd Product Requirements Document
Prd Product Requirements DocumentPrd Product Requirements Document
Prd Product Requirements DocumentMohammad Mohammadi
 
Better Game Design with Object-Oriented User Experience (OOUX)
Better Game Design with Object-Oriented User Experience (OOUX)Better Game Design with Object-Oriented User Experience (OOUX)
Better Game Design with Object-Oriented User Experience (OOUX)Caroline Sober-James
 
How to Create a Great Product Storyboard in 8 Steps
How to Create a Great Product Storyboard in 8 StepsHow to Create a Great Product Storyboard in 8 Steps
How to Create a Great Product Storyboard in 8 StepsLewis Lin 🦊
 
UXPA 2022 Presenting Your UX Work Using Spontaneous Talks Frameworks
UXPA 2022 Presenting Your UX Work Using Spontaneous Talks FrameworksUXPA 2022 Presenting Your UX Work Using Spontaneous Talks Frameworks
UXPA 2022 Presenting Your UX Work Using Spontaneous Talks FrameworksUXPA International
 
Building your Design A-Team
Building your Design A-TeamBuilding your Design A-Team
Building your Design A-TeamJason Mesut
 
Leadership dancefloor aplicado al trabajo del Scrum Master
Leadership dancefloor aplicado al trabajo del Scrum MasterLeadership dancefloor aplicado al trabajo del Scrum Master
Leadership dancefloor aplicado al trabajo del Scrum MasterAngel Diaz-Maroto
 
6th Grade Research Paper
6th Grade Research Paper 6th Grade Research Paper
6th Grade Research Paper epfund
 
Case study: Lab + Online Usability Testing
Case study: Lab + Online Usability TestingCase study: Lab + Online Usability Testing
Case study: Lab + Online Usability TestingUserZoom
 
Ideation in service design. Ideation methods and tools
Ideation in service design. Ideation methods and toolsIdeation in service design. Ideation methods and tools
Ideation in service design. Ideation methods and toolsKatarzyna Młynarczyk
 
Scaling UX Design
Scaling UX DesignScaling UX Design
Scaling UX DesignUXDXConf
 
User experience. What is it anyway?
User experience. What is it anyway?User experience. What is it anyway?
User experience. What is it anyway?Marilyn Langfeld
 
Hunting Unicorns - What makes an effective UX Professional
Hunting Unicorns - What makes an effective UX ProfessionalHunting Unicorns - What makes an effective UX Professional
Hunting Unicorns - What makes an effective UX ProfessionalPatrick Neeman
 
Provisional Persona Workshop 1.0
Provisional Persona Workshop 1.0Provisional Persona Workshop 1.0
Provisional Persona Workshop 1.0Mo Goltz
 
Information Architecture for Products
Information Architecture for ProductsInformation Architecture for Products
Information Architecture for ProductsAbby Covert
 
Defining Personas, A User Experience Approach
Defining Personas, A User Experience ApproachDefining Personas, A User Experience Approach
Defining Personas, A User Experience ApproachLeon Kadoch Hardie
 
Benchmarking Using SUS
Benchmarking Using SUSBenchmarking Using SUS
Benchmarking Using SUSCake and Arrow
 
Introduction to UX Research: Designing Surveys That Don't Suck!
Introduction to UX Research: Designing Surveys That Don't Suck!Introduction to UX Research: Designing Surveys That Don't Suck!
Introduction to UX Research: Designing Surveys That Don't Suck!William Evans
 
The Double Diamond Model of Product Definition and Execution
The Double Diamond Model of Product Definition and ExecutionThe Double Diamond Model of Product Definition and Execution
The Double Diamond Model of Product Definition and ExecutionPeter Merholz
 

La actualidad más candente (20)

Basics of UX Research
Basics of UX ResearchBasics of UX Research
Basics of UX Research
 
Prd Product Requirements Document
Prd Product Requirements DocumentPrd Product Requirements Document
Prd Product Requirements Document
 
Better Game Design with Object-Oriented User Experience (OOUX)
Better Game Design with Object-Oriented User Experience (OOUX)Better Game Design with Object-Oriented User Experience (OOUX)
Better Game Design with Object-Oriented User Experience (OOUX)
 
Design Sprint
Design SprintDesign Sprint
Design Sprint
 
How to Create a Great Product Storyboard in 8 Steps
How to Create a Great Product Storyboard in 8 StepsHow to Create a Great Product Storyboard in 8 Steps
How to Create a Great Product Storyboard in 8 Steps
 
UXPA 2022 Presenting Your UX Work Using Spontaneous Talks Frameworks
UXPA 2022 Presenting Your UX Work Using Spontaneous Talks FrameworksUXPA 2022 Presenting Your UX Work Using Spontaneous Talks Frameworks
UXPA 2022 Presenting Your UX Work Using Spontaneous Talks Frameworks
 
Building your Design A-Team
Building your Design A-TeamBuilding your Design A-Team
Building your Design A-Team
 
Leadership dancefloor aplicado al trabajo del Scrum Master
Leadership dancefloor aplicado al trabajo del Scrum MasterLeadership dancefloor aplicado al trabajo del Scrum Master
Leadership dancefloor aplicado al trabajo del Scrum Master
 
6th Grade Research Paper
6th Grade Research Paper 6th Grade Research Paper
6th Grade Research Paper
 
Case study: Lab + Online Usability Testing
Case study: Lab + Online Usability TestingCase study: Lab + Online Usability Testing
Case study: Lab + Online Usability Testing
 
Ideation in service design. Ideation methods and tools
Ideation in service design. Ideation methods and toolsIdeation in service design. Ideation methods and tools
Ideation in service design. Ideation methods and tools
 
Scaling UX Design
Scaling UX DesignScaling UX Design
Scaling UX Design
 
User experience. What is it anyway?
User experience. What is it anyway?User experience. What is it anyway?
User experience. What is it anyway?
 
Hunting Unicorns - What makes an effective UX Professional
Hunting Unicorns - What makes an effective UX ProfessionalHunting Unicorns - What makes an effective UX Professional
Hunting Unicorns - What makes an effective UX Professional
 
Provisional Persona Workshop 1.0
Provisional Persona Workshop 1.0Provisional Persona Workshop 1.0
Provisional Persona Workshop 1.0
 
Information Architecture for Products
Information Architecture for ProductsInformation Architecture for Products
Information Architecture for Products
 
Defining Personas, A User Experience Approach
Defining Personas, A User Experience ApproachDefining Personas, A User Experience Approach
Defining Personas, A User Experience Approach
 
Benchmarking Using SUS
Benchmarking Using SUSBenchmarking Using SUS
Benchmarking Using SUS
 
Introduction to UX Research: Designing Surveys That Don't Suck!
Introduction to UX Research: Designing Surveys That Don't Suck!Introduction to UX Research: Designing Surveys That Don't Suck!
Introduction to UX Research: Designing Surveys That Don't Suck!
 
The Double Diamond Model of Product Definition and Execution
The Double Diamond Model of Product Definition and ExecutionThe Double Diamond Model of Product Definition and Execution
The Double Diamond Model of Product Definition and Execution
 

Destacado

Presentazione corso StartMiUp Academy: Introduzione al metodo Agile di sviluppo
Presentazione corso StartMiUp Academy: Introduzione al metodo Agile di sviluppoPresentazione corso StartMiUp Academy: Introduzione al metodo Agile di sviluppo
Presentazione corso StartMiUp Academy: Introduzione al metodo Agile di sviluppoAlessio Bragadini
 
No more 'us and them': How 20 years of digital communications smashed the bou...
No more 'us and them': How 20 years of digital communications smashed the bou...No more 'us and them': How 20 years of digital communications smashed the bou...
No more 'us and them': How 20 years of digital communications smashed the bou...Martin Belam
 
Mapping the Guardian's tags to the web of data
Mapping the Guardian's tags to the web of dataMapping the Guardian's tags to the web of data
Mapping the Guardian's tags to the web of dataMartin Belam
 
Fenomenologia dell'ignoranza digitale
Fenomenologia dell'ignoranza digitaleFenomenologia dell'ignoranza digitale
Fenomenologia dell'ignoranza digitaleFederico Badaloni
 
Usability is dead...
Usability is dead...Usability is dead...
Usability is dead...James Kelway
 
EL PAIS y nuestra propia revolución
EL PAIS y nuestra propia revoluciónEL PAIS y nuestra propia revolución
EL PAIS y nuestra propia revoluciónRaul Rivero
 
framing journalism as a collaborative action
framing journalism as a collaborative actionframing journalism as a collaborative action
framing journalism as a collaborative actionFederico Badaloni
 
Esperienza utente e fruizione dei contenuti nei quotidiani online in Italia.
Esperienza utente e fruizione dei contenuti nei quotidiani online in Italia.Esperienza utente e fruizione dei contenuti nei quotidiani online in Italia.
Esperienza utente e fruizione dei contenuti nei quotidiani online in Italia.Cristiano Rastelli
 
Dalla notizia all'esperienza
Dalla notizia all'esperienzaDalla notizia all'esperienza
Dalla notizia all'esperienzaFederico Badaloni
 
Architettura dell'informazione
Architettura dell'informazioneArchitettura dell'informazione
Architettura dell'informazioneEtnograph
 
Guardian Open Platform Launch Event
Guardian Open Platform Launch EventGuardian Open Platform Launch Event
Guardian Open Platform Launch EventMatt McAlister
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with DataSeth Familian
 
3 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 20173 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 2017Drift
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheLeslie Samuel
 

Destacado (15)

Presentazione corso StartMiUp Academy: Introduzione al metodo Agile di sviluppo
Presentazione corso StartMiUp Academy: Introduzione al metodo Agile di sviluppoPresentazione corso StartMiUp Academy: Introduzione al metodo Agile di sviluppo
Presentazione corso StartMiUp Academy: Introduzione al metodo Agile di sviluppo
 
No more 'us and them': How 20 years of digital communications smashed the bou...
No more 'us and them': How 20 years of digital communications smashed the bou...No more 'us and them': How 20 years of digital communications smashed the bou...
No more 'us and them': How 20 years of digital communications smashed the bou...
 
Mapping the Guardian's tags to the web of data
Mapping the Guardian's tags to the web of dataMapping the Guardian's tags to the web of data
Mapping the Guardian's tags to the web of data
 
Incontrarsi
IncontrarsiIncontrarsi
Incontrarsi
 
Fenomenologia dell'ignoranza digitale
Fenomenologia dell'ignoranza digitaleFenomenologia dell'ignoranza digitale
Fenomenologia dell'ignoranza digitale
 
Usability is dead...
Usability is dead...Usability is dead...
Usability is dead...
 
EL PAIS y nuestra propia revolución
EL PAIS y nuestra propia revoluciónEL PAIS y nuestra propia revolución
EL PAIS y nuestra propia revolución
 
framing journalism as a collaborative action
framing journalism as a collaborative actionframing journalism as a collaborative action
framing journalism as a collaborative action
 
Esperienza utente e fruizione dei contenuti nei quotidiani online in Italia.
Esperienza utente e fruizione dei contenuti nei quotidiani online in Italia.Esperienza utente e fruizione dei contenuti nei quotidiani online in Italia.
Esperienza utente e fruizione dei contenuti nei quotidiani online in Italia.
 
Dalla notizia all'esperienza
Dalla notizia all'esperienzaDalla notizia all'esperienza
Dalla notizia all'esperienza
 
Architettura dell'informazione
Architettura dell'informazioneArchitettura dell'informazione
Architettura dell'informazione
 
Guardian Open Platform Launch Event
Guardian Open Platform Launch EventGuardian Open Platform Launch Event
Guardian Open Platform Launch Event
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
 
3 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 20173 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 2017
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your Niche
 

Similar a Progettare un sito in 10 mosse

"Dall'informazione all’esperienza” - Federico Badaloni
"Dall'informazione all’esperienza” - Federico Badaloni"Dall'informazione all’esperienza” - Federico Badaloni
"Dall'informazione all’esperienza” - Federico Badaloninois3
 
Build a LINQ-enabled Repository
Build a LINQ-enabled RepositoryBuild a LINQ-enabled Repository
Build a LINQ-enabled RepositoryAndrea Saltarello
 
Duccio Schiavon - Information Design: Visualizzazione di Informazioni Quantit...
Duccio Schiavon - Information Design: Visualizzazione di Informazioni Quantit...Duccio Schiavon - Information Design: Visualizzazione di Informazioni Quantit...
Duccio Schiavon - Information Design: Visualizzazione di Informazioni Quantit...Social Media Lab
 
Elementi di Architettura dell'Informazione, Usabilità e Scrittura per il Web
Elementi di Architettura dell'Informazione, Usabilità e Scrittura per il WebElementi di Architettura dell'Informazione, Usabilità e Scrittura per il Web
Elementi di Architettura dell'Informazione, Usabilità e Scrittura per il WebAlberto Rota
 
Never Mind the Bollocks: here's the Domain Driven Design
Never Mind the Bollocks: here's the Domain Driven DesignNever Mind the Bollocks: here's the Domain Driven Design
Never Mind the Bollocks: here's the Domain Driven DesignAndrea Saltarello
 
Architettura delle informazioni con eZ publish
Architettura delle informazioni con eZ publishArchitettura delle informazioni con eZ publish
Architettura delle informazioni con eZ publishAlberto Mucignat
 
What is new in C# 2018
What is new in C# 2018What is new in C# 2018
What is new in C# 2018Marco Parenzan
 
Ricostruire le famiglie editoriali: FRBR per la storia delle case editrici at...
Ricostruire le famiglie editoriali: FRBR per la storia delle case editrici at...Ricostruire le famiglie editoriali: FRBR per la storia delle case editrici at...
Ricostruire le famiglie editoriali: FRBR per la storia delle case editrici at...Salvatore Vassallo
 
How I did it (in .NET): idiomatic Domain Driven Design
How I did it (in .NET): idiomatic Domain Driven DesignHow I did it (in .NET): idiomatic Domain Driven Design
How I did it (in .NET): idiomatic Domain Driven DesignAndrea Saltarello
 

Similar a Progettare un sito in 10 mosse (11)

"Dall'informazione all’esperienza” - Federico Badaloni
"Dall'informazione all’esperienza” - Federico Badaloni"Dall'informazione all’esperienza” - Federico Badaloni
"Dall'informazione all’esperienza” - Federico Badaloni
 
Build a LINQ-enabled Repository
Build a LINQ-enabled RepositoryBuild a LINQ-enabled Repository
Build a LINQ-enabled Repository
 
Duccio Schiavon - Information Design: Visualizzazione di Informazioni Quantit...
Duccio Schiavon - Information Design: Visualizzazione di Informazioni Quantit...Duccio Schiavon - Information Design: Visualizzazione di Informazioni Quantit...
Duccio Schiavon - Information Design: Visualizzazione di Informazioni Quantit...
 
Elementi di Architettura dell'Informazione, Usabilità e Scrittura per il Web
Elementi di Architettura dell'Informazione, Usabilità e Scrittura per il WebElementi di Architettura dell'Informazione, Usabilità e Scrittura per il Web
Elementi di Architettura dell'Informazione, Usabilità e Scrittura per il Web
 
Never Mind the Bollocks: here's the Domain Driven Design
Never Mind the Bollocks: here's the Domain Driven DesignNever Mind the Bollocks: here's the Domain Driven Design
Never Mind the Bollocks: here's the Domain Driven Design
 
Architettura delle informazioni con eZ publish
Architettura delle informazioni con eZ publishArchitettura delle informazioni con eZ publish
Architettura delle informazioni con eZ publish
 
What is new in C# 2018
What is new in C# 2018What is new in C# 2018
What is new in C# 2018
 
Ricostruire le famiglie editoriali: FRBR per la storia delle case editrici at...
Ricostruire le famiglie editoriali: FRBR per la storia delle case editrici at...Ricostruire le famiglie editoriali: FRBR per la storia delle case editrici at...
Ricostruire le famiglie editoriali: FRBR per la storia delle case editrici at...
 
How I did it (in .NET): idiomatic Domain Driven Design
How I did it (in .NET): idiomatic Domain Driven DesignHow I did it (in .NET): idiomatic Domain Driven Design
How I did it (in .NET): idiomatic Domain Driven Design
 
Modelli concettuali e architetture Object-Oriented per la progettazione e lo ...
Modelli concettuali e architetture Object-Oriented per la progettazione e lo ...Modelli concettuali e architetture Object-Oriented per la progettazione e lo ...
Modelli concettuali e architetture Object-Oriented per la progettazione e lo ...
 
Mnemos
MnemosMnemos
Mnemos
 

Progettare un sito in 10 mosse

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