System is processing data
Please download to view
...

Progettare un sito in 10 mosse

by federico-badaloni

on

Report

Category:

Internet

Download: 1

Comment: 0

2,311

views

Comments

Description

Come progettare un sito rapidamente e bene concentrandosi sulle funzioni narrative e strutturali.
Download Progettare un sito in 10 mosse

Transcript

  • 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
  • 5. Report interno NYT 2014
  • 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. conseguenza #2 Cambia il ruolo dei menu
  • 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. La progettazione funzionale
  • 10. Una funzione per l’intero sito Una funzione per ogni pagina Una funzione per ogni zona di una pagina
  • 11. 1 Trova la funzione per l’intero sito: Raccontare la Prima Guerra Mondiale attraverso i diari dei soldati e dei civili
  • 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. Le funzioni narrative nascono dai bisogni degli utenti!
  • 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. 5. Definisci gli attributi degli elementi narrativi di base
  • 16. Temi: Granularità Univocità Destinazione d'uso Usabilità Scalabilità
  • 17. 6. Definisci le classi necessarie
  • 18. Quanti tipi di classi si possono usare? 4
  • 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. 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. 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. 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. 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. 8. Fa’ la mappa funzionale di ogni pagina (una zona, una sola funzione)
  • 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. 21 Marcia J. Bates http://ptarpp2.uitm.edu.my/silibus/TOWARDANINTEGRATEDMODEL.pdf
  • 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. 10. Fa’ il wireframe di ogni tipo di pagina (meglio se in html)
  • 29. …sui quali si baseranno i moke up grafici
  • 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. linearizza le funzioni narrative e strutturali per il mobile
  • 32. Testare Testare Testare Testare Testare Testare Testare Testare
  • 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. 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. 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. 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. Twitter @fedebadaloni Blog www.snodi.it Mail federico.badaloni@gmail.com Grazie!
  • Fly UP