Come stare in rete e come non starci... Un piccolo elementare compendio.

1. Anatomia dei siti... alla griglia
18/10/2011
prof. Carlo Frinolli

2. Ma prima...
Domande? Chiarimenti? Ansie? Paure? Angosce?
(tanto poi correggiamo i compiti!)

3. OGGI
• Anatomia di un sito
• I vari tipi di presenze in rete
• Raccontare una storia, in digitale
• Come si può navigare... senza una mappa?
• Ora che sappiamo cos’è proviamo a cucinarlo alla
griglia

4. Come potete stare in rete? 1/2
• Una pagina statica - nessuna interazione prevista
• Si aggiorna con poca frequenza, perché è doloroso e
costoso farlo (implica cambiarne il codice ogni volta)
• Un sito completo statico - nessuna interazione
prevista - variante Flash
• presentazione o showcase di propri lavori
• presentazione di una realtà (gruppo, associazione)
• Un blog personale (un’azione primaria - interazione
tramite commenti)
• piattaforme sociali come blogspot o Tumblr hai più o
meno libertà di movimento
• wordpress.com o self hosted: molta più libertà di
movimento e di personalizzazione

5. Come potete stare in rete? 2/2
• Un sito di news online - interazione tramite commenti o buzz
via social network (interazione indiretta)
• testate online (attualità o non)
• zine di settore (fanzine, magazine, etc) tv e/o radio
• Un portale
• un insieme complesso di feature
• tante azioni richieste all’utente
• Un e-commerce
• tante possibili feature un’unica possibile azione: acquisto da
parte dell’utente
• Un account su qualche social network
• sei “ospite” e hai un set di azioni possibili che riguardano lo
strumento: Twitter, Facebook, Netlog...

6. NON ESISTE
IL MODO MIGLIORE
DI STARE IN RETE

7. Pagina statica
http://www.w3.org/History/19921103-hypertext/
hypertext/WWW/TheProject.html
Le pagine statiche non sono cambiate molto.
Si è aggiunta presentazione (CSS), strutture complesse,
data visualization, ma la sostanza è la stessa.
Tanta informazione scritta da consumare
E DA AGGIORNARE!
Il Cliente vi paga sia l’idea, che la redazione del contenuto,
ma anche la scrittura del codice ed eventualmente del CSS
Obiettivo principale: informare e divulgare

8. Sito statico
Il sito statico è una versione agli steroidi della pagina
statica.
Ha la stessa composizione e complessità della pagina
statica moltiplicata per il numero di pagine che lo
compongono.
Introduce il concetto di Mappa del sito
Alla fine degli anni ’90 inizi del 2000 un’alternativa
d’effetto erano i siti in Flash, ancora in voga (http://
www.thefwa.com)
Il Cliente vi paga per tutto il lavoro di redazione ed
eventualmente di aggiornamento. Dipende da voi per tutto.
Obiettivo principale: informare e/o attrarre

9. Blog personale
Ha rappresentato il primo passaggio all’era del web 2.0. Le persone hanno
smesso di dipendere da un HTMLista per aggiornare il proprio sito web, e
hanno cominciato a scrivere i propri pensieri direttamente.
Ha un principio di organizzazione duplice:
• temporale (dal più recente al più vecchio come un diario)
• per categorie o tag
http://blog.ismaelburciaga.com/
http://adii.me/
http://colly.com/
La metafora è appunto quella del Diaro personale - Weblog
L’azione richiesta all’editor è la scrittura di post, al visitatore di lasciare
commenti
Obiettivo principale: stabilire una connessione 1 a molti e aprire una
conversazione con essi

10. Sito di notizie / Magazine
Ha un carattere più editoriale, non esiste solo il criterio temporale o di
categoria ma anche il concetto di priorità e importanza editoriale.
Assomiglia a una prima pagina di quotidiano o a una rivista cartacea, da cui
prende in prestito le metafore.
http://www.repubblica.it/
http://www.corriere.it
http://www.nytimes.com/
http://www.cnn.com/
È tipicamente tenuto in piedi da un team di persone, tra editor, creativi, sviluppatori,
sistemisti che gestiscono un sistema di Content Management molto complesso
A volte è possibile interagire con i quotidiani commentando le notizie, altre volte
l’interazione è mediata da strumenti terzi.
Obiettivo principale: informare

11. Portale
È un oggetto editoriale misto.
A differenza di blog, e news website, include dentro di sé molti tipi di
contenuto diversi tra loro.
Può includere articoli, eventi, post di forum, fotografie, video etc.
http://www.italia.it/en/home.html osceno :)
http://www.city-maps.it
http://www.iamsterdam.com/
http://www.visitnorway.com/it
L’utente è per lo più bombardato di informazioni e può interagire in
maniera moderata con essi.
Obiettivo principale: informare e divulgare

12. E-Commerce
Ha il primario obiettivo di convertire una visita in un
acquisto.
Utilizzano le metafore della vetrina e dell’emulazione
sociale (chi ha comprato questo ha anche comprato...)
Fanno leva sull’acquisto di impulso (!) e sulla via più veloce
di portarti alla cassa, passando per un percorso obbligato: il
labirinto degli accessori di Ikea in versione semplificata.
www.etsy.com
www.threadless.com
www.apple.com/it/store
Obiettivo principale: vendere

13. Social media account
Gli utenti utilizzano la piattaforma per connettersi con
altri, aggiornare la propria rete con quello che stanno
facendo, aggiungere foto e commenti.
Slegano completamente il concetto di piattaforma e di
risultato visuale dal contenuto informativo.
Esiste un ordine cronologico inverso (dal più recente) e le
azioni richieste sono molteplici (engagement) - add to friend,
follow, commenti, post sul wall, retweet, reshare, +1 - like...

14. I Mash-up
Un’altra interessante tendenza del web cosidetto 2.0 è
quella del miscuglio e ricombinazione di tutti gli
ingredienti/paradigmi tra loro, creando nuovi strumenti
con funzionalità simili o consistenti tra loro.
Si creano dunque MASH-UP di strumenti che generano
strumenti altri.
Ad esempio Foursquare è stato utilizzato come
paradigma per creare Facebook Places (quasi già fallito),
oppure Google+ ha mutuato concetti da Twitter e da
Facebook.

15. E IO QUALE SCELGO?

16. Studia il tuo obiettivo
Che cosa vuoi comunicare? -> Contenuto
A chi vuoi comunicare? -> Target audience
Quali sono le metafore più efficaci?
Qual è storia vuoi raccontare con il tuo contenuto?

17. Anatomia di un sito web
Una presenza web è composta da molti ingredienti
• concept
• user experience design (UX)
• information architecture (wireframing, mappa del
sito) (IA)
• art direction e content design
Solo quando questi ingredienti sono definiti ha
senso scegliere la forma e le tecniche adatte per
realizzare la vostra soluzione web.

18. La UX
(no, non vi spaventate.)

19. User Experience Design
Come tutti i prodotti da USARE, questi possono essere
“calati” dall’alto, secondo la sensibilità di chi li progetta,
oppure forgiati per le esigenze di chi li deve usare.
Questa definizione è volutamente vaga, e ambigua
perché questo non è un corso di UX.
Ma produrre un sito, e farlo navigare significa indurre
un’esperienza di navigazione per l’utente.
Progettarla per facilitargli il compito (una soluzione che
viene giudicata più facile non è necessariamente la più
avanzata tecnicamente o la più complessa oppure la più
accattivante dal punto di vista visuale, tutt’altro!)
significa aumentare l’impatto del proprio lavoro
sull’utente.

20. Fare un lungo discorso
o raccontare una storia?
http://bit.ly/rjwPUN

21. Riuscireste a navigare
senza bussola?
http://bit.ly/ARL8u

22. La mappa del sito
Progettare un buon prodotto web significa innanzitutto
aiutare l’utente a trovarsi nel punto giusto, sapendo
dove sta, perché è arrivato li, e come può tornare
indietro.
Produrre una mappa del sito come primissimo dei
documenti significa per voi organizzare le idee, i
contenuti e le aree del sito, stabilendone gerarchie e
priorità.
Sembra difficile. Ma non somiglia a un’indice del libro?

23. Esempio di mappa del sito
Home
L'evento Programma Sponsor Partecipa Contatti
• HOME PAGE
• L’evento
• Programma
• Sponsor
• Partecipa
• Contatti
• per casa create una mappa del sito a partire dalla lista puntata
che vi troverete nella casella di posta mercoledì pomeriggio.

24. È l’ora del barbecue!

25. Il layout pesante...
... non si digerisce

26. I suoi problemi
È grasso, poco digeribile
Non ha struttura, consistenza e ripetibilità all’occhio
Favorisce la pesantezza post-prandiale
(la pennichella in ufficio fa brutto)

27. Proviamo a cuocerlo...
...alla Griglia

28. Le griglie tipografiche e il Web
L’occhio ha familiarità con strutture ripetute e
consistenti.
In fotografia si usa la “regola dei terzi” per le
inquadrature.
La sezione aurea fa parte della storia delle “arti visive” e
della matematica

29. La regola dei terzi

30. La sezione aurea
1,618 circa, si ahimé è Matematica...

31. Consistenza, replicabilità e
digeribilità
Utilizzare strutture con proporzioni armoniche rende
digeribili e consistenti i layout grafici.

32. Le griglie tipografiche
Il principio è semplice:
dividere lo spazio disponibile in moduli ripetuti (colonne o
grid).
http://bit.ly/qzTywG

33. Correggiamo i compiti!