My lesson workshop at Univr

Davide Carpin // La Comunicazione WebDavide Carpin // La Comunicazione Web
venerdì 8 giugno 2012

Davide Carpin // La Comunicazione Web
CHI SONO
Davide Carpin
www.davidecarpin.net

IntroduzioneIntroduzione

LA Comunicazione Web
Uno scenario di ampio respiro
✦ Gli investimenti pubblicitari si stanno spostando sempre più sul web.
✦ La TV il medium di massa per antonomasia sta diventando WEB TV e le reti televisive
hanno iniziato a trasmettere i loro programmi via web (RAI MOBILE, RETE VENETA…
su tablet e smartphones) la gente usa telefonini e tablet e li porta ovunque.
✦ Comunicare e distinguersi sul web è oggi sempre più difficile perché le variabili che
entrano in gioco sono moltissime, dal buon design al posizionamento, da un'iniziativa
pubblicitaria ben pensata a contenuti interessanti (content curation) che stimolano
l'utente a tornare.

I FATTI, I NUMERI
“ OGGI GLI SMARTPHONES E I TABLET VENDONO PIù DEI PC. SE OGGI IL 90% DELLE INTERAZIONI AVVIENE ATTRAVERSO PC TRA UN ANNO IL 50% dELLE
INTERAZIONI SARA’ MOBILE!”
- ANDREY ANDREEV fondatore di Badoo.com -
‣ Nella sola Italia il 58% della popolazione ha uno smartphone e entro la fine di quest’anno
sono previsti 13.000.000 di dispositivi in più (fonte Wired Italia).
‣ Mobile e video occupano ormai una quota sempre maggiore degli investimenti
pubblicitari nei paesi più sviluppati rispetto ad altri media. + 49% nel video + 65% nel
mobile. ValueClick 2012 (soluzioni per l’advertising on-line)
‣ Le ricerche fatte da smartphone sono cresciute del 400% tra il 2011 e il 2012
PrestigeMarketing Inc

TUTTAVIA I CONSUMATORI CONTINUANO AD USARE DISPOSITIVI
DIVERSI DURANTE IL GIORNO.
Notiamo ad esempio che le curve seguono un andamento molto simile, questo
perché le persone utilizzano un dispositivo o l’altro indifferentemente.
PrestigeMarketing Inc

‣ E-commerce e mobile commerce sono in rapida crescita, ma l’Italia non è ancora molto
ricettiva a questo riguardo (il caso degli artigiani).
‣ I social sono un nuovo modo di generare vendite e attenzione, Facebook è il sito più
visitato negli Stati Uniti, nel 2012 ha superato Google.
‣ Le E-mail non sono morte, ma vanno a braccetto con le strategie social, ci ricordano
acquisti e appuntamenti, ci informano su offerte, ed eventi.

come possiamo promuovere
la nostra attività?
Cosa si può fare per promuovere la propria attività? Above the line, below the line
Above the line è un termine tecnico impiegato in pubblicità e si usa per indicare tutte le attività di
comunicazione che sfruttano i media classici, ovvero:
■ Radio
■ Televisione
■ Cinema
■ Stampa (Giornali e Periodici)
■ Affissioni (Manifesti e Poster)
■ e da una ventina d’anni il WEB (che ora è molto utilizzato)
Il termine complementare è Below the line, che indica invece altre attività che non sfruttano tali media,
come ad esempio le sponsorizzazioni, le attività di promozione, le relazioni pubbliche e il direct
marketing.
IL SITO WEB VIENE COMUNEMENTE INSERITO IN UNA STRATEGIA DI MARKETING ed è
UNA VOCE DEL BUDGET PUBBLICITARIO.

Come creare un sito web
accattivante, utile e interessante
Come creare un sito web
accattivante, utile e interessante

Il Brief è
un documento che indica gli obiettivi di una campagna pubblicitaria o di un'azione promozionale che contiene le informazioni necessarie
per definire in termini più precisi un'iniziativa.
Per Briefing intendiamo anche solo lo scambio e raccolta di
informazioni col cliente o con un professionista che realizzerà il
nostro sito web è il primo step essenziale verso il successo della
nostra iniziativa comunicativa.
E’ un momento delicato in cui il passaggio delle informazioni deve
essere chiaro ed esauriente. In particolare cliente e professionista
devono riuscire a definire gli obiettivi e le strategie più adatte per
costruire e valorizzare il sito web.
-> il più delle volte è un documento con informazioni parziali e
confuse.
IL BRIEFING

Davide Carpin // La Comunicazione Webun esempio

Il Valore della Creatività
“Posso chiedere ad un operaio di venire domani mattina alle sette a produrre più bulloni, ma non posso
chiedere a un ricercatore di venire prima per produrre più idee”.
Akio Morita fondatore di Sony
Oggi il valore di un bene è valutato in minima parte dalla
combinazione tra la materia prima e il lavoro necessario a produrlo.
In massima parte, invece, il suo valore è immateriale, legato al design,
all’intelligenza.
Il costo di un’auto è rappresentato da un 30% per la produzione materiale, mentre il
resto è dato da i costi per concepirlo, per progettarlo, per sviluppare nuove soluzioni
tecnologiche, per carpire i gusti dei potenziali compratori, per rendere gli interni
gradevoli e desiderabili, per promuoverlo e per commercializzarlo.

IL PRICING
ALCUNE QUESTIONI E PROBLEMATICHE SU CUI è UTILE RIFLETTERE
- La definizione del Budget è importantissima. Quanto spendo per ? Cosa ottengo?
Cosa voglio?
- Non esiste un unico ente che regola il settore pubblicitario (da non confondere
con il Garante della Concorrenza e del Mercato) ma esistono varie associazioni
professionali con tariffari diversi.
- Che percentuale del fatturato dovrei investire nel mio sito web? (anche qui non esiste
una regola ma i fattori che concorrono alla definizione di un budget pubblicitario sono molteplici)
- Devo preferire un professionista che mi fa un costo fisso per ogni pagina del mio
sito web o un professionista che mi calcola un costo totale per l’intero progetto?
- Il concetto di Qualità Percepita e Prezzo che sono disposto a pagare.

Per chi progetta o richiede un progetto
• DOBBIAMO INDIVIDUARE LA
GIUSTA SOLUZIONE PER OGNI
PROBLEMATICA
.Andiamo ad individuare il giusto
rapporto qualità - prezzo
.Andiamo ad individuare REVENUES e
REACH OF INVESTMENT / ROI che si
aspetta il nostro cliente o il nostro
datore di lavoro. (guadagno, ritorno
dell’investimento)
.Teniamo sempre presente il concetto
di REWARDING . Il nostro sito web deve
garantire un’esperienza gratificante per
l’utente che visita il nostro sito, ma non
solo!
Il nostro cliente deve ritrovare un
riscontro nell’investimento che affronta.
L’esperienza deve quindi essere
REMUNERATIVA, o deve comunque
produrre un RISULTATO POSITIVO.
Dobbiamo creare un sito UTILE! (meglio
se bello e utile)

Il rispetto dell’immagine ISTITUZIONALE
• Il sito web rappresenta
l’azienda, l’attività, l’iniziativa
e deve essere declinato e
sviluppato a partire dalle
linee guida del logo e
dell’immagine istituzionale.
. Di fondamentale importanza è la
raccolta di tutti i files scritti e visivi che ci
aiutano a sviluppare il progetto. A partire
dal logo (meglio in vettoriale) e dal
manuale di marchio.
TEST: quali sono i colori istituzionali del
brand COCA COLA?
Quali sono i colori istituzionali della
Regione Veneto?

Questo è il sito della Regione Veneto

FARE RICERCA
• Alla base di ogni progetto web c’è una
fase di RICERCA e SVILUPPO.
• Andiamo ad individuare i Trend che
influenzano maggiormente il web
design. La nostra indagine deve
tenere conto delle soluzioni adottate
per rispondere ad un determinato
bisogno, così come di esigenze
decorative / espressive utilizzate nel
settore in cui si colloca il nostro
progetto.
• Per TREND intendiamo ciò che è in
VOGA in nel preciso momento in cui ci
apprestiamo a disegnare e realizzare
il sito web.
• TREND "tendenza, direzione, andamento, evoluzione”.
• Individuare un trend ci permette di
dare quel qualcosa in più al nostro
cliente in termini di design, di
ricercatezza e soluzioni innovative
che rendono la fruizione dei contenuti
più intuitiva o divertente.

Due esempi di TREND: 45°
Grande è Bello! con font enormi e immagini
a tutta pagina tagliate a 45 gradi

Il ritorno dei cerchi
Altri trend possono essere il legnoso, l’uso dei <Ribbons> nelle pagine web come vedremo a seguire

IL PRIMO STEP:
Sketchin’
Disegnamo il nostro prototipo di layout grafico
e andiamo ad individuare l’architettura dell’informazione

Sketchin’
• Alle volte possiamo servirci di
soluzioni già pronte.
Gli Sketch ci aiutano a fissare le idee
quando siamo col cliente e a livello progettuale

Sketchin’

IL CONCETTO DI USABILITà
• Ogni qualvolta andiamo a creare una
interfaccia grafica utente (GUI) nel
nostro sito dobbiamo sempre tenere
presente il concetto di Usabilità.
• L’utente deve trovare le informazioni
che cerca in un attimo altrimenti se
ne andrà e il nostro sito sarà INUTILE!
• Il concetto di usabilità ci impone di
dare ordine ai flussi informativi
all’interno del nostro website.
• L'usabilità del web è una proprietà
esterna al prodotto-sito poiché
riguarda l'interazione tra un utente, le
sue caratteristiche e quel sito.
• La normativa ISO/IEC 2001a definisce
l'usabilità come "la capacità di un
sistema di essere compreso, appreso,
utilizzato e attraente per gli utenti
quando usato in condizioni
specificate".

La Comprensibilità di un sito riguarda
lo sforzo richiesto per capire il sistema
■ L' apprendibilità riguarda lo sforzo
necessario all'utente per imparare ad
usare il sistema
■ L' utilizzabilità si riferisce allo sforzo
richiesto all'utente per utilizzare il
sistema agendo sui suoi controlli.
■ Efficacia come precisione e
completezza con cui gli utenti
raggiungono specifici obiettivi
■ Efficienza come risorse impiegate in
relazione alla precisione e completezza
cui gli utenti raggiungono specifici
obiettivi
■ Soddisfazione come libertà dal disagio
e attitudine positiva con cui gli utenti
raggiungono specifici obiettivi
attraverso l’uso del prodotto
COME “MISURIAMO” l’Usabilità?
SONO STATI INDIVIDUATI 6 PARAMETRI PER CHE
CI PERMETTONO DI CAPIRE QUANTO IL NOSTRO SITO SIA USABILE

LE ICONE
Le icone
catalizzano
l’attenzione su
determinate
funzioni
Se ben
realizzate
possono essere
decorative
e migliorare
il design di una
pagina web

I MOKE UP... L’ANTEPRIMA AL CLIENTE
Il moke up è una
sorta di rapida
bozza che mi
permette di
dare al cliente
un’idea di ciò
che sto
sviluppando.
Lo potremo
definire
un’assemblato!

I MOKE UP... Una bozza indicativa
Compongo i vari
‘pezzi’ che
formano il mio
sito web e poi
vado a rifinire
ogni singola
area grafica
prima di
passare il file ai
programmatori
Se qualcosa non
funziona o deve
essere modificato
agisco solo sull’area
di interesse.
Non devo rifare
tutto!

LINGUAGGI DI PROGRAMMAZIONE
• HTML
• PHP
• JAVA SCRIPT
• HTML5
• CSS
• AJAX
• FLEX
• ASP
• JQUERY
• Con cosa faccio cosa?
• Generalmente il project manager
decide a che programmatore affidare
lo sviluppo di una intera area del sito.
• Esistono programmatori puri (fanno
solo codice) e web designers che
conoscono più di qualche linguaggio.
Lo scenario è vario.

I CMS
• CMS sta per CUSTOM content
MANAGEMENT SYSTEM sono WEB
APP (come fb, wikipedia, ebay... etc)
• I Cms sono stati una vera rivoluzione!
permettono a chi non conosce alcun
codice di utilizzare e aggiornare il
proprio website
• Si usano come un qualsiasi software
di videoscrittura
• Ci permettono di aggiornare testi e
immagini, rapidamente, ma non solo!
• Se il sito è MULTILINGUE posso
aggiornare tutto rapidamente, come
anche nel caso di un sito web con più
risoluzioni.
• Integrano in un’unica soluzione
diverse potenzialità: dal DIRECT
MARKETING (email mkt) agli stat,
ecommerce, form, aree protette da
password etc...
• Sono diversi (Wordpress, Joomla,
Drupal, Symphony) e sono gratuiti

L’interfaccia utente di WORDPRESS

I FONT (caratteri)
• Anche la scelta dei FONT è un aspetto
importante da considerare.
• Ogni browser gestisce di default un
certo numero di font basici (times,
verdana, arial, trabuchet... etc)
• Esistono font ottimizzati per il web: I
WEB FONTs che possono essere letti
facilmente dalle ultime versioni dei
più comuni browsers GOOGLE FONTS,
CUFON, Font face, font squirrel,
typekit...
• Per essere un webfont un font deve
essere LEGGIBILE, deve ATTRARRE
l’attenzione, e deve poter essere
declinato in diverse grandezze.
• Usiamo font diversi (MASSIMO 3) per
ogni parte del nostro sito web
(testata-titolo-body).
• Scrivere on line vuol dire molto spesso
scrivere per essere trovati, scrivere
per far incuriosire l’utente, scrivere
per INFORMARE.

Anche i caratteri seguono i trend...

• Combinare “‘BASTONI e GRAZIE’
•
• Giocare con le ‘grandezze’
ALCUNI ESEMPI e ABBINAMENTI
le pratiche più utilizzate
http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/

• Usare i Contrasti (grassetto/regolare/italic) • Creare dinamicità con i font
ALCUNI ESEMPI e ABBINAMENTI
le pratiche più utilizzate
http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/

HELVETICA per il body e le informazioni
TITILLIUM per i
pulsanti e i titoli
LOBSTER webfont caratterizzante
per le aree importanti

• 24 aprile 2012 Google Penguin (l’ultima
revisione dell’algoritmo di google
• Il Copywriting creativo diventa sempre più
importante. // Content Curation
• NO allo spam, all'abuso di keywords
inflazionate. NO SITI sovra-ottimizzati
• E' la dieta del pinguino, come illustra
l'infografica. Interessante è notare l’apertura
verso i social e verso contenuti rilevanti.
• Punisce siti con contenuti di bassa qualità e
varietà (si a video, social, condivisione)
S.E.O.
il posizionamento sui motori di ricerca

S.E.O.
google trends

S.E.O.google statistiche
di ricerca

AREE “SPECIALI”
• All’interno di un website possiamo
creare aree private protette da
password per condividere dati e
informazioni solo con alcuni utenti
‘speciali’
• Possiamo creare un’area di ‘domande e
risposte’ FAQ
• Aree BLOG/NEWS
• Aree con FORM da compilare per
ricevere un servizio o un bene
• Aree E-commerce
• Aree DOWNLOAD
• Aree portfolio o dimostrative di ciò che
facciamo (solitamente galleries di video
o immagini statiche).
• Possiamo creare aree per lo streaming
video
Per lo streaming se possibile utilizziamo
sempre i servizi SOCIAL (vimeo, youtube,
ustream etc...)

• Le statistiche di entrata sono
importantissime perché ci
permettono di vedere come gli utenti
utilizzino i contenuti che
pubblichiamo sul nostro website
• Possiamo vedere da dove arrivano gli
utenti, cosa cercano, dove cliccano
• Possiamo ottenere una
organizzazione gerarchica dei
contenuti in base all’interesse
• Tra i più famosi Google Analytics, Stat
counter, free stat, shinystat.
• Abbiamo accesso ai loro I.P. ai loro
dati (la risoluzione del loro schermo, i
percorsi che seguono nella
navigazione, i download, le
nazionalità e il tipo di browser che
utilizzano).
• DAL PUNTO DI VISTA STRATEGICO gli
stat sono importantissimi perché ci
permettono di individuare le aree
dove piazzare i contenuti più
importanti, quali prodotti vengono
preferiti dagli utenti, quali sono gli
interessi maggiori e cosa non piace.
GLI STAT

statcounter, un esempio...

Le AvanguardieLe Avanguardie

I WEBSITE REATTIVI
• I website Reattivi _ Responsivi _
Dinamici o a griglia fluida sono dei siti
web concepiti per adattarsi ad ogni
tipo di risoluzione del browser web
• è un trend che sta prendendo
rapidamente piede, anche se in Italia
non si trovano esempi a riguardo
• L’idea di base è che i contenuti di un
sito web si possano adattare in base
ad ogni dispositivo che li interroga!
Possiamo interrogare un sito
web da ogni dispositivo
ottenendo una esperienza di
navigazione gratificante.
Non c’è più diversificazione tra
esperienza mobile e desktop!

• Le aziende, dovrebbero riuscire a fornire un’ esperienza utente il più possibile coinvolgente e
completa per tutti gli utenti a prescindere dal dispositivo che utilizzano.
• Realizzare un web design reattivo ci permette di creare un sito web che è una soluzione flessibile per
larghezze differenti dello schermo utilizzando griglie flessibili e stili intelligenti per presentare lo
stesso contenuto ad ogni utente, nel formato più adatto
• La cosa più interessante, è che i websites reattivi non risentono come per i siti mobili della
conoscenza o meno del dispositivo utente… non ci sono continui aggiornamenti poiché la soluzione
reattiva riconosce solo la larghezza del browser che interroga il sito web e si adatta
conseguentemente.
• Per rendere fruibile un sito web sui vari dispositivi poiché vi costringerebbe a creare quattro diversi
siti web:
- una versione desktop - per displays più larghi di 979 pixel
- una versione tablet - per displays da 740 a 979 pixel
- una versione mobile - per displays da 320 a 739 pixel
- una wap - per cellulari GPRS ed Edge per displays sotto i 320 pixel
W vai
al sito

LE GESTURES

VEICOLARE MESSAGGI CON LE INFOGRAPHICS

Usiamo Le Motion Graphics per raccontare
quello che facciamo
A Proud History of Canadian Whisky by Ryan Paterson SI VEDONO I RIBBONS E I CARATTERI ALLUNGATI

Creare TrafficoCreare Traffico

ALCUNI CONSIGLI PER CREARE TRAFFICO
Le campagne BANNER non funzionano più.
La percentuale media di click sui banner si
è stabilizzato nel 2011 a 0,08% - 0,09%.
Quindi, meno di 1 click ogni 1.000
visualizzazioni (dato relativo IAB)
PAGO 1.000, ottengo 1 e quell’1 forse
nemmeno acquista o si informa.
Il banner è quindi stato RIPENSATO, e
trasformato in GAME BANNER. I risultati
restano comunque poco convincenti.
I Banner sono più adatti ad informare o
fare branding che a vendere.
Stride Gum le gomme dal gusto lungo
500$ a chi resiste di più senza mollare il CLICK! (oltre 46 minuti)
e un’efficacia di circa 13 volte superiore ai tradizionali banner
(click-through rate medio 0,9%)

USER GENERATED CONTENT

SOCIAL SI, FORUM NO
Con un’inserzione su Facebook posso
arrivare a raggiungere 500 like (mi piace)
pagando solamente 10 euro.
Questo succede perché facebook segmenta
in maniera incredibile gli interessi delle
persone, e perché un LIKE non costa.
Le aziende pubblicitarie parlano sempre più
di SOCIAL MEDIA MARKETING, il marketing
che sfrutta i meccanismi di Crowdsourcing.
Tutto ciò che viene creato dai miei AMICI è
cool, è verificabile... Mi fido di chi seguo,
quindi per le aziende entrare in questo
circolo di FIDUCIA è estremamente
importante!
Il SOCIAL NETWORK per antonomasia è FACEBOOK,
ma anche Twitter con i suoi hashtag # e le sue foto
sta ottenendo grande successo.
Casi a parte sono poi LinkedIN e Pinterest.
I CANALI SOCIAL mettono al centro le masse, e ci
permettono di iniziare un DIALOGO (questo non era
mai avvenuto sui media tradizionali).
I FORUM, rimangono poco utilizzati, quasi un ‘vecchio
strumento per nostalgici’.
Avere un sito web collegato a canali social ben
aggiornati è oltretutto utile non solo a creare traffico,
ma ci fa guadagnare posizioni su google.

http://www.michelemastellaro.com/index.html
http://www.palladiorestauri.it/pages/palladio.html
2 siti 2
Il livello di utilizzo delle tecnologie web è davvero molto basso!
Sfruttare poco un media come il web vuol dire precludersi nuovi lavori
Fare davvero POCO in più può portare a grandi risultati!

Domande e RisposteDomande e Risposte

grazie per l’ascolto...

My lesson workshop at Univr

Recommended

Recommended

More Related Content

Similar to My lesson workshop at Univr

Similar to My lesson workshop at Univr (20)

My lesson workshop at Univr