Social by web design - #7formazione GTMasterClub

SOCIAL

wEB DESIGN

by

#7formazione

SOCIAL

wEB DESIGN

by

@AgneseLongo

#7formazione

@MistoacrilicoAgnese Longo Giorgia Pallaro

SOCIAL

wEB DESIGN

by

@AgneseLongo#7formazione

@Mistoacrilico

digital strategist

web designer

@AgneseLongo

#7formazione

SOCIAL wEB DESIGNby

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

prima parte

@Mistoacrilico

#7formazione

SOCIAL wEB DESIGNby

1. Integrazione dei loghi social nel sito2. I widget ufficiali3. I plugin per Wordpress4. Come realizzare un social wall senza dover

passare dal codice

seconda parte

SOCIAL wEB DESIGNby

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.

SOCIAL wEB DESIGNby

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.

I 6 CONSIGLI PER RENDERE UN SITO SOCIAL ORIENTED:

1. Mostrare al nuovo cosa ne pensa il vecchio

#7formazione@AgneseLongo @Mistoacrilico

SOCIAL wEB DESIGNby

prima parte


#7formazione

1. Mostrare al nuovo cosa ne pensa il vecchio

http://www.fiat500.com/


2. Condividere: permettere all’utente di portare all’esterno tutto ciò che è

contenuto all’interno.


http://www.kartell.com/itSOCIAL wEB DESIGNby

prima parte


#7formazione

2. Condividere: permettere all’utente di portare all’esterno tutto ciò che è contenuto all’interno.


3. Chiedere alla massa


SOCIAL wEB DESIGNby

prima parte


#7formazione

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.

http://c4cactus.citroen.com/it/concept-car


4. Incoraggiare la conversazione


SOCIAL wEB DESIGNby

prima parte


#7formazione

4. Incoraggiare la conversazione.

http://www.leroymerlin.it/


5. Aumentare la credibilità


SOCIAL wEB DESIGNby

prima parte


#7formazione


http://www.bershka.com/it/it/

SOCIAL wEB DESIGNby

prima parte


#7formazione


http://www.nutellastories.com/


6. Mostrare la propria autenticità


SOCIAL wEB DESIGNby

prima parte


#7formazione

6. Mostrare la propria autenticità

http://www.lorenzinihorse.it/

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


SOCIAL wEB DESIGNby

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.

Gli obiettivi principali devono essere:

• trasmettere l’identità del brand• generare conversazioni• rafforzare la community• raccogliere dati sugli utenti

SOCIAL wEB DESIGNby

prima parte

UN SITO SOCIAL ORIENTED: QUALI OBIETTIVI?

#7formazione

SOCIAL wEB DESIGNby

prima parte

UN SITO SOCIAL ORIENTED: QUALI

#7formazione

Illy ospita all’interno del sito web la community tesa verso l’interazione con i fan.

http://www.illy.com/wps/wcm/connect/it/community/

SOCIAL wEB DESIGNby

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? :-)

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

SOCIAL wEB DESIGNby

prima parte

UN SITO SOCIAL ORIENTED: CHI SE NE OCCUPA?

#7formazione

SOCIAL wEB DESIGNby

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”

SOCIAL wEB DESIGNby

prima parte

SOCIAL

SITO WEB

#7formazione

http://www.apple.com/SOCIAL wEB DESIGNby

prima parte

#7formazione

SOCIAL

SITO WEB

1. Nessuna integrazionesocial

http://www.bpv.it/index.phpSOCIAL wEB DESIGNby

prima parte

#7formazione

SOCIAL

SITO WEB

1. Nessuna integrazionesocial

http://www.zara.com/it/SOCIAL wEB DESIGNby

prima parte

#7formazione

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.

http://www.desigual.com/it_ITSOCIAL wEB DESIGNby

prima parte

#7formazione

SOCIAL

SITO WEB

2. Link agli spazi social ma spingendo a condividere.

http://www.liujo.com/it/SOCIAL wEB DESIGNby

prima parte

#7formazione

SOCIAL

SITO WEB

4. Integrare il brand negli spazi “social”.

http://www.missoni.com/SOCIAL wEB DESIGNby

prima parte

#7formazione

SOCIAL

SITO WEB

4. Integrare il brand negli spazi “social”.

http://www.citroen.it/SOCIAL wEB DESIGNby

prima parte

#7formazione

SOCIAL

SITO WEB

5. Inserire le discussioni nel sito.

http://www.alitalia.com/SOCIAL wEB DESIGNby

prima parte

#7formazione

SOCIAL

SITO WEB

6. Log-in “social” al sito web: Alitalia

http://goo.gl/NAjUelSOCIAL wEB DESIGNby

prima parte

#7formazione

SOCIAL

SITO WEB

7. Log-in sociale spingendo a condividere

http://www.socialnetwall.alfaromeo.com/SOCIAL wEB DESIGNby

prima parte

#7formazione

SOCIAL

SITO WEB

8. Integrazione totale

SOCIAL wEB DESIGNby

prima parte

SOCIAL LOGIN: DATI A GO GO

#7formazione

Il social login è una pratica ormai diffusa su molti siti e permette di facilitare agli utenti la registrazione sul proprio sito.

http://www.yoox.com/

•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

SOCIAL wEB DESIGNby

prima parte


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

--> 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 wEB DESIGNby

prima parte


#7formazione

Volete sapere quale è il Social preferito dai consumatori per il

Social Login?

SOCIAL wEB DESIGNby

prima parte


#7formazione

--> 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 wEB DESIGNby

prima parte


#7formazione

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 wEB DESIGNby

prima parte


#7formazione

Vi siete mai imbattuti in contenuti incondivisibili?

Cos’avete pensato?

Ma soprattutto, lo avete condiviso?

SOCIAL wEB DESIGNby

prima parte

ANDIAMO OLTRE LO “SHARE THIS”

#7formazione

SOCIAL wEB DESIGNby

prima parte

ANDIAMO OLTRE LO SHARE THIS

#7formazione

Il problema è che molto spesso il bottone “share this” viene applicato in modo indiscriminato in tutto il sito, senza alcuna strategia alla base.

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

SOCIAL wEB DESIGNby

prima parte

ANDIAMO OLTRE LO “SHARE THIS”

#7formazione

Di seguito alcuni esempi virtuosi di come integrare in modo efficace una strategia social all’interno del sito web.

http://difendilaqualita.it/

http://goo.gl/6AUcNJ

http://www.peroni.it/

http://www.nissanusa.com/passiongenome/#nameDrawer

“Mi rendi il sito più social?”


Non basta aggiungere le icone dei profili social in home page...

Ma è pur sempre un buon inizio.


SOCIAL wEB DESIGNby

seconda parte

NIKE

#7formazione

Ma nessuna icona nel sito

21 M

6,7 M

3,9 M

2,7 M

Non c’è una legge matematica che spieghi dove posizionare le icone.

Tuttavia....


SOCIAL wEB DESIGNby

seconda parte

HEADER

#7formazione

Attenzione alle call to action: le icone

dei social media non devono attirare più

attenzione di cta come “Acquista” o

“Contattaci”

SOCIAL wEB DESIGNby

seconda parte

FOOTER

#7formazione

Allo stesso tempo, posizionare le icone

del footer significa non dar loro rilevanza: non sempre l’utente scrolla fino alla fine del sito.

SOCIAL wEB DESIGNby

seconda parte

SEZIONE DEDICATA

#7formazione

E’ interessante anche la possibilità

di dedicare un’intera sezione del sito ai

social media

“Carine le icone! Ma non è che puoi farle tutte verdi?

Proprio come il mio logo!”


C’erano una volta le linee guida...


Facebook “f” Logo CMYK / .ai Facebook “f” Logo CMYK / .ai

https://www.facebookbrand.com/

FACEBOOK ASSET USAGE ® ALL RIGHTS RESERVED

FACEBOOK ASSET USAGE

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.

Incorrect UsePreserve Clear SpaceTo 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.

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.

Maintain Proportions

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.

Using the “f” Logo

Modify the "f" logo in any way, such as changing design or color. If you are unable to use the correct color due to technical limitations, you may revert to black and white.

Don’t

Your presence on Facebook, such as your Page, timeline, group, app or Event

Your implementation of Facebook on your website

Your product’s integration with Facebook such as “For use with Facebook”

Content that originates from the Facebook service

Only use the ‘f’ logo to refer to:

Include a clear call to action that communicates your use of Facebook (for example, ‘Like us on Facebook’ or ‘Install our app on Facebook) unless the ‘f’ logo is side-by-side with other social media logos

Do

Print & Packaging

“f” Logo

https://about.twitter.com/it/press/brand-assets

https://help.instagram.com/304689166306603

http://instagram.com/press/

https://www.youtube.com/yt/brand/it/color.html

https://www.youtube.com/yt/brand/it/downloads.html

https://business.pinterest.com/it/brand-guidelines

Facilitare l’interazione:dove, come, perché?


I wIDGET UFFICIALI


I widget ufficiali

FACEBOOK


https://developers.facebook.com/docs/plugins/

FACEBOOKSOCIAL wEB DESIGNby

seconda parte

FACEBOOK

Una breve panoramica

dei plugin più interessanti

#7formazione

SOCIAL wEB DESIGNby

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

SOCIAL wEB DESIGNby

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

SOCIAL wEB DESIGNby

seconda parte

FACEBOOK

Perché la scelta del bottone è così

importante

#7formazione

Amazon: bottoni privi dei contatori

SOCIAL wEB DESIGNby

seconda parte

FACEBOOK

Perché la scelta del bottone è così

importante

#7formazione

SOCIAL wEB DESIGNby

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

SOCIAL wEB DESIGNby

seconda parte

FACEBOOK

“MI PIACE”VS

“CONDIVIDI”

#7formazione

SOCIAL wEB DESIGNby

seconda parte

FACEBOOK

Il “like box”per le pagine

#7formazione

https://developers.facebook.com/docs/plugins/like-box-for-pages

SOCIAL wEB DESIGNby

seconda parte

FACEBOOK

Il “like box”per le pagine

#7formazione

SOCIAL wEB DESIGNby

seconda parte

FACEBOOK

Integrazione dei post nel sito

#7formazione

https://developers.facebook.com/docs/plugins/embedded-posts

SOCIAL wEB DESIGNby

seconda parte

FACEBOOK

Integrazione dei post nel

sito

#7formazione

SOCIAL wEB DESIGNby

seconda parte

FACEBOOK

Integrazione dei commenti

#7formazione

https://developers.facebook.com/docs/plugins/comments

SOCIAL wEB DESIGNby

seconda parte

FACEBOOK

Integrazione dei commenti

#7formazione

I widget ufficiali

TwITTER


SOCIAL wEB DESIGNby

seconda parte

#7formazione

TWITTER

Il bottone “Tweet”

https://about.twitter.com/resources/buttons#tweet

SOCIAL wEB DESIGNby

seconda parte

#7formazione

TWITTER

Il bottone “Segui”

https://about.twitter.com/resources/buttons#follow

SEGUI

SOCIAL wEB DESIGNby

seconda parte

#7formazione

TWITTER

“Twittare unhashtag”

https://about.twitter.com/resources/buttons#tweet

HASHTAG

SOCIAL wEB DESIGNby

seconda parte

#7formazione

TWITTER

“Menzionare” un account

https://about.twitter.com/resources/buttons#mention

MENZIONE

SOCIAL wEB DESIGNby

seconda parte

#7formazione

TWITTER

Incorporare un tweet nel sito

o nel blog

SOCIAL wEB DESIGNby

seconda parte

#7formazione

TWITTER

Incorporare la timeline di un

account

https://twitter.com/settings/widgets/new/user

SOCIAL wEB DESIGNby

seconda parte

#7formazione

TWITTER

Incorporare una lista

creata da un account

https://twitter.com/settings/widgets/new/list

SOCIAL wEB DESIGNby

seconda parte

#7formazione

TWITTER

Incorporare la timeline

inerente un hashtag

https://twitter.com/settings/widgets/new/user

I widget ufficiali

GOOGLE+


SOCIAL wEB DESIGNby

seconda parte

GOOGLE+

Il pulsante +1

#7formazione

https://developers.google.com/+/web/+1button/?hl=it

SOCIAL wEB DESIGNby

seconda parte

GOOGLE+

Il badge google+

#7formazione

https://developers.google.com/+/web/badge/?hl=it

http://www.skande.com/SOCIAL wEB DESIGNby

seconda parte

GOOGLE+

Il badge google+

#7formazione

I widget ufficiali

PINTEREST


https://business.pinterest.com/it/widget-builder#do_pin_it_buttonSOCIAL wEB DESIGNby

seconda parte

PINTEREST

Incorporare il bottone “Pin It”

nel sito

#7formazione

https://business.pinterest.com/it/widget-builder#do_pin_it_buttonSOCIAL wEB DESIGNby

seconda parte

#7formazione

PINTEREST

Far apparire il bottone

“Pin it” sopra un’immagine al passaggio del

mouse

seconda partehttps://business.pinterest.com/it/widget-builder#do_embed_pinSOCIAL wEB DESIGNby

seconda parte

PINTEREST

Incorporare un post di pinterest

nel sito

#7formazione

https://business.pinterest.com/it/widget-builder#do_embed_user

INSERIRE IL LINK DELL’ACCOUNT PINTEREST DA CONDIVIEDERE

SOCIAL wEB DESIGNby

seconda parte

#7formazione

PINTEREST

Incorporare gli ultimi post

“pinnati” da un account

https://business.pinterest.com/it/widget-builder#do_pin_it_button

INSERIRE IL LINK DELLA BOARD DA

CONDIVIEDERE

SOCIAL wEB DESIGNby

seconda parte

#7formazione

PINTEREST

Incorporare gli ultimi

post “pinnati” in una

determinata board

I widget ufficiali

INSTAGRAM


SOCIAL wEB DESIGNby

seconda parte

INSTAGRAM

Incorporare un post nel sito

#7formazione

I plugin per wordpress


https://wordpress.org/plugins/share-this/

https://wordpress.org/plugins/addthis/

SHARE THIS

ADD THIS

https://wordpress.org/plugins/quotable/

QUOTABLE

https://wordpress.org/plugins/alpine-photo-tile-for-instagram/

THE ALPINE PHOTOTILEFOR INSTAGRAM

https://wordpress.org/plugins/pinterest-pin-it-button/

PINTEREST“PIN IT” BUTTON

https://wordpress.org/plugins/gallery-share/

GALLERY SHARE

Il social wall: un modo interessante per aggregare i contenuti


SOCIAL wEB DESIGNby

seconda parte

IL SOCIAL WALL

#7formazione

http://www.vw.com/

SOCIAL wEB DESIGNby

seconda parte

IL SOCIAL WALL CON

IFTTT

#7formazione

+

https://ifttt.comSOCIAL wEB DESIGNby

seconda parte

#7formazione

IF THIS THAN THAT

è un servizio che permette di automatizzare

varie operazioni compiute

online.

SOCIAL wEB DESIGNby

seconda parte

#7formazione

IF THIS THAN THAT

“Ogni volta che pubblico una nuova foto

su Instagram, crea un post

incorporato su Tumblr”

1

2

3


Se siete ancora vivi...Ricapitoliamo i

punti salienti della presentazione ;-)


Offrite all’utente un’esperienza coerente tra i

vostri canali online


Gli utenti chiedono un dialogo: ascoltateli ed

interagite


Rendete l’utente un partecipante attivo del

vostro sito...

Ma mi raccomando, moderate! ;-)


Perchè farlo?

IdentitàConversazioni

CommunityDati


Chiedetevi sempre:

“Io lo condividerei?”


Le linee guida del brand

Facebook

Twitter

Instagram

Youtube

Pinterest

https://www.facebookbrand.com/

https://about.twitter.com/it/press/brand-assets

https://help.instagram.com/304689166306603http://instagram.com/press/

https://www.youtube.com/yt/brand/it/color.htmlhttps://www.youtube.com/yt/brand/it/downloads.html

https://business.pinterest.com/it/brand-guidelines


I widget ufficiali

Facebook

Twitter

Google+

Pinterest

https://developers.facebook.com/docs/plugins/

https://about.twitter.com/resources/buttonshttps://twitter.com/settings/widgets/

https://developers.google.com/+/web/

https://business.pinterest.com/it/widget-builder


I plugin per wordpress

https://wordpress.org/plugins/share-this/

https://wordpress.org/plugins/addthis/

https://wordpress.org/plugins/quotable/

https://wordpress.org/plugins/alpine-photo-tile-for-instagram/

https://wordpress.org/plugins/pinterest-pin-it-button/

https://wordpress.org/plugins/gallery-share/

Share this

Add this

Quotable

Alpine Phototile

Pin it button

Gallery Share

@AgneseLongo @Mistoacrilico

THANKS FOR wATCHING!

#7formazione

Social by web design - #7formazione GTMasterClub

Social Media

Transcript of Social by web design - #7formazione GTMasterClub