Preferiti · Maggio ’19: colore, prototipazione e design system per i vostri progetti web


Preferiti è la rubrica di Noiza che raccoglie articoli, post, podcast, video e quant’altro che più ci hanno colpito nel campo del web design. Una rubrica pensata anche per chi non ha tempo di leggere o semplicemente vuole staccare un po’, senza per forza concentrarsi su un testo. Detto questo, partiamo:


Colore

Nei lavori di UI Design mi ritrovo spesso a lavorare con colori già definiti da un brandbook o più semplicemente da un logo. Quando devo costruire una palette colori per un sito quindi non mi serve inventarne di nuovi. Quello che mi serve è creare un ampio range di tonalità dei colori già esistenti. E per farlo Palettte è il tool perfetto.

Steve Schoger realizza questa palette partendo dal colore del brand (l’azzurro al centro). A sinistra arriviamo a un blu scuro (quasi nero) ottimo per le parti testuali. A destra invece otteniamo un azzurro molto chiaro (quasi un grigio) che ben si presta per gli sfondi.

A prima vista Palettte può risultare un po’ complicato, ma con questa breve guida risolvete la cosa in pochi minuti.

L'interfaccia di Palettte: la web app per creare palette

Potrebbe esservi utile però un ripasso sul metodo di composizione dei colori HSB. Con l’HSB possiamo definire un colore attraverso tre valori: tonalità (Hue), saturazione (Saturation) e luminosità (Brightness).

Se invece vi trovate nella situazione di dover partire da zero, senza nessun colore di riferimento, allora Adobe Color mi sembra essere la scelta più saggia. Qui potete costruire la vostra palette, ma non solo. Potete perdervi tra le innumerevoli palette di tendenza già pronte.

Adobe Color CC: l'applicazione di Adobe per costruire delle palette colore

Per ispirarci ricordiamoci anche di Dribbble e della possibilità di filtrare i design per colore.

Dribbble colors: per filtrare i design in base al colore

Design system

Ho da poco finito questo libro che è una pratica guida per creare e progettare un Design System.

La copertina del libro "Design Systems - A practical guide to creating design languages for digital products

L’autrice, Alla Kholmatova, ne sa davvero un sacco: questo è il design System progettato da lei per Future Learn.

L'uso del colore nel design system di Futurelearn

Ma anche quello realizzato dal team di IBM è pazzesco.

Una schermata del design system di Ibm

Mockup e Prototipazione

Se siete a corto di immagini e dovete realizzare la pagina del team di un’azienda, utilizzate gli Joe Schmoes: una collezione di avatar illustrati da Jon&Jess da usare come placeholder per le immagini di profilo.

Joe Schome: la gallery di avatar

Scegliamo uno sfondo, un modello o un oggetto e creiamo una stock photo con la composizione che preferiamo grazie a Moose.

Moose e il suo editor fotografico per creare immagini stock personalizzate

Humaaans invece vi permette di mixare corpi, teste, pose e vestiti per creare le illustrazioni di personaggi perfette per il vostro design.

Humaaans

Quelli di App Design Tips, in questo video, vi suggeriscono i migliori plugin per Adobe Xd. Il mio preferito? Content generator!

Non siate brutte personas
(aka: Varie ed eventuali)

Una collezione di pattern in formato svg: ripetibili, customizzabili e pronti per l’uso.

Hero patterns

Le Personas sono delle persone immaginarie che rappresentano un utente ideale. Il concetto di personas nel web design è fondamentale, e “ci mette in condizione di dare subito delle risposte alle domande o di facilitare i percorsi cognitivi, risolvendo con semplicità e immediatezza le richieste degli utenti”.
Xtension vi fornisce un template molto accurato per creare le vostre Personas.

Un esempio di template per creare le vostre personas

Se volete aggiungere qualche extra tool alla vostra barra del browser, in questo articolo trovate le migliori estensioni di Chrome per i web designer.

WeLoveWebDesign è un account Instagram che giornalmente pubblica ottimi esempi di UI e UX design. E se volete mettervi in gioco, potete provare a inviare i vostri lavori.

La pagina Instagram di WeLoveWebDesign

Tutte le aziende amano Slack, e Noiza non fa eccezione. Il motivo? La possibilità di caricare un numero infinito di emoji custom con cui accompagnare ogni momento della vita lavorativa (anche qui: Noiza non fa eccezione!). Se non avete il tempo di farle in casa, qui trovate una gallery molto ricercata.

Personalizzate le vostre emoji di Slack

Facebook Advertising per il Turismo al BTO11

Sarà per il libro che ho scritto con Alessandra.
Sarà che sento di aver imparato un sacco di cose negli ultimi tempi.
Ma è un periodo che mi diverto parecchio a partecipare a convegni ed eventi in giro per l’Italia.
Di solito, sbagliando, non lascio traccia scritta di ciò che faccio come un articolo sul blog o qualche post su Facebook. Perché sono pigro e ho scarse velleità di fare del personal branding.

Per il BTO11 faccio un’eccezione.
E la faccio per il semplice motivo che non sono così soddisfatto del mio speech.
Ero in compagnia di due colleghe del calibro di Veronica Gentili e Alessandra Farabegoli, per una lunga cavalcata di un paio d’ore sulle migliori strategie online per il mondo dell’accoglienza turistica.

Il palco del BTO 11 di Firenze
Grazie a Verner Ferrato per la foto 😉

Non sono soddisfatto perché ho costruito uno svolgimento un po’ troppo complesso, a volte macchinoso, che forse era ben chiaro nella mia testa, ma che a distanza di qualche giorno non così convinto di aver reso al meglio.

E devo per forza riprenderlo, altrimenti mi sento in colpa.

Il tema generale è Strategie di Facebook Ads.
E gli argomenti che ho descritto sono principalmente quattro:

  • Delivery
  • Target
  • Placement
  • Always On, Learning, Full Funnel

Facebook Advertising: la delivery

Sono completamente ossessionato dalla distribuzione.
Perché è un concetto difficilissimo da far passare sia agli imprenditori che ai marketer.

Se andiamo a prendere la torta del traffico di una destinazione turistica, di un hotel, di una grande travel agency italiana, siamo di fronte sempre alle stessa tipologia di acquisizione: l’ingresso da search (indifferente che sia paid o organic) supera SEMPRE il 60% del traffico complessivo, con punte addirittura dell’80%.

l’ingresso da search supera sempre il 60% del traffico complessivo, con punte addirittura dell’80%.

Più della metà del tuo traffico arriva sempre da motore di ricerca e da domanda consapevole. E il tuo baricentro marketing ha un solo obiettivo quando si parla di domanda diretta: dare la migliore risposta possibile.

Se io hotel calcolo quali siano le mie 10–20 domande di mercato principali, rispondo all’80% delle esigenze del mio traffico in una perfetta disposizione paretiana.

E il mio hotel si deve concentrare su quelle discipline che migliorano la risposta:
a) rendendo il sito dell’hotel più semplice da trovare (SEO)
b) rendendolo più chiaro e strategico (User Experience)
c) Rendendolo il più esaustivo possibile (Content Marketing)

Tutto chiaro, quasi banale. Ma cosa accade in un contesto in cui la domanda non è così esplicita? Perché, a meno che non si tratti di un puro local business (tipo buttare un occhio su Facebook alla pagina del ristorante dove voglio andare a mangiare), all’interno dei social network difficilmente sviluppo dinamiche di domanda diretta in ambito travel.

In uno spazio social come Facebook si fa ancora fatica a comprendere che l’intero baricentro, come vi mostra una normalissima pagina di insight, va spostato sulla distribuzione del contenuto: guarda l’enorme differenza tra la copertura effettiva, quante persone raggiungete, e quante di quelle persone poi vengono a curiosare e a domandarsi “chi sono questi?” sulla vostra fanpage.

differenza tra la copertura effettiva, quante persone raggiungete, e quante di quelle persone poi vengono a curiosare

E il problema si fa ancora più complicato, perché una volta appurata l’importanza della delivery, vi accorgete che state raggiungendo persone profondamente distratte dal loro frame quotidiano su Facebook: persone che si stanno facendo allegramente i fatti loro.

Ulteriore problema: il vettore di comunicazione deve declinarsi in base alla distanza geografica del vostro pubblico dal punto di conversione.

Regola n1 per fare Facebook advertising: collocare geograficamente il tuo pubblico

Target

Più il target è lontano dal prenotare una camera o dal visitare la vostra destinazione, più la vostra distribuzione sarà complessa: come si comunica a un pubblico di sconosciuti?
Più è vicino, più parliamo con un pubblico famigliare. Ed è proprio dal pubblico più vicino che dobbiamo partire perché l’unico target con cui abbiamo già familiarità.

Per esempio possiamo andare a scoprire su Audience Insights che caratteristiche ha. Oppure possiamo aprire le Analytics e scoprire quale il contenuto più cercato dalla domanda diretta, magari scopriamo che le statistiche del sito web di Discover Trieste dicono che uno dei contenuti più cercati è “la bora”, il magico vento di Trieste.

Uno dei contenuti più cercati sul sito di Discover Trieste: la bora

E trasformando il dato in informazione, andiamo a fare una costruzione editoriale proprio in linea con questo dato.

Per esempio, usando un video di un pazzo che con uno skateboard e un telo di plastica si fa spingere nel vento sul lungomare triestino.

Fare skateboard con la Bora

Ma non basta.
Perché la domanda resta: a chi andiamo a distribuire questo contenuto?

Possiamo rivolgerci a un pubblico lavorando sugli interessi di Facebook per esempio sui “viaggiatori frequenti”.

Solo che Facebook ci dice «hey guarda che stiamo parlando di 27 milioni di persone» su 33milioni di italiani presenti su Facebook.
Oppure se ho un prodotto enogastronomico vado su pubblico “wine”, e anche lì ci troviamo di fronte a 14 milioni di persone.
Quanto vale questo target? Niente, perché è troppo indistinto.

Soluzioni:

  1. O scegliere interessi specifici quindi “Bolgheri Sassicaia” e non “Wine”
  2. Oppure, cosa che preferisco, cominciare lavorare su Audience Algoritmiche, ovvero le audience somiglianti, cioé create da Facebook a partire da una fonte affidabile.

Audience

Quindi il pubblico indistinto non esiste più.
Esiste solo un ultimo anello che è quello del tuo pubblico “somigliante” e non si oltrepassa mai quel confine nella targetizzazione.
Un’estremizzazione? Certo, ma ci aiuta concettualmente a definire dei confini numerici ben precisi, soprattutto se siamo strutture piccole che non dispongono di un gran budget per permettersi di raggiungere milioni di persone.

E un uso di una audience somigliante ci costringe anche ad attivare un mindset editoriale nuovo e diverso da prima: progetto un contenuto per avere una custom audience affidabile su cui poi generare una lookalike.

Cosa abbiamo imparato?

Ok e allora come dobbiamo costruirli questi contenuti?
Forse smettendola di creare i soliti video turistici patinati, emotivi, con un sacco di tramonti sullo sfondo e cominciare a lavorare sul #nofilter totale.
Ma non soltanto un #nofilter estetico, di facciata, no no qui parliamo di “verismo” della località turistica.

Possibile, citando l’amico Sergio Cagol, che nessuna destinazione turistica abbia raccontato il dramma della devastazione dei nostri boschi nel nord-italia? Possibile che si continui a fare delivery turistica con questo enorme elefante nella sala di cui nessuno sembra accorgersi?

Unica eccezione, non turistica, il Comune di Canazei:

Il comune di Canazei e la devastazione dei boschi nel nord-italia

Empatia ed empowerment, questi sono i social.

Esattamente come il frame scelto dalla cantina Fiegl per il video della vendemmia, che parte da un vero e proprio culo del contadino in bermuda e bretelle.

La vendemmia di Fiegl

 

Il “verismo” social è diventato il mio paradigma dell’estetica turistica.

Il placement

No, sul placement c’è un lungo discorso da fare.
Troppo complesso, troppo tecnico e non adatto né a trattarlo qui né a buttarlo in mezzo alla platea del BTO11 senza approfondirlo come meritava.
Mea Culpa.

Always on, learning e full funnel

Qui il discorso è molto semplice: Facebook Ads funziona meglio se sei sempre “Always On” ovvero se sei SEMPRE in campagna.
Sembra paradossale, ma è quasi più importante seguire un obiettivo algoritmico che non un obiettivo aziendale.

In un modello precedente all’always on l’imprenditore ha una campagna da fare, magari su un particolare evento della destinazione turistica, quindi imposta l’obiettivo, sceglie un target e progetta l’inserzione:

Così:

Campagna Facebook Ads

Con l’always on, noi siamo sempre in campagna creando una struttura che rispecchi il proprio percorso di inserzione.
Quindi l’azienda, teoricamente, ha sempre aperta una campagna di copertura, o di traffico, o di interazione (ed eventualmente anche di conversione).
L’azienda sceglie poi dei gruppi di inserzione che siano il più stabili possibile e ruota gli annunci all’interno dei gruppi di inserzione.

Così:

Campagna Facebook Ads

E così:

Campagna Facebook Ads

Perché utilizziamo questo metodo?
Perché è più facile chiudere le fasi di apprendimento dell’algoritmo. Se teniamo i target stabili, Facebook ha il tempo necessario di “apprendere” tutto sul vostro target facendogli chiudere la fase di learning.

Un esempio? Beh se avete in corso una campagna di conversione, non importa quale conversione, Facebook ha bisogno che ogni gruppo di inserzione realizzi almeno 50 conversioni alla settimana per poter chiudere l’apprendimento.
Non fai 50 conversioni alla settimana? O cambi tipologia di conversione scegliendone una più leggera, oppure cambi obiettivo e da conversione passi a traffico.
Far procedere campagne che non apprendono, significa buttare via i soldi.

E cosa vuol dire Full Funnel?
Cominciamo a spiegare cosa non è full funnel: Instagram.
Ovunque io mi giri, “Instagram” è la parola più pronunciata da chiunque io incontri in azienda. Ma la cosa dev’essere ben chiara, Instagram non è ancora Full Funnel; lo sarà ovviamente, ma non lo è ancora. Questo significa che non è adatta a tutte le fasi del funnel soprattutto nella parte dedicata alla conversione.
Enorme strumento di awareness, enorme prodotto di primo touch point e spesso anche di consideration, ma da qui a diventare un importante strumento di last click to conversion, ce ne passa.
Facebook invece è perfettamente full funnel, usiamolo.

Non siete il vostro pubblico: homepage, obiettivi aziendali, bisogni dei consumatori

Diagramma di Venn: Le cose presenti sulla homepage del sito di un'università e le cose che cercano le persone che visitano quel sito
Fonte: xkcd.com

La vignetta è volutamente esagerata ma il concetto è chiaro: nella homepage di una generica università, se non è stato fatto un buon lavoro strategico a monte, è molto probabile che l’unica cosa presente di effettivo interesse per il visitatore tipo sia il nome completo dell’università.

Ma cosa si intende precisamente con “Non siete il vostro pubblico”, reso meglio inglese con “You are not the user”? L’idea di fondo è che per le persone direttamente coinvolte in un progetto, servizio o azienda è molto difficile effettuare un salto cognitivo e mettersi nei panni dell’utente tipo per capire effettivamente di cosa ha bisogno. La diretta conseguenza è che spesso i siti, e in special modo le homepage, vengono disegnate avendo come riferimento principale la visione che l’azienda ha di se stessa.

Questo porta a design e scelte di organizzazione dei contenuti inefficienti.
Il conflitto è palese: da un lato c’è chi è profondamente coinvolto, conosce nel dettaglio i propri servizi/prodotti e i contenuti del proprio siti. Dall’altro c’è l’utente: l’atteggiamento, gli obiettivi, il tempo a disposizione e la soglia di attenzione sono ben diversi.

The User Is Always Right: un bel fumetto esplicativo
Fonte: Steve Mulder, “The User Is Always Right: A Practical Guide to Creating and Using Personas for the Web”

Per evitare che ciò accada è necessario un processo a più fasi ma che fondamentalmente preveda di conoscere i propri utenti, coinvolgerli nel design process e interagire con loro.

Perché non siete il vostro pubblico

Innanzitutto già l’essere coinvolti nella realizzazione di un sito web, a qualsiasi livello, vi rende atipici per definizione. Jakob Nielsen, uno dei padri fondatori dell’usabilità sul web, sostiene che è necessario pensare alla user experience nei confronti degli outsider e non degli insider (chi richiede lo sviluppo del sito o chi lo realizza concretamente). L’antidoto a questa conversazione tra due soggetti ugualmente coinvolti ma decisamente troppo dentro al progetto è coinvolgere gli utenti finali nel processo di design. A volte però il budget non è sufficiente. Il requisito minimo però è verificare che le proprie ipotesi sull’organizzazione e la presentazione dei contenuti siano poi corroborate da utenti reali, alle prese con necessità reali.

Un altro elemento molto rilevante è relativo all’alfabetizzazione digitale. Probabilmente anche tu che stai leggendo questo articolo hai delle competenze nell’uso del computer fuori dalla media. E di conseguenza abbiamo difficoltà a interpretare i processi di utilizzo di una pagina web da chi non solo non ha idea di come il web funzioni, ma vuole esclusivamente risolvere il suo problema e tornare a guardare il proprio feed di Instagram. O di TikTok.

Un esempio illuminante è quello di Google Buzz. Google che? Appunto. Prima di riprovarci con Google Plus, the Big G tentò nel 2010 di produrre una sorta di social network per contrastare l’avanzata di Facebook. Prima del lancio la piattaforma fu testata su ben 20mila utenti. Ma fu un fallimento. Come mai? Presto detto: i 20mila utenti erano tutti impiegati di Google.

Il problema della homepage

Durante la realizzazione di un nuovo sito web o di un redesign, una delle fasi maggiormente critiche è proprio il design della homepage. Se da un lato si può spingere sul fatto che l’homepage ormai non è più il punto di accesso principale, è anche vero che non è pensabile derubricare questa pagina a qualcosa di secondaria importanza, semplicemente svolge una funzione diversa rispetto al passato.

La ragione principale per questo approccio è che l’homepage non è che uno step nel percorso dell’utente e non la sua destinazione finale. Una metafora interessante, proposta dal team di Adobe XD, è quella dell’atrio di un hotel: ne è una parte essenziale, ci passano tutti gli ospiti. Ma nessun ospite viene in un albergo per stare nell’atrio. Allo stesso modo nessun visitatore di un sito web, se è alla ricerca di informazioni approfondite o di un prodotto specifico, ha come obiettivo quello di passare del tempo sulla homepage.

Esistono ovviamente situazioni particolari in cui questo non accade, ma nella maggior parte dei casi le esigenze di un’azienda in relazione alla propria homepage rientrano in questa visione non homepage-centrica.

Qualche proposta operativa

Chi sono i nostri visitatori?

Un primo passaggio è sicuramente quello di capire chi sono i nostri potenziali visitatori. Questo può essere fatto attraverso l’analisi di dati statistici di accesso, per esempio utilizzando Google Analytics nel caso di siti web già esistenti, o dall’analisi di mercato dei propri concorrenti nel caso di nuove realizzazioni. L’interpretazione dei dati grezzi non è banale e per questo molto spesso attraverso l’analisi di freddi valori si giunge all’identificazione di personas. Termine che proviene dal concetto di maschera del teatro greco antico, nell’ambito del marketing le personas sono delle figure inventate utili a rappresentare diverse categorie di utenti/visitatori/clienti.

Le personas sono elementi ricorrenti nel recente libro del nostro Enrico Marchetto assieme a Alessandra Farabegoli perché molto utili per definire le strategie di marketing in generale e, nel nostro caso, di marketing digitale.

Quindi, anche nella definizione della homepage, identificare i potenziali utilizzatori del nostro sito web diventa molto importante: ci mette in condizione di dare subito delle risposte alle domande o di facilitare i percorsi cognitivi, risolvendo con semplicità e immediatezza le richieste degli utenti.

In certi casi è molto semplice identificare rapidamente alcune categorie di utenti: nell’esempio iniziale dell’università possiamo immaginare due grandi categorie di utenti: studenti e insegnanti/staff. Poi, volendo approfondire, sarà possibile segmentare ulteriormente in sottocategorie o cluster più specifici. Ma già porsi la domanda: “cosa cercano gli studenti” e “cosa cercano gli insegnanti o i dipendenti” nella homepage dell’università è un primo passo nella direzione giusta che ci permette di identificare i comportamenti chiave dei nostri visitatori.

Quali sono i comportamenti chiave dei nostri visitatori?

Capire chi sono le nostre personas e definire i loro bisogni a livello macro, ci permette di ipotizzare dei percorsi utente o User Journey con cui modellare la nostra homepage.

Continuando con gli esempi a tema “educativo” molto interessante è il caso di TED Ed, side-project di TED.

La homepage di TedEd

L’homepage è semplicissima: si apre con una grande immagine e due call to action che identificano a loro volta due diversi percorsi da compiere a seconda delle proprie esigenze:

  1. Sei uno studente? Clicca qui e scopri tutte le nostre lezioni.
  2. Sei un insegnante? Clicca qui e scopri come creare delle lezioni o come portare TED Ed nella tua scuola.

Un approccio sicuramente minimale, probabilmente non applicabile in molte altre situazioni, ma di certo efficace e incentrato su target specifici (studenti / insegnanti) e sui loro relativi percorsi (imparare / insegnare).

Definire una gerarchia, sempre

Il vostro sito potrebbe avere diverse personas interessate. In TED Ed, l’abbiamo già detto, sono gli studenti e gli insegnanti.

Consideriamo ora Airbnb. Qui, in maniera piuttosto evidente, siamo anche in presenza di due target distinti: turisti interessati a un alloggio per vacanze o affittuari di breve periodo da un lato, proprietari di appartamenti/case/ville che vogliono affittare.

La homepage di Airbnb

Tuttavia però aprendo l’homepage notiamo subito una cosa: il design è interamente incentrato sull’affittuario/turista. Un rimando al Journey dell’host è presente, ma è secondario, relegato a una piccola voce di menù.

Due i fattori in ballo in questo caso. In primis sicuramente lo sbilanciamento tra utenti “guest” rispetto a utenti “host”: 150milioni di guests contro meno di un milione di hosts.

Secondariamente la motivazione: il turista/affittuario è un utente “distratto”: se non trova subito quello che cerca passerà a un altro sistema di booking. Se non viene ammaliato dall’interfaccia allora probabilmente non si fiderà.

L’host è invece un utente “interessato”: per lui il sito è una possibilità concreta di guadagno o uno strumento di lavoro. Non lascerà mai il sito prima di aver portato a termine il suo compito.

Conclusioni

Abbiamo visto alcuni esempi di strategia, definizione di personas e identificazione di user journey. La combinazione di questi elementi ci porta a rivalutare gli obiettivi della homepage di un sito e a stabilire un processo orientato ai risultati.

In questo senso, assieme alle definizione degli obiettivi di una homepage, è necessario stabilire le metriche con cui verranno poi analizzati i comportamenti degli utenti stessi: qualsiasi attività venga svolta in fase di progettazione è sostanzialmente una serie di ipotesi. Queste ipotesi devono poi venire valutate alla luce dei dati reali di utilizzo. Ogni pubblico è particolare e non possiamo avere la presunzione di aver capito tutto a priori ma l’umiltà di rivedere le ipotesi e, se necessario, cambiare quello che non funziona.


Hero Image – credit: icons8.com

Preferiti · Marzo ’19


Preferiti è la rubrica di Noiza che raccoglie articoli, post, podcast, video e quant’altro che più ci hanno colpito nel campo del web design. Una rubrica pensata anche per chi non ha tempo di leggere o semplicemente vuole staccare un po’, senza per forza concentrarsi su un testo: nella prima parte dell’articolo sono proposti solo giochi, interfacce interattive, web app e simili. In coda: link ad articoli e approfondimenti. Detto questo, partiamo:


Un giochino educativo in puro stile “Aguzzate la vista” della Settimana Enigmistica che mi ha salvato durante una lunga attesa alle poste: un modo divertente per capire le scelte dei designer e le motivazioni alla base di alcune soluzioni di User Experience.

Schermata del gioco Can't Unsee

Un podcast con Jen Simmons per fare il punto sul web nel 2019. Da ascoltare al mattino, mentre camminate verso l’ufficio.

Un buon modo per spiegare una volta per tutte a un cliente che gli slideshow non sono proprio il massimo. Ma anche il nostro articolo a riguardo non è male!

Una libreria di Pure CSS Material Components.
Niente Javascript? No Javascript. ¯\_(ツ)_/¯

Schermata di esempio della libreria di componenti in puro stile material

Un tool per rimuovere lo sfondo dalle foto. In cinque secondi. Con un click.

Immagine di esempio di funzionamento del tool per rimuovere il background

Un set di icone svg free e con un ampio grado di personalizzazione.

Un’ampia raccolta di illustrazioni vettoriali free: per dare un tocco di classe ai vostri progetti.

Una raccolta di illustrazioni vettoriali free

I migliori kits per Adobe Xd consigliati dalla Adobe stessa. Naturalmente free.

Un tool per verificare se i colori dei vostri testi contrastano a sufficienza con lo sfondo.

Un libro da acquistare se alle volte pensate che il vostro web-design sia brutto, ma senza sapere bene perché.

Copertina del libro Refactoring UI

Il canale youtube e l’account twitter di Steve Schoger, uno dei due autori del libro. Per convincervi che il libro vi interessa un sacco.


La rubrica dei dieci articoli, che per motivi di tempo saranno tre.


Un’approfondita analisi del ruolo delle icone nel web scaturita da una lamentela di una madre al proprio figlio: “Come scrivo una email? Questo tablet ha solo Gmail”.

L'interfaccia di Gmail presenta solo un'icona con una penna come indicazione per scrivere una email

Una riflessione sul ruolo del designer nel mondo, ovvero di essere un “elegant simplifier”.

Il calice di vetro

Infine per il ciclo “oldie but goodie” un articolo del nostro Martino Stenta uscito su nientepopodimeno che Css-tricks.com lo scorso novembre.

Perché gli slideshow non funzionano

La scena è un classico: un cliente chiede il redesign del sito. Si affronta il tema dell’homepage e dei tanti contenuti che deve veicolare. Puntualmente viene pronunciata la parola magica: slideshow!

Gli slideshow (o slider, o carousel etc) sono dappertutto. Molto spesso l’azienda li vuole perché ritiene di risolvere due problemi: come iniziare una homepage con un po’ di movimento e come presentare più contenuti in uno spazio ritenuto molto importante. Inoltre c’è un aspetto psicologico importante: “lo fa il mio concorrente”, “lo fa il brand di riferimento del settore”.

Purtroppo però la realtà è più complessa e in questo caso anche controintuitiva. Di conseguenza da qualche tempo qui a Noiza tendiamo a sconsigliare gli slideshow. E lo facciamo con una consistente letteratura a supporto.

Vediamo nel dettaglio quali sono i problemi principali che toccano la questione slideshow.

Blindspot / Banner blindness
Numerosi test effettuati con sistemi di eye tracking mostrano che gli slideshow in generale ricevono poca attenzione da parte degli utenti. L’attenzione tende a spostarsi sul fatto che c’è uno slider e non sul contenuto effettivo. Inoltre gli utenti percepiscono gli slider come fossero dei banner pubblicitari e quindi tendono a considerarli come privi di contenuti reale ma solo dei veicoli promozionali.

Apatia o distrazione
A livello psicologico e biologico il movimento stesso produce uno stimolo nell’utente che distrae dal contenuto. È una questione legata alla parte cerebrale più antica (quella che condividiamo con i rettili) in cui un movimento improvviso poteva significare una questione di sopravvivenza. Sembrerà strano ma questo impatta anche sui nostri slider.

Mancanza di controllo
Molto spesso gli slideshow sono automatici. In qualche caso no. Ci sono gli slider che si fermano nel caso in cui ci si fermi sopra col mouse. I controlli (precedente/successivo) sono posizionati sempre in maniera diversa. Possono esserci diverse combinazioni di navigazione.
Questa grande differenza tra possibili soluzioni e la mancanza di uno standard costringono l’utente a operare uno sforzo cognitivo per capire come interagire (o anche se è possibile) interagire con lo slideshow.

Attenzione divisa
Il passaggio da una slide all’altra costringe l’utente a rifocalizzare l’attenzione, magari subito dopo aver cercato di capire cosa c’era sulla slide precedente.
Finora le considerazioni sono di carattere psicologico, magari interessanti ma non per forza deal breaker. Vediamo un po’ di dati rilevanti per chiunque abbia a cuore il proprio business, sia esso informativo o di vendita.

Conversioni molto basse
A seconda degli studi presi in esame i dati cambiano leggermente. Ma sono tragici: in buona sostanza se ci sono dei click (ed è un grosso se) saranno tutti concentrati sulla prima slide. Le statistiche dicono che siamo sotto all’1% di click. Studi di A/B test sostengono che la presenza di uno slideshow riduce le conversioni, perlopiù in quanto inducono frustrazione nell’utente.

User Experience e SEO danneggiate
Le prestazioni di un sito possono peggiorare nel caso in cui, ad esempio, uno slideshow di 5 immagini full screen viene preferito a un’immagine sola. L’aumento dei tempi di caricamento va a danneggiare l’esperienza utente ma anche le performance nelle ricerche su Google.

In buona sostanza ci sono soluzioni migliori del vecchio caro slider per aprire una homepage di un sito e proporre i propri servizi o prodotti. Vediamone alcune.

Soluzioni alternative allo slideshow

Landing pages
Anche in considerazione del fatto che l’ingresso dalla homepage non è più così rilevante come un tempo, una buona soluzione possono essere delle landing pages dedicate ai differenti segmenti del proprio pubblico. In questo modo è possibile fare quello che in gergo si definisce un reframe della propria offerta in base alle differenti personas (per approfondire sul concetto di personas ti consigliamo questo articolo).

Homepage con singola “hero image” e opportuno calendario editoriale
Probabilmente la soluzione più semplice ed efficace: creare una sezione di apertura del sito che sia accattivante e che abbia un focus specifico e calendarizzare una variazione della sezione su base settimanale/mensile. Tecnicamente semplice da realizzare, cosa che permette di ridurre i costi, e priva di tutti gli aspetti negativi dello slider.

Eliminare la “hero section” e partire direttamente con i contenuti
Un’altra soluzione, più drastica ma non per questo meno efficace, consiste nel tagliare proprio la sezione di apertura e di aprire la pagina con i contenuti che normalmente starebbero sotto.

Un po di link per approfondire

shouldiuseacarousel.com
Conciso ed efficace.

yoast.com/opinion-on-sliders
La posizione di uno dei leader di mercato per quanto riguarda all things SEO.

webmasters.googleblog.com/2012/01/page-layout-algorithm-improvement
Google sulla questione “above the fold” in un pezzo del 2012.

mediacurrent.com/blog/how-convince-your-client-slideshows-are-bad
Come convincere i clienti che gli slider non funzionano, lo spunto principale alla base di questo articolo.

uxmovement.com/navigation/big-usability-mistakes-designers-make-on-carousels
Se proprio vuoi uno slideshow almeno evita questi errori.

uxplanet.org/rethinking-the-slideshow-be-the-hero-of-your-next-web-design-project
Un altro pezzo valido sulla questione, con una lista concisa dei motivi per cui vengono ancora usati.

bradfrost.com/blog/post/carousels
La posizione di Brad Frost, ideatore del concetto di Atomic Design, molto stimato nella scena dello sviluppo Front End.

uxplanet.org/6-design-alternatives-to-avoid-evil-slideshows-9d442cf680d3
Carie Fisher illustra ben sei alternative per resistere alla tentazione di “uccidere” un sito con uno slideshow.

 

Natale 2018: i libri da regalare in ufficio

Natale si avvicina e tutti vorrebbero ricevere in regalo, nell’ordine: un adorabile armadillo; Red Dead Redemption II; una console per giocarci; un tavolo da ping-pong per l’ufficio; un ufficio abbastanza grande da farci stare un tavolo da ping-pong. E così via.

Invece – come ogni Natale – riceveremo e soprattutto regaleremo dei libri. Tanti libri.

Cerchiamo almeno di regalare libri belli e utili per chi li riceverà!

Ecco il nostro contributo alla causa: abbiamo stilato una selezione dei libri che più abbiamo apprezzato a Noiza nel 2018. Libri principalmente legati al nostro lavoro, ma non solo. Libri da regalare a Natale a tutti gli amici marketer / web designer / grafici / social media manager che vi tediano a suon di like e inglesismi durante gli aperitivi.

*

Smashing Book 6 New Frontiers in Web Design (39€)
Per chi? Per l’amico che si occupa di sviluppo web e che vuole essere sul pezzo con gli ultimi trend di settore e preparato tecnicamente per applicarli nei propri progetti.

La più autorevole risorsa per il web design pubblica ogni due anni lo Smashing Book: una summa del meglio di oggi e di domani per lo sviluppo di progetti online.

Quest’anno siamo arrivati al sesto numero e all’interno troverete dei long-form article super approfonditi su come strutturare un design systems, sull’accessibilità nelle single-page apps, sui CSS Custom Properties e CSS Grid, sui service workers e i performance patterns, sull’AR/VR/XR, e molto altro ancora.
Se non vi occupate di sviluppo, questi termini sono per voi incomprensibili.
Ma per il vostro amico web designer sono il pane quotidiano.

Oltre a il contenuto eccezionale, la forma: la copertina in tessuto color blu notte con una stampa in lamina d’oro vi farà fare un figurone.

Il libro viene spedito in tutto il mondo senza spese aggiuntive.

 

Scrivere un’email. Con voce sicura, limpida, tua (11€)
Per chi? Per l’amico che ogni tanto vi manda una mail e al secondo gerundio non riuscite più a stargli dietro e dovete ricominciare a leggerla da capo.

Luisa Carrada fa l’editor e insegna scrittura. Ha inoltre curato per più di dieci anni il blog Il mestiere di scrivere, collezionando quasi 2000 post sul tema.
Per Zanichelli ha pubblicato una serie di libricini tutti in pendant che regalati in blocco sono davvero un bel vedere (attenzione però, l’amico potrebbe arricciare il naso).
Ma soprattutto: sono delle vere e proprie guide sulla pratica della scrittura quotidiana, ricche di esempi.
Siete convinti di sapere scrivere bene? Leggete i libri di Luisa Carrada e capirete che tutti abbiamo enormi margini di miglioramento.
E quando diciamo tutti, non parliamo solo di content manager di agenzie web o editor di testate online: chiunque usi le email per lavoro – dall’amministrativo al responsabile delle risorse umane – avrà un sacco di spunti per migliorare la propria capacità di esprimersi con la scrittura.

Vedrete che alla fine il vostro amico si trasformerà in un guru-minimalista-della-lingua-italiana.

Scrivere un'email

 

Radical Candor (10€)
Per chi? Da regalare al vostro capo. Sempre che ne abbiate il coraggio 😉

In questo libro, best seller del New York Times, Kim Scott (che oltre a scrivere è stata anche CEO di Dropbox e Twitter e ha lavorato per Google e Apple) fornisce un’onesta guida a tutti i boss sui fondamenti per gestire e guidare le persone nel loro lavoro. In altre parole, come essere un kick-ass boss senza perdere la propria umanità.

Radical candor

 

Grid systems in graphic design (46€)
Per chi? Per l’amico web designer che apprezzerà sicuramente un pezzo da collezione dell’editoria scritto da una leggenda del design.

Questo librone rosso viene pubblicato nel 1981. L’autore è il grafico/designer Josef Müller-Brockmann (1914–1996) una delle figure più autorevoli della cosiddetta scuola svizzera.

Vi starete chiedendo: cosa c’entra con il web design un libro uscito a inizio ‘80?
Non esiste al mondo una guida migliore per affrontare una tematica attualissima nel web design: l’utilizzo delle griglie nella creazione di siti grazie a Css Grid.

Grid system

 

Principles: Life and Work (30€)
Per chi? Per tutti, ma in particolar modo per il capo disorganizzato.

Partiamo subito dicendo che questo libro è stato utile a Bill Gates: immaginiamo possa esserlo anche per voi!

Ray Dalio – l’autore – partendo dal suo appartamento di due stanze a Manhattan ha fondato Bridgewater Associates, la quinta private company degli USA nonché una delle maggiori hedge fund del mondo.

In Principles traccia una mappa precisa del processo decisionale di una persona che non ha mai lasciato nulla al caso, in grado di coniugare sorprendentemente il mondo dei valori con quello dei dati concreti.

Principles

 

Norwegian wood. Il metodo scandinavo per tagliare, accatastare & scaldarsi con la legna (19€)
Per chi? Per il grafico che arriva in ufficio con la camicia a quadri.

“In un mondo sempre più veloce e metropolitano, tra cemento e smartphone, fermarsi a contemplare e praticare l’antica arte del legno può essere un’inattesa via di salvezza.”
Nonostante questo incipit così yogico, non temete: non state regalando un libro new age alla persona più hipster dell’ufficio.
Gli state regalando un manuale che gli insegnerà a capire qual è il momento migliore per abbattere un albero, con che strumenti farlo, con che tecniche andare a organizzare una catasta e come accendere un fuoco.
Ma al tempo stesso gli state regalando anche un trattato di antropologia, un racconto che mostra quanto siano complesse le cose semplici, una guida per sapere godere dei risultati del proprio lavoro.

Ps: non confondetelo con l’omonimo romanzo di Murakami.

Norwegian wood

 

12 regole per la vita. Un antidoto al caos (14€)
Per chi? Per il filosofo in ufficio.

12 regole per la vita è un viaggio sorprendente all’interno delle tradizioni umane, che unisce ambiti solo apparentemente molto distanti tra loro come antropologia, psicologia e scienza. E soprattutto, è un grande catalizzatore di discussioni per la pausa caffè.

L’autore, Jordan Peterson, psicologo clinico canadese, è considerato uno degli intellettuali più influenti degli ultimi anni. Se volete farvi un’idea più approfondita del personaggio, prima dell’acquisto del libro, su YouTube trovate il video di Peterson intervistato dalla giornalista Cathy Newman su Channel 4 News.

12 Regole per la vita

 

Amber Revolution: How the world learned to love orange wine (€ 25)
Per chi? Per il collega appassionato di vino e cucina

I vini più alla moda del momento non sono né i bianchi né rossi ma… arancioni!
I vini macerati – che in inglese vengono chiamati orange wines – negli ultimi anni sono infatti entrati come categoria a sé stante nelle liste vini delle enoteche e ristoranti di tutto il mondo.

Il libro del britannico Simon J Woolf – finanziato attraverso una campagna Kickstarter – ha uno stile narrativo apprezzabile anche a chi di vino ne sa poco e niente, ma darà un sacco di spunti di conversazione al vostro collega foodie.

Lo consigliamo anche perché parla tantissimo del nostro territorio, il Friuli Venezia Giulia, protagonista assoluto della (ri)nascita degli orange wines.

Amber revolution

 

Marketing in un mondo digitale (25€)
Per chi? Per chi deve capire che il marketing non è fatto di soli numeri.

Ok, siamo di parte, ma siamo sinceri quando diciamo che consiglieremmo il libro scritto dal nostro Enrico Marchetto e Alessandra Farabegoli anche se non li avessimo mai conosciuti.

Perché? Per il modo con cui affrontano il marketing. Perché è un libro che non dà risposte, ma ti aiuta a farti le domande veramente importanti rispetto al tuo lavoro. Perché non si focalizza sui singoli elementi delle strategie, ma dà sempre una visione organica.

Se non sei convinto ancora al 100%, su questo post del nostro blog puoi leggere l’introduzione del libro.

Marketing in un mondo digitale

Marketing in un mondo digitale. L’anteprima del libro

L’8 novembre è uscito il libro che ho scritto con Alessandra Farabegoli.
Si intitola Marketing in un mondo digitale e ha come principale obiettivo quello di essere un racconto diretto, senza fronzoli e trasparente su come abbiamo affrontato alcuni “casi di marketing”, a volte riuscendoci, a volte no, fallendo.

Questa è la mia introduzione al libro e se volete acquistarlo online, lo trovate qui.

 

***

Non ho mai scritto un libro.

Forse anche per questo Alessandra mi ha lasciato l’onore di aprirlo con un’introduzione che vi accompagnasse alla lettura.

Non ho mai scritto un libro perché faccio una fatica enorme a mettere insieme pensieri, dati, intuizioni nella giusta sequenzialità logica, in un percorso ordinato dalla A alla Z. Ho sempre preferito scrivere appunti, piccoli saggi, brevi interventi o percorsi formativi, perché una forma più “volatile” rispetto alla carta mi concede maggior facilità di aggiornamento, revisione, cancellazione, tutte quelle operazioni che mi permettono di mantenere un contenuto attuale nel tempo, o di eliminarlo qualora fosse diventato ormai obsoleto.

Il senso dell’obsolescenza rapida è il demone più grande per chi fa il mio mestiere, quello di marketer, e non parlo solo dell’obsolescenza della tecnica, perché con quella si è obbligati a convivere: io che mi occupo di Facebook lavoro in un ambiente che cambia le proprie regole almeno una volta alla settimana, talvolta sconvolgendo uno scenario che credevi consolidato.

Non solo obsolescenza tecnico-operativa, dicevo, ma anche di visione e di prospettiva. L’incubo peggiore è quello di rileggermi a distanza di tempo e scoprirmi naïf, miope e scollegato dal contemporaneo. Accadrà, è inevitabile. Ma per rallentare questo processo, Alessandra e io abbiamo scelto di partire dalla parola “marketing” senza alcun prefisso, come “web”, “digital”, “online”. No, “marketing” nel suo significato più integro e cristallino: l’azione delle imprese sul mercato. Che poi questo avvenga in un ambiente digitale, ci piace considerarlo un dettaglio.

Quando ho cominciato a fare marketing, non lo chiamavo nemmeno marketing. Non avevo la consapevolezza di quanto ciò che stavo facendo fosse in realtà un contributo alle strategie di vendita di un’azienda.

Ho iniziato a occuparmi di contenuti online nel 1999: scrivevo soprattutto di gaming su portali sia specializzati sia generalisti. Non che ne faccia motivo di vanto, figuriamoci, ma credo di aver scritto il primo lungo articolo italiano dedicato ai Pokémon, dopo aver consumato non solo il mio Game Boy ma anche una marea di tempo e un paio di sessioni d’esame “in bianco” all’università.
All’epoca scrivevo con l’univo obiettivo di essere pubblicato e letto e quando mi chiedevano “ma tu che lavoro fai?”, io rispondevo “scrivo articoli online”. Non era né comunicazione online, né marketing online, era semplicemente il trasferimento di una attività offline, “scrivere articoli”, in una diversa dimensione spaziale. E l’editore, come me, replicava logiche dell’editoria tradizionale sfornando contenuti quotidiani che si distinguevano da un articolo scritto per una rivista cartacea solo per la forma: multimediale e ipertestuale.

A distanza di qualche anno ho scoperto la mia attività di allora ha oggi un nome ben preciso. Si chiama “content marketing”: una creazione di contenuto orientata sia a un pubblico di lettori, sia a un pubblico di algoritmi in grado di trovare il contenuto, che risponde a una specifica domanda sul motore di ricerca. Solo dopo qualche anno ho scoperto che la mia attività non era “la scrittura di un articolo” ma una scrittura “SEO oriented”, ovvero una scelta di stile e confezionamento del testo che puntasse dritta a ricevere le migliori attenzioni da Google.

E sono passati dieci anni prima di comprendere che non avrei dovuto scrivere solo per essere prima trovato e poi letto, ma anche per essere condiviso, e questo significava confezionare un  contenuto easy to share su Facebook. E mai avrei immaginato che il mio articolo sui Pokémon, se fosse stato scritto venti anni dopo, avrebbe coinvolto decine di specializzazioni marketing differenti: SEO, SEM, social media strategy, FB advertising, paid search, email marketing, user experience, influencer marketing, conversion rate optimization e un altro paio di termini o acronimi che anno dopo anno ci piace aggiungere a questa lista.

Ma non basta, perché questa visione è online-centrica; ovvero continuiamo a immaginare  un universo fatto di azioni e reazioni che nascono e si esauriscono all’interno di una cornice che noi abbiamo fissato per convenzione ma che nella realtà dei fatti non esiste, o non esiste più: il Web. Perché ormai la pratica del consumo trascende spazio e tempo, online e offline, e il marketing online per come lo conosciamo ha fatto il suo tempo.

Oggi le categorie di analisi faticano a interpretare il ciclo di un consumatore, che sfiora o tocca una quantità di touch point non solo complessi da individuare, ma anche difficilmente concatenabili.

Questo libro non ha alcuna pretesa di fare ordine nel caos, perché il caos ormai è un paradigma, è uno status incontrovertibile in cui è immerso il consumatore. Questo libro non è nemmeno un manuale, perché una delle ambizioni di un manuale è spiegarvi “come si fa”, e in queste pagine invece, a costo di deludere le vostre aspettative, vi raccontiamo “come abbiamo fatto noi”, analizzando i nostri contesti e i casi dei nostri clienti. Mica è detto che valgano anche per voi.

E molte volte vi troverete di fronte a una situazione in cui il nostro lavoro ha danneggiato il cliente. Sì, perché questo libro parla anche di fallimenti.

“Ok, scusate ma perché mi avete fatto comprare il libro, allora?”

Il nostro intento è solo quello di aiutarvi ad affrontare uno scenario di complessità, attraverso un percorso di consapevolezza. Non vi racconteremo come abbiamo usato l’advertising su Facebook per alzare il fatturato di un cliente, se non dopo aver risposto alla domanda: “Perché abbiamo usato Facebook?”.

Non vi suggeriremo nemmeno l’utilizzo dell’email marketing, se prima non vi avremo raccontato la strategia che sta a monte e che ci ha portati a utilizzare alcune automazioni di MailChimp per migliorare il tasso di conversione del nostro ecommerce.

Il nostro intento, quando abbiamo concepito questo testo, era di portarvi nel “dietro le quinte”, alla scoperta della strategia che abbiamo adottato per alcuni nostri clienti, senza tanti fronzoli, lavorando in totale trasparenza su casi concreti, problemi e numeri reali, parlando di successi e di insuccessi.

Non è un esercizio di ego: abbiamo cercato di far parlare i numeri e i dati, prima della nostra voce, trasformandoli in informazione strategica per le imprese. Non parliamo di noi, ma proviamo a far parlare i dati di cui siamo in possesso, per farci guidare nelle scelte di marketing.

In questo libro troverete soprattutto l’unione di due competenze, da un lato la social media strategy, dall’altro l’email marketing, con un sacco di sconfinamenti in altre discipline, dal content marketing alla SEO (Search Engine Optimization); ma se state cercando un manuale tecnico, questo libro non è la risposta. Perché più che dare risposte, proviamo a fare le domande corrette per noi e per gli imprenditori e i responsabili marketing per cui lavoriamo.

―Enrico Marchetto

 

Io ed Enrico non potremmo essere più diversi l’uno dall’altra: un game addicted lui, un’asburgica ex-scout io, ci dividono abitudini, storia personale, modi di impiegare il tempo libero. Eppure appena conosciuti ci siamo sintonizzati alla perfezione sul piano professionale, perché entrambi abbiamo lo stesso approccio: cerchiamo ogni giorno di approfondire il nostro specifico ambito di specializzazione, ma al tempo stesso non perdiamo mai di vista una prospettiva d’insieme più ampia, che include la strategia complessiva dei nostri clienti e il contesto, sempre mutevole, in cui si muovono.

Per questo entrambi odiamo le ricette preconfezionate, i “momenti giusti per pubblicare su Facebook” e il “numero giusto di caratteri nell’oggetto della mail”: sappiamo che la risposta giusta è sempre “dipende”, ma un “dipende” che non significa lavarsene le mani rispetto ai risultati, quanto piuttosto dedicarsi con impegno all’analisi di ciascun caso, guidati da un metodo che ci insegna prima di tutto a fare – a farci – le domande giuste.

Anche se non è sempre facile trovare la risposta esatta, anche se a volte le risposte sono più di una e la risposta che appena ieri era valida stamattina non funziona più.

Abbiamo pensato questo libro insieme e, come succede quando lavoriamo per un cliente comune, ciascuno di noi si è dedicato in particolare ad alcune parti del lavoro, per poi discuterne insieme e integrare le osservazioni, i punti di vista, le correzioni. Come quando teniamo un corso in coppia, ci passiamo la parola l’uno all’altra e facciamo un po’ di jazz insieme; in questo libro i Capitoli 1 e 6 li ho scritti quasi interamente io, il 2 e il 3 Enrico, il 4 e il 5 li abbiamo lavorati a quattro mani.

Dobbiamo molta gratitudine ai colleghi con cui ci siamo confrontati in questi mesi, in particolare a Gianluca Diegoli, Emanuele Tamponi, Andrea Santin, Marco Pilia, Martino Stenta.

Come spesso ci accade quando lavoriamo, è stato faticoso, ma, alla fine, divertente; speriamo che voi lo troviate anche utile.

Alessandra Farabegoli

***

 

Apogeo ha organizzato a Milano, alla Fondazione Feltrinelli, un corso di Facebook Marketing, il 27 novembre. Un’intera giornata dedicata al Facebook Marketing. Se vuoi curiosare, questo è il programma del corso.

Generate Conference: cosa ci riportiamo a casa da Londra

Scendiamo dalla Victoria Line a Green Park. Cinque minuti di camminata, direzione Picadilly Circus, e ci ritroviamo davanti alle colonne classicheggianti della Royal Institution. In cima sventola la bandiera. Il logo sembra uscito dalla suite Adobe.

La location della Generate Conference: il Royal Institute of Great Britain
Credit: Tim Mitchell

Giusto il tempo di una veloce colazione in puro stile inglese e siamo pronti per iniziare le due giornate della Generate Conference, un evento realizzato da Net, Creative Bloq e WebDesigner.

Ecco le 10 cose che ci portiamo a casa:

The Royal Institution of Great Britain

Beh, come non cominciare dal luogo dell’evento. Il Ri è sempre stato un tempio della scienza e della diffusione della cultura. A Londra sono famosissime le cosiddette Christmas Lecture – ideate niente di meno che da Micheal Faraday – che ogni anno si tengono all’interno dell’edificio. Queste lezioni sono aperte a chiunque e, dal 1825, promuovono il sapere scientifico al popolo inglese.

Se fosse il 1856, dalle poltroncine su cui sediamo del Lecture Theatre, potremmo assistere alla prima dimostrazione di Faraday sull’elettromagnetismo.

Michael Faraday, 1856, Christmas Lecture
Il dettaglio di una litografia raffigurante Michael Faraday durante una Christmas lecture alla Royal Institution. Credit: Alexander Blaikley (1816–1903)

Le animazioni in Css Di Steven Roberts

Lo sappiamo, le animazioni possono essere usate su un ampio spettro di contenuti web. Le motivazioni sono svariate: le animazioni catturano l’attenzione, comunicano gli status di uno o più elementi, influenzano il comportamento dell’utente e lo guidano cercando di rendergli la vita sul web un po’ più facile e piacevole. Se poi le animazioni vengono realizzate interamente con i Css, allora queste diventano anche un elemento super performante e supportato dai browser.

Gli esempi di Steven li trovate tutti sul suo Codepen. Tra questi, assicuratevi di non perdervi la copertina animata per uno dei numeri di Webdesigner.

Le valigie Away

Lo story telling di una campagna social dovrebbe rispondere più alla domanda “How can I help you?” piuttosto che esclamare “Look what I’ve got!”. Ed è quello che ha fatto il team di Away. Away è un brand che produce valigie. Le valigie hanno un guscio in alluminio di svariati colori e una batteria con usb per ricaricare lo smartphone fino a 5 volte. Ma non solo. Queste valigie ormai sono diventate un vero cult-status su Instagram. E questo grazie a una campagna social perfetta nei contenuti e invidiabile nell’estetica. Non è un caso che in tre anni di attività l’azienda abbia venduto 300 mila prodotti.

Away Luggage

The Question Protocol

Se mai vi capiterà di dover ripensare la UX di un form, ponetevi la seguente domanda: ma queste informazioni che sto chiedendo sono davvero necessarie?
Ogni domanda che poniamo infatti è un ulteriore ostacolo che si interpone tra l’utente e il suo obiettivo finale: il completamento del form.

Richard Rutter, vero e proprio guru della tipografia su web (ma non solo), ci presenta il Question Protocol: un documento strutturato in dieci domande che ti pongono nella condizione di chiederti “perché pretendo questo tipo di informazioni da una persona?”

The Question Protocol

Il servizio web di segnalazione per mantenere pulite le strade di Brighton e Hove

Proseguendo il suo discorso, Richard Rutter presenta il suo lavoro svolto per il City Council di Brighton e Hove: ripensare il funzionamento del form di segnalazione di Cityclean. Cityclean è un servizio online che permette ai cittadini di effettuare delle segnalazioni alle autorità per mantenere pulite le strade delle due città.

Potrei scrivere un intero articolo su questo intervento. Ma per riassumere il tutto in poche righe vi basterà sapere che porre delle domande troppo specifiche non facilita la vita all’utente, la complica.
Immaginiamo di dover segnalare la presenza di un graffito sul muro di una casa. Chiedere il numero civico della casa è una domanda troppo specifica. L’utente molto probabilmente non saprà rispondere e lascerà stare. Viceversa dare la possibilità di scrivere alcune righe permetterà all’utente di fornire informazioni preziose: “non saprei dire il numero civico in cui è stato effettuato un graffito, ma guardate, è sulla casa di fronte alla posta.”

Se volete approfondire l’argomento, qui trovate un estratto delle slide della presentazione.

Brighton & Hove City Council

Creare “arte” con i Css

Dobbiamo votare. Per alzata di mano. Ci sono tre finestre del browser aperte. In ognuna un’illustrazione di Londra. Vince un disegno fumettoso del Big Bang. A questo punto, Cassidy Williams apre in una nuova tab il suo codepen e comincia la sua dimostrazione live. Cassidy realizza illustrazioni interamente in Css. Qui il suo portfolio su codepen.

High contrast mode

Circa 2,7 milioni di persone in UK soffrono di una qualche forma di daltonismo. Windows a riguardo consente di attivare la modalità a contrasto elevato. Questa funzione semplifica la visualizzazione dei colori. Ovviamente però l’aspetto cromatico dello schermo viene profondamente modificato e snaturato.

Quando sviluppiamo l’accessibilità di un sito web dobbiamo quindi tenere a considerazione anche questo fattore. Proviamo ad attivare la modalità. Tutti i componenti sono visibili? Le bellissime png color grigio scuro che avevo realizzato per i bottoni social si vedono ancora o vengono mangiate dallo sfondo che è diventato nero?

Ricordiamoci che il web è bello perchè è per tutti e tutti quindi lo usano. Chi normalmente e chi in high contrast mode.

High Contrast Mode

Shokunin del Web

La parola giapponese Shokunin è una di quelle classiche parole molto difficili da tradurre. Uno shokunin è un artigiano il cui agire ha anche un profondo valore etico e sociale. Ed è quello che dovrebbero essere i web designer secondo Bruce Lawson: artigiani che sì, conoscono le tecniche per realizzare un sito, ma anche le persone che poi lo andranno a utilizzare.

E le persone non sono solo europei e americani con la fibra e lo smartphone:

  • In indonesia il 75% della popolazione ha una connessione non superiore ai 2G.
  • In Brasile il costo di 500MB di dati mobile corrisponde a 34 ore di lavoro.
  • Nel sud est asiatico molte persone non hanno un conto bancario con cui fare acquisti online.
  • E alcune di queste popolazioni non hanno nemmeno un cognome da inserire quando compilano un form.

E non stiamo parlando di poche persone. Secondo un report di Google and Temasek (2016), il Sud Est asiatico è il mercato internet in più rapida crescita al mondo (con una proiezione di circa 480milioni di utenti nel 2020).

Il potere del web sta nella sua universalità. Accessibile da tutti a prescindere.

Qui le slide “alternative” di Bruce.

I principi del Lego nel sito della Lego

Andrew Godfrey è stato lo UX Design Manager di Lego ed è l’ideatore del Design System dell’attuale sito della Lego.

Il Design System è un approccio progettuale che prevede la realizzazione di una serie di componenti (elementi grafici, parti di codice, etc.) che possono essere riusati, mixati e combinati in svariati modi. Tutto ciò permette di costruire nuove interfacce coerenti, solide e affidabili senza dover ogni volta reinventare la ruota.

È lo stesso principio su cui si basa il grande mondo della Lego: mattoncini, ruote, ingranaggi, finestre, porte si combinano creando infiniti risultati, ma sempre riconducibili al design della Lego. In sostanza: Lego ha utilizzato il principio che ha reso Lego uno dei brand più conosciuti del pianeta terra, per approcciare il redesign del sito web di Lego. Per la gioia di tutti i fan dei fan delle strutture ricorsive come noi.

www.lego.com

L’etica nel Web

Sintetizzando, l’etica è un sistema di principi morali che definisce ciò che è percepito come buono e cattivo. Il design etico è, quindi, il design fatto con l’intento di fare del bene, e il design non etico è la sua controparte “malvagia”.

Perché l’etica nel web è così importante? Semplicemente perché il web ormai è profondamente radicato nelle nostre vite. Adulti, nonni, bambini: chiunque può accedervi e lasciare per strada una quantità di dati sensibili nelle mani di non si sa bene chi.

Trine Falbe è la portabandiera dell’etica nel web design. Nel suo speech ci spiega come avviene la progettazione non etica e come realizzare la progettazione etica attraverso un insieme di best practice. Per approfondire l’argomento, troppo delicato per essere riassunto in un qualche elenco puntato, vi consigliamo questo articolo uscito su Smashing Magazine a marzo di quest’anno.

Canvas Lead Ads: un nuovo modo di convertire gli utenti

Facebook ci consente di costruire un Canvas Lead Ads, un’integrazione che aspettavamo da parecchio tra due formati che già conosciamo, ma che fino a ora lavoravano in maniera totalmente separata.

2015: Facebook introduce i Lead ads

Un formato di post con cui le aziende possono chiedere dati anagrafici agli utenti, come nome, cognome e indirizzo mail senza uscire dal newsfeed.
Una rivoluzione per tutti! Dalle aziende ai consumatori, perché fino ad allora eravamo abituati a processi spesso macchinosi – ed esclusivamente esterni a Facebook – per poter lasciare i nostri contatti su un sito web.

 

Esempi di Lead Ads su Facebook

 

2016: Facebook lancia il Canvas

L’esperienza degli utenti della piattaforma viene portata a un nuovo livello: leggere, scorrere, guardare video e immagini. Tutto da smartphone e (di nuovo) tutto senza uscire dalla piattaforma, risolvendo anche il problema dei lunghi tempi di caricamento di pagine web, controproducenti rispetto agli obiettivi di chi lavora nei processi di marketing e rispetto alla customer experience.

Insomma, due integrazioni non indifferenti nel giro di qualche mese.

Senza mettersi a contare le altre numerose features lanciate fino ad ora (così tante che probabilmente ne sta uscendo una anche mentre scrivo) il 2018 è un altro anno da far entrare in questa lista.

Facebook sta introducendo per alcuni accounts la possibilità di mettere assieme questi due formati, permettendo quindi di integrare il form di raccolta contatti al Canvas. E questo fino a ora non era possible.

Presi singolarmente entrambi i formati hanno degli aspetti che li rendono incompleti.

Il Lead Ads Form opera in un contesto in cui per l’utente vi è una limitatissima esperienza di navigazione: breve, concisa e a contatto con una creatività scarna… un modello quasi asettico se vogliamo esagerare.

Inoltre non è un segreto tra gli advertisers che una Lead generation esclusiva attraverso Lead Ads Form potesse restituirci contatti non proprio super qualificati.

Già, questo perché l’utente trova un form precompilato, clicca (spesso anche in maniera poco ponderata), rilascia il contatto e, com’è naturale che sia, continua a farsi gli affari propri.
Un esempio? Immaginiamo una situazione dove è prevista un’attività di recall da parte dell’azienda. Non è raro trovarsi in una telefonata a senso unico, dove l’utente non si ricorda nemmeno il nome dell’azienda, o addirittura di aver visto l’annuncio… e tanti saluti al marketing fatto bene.

Il Canvas è stato sicuramente visto più volte da tutti. Ci si interfaccia con una Landing Page full-screen da mobile, che consente di navigare le informazioni di prodotti o servizi offerti dalla propria azienda in maniera dinamica e veloce. E la possibilità di inserire diverse tipologie di contenuti ne aumenta le potenzialità, come i video dai quali estrarre un retargeting.

Lo strumento che emula il sito web all’interno della piattaforma ha portato ottimi risultati a chi lo ha utilizzato con buon senso.

Il Canvas regala un’esperienza all’utente scaldandolo nel processo. Quest’ultimo viene reso consapevole grazie alla navigazione multiformato e con la quale tra l’altro è lui stesso a decidere come interagire. Tutto questo però senza accompagnarlo verso una conversione finale, come per esempio la richiesta di un contatto.

Personalmente, come advertiser aspettavo un collegamento tra questi due formati da anni. Questa integrazione tra i due strumenti ci da infatti la possibilità di creare un anello di congiunzione tra due parti distinte del funnel di acquisizione.

Parliamo di una parte di Awareness, in una posizione più alta del funnel e una parte di Conversion, che solitamente appartiene ad una fase più avanzata.

E questa non è propriamente una questione tecnica, ma cognitiva: cioè il processo di come l’utente viene a conoscenza di determinate informazioni, le elabora e attraverso l’esperienza apprende da queste.

Alcune dritte per i nuovi Canvas Lead Ads

Dal punto di vista tecnico, proprio per il fatto di essere un nuovo formato, il Canvas Lead Ads presenta ancora delle criticità che se non affrontate rischiano di portare via qualche ora di tempo. Ecco quindi un paio di punti per evitare di perdere un pomeriggio a cliccare qua e là.

Creando una campagna dal nostro account potremo trovare la possibilità di integrazione del Canvas a livello Inserzione, selezionando il check box di riferimento.

Integrazione del Canvas a livello Inserzione: il primo passo per creare un Canvas Lead Ads

Successivamente potremo abilitare l’integrazione di una sezione finale aggiuntiva: il Lead Form appunto.

Integrazione del lead form per la creazione di un Canvas Lead Ads

Attenzione, perché ad ora non è possibile costruire il Canvas Lead Ads:

  • se non si è admin o editor di Ad account e pagina
  • in una campagna con obiettivo diverso da traffico
  • in quick mode
  • da organico (publishing tools)

Se Facebook sistema questi piccoli intoppi, il formato potrebbe piacere molto, tanto ai marketers quanto agli utenti.

Come per i normali Canvas e Leads form tutto questo ha senso se abbiamo pronte le pagine di destinazione linkabili e una privacy policy valida. Inoltre, come per i classici Leads form, bisogna capire in anticipo come gestire i Leads raccolti (download del .csv al termine o integrazione CRM).

Lo abbiamo testato? Sì, ma per qualche risultato vi facciamo aspettare, solo perché siamo maniaci dei numeri e un test non ci basta.

Web Marketing Festival 18 di Rimini: Noiza c’era

Una delegazione di sei persone, impegnata per tre giorni in uno degli eventi di web marketing più importanti d’Italia: ecco quello che ci siamo portati a casa dal Web Marketing Festival 18.

Il team di noiza al web marketing festival 2018

Le 8 cose che ci sono piaciute di più del Web Marketing Festival 2018 di Rimini

1) L’organizzazione perfetta
Chi ha organizzato un evento, anche un micro evento, almeno una volta nella vita lo sa: è una cosa impegnativa e difficile.
Organizzare un evento che coinvolge migliaia di persone è estremamente impegnativo e difficile.
Organizzare un evento che coinvolge migliaia di persone in cui tutto funziona alla perfezione rasenta l’impossibile, ma al Web Marketing Festival succede!

Le sale sono bellissime: si vede e si sente bene, la condizione ideale per seguire i workshop.
Ci si muove con estrema facilità tra un’aula e l’altra, i tempi “cuscinetto” tra gli interventi lo consentono.
Quando una sala è sold out e la gente rischia di rimane in piedi, l’intervento viene mostrato in un altro spazio: è praticamente come assistere al workshop dal vivo.

Complimenti e grazie davvero a Giorgio Taverniti e Cosmano Lombardo, le anime di questo evento. È difficile trovare qualcosa che non ha funzionato alla perfezione… ah ecco: il prossimo anno andateci piano con l’aria condizionata! 🙂

2) L’intervento di Matteo Zambon su Google Tag Manager
Competente, chiaro, semplice e divertente nell’esposizione: Matteo Zambon è considerato il guru italiano di Google Tag Manager, e in un’ora e mezza ce ne ha dato ampia dimostrazione! Uno strumento complesso come GTM è sembrato essere alla portata di tutti: chiunque in sala si è alzato con una gran voglia di mettere mano ai propri progetti e di sperimentare Google Tag Manager.

3) L’intervento di Federica Brancale sulla relazione tra Conversion Rate Optimization e User Experience
Federica apre l’intervento con questo dato: il 73% dei progetti basati su dati fallisce. Allarmante. In sala di sentono dei bisbiglii, ci guardiamo e ci chiediamo: “Ma allora che ci stiamo a fare qui?”

Poi prosegue mostrandoci il metodo utilizzato dalla sua Intarget per analizzare la user experience dei siti: A/B test, user testing, focus group, analisi euristiche, analisi cognitive.

Alla fine quel 73% ci faceva meno paura.

4) Pittini, il lato umano dell’acciaio
L’acciaio è acciaio. Come si fa a fare marketing su una commodity? Come si costruisce un brand su una materia prima?

Il Gruppo Pittini ci ha riflettuto su per tre anni, e poi ha messo in piedi un progetto di re-branding che ha attraversato tutti i settori dell’azienda. Comprese le persone.

Flavio Marocco – il marketing manager dell’azienda – nel suo speech ha raccontato come oggi i dipendenti di tutte le aree aziendali vengano periodicamente coinvolti in dei percorsi di formazione interna per trasmettergli i valori dell’azienda, raccontargli i processi e la storia, gli obiettivi del re-branding, e soprattutto farli sentire parte di un’identità comune.

Per fare in modo che tutti, una volta usciti dai cancelli dell’acciaieria, possano diventare testimonial del loro stesso brand, raccontando agli amici “dove lavorano” e com’è fatta la loro azienda.

[Disclaimer] Il Gruppo Pittini è un nostro cliente: abbiamo iniziato a collaborarci prima del re-branding, li abbiamo seguiti durante, e continuiamo a lavorarci dopo. Abbiamo seguito da vicino tutto questo processo, e sentirlo riassunto in poco più di mezz’ora ci ha ricordato per l’ennesima volta perché è bello avere clienti così.

flavio-marocco-pittini

5) Giorgio Soffiato e le sue slide “brutte”
Ascoltare Giorgio Soffiato è sempre un piacere. Ogni tanto ci verrebbe da prendere i pop corn e accomodarci in prima fila per goderci lo spettacolo: energico, senza giri di parole, senza mezzi termini, denso di contenuti e – soprattutto, che dio lo benedica – divertente.

Giorgio ha raccontato una cosa non facile e non banale: come inserire il content marketing dandogli valore e senso in un framework di lavoro più ampio. Allerta-noia? Per niente: una sala strapiena di gente che si divertiva. A uno speech tecnico bello tosto. Supportato da slide “brutte” (lo dice lui, eh!), senza effetti speciali. Ci voleva.

6) Il Ristorante Bio’s Kitchen
A Noiza stiamo molto attenti all’alimentazione: mangiare sano per noi non è moda ma necessità.
La cucina è uno spazio fondamentale del nostro ambiente lavorativo, perché lì ci prepariamo i nostri pasti ogni giorno.

Ecco: entrando a Bio’s Kitchen, ristorante a un passo dal Palacongressi sede del Web Marketing Festival 18, il primo pensiero è stato: “Ce l’avessimo a Trieste, a Noiza non ci sarebbe bisogno della cucina”.
Un buffet bio e vegano/vegetariano ampissimo, estremamente sano sia nei prodotti utilizzati che nelle preparazioni, economico.

E alla base di tutto, una filosofia che mette al primo posto l’informazione e la consapevolezza dei clienti rispetto a come si mangia sano. Per noi un paradiso.

7) Il bike sharing di Rimini
Installa sul telefono la app oBike, inserisci gli estremi della carta di credito, sblocca una bici con la lettura del QR code: eravamo a appena arrivati a Rimini e in un minuto ci eravamo già procurati delle biciclette per spostarci.

Abbiamo provato diversi sistemi di bike sharing in Europa, ma quello di Rimini ci ha stupito per l’immediatezza della gratificazione: il passaggio da “lo voglio” a “ce l’ho” è stato istantaneo!
Aggiungeteci l’ampia diffusione delle bici, che si trovano ovunque e sono facili da localizzare attraverso l’app.
Risultato: per 3 giorni ci siamo spostati solo in bici!

8) La sala dedicata alla Facebook Strategy…
…e il suo moderatore. 🙂

enrico-marchetto-moderatore