Grafica

Se sei appassionato di grafica e vuoi approfondire i temi della comunicazione visiva e della creatività attraverso animazioni e stili, sei nella sezione giusta

Le favicon sono un’ icona associata ad un particolare sito web. Si trovano di fianco alla URL ed il loro utilizzo principale è quello di essere visualizzata nella finestra dei preferiti.

Questa icona è in grado di identificare graficamente il sito così come un marchio identifica graficamente una azienda. È molto importante perché garantisce di essere riconosciuti subito, soprattutto da coloro che utilizzano internet aprendo molte finestre.

Più tardi è stato creato un sistema usando il linguaggio HTML per indicare la posizione dell’icona per ogni singola pagina, bisogna quindi usare una riga così: <link rel=”shortcut icon” href=”/favicon.ico” /> in <head>.

In questo modo qualunque immagine di dimensione appropriata (16×16 pixel) può essere utilizzata come favicon e oggi con i browser moderni è possibile generare favicon anche con estensione jpg, png o gif, ma a tutt’oggi il formato “ico” viene letto in maniera corretta dalla maggior parte dei browser.

 

Il formato gif e png serve a creare gif animate, ma bisogna avere un browser che supporti questa funzionalità. (tabella in fondo alla pagina).

È necessario caricare l’immagine sul server sui cui avete il vostro sito, successivamente bisogna aggiungere il tag html nella sezione <head> delle pagine in cui volete che la favicon animata venga vista.

Oggi le estensioni gif. e png. possono essere visualizzate solamente dai browser di ultima generazione. Ci sono 3 estensioni possibili: il formato .ico Pixel 16×16 oppure 32×32 con 256 o 16 milioni di colori.

in formato .gif Pixel 16×16 con 256 colori. Purtroppo le favicon in formato gif animato sono supportate solo da Firefox e Opera.

in formato .png Pixel 16×16 con 256 colori o 24-bit. Fattore molto importante è il nome che dovrà sempre essere favicon.

L’estensione .jpg è identica alla .png con la differenza che non è supportata da Internet Explorer e non supporta la trasparenza.

Supporto dei tipi di favicon

Browser

ICO

PNG

GIF

GIF animato

JPEG

Google Chrome Da 4.0 Da 4.0 No Da 4.0      
Internet Explorer Da 4.0 Da 8.0 No No Da 8.0      
Mozilla Firefox      
Opera No      
Safari Da 4.0 Da 4.0 No Da 4.0      
Allegato: favicon
Leggi tutto 14 marzo 2011

Captify è un plug-in che consente di stilizzare la caption (cioè il testo descritto nel tag alt di un’immagine), permettendo di creare effetti grafici davvero piacevoli.

Ecco qui il sito ufficiale, contenente anche alcuni esempi del plug-in all’opera: jQuery Captify Demo (v1.1.3)

Leggi tutto 28 gennaio 2010

Animazione in Flash con testo in movimento, modificabile attraverso un txt esterno

1-    Creare un nuovo documento di testo e assegnargli un nome (es. ‘testo.txt’) 2-    Dare  un nome alla/e variabile/i testo, così:

scritta1=bla bla bla &scritta2=trallallero &scritta3=boh??? ‘scritta1’, ‘scritta2’, ‘scritta3’ sono i nomi delle variabili testuali, precedute (dalla seconda variabile in poi) da ‘&’, seguite da ‘=’ (senza spazi).

3-    Eventualmente, attribuire del codice e formattare il testo (es. scritta1=<font><b><p>DISPLAY ELETTRONICI</p><p>IN VENDITA ONLINE.</p><p>CHIEDI UN PREVENTIVO</p></font></b>).

4-    Aprire un nuovo file in Flash, nella stessa cartella in cui è posizionato il file ‘testo.txt’.

5-    Creare una casella di testo dinamico, senza digitarvi alcun testo all’interno. Scegliere il font e il colore, selezionare ‘multiriga’ e digitare nel campo ‘Var’ il nome della prima variabile, cioè della prima scritta che comparirà nell’animazione, in questo caso ‘scritta1’. Convertirla il un clip filmato.

6-    Al primo frame del livello in uso attribuire la seguente azione: loadVariablesNum(“news.txt”, 0);

7-    In nuovi livelli, inserire gli altri campi di testo dinamico a cui saranno assegnate le variabili ‘scritta2’, ‘scritta3’, ecc.

Questo è il metodo più semplice.

Si può gestire il movimento del testo anche attraverso pulsanti, o uno scroller. Per approfondire, altri tutorial e informazioni utili trovati online: http://www.yappy.it/caricamento_testi_flash.php http://www.flashwork.it/tutorial-flash/casella-di-testo-scorrevole-con-t…

Si può inserire il testo anche a partire da file esterni di diverso formato: http://livedocs.adobe.com/flash/9.0_it/main/wwhelp/wwhimpl/common/html/w…

Ho provato a farlo con un file xml esterno, questo: banner-led.swf \\giobbe\comune\_progetti interni\Banner\display-elettronici\prova-animazione\banner-led E’ solo una prova, molto grezza:  c’è un po’ più di codice in cui sbrogliarsi.. sono partita da qui: http://articoli.v2online.it/newsticker.html

Leggi tutto 23 settembre 2009

Immaginiamo di trovarci nella seguente situazione:

e di aver stilizzato i nostri elementi, tramite il foglio di stile, in questo modo

Tramite le regole del nostro foglio di stile verrà applicata una immagine di sfondo al nostro collegamento ipertestuale.

Supponiamo ora di trovarci nella seguente situazione:

Secondo le regole presenti nel foglio di stile l’immagine di sfondo per il collegamento ipertestuale viene applicata all’immagine del collegamento. Questo può però creare effetti graficamente sgradevoli.

Per ovviare al nostro problema a questo punto bisognerebbe stilizzare l’elemento a che ha al suo interno un elemento img, ossia l’elemento padre dell’elemento img.

E’ possibile farlo attraverso i fogli di stile? Al momento no, per cui, per risolvere il problema dobbiamo rivolgerci a javascript, in particolare a Jquery.

Tramite jquery è infatti possibile risalire al padre di un elemento tramite la funzione parent() e applicare uno stile solo all’elemento selezionato.

Il codice da utilizzare nell’head del nostro documento è

tramite il quale risaliamo all’elemento a che contiene al suo interno un elemento img, e vi applichiamo uno stile (nel nostro caso rimuoviamo l’immagine di sfondo).

Leggi tutto 22 settembre 2009

Problema iniziale

La temizzazione dell’elemento HTML Checkbox è un argomento complicato e difficile da standardizzare, a causa delle differenze esistenti tra i browser nel trattarli.

Possibile soluzione

Grazie a JQuery siamo in grado di ovviare al problema con una soluzione rapida e leggera. L’idea è quella di nascondere il checkbox input con i fogli di stile e creare una copia che ne sostituisca la funzionalità in tutto e per tutto. Il clone che utilizzeremo sarà il tag <a>, che potrà pertanto essere completamente personalizzato via CSS.

Applicazione degli script

Dopo aver provveduto all’integrazione delle librerie necessarie, creiamo il nostro clone, facendo attenzione che l’id del vero checkbox corrisponda alla parola chiave utilizzata per il clone; nel nostro caso utilizziamo prova:

FINTO CHECKBOX: <a href=”#prova” id=”fakeprova”>Prova</a>

CHECKBOX ORIGINALE: <input id=”prova” type=”checkbox”/>

Inoltre dovremo inserire nel nostro foglio di stile le proprietà necessarie per rappresentare il nostro tag come preferiamo. Ad esempio:

Il file checkbox.jpg conterrà entrambe le versioni del finto checkbox: spuntata e non spuntata.

checkbox

Il foglio di stile si occuperà poi di spostare l’immagine a seconda dell’intervento dell’utente sulla checkbox.

Ora siamo pronti per creare il codice JQuery necessario per allineare il nostro finto checkbox con quello reale.

Ecco fatto. A seconda della personalizzazione, in particolare dell’immagine scelta per il checkbox, sarà necessario aggiornare alcuni valori del foglio di stile.

Leggi tutto 4 settembre 2009

Le dimensioni e i formati standard IAB

L’ente che propone e afferma gli standard Web per la pubblicità è la IAB, acronimo di Internet Advertising Bureau. Questa è la prima organizzazione no-profit a livello mondiale focalizzata sulla massimizzazione dell’uso e dell’efficacia della pubblicità interattiva.

Fondata nel 1996 per promuovere la crescita del Web advertising, conta oltre 500 membri, in gran parte editori online, agenzie pubblicitarie ed inserzionisti.

La IAB (Internet Advertising Bureau) ha l’obiettivo di contribuire allo sviluppo e al progresso del mercato del web advertising. Proprio per questo ha introdotto, in relazione alle dimensioni dei banner, dei formati, considerati standard a livello internazionale dal popolo di internet: sono sempre di più i siti che, offrendo la possibilità di effettuare campagne pubblicitarie sulle proprie pagine, pubblicano listini prezzi riferiti a spazi conformi agli standard IAB.

Tra i formati più comuni troviamo, ad esempio, i banner classici (468×60 pixel), i banner pieni (392×72 pixel), i banner mezzi pieni (234×60 pixel), i banner verticali (120×240 pixel), gli skyscraper (120×600 pixel) e i vari formati dei banner di tipo “button” (120×90 pixel per i button di tipo 1, 125×125 pixel per un “button quadrato” etc.).

Più un banner è grande più le possibilità che venga seriamente preso in considerazione aumentano; a volte l’esagerazione porta tuttavia alla totale esclusione del messaggio da parte dell’utente: mai andare oltre il 35-40% dello spazio a disposizione.

Elenco dei formati:

728 x 90 (Leaderboard) Banner standard IAB ad altissimo impatto visivo, viene posizionato sopra il top delle pagine. E’ visibile in tutte le pagine e puo essere fisso o a rotazione.

468 x 60 Il “full banner”. Lo storico ed il più utilizzato in assoluto. E’ quello garantisce la maggior copertura all’interno del portale, essendo posizionato in quasi tutte le pagine.

300 x 250 (Medium Rectangle)

300 x 600 (Half Page Ad)

392 x 72 Banner pieno

20 x 90 Button

336 x 280 (Large Rectangle)

250 x 250 (Square Pop up)

240 x 400 (Vertical Rectangle)

234 x 60 (Half Banner)

180 x 150 (Square)

160 x 600 (Wide Skyscraper)

125 x 125 (Square Button)

120 x 600 (Skyscraper) ovvero “grattacielo”, detto così proprio per la sua forma verticale allungata. E’ il banner di maggiore impatto, spesso monopolizza la colonna destra del sito, posizione che abitualmente occupa. È visibile già nella prima parte della schermata della pagina.

120 x 240 (Vertical Banner)

120 x 90 (Button 1) E’ il classico dei banner, molto diffuso, assimilabile ad un bottone, permette di veicolare il proprio messaggio in modo economico e non invasivo. Come gli altri banner verticali è posizionato nella colonna del sito, destra o sinistra a seconda delle disponibilità della sezione.

120 x 60 (Button 2) E’ il classico dei banner, molto diffuso, assimilabile ad un bottone, permette di veicolare il proprio messaggio in modo economico e non invasivo. Come gli altri banner verticali è posizionato nella colonna del sito, destra o sinistra a seconda delle disponibilità della sezione.

88 x 31 (Micro Banner)

Posizionamento dei banner

Per ottenere il maggior numero di click su un banner, oltre alla qualità e allo studio nella realizzazione dello stesso è da tenere in considerazione anche la posizione nella quale il banner sarà pubblicato all’interno di un sito web.

Alcune zone del layout di un sito internet infatti garantiscono una migliore visibilità al messaggio pubblicitario e la sola collocazione del banner può influire in maniera notevole sul numero dei click che sarà in grado di attirare.

La posizione in testata risulta essere molto redditizia, sia per l’alta visibilità sia perché l’utente oramai smaliziato sa che in quella posizione può facilmente trovare un banner di questo tipo. Può essere sfruttata con un banner 468×60.

I banner posizionati nella colonna di sinistra si dimostrano poco attraenti, l’attenzione dell’utente sembra essere orientata maggiormente verso il centro-destra delle pagine web.

La colonna destra è proficuamente utilizzabile con banner 120×60, 120×90 e 120×400. I banner posizionati a piede pagina non suscitano un grande interesse.

Questa zona, infatti, è spesso raggiungibile solo attraverso lo scorrimento della pagina ed ogni operazione aggiuntiva che l’utente deve eseguire per arrivare ad una informazione o a un banner pubblicitario fanno abbassare esponenzialmente la percentuale di visibilità e quindi di click.

Tutti i banner che devono essere raggiunti attraverso lo scrolling della pagina risentono negativamente del loro posizionamento non ottimale.

Il termine Above the fold deriva dal gergo della carta stampata (letteralmente, in un giornale, “sopra alla piega” ossia nella parte alta e più visibile della prima pagina) ed indica una condizione di posizionamento migliore di un elemento rispetto ad altri.

Nel web un testo, un banner o un messaggio pubblicitario è da considerarsi Above the fold se viene visualizzato come primo (o tra i primi) della pagina, o comunque se risulta visibile senza che l’utente debba utilizzare la barra di scorrimento o la rotellina del mouse.

I contenuti posizionati Above the fold hanno un’importanza fondamentale nel decretare il successo o l’insuccesso di una presenza internet: studi recenti indicano infatti in meno di 3 secondi il tempo entro il quale un utente giudica positivamente o meno una pagina web.

Per questo il colpo d’occhio, il primo impatto ricevuto al momento di aprire la pagina è un fattore a cui si deve dedicare la massima attenzione.

Nota: I circuiti di scambio banner gratuito restituiscono esiti peggiori di altri circuiti (a pagamento oppure ad server personali) proprio a causa della posizione in cui vengono inserite queste pubblicità: molte volte i banner gratuiti sono posizionati in fondo alle pagine, magari insieme ad una sfilza di altri free network.

Target e scelta dei siti

Così come per la pubblicità classica, anche a livello di pubblicità su internet si deve porre il problema della vicinanza del target del prodotto con quello dei fruitori del mezzo. Posizionare i messaggi in pagine particolarmente affini ai consumatori (o potenziali consumatori) può garantire un elevato livello di click al banner.

La resa dell’inserimento nella pianificazione della campagna di pagine con questi requisiti garantirà un click rate elevato, e quindi la possibilità di interagire con questi utenti attraverso il proprio sito e di approfondire il processo di comunicazione e fidelizzazione con essi. Inserire all’interno della pianificazione della propria campagna non solo pagine che sono visitate da un gran numero di utenti indifferenziati, ma anche pagine i cui visitatori abbiano interessi affini a quelli dei consumatori dei prodotti pubblicizzati, aumenta l’efficacia della campagna stessa.

Programmi di Banner Exchange

I programmi di Banner Exchange sono circuiti in cui ogni sito aderente  ha accettato di mostrare, gratuitamente e a turno, i banner degli altri siti facenti parte del circuito.  Per una lista dei maggiori programmi di Link Exchange visitare: www.emgroup.com/bannerswaps.htm

Per ulteriori informazioni su come funziona uno di questi circuiti visitare il sito di LinkExchange, il piu’ grande circuito di link exchange (oltre 200.000 aderenti) di recente acquistato da Microsoft.

Esempio: LinkExchange: www.linkexchange.com

Controindicazione dei circuiti di banner Exchange:  sono estremamente generici e come tali difficilmente generano traffico qualificato.

Tracking

Supponiamo di avere 3 banner piazzati contemporaneamente su tre diversi siti.  Come faccio a sapere quanto traffico mi produce ciascuno di loro?

E’ un dato fondamentale per capire su quale sito e’ meglio puntare oppure quale disegno funziona meglio per il mio banner.  Come fare?

Supponiamo che il banner abbia un link con la vostra home page: www.dittaitaliana.com e che abbiate 3 banner piazzati contemporaneamente su 3 siti diversi.

Aggiungete un codice alla fine del link:

Il banner piazzato sul primo sito avra’ un link a: www.dittaitaliana.com?1 

Il banner piazzato sul secondo sito avra’ un link a www.dittaitaliana.com?2 

Il banner piazzato sul terzo sito avra’ un link a www.dittaitaliana.com?3

Tutti e tre i link porteranno a www.dittaitaliana.com (provare per credere!  Il codice attaccato in fondo al link e’ del tutto ininfluente).  La differenza e’ che quando andro’ ad analizzare il traffico verso il mio sito sara’ in grado di contare quante page view mi ha generato ciascun banner.

Se usate un programma come WebTrends o altri simili, oppure se il vostro ISP vi mette a disposizione dei dati di traffico aggregati, le pagine con il codice in fondo appariranno come pagine separate pur essendo tutte la stessa pagina.  Se ho 100 page view per www.dittaitalian.com?2 vuol dire che quel traffico mi arriva dal secondo sito su cui ho piazzato il mio banner.

Al di la’ dell’elemento creativo, comunque, il fattore ultimo per l’efficacia di un banner rimane quello del contesto in cui e’ piazzato.

Come le altre forme di web advertising, anche una campagna di banner richiede una continua attività di analisi: occorre infatti tracciare le impression (le volte in cui il banner viene visualizzato), i click-through (le volte in cui viene cliccato), le azioni che eventualmente l’utente esegue dopo aver cliccato sul banner e molte altre informazioni, per determinare in quale misura la campagna pubblicitaria sia risultata efficace.

Il messaggio

Il banner sbagliato si distingue per un esubero di informazioni, anche mal disposte, troppi colori ed in conclusione molta confusione.

Il banner giusto invece, ha una linea grafica uniforme e gradevole, riporta uno slogan semplice, che può attirare solo il target di utenza realmente interessato.

All’interno del banner è buona norma riportare il nome del sito (meglio il dominio, se presente) in modo da rafforzare il marchio dello stesso ed aiutare il visitatore a ricordarselo. Inoltre, è importante affiancare al nome un simbolo, un disegno, qualsiasi cosa, che sia semplice, piccola e chiara, in modo da associare quel determinato oggetto al nome del sito e migliorarne quindi la penetrabilità. Inserire nel banner l’indirizzo, il nome o il logo del sito serve anche a creare una sensazione di familiarità. In questo modo anche gli utenti che non cliccano sul banner potrebbero ricordarsi del vostro sito e, magari, visitarlo in seguito.

Nella maggior parte dei casi non funzionano o funzionano poco i messaggi generici o troppo scoperti tipo “Desideri un cellulare? Clicca qui”. Potrebbe essere meglio puntare sul prezzo “Solo 99 euro pe un cellulare! Clicca qui” oppure sulla novità, sull’esclusività, sull’assortimento ecc.

E’ ovvio che quanto si promette nel banner dovrà essere mantenuto nel sito. Ma le difficoltà aumentano quando scopro che i messaggi che utilizza la concorrenza sono simili o migliori dei miei. Allora per ottenere risultati dal mio banner dovrò inventare messaggi più intriganti, segmentare maggiormente il target, offrire servizi aggiuntivi, o lavorare sul sito per far scaricare delle demo, documentazione, utilità per il mio target. In questo contesto la grafica mi sarà utile per valorizzare il messaggio ma mai per sostituirlo.

Ci sono inoltre alcune regole da seguire, nella scelta del messaggio, per evitare che il banner perda d’efficacia.

Il testo deve essere formato da poche parole Tre parole si leggono meglio di quattro, quattro meglio di cinque, cinque meglio di sei ecc. Oltre un certo limite si rischia di non far leggere nulla.

Evitare di esprimere più concetti Un banner non può veicolare più messaggi o informazioni altrimenti si rischia di non farne recepire nessuno. Lasciate al vostro sito questa funzione.

Semplicità non banalità Un messaggio deve essere chiaro e semplice da comprendere. Attenzione però che non sconfini nella banalità. Mentre un messaggio semplice può essere divertente, curioso, arguto e di conseguenza stimolare click, quello banale tende a disperdersi nella pagina dov’è posizionato.

Inserite i termini “Clicca qui” o “Entra”. Anche se all’apparenza si tratta di termini abusati, diversi test hanno confermato che il loro semplice inserimento determina un aumento di contatti nell’ordine del 20-30 % senza apportare altre modifiche al banner. L’utente è invogliato a cliccare sul banner se l’annuncio risulta interessante.

Una buona intestazione. Non crediate che un banner di bell’aspetto sia sufficiente a convincere gli utenti a cliccarlo. E’ fondamentale per la sua efficacia scegliere una domanda intrigante, che spinga il visitatore a cliccare sul banner per conoscere la risposta. Una buona tecnica è utilizzare la stessa intestazione per il banner e per la vostra home page.

Provate a inserire il termine “gratuito”. Ovviamente non stiamo dicendo di preparare un banner contenente questa sola parola. Spiegate esattamente cos’è che si ottiene gratuitamente e accertatevi di poter effettivamente fornire qualcosa a titolo gratuito quando l’utente clicca sul banner. Anche questa tecnica garantisce un incremento nei contatti.

E’ essenziale l’aderenza del messaggio ai contenuti del sito pubblicizzato, in modo tale da attirare solo i visitatori che realmente possono diventare clienti o utenti abituali di quel determinato servizio.

È più importante ricevere 10 visite con 5 iscrizioni, piuttosto che 20 visite con 3 sole iscrizioni (soprattutto nel caso in cui stessimo usufruendo di quelle campagne a pagamento che si basano sul click-through, ovvero alla fine della promozione vengono pagati solo i clicks).

La grafica e i colori

E’ bene che il banner contenga pochi colori, ma ben distinti: l’importante è la chiarezza. Utilizzando poche tinte, è bene evidenziare un messaggio, semplice, schietto, che sia facile da ricordare e che invogli i navigatori a cliccarci sopra.

Banner di colore blu, giallo, e verde risultano avere un CTR superiore a quello generato dai banner in bianco e nero. Utilizzate il colore rosso con moderazione.

Le diverse fonti sono in disaccordo sulle scelta dei colori.

Chi preferisce colori vivaci per colpire l’attenzione del navigatorie, chi invece consiglia di usare colori tenui, al fine di poter adeguare il banner per eventuali scambi su altri siti pur non conoscendo i colori base. Un suggerimento utile è comunque quello di utilizzare colori simili al nostro brand.

Il miglior banner è quello che, in accordo con grafica e contenuto, si mostra al visitatore come armonioso complemento di quanto proposto.

Il testo in un banner serve a informare l’utente dell’obiettivo. Ci può tornare utile l’utilizzo di font dal corpo molto grande, il maiuscolo delle prime lettere di ogni parola e l’utilizzo di font molto leggibili.

la grafica del banner dovrebbe ricordare quella del sito. E nel caso in cui il messaggio faccia riferimento a un’offerta presentata in una pagina interna è bene che il collegamento sia a questa piuttosto che alla home page: quando un visitatore clicca su di un banner, è perché desidera andare direttamente sulla pagina web contenente le informazioni che a lui interessano. I visitatori non desiderano andare alla home page del vostro sito e poi, da li, andare a cercare le informazioni.

Considerando che la realizzazione di un banner ha costi modesti è conveniente farne più di uno con messaggi diversi per poter poi scegliere quello maggiormente efficace.

Ciò è fondamentale quando si vogliono raggiungere più target o promuovere più servizi e prodotti.

Per riuscire a trovare il progetto di banner più efficace occorre passare attraverso un periodo di prove.

Questo significa mettere in rete un banner per un dato periodo di tempo e misurarne i risultati (cioè il CTR e le vendite ad esso conseguenti).

Quindi occorre fare una modifica, quale un cambiamento di colore o del carattere usato per il testo, e pubblicare il banner per un ulteriore periodo di prova per misurarne i risultati. Il banner che produce il volume di vendite più elevato dovrà essere quello da utilizzare nelle vostre campagne pubblicitarie mediante banner.

I banner perdono di efficacia in tempi molto brevi, specie se statici e collocati sempre nella stessa posizione (il CTR diminuisce significativamente dopo due settimane). Se l’utente nel frattempo non lo ha già cliccato, probabilmente non lo farà mai. Se quindi avete progettato una campagna che prevede molte apparizioni è opportuno preparare anche una sufficiente varietà di banner.

Mi sembra quasi superfluo puntualizzarlo, ma.. i banner fastidiosi e i “trucchi” sono rischiosi, se non controproducenti. Niente banner in pagine prive di contenuto (o in cui il contenuto è costituito proprio dai banner), niente pop-up indesiderati, banner che seguono il cursore, in sovraimpressione, a comparsa sulle parole o altre tecniche scorrette/insopportabili; una volta persa la fiducia del visitatore è difficilissimo riconquistarla (in breve si dissolvono visite, click e guadagni).

Un “trucco” un po’ datato e sfruttato spesso con successo è quello di realizzare un banner che sembri un messaggio di avvertimento di Windows. Il successo è dovuto forse alla familiarità dell’utente con questo tipo di grafica, oppure all’inganno che alcuni di questi banners creano simulando errori interni al sistema operativo o amenità varie.

L’evidente controindicazione all’alta “cliccabilità” di questa e di altre tipologie di “Trick Banner” (banner che non presentano alcun riferimento ad una specifica azienda o prodotto, ma che basano la loro capacità comunicativa su altri elementi quali il gioco, la sorpresa, la capacità di mimetizzarsi con la pagina web e con messaggi di pericolo o di allerta mutuati dall’ambiente Windows) è il fatto che il bacino di utenza che sarà rediretto al sito linkato sarà percentualmente parlando non interessato al prodotto proposto o al sito pubblicizzato celatamente, con conseguenti tempi di permanenza sulla pagina bersaglio scarsi o addirittura nulli.

Piuttosto, potete cercare di suscitare la curiosità degli utenti con pulsanti, caselle di opzione e perfino menù.

Un altro accorgimento: utilizzare testo blu sottolineato o bordi blu. Una frase scritta in testo blu sottolineato viene immediatamente riconosciuta dai navigatori del Web come collegamento. Realizzando in tal modo l’intestazione del banner, farete comprendere all’utente che si tratta di un link ad un altro sito. Per lo stesso motivo si può scegliere il blu come colore del bordo del banner. E’ dimostrato che questo sistema aumenta il numero di contatti, per il fatto che il bordo blu richiama istintivamente il concetto di link.

L’animazione e l’ingombro del banner

Jakob Nielsen, guru dell’usabilità legata ad internet, indica in sei secondi il tempo ottimale per il caricamento di una pagina web; se la pagina non sarà caricata entro 20 secondi, 80% dei navigatori tenderà ad abbandonare il sito senza aspettare il completamento del caricamento.

Per la pubblicità on line essenziale è comparire velocemente sul monitor, per poter attirare l’attenzione dell’utente; sarebbe sicuramente ottimale ottenere il caricamento dei banner come primi oggetti sulla pagina web, perché durante il tempo di caricamento delle parti informative della pagina il navigatore avrebbe maggiori possibilità di visualizzarli.

Questo risulta però controproducente per il sito che ospita la pubblicità, perché vedrebbe un certo numero di utenti transitare velocemente attraverso le proprie pagine senza soffermarsi sui contenuti che vengono proposti.

La crescita media delle velocità di connessione ad internet di oggi favorisce la velocità di caricamento di un intero sito e dei banner ospitati, ma nel pieno rispetto dell’utenza ancora connessa analogicamente a velocità ridotte, il peso dei banner dev’essere sempre il più ridotto possibile per ottenere un ottimale rapporto di qualità grafica/messaggio/velicità di caricamento. Risulta quindi importante tener conto durante la creazione dei soggetti per i banner non solo che questi siano accattivanti, ma che siano veloci nel comparire sulla pagina web.

Non per questo si consiglia però di abbandonare i banner animati, molto più efficaci (mediamente, +25% di CTR), in favore di quelli statici.  Realizzate banner animati di dimensioni contenute. Tenete presente che il CTR raddoppia quando si passa da 10KB a 3KB. In ogni caso, non superate mai i 30kb. Anche perchè i siti che accettano la pubblicita’ in genere pongono dei limiti all’ingombro (byte) dei banner animati e al numero dei loop (quante volte l’animazione puo’ cambiare prima di diventare un banner statico).

Per rendere un banner leggero, inserite animazioni vettoriali, ottimizzate le immagini incluse e di non eccedete nell’inserimento di file come suoni o miniclip. Eliminate la grafica di ornamento che non migliora l’incisività del messaggio.

Per attirare un utente non c’è bisogno di realizzare animazioni grafiche colossali, anzi bisogna usare creatività e ingegno. Dinamismo è la parola chiave. E’ consigliabile utilizzare qualche effetto come rotazioni, dissolvenze, zoom al fine di attrarre l’attenzione del navigatore.

A volte sono i dettagli di un banner a colpire di più. Che siano curati.

L’animazione deve essere sufficientemente sofisticata da attrarre l’attenzione, ma non dovrebbe essere ostentata al punto da interferire o addirittura contrastare con l’aspetto e il progetto della pagina web che si intende pubblicizzare con il banner.

Un’animazione che si ripete all’infinito ha l’effetto di irritare i visitatori. Realizzate animazioni che si ripetono 7-10 volte, lasciando all’ultimo fotogramma dell’animazione la comparsa del messaggio pubblicitario più importante.

Viceversa, alcuni visitatori interromperanno il caricamento di una data pagina web prima che l’animazione del banner venga completamente scaricata, visualizzando, in questo modo, solamente il primo fotogramma. È perciò una buona idea avere il messaggio pubblicitario in questo primo fotogramma se si sa in partenza che la pagina web sulla quale il banner comparirà è una pagina dal caricamento lento.

Oltre alle animazioni semplici, abbiamo la possibilità di attirare il navigatore rendendo il nostro banner interattivo, ovvero inserendo funzionalità su eventi del mouse, come la pressione, o il passaggio sopra una determinata area, ottenendo cosi il nostro desiderato click (a volte involontario). Molto invoglianti per il visitatore sono anche quei banner in cui è possibile eseguire delle attività, come disegnare con il puntatore del mouse, giocare usando il trascinamento di un oggetto, attivando un effetto grafico su un immagine come un effetto blur…

Per alcuni pulsanti vi ricordo di usare l’istruzione on(press) e non on(release) in quanto la prima agisce immediatamente quando viene premuto il tasto sinistro del mouse, mentre per la seconda dobbiamo aspettare il rilascio.

Il suono automatico di un banner, come un trillo o un loop, non suscita quasi mai reazioni positive nel navigatore: potremmo disturbarlo, o svegliarlo dal suo stato di sonno inconscio. Vi consiglio di inserire suoni che si avviano al movimento del mouse, o al passaggio su una determinata area.

Qualora abbiate la necessità di inserire un suono, ad esempio progettando un banner con all’interno un miniclip video, vi suggerisco di impostare l’audio in mute al fine di non disturbare l’utente, che deciderà inseguito se avviarlo o no.

Rich Media, Floating Banner, Expanding Banner

Il termine Rich Media è stato coniato per indicare forme di comunicazione online che utilizzano elementi multimediali interattivi, più avanzati rispetto a quelli tradizionali. La caratteristica principale dei Rich Media è quella di presentare effetti dinamici, che possono attivarsi all’apertura della finestra o in risposta all’interazione dell’utente (ad esempio al mouse over), grazie all’utilizzo di tecnologie come lo streaming video o piccole applet solitamente realizzate in Java.

I formati Rich Media sono utilizzati online principalmente nell’ambito pubblicitario, dove, grazie alle animazioni interattive, hanno un impatto visivo maggiore rispetto ai banner tradizionali e per questo tendono ad essere più efficaci rispetto a questi ultimi (Pop-Under, Overlayer, Expanding Banner, sono tutti esempi di forme pubblicitarie Rich Media); per questo motivo il loro impiego all’interno del mondo del web advertising sta crescendo sensibilmente.

La ricerca di nuove forme di comunicazione pubblicitaria online nasce in risposta alla cosiddetta banner blindness (cecità ai banner), termine coniato nel 1998 in seguito ad approfonditi test di usabilità che indica la tendenza, sviluppata nel tempo dagli utenti e sempre più marcata, ad evitare i banner pubblicitari dopo averli riconosciuti, anche inconsciamente, individuandone la forma standard al primo colpo d’occhio.

I floating banner, o “banner fluttuanti”, sono elementi pubblicitari che utilizzano il movimento per attirare l’attenzione dell’utente web: si muovono davanti agli altri elementi della pagina, talvolta nascondendoli alla vista del navigatore; il loro scopo è quello di catturare l’attenzione dell’utente e ottenere un numero maggiore di click rispetto ai tradizionali banner statici, sempre più ignorati dagli internauti.

Il floating banner fa della dinamicità il suo punto forte, e sotto questo aspetto può presentare le soluzioni più svariate: dal messaggio pubblicitario che scorre in linea retta, a banner che si scompongono e ricompongono, che ondeggiano o che fluttuano per lo schermo in movimenti circolari o a spirale.

Anche la frequenza di apparizione dei floating banner, oltre al loro aspetto grafico, influisce sensibilmente sul risultato della campagna pubblicitaria; un floating banner leggero e originale, che appare soltanto all’apertura della pagina, non è invasivo e spesso risulta efficace, al contrario un banner troppo insistente rischia di intralciare l’utente nella lettura della pagina e, di conseguenza, di allontanarlo dal sito.

Gli expanding banner (o banner “a espansione”) sono varianti dei tradizionali banner e la loro caratteristica, come indica il nome stesso, è quella di aumentare di dimensioni al passaggio del mouse sopra di essi.

Come i floating banner, anche quelli di tipo “expanding” hanno lo scopo di catalizzare l’attenzione dell’utente, ormai abituato a vedere i classici banner statici e ad ignorarli.

Quando il cursore del mouse scorre sull’expanding banner la finestra pubblicitaria cresce di dimensioni fino a venire mostrata completamente, aumentando l’efficacia del messaggio veicolato.

Il vantaggio di questa particolare forma di web advertising è che l’expanding banner, pur essendo di forte impatto visivo, non rallenta né intralcia in alcun modo la navigazione; è sufficiente infatti, nella maggior parte dei casi, spostare il cursore dall’elemento per farlo tornare alle dimensioni originali.

 

Siti di riferimento

http://punto-informatico.it/27452/PI/News/corso-e-marketing-realizzare-u…

http://www.axura.com/faq.php/faq_argomentoID=14/Advertising/

http://www.arcadiaclub.com/progra/webmaster/banner_posizioni_strategiche.htm

http://www.gdesign.it/pages/howto/articoli/proban/proban.php

http://www.juliusdesign.net/creare-banner-flash-efficaci-julius-tips-trick/

http://www.friuliimprese.it/cnt_articles.php~articolo~~~283~~Regole+per+…

http://www.serbi.info/bannerregole.htm

Leggi tutto 1 agosto 2009