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


http://www.davidecarpin.net

http://www.davidecarpin.net


IntroduzioneIntroduzione



LA Comunicazione WebUno 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 DISPOSITIVIDIVERSI 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.


http://it.wikipedia.org/wiki/Pubblicit%C3%A0

http://it.wikipedia.org/wiki/Pubblicit%C3%A0

http://it.wikipedia.org/wiki/Comunicazione

http://it.wikipedia.org/wiki/Comunicazione

http://it.wikipedia.org/wiki/Mass_media

http://it.wikipedia.org/wiki/Mass_media

http://it.wikipedia.org/wiki/Radio_(mass_media)

http://it.wikipedia.org/wiki/Radio_(mass_media)

http://it.wikipedia.org/wiki/Televisione

http://it.wikipedia.org/wiki/Televisione

http://it.wikipedia.org/wiki/Cinema

http://it.wikipedia.org/wiki/Cinema

http://it.wikipedia.org/wiki/Giornale

http://it.wikipedia.org/wiki/Giornale

http://it.wikipedia.org/wiki/Periodico_(stampa)

http://it.wikipedia.org/wiki/Periodico_(stampa)

http://it.wikipedia.org/wiki/Manifesto_(stampato)

http://it.wikipedia.org/wiki/Manifesto_(stampato)

http://it.wikipedia.org/wiki/Poster

http://it.wikipedia.org/wiki/Poster

http://it.wikipedia.org/wiki/Below_the_line

http://it.wikipedia.org/wiki/Below_the_line


Come creare un sito web accattivante, utile e interessanteCome 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 esempiovenerdì 8 giugno 2012

Davide Carpin // La Comunicazione WebDavide Carpin // La Comunicazione Web



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 PRICINGALCUNE 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


http://www.ds5.citroen.com/it



http://unfold.no/

http://unfold.no/


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 graficoe andiamo ad individuare l’architettura dell’informazione



Sketchin’• Alle volte possiamo servirci di

soluzioni già pronte.Gli Sketch ci aiutano a fissare le ideequando 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".


http://it.wikipedia.org/w/index.php?title=ISO/IEC_2001a&action=edit&redlink=1

http://it.wikipedia.org/w/index.php?title=ISO/IEC_2001a&action=edit&redlink=1


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 esseredecorative e migliorare

il design di unapagina web



I MOKE UP... L’ANTEPRIMA AL CLIENTEIl 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 indicativaCompongo 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.


http://it.wikiversity.org/wiki/Materia:Linguaggi_di_programmazione_web%23Perl_e_Python

http://it.wikiversity.org/wiki/Materia:Linguaggi_di_programmazione_web%23Perl_e_Python


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 ABBINAMENTIle 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 ABBINAMENTIle pratiche più utilizzate






HELVETICA per il body e le informazioniTITILLIUM 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 d ispos i t ivo ottenendo una esperienza di navigazione grat i f i cante . 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


http://www.davidecarpin.com/

http://www.davidecarpin.com/

http://www.provedc.net/

http://www.provedc.net/


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


http://vimeo.com/thatanalog

http://vimeo.com/thatanalog


Creare TrafficoCreare Traffico



ALCUNI CONSIGLI PER CREARE TRAFFICOLe 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 lungo500$ 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 NOCon 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.htmlhttp://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!


http://www.michelemastellaro.com/index.html

http://www.michelemastellaro.com/index.html

http://www.palladiorestauri.it/pages/palladio.html

http://www.palladiorestauri.it/pages/palladio.html


Domande e RisposteDomande e Risposte



grazie per l’ascolto...


My lesson workshop at Univr

Documents

Transcript of My lesson workshop at Univr