INFO/GRAPHIClaltrafacciadellamela.it/wp-content/uploads/2017/... · WEB COPYWRITING: 4 fattori da...

26
INFO/GRAPHIC IL MAGAZINE DE L’ALTRA FACCIA DELLA MELA N. 03/2017 PAY PER CLICK: SCOPRI TUTTO SU ADWORDS Pag. 42

Transcript of INFO/GRAPHIClaltrafacciadellamela.it/wp-content/uploads/2017/... · WEB COPYWRITING: 4 fattori da...

INFO/GRAPHIC 1

I NFO /GRAPH ICI L M A G A Z I N E D E L’A LT R A FA C C I A D E L L A M E L A N . 0 3 / 2 0 1 7

PAY PER CLICK: SCOPRI TUTTO SU ADWORDSPag. 42

INFO/GRAPHIC INFO/GRAPHIC2 3

TRE/PER/TRE

3 APP /pag. 4

3 LOW-POLY /pag. 6

3 REBRAND /pag. 8

NEWS

DA FACEBOOK ARRIVA LA VIDEO COPERTINA /pag. 10

NUOVI LAVORI IN PORTFOLIO /pag. 12

JUST/4/YOU

TUTTO CIÒ CHE TI SERVE È MADE IN GOOGLE /pag. 14

TI REGALIAMO 250 BIGLIETTI DA VISITA /pag. 15

DAL BLOG

“HOW TO”:il tutorial come strumento SEO /pag. 16

WEB COPYWRITING: 4 fattori da considerare /pag. 18

REALIZZAZIONE DI SITI WEB: oltre l’estetica /pag. 21

CHI SIAMO: 5 consigli per realizzare al meglio questa pagina /pag. 24

PROGETTARE L’HOMEPAGE 3 fattori da tenere a mente /pag. 27

SOCIAL MARKETING ESTIVO: 3 parole d’ordine /pag. 30

DA TRIPADVISOR AD AIRBNB:il feedback è lo strumento ideale del viaggio 2.0 /pag. 32

LA COMUNICAZIONENON VA IN VACANZA:superare le divergenze linguistiche con l’impatto visivo / pag. 34

PERCHÉ UTILIZZARE PINTEREST? 3 cose da considerare /pag. 37

PAGINA DEI CONTATTI: gioie o dolori? /pag. 40

PAY PER CLICK:cos’è, come funziona e come ottimizzare Google Adwords /pag. 42

WEB DESIGN: come si è evoluto dagli albori ad oggi (parte 1) /pag. 45

SCHEUMORFISMO VS FLAT DESIGN:come si è evoluto il web design (parte 2) /pag. 48

INFO/GRAPHIC

INDICE

PENTOLONE?Cosa bolle nel

TRE/PER/TRE

NEWS NEWS

DAL BLOG

3 APP

DA FACEBOOK ARRIVALA VIDEO COPERTINA

PAY PER CLICK:

NUOVI LAVORI IN PORTFOLIO

Per grandi e bambini, per metereopatici e per amanti dell’arte, ecco la nostra scelta fra i vari store.

Cos’è, come funziona e come ottimizzare Google Adwords

Nuovi siti web firmati L’Altra Faccia Della Mela

Sullo scorso numero di INFO/GRAPHIC

vi abbiamo proposto un test. Una delle

domande del test era “Quanti anni ha il sito

web della tua azienda?”

Abbiamo provato a rispondere al test

anche noi, e così ci siamo posti la stessa

domanda, e abbiamo capito che è arrivato il

momento di rinnovarci.

E allora cosa bolle nel pentolone de L’Altra

Faccia Della Mela?

Se volete saperlo continuate a seguirci,

ma per ora sappiate che un pentolone sul

focolare c’è.

12

4

11

42

INFO/GRAPHIC INFO/GRAPHIC4 5

TRE/PER/TRE:3 APPTRE APP INTERESSANTI PER CONCEPT, DESIGN E USABILITY. ECCO IL NOSTRO

TOUR GUIDATO NEGLI STORE.

Le mobile app sono ormai alla portata

di tutti. Ecco che gli smartphone si

popolano di tante iconcine ciascuna in

grado di soddisfare esigenze diverse,

da quelle dei teenagers a quelle dei

professionisti incalliti.

Ma al di là delle ormai celeberrime

Whatsapp, Facebook o Youtube,

esistono app degne di nota? Ecco

quelle che secondo noi hanno saputo

mixare in maniera

intelligente un

concept intelligente

con un design fresco

e user-friendly.

YOWINDOW Come suggerisce an-

che il nome, YoWin-

dow è una finestra sul tempo metereo-

logico.

Si tratta di un’app per le previsioni del

tempo, che prende i dati Yr.no e NWS,

due fra le principali organizzazioni

meteorologiche. La particolarità di

quest’app è nei disegni, che raffigura-

no dettagliatamente vari tipi di paesa-

ggio e cambiano secondo la stagione

e, naturalmente, secondo le condizioni

atmosferiche. Si refresha in automa-

tico ogni 60 secondi, ma è possibile

scorrere manualmente i wallpaper per

osservare i cambiamente atmosferici

nel corso della giornata e dei giorni a

venire. Insomma, se

non siete amanti de-

lle previsioni almeno

sarà un modo simpa-

tico di consultarle!

MUZEI LIVE WALLPAPERL’idea di mettere in

questa rubrica un’app disponibile

solo per Android inizialmente non

ci faceva impazzire. Ciò che ci ha

convinti, però, è stata l’idea originale

ed elegantissima che muove Muzei.

Muzei è infatti una sorta di cornice

digitale in cui ruotno vari screenshot.

Ogni giorno opere d’arte famose vengono

visualizzate, con la possibilità di metterle

anche in background, sfocandole ed

oscurandole per lasciare visibili le icone.

Con un semplice click sullo sfondo si

aprirà l’opera per intero.

TABELLINE PER BAMBINIIn una rubrica dedicata ai migliori

concept di app non poteva mancare

un’applicazione dedicata ai bambini.

E, per par condicio stavolta si tratta di

un’app solo per iOS.

Tabelline per bambini che, come è facile

intuire, sfida i più piccoli a suon di

divertenti giochi con lo scopo di imparare

le odiate tabelline, è organizzata con una

serie di livelli in cui le skills aumentano via

via. Quello che, più di tutto, ci è piaciuto,

sono le splendide illustrazioni.

ORMAI SU TUTTIGLI SMARTPHONE,ECCO LE APP PIÙ

INTERESSANTISECONDO NOI

YOWINDOW

iOS e Android

MUZEI

Android

TABELLINE PER BAMBINI

iOS

INFO/GRAPHIC INFO/GRAPHIC6 7

TRE/PER/TRE:3 LOW-POLYDI MODA QUALCHE ANNO FA, CI HA REGALATO ILLUSTRAZIONI DIGITALI CHE

ANCORA OGGI CI FANNO SGRANARE GLI OCCHI

Il low-poly è stata una tendenza

piuttosto in voga qualche anno fa.

Il web si è in breve tempo popolato

di illustrazioni fatte secondo questi

canoni, facendoci storcere il naso da-

vanti ad esempi mal riusciti ma anche

(e soprattutto) facendoci sgranare gli

occhi davanti ad esempi molto ben

riusciti.

Si tratta di una tecnica di modella-

zione grafica in cui il

soggetto viene forma-

to da un certo numero

di poligoni geome-

trici, accostati l’uno

all’altro senza soluzio-

ne di continuità.

ANIMALSbyJona DingesJona Dinges è un’artista tedesca. Ha

creato questa interessantissima serie

di animali realizzati con la tecnica low-

poly.

Al di là della pulizia e dell’impeccabilità

tecnica, quello che ci ha colpiti è l’uso

del colore quasi fiabesco, che porta a

concepire delle ambientazioni visiona-

rie seppur minimal. Così elefanti, tigri,

balene e rinoceronti sono in grado di

suscitare un’emozione primordiale an-

che in un contesto matematicamente

perfetto.

RITRATTIbyGiselleManzanoDa Frida Kahlo a Char-

lie Chaplin, passando

per Andy Warhol e

Salvador Dalì, Giselle Manzano non si

fa sfuggire l’occasione di omaggiare i

personaggi famosi ritraendoli con una

serie di poligoni. Colori brillanti ed es-

pressioni accattivanti sono solo due degli

ingredienti che rendono grandiose queste

illustrazioni.

NATURAL WORLDWITH GEOMETRIC FORMSby Timothy Reynold’sSe illustrare volti e animali con la tecnica

low-poly può sembrarvi complesso, im-

maginate di dover rendere un paesaggio.

È quello che è riuscito a fare Timothy Rey-

nolds, ritraendo corsi d’acqua e paesaggi

naturali in modo impeccabile.

Colori tenui e virtuosismi incredibili ren-

dono queste illustrazioni paragonabili ad

un viaggio nei luoghi più affascinanti del

Pianeta.

ACCOSTAREI POLIGONI

PER MODELLAREFORME COMPLESSE

ANIMALS

by Jona Dinges

RITRATTI

by Giselle Manzano

NATURAL WORLD WITH GEOMETRIC FORMS

by Timothy Reynold’s

INFO/GRAPHIC INFO/GRAPHIC8 9

TRE/PER/TRE:3 REBRANDOGNI TANTO FA BENE RIFARSI IL LOOK. ECCO TRE REBRAND CHE HANNO

INTERESSATO MARCHI IMPORTANTI.

Se un marchio funziona, perché

cambiarlo?

Vero, ma non sempre.

I motivi che spingono un’azienda

di successo a rifarsi il look non

sono pochi, a cominciare dal voler

svecchiare un po’ la propria immagine

restando al passo con i tempi.

Ciò che conta è non perdere la

propria identità, mantenendo chiara

nell’immaginario dei

consumer quella che

è la solidità aziendale.

Si tratta di quello che

ci piace chiamare

rebrand intelligente.

BBC THREEby Studio Output

Nel 2016 BBC Three ha pubblicato il

proprio rebrand.

L’intento principale è stato quello di

sganciare il logo da quello principale

del gruppo BBC, e per farlo sono

stati utilizzati colori brillanti ed un

trattamento grafico deciso ed incisivo.

La brillantezza dell’idea sta nella

possibilità di utilizzare le tre bande

come visual, riempiendole con

contenuti presi dal canale. Nel punto

esclamativo dell’ultima banda, poi,

viene fuori tutto il carattere del brand.

MOZILLAProtocol

Nel gennaio 2017

Mozilla ha dichiarato

chiuso il contest

per creare la nuova

brand identity

dell’organizzazione.

A rappresentare il

colosso sarà un logo che a nostro

parere si può definire geniale.

Nel vecchio nome, infatti sono

semplicemente state sostituitè le

lettere “ill” con i caratteri “://” che

chiaramente rimandano al protocollo

http, sempre seguito appunto da questi

stessi caratteri. Il nuovo logo, quindi, è

diventato Moz://a ed è coordinato da una

interessante palette di colori.

Che dire? Come sempre, less is more!

INSTAGRAM“Se non cambiasse mai nulla, non ci

sarebbero le farfalle”

È ormai un anno che Instagram ha

cambiato aspetto, ma in questo breve

excursus sui restyling ci sembrava

opportuno citare il colosso delle foto

social. Perché ci piace così tanto?

Perché è la sintesi perfetta della

metamorfosi dallo scheumorfismo al

material design. Il realismo estremo della

Polaroid del primo logo è stato sostituito

da una raffinatissima sintesi delle forme.

Il marrone che faceva molto vintage del

vecchio logo è stato sostituito da un

brillantissimo gradiente che va dal viola

all’arancione. Allo stesso modo anche

l’app ha cambiato aspetto, riuscendo

a svecchiare il tutto senza perdere la

propria identità.

OGNI TANTOFA BENE

RIFARSI IL LOOK

MOZILLA

Protocol

INSTAGRAM

“Se non cambiasse mai nulla, non ci sarebbero le farfalle”

BBC THREE

by Studio Output

INFO/GRAPHIC INFO/GRAPHIC10 11

Vi erano piaciute le immagini del profilo

animate? Ottimo, perché ora Facebook si

spinge oltre!

Se infatti prima si trattava di semplici

gif, adesso è possibile inserire dei veri

e propri video, con tanto di audio, nella

propria cover image. La prima azienda

ad utilizzarla è stata Netflix che, come

sempre, è sul pezzo.

Il lato tecnico è ancora un po’ difficoltoso,

perché se si vuole evitare il ritaglio

automatico da parte del software bisogna

rispettare certe dimensioni che la maggior

parte delle camere non hanno. Tuttavia è

senza dubbio un buon inizio, e confidiamo

nel fattto che presto Facebook rilasci un

sistema più alla portata di tutti.

Vuoi realizzare una video copertina per

la tua pagina aziendale? Contattaci!

La video copertina è

un ottimo modo per catturare

l’attenzione dei propri fan.

Se un’immagine vale più

di mille parole,

figuriamoci un video!

820px per 312px, ma è

raccomandabile una altezza di

462px.

Il video, che dovrà avere una

lunghezza compresa fra i 20

ed i 90 secondi, verrà trasmesso

in loop.

Subito! I più grandi brand

non si sono fatti attendere

e le loro pagine si popolano già

di video copertine.

Allora non perdete tempo

e stupite i vostri clienti.

PERCHÉ

-1- -2- -3-COME QUANDO

DA FACEBOOK ARRIVALA VIDEO COPERTINAIL BIG BLUE SOCIAL DÀ IL VIA A VIDEO E SUONI NELL’ IMMAGINE DI

COPERTINA DELLE PAGINE FAN

INFO/GRAPHIC INFO/GRAPHIC10 11

INFO/GRAPHIC INFO/GRAPHIC12 13

Agosto 2017:Concept, progettazione grafica e realizzazione del sito www.villacamillamilano.it.

Settembre 2017:Concept e progettazione grafica del logo per NOIMEDICI Milano.

NUOVI LAVORI IN PORTFOLIO NUOVI LAVORI IN PORTFOLIO

INFO/GRAPHIC 13

INFO/GRAPHIC INFO/GRAPHIC14 15INFO/GRAPHIC 15

TUTTO CIÒ CHE TI SERVE È MADE IN GOOGLE!Grazie a G Suite, il pacchetto completo degli strumenti aziendali offerti da Google, non dovrai più preoccuparti di

nulla. Lavora in condivisione e tenendo al sicuro i tuoi dati!

State progettando la nuova immagine coordinata della vostra azienda?Allora approfittate del nostro regalo: 250 biglietti da visita in omaggio!

L’offerta è valida entro il 30/12/17.Per aderire scrivi a [email protected] e comunicaci il seguente codice:

La promozione è valida per chiunque ci commissioni il restyling o la progettazione del logo e comprende

progettazione del biglietto da visita;stampa di 250 biglietti fronte/retro.

TI REGALIAMO 250 BIGLIETTI DA VISITA

FREE 250 250B1Gl137B I G L I E T T I

COMUNICA ARCHIVIA

COLLABORA GESTISCI

RICEVI UNO SCONTO DEL 20%PER IL TUO PRIMO ANNO DI G SUITE!Per sapere come fare contattaci a [email protected]

INFO/GRAPHIC INFO/GRAPHIC16 17

Qualche mese fa vi abbiamo proposto tre mo-tivi per cui scrivere un blog potrebbe essere utile. Quello di cui vorrei parlarvi oggi è un particolare tipo di blog, ovvero la raccolta di tutorial. Si tratta del tipico “how to” o, in italia-no, “come si fa”. E per farlo, vorrei analizzare un esempio d’eccellenza.

SALVATORE ARANZULLA:ODI ET AMO DEGLI “HOW TO” ONLINE“Come cambiare l’immagine del profilo su Facebook?” “Come riavviare il pc?” “Come creare un nuovo modello Word?” Chiunque ab-bia provato almeno una volta a rivolgere una domanda simile a Google, si sarà imbattuto nell’onnipresente dei tutorial sul web: Salva-tore Aranzulla. I suoi tutorial sono talmente diffusi e di facile comprensione che imma-ginare che qualcuno non lo conosca suona quasi strano.Ed è proprio per la sua vena da divulgatore ed il suo stile, che ha come fine ultimo quello di poter essere capito anche dal meno prati-co con la tecnologia, che si è guadagnato un posto di riguardo nel ranking italiano. Tra chi lo ama ed un esercito di haters, infatti, su Sal-vatore Aranzulla si trovano pagine dedicate

un po’ ovunque. Dalla mitica Nonciclopedia a SLVRNZLL che propone “le versioni sintetiche delle guide di Aranzulla che si leggono in un decimo del tempo e non offendono la tua in-telligenza”, lui è presente sempre e comunque. Tranne che su Wikipedia, dove nel 2016 gli utenti hanno votato per cancellarlo in quanto, secondo il loro parere, non offre contenuti di qualità.

PERCHÉ IL TUTORIAL È UNO STRUMENTO SEO?Ma come ha fatto il mitico Aranzulla a diven-tare così popolare? Di certo anni di pratica e duro lavoro danno i loro frutti, ma è al contem-po vero che fare dei tutorial di qualità è una strategia sempre vincente. E lo è principal-mente per tre motivi:

filtra gli utenti generando traffico di qualità; attira sempre nuova utenza; permette di ottenere link in ingresso.

IL TRAFFICO DI QUALITÀCon questo termine mi riferisco a quegli utenti che, una volta atterrati su un sito, se lo salva-no fra i preferiti. E concentrarsi su un pubblico specifico, scrivendo articoli utili e tutti con lo

stesso taglio, ne aumenterà la fiducia, spin-gendo i lettore a tornarvi quando avranno un problema analogo. Non importa quindi che ci si riferisca a professionisti che cercano sofis-ticati tutorial di fotoritocco o a cinquantenni che non riescono a cambiare l’immagine del profilo su Facebook. Ciò che conta è scegliere un pubblico e concentrarsi su di esso.

ATTIRARE NUOVA UTENZACome per qualsiasi tipo di blog, anche il tutorial-blog ha il vantaggio di attirare nuova utenza. Se si fa infatti una ricerca di parole chiave su Google AdWords, si scopre che le frasi che iniziano con “how to” hanno una me-dia di ricerche mai inferiore alle 1.000 mensili. E lo stesso vale per le frasi che iniziano con “come si fa“. Con un blog di questo tipo, quin-di, si avrà sempre un ricambio di visitatori che incrementeranno il posizionamento del sito.

I LINK IN INGRESSOI link in ingresso sono un altro parametro che contribuisce al posizionamento SEO. In altre parole, più gli utenti troveranno utile ed interessante il contenuto del sito, più saranno disposti a condividerne il link o magari ad os-pitarlo nel proprio sito, aumentandone espo-nenzialmente il traffico.

7 luglio 2017

INFO/GRAPHIC 17

“HOW TO”:il tutorial come strumento SEO

INFO/GRAPHIC INFO/GRAPHIC18 19

Quando ci si avvicina al web copywriting si rischia di incorrere nell’errore di scrivere testi per i robot. Mi spiego meglio: scrivere un testo web è qualcosa che non può prescindere da un’analisi SEO. Quello che però troppo spesso ci si dimentica è che l’ottimizzazione per i mo-tori di ricerca serve per far arrivare il lettore al sito. Sarà, però, proprio il lettore a fruire delle pagine web, e va quindi riservato proprio a lui un occhio di riguardo.

WEB COPYWRITING PERGLI UMANI:4 MOSSE PER FARLO BENE

Quali sono i fattori che rendono “umana” la re-dazione di un testo? Analizziamo quattro punti fondamentali:

le esigenze del lettore l’interattività il registro gli errori da evitare

LE ESIGENZE DEL LETTORELe esigenze che contraddistinguono il cyber-lettore, molto diverso dal lettore tradizionale,

sono per lo più legate alla facilità ed alla ve-locità con cui ci si muove tra le informazioni nel web. In particolare, è bene considerare i seguenti tre punti.

Il lettore ha fretta sempre e comunque. Anche di domenica, anche in piena notte, il nostro lettore corre. Corre proprio come le informa-zioni nel web, e come corre dietro l’angolo il pericolo che passi, con la stessa velocità, ad un altro sito. I testi per il web devono quindi essere brevi ed arrivare subito al dunque.

Il lettore non arriva dalla home page. Nella quasi totalità dei casi, infatti, chi atterra sul nostro sito lo farà da una pagina interna, ma-gari una paginetta dell’ultimo livello di naviga-zione. È bene quindi ricordarsi, in ogni pagina, di essere molto specifici quando si fa del web copywriting. Ricordare chi è che scrive, la data dell’ultimo aggiornamento del sito ed il settore di cui si occupa l’azienda proprietaria del sito web, ad esempio, sono le fonadmenta di una buona scrittura per il web.

Il lettore non ha voglia di leggere. Sembra un paradosso ma è così. Il nostro caro lettore, personaggio frettoloso e distratto, è anche

parecchio svogliato. E come aiutarlo? Il taglio giornalistico facilita la lettura, e nello specifico quando è composto da un titolo che riassume l’intero concetto ed una serie di sottotitoli che hanno il compito di organizzare le informa-zioni e renderle di facile reperimento. Elenchi puntati, grassetti e spazi fra i paragrafi vanno usati, seppur sempre senza esagerare. Ad aiu-tare sono anche le frasi brevi, di una ventina di parole in media.

L’INTERATTIVITÀSiamo nel web, ed è bene non dimenticarlo. E se c’è qualcosa che contraddistingue il web meglio di tutte le altre è l’interattività. Quando si fa del web copywriting è buona regola con-siderare, oltre alla lunghezza, la profondità, ovvero i vari livelli che si snodano a partire da una serie di link. Il vantaggio dell’interattività, infatti, è proprio quello di arricchire il testo di informazioni senza appesantire la pagina co-rrente. Spazio quindi ai link ipertestuali, agli indirizzi mail cliccabili e a tutto ciò che, in un qualunque modo, coinvolge il lettore.

IL REGISTROA scuola ci hanno insegnato a tenere un re-gistro formale quando si interagisce con degli

14 Luglio 2017

INFO/GRAPHIC 19

WEB COPYWRITING:4 fattori da considerare per favorire la lettura

INFO/GRAPHIC INFO/GRAPHIC20 21

sconosciuti. Quando si scrive per il web, però, questa regola viene meno. Il registro nei siti internet deve essere fresco, colloquiale e, laddove possibile, amichevole. Meglio rivol-gersi al lettore con un secco “tu” piuttosto che con un pesante “lei” e parlare di sé con un bel “noi” evitando le pesantissime espressioni da brochure anni ’80.

GLI ERRORI DA EVITAREIn primis ci sono gli errori di grammatica e i cosiddetti refusi. Certo, correggere un errore in un sito è molto più semplice e meno dis-pendioso rispetto ad un materiale cartaceo. Tuttavia questo non significa che trovare pa-role scritte male, errori di digitazione o frasi non particolarmente comprensibili sia meno fastidioso. Mettere il lettore in condizione di interpretare il testo vuol dire complicargli la lettura, e per un personaggio pigro significa metterlo in fuga.

Ci sono poi alcune sottigliezze che, pur non es-sendo propriamente errori, possono risultare fastidiose. Ad esempio le sigle. Certo sembra strano pensare che non tutti conoscano il sig-nificato di ONU, UE o INAIL, tanto per citarne alcune, ma è comunque sempre meglio in-

dicare anche la loro versione estesa, magari proprio con un link. Occhio quando si scrivono date e ora: sempre meglio considerare che l’ordine giorno/mese/anno cambia secondo le lingue. Per quanto riguarda neologismi ed inglesismi solo una preghiera: siate parsimo-niosi.

REALIZZAZIONEDI SITI WEB:Oltre l’estetica

21 Luglio 2017

INFO/GRAPHIC INFO/GRAPHIC22 23

Spesso, quando si parte con la realizzazione di siti web, il primo pensiero corre all’estetica. Non è raro, infatti, che i clienti mi chiedano di “realizzare un sito bello”.Quello che a volte, però, si perde di vista, è che il sito deve prima di tutto essere funzionale. Ma cosa si intende per funzionalità? Cos’è che fa sì che gli utenti spendano il loro tempo su un sito?

REALIZZAZIONE DI SITI WEB:IL CONTENUTO PRIMA DI TUTTO

La scorsa settimana abbiamo parlato di come scrivere dei testi che siano facilmente fruibili dagli utenti. Quello di cui vorrei parlarvi oggi, invece, riguarda la progettazione preliminare di un sito. Si riferisce al concepimento della sua struttura e come tutto, dal layout grafico alla stesura dei testi, debba essere subordina-to all’utilizzo finale del sito web.

In quest’ottica bisognerebbe approcciarsi alla realizzazione di siti web con un approccio me-todico, ponendosi delle domande:

1 quale scopo avrà il sito?2 come rendere chiara la sua struttura agli utenti?3 come suddividere i livelli di navigazione?

ANALIZZARE LO SCOPO DEL SITOIl primo punto da chiarire è a cosa servirà il sito web. Se si tratta di un sito aziendale, ad esempio, presumibilmente lo scopo principale sarà quello di trasmettere informazioni come il settore di business, la storia dell’azienda o l’organigramma. Se si tratta di un e-commer-ce, l’obiettivo sarà quello di condurre gli utenti sulla pagina di acquisto. Se si tratta di un blog, sarà importante rendere facile la navigazione fra i diversi argomenti trattati. Se, ancora, si tratta di un sito di coupon, tutte le informazio-ni saranno incentrate sui deal che si vuole che l’utente acquisti. E via discorrendo.

RENDERE CHIARA LA STRUTTURAUna volta chiarito il tipo di utilizzo che gli uten-ti dovranno fare del sito web, bisogna conside-rare un principio fondamentale: i fruitori non sanno come ha ragionato chi lo ha progettato. Partendo da questa base, l’obiettivo sarà for-nire a chi atterra su una qualsiasi pagina le in-formazioni sufficienti a capire come sono stati

organizzati i contenuti. In questo senso è bene suddividere tutte le informazioni secondo una struttura il più possibile frammentata, ma fa-cendo sempre riferimento all’argomento prin-cipale. Per far questo sono essenziali i titoli, i menu laterali e i suggerimenti a fine pagina come gli articoli correlati.

SUDDIVIDERE I LIVELLI DI NAVIGAZIONEUno degli strumenti fondamentali nella realiz-zazione di siti web è il menu principale. Sarà proprio grazie a questo, infatti, che gli utenti saranno in grado di muoversi fra le varie pa-gine avendone sempre chiara la gerarchia. I menu a tendina, che nei siti responsive ven-gono spesso resi tramite un menu a compar-sa laterale (come avviene nelle app), sono un altro utilissimo escamotage. È grazie ad essi, infatti, che la navigazione ed i suoi livelli gerar-chici vengono resi chiari.

PROGETTARE IL LAYOUT IN FUNZIONE DEL CONTENUTO

Una volta chiariti questi tre punti, si può proce-

dere alla realizzazione del sito vero e proprio. Fase, questa, che potrebbe essere condotta parallelamente con la realizzazione del con-tenuto. Resta però consigliabile avere prima tutti i testi, dal momento che durante la loro stesura non è raro che ci si accorga di dover modificare la struttura.

Testi alla mano, è dunque il momento di proce-dere serenamente alla progettazione grafica. E solo dopo aver assicurato a ciascun testo uno spazio che gli renda giustizia, con box e suggerimenti di ogni tipo, è il momento di pen-sare all’estetica.

INFO/GRAPHIC 23

INFO/GRAPHIC INFO/GRAPHIC24 25

Qualche settimana fa, su questo blog, ci sia-mo occupati dei contenuti di un sito web. Con il post di oggi vorrei entrare più nello specifico, e dedicare una piccola riflessione ad una delle pagine principali di ciascun sito: la “chi siamo“.

A renderla così importante è il fatto che gli utenti si rivolgono proprio ad essa per capire con chi hanno a che fare. Per questo motivo è importante fornire i dati fondamentali. Di cosa si occupa l’azienda, qual è la mission o quali sono le aree di business, sono solo al-cune delle informazioni che l’utente si aspetta di trovare.

CINQUE CONSIGLI PERPROGETTARE LA PAGINA“CHI SIAMO”

Parlare di sé non è mai semplice. Figurarsi parlare della propria azienda ad un vasto e disparato pubblico tentando anche di essere convincenti!

Ecco allora qualche consiglio per creare una pagina “chi siamo” ben scritta.

Catturare l’attenzione Essere onesti Essere concisi e coerenti Non perdere d’occhio il cliente Chi/Cosa/Perché

CATTURARE L’ATTENZIONEIl primo consiglio può sembrare banale ma non lo è. Come si fa a catturare l’attenzione di un cyber-lettore? Non esiste a questo propo-sito una soluzione univoca ed universalmente valida. Ci sono però alcuni accorgimenti che possono aiutare allo scopo. Aprire il testo con una frase d’impatto, ad esempio, è un ottimo punto di partenza. Utilizzare titoli che incurio-siscano, pur senza essre troppo enigmatici. E soprattutto sfruttare la potenzialità delle im-magini, delle animazioni e dei video.

ESSERE ONESTIGuardatevi intorno e scoprirete che il mondo

è pieno di aziende leader nel loro settore, pro-dotti numero uno, spazzolini più consigliati dai dentisti… e la lista potrebbe continuare! Siete fra questi? Molto bene, allora, scrivetelo nella vostra pagina chi siamo e siatene fieri. Se però siete una realtà più modesta, non cercate di passare per quello che non siete.

Se la vostra è una piccola azienda, se siete un ristorante casalingo o un modesto negozietto siate onesti. Probabilmente c’è qualcuno che sta cercando esattamente qualcosa un po più a misura d’uomo.

ESSERE CONCISI E COERENTIL’utente medio è pigro e non ha voglia di leggere. Ricordatevi sempre questo princi-pio. Va bene parlare della storia della vostra azienda, di quanto è solida e di come il vos-tro fatturato sia costantemente in crescita. Purché non ammorbiate il povero lettore con

28 Luglio 2017

INFO/GRAPHIC 25

CHI SIAMO:5 consigli per creare al meglio questa pagina

INFO/GRAPHIC INFO/GRAPHIC26 27

testi infiniti e racconti dettagliati di come il trisavolo di vostro nonno, nel lontano 1700, ha posato la prima pietra di quella che è ades-so un’importante fabbrica… Essere concisi e coerenti con lo scopo della pagina è una qua-lità che i vostri utenti sapranno sicuramente apprezzare.

NON PERDERE D’OCCHIO IL CLIENTENella pagina “chi siamo” dovete parlare della vostra azienda. O forse no? In realtà, ciò che un potenziale cliente si aspetta di trovare nel vostro sito è la soluzione al problema che lo ha spinto a cercarvi. Non siate troppo autore-ferenziali, quindi, e spendete qualche parola in più su che cosa avete da offrire.

CHI/COSA/PERCHÉSiate descrittivi aiutandovi con queste tre do-mande:

Chi? – La pagina chi siamo deve parlare di voi. Spiegate chi siete, da quanto tempo siete atti-vi ed i successi che avete raggiunto.Cosa? – Di cosa vi occupate? Spiegatelo agli utenti nel modo più comprensibile possibile.Perché? – Certo, a fare quello che fate siete molto bravi. Purtroppo, però, non siete gli uni-ci. Spiegate allora perché un cliente dovrebbe preferire voi. Siate espliciti, senza timore di sembrare arroganti, riguardo i motivi che vi rendono differenti (e non necessariamente migliori!) dai vostri competitors.

PROGETTAREL’HOMEPAGE:3 fattori da tenere a mente

4 Agosto 2017

INFO/GRAPHIC INFO/GRAPHIC28 29

quello di proporre i titoli in home, avendo così il doppio vantaggio di incuriosire i lettori e di avre una prima pagina sempre aggiornata.

6 I social network. Che si tratti di widget per interagire direttamente con i vostri canali social o di semplici bottoni di rimando, mostratevi sempre attivi ai vostri users.

PROGETTARE L’HOMEPAGE:GLI ERRORI DA EVITAREGli errori più frequenti nella progettazione dell’homepage sono principalmente due: un peso eccessivo ed una intro che non può es-sere saltata. Il peso eccessivo, specie nell’era del web sui dispositivi mobili, ha come con-seguenza un caricamento rallentato della pagina. Per questo motivo video o immagini troppo pesanti rischiano di allungare i tempi di attesa finendo per allontanare gli utenti. Per quanto riguarda le intro che non possono es-sere saltate, il discorso è simile.

Se infatti avete un video o un’animazione che partono all’atterraggio sulla pagina ben ven-ga, ma non forzate gli utenti a guardarli fino

Quando arriva il momento di progettare l’homepage di un sito non sempre si riesce a fare un buon lavoro. Dopotutto, si tratta della pagina più importante. Ma l’homepage non è solo questo: si tratta infatti del biglietto da vi-sita di tutta la propria presenza online.

Come si può fare allora per essere sicuri di partire con il piede giusto?

TRE FATTORI FONDAMENTALI PER PROGETTARE L’HOMEPAGE

La scorsa settimana abbiamo parlato di come scrivere i contenuti per la pagina “chi siamo”. Anche in questo caso è bene fare qualche ri-flessione preliminare, così da non partire alla cieca. Ecco allora tre punti da considerare pri-ma di lanciarsi in questa delicata fase.

Quando progettarla I contenuti da inserire Gli errori da evitare

all’ultimo. In caso contrario, rischierete che abbandonino il sito prima di essere atterrati sulla “vera” homepage.

PROGETTARE L’HOMEPAGE:QUANDO?Se si cercano nel web suggerimenti riguardo la progettazione di questa pagina ci si imbatte in numerosi consigli, a volte discordanti fra loro. Il mio consiglio, tuttavia, è di progettare questa pagina per ultima.

Come mai? La risposta a questa domanda è molto semplice. Dopo aver progettato le altre pagine avrete una chiara idea sui contenuti del vostro sito e la loro gerarchia. E dal mo-mento che la vostra pagina principale dovrà servire a guidare gli utenti, siano essi nuovi o abituali, nelle pagine interne, va da sé che se non avete una chiara idea dell’organizzazione di tutto il sito non potrete chiarirla a chi il vos-tro sito non lo ha progettato.

PROGETTARE L’HOMEPAGE:I CONTENUTI DA INSERIRECosa bisogna mettere in homepage? Se di primo acchito può sembrare una questione difficile, la realtà dei fatti è molto più clemente con i poveri designer. L’esperienza degli utenti, infatti, ci insegna che seguire una logica stan-dardizzata renderà più semplice la navigazio-ne.

Tra le cose che non dovrebbero mai mancare vanno citati:

1 Un testo che faccia capire di cosa tratta il sito e di cosa si occupa l’azienda. Si tratta di un piccolo estratto della pagina chi sia-mo, che deve essere conciso ed immedia-to.

2 Le informazioni di contatto. Anche se avete una pagina dedicata, per andare incon-tro all’utente più “svogliato” sarà meglio ripetere dati come la mail, il telefono e l’indirizzo anche in questa pagina.

3 Il form di iscrizione alla vostra eventuale newsletter. Avete una newsletter? Bene, non aspettate che gli utenti capitino per caso sulla pagina di iscrizione: semplifica-te loro la vita proponendola in homepage.

4 Immagini ed elementi grafici. Durante la progettazione dell’homepage non dimenti-catevi che si tratta pur sempre di una pagi-na di benvenuto, e che come tale dovrebbe essere gradevole ed accattivante.

5 Le news. Se il vostro sito ha un blog o una rubrica di news funzionante, il consiglio è

INFO/GRAPHIC 29

INFO/GRAPHIC INFO/GRAPHIC30 31

La bella stagione ha ormai fatto il suo in-gresso a pieno titolo. Qualcuno è già sotto l’ombrellone e qualcuno aspetta con ansia le ferie. Ma se anche gli utenti sono tutti in va-canza, perché non sospendere tutta l’attività pubblicitaria per qualche settimana? Niente di più sbagliato! Ecco allora i nostri consigli per il social marketing estivo.

SOCIAL MARKETING ESTIVO:I MOTIVI

Secondo un’infografica redatta dal team di Facebook l’estate è uno dei periodi più profi-cui per dedicarsi al social media marketing. Stando ai dati raccolti su 21 Paesi analizzati, infatti, in estate gli utenti condividono il 22% in più di fotografie, accettano il 14% in più di richieste di amicizia e sono più disposti a clic-care sulle call-to-action.

Ad essere incentivato, inoltre, è il traffico so-cial da mobile. Gli utenti infatti, trovandosi più spesso fuori casa, sono più propensi ad acce-dere ai propri profili tramite telefono.

Dati alla mano, dunque, sembrerebbe pro-prio questo il periodo migliore per dedicarsi all’attività social. Ma come cosa deve fare allora un brand per sfruttare il momento?

TRE PAROLE D’ORDINEDEL SOCIAL MARKETINGESTIVO

Le potenzialità espresse sui social network da questo periodo dell’anno sono molteplici, e allora è bene tenere fissi tre concetti chiave:

attività; creatività; emozionalità.

ATTIVITÀPuò sembrare scontato ma non lo è. Rimane-re attivi anche nei periodi di ferie è essenziale per non perdere l’attenzione dei propri fan ed eventualmente guadagnarsene di nuovi. Ed è bene considerare la fetta (molto grossa e sempre crescente) di utenti mobile. Seppure i social siano già responsive di loro, infatti, uti-lizzare grafiche tendenti alla verticalità rende più efficiente la navigazione.

CREATIVITÀNon siate monotematici! L’estate è la stagio-ne preferita dai più, il caldo incalza e i colori freddi tendono ad essere più apprezzati. I vostri fan tuttavia già lo sanno, e non siete l’unico brand a contendersi la loro attenzione. Cercate dunque di essere creativi, sfruttate le panoramiche a 360°, le gif animate e tutto quello che vi viene in mente. Puntate sempre a stupire l’utente strappandogli, laddove è pos-sibile, anche un sorriso.

EMOZIONALITÀL’estate è la stagione delle emozioni, e il social marketing estivo deve tenerne conto. Canzoni, panorami mozzafiato ed eventi sono solo alla base. Le persone sognano un’estate da non di-menticare, ed offrirgli un motivo in più per non dimenticarla non può che far bene.

INFO/GRAPHIC INFO/GRAPHIC30 31

SOCIAL MARKETINGESTIVO:Tre parole d’ordine

11 Agosto 2017

INFO/GRAPHIC INFO/GRAPHIC32 33

DA TRIPADVISORAD AIRBNB,

18 Agosto 2017

il feedback è lo strumento idealedel viaggio 2.0

Da qualche anno ormai il concetto di viaggio ha assunto una dinamica tutta nuova. Chi più chi meno, infatti, tutti quanti abbiamo sentito nominare servizi come Airbnb, Tripadvisor o BlaBla Car. Ma cos’è che rende tanto appeti-bile per gli utenti questo modo di viaggiare? Di motivi ce ne sono vari, ma uno su tutti sembra essere fondamentale e trasversale: il feedback.

IL SISTEMA DEI FEEDBACK

Ne avevamo parlato in un articolo riguardante i marketplace: il feedback è un ottimo stru-mento poiché sono gli stessi utenti a garan-tire su qualità e affidabilità. Diamo allora uno sguardo più attento a come funziona questo sistema. I siti o le app che permettono questo tipo di strumento sono classificabili secondo due parametri:

quando è consentito il feedback; chi può essere recensito.

QUANDO È CONSENTITO IL FEEDBACKSu alcuni siti è possibile fare la recensione solo dopo aver dimostrato di aver effettiva-mente soggiornato. È ad esempio il caso di siti come Airbnb dove, prima che siano trascorse 24 ore dalla fine del soggiorno e che sia avve-nuto il pagamento, non è possibile lasciare il proprio commento. In altri casi, invece, come ad esempio il noto Tripadvisor, trattandosi di portali dedicati specificatamente alle recen-sioni, chiunque può parlare di una particolare struttura.

CHI PUÒ ESSERE RECENSITOAgli albori dei siti del settore era sempre l’acquirente a scrivere le proprie impressioni sul servizio che aveva ricevuto. Da qualche anno, però, è possibile anche il contrario. Sono infatti anche gli host o in generale i fornitori del servizio a recensire l’ospite. È ad esempio il caso di BlaBla Car, con la quale è possibile las-ciare un commento sia sull’automobilista sia sui passeggeri, specificando puntualità, tipo di guida e predisposizione a fare una chiacchie-rata durante il viaggio.

PERCHÉ AGLI UTENTI PIACE TANTO IL FEEDBACK

Quando si va in vacanza spesso si ripongono le speranze e le aspettative di tutto un anno di lavoro in quei pochi giorni che si riesce a concedersi. Va dunque da sé che avere un parere rilasciato da un altro ospite che ha tes-tato il servizio prima di noi aiuti ad essere più tranquilli. Ma ci sono anche altri fattori, come ad esempio la possibilità di sfogarsi riguar-do disservizi che si potrebbe aver ricevuto. Il rischio di incorrere in recensioni false o poco obiettive, poi, è sempre minore man mano che le recensioni aumentano.

Per quanto riguarda gli host, invece, seppure esiste sempre il timore che qualche ospite lasci recensioni eccessivamente severe o dica cose non veritiere, la possibilità di rispondere o di recensire gli stessi ospiti aiuta a scongiu-rare questa paura. E se invece il feedback è positivo, allora è una vera soddisfazione!

INFO/GRAPHIC 33

INFO/GRAPHIC INFO/GRAPHIC34 35

LA COMUNICAZIONENON VA IN VACANZA.

25 Agosto 2017

Superare le divergenze linguistichecon l’impatto visivo

È tempo di ferie e di turismo, ed è bene che alberghi, città, musei e strutture ricettive in genere creino una comunicazione comprensi-bile da tutti. Che si tratti della cartellonistica, del menu di un ristorante o del sito internet, infatti, andare incontro al fruitore è sempre la migliore delle strategie. Certo, scrivere il mes-saggio in varie lingue è il primo step. C’è però qualcosa che aiuta a superare le divergenze linguistiche meglio di tutto il resto: l’impatto visivo.

OLTRE LA LINGUA:L’IMPATTO VISIVO

Quando si intende comunicare con persone provenienti da differenti Paesi, è bene ripen-sare totalmente la propria strategia comuni-cativa. Tradurre i propri contenuti infatti non è sempre sufficiente. Basti pensare a come cambia il senso di lettura sull’asse sinistra/destra fra Oriente ed Occidente, tanto per dir-ne una.

Ma allora come fare per agevolare la compren-sione? Ecco tre escamotage che aiutano a mi-

gliorare l’impatto visivo evitando di rimanere legati al problema linguistico:

le icone; le fotografie; i colori.

LE ICONEColorate o monocrome, flat o scheuomorfe, grandi o piccole ma comunque sempre belle. Le icone sono la soluzione ideale per esprime-re un concetto in uno spazio limitato renden-dolo universalmente comprensibile. Tutto ciò che serve è un po’ di attenzione per evitare di utilizzare simboli propri di una certa lingua o nazione, escludendo così chi non è in grado di decifrarli alla prima occhiata.

LE FOTOGRAFIELe fotografie sono un’arma a doppio taglio. Se da un lato infatti sono inequivocabili, dall’altro

rischiano di non essere sempre adatte ad ogni design. Ecco perché il consiglio è sempre que-llo di utilizzarle con parsimonia. Vale comun-que la pena utilizzarle là dove serve, poiché hanno un impatto visivo forte ed immediata-mente comprensibile a chiunque.

I COLORIAbbiamo approfondito questo argomento mesi fa, con un articolo sui colori ed uno sui colori nel web design. Quello che intendo sottolineare oggi è come i colori possano di-ventare un potente strumento per ovviare le differenze linguistiche. Sebbene infatti il diba-ttito sia tuttora aperto, con autori del calibro di Michel Pastoureau che sostengono che il colore sia prima di tutto un fatto culturale ed altri che sostengono il contrario, è sicuramen-te al colore che si può attingere per rendere la propria comunicazione più comprensibile a livello mondiale.

INFO/GRAPHIC 35

INFO/GRAPHIC INFO/GRAPHIC36 37

Ci sono infatti colori come il rosso che sono universalmente adatti a parlare di cibo, colori come l’azzurro che a prescindere dalla cultura di appartenenza trasmettono una sensazione di freschezza, e colori come il nero opaco che ovunque non suggeriscono emozioni positive.

IMPATTO VISIVO:LA COMUNICAZIONESU MISURA

Quando le traduzioni non sono sufficienti, quindi, saranno proprio gli accorgimenti vi-sivi a venire in soccorso. Ed in questo senso è bene, più che concentrarsi sul linguaggio, ripensare tutta la grafica per ottimizzare gli spazi e creare così una comunicazione su mi-sura. Quale misura? Senza dubbio quella del fruitore.

PERCHÉ UTILIZZAREPINTEREST?Tre cose da considerare

1 Settembre 2017

INFO/GRAPHIC INFO/GRAPHIC38 39

come l’intelligenza artificiale che punta a su-ggerire con grande accuratezza gli altri pin che potrebbero piacere ad un utente, porta Pinterest sul podio dei social più adatti a fare marketing.

PINTEREST SÌ/PINTEREST NOFatte le dovute considerazioni, va da sé che la scelta sull’utilizzo di questo social deve esse-re fatta caso per caso. Non esiste quindi una ricetta universale valida per tutti, e come sem-pre se si sceglie di utilizzarlo bisogna farlo con un buon piano editoriale. Resta tuttavia vero che, se usato nel modo giusto, questo social può dare grandi soddisfazioni.

Se avete una piccola azienda o vi occupate del marketing di un brand probabilmente ve lo sarete già chiesto: perché utilizzare Pinterest? Sebbene la maggior parte di persone lo veda-no (erroneamente) come un’alternativa al più noto Instagram, però, di motivi per utilizzarlo ce ne sono.

COS’È PINTEREST

Pinterest è un social network basato sulla condivisione di immagini. Si tratta di una ban-ca immagini intercontinentale, anche se an-cora la più larga diffusione è negli Stati Uniti. (Fonte)

Proprio come suggerisce il nome (pin = “ap-pendere”), è organizzata come una serie di ba-cheche tematiche in cui ogni utente “appende” le immagini di proprio interesse.

PERCHÉ UTILIZZAREPINTEREST?

In passato abbiamo parlato spesso di social

network, rivolgendo l’attenzione ai motivi che spingono i brand ad utilizzarli sempre più. Esiste però un social non così diffuso ma che sta guadagnandosi tuttavia una fetta sempre più larga di pubblico. Ma è davvero così im-portante per un’azienda utilizzare Pinterest?

Come per molte altre domande simili una risposta universalmente valida non esiste. Esistono però alcune considerazini che andre-bbero fatte. In particolare queste riguardano:

il SEO; il target; gli strumenti.

PINTEREST COME STRUMENTO SEOSe provate a fare una ricerca immagini su Google probabilmente otterrete più di un risul-tato proveniente da Pinterest. Provate allora ad aprirne uno, e scoprirete che quasi sempre l’immagine sul social rosso contiene un link che vi porta dritto dritto sul sito di provenien-za… Si potrebbe dire dunque che si tratta di uno strumento chiave per aumentare il traffico su un sito, soprattutto catturando nuovi utenti che diversamente non vi sarebbero atterrati.

IL TARGET: UN FATTORE IN COSTANTE EVOLUZIONESebbene con le sue bacheche dedicate ai matrimoni, alle ricette ed alla moda Pinterest abbia ancora un target a prevalenza femmini-le, è anche vero che il pubblico maschile è in costante crescita. Al di là delle differenze di genere, poi, la diffusione del social negli USA e fuori è comunque sempre in aumento, e stan-do ai dati di utilizzo tra utenti iscritti ed utenti realmente attivi, la tendenza rimarrà invariata per un bel po’.

GLI STRUMENTI: NULLA DA INVIDIARE AGLI ALTRI SOCIALMa se già i più noti Facebook, Twitter o Linke-din offrono degli ottimi strumenti, perché uti-lizzare Pinterest? Perché anche gli strumenti proposti da questo social hanno sicuramente una buona rilevanza a livello marketing.

Primo fra tutti il “buy button”, ovvero il pul-sante di acquisto, grazie al quale l’utente può essere reindirizzato direttamente alla pagina dove comprare il prodotto che gli è piaciuto. Esiste poi da poco la possibilità di caricare vi-deo, catturando così sempre più l”attenzione degli users. Altri strumenti di targetizzazione,

INFO/GRAPHIC INFO/GRAPHIC40 41INFO/GRAPHIC INFO/GRAPHIC40 41

PAGINADEI CONTATTI:Gioie o dolori?

Qualche settimana fa abbiamo trattato su questo blog la progettazione di due pagine molto importanti in un sito web: la home page e la “chi siamo“. Con il post di oggi vorrei con-cludere questo ciclo parlando di un’altra pagi-na fondamentale, la pagina dei contatti.Sebbene almeno apparentemente si tratta di una pagina dai contenuti standard, è pur vero che può bastare poco per ottenere un buon risultato.

PAGINA DEI CONTATTI:4 CONSIGLI

Solitamente le pagine dei contatti hanno tut-te dei contenuti simili tra loro. Questo fattore contribuisce a renderle bruttine e con poca personalità. Ma cosa si può fare per migliorar-ne la resa? Ecco quattro consigli:

curare i form; ottimizzare gli spazi; dare tutte le informazioni; curare lo stile grafico.

CURARE I FORMI form sono quei box contenenti dei campi di

testo in cui è possibile inserire i prorpi dati e inviarli al proprietario del sito web. La prima cosa da fare, e forse la più ovvia, è quella di evidenziarli. L’utente deve capire che si trova davanti ad un form di contatto, essendo ca-pace di individuarlo già dalla prima occhiata.

Chiedersi qual è lo scopo del form, poi, è un altro passaggio fondamentale. Serve per ave-re delle semplici informazioni? Può essere utilizzato per fissare direttamente un appun-tamento? Domande di questo genere in fase di progettazione aiutano ad organizzarlo in modo ordinato e comprensibile, evitando di fare troppe domande all’utente. Un altro punto fondamentale infatti è proprio quello di ridurre il più possibile i passaggi prima di poter clicca-re “INVIA”, evitando laddove possibile i campi obbligatori.

OTTIMIZZARE GLI SPAZIEvitare le informazioni superflue dovrebbe essere sempre una regola impressa a fuoco sulla pella dei designer. Quando si tratta della pagina dei contatti, ancora di più. In una pa-gina come questa, infatti, ricca di contenuti spesso eterogenei, gli spazi e la gabbia grafica aiutano a facilitarne la lettura.

E quando si parla di spazi, è bene sempre ri-cordarsi di strizzare l’occhio al mobile…

DARE TUTTE LE INFORMAZIONIEvitare il superfluo sì, ma senza sacrificare il necessario. Le informazioni di contatto devono esserci, e devono essere chiare. Me-glio usare formattazioni diverse per renderle visibili ed ordinate. È importante che l’utente conosca raggiunga la sede? Allora indirizzo ben chiaro e spazio alle mappe, meglio se in-terattive.

Ci sono più uffici ai quali l’utente si può rivol-gere per ottenere ciò di cui ha bisogno? Che ciascuno abbia il suo spazio, i suoi numeri di telefono, i suoi nomi di riferimento…

CURARE LO STILE GRAFICOSe si fa un giro nel web si scopre che ci sono delle pagine dei contatti assolutamente ano-nime ed altre molto ben integrate nello stile grafico del resto del sito. Casi come Pixel Wrapped o Shinner andrebbero in questo sen-so presi ad esempio. La capacità di sottolinea-re la personalità del brand, infatti, caratterizza queste pagine in modo eccellente, contribuen-do a renderle dei piccoli capolavori.

8 Settembre 2017

INFO/GRAPHIC INFO/GRAPHIC42 43INFO/GRAPHIC INFO/GRAPHIC42 43

PAY PER CLICK:

15 Settembre 2017

Cos’è, come funzionae come ottimizzare Google Adwords.

Se siete proprietari di un sito web, se avete un’azienda e vi siete chiesti come pubbliciz-zarla, o se semplicemente siete degli utenti attivi, quasi sicuramente avrete sentito parla-re delle campagne pay per click (PPC). Questo tipo di pubblicità è ormai fondamentale per chi vuole farsi spazio nella rete, e a prescinde-re dal tipo di business in cui si opera è fonda-mentale conoscerne il funzionamento.

In particolare vi parlerò di Google Adwords, considerata ormai la piattaforma PPC per ec-cellenza. Ecco allora:

cos’è una campagna pay per click; come funziona Google Adwords; come ottimizzare Google Adwords.

COS’È UNA CAMPAGNA PAY PER CLICK

Con il termine pay per click ci si riferisce ad una modalità di pagamento della pubblicità online per cui l’inserzionista paga il singolo click ricevuto. Va da sé che con questo sis-tema il costo dell’annuncio è assolutamente ottimizzato. E proprio il costo largamente ac-

cessibile ha contribuito all’enorme diffusione di questo tipo di inserzione. A fornire questo servizio, infatti, ci sono parecchie aziende ol-tre Google, come Facebook o Bing tanto per citarne alcune.

Ma cos’è che rende tanto popolare Adword, la piattaforma PPC di casa Google? Di motivi ce ne sono molti, e fra i più importanti è bene ricordare:

1 i risultati di Google Adwords sono in cima alla lista di risultati;

2 le campagne Adwords sono fortemente tar-getizzate, in base ad una serie di fattori che vanno dalla geolocalizzazione all’orario, fino alla possibilità di escludere utenti che hanno ricercato determinate parole;

3 Google è il motore di ricerca più utilizzato al mondo;

4 Una campagna Adwords dà dei risultati molto più immediati rispetto ad uno studio SEO.

COME FUNZIONA GOOGLE AD-WORDS

Il funzionamento di Adwords è piuttosto semplice, anche se non sempre intuitivo. Il primo passo consiste nella registrazione dell’account, in cui oltre ad inserire i propri dati bisognerà scegliere un metodo di pagamento collegando la propria carta di credito. Una vol-ta creato l’account si accede ad un’interfaccia in cui è possibile creare le campagne e per ciascuna si scegono le keywords, il prezzo che si vuole pagare per il singolo click, ed il budget massimo giornaliero che si intende corrispondere. È dunque il momento di creare l’annuncio e di pubblicarlo.

COME OTTIMIZZARE GOOGLE ADWORDS

Immaginate di avere un bar nel centro di Mila-no e di aver scelto come parola chiave “caffè a Milano”. Come voi, ci saranno centinaia di altre attività che puntano allo stesso obiettivo con la stessa Keyword. In base a cosa allora Goo-gle restituisce i risultati? Verrebbe quasi spon-taneo pensare che chi offre il maggior prezzo

INFO/GRAPHIC INFO/GRAPHIC44 45

ha una corsia preferenziale, ma non è così. Se infatti abbiamo detto che una campagna pay per click è molto più veloce del SEO, è anche vero che quest’ultimo è fondamentale anche per chi utilizza Adwords.

Google infatti attribuisce agli annunci un pun-teggio di qualità, che sommato al prezzo che si intende pagare per un click permette di far comparire o meno un dato annuncio. In parti-colare per ottenere un alto punteggio di qua-lità è necessario che i contenuti della pagina di destinazione siano coerenti con l’annuncio, che la pagina di destinazione abbia una buo-na user experience (sia su desktop che su mobile) e che abbia dei criteri di trasparenza. Influiscono negativamente su quest’ultimo parametro i popup e le pubblicità troppo inva-sive e l’assenza dei termini di utilizzo dei dati sensibili degli utenti.

WEB DESIGN:Come si è evoluto dagli albori ad oggi(parte 1)

22 Settembre 2017

INFO/GRAPHIC INFO/GRAPHIC46 47INFO/GRAPHIC INFO/GRAPHIC46 47

LA SECONDA GRANDERIVOLUZIONE:LA NAVIGAZIONE DA MOBILEPochi anni dopo l’introduzione dei CSS ha bus-sato alle porte dei web designers quella che possiamo indicare come “seconda grande ri-voluzione”. I primi telefoni con la connessione a internet hanno infatti spianato la strada ad un nuovo modo di concepire i siti internet, po-nendo nuovi problemi come la velocità, la leg-gibilità su schermi molto piccoli, la necessità di riorganizzare gli spazi in modo da rendirli il più possibile ordinati…

Fu così che si affermò la prima tendenza vol-ta a facilitare la navigazione da mobile: i siti mobile. Si realizzavano due diversi siti, uno per i computer ed uno per i telefoni. L’utente ve-niva reindirizzato sull’uno o sull’altro secondo il tipo di dispositivo da cui si connetteva, e la differenza consisteva nell’eliminare sul mobile i contenuti giudicati superflui.

Fu solo nel 2010, ormai alla quarta generazio-ne di iPhone, che si parlò per la prima volta

I ciber navigatori di oggi sono persone fortu-nate. Si trovano infatti a fruire di siti internet belli, curati nel dettaglio, veloci e soprattutto incentrati sull’esperienza utente. Dietro il web design moderno ci sono interi team di perso-ne che non hanno altro scopo se non quello di facilitare la consultazione dei contenuti da parte degli utenti.

Ma non è sempre stato così. Alla nascita di in-ternet si può dire che i siti web erano qualcosa di disastroso dal punto di vista della fruibilità. Come si è arrivati allora ai design moderni? Eccone un breve racconto.

Dai primi siti al responsive: la prima parte di una storia avvincente

IL PALEO-WEB DESIGN:DAGLI ALBORI AL CSS

Probabilmente i veterani della navigazione di-gitale ricorderanno, non senza qualche brivido lungo la schiena, i siti web degli anni novanta. Spesso si trattava di pagine tristi con tanto testo mal formattato ed allineato al centro,

di responsive web design. Si tratta sostanzial-mente di un solo sito (non più due diversi) in cui gli elementi cambiano disposizione in base alla larghezza del monitor. Se vuoi saperne di più, ne ho parlato in modo approfondito in quest’articolo.

dove i link erano appena identificabili dal colo-re azzurro e la sottolineatura. Ad interrompere quest’epoca buia ci furono due innovazioni:

1 l’introduzione del Javascript, che permise di introdurre i primi effetti animati;

2 ActionScript e i siti realizzati in Flash, che introducevano un nuovo concetto di im-paginazione, effetti audio e introduzioni animate.

Ma la vera grande rivoluzione la si ebbe solo nel 1998, con il nuovo millennio ormai alle por-te, grazie all’introduzione dei CSS.

IL CSS:LA PRIMA GRANDE RIVOLUZIONECSS è un acronimo che indica un linguaggio di formattazione dei contenuti web, che vengo-no scritti nei file html. Coooosaaaa? Mi spiego meglio.

Immaginate di avere una pagina web conte-nente un titolo, un’immagine ed un testo. Pri-ma dei css questa veniva realizzata attraverso un file contenente un codice che si limitava a dire:

titolo: Bla bla bla; immagine: [come si chiama e dove trovarla] testo: Bla bla bla bla bla bla bla.

Il risultato di questo codice era una sequenza di questi tre elementi senza troppi fronzoli. Con l’avvento dei CSS nel web design si in-trodusse un secondo file (chiamato foglio di stile), che si integrava al primo e permetteva di attribuire delle regole agli elementi, definen-done il colore, la grandezza, la posizione… Na-turalmente non fu tutto subito rose e fiori, poi-ché i browser non erano ancora aggiornati e non esistevano degli standard precisi sull’uso del CSS. Una frase molto emblematica l’ha scritta a questo proposito Marco Escher, web designer e blogger: “Anni in cui Browser-A ave-va la Funzionalità-A, Browser-B non ce l’aveva, Browser-C la chiamava in un altro modo e poi c’era Internet Explorer che si metteva le dita nel naso.”

Difficoltà a parte, fu comunque così che i siti iniziarono ad avere una struttura grafica vera e propria ed una personalità che li distingueva gli uni dagli altri.

INFO/GRAPHIC INFO/GRAPHIC48 49INFO/GRAPHIC 49INFO/GRAPHIC48

SCHEUMORFISMO VS FLAT DESIGN:

29 Settembre 2017

Come si è evoluto il web design(parte 2)

La scorsa settimana abbiamo iniziato a rac-contare una breve storia di come il web design si è evoluto nel tempo. Oggi proseguiamo con il racconto, che sfocia nell’era moderna. Ecco che una volta consolidatesi (o quasi) le due grandi rivoluzioni, si passa a una vera e pro-pria battaglia stilistica. La lotta scheumorfis-mo vs flat design anima le menti dei designer, guidandoli da un odio reciproco alla ricerca della sintesi.

SCHEUMORFISMO VSFLAT DESIGN:LA BATTAGLIA STILISTICAÈ ormai passato qualche anno dalla nascita della lotta sheuomorfismo vs flat design, alla quale seguì l’avvento del material design. Da allora la user experience ha avuto notevoli mutamenti, complice anche (soprattutto?) la sempre più larga diffusione dei dispositivi mobili.

Ma cosa si intende esattamente con flat design, material design, e l’impronunciabile scheumorfismo?

C’ERA UNA VOLTA LO SCHEUMORFISMOSembra una brutta parola ma è più facile spie-garla che pronunciarla. Il termine scheumor-fismo deriva dal greco e significa “a forma di attrezzo”. Si riferisce alla tendenza di trattare gli elementi grafici come se fossero oggetti reali. Un esempio piuttosto abusato ma che rende bene il concetto è la classica calcola-trice dei vecchi iOS, in cui ombre e texture la fanno da padrona.

La prima grande diffusione dello scheumorfis-mo la si è vista dal 2008, con l’avvento del primo iPhone. La scelta, oltre che dall’indiscutibile gusto estetico del colosso californiano, fu dettata dalla necessità di facilitare gli utenti ad utilizzare un dispositivo completamente nuovo. Avere dei bottoni che ricordassero gli interruttori della vita reale, un bloc-notes che sembrasse un vero blocchetto di post-it, e tutta una serie di sottigliezze analoghe ren-devano molto semplice a tutti l’utilizzo di un sistema fino ad allora sconosciuto. Tanto da arrivare a parlare di scheumorfismo sonoro, ad esempio nel suono della fotocamera di-gitale che ricorda quello dell’otturatore della fotocamera analogica.Il passaggio dello shceumorfismo da un sis-

tema chiuso come quello dell’iOS al web non si fece attendere. In pochi anni, infatti, la reta si popolò di siti web in cui questo trattamen-to grafico faceva mostra di sé in tutto il suo splendore.

WINDOWS 8 E IL FLAT DESIGNSebbene Windows 8 sia stato un sistema ope-rativo disastroso, tanto da spingere la Micro-soft a regalare il 9 a chi aveva acquistato l’8, dal punto di vista del design lo ricordiamo tutti con una certa gratitudine. Il merito principale è stato quello di rompere in maniera netta con tutta quella serie di ombre e texture tipiche dei design scheumorfici.

L’aspetto grafico del nuovo sistema operativo per PC era incentrato su una serie di box dai colori brillanti, in cui nulla più richiamava la vita reale. Ed ecco che, anche in questo caso, il passaggio alla rete avvenne in men che non si dica, facendo sorgere come funghi siti web dall’aspetto piatto (flat, appunto) e dal gusto estremamente moderno.Nel giugno 2013, poi, con il rilascio di iOS7, fu proprio la Apple a decretare l’affermazione de-finitiva del flat design. Affermazione che, però, non fu subito così accettata nel web. Era infat-ti l’inizio dello scontro scheumorfismo vs flat.

INFO/GRAPHIC50

I NFO /GRAPH ICN . 0 3 / 2 0 1 7

INFO/GRAPHIC è il magazine de L’Altra Faccia Della Mela.Le uscite sono trimestrali.

Per riceverlo è sufficiente iscriversi alla newsletter:

http://laltrafacciadellamela.it/iscrizione-newsletter/

Per richiedere i numeri arretrati contattateci all’indirizzo:[email protected]

Le nostre politiche su privacy e policy sono disponibili su:www.laltrafacciadellamela.it

Il mondo parla, noi comunichiamo.