Post on 12-Apr-2017
10 hackper realizzare un sito editoriale di successointervento a codemaster tag innovation school18 novembre 2015fabio bin
chi sonouno sviluppatore? (purtroppo) noe un designer? nemmeno
chi sonouno sviluppatore? (purtroppo) noe un designer? nemmenoche ci faccio qui?
all’università web designer autodidattaresponsabile marketing e pubblicità online in gruppi editorialicoordinatore del comitato tecnico di audiwebresponsabile prodotto digitale in gruppi editorialipubblicità e innovazione digitale in OneDay
di cosa mi sono occupato
di cosa parliamo oggi?
come si realizza un
prodotto editoriale
digital
di cosa parliamo oggi?
che caratteristiche ha un prodotto editoriale?
doppio mercato
audienceCredits: Shutterstock
audience
advertising
Credits: Shutterstock Credits: Kappuru / Life of Pix
offrire contenuti (di qualità)
attrarre audience
mantenere gli utenti a lungo sul sito
Credits: Shutterstock
rendere armonici i contenuti e la
pubblicitàCredits: Shutterstock
misurare i fenomeni
rilevanti
Credits: Shutterstock
rendere l’advertising performante
Credits: Shutterstock
contenutiaudienceadvertising
Credits: Shutterstock
il nostro caso
un sito editoriale per studenti.da zero.
il nostro caso
un piccolo passo indietro
abbiamo già un sito e una community leader sul target degli studenti delle superiori…
Credits: ScuolaZoo
…ma non presente sul target degli universitari
un segmento presidiato da competitor focused su appunti e didattica
si potrebbe fare…
studenti universitari, fuori sede e giovani lavoratori rispondere a problemi pratici della vita di tutti i giorni
con un tono leggero e pratico
per chiperché?come?
Essere il life hacker degli studenti e dei giovani lavoratori
un brand statement,
una mission
“”
let’s do it!
let’s do it!
vediamo questi hack?
ma prima…
adottiamo un
approccio full-stack
ma non solo nello sviluppo!
Fonte: Sitepoiint
full-stack come
mindset
mettere le mani in pasta.
dappertuttoCredits: Life of Pix
hack #1progetta in base
agli obiettivi
realizzare un prodotto editoriale online
l’elenco degli
obiettivi
realizzare un prodotto editoriale onlinescalabile per volumi di contenutiscalabile per volumi di traffico
l’elenco degli
obiettivi
realizzare un prodotto editoriale onlinescalabile per volumi di contenutiscalabile per volumi di trafficoaccessibile da collaboratori esterniottimizzato per tutti i devicel’elenco
degli obiettivi
realizzare un prodotto editoriale onlinescalabile per volumi di contenutiscalabile per volumi di trafficoaccessibile da collaboratori esterniottimizzato per tutti i devicecon una forte brand identitycon un posizionamento chiaro e differenziante
l’elenco degli
obiettivi
realizzare un prodotto editoriale onlinescalabile per volumi di contenutiscalabile per volumi di trafficoaccessibile da collaboratori esterniottimizzato per tutti i devicecon una forte brand identitycon un posizionamento chiaro e differenziantein grado di attirare nuovi utenti da SEOe …da social
l’elenco degli
obiettivi
realizzare un prodotto editoriale onlinescalabile per volumi di contenutiscalabile per volumi di trafficoaccessibile da collaboratori esterniottimizzato per tutti i devicecon una forte brand identitycon un posizionamento chiaro e differenziantein grado di attirare nuovi utenti da SEOe …da socialin grado di generare un elevato numero di PVsche supporti formati advertising standard e custom
l’elenco degli
obiettivi
la tecnologia o la soluzione che voglio implementare mi consente di raggiungere gli obiettivi?
posso immaginare soluzioni di UX e UI realisticamente applicabili e che mi consentano di raggiungere gli obiettivi?
le domande
da porsi
hack #2
traduci gli obiettivi in KPIs
rilevanti per il tuo business
realizzare un prodotto editoriale onlinescalabile per volumi di contenutiscalabile per volumi di trafficoaccessibile da collaboratori esterniottimizzato per tutti i devicecon una forte brand identitycon un posizionamento chiaro e differenziantein grado di attirare nuovi utenti da SEO…e da socialin grado di generare un elevato numero di PVsche supporti formati advertising standard e custom
torniamo all’elenco
degli obiettivi
realizzare un prodotto editoriale onlinescalabile per volumi di contenutiscalabile per volumi di trafficoaccessibile da collaboratori esterniottimizzato per tutti i devicecon una forte brand identitycon un posizionamento chiaro e differenziantein grado di attirare nuovi utenti da SEO…e da socialin grado di generare un elevato numero di PVsche supporti formati advertising standard e custom
focus on
obiettivi KPIsnumero visitenumero utentinumero di Pagine Viste / Visitatempo di permanenzabounce rate
traffico
KPIs primari
obiettivi KPIs
traffico
numero visitenumero utentinumero di Pagine Viste / Visitatempo di permanenzabounce rate
click su specifici bottoninumero share dalla paginaperfomance per autoreperformance per sezione
KPIs secondari
hack #3organizza i contenuti
(e i contenitori)
content su feste erasmus
dove colloco il
contenuto?
università studi all’estero divertimento città universitarie
quanti contenitori
devo prevedere
?
tesi laurea studi all’estero divertimento vacanze
matricole università studiare vita universitaria
alloggio coinquilini lavoro stage
devo prevedere dei sotto-
contenitori?
fuori sede
case alloggio coinquilini bollette ed economia domesticacittà universitarie
che relazioni deve prevedere tra l’articolo e il suo autore?
e ancora chiedersi
che relazioni deve prevedere tra l’articolo e il suo autore?come ordino la disponibilità di un articolo all’interno all’interno di una pagina collettore?e ancora
chiedersi
che relazioni deve prevedere tra l’articolo e il suo autore?come ordino la disponibilità di un articolo all’interno all’interno di una pagina collettore?è necessario fare delle pagine collettori?
e ancora chiedersi
che relazioni deve prevedere tra l’articolo e il suo autore?come ordino la disponibilità di un articolo all’interno all’interno di una pagina collettore?è necessario fare delle pagine collettori? a livello di singola pagina che tipo di organizzazione interna devo avere?
e ancora chiedersi
che relazioni deve prevedere tra l’articolo e il suo autore?come ordino la disponibilità di un articolo all’interno all’interno di una pagina collettore?è necessario fare delle pagine collettori? a livello di singola pagina che tipo di organizzazione interna devo avere?devo dare all’utente la possibilità di cercare tra i contenuti?
e ancora chiedersi
la risposta?
lasciamoci guidare dalle best practices
la risposta?
la journey classica di
un sito non brand
single content
la journey classica di
un sito non brand
single content
single + pagine collegate
la journey classica di
un sito non brand
single content
single + pagine collegate
single + suggested articles
struttura seo ma come?
partiamo dai volumi di ricerca per i topic principali
struttura seo ma come?
…e in base a questa costruiamo l’alberatura del sito che vogliamo
struttura seo ma come?
con slug “parlanti” e meta ben valorizzati
scendere ad un
livello di maggior dettaglio
vediamo i template
fondamentali: content pages
pagine contenuto
“single”
pagine contenuto
“gallery”
pagine contenuto
“slide”
pagine di raccordo,
aggregatori, homepage
versioni per mobile
hack #4pensa da
subito alla
pubblicità
dev mostly frequent
ouch
Mi passi il tag? “ ”Ma dov’è che va?
“ ”Azz! ci siamo dimenticati l’adv!
“ ”Ma su mobile non funziona!
Rovina tutto il layout
““
””
dev mostly frequent
ouch tanto io ho l’adblocker “ ”
ripartiamo l’avd deve essere performante(e per esserlo deve essere visibile)
visibile non vuol dire
necessariamente “in alto”
in alto su desktop(ma in fondo su mobile)
prevedere tutte le casistiche
(e prepariamoci anche
all’evoluzione)Skin
Intro Header�Una nuova tipologia di intro al sito che
consente di precaricare una creatività a schermo pieno prima del contenuto
Mega Wall Un nuovo formato ad alto impatto
posizionato al termine del contenuto
Masthead Video �Medium Rectangle Video
X-Video�(Med. Rec. Exp. Video) In article Video
Mediun Rectangle�con posizionamento in sidebar o in-article Masthed Leaderboard
Medium Rectangle�Posizionamento in article per garantire
l’esposizione del banner mentre gli utenti fruiscono del contenuto
Floor Ad Formato sticky persistente allo scroll
disponibile su tutte le pagine
integrare native e custom content
nel CMS
integrare sponsored
teaser e
sponsored content
nel CMS
rendere sponsorizzabili
tutti i teaser
integrare il CMS con sistemi di
tracking adv terze parti!
hack #5razionalizza quello di cui hai bisogno per iniziare
facciamo una
checklistcosa ci serve?
facciamo una
checklist
un piano editorialemacro necessità a livello di funzionalità CMSla definizione dell’architettura dell’informazionel’elenco dei singoli template di paginale necessità per ciascun template di paginale guidelines e i requisiti SEOle guidelines advertising
facciamo una
checklist
un piano editorialemacro necessità a livello di funzionalità CMSla definizione dell’architettura dell’informazionel’elenco dei singoli template di paginale necessità per ciascun template di paginale guidelines e i requisiti SEOle guidelines advertising
facciamo una
checklist
un piano editorialemacro necessità a livello di funzionalità CMSla definizione dell’architettura dell’informazionel’elenco dei singoli template di paginale necessità per ciascun template di paginale guidelines e i requisiti SEOle guidelines advertising
facciamo una
checklist
un piano editorialemacro necessità a livello di funzionalità CMSla definizione dell’architettura dell’informazionel’elenco dei singoli template di paginale necessità per ciascun template di paginale guidelines e i requisiti SEOle guidelines advertising
facciamo una
checklist
un piano editorialemacro necessità a livello di funzionalità CMSla definizione dell’architettura dell’informazionel’elenco dei singoli template di paginale necessità per ciascun template di paginale guidelines e i requisiti SEOle guidelines advertising
facciamo una
checklist
un piano editorialemacro necessità a livello di funzionalità CMSla definizione dell’architettura dell’informazionel’elenco dei singoli template di paginale necessità per ciascun template di paginale guidelines e i requisiti SEOle guidelines advertising
facciamo una
checklist
un piano editorialemacro necessità a livello di funzionalità CMSla definizione dell’architettura dell’informazionel’elenco dei singoli template di paginale necessità per ciascun template di paginale guidelines e i requisiti SEOle guidelines advertising
e finalmente
hack #6snellisci il
processo e itera.
il flusso tradizionale
strategia UX wireframe UI / visual front-end
il flusso tradizionale
strategia UX wireframe UI / visual front-end
il flusso tradizionale
strategia UX wireframe UI / visual front-end
snellire. si può.
strategia UX UI / VisualFront-end
UX
strategia UX wireframe UI / visual front-end
a livello macro
980 px 1140 px
da requisiti rework
a livello di dettaglio
a livello di dettaglio
e lavorare direttamente su front-end
eliminare anche i rework su visual
hack #7
progetta in modo da
mantenere gli utenti il più a
lungo possibile sul sito
offrire all’utente il maggior numero possibile di occasioni di consumare ulterori contenuti
strategia #1incentivare
l’utente a consumare
più contenuti
strategia #1incentivare
l’utente a consumare
più contenuti
servizi di content discovery
plug-in wordpress custom
strategia #1incentivare
l’utente a consumare
più contenuti
posizionamento intelligente dei widget
strategia #1incentivare
l’utente a consumare
più contenuti
integrazione look & feel dei widget
strategia #1incentivare
l’utente a consumare
più contenuti
ridondanza di nuovi contenuti / link
creare un’esperienza di pagination fluida e “sensata”, che non deve essere percepita come forzata
strategia #2
“trascinare” l’utente su più
pagine nell’ambito dello stesso
contenuto
strategia #2
“trascinare” l’utente su più
pagine nell’ambito dello stesso
contenuto
strategia #2
“trascinare” l’utente su più
pagine nell’ambito dello stesso
contenuto
strategia #2
“trascinare” l’utente su più
pagine nell’ambito dello stesso
contenuto
strategia #2
“trascinare” l’utente su più
pagine nell’ambito dello stesso
contenuto
strategia #2
“trascinare” l’utente su più
pagine nell’ambito dello stesso
contenuto
hack #8progetta per
massimizzare le condivisioni
tasti di share.
preminenti
tasti di share.
… e contestuali
tasti di share.
device-based
tasti di share.
facebook sempre protagonista
e non dimenticare i meta OG e le
immagini per lo share!
FAIL! THIS IS BAD
basta poco!
IT WORKS!
hack #9 cura i dettagli
The details are not details. They make the product.“
”CHARLES EAMES
Call to action su teaser
customizzabile dall’editor
call to action custom
elementi di micro UI:
numerazione bullet points e progress bar
slide
bullet customprogress bar pagination slide
breadcrumb mascherate da
“etichette”Home > Vita universitaria > Buzz
breadcrumb mascherate da
“etichette”
breadcrumb
call-out all’over su elementi di UI proprietari
call-out
pagine autore con cover
personalizzata, social profiles
e dati di attività
spazio autore custom su
ogni contenuto
scheda autore
cover sezioni personalizzabili
default cover
cover sezioni personalizzabili
custom cover
cover sezioni personalizzabili
custom cover
schede autore su pagina redazione
customizzabili per ciascun
autore
tasto articolo successivo
con etichetta di contenuto
label tasto
hack #10 steal like an artist
The only art I’ll ever study is stuff that I can steal from
“
”DAVID BOWIE
studiare per
copiare
soluzioni di UX/UI
studiare per
copiare
soluzioni di UX/UI
studiare per
copiare
soluzioni di UX/UI
studiare per
copiare
soluzioni di UX/UI
studiare per
copiare
soluzioni di UX/UI
studiare per
copiare
soluzioni di UX/UI
studiare per
copiare
soluzioni di UX/UI
cosa “copiare”
?
format di contenutosnippet di codice
idee creativetutto quello che ti serve
rubare “bene”
Fonte: Austin Kleon
grazie!
fabiobin@zoocom.ithttps://it.linkedin.com/in/fabiobin