1. La navigazione tra canali
2. Un sito a prova di social
3. Un sito social oriented: perchè? con quali obiettivi?
4. Un sito social oriented. Chi se ne occupa?
5. Social VS Sito web
6. Integrazione dei loghi social nel sito
7. I widget ufficiali
8. I plugin per Wordpress
9. Come realizzare un social wall senza dover
passare dal codice
10. Social login: dati a go go
11. Condividi, ma con una strategia
2. SOCIAL
by
wEB DESIGN
Agnese Longo Giorgia Pallaro
@AgneseLongo
#7formazione
@Mistoacrilico
3. SOCIAL
by
wEB DESIGN
@AgneseLongo
#7formazione
@Mistoacrilico
digital
strategist
web
designer
4. #7formazione
@AgneseLongo
SOCIAL by wEB DESIGN
prima parte
1. La navigazione tra canali
2. Un sito a prova di social
3. Un sito social oriented: perchè? con quali obiettivi?
4. Un sito social oriented. Chi se ne occupa?
5. Social VS Sito web
6. Social login: dati a go go
7. Condividi, ma con una strategia
5. #7formazione
@Mistoacrilico
SOCIAL by wEB DESIGN
seconda parte
1. Integrazione dei loghi social nel sito
2. I widget ufficiali
3. I plugin per Wordpress
4. Come realizzare un social wall senza dover
passare dal codice
6. SOCIAL by wEB DESIGN
prima parte
UN SITO A
PROVA DI
SOCIAL
#7formazione
Gli utenti navigano spostandosi da un canale
all’altro.
Questo implica una riflessione durante la
progettazione del sito web.
Bisogna offrire all’utente un’esperienza
coerente
Non basta più focalizzarsi su un singolo
media, ma valorizzare le sinergie tra essi.
7. SOCIAL by wEB DESIGN
prima parte
LA
NAVIGAZIONE
TRA UN
CANALE E
L’ALTRO
#7formazione
Oggi i consumatori sono sempre più
favorevoli all’utilizzo dei social media.
Chiedono il dialogo con il brand e
“pretendono” che quest’ultimo lo ascolti.
Per questo è fondamentale aggiornare la
propria immagine sul web integrandola al
massimo con i social media.
8. I 6 CONSIGLI PER RENDERE UN
SITO SOCIAL ORIENTED:
1. Mostrare al nuovo cosa ne pensa il
vecchio
@AgneseLongo #7formazione @Mistoacrilico
9. SOCIAL by wEB DESIGN
prima parte
UN SITO A
PROVA DI
SOCIAL
1. Mostrare
al nuovo cosa
ne pensa il
vecchio
#7formazione
http://www.fiat500.com/
10. I 6 CONSIGLI PER RENDERE UN SITO
SOCIAL ORIENTED:
2. Condividere: permettere all’utente
di portare all’esterno tutto ciò che è
contenuto all’interno.
@AgneseLongo #7formazione @Mistoacrilico
11. SOCIAL by wEB DESIGN http://www.kartell.com/it
prima parte
UN SITO A
PROVA DI
SOCIAL
2. Condividere:
permettere
all’utente
di portare
all’esterno
tutto ciò che
è contenuto
all’interno.
#7formazione
12. I 6 CONSIGLI PER RENDERE UN SITO
SOCIAL ORIENTED:
3. Chiedere alla massa
@AgneseLongo #7formazione @Mistoacrilico
13. SOCIAL by wEB DESIGN
prima parte
UN SITO A PROVA
DI SOCIAL
3. Chiedere alla massa:
permettere all’utente
di poter subito, e
in maniera veloce,
esprimere la propria
opinione o esperienza
su un prodotto o
servizio.
#7formazione
http://c4cactus.citroen.com/it/concept-car
14. I 6 CONSIGLI PER RENDERE UN SITO
SOCIAL ORIENTED:
4. Incoraggiare la conversazione
@AgneseLongo #7formazione @Mistoacrilico
15. SOCIAL by wEB DESIGN
prima parte
UN SITO A
PROVA DI
SOCIAL
4. Incoraggiare la
conversazione.
#7formazione
http://www.leroymerlin.it/
16. I 6 CONSIGLI PER RENDERE UN SITO
SOCIAL ORIENTED:
5. Aumentare la credibilità
@AgneseLongo #7formazione @Mistoacrilico
17. SOCIAL by wEB DESIGN
prima parte
UN SITO A
PROVA DI
SOCIAL
5. Aumentare
la credibilità
#7formazione
http://www.bershka.com/it/it/
18. SOCIAL by wEB DESIGN
prima parte
UN SITO A
PROVA DI
SOCIAL
5. Aumentare la
credibilità
#7formazione
http://www.nutellastories.com/
19. I 6 CONSIGLI PER RENDERE UN SITO
SOCIAL ORIENTED:
6. Mostrare la propria autenticità
@AgneseLongo #7formazione @Mistoacrilico
20. SOCIAL by wEB DESIGN
prima parte
UN SITO A
PROVA DI
SOCIAL
6. Mostrare
la propria
autenticità
#7formazione
http://www.lorenzinihorse.it/
21. Con questi sei elementi, il sito web si
trasforma in un “luogo” dove il consumatore
--> si informa
--> conosce il core dell’azienda
--> interagisce con i contenuti presenti
--> partecipa con le sue opinioni
--> condivide
@AgneseLongo #7formazione @Mistoacrilico
22. SOCIAL by wEB DESIGN
prima parte
UN SITO
SOCIAL
ORIENTED:
QUALI
OBIETTIVI?
#7formazione
Il sito web oggi, non può funzionare solo
come “brochure interattiva”.
Deve diventare un vero e proprio hub
comunicazionale che porta il piano della
relazione commerciale sulla conversazione.
ll prodotto o il servizio devono rimanere in
secondo piano.
23. Gli obiettivi principali devono essere:
• trasmettere l’identità del brand
• generare conversazioni
• rafforzare la community
• raccogliere dati sugli utenti
SOCIAL by wEB DESIGN
prima parte
UN SITO
SOCIAL
ORIENTED:
QUALI
OBIETTIVI?
#7formazione
24. SOCIAL by wEB DESIGN
prima parte
UN SITO
SOCIAL
ORIENTED:
QUALI
Illy ospita
all’interno del
sito web la
community
tesa verso
l’interazione
con i fan.
#7formazione
http://www.illy.com/wps/wcm/connect/it/community/
25. SOCIAL by wEB DESIGN
prima parte
UN SITO
SOCIAL
ORIENTED:
CHI SE NE
OCCUPA?
#7formazione
I social media vengono generalmente
considerati un ambito di competenza dell’area
marketing.
I web designer infatti affermano di occuparsi
dei siti web.
Ma siamo proprio sicuri che la responsabilità
dei social sia solo dei Social Media Qualcosa? :-)
26. SOCIAL by wEB DESIGN
prima parte
Oggi un web designer non può più limitarsi a creare
un bel sito web.
Deve andare oltre... Deve renderlo social oriented!
I web designer in tale processo diventano USER
EXPERIENCE DESIGNER e lavorano in stretta sinergia
con il team responsabile dei canali social con lo
scopo
--> di favorire traffico da e verso il sito web
--> di creare un’esperienza di navigazione coerente
UN SITO
SOCIAL
ORIENTED:
CHI SE NE
OCCUPA?
#7formazione
27. SOCIAL by wEB DESIGN
prima parte
SOCIAL
SITO WEB
#7formazione
Di seguito andiamo a osservare le 8
possibili integrazioni tra sito web e
social
--> Questo non implica che bisogna per
forza andare verso il livello massimo di
integrazione ma ci aiuta a capire “COSA
SI PUO’ FARE” e su questa base decidere
“COSA SI VUOLE FARE” .
"Jeremiah Owyang, Making your Corporate Website Relevant”
28. SOCIAL by wEB DESIGN
prima parte
SOCIAL
SITO WEB
#7formazione
29. SOCIAL by wEB DESIGN http://www.apple.com/
prima parte
SOCIAL
SITO WEB
1. Nessuna
integrazione
social
#7formazione
30. SOCIAL by wEB DESIGN http://www.bpv.it/index.php
prima parte
SOCIAL
SITO WEB
1. Nessuna
integrazione
social
#7formazione
31. SOCIAL by wEB DESIGN http://www.zara.com/it/
prima parte
SOCIAL
SITO WEB
3. Link agli spazi social
ma senza strategia: nel
sito aziendale vengono
inserite le icone dei
social ma senza altra
indicazione; come
fossero normali link ad
altri siti.
#7formazione
32. SOCIAL by wEB DESIGN http://www.desigual.com/it_IT
prima parte
SOCIAL
SITO WEB
2. Link agli
spazi social ma
spingendo a
condividere.
#7formazione
33. SOCIAL by wEB DESIGN http://www.liujo.com/it/
prima parte
SOCIAL
SITO WEB
4. Integrare
il brand negli
spazi “social”.
#7formazione
34. SOCIAL by wEB DESIGN http://www.missoni.com/
prima parte
SOCIAL
SITO WEB
4. Integrare
il brand negli
spazi “social”.
#7formazione
35. SOCIAL by wEB DESIGN http://www.citroen.it/
prima parte
SOCIAL
SITO WEB
5. Inserire le
discussioni
nel sito.
#7formazione
37. http://goo.gl/NAjUel SOCIAL by wEB DESIGN
prima parte
SOCIAL
SITO WEB
7. Log-in
sociale
spingendo a
condividere
#7formazione
38. SOCIAL by wEB DESIGN http://www.socialnetwall.alfaromeo.com/
prima parte
SOCIAL
SITO WEB
8. Integrazione
totale
#7formazione
39. SOCIAL by wEB DESIGN
prima parte
SOCIAL LOGIN:
DATI A GO GO
Il social login è
una pratica ormai
diffusa su molti
siti e permette di
facilitare agli utenti
la registrazione sul
proprio sito.
#7formazione
http://www.yoox.com/
40. • Semplifica il processo di registrazione
• Favorisce l’aumento della percentuale di
registrazioni e poi di utilizzo in seguito del
servizio
• Permette all’azienda di ottenere un database
pulito
• Offre alle aziende la possibilità di far vivere al
proprio consumatore un’esperienza di acquisto
migliore
http://goo.gl/L6KxOK
@AgneseLongo #7formazione @Mistoacrilico
41. SOCIAL by wEB DESIGN
prima parte
SOCIAL
LOGIN:
DATI A
GO GO
#7formazione
Dalla ricerca “THE VALUE OF SOCIAL LOGIN”
prodotta da Janrain + blue si osserva come:
--> I consumatori sono sempre più abituati
al social login, infatti almeno l’87%
degli intervistati ci ha fatto caso ed altri
frequentano abbastanza spesso siti con
questa tecnologia.
--> Il 52% di questi lo ha utilizzato almeno
una volta e molti vorrebbero poter scegliere.
42. SOCIAL by wEB DESIGN
prima parte
--> Il 59% degli intervistati sostiene che la
capacità del social login di suggerire prodotti
e promozioni di loro interesse è molto utile
--> il 60% dichiara che i siti di aziende che
utilizzano questa dinamica siano percepiti
in modo molto più positivo e diano una
sensazione di novità nella loro esperienza.
SOCIAL
LOGIN:
DATI A
GO GO
#7formazione
43. Volete sapere quale è il Social
preferito dai consumatori per il
Social Login?
SOCIAL by wEB DESIGN
prima parte
SOCIAL
LOGIN:
DATI A
GO GO
#7formazione
44. SOCIAL by wEB DESIGN
prima parte
--> Il 64% degli intervistati sostiene che
il social login sia un’opzione che i siti
dovrebbero offrire.
--> Il 52% si aspetta un’esperienza migliore
dopo aver effettuato il social login e sono
molto attratti da una personalizzazione
maggiore che elimini ridondanze di
pubblicità non in target con i loro interessi.
SOCIAL
LOGIN:
DATI A
GO GO
#7formazione
45. SOCIAL by wEB DESIGN
prima parte
Social Profile Navigator mostra un quadro
delle informazioni personali cedute ai social
media. Possiamo scoprire, ad esempio,
come Facebook e LinkedIn siano i servizi
che, previo consenso, chiedono e dunque
hanno più dati (da quelli demografici a quelli
sugli interessi e la vita lavorativa). Twitter e
Google, invece, ne catturano di meno.
http://janrain.com/
SOCIAL
LOGIN:
DATI A
GO GO
#7formazione
46.
47. Vi siete mai imbattuti in
contenuti incondivisibili?
Cos’avete pensato?
Ma soprattutto, lo avete
condiviso?
SOCIAL by wEB DESIGN
prima parte
ANDIAMO
OLTRE LO
“SHARE
THIS”
#7formazione
48. SOCIAL by wEB DESIGN
prima parte
ANDIAMO OLTRE
LO SHARE THIS
Il problema è che
molto spesso il
bottone “share this”
viene applicato in
modo indiscriminato
in tutto il sito, senza
alcuna strategia alla
base.
#7formazione
49. SOCIAL by wEB DESIGN
prima parte
Questo ci insegna che:
--> prima di progettare un sito web social
oriented occorre pianificare con precisione
la strategia alla base (share, follow,
community, live update ecc...)
ANDIAMO
OLTRE LO
“SHARE
THIS”
#7formazione
50. Di seguito alcuni esempi virtuosi di come
integrare in modo efficace una strategia
social all’interno del sito web.
56. “Mi rendi il sito più social?”
@AgneseLongo #7formazione @Mistoacrilico
57. Non basta aggiungere le icone dei profili
social in home page...
Ma è pur sempre un buon inizio.
@AgneseLongo #7formazione @Mistoacrilico
58. SOCIAL by wEB DESIGN
seconda parte
NIKE
21 M
6,7 M
3,9 M
2,7 M
Ma nessuna
icona nel sito
#7formazione
59. Non c’è una legge matematica che
spieghi dove posizionare le icone.
Tuttavia....
@AgneseLongo #7formazione @Mistoacrilico
60. SOCIAL by wEB DESIGN
seconda parte
HEADER
Attenzione alle call
to action: le icone
dei social media non
devono attirare più
attenzione di cta
come “Acquista” o
“Contattaci”
#7formazione
61. SOCIAL by wEB DESIGN
seconda parte
FOOTER
Allo stesso tempo,
posizionare le icone
del footer significa non
dar loro rilevanza: non
sempre l’utente scrolla
fino alla fine del sito.
#7formazione
62. SOCIAL by wEB DESIGN
seconda parte
SEZIONE
DEDICATA
E’ interessante
anche la possibilità
di dedicare un’intera
sezione del sito ai
social media
#7formazione
63. “Carine le icone! Ma non è che
puoi farle tutte verdi?
Proprio come il mio logo!”
@AgneseLongo #7formazione @Mistoacrilico
64.
65. C’erano una volta le linee
guida...
@AgneseLongo #7formazione @Mistoacrilico
66. https://www.facebookbrand.com/
Facebook “f” Logo CMYK / .ai Facebook “f” Logo CMYK / .ai
FACEBOOK ASSET USAGE
Preserve Clear Space Incorrect Use
To preserve the integrity of the “f” logo, always
maintain a minimum clear space around the logo.
This clear space insulates our “f” logo from
distracting visual elements, such as other logos,
copy, illustrations or photography. Always maintain
this minimum clear space, even when proportionally
scaling the logo.
To ensure accurate and consistent use, never alter,
rotate, embellish or attempt to recreate the “f” logo.
Don’t alter the rounded box shape or alter the
proportions, or add any embellishments.
“f” Logo
Using the “f” Logo
The primary use of the “f” logo is to promote your
organization’s presence on Facebook. For
example, when you say, “Find us on Facebook”
and link to your Facebook Page, it’s appropriate to
use the “f” logo.
Maintain Proportions
The proportions and spacing of the “f” logo should
never be altered for any reason. Hold the “Shift”
key in most software programs to maintain the
proportions while scaling up or down.
Print & Packaging
75. SOCIAL by wEB DESIGN
seconda parte
FACEBOOK
Il bottone “Mi piace”
Il modo più rapido per
condividere contenuti su
Facebook.
Esistono numerose varianti,
tutte disponibili sia con
la dicitura “Mi piace” che
“Consiglia”.
#7formazione
https://developers.facebook.com/docs/plugins/like-button
INSERIRE
IL LINK DA
CONDIVIDERE
TIPOLOGIE DI LAYOUT
76. SOCIAL by wEB DESIGN
seconda parte
FACEBOOK
Il bottone “Mi piace”
Prevede il like immediato del
contenuto e la condivisione
dell’attività su Facebook.
E’ inoltre possibile commentare
l’attività, che apparirà così nella
bacheca dell’utente.
#7formazione
https://developers.facebook.com/docs/plugins/like-button
NEL REGISTRO ATTIVITA’
IN BACHECA
77. SOCIAL by wEB DESIGN
seconda parte
FACEBOOK
Perché la scelta
del bottone è così
importante
#7formazione
Amazon: bottoni privi
dei contatori
78. SOCIAL by wEB DESIGN
seconda parte
FACEBOOK
Perché la scelta
del bottone è così
importante
#7formazione
79. SOCIAL by wEB DESIGN
seconda parte
FACEBOOK
Bottone di condivisione
Prevede la condivisione in
gruppi, pagine pubbliche,
nella propria timeline o via
messaggio privato; l’utente può
aggiungengere un messaggio
privato.
#7formazione
https://developers.facebook.com/docs/plugins/share-button
INSERIRE
IL LINK DA
CONDIVIDERE
80. SOCIAL by wEB DESIGN
seconda parte
FACEBOOK
“MI PIACE”
vs
“cONDIVIDI”
#7formazione
81. SOCIAL by wEB DESIGN
seconda parte
FACEBOOK
Il “like box”
per le pagine
#7formazione
https://developers.facebook.com/docs/plugins/like-box-for-pages
82. SOCIAL by wEB DESIGN
seconda parte
FACEBOOK
Il “like box”
per le pagine
#7formazione
83. SOCIAL by wEB DESIGN
seconda parte
FACEBOOK
integrazione dei
post nel sito
#7formazione
https://developers.facebook.com/docs/plugins/embedded-posts
84. SOCIAL by wEB DESIGN
seconda parte
FACEBOOK
integrazione
dei post nel
sito
#7formazione
85. SOCIAL by wEB DESIGN
seconda parte
FACEBOOK
Integrazione dei
commenti
#7formazione
https://developers.facebook.com/docs/plugins/comments
86. SOCIAL by wEB DESIGN
seconda parte
FACEBOOK
Integrazione dei
commenti
#7formazione
101. SOCIAL by wEB DESIGN https://business.pinterest.com/it/widget-builder#do_pin_it_button
seconda parte
PINTEREST
Incorporare il
bottone “Pin It”
nel sito
#7formazione
102. SOCIAL by wEB DESIGN https://business.pinterest.com/it/widget-builder#do_pin_it_button
seconda parte
PINTEREST
Far apparire
il bottone
“Pin it” sopra
un’immagine al
passaggio del
mouse
#7formazione
103. SOCIAL by wEB DESIGN https://business.pinterest.com/it/widget-builder#do_embed_pin
seconda parte
seconda parte
PINTEREST
Incorporare un
post di pinterest
nel sito
#7formazione
114. Il social wall: un modo interessante
per aggregare i contenuti
@AgneseLongo #7formazione @Mistoacrilico
115. SOCIAL by wEB DESIGN
seconda parte
IL SOCIAL
WALL
#7formazione
http://www.vw.com/
116. SOCIAL by wEB DESIGN
seconda parte
IL SOCIAL
WALL CON
IFTTT
#7formazione
+
117. SOCIAL by wEB DESIGN https://ifttt.com
seconda parte
IF THIS
THAN THAT
è un servizio
che permette di
automatizzare
varie operazioni
compiute
online.
#7formazione
118. SOCIAL by wEB DESIGN
seconda parte
IF THIS
THAN THAT
“Ogni volta che
pubblico una
nuova foto
su Instagram,
crea un post
incorporato su
Tumblr”
#7formazione