Esperienza utente e fruizione dei contenuti nei quotidiani online in Italia.

Esperienza utente e fruizione
dei contenuti nei
quotidiani online in Italia.

IA Summit – 7-8 maggio 2010 @ Pisa

Chi sono
➜ Cristiano Rastelli (Area Web)
➜ mi occupo di web design+development
➜ alcuni anni fa ho cominciato ad 
appassionarmi di AI, UX/UCD e agilità

Come nasce questo talk
➜ sono un lettore del quotidiano “Il Foglio”
➜ da due anni mi occupo del loro sito web
➜ vorrei condividere con voi la mia 
esperienza e alcune riflessioni su di essa

Lo stato del sito... 14 gennaio 2008

Lo stato del sito... 25 gennaio 2008

Una chiamata inattesa... 29 gennaio 2008

➜ Telefonata di Giuliano Ferrara, direttore 
del Foglio Quotidiano:

“ Te la senti di realizzare il sito 
del Foglio.it in 15 giorni?”

Le mie condizioni
➜ suddividere il lavoro in diverse fasi su cui 
poter fare iterazioni successive
➜ adottare strumenti di comunicazione che 
permettessero di lavorare da remoto 
➜ utilizzare strumenti di prototipazione 
rapida per la definizione delle pagine

Brainstorming 31 gennaio 2008

Paper prototyping 1 febbraio 2008

Wireframing 2 febbraio 2008

BANNER

BANNER
FOGLIO BLOG DOCUMENTO DIVERTIMENTO LETTORE

FOGLIO BLOG DOCUMENTO DIVERTIMENTO LETTORE DIRETTORE
Ultimi aggiornamenti del sito

iniziativa speciale
Lorem ipsum dolor sit amet
(o in evidenza)
La spiegazione Ultimi aggiornamenti del sito
Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy
eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat. Et
harumd dereud facilis est er expedit distinct. Nam liber a tempor cum soluta
Lorem ipsum dolor sit amet nobis eligend optio comque nihil quod a impedit anim id quod maxim placeat

iniziativa speciale
facer possim omnis es voluptas assumenda est, omnis dolor repellend. Tempo-
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet rem autem quinsud et aur office debit aut tum rerum necesit atib saepe eveniet

(o in evidenza)
adipscing elit, sed diam nonnumy eius- ut er repudiand sint et molestia non este recusand.
mod tempor incidunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipscing elit, sed
magna aliquam erat volupat. diam nonnumy eiusmod tempor incidunt ut labore et dolore Vai all’approfondimento >> BANNER
Continue >> magna aliquam erat volupat. Et harumd dereud facilis est er
Consectetur adipscing elit
expedit distinct. Nam liber a tempor cum soluta nobis
eligend optio comque nihil quod a impedit anim id quod Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy
maxim placeat facer possim omnis es voluptas assumenda harumd dereud facilis est er expedit distinct.

Chi è chi est, omnis dolor repellend. Lorem ipsum dolor >> La spiegazione
Vai all’approfondimento >>
Giulio Meotti Sed diam nonnumy eiusmod Lorem ipsum dolor sit amet, consectetur
BANNER adipscing elit, sed diam nonnumy eiusmod
Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipscing
tempor incidunt ut labore et dolore magna
amet, consectetur Consectetur adipscing elit elit, sed diam nonnumy eiusmod tempor incidunt ut aliquam erat volupat.
adipscing elit, sed labore et dolore magna aliquam erat volupat. Et Continue >>
harumd dereud facilis est er expedit distinct. Nam
diam nonnumy eius- Lorem ipsum dolor sit amet, consectetur adipscing elit, sed
liber a tempor cum soluta nobis eligend optio comque
mod tempor incidunt ut diam nonnumy eiusmod tempor incidunt ut labore et dolore nihil quod a impedit anim id quod maxim placeat facer
labore et dolore magna magna aliquam erat volupat. Et harumd dereud facilis est er possim omnis es voluptas assumenda est, omnis
aliquam erat volupat. expedit distinct. dolor repellend. Temporem autem quinsud et aur office debit aut tum rerum il blog di christian rocca

necesit atib saepe eveniet ut er repudiand sint et molestia non este recusand.
Continua >> Lorem ipsum dolor sit amet
Lorem ipsum dolor >> Vai all’approfondimento >>
Lorem ipsum dolor sit amet, consectetur
adipscing elit, sed diam nonnumy eiusmod
Lorem ipsum dolor sit amet, consectetur tempor incidunt ut labore et dolore magna
aliquam erat volupat.
Sed diam nonnumy eiusmod adipscing elit, sed diam nonnumy eius- Lorem ipsum dolor sit amet Continua >>
mod tempor incidunt ut labore et dolore
Lorem ipsum dolor sit amet, consecte- magna aliquam erat volupat.
Continua >>
altro box tur adipscing elit, sed diam nonnumy harumd dereud facilis est er expedit distinct. Nam liber a tempor cum soluta
WITTGENSTEIN
eiusmod tempor incidunt ut labore et
(da definire)
nobis eligend optio comque nihil quod a impedit anim id quod maxim placeat
dolore magna aliquam erat volupat. Et facer possim omnis es voluptas assumenda est, omnis dolor repellend. Tempo-

WITTGENSTEIN
rem autem quinsud et aur office debit aut tum rerum necesit atib saepe eveniet Lorem ipsum dolor sit amet
harumd dereud facilis est er expedit
ut er repudiand sint et molestia non este recusand. Lorem ipsum dolor sit amet, consectetur
distinct. Nam liber a tempor cum soluta adipscing elit, sed diam nonnumy eiusmod
nobis eligend optio comque nihil quod Vai all’approfondimento >> tempor incidunt ut labore et dolore magna
Lorem ipsum dolor sit amet aliquam erat volupat.
a impedit anim id quod maxim placeat Continua >>
facer possim omnis es voluptas assumenda est, omnis dolor Lorem ipsum dolor sit amet, consectetur Consectetur adipscing elit
repellend. Temporem autem quinsud et aur office debit aut adipscing elit, sed diam nonnumy eius-
tum rerum necesit atib saepe eveniet ut er repudiand sint et eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat. Et
magna aliquam erat volupat.
molestia non este recusand. harumd dereud facilis est er expedit distinct. Chi è chi
Continua >>
altro box
Lorem ipsum dolor >>

(da definire)
Giulio Meotti
Sed diam nonnumy eiusmod Lorem ipsum dolor sit
amet, consectetur
Lorem ipsum dolor sit amet, consectetur adipscing adipscing elit, sed
diam nonnumy eius-
elit, sed diam nonnumy eiusmod tempor incidunt ut
mod tempor incidunt ut
Lorem ipsum dolor sit amet labore et dolore magna aliquam erat volupat. Et
altro box
labore et dolore magna
harumd dereud facilis est er expedit distinct. Nam aliquam erat volupat.
Lorem ipsum dolor sit amet, consectetur adipscing elit, sed
(da definire)
liber a tempor cum soluta nobis eligend optio comque
Continua >>
diam nonnumy eiusmod tempor incidunt ut labore et dolore nihil quod a impedit anim id quod maxim placeat facer
possim omnis es voluptas assumenda est, omnis
magna aliquam erat volupat. Et harumd dereud facilis est er
dolor repellend. Temporem autem quinsud et aur office debit aut tum rerum
expedit distinct. Nam liber a tempor cum soluta nobis necesit atib saepe eveniet ut er repudiand sint et molestia non este recusand.
eligend optio comque nihil quod a impedit anim id quod
maxim placeat facer possim omnis es voluptas assumenda
est, omnis dolor repellend. altro box
Vai all’approfondimento >> (da definire)
harumd dereud facilis est er expedit distinct. Nam liber a tempor cum soluta
nobis eligend optio comque nihil quod a impedit anim id quod maxim placeat
Consectetur adipscing elit facer possim omnis es voluptas assumenda est, omnis dolor repellend. Tempo-
rem autem quinsud et aur office debit aut tum rerum necesit atib saepe eveniet
Lorem ipsum dolor sit amet, consectetur adipscing elit, sed ut er repudiand sint et molestia non este recusand.
diam nonnumy eiusmod tempor incidunt ut labore et dolore
magna aliquam erat volupat. Et harumd dereud facilis est er Vai all’approfondimento >>
altro box
expedit distinct.
Consectetur adipscing elit (da definire)
harumd dereud facilis est er expedit distinct.

footer (da definire)
footer (da definire)

Wireframing 2 febbraio 2008

BANNER

FOGLIO BLOG DOCUMENTO DIVERTIMENTO LETTORE DIRETTORE

La spiegazione Ultimi aggiornamenti del sito
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet iniziativa speciale
(o in evidenza)
adipscing elit, sed diam nonnumy eius-
mod tempor incidunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipscing elit, sed
magna aliquam erat volupat. diam nonnumy eiusmod tempor incidunt ut labore et dolore
Continue >> magna aliquam erat volupat. Et harumd dereud facilis est er
expedit distinct. Nam liber a tempor cum soluta nobis
eligend optio comque nihil quod a impedit anim id quod
maxim placeat facer possim omnis es voluptas assumenda
est, omnis dolor repellend.
Chi è chi
Giulio Meotti
BANNER
Lorem ipsum dolor sit
amet, consectetur Consectetur adipscing elit
adipscing elit, sed
diam nonnumy eius- Lorem ipsum dolor sit amet, consectetur adipscing elit, sed
mod tempor incidunt ut diam nonnumy eiusmod tempor incidunt ut labore et dolore
labore et dolore magna magna aliquam erat volupat. Et harumd dereud facilis est er
aliquam erat volupat. expedit distinct.
Continua >>
Lorem ipsum dolor sit amet, consectetur
Sed diam nonnumy eiusmod adipscing elit, sed diam nonnumy eius-

Visual design 7 febbraio 2008

Prima iterazione 28 febbraio 2008

Risultato
➜ un sistema editoriale di pubblicazione e 
gestione dei contenuti (realizzato ad‐hoc)
➜ un nuovo sito web che, a giudicare dai 
feedback ricevuti, piaceva molto
➜ una dimostrazione che i metodi di lavoro 
adottati funzionavano davvero

Migliorie apportate al sito
➜ aggiunte nuove sezioni = rubriche
➜ aumentata la trovabilità degli articoli
➜ registrazione delle pagine sui motori
➜ creazione di feed RSS
➜ paginazione degli elenchi di articoli
➜ realizzazione di un search‐engine interno

Ricerca sul sito
➜ due opzioni fra cui scegliere:
➜ un sistema di ricerca full‐text interna
➜ adozione di Google Custom Search
➜ scelta la seconda strada per motivi di 
tempo (e di budget economico)

Due errori in un colpo solo
➜ un errore di architettura:
➜ perché si stanno usando due sistemi di 
ricerca non connessi fra loro
➜ un errore di usabilità
➜ perché per l’utente non è intuitivo come 
poter usare il modulo di ricerca

Introduzione di nuove “metriche”
➜ Page‐views complessive

➜ Tempo medio di permanenza sul sito

Introduzione di un “paywall”
➜ Tre livelli di accesso ai contenuti del sito:
➜ non abbonato: accesso ad alcuni articoli
➜ abbonato al sito: accesso completo a tutti i 
contenuti del Foglio.it 
➜ abbonato al quotidiano: accesso a tutti i 
contenuti del sito e al quotidiano in PDF

Le sﬁde del passaggio al “freemium”
➜ nuovo stato logico sul CMS
➜ integrazione con sistema gestionale
➜ ripensare l’architettura del sito web?
➜ differenziare per tipologia di accesso?
➜ come inibire la lettura senza “escludere”?

Il tag identiﬁcativo

➜ non interferisce con i pattern acquisiti
➜ semplice da individuare a colpo d’occhio 
➜ non cambia la UX per i diversi livelli

Il sito web così come è oggi

L’archivio del sito

}
➜ 50 sezioni
➜ 20.000 articoli
➜ 4.000 immagini
➜ 20.000 commenti

Raggiunti limiti evidenti
➜ dimensione verticale della homepage
➜ trovabilità dei contenuti
➜ paginazione degli elenchi

Raggiunti limiti evidenti
➜ dimensione verticale della homepage
➜ paginazione degli elenchi

➜ eppure erano scelte “giuste”...

Proviamo ad allargare l’orizzonte euristica
(Bussolon dixit)

➜ Ho fatto una veloce analisi qualitativa su:
➜ struttura e fruizione della homepage
➜ Ho scelto le corazzate dell’informazione:
➜ corriere.it
➜ repubblica.it
➜ ilsole24ore.com

www.corriere.it www.repubblica.it www.ilsole24ore.com

Giornali diversi, stessi problemi
➜ stratificazione e accumulo successivi
➜ pagine strabordanti di testi, immagini, 
link, banner, video, call‐to‐action, ecc.
➜ difficoltà ad individuare l’organizzazione 
logica e/o visuale dei contenuti

Se la homepage fosse fatta di carta?

Quanti link contiene una homepage?
➜ Provate a indovinare...


+400!


+400!
➜ Altro che “paradosso della scelta”...

Come trovo quello che cerco?
➜ menu di navigazione e catalogazioni sono 
completamente dispersi in homepage
➜ gli archivi non esistono oppure non sono 
altro che homepage di secondo livello
➜ la ricerca per parole chiave raramente 
funziona come dovrebbe

Alcuni aspetti da non sottovalutare
➜ l’impatto dell’advertising sulle scelte
➜ la continua stratificazione dei contenuti
➜ il background “cartaceo” dei giornalisti
➜ il saper trovare i giusti compromessi

Alcune lezioni che si possono trarre
➜ non sempre iterazione e agilità sono 
comprese dal committente
➜ non sempre gli “errori di progettazione” 
sono percepiti come tali 
➜ attenzione alle scelte “temporanee”

Ma di questo, che ne pensano gli utenti?
➜ percepiscono realmente questi problemi 
di “cattiva” user‐experience?
➜ sono solo falsi problemi di un architetto o 
un designer troppo scrupoloso?
➜ sono ormai assuefatti o rassegnati ?

Il valore della user-experience

IA/UXD Cliente

Utente


IA/UXD Cliente

VALORE

Utente


IA/UXD Cliente

VALORE COSTO

Utente


IA/UXD Cliente

VALORE COSTO

PREZZO
Utente

Grandi diﬃcoltà = Grandi opportunità
➜ ampi spazi di manovra per migliorare 
organizzazione e fruizione dei contenuti 
nei siti web dei quotidiani online in Italia
➜ enormi spazi di intervento per chi si 
occupa di architettura dell’informazione 
e design dell’esperienza utente

Il passaggio da utente a cliente...
➜ i nuovi modelli di business imporranno 
agli operatori un nuovo approccio verso i 
propri lettori
➜ questo passaggio mentale porterà con sé 
anche un nuovo approccio verso qualità, 
quantità e fruibilità dei contenuti

... e da lettore a cliente
➜ i lettori stessi acquisteranno maggior 
consapevolezza quando dovranno pagare 
per avere ciò che vogliono
➜ si pensi a quel che è accaduto con il 
passaggio dalla TV generalista alla pay‐tv

Le sﬁde per noi
➜ saper conciliare “principi” e “business”
➜ trasmettere i principi per farli divenire 
terreno comune
➜ saper far cultura presso il cliente

... farsi “notare” di più!

Grazie per l’attenzione.

Cristiano Rastelli - Area Web
www.didoo.net

Sondaggio lettori del Foglio.it
➜ raccolta informazioni di tipo demografico
➜ modulo cartaceo + form online
➜ circa 30 domande a risposta multipla
➜ circa 3000 questionari compilati

Hai trovato diﬃcoltà?
B6. Hai trovato difficoltà sul sito del Foglio?
Choices Percentage Count

a trovare vecchi articoli 59.88% 494

a navigare fra le sezioni del sito 18.79% 155

altro 17.21% 142

a iscrivermi e pagare l’abbonamento 4.12% 34

Total 825

Unanswered 1307

Report sondaggio lettori del Foglio / Sezione B
Jul 6, 2009 9:15 PM

Cosa cambieresti?
E4. Cosa cambieresti del Foglio.it (online)?
Choices Percentage Count

aumenterei i contenuti 32.4% 861

vorrei interagire con i giornalisti 22.54% 599

vorrei più breaking news 13.51% 359

vorrei diverse sezioni 12.23% 325

vorrei interagire con altri lettori 7.45% 198

vorrei più video 5.95% 158

altro 4.93% 131

Other [ View ] 0.98% 26

Total 2657

Unanswered 475

Report sondaggio lettori del Foglio / Sezione E
Jul 6, 2009 9:22 PM

Esperienza utente e fruizione dei contenuti nei quotidiani online in Italia.

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (7)

More from Cristiano Rastelli

More from Cristiano Rastelli (20)

Esperienza utente e fruizione dei contenuti nei quotidiani online in Italia.