Anatomia dei siti... alla griglia

18/10/2011prof. Carlo Frinolli

Ma prima...

Domande? Chiarimenti? Ansie? Paure? Angosce?

(tanto poi correggiamo i compiti!)

• 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

OGGI

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

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

NON ESISTE IL MODO MIGLIORE DI STARE IN RETE

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 consumareE 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

Sito staticoIl 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

Blog personaleHa 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

Sito di notizie / MagazineHa 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

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

E-CommerceHa 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

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

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.

E IO QUALE SCELGO?

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?

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.

La UX(no, non vi spaventate.)

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.

Fare un lungo discorso o raccontare una storia?

http://bit.ly/rjwPUN

Riuscireste a navigare senza bussola?

http://bit.ly/ARL8u

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?

Esempio di mappa del sito

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

Home

L'evento Programma Sponsor Partecipa Contatti

È l’ora del barbecue!

Il layout pesante...

... non si digerisce

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)

Proviamo a cuocerlo... ...alla Griglia

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

La regola dei terzi

La sezione aurea1,618 circa, si ahimé è Matematica...

Consistenza, replicabilità e digeribilità

Utilizzare strutture con proporzioni armoniche rende digeribili e consistenti i layout grafici.

Le griglie tipograficheIl principio è semplice:

dividere lo spazio disponibile in moduli ripetuti (colonne o grid).

http://bit.ly/qzTywG

Correggiamo i compiti!