Perché Meta è la piattaforma giusta per le aziende che operano nel settore turistico

Il mondo del turismo è un universo fatto di emozioni, sogni e desideri: le persone non comprano semplicemente una vacanza ma un’esperienza, un ricordo da portare con sé.

Ecco perché, per chi lavora nel settore turistico, è fondamentale capire come parlare a quel pubblico, che ancora non sa dove andrà ma che è (inconsapevolmente) già alla ricerca di ispirazione. Nel loro contesto tipico di domanda latente, i social media possono essere un alleato prezioso.

In questo articolo esploreremo perché Facebook e Instagram sono le piattaforme giuste per chi opera nel settore travel e come possono trasformarsi in potenti strumenti per promuovere destinazioni lontane e valorizzare il territorio locale.

Customer journey: un viaggio… verso il viaggio!

Il turismo outbound, ovvero quel turismo di persone che si recano all’estero rispetto a un paese di riferimento (spesso riferito a viaggi verso destinazioni internazionali), rappresenta una delle sfide più interessanti per chi lavora in questo settore.

Quando si tratta di ispirare un utente a scegliere la meta del prossimo viaggio i social media si dimostrano il mezzo ideale per accompagnarlo lungo tutto il customer journey.

In questo Meta è uno strumento molto potente perché sfrutta il concetto di domanda latente, influenzando quindi l’utente mentre non è alla ricerca attiva di informazioni, ma quando sta semplicemente scrollando il proprio feed di Instagram o Facebook per intrattenersi.

Infatti, grazie ai dati che l’algoritmo raccoglie ogni giorno sulla piattaforma abbiamo la possibilità di utilizzare l’advertising per raggiungere tutte quelle persone che, per esempio, sono interessate a programmare un viaggio ma hanno le idee poco chiare sulla destinazione (o a quale agenzia rivolgersi).

1. Inizia a stimolare la domanda latente

Come possiamo invogliare un utente a prendere in considerazione l’idea di prenotare un viaggio? Sicuramente la soluzione migliore è quella di sfruttare contenuti visual come i video.

Formati come i Reels ad esempio possono avere un impatto elevato nel ricordo dell’annuncio appena visto, se ben costruiti (dai un’occhiata a questo articolo su come creare video efficaci e di successo per i social 😉).

Mostrare spiagge paradisiache, città pulsanti di vita o esperienze uniche può catturare l’attenzione dell’utente e influenzare la domanda latente, di modo che si traduca — in un secondo momento — nel desiderio di viaggiare.

Questo è ciò che abbiamo fatto con Neos, compagnia aerea di proprietà del gruppo Alpitour: abbiamo puntato molto sui Reels, mostrando per esempio scorci dell’estate italiana per promuovere voli verso l’Italia oppure frame suggestivi della Repubblica Dominicana (da capire se usare questi video e/o se sceglierne solo uno).

 

Visualizza questo post su Instagram

 

Un post condiviso da Neos Air (@neosair)

2. Genera un interesse reale

Una volta che abbiamo attivato l’attenzione dell’utente, possiamo spostarci verso la seconda fase del customer journey, ovvero il passaggio dall’ispirazione all’interesse concreto.

Anche in questo caso, piattaforme come Meta hanno degli strumenti ad hoc per personalizzare messaggi e contenuti delle inserzioni.

Innanzitutto, le inserzioni dinamiche. Le funzionalità avanzate di Meta permettono di mostrare prodotti specifici al singolo utente, ottimizzando i contenuti in base ai suoi interessi o alle sue interazioni online (ad esempio prodotti visualizzati o aggiunti al carrello).

Per esempio, se una persona ha sfogliato sul nostro sito le offerte per i viaggi verso l’Egitto, allora l’algoritmo le mostrerà delle inserzioni con proposte per Marsa Alam, Sharm El Sheik o Marsa Matrouh.

C’è poi la possibilità di collegare alle inserzioni un catalogo prodotti, uno strumento molto efficace che prevede che l’algoritmo proponga soluzioni “su misura” all’utente.

Su Meta possiamo impostare delle inserzioni generiche (nell’esempio vediamo le “Offerte di Novembre”) con due diversi formati di inserzioni: la collection e il carosello.

Esempio di formato Collection su Facebook sul tema "vacanza di Nalale al caldo"
Esempio di formato Collection su Facebook
Esempio di formato Carosello su Facebook con le migliori proposte
Esempio di formato Carosello su Facebook

In questo caso, l’utente aveva cercato in precedenza delle offerte per un viaggio in Thailandia: con i dati a sua disposizione, infatti, l’algoritmo ha deciso di mettere al primo posto di entrambi gli annunci proprio un’offerta su Khao Lak.

Se vuoi saperne di più sulle inserzioni dinamiche, ti suggeriamo di leggere questo nostro articolo sul blog.

3. La prenotazione e l’importanza della riprova sociale

Se il viaggio dell’utente procede come previsto, è altamente probabile che si arrivi alla tanto ambita conversione, ovvero alla prenotazione del viaggio — da parte dell’utente — sul sito.

Tuttavia, il nostro lavoro non finisce qui!

Le nostre inserzioni sono in grado di raccogliere, oltre a interessantissimi dati, anche i feedback degli utenti. Leggere i commenti dei clienti ci permette di migliorare la nostra comunicazione, dentro e fuori i social, e cercare quel bisogno (pain point) che possiamo sfruttare per le offerte future.

Proprio su Alpitour, leader italiano nel settore del tour operating, abbiamo sfruttato uno di questi punti comunicati dagli utenti, per impostare una serie di offerte incentrate sui viaggi senza passaporto.

In un periodo in cui per ottenere un passaporto l’attesa media era di 6 mesi, il topic è stato vincente, permettendo alle inserzioni di generare prenotazioni per un valore di oltre un milione di euro.

Una delle migliori inserzioni dove abbiamo sfruttato il pain point degli utenti che volevano viaggiare senza passaporto
Una delle migliori inserzioni dove abbiamo sfruttato il pain point degli utenti che volevano viaggiare senza passaporto

Turismo inbound

Abbiamo parlato finora di viaggi verso destinazioni lontane dall’Italia, ma questo non vuol dire che Meta non fornisca soluzioni anche per il turismo locale (o turismo inbound, quindi proveniente da un paese diverso da quello di riferimento). Vediamo ora alcuni esempi di strumenti per migliorare la nostra comunicazione e la nostra strategia sui social grazie all’advertising.

Massimizzare i risultati: il targeting locale

Quando promuoviamo eventi come mostre o spettacoli sportivi a livello regionale vogliamo fare vedere i nostri annunci a un pubblico specifico, che sia vicino geograficamente all’evento di riferimento.

Prendiamo come esempio il lavoro che svolgiamo per Promoturismo FVG, ente regionale che si occupa della promozione turistica del Friuli-Venezia Giulia. In questo caso vogliamo che le inserzioni che promuovono le realtà o gli eventi sul territorio vengano viste:

  • sia da persone residenti in FVG
  • sia da turisti che si trovano in quel momento in regione.

A differenza di Alpitour infatti, dove il target è molto più ampio, qui c’è bisogno di segmentare maggiormente il pubblico, in modo da massimizzare i risultati e raggiungere utenti che potrebbero essere coinvolti da ciò che si sta promuovendo.

Ed ecco che Meta mette a disposizione questa impostazione. E non solo!

Abbiamo modo di selezionare uno o più interessi del nostro pubblico.

Vogliamo promuovere un evento locale di food & wine? Allora possiamo chiedere all’algoritmo che faccia vedere le nostre inserzioni a un pubblico interessato al cibo e al vino e che, magari, parli italiano (andando a escludere chi non lo parla e, dunque, potenzialmente non residente).

In questo esempio andiamo a targettare un pubblico di persone interessati al food&wine che vivono in Friuli Venezia Giulia
In questo esempio andiamo a targettare un pubblico di persone interessati al food&wine che vivono in Friuli Venezia Giulia

Questo tipo di strumento ci permette di essere precisi anche qualora volessimo targettare dei turisti che sono in visita in una città, per esempio per promuovere una mostra.

Post promosso per la fiera dei Gusti di Frontiera a Gorizia
Post promosso per la fiera dei Gusti di Frontiera a Gorizia

Non ci basterà far altro che selezionare Gorizia come luogo di interesse, scegliere il raggio chilometrico di copertura che vogliamo raggiungere e inserire diverse lingue straniere (oppure specificare meglio il tipo di audience selezionando interessi specifici).

Esempio di impostazione di geolocalizzazione delle nostre inserzioni su Gorizia con un raggio di 25 miglia
Esempio di impostazione di geolocalizzazione delle nostre inserzioni su Gorizia con un raggio di 25 miglia

Turismo outbound e inbound: Meta è la scelta giusta

Come abbiamo visto assieme in questo articolo, sia che si parli di grosse realtà di turismo outbound (come Alpitour e Neos) sia di promozione di attività di inbound locali (come Promoturismo FVG), Facebook e Instagram si rivelano piattaforme che offrono strumenti fondamentali per portare avanti una strategia di comunicazione efficace dei nostri prodotti turistici.

Campagne di Meta Ads ben impostate possono fare la differenza nel trasformare una semplice idea di viaggio in una prenotazione reale.

Il futuro del marketing turistico passa da qui: dalla capacità di utilizzare i social media non solo per vendere, ma anche per raccontare, ispirare e connettersi con i desideri profondi dei viaggiatori.

Il redesign di Ratio.it in 7 pillole

Sistema Ratio è tra le più autorevoli e consultate case editrici nell’ambito dell’aggiornamento e approfondimento fiscale.

Nel corso del 2022 siamo stati incaricati di progettare il redesign del suo quotidiano online: Ratio.it

Abbiamo lavorato su questo progetto per più di un anno affrontando diversi temi su diverse scale: dalla funzionalità di stampa di un articolo, all’intero look and feel dell’ecosistema Ratio; dall’accessibilità di un singolo bottone, alla creazione di landing page modulari completamente personalizzabili da parte del cliente.

Data la complessità e l’importanza del progetto, è difficile riassumerlo in poche righe. Tuttavia, vorrei sottolineare alcuni aspetti che mi hanno particolarmente affascinato.

In rigoroso ordine sparso, naturalmente.

1. Moodboard e studio del colore

Il sito precedente utilizzava ben undici colori diversi. Uno per tipo di pubblicazione. Subito ho cominciato a lavorare per ridurre questa gamma cromatica a un solo colore: l’arancione del logo.

Il precedente menu: 11 colori. Il bianco usato sull’arancione non supera i test di accessibilità per il contrasto dei colori.
Il precedente menu: a ogni voce è abbinato un colore, per un totale di 11 tonalità diverse. Notiamo anche che il banner sotto al logo composto da un testo bianco sull’arancione non è molto leggibile: non supera infatti i test di accessibilità per il contrasto dei colori.

Da qui ho sviluppato l’intera palette del sito costruita su diverse sfumature dell’arancione e del grigio. In questa fase è stato cruciale studiare il rapporto tra i colori, cercando combinazioni che garantissero la massima leggibilità e accessibilità per tutti gli utenti.

Questo approccio ha contribuito a creare un ambiente visivo armonioso e funzionale, migliorando l’esperienza complessiva degli utenti sul sito Ratio.it.

Una tavola della moodboard con varie declinazioni di grigio e arancio. Nella parte bassa vediamo anche i test di color contrast che ci permette di capire che sull’arancione è meglio applicare testi di colore nero (e non bianco).
Una tavola della moodboard con varie declinazioni di grigio e arancio. Nella parte bassa vediamo anche dei test di color contrast che ci permettono di capire che sull’arancione è meglio applicare testi di colore nero (e non bianco).

2. Funzione di stampa degli articoli

Gli utenti di Ratio stampano gli articoli per poterli studiare in dettaglio, annotarli e sottolinearli.

Tendenzialmente, qualsiasi browser ha una funzione di stampa integrata, ma le pagine web includono elementi come menù, footer, tasti per la condivisione sui social e gli articoli correlati. Tutte queste cose occupano spazio e presentano spesso campiture di colore pieno che fanno consumare un sacco di inchiostro.

Per risolvere questo problema, abbiamo creato una funzionalità di stampa ad hoc, dove qualsiasi elemento superfluo viene in automatico eliminato dal layout di stampa.

La mia scrivania con un articolo di Ratio stampato. Il layout pulito garantisce una lettura priva di distrazioni e fa durare più a lungo la cartuccia della stampante ;)
La mia scrivania con un articolo di Ratio stampato su A4. Il layout pulito garantisce una lettura priva di distrazioni e fa durare più a lungo la cartuccia della stampante 😉

3. Risultati della ricerca e micro copy

Una significativa percentuale di utenti utilizza la barra di ricerca per trovare rapidamente ciò che cerca anziché navigare attraverso il menu di navigazione (fonte).

Per questo motivo, attribuire un’adeguata importanza al design della barra di ricerca e ai relativi risultati è un aspetto cruciale durante la progettazione di un sito web.

Per quanto riguarda Ratio, però, mi voglio soffermare soprattutto sulla progettazione della pagina che si presenta quando la ricerca non restituisce alcun risultato.

La ricerca effettuata dall’utente non ha portato a nessun risultato. L’utente però trova nel copy un aiuto per poter proseguire e migliorare la ricerca
La ricerca effettuata dall’utente non ha portato a nessun risultato. L’utente però trova nel copy un aiuto per poter proseguire e migliorare la ricerca

Innanzitutto, notiamo che la barra di ricerca è prontamente accessibile all’apertura della pagina. Non abbiamo, quindi, la necessità di cliccare nuovamente sul menù per accedervi.

A seguire, abbiamo inserito dei micro copy che offrono all’utente dei suggerimenti per migliorare la propria ricerca e proseguire nel processo di ricerca di un contenuto specifico del sito.

4. Call to action personalizzate all’interno dell’articolo

Ratio gestisce un proprio e-commerce dedicato alla vendita delle sue riviste, ebook e corsi di formazione. Per il team, era quindi cruciale poter promuovere questi contenuti all’interno degli articoli gratuiti del sito.

Per soddisfare questa esigenza, abbiamo sviluppato non una, ma ben quattro tipologie di moduli customizzabili, che permettono di creare dei veri e propri banner promozionali direttamente all’interno degli articoli.

Il modulo call to action dedicato alla promozione delle riviste.
I moduli “call to action” consentono di integrare in modo flessibile e efficace le promozioni all’interno degli articoli del sito.

Il primo modulo è specificamente progettato per promuovere le riviste, ottimizzato per l’utilizzo di immagini in formato PNG, ideali per mostrare le copertine delle pubblicazioni.

i moduli “call to action” consentono di integrare in modo flessibile e efficace le promozioni all'interno degli articoli del sito.

Il secondo modulo è dedicato alla promozione dei corsi online e altri prodotti, caratterizzato da una grande versatilità e arricchito di tutti i dettagli necessari per catturare l’attenzione degli utenti.

Infine, abbiamo creato due moduli più semplici, composti da un testo e una chiara call to action. Naturalmente sempre completamente editabili per adattarsi alle esigenze specifiche del contenuto promosso.

Uno sguardo al backend: l'editor può personalizzare un articolo con diversi moduli tutti customizzati. Qui vediamo evidenziate i 4 moduli call to action. In questo momento l'editor ha optato per il modello "essential", caretterizzato semplicemente da un titolo, un sottotitolo e un link
Uno sguardo al backend: l’editor può personalizzare un articolo con diversi moduli tutti customizzati. Qui vediamo evidenziate i 4 moduli call to action. In questo momento l’editor ha optato per il modello “essential”, caretterizzato semplicemente da un titolo, un sottotitolo e un link

5. Articoli con e senza immagine

Le immagini arricchiscono sempre un sito editoriale. In particolare, sono fondamentali per dare ritmo alle lunghe pagine degli archivi, perché aiutano gli utenti a trovare un punto di riferimento visivo durante lo scroll delle pagine.

Prendo, però, i titoli degli ultimi articoli pubblicati su Ratio:

  1. Modulistica per il concordato preventivo biennale
  2. Dichiarazioni di intento, regole e finalità
  3. Ferie solidali, quando il lavoro fa rete

Quanto è facile cercare un’immagine da abbinare a questi articoli? A eccezione del terzo, direi poco.

Per questo motivo, ho lavorato sulla possibilità di gestire gli articoli negli archivi sia con sia senza immagini, senza andare però a compromettere il design della pagina. Se un articolo ha un’immagine, viene visualizzata; altrimenti, viene questa sostituita da un abstract testuale che arricchisce il titolo.

Il layout delle news varia a seconda della presenza o meno di un'immagine. Questo permette all'editor del sito di non dover necessariamente trovare un'immagine per ogni articolo, considerato che molti titoli sono difficilmente rappresentabili visivamente.
Il layout delle news varia a seconda della presenza o meno di un’immagine. Questo permette all’editor del sito di non dover necessariamente trovare un’immagine per ogni articolo, considerato che molti titoli sono difficilmente rappresentabili visivamente.

L’asimmetria data dalla presenza alternata di immagini e abstract testuali crea un ritmo visivo dinamico, ma coerente grazie alla griglia regolare del layout.

6. Core Web Vitals

I Core Web Vitals sono un insieme di metriche di Google che misurano la velocità, la reattività e la stabilità visiva di una pagina web, influenzando l’esperienza utente.

Nella settimana del 12 gennaio 2024 abbiamo pubblicato il sito: gli url che richiedevano miglioramenti si azzerano e vengono completamente rimpiazzati dagli url “buoni”.
Nella settimana del 12 gennaio 2024 abbiamo pubblicato il sito: gli url che richiedevano miglioramenti si azzerano e vengono completamente rimpiazzati dagli url “buoni”.

Dal grafico si può notare che, complessivamente, tutto il sito è passato da una situazione piuttosto critica a una condizione ottimale in pochi giorni dalla pubblicazione. I link con problemi critici (o che necessitavano miglioramenti) sono stati praticamente azzerati.

7. Rationalizzazione del sito

Ovvero la personalizzazione in chiave “Ratio” di tutti gli elementi che compongono il sito.

Dall’accordion…

l'accordion

… alla selezione del testo.

Ulteriori approfondimenti

A Ratio abbiamo anche dedicato una case study che potete leggere qui.

Come rivoluzionare la gestione dei contatti attraverso un form condizionale

Diverse aziende, negli anni, ci hanno chiesto di supportarle nell’ottenimento di nuovi contatti (lead) tramite landing page, nonché di qualificare questi lead per consentire una gestione più efficiente dei contatti da parte del team interno. Tra queste, anche Pratic, azienda italiana specializzata nella progettazione e produzione di pergole bioclimatiche.

Nel loro caso, abbiamo quindi deciso di sviluppare, all’interno della landing page, un form che si adattasse alle esigenze specifiche dei potenziali clienti.

Il form condizionale

Il form condizionale ha la caratteristica di adattarsi in tempo reale in base alle risposte e alle scelte effettuate dagli utenti. Se un utente indica interesse per le pergole, ad esempio, il form mostrerà solo domande pertinenti a questo tipo di prodotto, escludendo le tende.

Per facilitare questo processo, abbiamo creato un diagramma di flusso che rappresentava tutte le possibili strade che gli utenti potevano percorrere mentre compilavano il form. Questo ci ha aiutato a pianificare e visualizzare chiaramente le varie possibilità, garantendo un’esperienza utente fluida e intuitiva.

Il diagramma di flusso sintetizza l’intero processo di compilazione del form tenendo insieme in unico documento tutte le possibili diramazioni.

L’implementazione del form condizionale

Una volta sviluppato, il form è stato integrato nella landing page dedicata. Qui, tutte le logiche condizionali, precedentemente pianificate nel diagramma diagramma di flusso, sono state applicate.

Due esempi di logiche applicate al form: se un utente indica interesse per le pergole, il form mostrerà i campi relativi al budget per le pergole e nasconderà quelli relativi alle tende. E viceversa
Il form condizionale all’opera all’interno della landing page.

Dopo aver definito la tipologia di progetto, l’utente viene guidato attraverso domande mirate su preferenze, budget e caratteristiche tecniche desiderate per pergola e chiusure laterali, prima di richiedere i dati anagrafici.

Man mano che il form viene compilato, la richiesta dell'utente diventa sempre più strutturata. Definite le chiusure laterali il form mostra il campo per la compilazione dell'anagrafica, ovvero l'ultimo passaggio.
Man mano che il form viene compilato, la richiesta dell’utente diventa sempre più strutturata. Definite le chiusure laterali il form mostra il campo per la compilazione dell’anagrafica: l’ultimo passaggio.

Zapier: il connettore tra il form e il CRM aziendale

Abbiamo utilizzato Zapier per connettere direttamente l’advanced form al CRM dell’azienda. Questa integrazione ha consentito una gestione più efficiente dei dati dei lead, semplificando il flusso di lavoro interno.

Una strategia di Marketing trasversale e misurata

La strategia di marketing si è concentrata sulla pianificazione e realizzazione di campagne su diverse piattaforme, tra cui Meta, Google Ads, Pinterest e LinkedIn. Per ogni canale, abbiamo creato dei contenuti appropriati in termini di grafica e copy testuali, al fine di massimizzare l’impatto e raggiungere il pubblico di riferimento.

Inoltre, abbiamo implementato un sistema di tracciamento in grado di attribuire correttamente i risultati ai canali appropriati. Questo sistema di attribuzione ha consentito all’azienda di valutare l’efficacia di ciascun canale e di adattare le strategie di marketing in base ai risultati ottenuti.

I risultati e il lead scoring

I risultati di questo progetto sono stati notevoli. La gestione avanzata dei leads ha non solo aumentato il numero dei contatti qualificati, ma ha anche ottimizzato il flusso interno aziendale.

Al form condizionale, infatti, abbiamo abbinato un sistema di lead scoring, dove a ogni risposta è stato attribuito un valore numerico. Grazie a questo sistema, il team di marketing interno è stato in grado di identificare e trasmettere per primi i lead considerati più profittevoli e interessanti alla rete vendita.

Conclusioni

In conclusione, l’implementazione di un advanced form e la lead generation qualitativa hanno permesso, nel caso di Pratic, di ottenere una gestione dei contatti più efficace e mirata. Questo approccio ha consentito di ottimizzare le risorse interne dell’azienda, e di concentrare gli sforzi sulle opportunità più promettenti.

Ulteriori riferimenti

Per scoprire di più su quanto abbiamo fatto per Pratic, potete leggere la case study dedicata, disponibile nella nostra pagina dei progetti.

 

Una tempesta di dischi

Ho una grande passione per gli LP.
E questo, devo dire, ben si sposa con il profondo spirito archivistico che mi caratterizza.

Per fare un esempio, i vinili sulle mensole di casa sono, sì, in ordine alfabetico, ma in primis sono divisi per decadi.
Alcuni mantengono la mente allenata con La Settimana Enigmistica. Alla mia compagna, invece, basta cercare un disco da metter su.

Da qui il mio entusiasmo nello scoprire di dovermi occupare del redesign del sito La Tempesta con il suo catalogo di duecento e passa dischi.

La tempesta

La Tempesta è un’etichetta indipendente che dal 2000 promuove la nuova musica italiana. In vent’anni di attività, gli artisti prodotti sono un centinaio, e tra questi possiamo citare velocemente i più noti: Tre Allegri Ragazzi Morti, The Zen Circus, Le luci della centrale elettrica, M¥SS KETA, Sick Tamburo e molti altri.

Il logo de La Tempesta

In questo articolo ci concentreremo sul design di una pagina tipo: la “pagina disco”, colonna portante dell’intero sito.

La pagina disco

Quando incomincio a lavorare al design della pagina “disco” mi accorgo subito di una cosa: le immagini a mia disposizione sono piccoline, soprattutto se andiamo a guardare dischi vecchi. Sicuramente non possiamo chiedere al cliente di ricaricare in alta definizione tutte le copertine presenti in archivio. Parliamo di centinaia di foto.

Accantono quindi subito l’idea di utilizzare un’immagine buca schermi in apertura.

Seconda cosa: le copertine sono tutte quadrate (e ci mancherebbe altro).

Se per caso non ci avessi già rinunciato prima, ora è chiaro che utilizzare un qualsiasi tipo di immagine fullscreen in testata è impossibile.

Decido allora di dare molto peso al titolo del disco lavorando con una tipografia piuttosto grande. Riesco così a riportare in equilibrio la composizione, momentaneamente affossata dalla copertina.

Però come vedremo nel prossimo paragrafo, è una scelta che si porta dietro delle conseguenze.

La pagina del disco con la foto di copertina affiancata al titolo
Copertina e titolo si spartiscono la scena.

 

Titoli dei dischi: criticità e potenzialità

Lavorare sul web con una tipografia molto grande e con dei testi molto vari è sempre un casino.

La dimensione dei titoli dei dischi infatti deve funzionare sia con testi brevi che con testi lunghi.

Per capirci, la dimensione deve adattarsi alla singola A (titolo dell’ultimo album di Blindur), ma anche a Vita e opinioni di Nello Scarpellini, gentiluomo (degli Zen Circus). Senza dimenticarci di titoli magari anche brevi, ma composti da una parola molto lunga. Le parole lunghe infatti rischiano di essere spezzate su due righe. Per esempio, PHANTASMAGORIA di Black Snake Moan conta ben 14 caratteri.

Le copertine dei dischi di Blindur, Zen Circus e Black Snake Moan
Le Tre copertine analizzate. In ordine: A (di Blindur); Vita e opinioni di Nello Scarpellini, gentiluomo (degli Zen Circus); PHANTASMAGORIA (di Black Snake Moan).

 

Titoli grandi e titoli medi nel backend del sito.

Presto mi rendo conto che scegliere una dimensione univoca del font è molto difficile.

Seleziono quindi due tipologie di titolo (lungo e breve) e a queste abbino due dimensioni di font differenti.

Ora però si tratta di risolvere tecnicamente la questione, ovvero come implementarla nello sviluppo del sito.

Avremmo potuto creare un’automazione: se il titolo è più lungo di tot, allora il font è piccolo. Altrimenti il font è grande. Però in questa casistica non rientrerebbero i titoli corti composti da parole lunghe: PHANTASMAGORIA sarebbe rimasto scritto in grande e avrebbe rotto il design.

Abbiamo quindi deciso di creare un semplice selettore. Quando accedo al backend (il backend è l’interfaccia con la quale si gestiscono i contenuti di un sito) e inserisco un nuovo disco, dovrò selezionare se voglio utilizzare il titolo grande, o più piccolo.

Il selettore all'interno del backend del sito
Nel backend del sito posso selezionare la dimensione del font da utilizzare per il titolo del disco.

 

E questo è il risultato:

Titoli grandi e titoli lunghi
Carrellata di dischi: la grandezza dei titoli varia a seconda della scelta fatta nel backend.

 

Sfondi personalizzati

Risolta la questione copertina + titolo album, decido di aggiungere un ulteriore elemento che caratterizzi l’apertura di ogni singola pagina disco: il colore di sfondo.

Di nuovo rientra in gioco il backend del sito. Oltre al selettore della dimensione dei titoli, implementiamo anche un campo colore di sfondo dove è possibile inserire un codice colore personalizzato.

Nel backend possiamo selezionare il colore da usare come sfondo della pagina del disco
Nel backend possiamo selezionare un colore da usare come sfondo della pagina del disco.

 

Ma possiamo spingerci ancora un po’ più in là. Implementiamo infatti anche la possibilità di selezionare un ulteriore colore. Al posto di una tinta unita, ora siamo in grado di ottenere un gradiente.

Possiamo anche selezionare un secondo colore e ottenere così un gradiente
Selezionando un ulteriore colore otteniamo un gradiente.

 

Possiamo in questa maniera lavorare con un tono su tono, o riprendere le due tinte maggiormente presenti nella copertina, o viceversa lavorare per contrasto. Le possibilità sono illimitate:

Carrellata di dischi: gli sfondi vengono personalizzati scegliendo uno o due colori nel backend.

 

Allo stesso tempo, anche lo sfondo completamente bianco continua a funzionare. E ciò è fondamentale: si presentano infatti così i dischi “vecchi” che non sono ancora stati customizzati con il nuovo sistema.

Il disco Terra di Le luci della centrale elettrica risale al 2017 e non è stato ancora customizzato con il colore di sfondo. Ma questo non è un problema.

 

Mouse over nell’archivio dischi

In più, piccola chicca, tutti questi colori utilizzati negli sfondi diventano un’opportunità per caratterizzare il mouse over (ovvero il passaggio col mouse sopra a un elemento) di ogni singolo disco all’interno dell’archivio. In questo modo ogni elemento del catalogo si “attiva” in un modo unico e originale.

Nel catalogo, al passaggio del mouse, ogni elemento si colora automaticamente con le tinte scelte nella customizzazione della pagina disco.

 

Da grandi poteri derivano grandi responsabilità

Certo, tutte queste opzioni rischiano di creare più danni che altro nelle mani di un editor che non ha familiarità con concetti come RGB e codici esadecimali. O che banalmente non ha mai utilizzato il contagocce per campionare un colore.

Ma in questo caso abbiamo a che fare con un cliente skillato, che da sempre cura in autonomia l’immagine coordinata della casa discografica.

Ecco quindi che questo grado di personalizzazione viene immediatamente recepito dal cliente con entusiasmo. E il processo un po’ tedioso che caratterizza ogni data entry, si trasforma in un’esperienza interattiva che i ragazzi della Tempesta commentano così:

“Comunque figata, mi sto divertendo, è una bomba, mi sa che sarà un tunnel!”

Conclusioni

Se dovessimo trovare una sorta di morale conclusiva, questa potrebbe riassumersi in due punti:

  1. Il contenuto è fondamentale per determinare il design. Per contenuto intendiamo: che immagini dobbiamo utilizzare? Qual è la loro dimensione e la loro ratio? Come è strutturato il testo? Ci sono dei titoli da evidenziare? Quanto lunghi sono? Quanto grandi possono essere?
  2. Conoscere le competenze dell’editor che curerà il sito può essere uno stimolo per integrare nel design degli elementi di personalizzazione. Ne guadagnerà il sito, ne guadagnerà in divertimento l’editor in fase di compilazione.

A caccia di record:
il redesign del portale per l’iscrizione a Musicultura

Mezzanotte. Si chiudono le iscrizioni alla nuova edizione di Musicultura.
Il counter si ferma a 1050.
1050 artisti iscritti.
Viene così frantumato un record storico: fino ad oggi il numero massimo di iscritti si fermava a 810, mai si era superato il muro dei 1000.

Ma come è stato possibile?

Sicuramente la pandemia ha contribuito: ha sostanzialmente eliminato ogni concerto live in presenza. Musicultura nel 2020 è stato uno dei pochissimi a svolgersi con la partecipazioni del pubblico.
È probabile quindi che lo storico concorso sia visto dai musicisti come una delle poche “valvole di sfogo” per il 2021.

Sicuramente la campagna di advertising sui social che abbiamo ideato ha contribuito. Pesantemente.

Ma nel profondo del mio cuore di designer, mi piace pensare che il rifacimento del portale per le iscrizioni abbia avuto un ruolo cruciale.

Ma andiamo con ordine.

Perché Musicultura è Musicultura.

Musicultura è un concorso annuale per cantautori italiani. Il clou dell’evento si concretizza in due serate di concerti nel suggestivo Sferisterio di Macerata.
Siamo arrivati alla 31esima edizione, da tempo immemore Rai Radio1 è media partner e da alcuni anni il festival viene trasmesso sui canali Rai nazionali.

Possiamo quindi tranquillamente dire che per la musica italiana Musicultura è secondo solo a Sanremo.

Lo Sferisterio di Macerata ospita il palco di Musicultura (foto del 2019)
Lo Sferisterio di Macerata ospita il palco di Musicultura (foto del 2019)

Un paio di anni fa, noi di Noiza ci siamo occupati del redesign del sito principale. Lo potete vedere live qui, oppure potete approfondire ogni suo aspetto immergendovi nella lettura della relativa case study.

Tuttavia il portale dedicato alle iscrizioni al concorso – una sorta di web app separata e autonoma rispetto al sito principale – era stato escluso da questo rifacimento.

Il nuovo portale per le iscrizioni a Musicultura.

Fine 2020: cominciamo a mettere mano al portale per ricostruirlo da zero. Ora, senza analizzare nel dettaglio il vecchio design, ecco una serie di piccole cose interessanti che abbiamo implementato nel nuovo progetto. Via.

#1. Studiare i flussi.

Il portale è strutturato su una ventina di pagine. Non sono molte, ma sono tutte concatenate tra loro. Mi iscrivo al portale, poi posso iscrivermi al concorso. Posso però anche accedere al portale e iscrivermi al concorso in un secondo momento. Oppure posso controllare lo stato della mia iscrizione. O ancora tornare alla compilazione della mia iscrizione per modificarla. Per non parlare degli artisti affezionati che si sono fatti parecchie edizioni e ogni tanto si loggano per ammirare il proprio storico.

Ok, sono cose molto semplici, ma a metterle tutte insieme si rischia di fare un po’ di confusione. Ecco perché per prima cosa abbiamo studiato per bene tutti i flussi che gli utenti percorreranno. Tutto deve essere raggiungibile. Al momento opportuno.

flussi
Questa schermata del mio spazio di lavoro su Adobe Xd riassume tutte le connessioni tra le varie pagine del portale. Nella parte alta troviamo il processo di iscrizione. Nella parte bassa le pagine dedicate all’account personale. In questa sezione abbiamo anche la possibilità di modificare alcune sezioni dell’iscrizione e visualizzare il nostro storico.

#2. Un passo alla volta.

Sono un super fan dei giochi da tavolo. Adoro quelli complessi. Odio quelli complicati.
Una cosa complessa è composta da tanti elementi molto semplici, che si combinano tra loro generando qualcosa di nuovo e spesso di inaspettato. Complicato invece è sinonimo di macchinoso, privo di logica.

L’iscrizione a Musicultura rimarrà sempre una cosa leggermente complessa. Perché ci sono un sacco di campi da compilare, brani da caricare, inserire i testi e le fatture in pdf. Quello che però non vogliamo è che diventi complicata. È per questo che abbiamo spezzettato tutte le richieste del portale in diverse schermate. In questo modo ci ritroviamo sempre ad affrontare e compilare una piccola e breve parte.

In gergo, abbiamo utilizzato degli “stepper”, che oltre a ridurre lo sforzo cognitivo degli utenti, permettono di tenere facilmente traccia del progresso — sono allo step 3 su un totale di 5. Dai che manca poco!

Grazie allo stepper possiamo suddividere in diversi moduli il processo d'iscrizione.
Grazie allo stepper riusciamo a suddividere in diversi moduli il processo d’iscrizione. In questa schermata possiamo ad esempio caricare il file della ricevuta di pagamento e procedere. Abbiamo però anche la possibilità di fare click su “Torna indietro” e di finire così sullo step precedente “Profilo artista”. Qui possiamo sempre rimettere mano ai dati inseriti.

#3. Wording.

Un po’ me ne vergogno, ma ogni volta che devo accedere a un qualsiasi sito ho sempre un momento di buffering sul “sign in, sign up”. Che per mio conto stanno al web come “tirare e spingere” stanno ai cartelli delle porte: mi incasinano.

Comunque dopo un microsecondo di sforzo mentale clicco su sign in e accedo al mio account.

Ma come comportarsi con l’iscrizione a un sito in cui ci si iscrive a un concorso?

Quando atterro per la prima volta sulla homepage e leggo iscriviti, mi sto iscrivendo al portale o mi sto iscrivendo al concorso?

È un dubbio che ci siamo posti e che abbiamo cercato di risolvere ponendo la giusta attenzione alla nomenclatura.

Così l’iscriviti (al portale, il sign up per intenderci) è diventato Crea il tuo account. Accedi è rimasto accedi. E l’iscriviti (a Musicultura) è diventato “iscriviti al concorso”.

Le Voci di menu e i tasti sono un po’ più lunghi del solito, ma sicuramente creano meno confusione all’utente.

Crea un account
Questa è la schermata iniziale. Il focus della call to action “Crea il tuo account” è posto sulla registrazione al portale. In basso, troviamo un link secondario che invita gli utenti già registrati ad accedere all’area personale.
Iscriviti al concorso
Questa invece è la schermata che vediamo una volta che ci siamo registrati al portale. Il focus della call to action in questo caso è completamente incentrato sull’iscrizione al concorso.

#4. Recap iniziale.

Vi dovete iscrivere a un sito. I campi da compilare sono infiniti. Avete quasi terminato, quando a un certo punto vi viene richiesta la scansione della vostra carta d’identità, fronte retro in un’unica immagine, solo jpeg, minore di 400kB. E non ce l’avete. Certo che non ce l’avete. Svelti svelti prendete il telefono. Fate le foto fronteretro. Ve le auto-mandate sulla mail così le scaricate sul computer. I più fortunati aprono photoshop, gli altri Paint. Salvate. Tornate sul form e la sessione è scaduta e dovete ricominciare da capo.

Ecco, questa cosa la volevamo veramente evitare sul portale di Musicultura. Per questo motivo abbiamo previsto una schermata iniziale. Questa riassume le cose che dobbiamo assicurarci di avere prima di iniziare il processo di iscrizione.

Recap iniziale
Il recap iniziale ci indica tutte le cose da avere a portata di mano prima di iniziare il processo di iscrizione. Ci informa, inoltre, che l’iscrizione prenderà circa 5 minuti.

#5. Recap finale.

Tipico degli Ecommerce, il recap finale mostra in un’unica schermata molto concisa, i dati principali che avete inserito/selezionato durante il processo di acquisto, o in questo caso d’iscrizione. Il recap finale è una piccola zona di comfort che ci rassicura prima di pigiare sull’ultimo tasto: conferma l’iscrizione.

Recap finale
In questa schermata finale troviamo tutti i dati principali riassunti: anagrafica, ricevuta del pagamento, scheda artista e i brani caricati. Un avviso ci avverte che i dati relativi ai brani non saranno più modificabili: è un utile alert prima di fare un ultimo click sul tasto “Conferma l’iscrizione”.

Conclusioni.

Musicultura 2021 è ora in una fase cruciale del concorso: dei 1050 iscritti di cui abbiamo parlato a inizio articolo, ora sono rimasti solo 16 finalisti. Allo Sferisterio di Macerata arriveranno solo in 8: 6 li sceglierà il Comitato di Garanzia, 2 li potete scegliere voi, esprimendo il vostro voto a partire da venerdì 14 maggio attraverso una Facebook App realizzata da Noiza.
Potete seguirne gli sviluppi sul sito o sulla pagina facebook.

Se invece siete dei cantautori e volete mettervi in gioco, a fine estate riapriranno le iscrizioni per l’edizione del 2022. Qui trovate il portale.
In bocca al lupo.

Zero waste cities:
lo user journey come strumento per il redesign

Adoro le parole intraducibili.

O meglio, adoro quelle parole straniere che esprimono un concetto noto, ma che in italiano non possiamo fare a meno di utilizzare un’intera frase per esprimere.

In giapponese, uno shokunin è un artigiano il cui agire ha anche un profondo valore etico e sociale. Ed è quello che aspirerei ad essere come web designer.

Ed è quello che, nel mio piccolo, ho cercato di fare quando mi sono ritrovato davanti questo progetto: il redesign del sito Zero Waste Cities.

Zero Waste Cities.

La nostra è una società basata sul lavoro i rifiuti.

Ahimè, è così.

E purtroppo le soluzioni di cui sentiamo più spesso parlare sono due:

Bruciare. Sotterrare.

Eppure la cosa migliore sarebbe quella di implementare un sistema che non generi rifiuti in primis.

Zero Waste Cities è un programma europeo che aiuta città e comunità ad effettuare questa transizione verso lo zero waste in un percorso che porterà progressivamente all’eliminazione dei rifiuti dalla nostra società.

Criticità dello stato di fatto.

Il sito che ci troviamo davanti ha sostanzialmente un unico grosso problema. Tutte le informazioni chiave sono concentrate in un documento chiamato Masterplan: un pdf di oltre 80 pagine e di 16MB da scaricare e sfogliare con dedizione, ma rigorosamente offline.

Così la home page si apre con una sezione a tutta pagina che invita a scaricare questo documento. La seconda voce del menu rimanda sempre al pdf. Stessa questione per la voce “resources”, dove un’altra volta possiamo scaricare svariate cose, ma soprattutto questo Zibaldone che raccoglie tutto lo scibile sullo zero waste.

Menu e homepage del vecchio sito: l’attenzione è tutta rivolta al Masterplan, un documento pdf da scaricare.

Questa scelta di riversare tutte le informazioni su un pdf, inevitabilmente indebolisce il sito e lo spoglia di qualsiasi aspetto narrativo. Ed è un vero peccato, perché i potenziali valori educativi e sociali che ci aspetteremmo di trovare su una risorsa online del genere purtroppo non hanno modo di esprimersi.

Potenzialità dello stato di fatto.

Questo voluminoso documento chiamato Masterplan però presenta una struttura molto chiara e i suoi contenuti sono organizzati in modo lineare e consequenziale in tre grandi sezioni: Discover, Learn e Take action.

  • Con Discover scopriamo cosa sono le Zero Waste Cities.
  • Learn ci mostra cosa possiamo imparare dalle altre città che hanno già adottato una politica zero waste.
  • In Take action invece troviamo tutte le risorse necessarie per poterci attivare nella nostra città.

Queste tre sezioni definiscono un percorso conoscitivo che va dal «non ne so niente» al «ora ne so talmente tanto, che non vedo l’ora di rimboccarmi le maniche».

Ma non solo, ogni step del percorso si rivolge a un utente differente, che passo dopo passo, diventa sempre più cosciente delle problematiche ambientali e degli innumerevoli benefici che possono derivare dall’adottare una politica zero waste per una città.

Ecco quindi che siamo riusciti a scovare i valori educativi e sociali. Valori che mentre visitavamo il sito non riuscivamo a percepire. Ma non solo, abbiamo anche definito un percorso narrativo che si evolve con l’evolversi del nostro utente. E su questo vogliamo costruire il refactoring del nuovo sito.

Learn, Discover, Take action: la nuova struttura del sito.

Per prima cosa vogliamo spacchettare tutte le informazioni contenute nel Masterplan e renderle navigabili online. Per farlo dobbiamo riorganizzare l’intera struttura del sito.

Per orientarci durante questo processo definiamo quelli che saranno i nostri principali utenti e i loro relativi user journey.

Definiamo gli user journey

Abbiamo degli utenti “base” che si stanno appena affacciando al mondo dello zero waste. Questi utenti immaginiamo possano essere interessati a scoprire “definizioni” e risorse utili (magari nella loro lingua) e, perché no, anche contatti di esperti che operano nei loro stati.

Segue l’utente medio a cui decidiamo di mostrare le case studies, ovvero gli esempi di città virtuose che sono riuscite a ridurre drasticamente la produzione di rifiuti. Qui presentiamo l’ormai famigerato Masterplan: l’utente ora sa già di cosa stiamo parlando e una risorsa completa come questa può rivelarsi utile.

E infine l’utente esperto, che vuole approfondire gli argomenti anche usufruendo degli ulteriori servizi presenti sul sito. Presentiamo quindi in questa sezione i webinar, le conferenze e gli study tour: delle vere e proprie visite guidate alla scoperta di città zero (o quasi) waste.

A questo punto vogliamo far corrispondere ad ogni user journey una pagina del sito. Per la nomenclatura delle pagine vogliamo riprendere gli stessi termini utilizzati nel Masterplan. Quindi avremo:

  • Pagina Discover – utente base.
  • Pagina Learn – utente medio.
  • Pagina Take Action – utente esperto.

La nuova navigazione

Riepilogando quindi passiamo da una navigazione di questo tipo:

a questa:

La hero image come indice

Vogliamo che questa struttura sia chiara e si palesi all’utente. Decidiamo quindi di strutturare la hero image dell’home page come fosse un grande indice.

La nuova hero image del sito si struttura come un indice dei contenuti.

Le pagine interne seguono lo stesso concept e ospitano sulla hero image la tavola dei contenuti presenti sulla pagina stessa.

Stessa cosa per le pagine interne: la hero image della sezione Discover.

Incoraggiare il passo successivo.

Quando l’utente base “completa” la pagina Discover, vogliamo che sia invogliato a proseguire il suo percorso formativo verso lo zero waste. Lo stesso per l’utente “medio” che vuole passare al Take action.

Incoraggiamo questo passaggio realizzando un piccolo banner conclusivo in ogni pagina che invita l’utente ad affrontare lo step successivo.

Completata la sezione “Discover” sono pronto per il passo successivo: “Learn”.

Conclusioni: un invito allo zero waste.

Su Zero Waste Cities potete scoprire che la Sardegna in pochi anni è passata da essere la regione d’Italia che riciclava meno, all’isola del mediterraneo più virtuosa. O che il distretto di Priula e Treviso (che conta una cinquantina di comuni) genera un quinto dei rifiuti della media Europea. Ma non solo…

Sono storie positive, di fiducia nel futuro. Sono storie che ci ricordano che un cambiamento è possibile e che in piccola parte stia già avvenendo.

Anche nel nostro paese.

Dietro le quinte: un sito del 2013 trasformato e preparato per il web del 2020

Com’era il web nel 2013?

Nel 2013 siamo agli albori della responsività. Qualche utente comincia ad avere lo smartphone e a navigare il sito da mobile, ma parliamo di numeri marginali. Per capirci: quasi nessuno ancora conosce la parola “selfie” (dovremo aspettare appena i premi Oscar del 2014 con il twittatissimo selfie di Ellen).

Nessuno effettua acquisti su Amazon da telefono, e il mio Nokia a conchiglia (il 2760) non sembra ancora perdere un colpo.

Il flat-design, lanciato (una volta tanto!) da Windows con il suo Windows 8, va per la maggiore.

Quarantenni e cinquantenni sono quasi del tutto assenti da Facebook.

Gli utenti non sono ancora così abituati a scrollare.

Il 4g è un lontano miraggio.

Le pagine non sono lunghe, pesano poco, e sono tante. Tutte organizzate in numerosi contenitori che strutturano la navigazione del sito.

E il 2013 è infine l’anno in cui il sito da cui partiamo per questo refactoring viene messo online.

Officina Pittini per la Formazione: il nostro caso studio

Officina Pittini per la Formazione è la corporate school del Gruppo Pittini.

Nata nel 2003 esclusivamente come scuola aziendale, nel 2004 si apre al territorio: diventa ente accreditato dalla Direzione Formazione della Regione Autonoma Friuli Venezia Giulia e promuove percorsi formativi per privati e aziende.

In seguito a un importato progetto di rebranding, il Gruppo Pittini nel 2018 decide di rinnovare la propria presenza sul web. Noi di Noiza siamo stati incaricati di ridisegneare l’intero ecosistema di siti del gruppo. Così dopo la messa online del sito corporate, del blog (e di tanti altri ancora), nel 2019 ci siamo occupati di Officina Pittini per la Formazione.

In questo articolo illustriamo l’approccio adottato per lo sviluppo del sito, ripercorrendo il processo di redesign dell’elemento centrale del progetto: la pagina di un corso di formazione che potete vedere nella sua interezza qui.

Secondo le analytics del sito, nel 2015 solo il 9% degli utenti visita il sito da mobile. Nel 2019 quest'ultimi crescono del 30%
Tra il 2015 e il 2019 le visite al sito “Officina Pittini per la Formazione” effettuate da telefono registrano un incremento del 30%.

Concluse queste doverose premesse, possiamo cominciare con il nostro redesign: via!

Sidebar

Per prima cosa vogliamo togliere un po’ di distrazioni, ovvero tutti quegli elementi “di contorno” rispetto al contenuto principale, e che potrebbero farci abbandonare la pagina. Cerchiamo di trattare la pagina del corso come fosse una landing page: autoconclusiva, in un certo senso indipendente dal resto del sito, focalizzata sull’iscrizione.

Possiamo quindi rimuovere tranquillamente la sidebar — da mobile in ogni caso non avrebbe senso mantenerla — che rimanda a tutte le altre categorie del catalogo corsi.

Per cominciare rimuoviamo la sidebar: riduciamo così le distrazioni e ci liberiamo di un elemento molto scomodo per lo sviluppo mobile del sito.

Titolo e immagine di apertura: benvenuti sul nostro corso!

Ora vogliamo mantenere l’enfasi del titolo liberandoci al tempo stesso delle lettere maiuscole e di quel box arancione che lo ingabbia: spostiamo il titolo sopra l’immagine.

Diamo più importanza alla foto: facciamole prendere l’intera larghezza del browser.

Spostiamo il titolo in pole-position. Facciamo occupare l’intera larghezza del browser alla foto.

Aggiungiamo un breve paragrafo introduttivo che sintetizzi in tre righe il contenuto del corso. Vogliamo aiutare l’utente a capire in pochi secondi se è proprio questo il corso che fa per lui.

La pagina conterrà numerose informazioni. Stimiamo che tra il titolo e il form di iscrizione al corso ci saranno circa 3000 pixel di distanza. Decidiamo quindi di inserire una call to action in apertura: questo tasto permette a tutti i visitatori, che per esempio hanno già visitato la pagina, di saltare direttamente al form di iscrizione.

L’apertura della pagina, così ridisegnata, è composta da: un titolo; un breve testo introduttivo che contestualizza il corso; una call to action che permette di saltare direttamente al form di preiscrizione; e una hero image.

Informazioni chiave: per l’utente che va di fretta

Ora vogliamo selezionare le informazioni chiave, solo le più importanti, ed evidenziarle. Vogliamo che il visitatore possa farsi un’idea del corso in un batter d’occhio. Durata, costo e scadenza per l’iscrizione ci sembrano tre ottime candidate.

Sovrapponiamo parte di questo box con l’immagine per farlo saltare fuori. Un po’ di ombra può aiutare.

Sovrapponiamo il box “informazioni chiave” con la hero image per farne risaltare il contenuto.

The long text e come strutturarlo

Ora è arrivato il momento di inserire un bel po’ di testo. Il nostro obiettivo? Facilitare la lettura al visitatore. Quello che dobbiamo evitare è di creare un blocco di testo uniforme e lunghissimo privo di qualsiasi àncora per gli occhi.

L’assenza della sidebar ci permette anche di ingrandire leggermente il testo e di allungare di qualche decina di pixel la lunghezza della linea cercando di non superare i 70–75 caratteri per riga. Per migliorare ulteriormente la leggibilità aumentiamo di qualche pixel anche l’interlinea.

Inseriamo i primi tre paragrafi accompagnati dai titoli: Prerequisiti, Destinatari, Costo e numero dei partecipanti.

Inseriamo i primi tre paragrafi di testo.

Prima di continuare un attimo di pausa. Dobbiamo inserire i “contenuti” del corso. Un elenco puntato con 11 voci ricche di sigle e informazioni specifiche: un contenuto molto denso e di difficile lettura.

Cerchiamo di accorpare alcune voci creando quattro sezioni accompagnate da frasi più discorsive e meno tecniche.

Ora sicuramente il testo è più fruibile, ma allo stesso tempo abbiamo rinunciato ad alcune informazioni. Per rendere nuovamente completa la sezione, aggiungiamo un tasto che permetta di scaricare il programma. Il tasto ha una funzione secondaria rispetto al nostro obiettivo primario, che rimane la preiscrizione al corso. Con questo in mente, andiamo a togliere un po’ di enfasi al tasto: rimuoviamo il riempimento e lasciamo solo il contorno.

Per ultima cosa, differenziamo questa sezione della pagina lavorando con il colore del background e dei testi.

Trasformiamo l’elenco puntato: accorpiamo le sue voci in quattro sezioni accompagnate da frasi più discorsive e meno tecniche.

Non solo testo, ma anche FAQ

Abbiamo inserito il testo, tanto testo. Eppure manca ancora qualcosa: il menù principale del sito di partenza, riporta la voce FAQ. Apriamo la pagina e troviamo un sacco di informazioni utili all’utente che vuole iscriversi al corso: decidiamo di inserire anche queste informazioni all’interno della pagina corso.

La pagina Faq del vecchio sito contiene preziose informazioni per l’utente. E non vogliamo assolutamente perderle.

In questo modo però stiamo creando della ridondanza: all’interno di ogni singola pagina corso avremo le stesse “domande frequenti”.
Ma i pro sono maggiori dei contro: le pagine dei corsi possono essere pensate come delle landing page.
Ogni corso potrebbe essere condiviso sui social e vivere di vita propria senza dipendere dal resto del sito. Ciò che a prima vista poteva sembrare una ridondanza è quindi un modo per fornire all’utente le informazioni complete del corso in un unico posto. In unica pagina. E minimizzare la navigazione interna è buon modo per abbattere lo sforzo cognitivo dell’utente.

È corretto farsi dubbi di questo tipo. Ricordiamo la centralità del comportamento dell’utente e del suo percorso, il cosiddetto user journey. Se volete approfondire la cosa vi consiglio questo nostro altro articolo.

Un’altra buona notizia: ora che le FAQ sono inserite all’interno del corso, possiamo rimuovere la voce FAQ dal menu.

Inseriamo le Faq all’interno della pagina del corso. La pagina comprende così tutte le informazioni utili per il visitatore.

Tagliamo il traguardo: il form di prescrizione

Siamo finalmente giunti alla sezione dedicata all’iscrizione al corso.

Il form della vecchia pagina Corso nascosto all’interno di un accordion.

Prima cosa: davvero non ci serve nascondere un form all’interno di un accordion. Anni fa, come abbiamo già detto all’inizio, c’era questa paura di avere delle pagine troppo lunghe. Ora invece scrolliamo. In media 100 metri al giorno. Ovvero l’altezza della Statua della Libertà. Adoriamo scrollare.

Il vecchio form è molto lungo, ma gran parte dello spazio è occupato da informative per la privacy e simili. La call to action principale “invia” non è molto evidente.

Tendenzialmente preferisco avere i campi input del form uno sotto l’altro. Sono più facili da scansionare per l’occhio dell’utente. Tuttavia alcuni campi come nome e cognome sono correlati tra loro e possono stare sulla stessa riga. Lo stesso per email e telefono. Il form così è più compatto e l’utente può visualizzarlo nella sua interezza.

Quello che invece trovo molto utile è definire la lunghezza dei campi-input in base alla lunghezza del testo che dovranno ospitare al loro interno. Un campo cognome sarà molto più lungo di un campo numero civico, ma più corto di un campo email.

È sicuramente un dettaglio, ma aiuta l’utente a compilare il form in modo più naturale.

Ridisegnamo i campi-input in base al contenuto che devono ospitare

Rimuoviamo tutti gli articoli sulla privacy. Ci basta inserire una breve riga di testo con un link alla pagina completa della privacy. In questo modo riusciamo ad avvicinare il tasto di iscrizione al form.

Rendiamo più evidente la call to action. Cambiamo il colore e la dimensione del font.

La call to action descrive appunto un’azione: sostituiamo il generico “invia” con un verbo più specifico e inerente: “preiscriviti”.

Rendiamo più visibile la call to action e sostituiamo il generico “invia” con “preiscriviti”

Conclusioni

Se volete visitare il sito di Officina pittini per la formazione fate click qui.
Qui invece trovate una delle pagine corso realizzate.
Qui invece il sito principale del gruppo Pittini.

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

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.

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