Ho fatto una cosa nuova, si chiama Guido

1 febbraio 2016
Argomenti:

Come penso quando progetto un sito internet

Mi piace quando riesco a capire in che modo i web designer che seguo applicano il loro metodo di lavoro, in pratica. Mi piace vedere come fa la teoria a diventare prassi quotidiana: quali sono gli snodi mentali, i punti a cui appoggiarsi per creare una routine che funziona.

Per questo ho pensato di documentare e condividere il modo in cui penso quando lavoro alla progettazione di un sito: per individuare i problemi, definire gli obiettivi e trovare soluzioni che ci aiutino a risolvere i problemi e raggiungere gli obiettivi che ci siamo dati.

Per farlo ho usato come caso di studio il nuovo blog di Ehiweb a cui ho lavorato la scorsa primavera insieme a Daniela e Luigi.

Individuare i problemi

Quando abbiamo iniziato a lavorare al nuovo blog di Ehiweb avevamo poche informazioni a nostra disposizione. Il blog era ospitato su WordPress.com – quindi niente Google Analytics, ma le statistiche di WordPress.com ci davano comunque un dato prezioso: quello delle fonti di traffico, e da qui siamo partiti per ricostruire il modo in cui – e soprattutto le ragioni per cui – le persone stavano usando il sito.

Sapevamo dalle statistiche che Google era di gran lunga la fonte di traffico principale: portava circa sei volte più visitatori di Facebook. Sapevamo anche – sempre dalle statistiche di WordPress.com – che gli articoli più letti erano articoli utili. Articoli che spiegavano qualcosa in modo chiaro, pratico e dettagliato: ad esempio questo che spiega come disattivare le notifiche di giochi e applicazioni su Facebook, oppure questo che spiega la differenza tra IPv4 e IPv6 – eh? Appunto.

Le persone cercano su Google qualcosa che non sanno o che non sanno come fare, trovano il blog di Ehiweb tra i risultati della ricerca, leggono rapidamente l’articolo alla ricerca della risposta di cui hanno bisogno, appena la trovano se ne vanno senza fare altro. Soprattutto: se ne vanno senza essere consapevoli di dove hanno trovato l’informazione che stavano cercando.

Facciamo tutti così: ci serve un’informazione, andiamo su Google, apriamo un po’ di link, la troviamo, passiamo ad altro. La nostra attenzione e il nostro tempo sono scarsi, e se ci chiedessero il nome del sito su cui abbiamo trovato l’informazione non sapremmo dirlo. Dal nostro punto di vista il sito su cui l’abbiamo trovata è una pura commodity: meno si fa notare e meglio è. Potendo, l’avremmo chiesto a Siri.

Ci siamo subito resi conto che questa mancanza di consapevolezza era il problema che la riprogettazione del blog avrebbe dovuto risolvere.

Definire gli obiettivi

All’interno della strategia di comunicazione di Ehiweb il blog ha un ruolo chiaro: serve a far circolare il marchio ed è uno dei primi punti di contatto per raggiungere nuovi potenziali clienti. Questi clienti sono soprattutto business medio-piccoli, e il blog pubblica soprattutto contenuti utili per loro: che li aiutano a orientarsi nell’offerta tecnologica e a iniziare a usare meglio la tecnologia come strumento per comunicare e crescere. Per questo motivo se chi legge il blog non è consapevole del sito si cui si trova, allora il blog non è utile al suo scopo e fallisce il suo obiettivo.

Per far aumentare la consapevolezza dei nostri visitatori avevamo poco tempo: dovevamo inserirci all’interno di una routine rapidissima, consolidata, abitudinaria e efficace – cerca, apri, scorri, trova, chiudi – che di solito dà i suoi risultati nel giro di pochi secondi – e sapevamo che il nostro compito era spezzare questo meccanismo: creare un’interruzione che facesse soffermare le persone.

Questo era l’obiettivo principale che la riprogettazione del blog aveva il compito di raggiungere – e cito dal debriefing della nostra prima riunione: dare al blog un’identità visiva in grado di far soffermare i lettori più distratti e meno consapevoli e risvegliare la loro attenzione – anche solo per un istante.

Trovare le soluzioni

In How to make sense of any messleggetelo! – Abby Covert dice che l’informazione «è quello che una particolare disposizione o sequenza di oggetti trasmette o rappresenta». Nel mio caso gli oggetti su cui potevo lavorare erano i contenuti e la struttura del blog: lavorando sulla loro disposizione, sulla loro sequenza e sulla loro identità visiva ho provato a trasmettere un’informazione abbastanza forte e univoca da creare un’interruzione, far soffermare le persone e rispettare comunque le caratteristiche di Ehiweb.

1. Tipografia

Poco prima di andare online il blog usava un solo font, in due pesi diversi: il Roboto Mono, un font monospaziato – quelli delle macchine da scrivere, delle righe di codice e dei terminali dei computer, per intenderci. Poi la scelta mi è sembrata un po’ troppo radicale e la leggibilità non del tutto soddisfacente, quindi per il corpo del testo ho deciso di ripiegare sul Roboto «normale». Ma la versione monospaziata è rimasta e ha comunque molto peso: si usa nei titoli, nelle etichette dei pulsanti, nella navigazione e in tutti i testi secondari.

Dare molto peso a un font monospaziato ha avuto senso per tre ragioni. Prima di tutto si sposa perfettamente col logo, e lo richiama. Richiama anche la natura tecnologica dell’azienda – che fa all things digital: adsl, voip, hosting, sms, hardware. Soprattutto, un font monospaziato è inconsueto: si è poco abituati a vederlo usare, e metterlo al centro del sistema tipografico del nuovo blog di Ehiweb è un modo per attirare l’attenzione e spezzare la routine visiva a cui le persone sono abituate: cose un po’ sciatte alla Aranzulla, oppure ultimamente Medium e i suoi vari emuli – minimalisti anche fuori contesto.

2. Immagini

Un altro strumento che abbiamo deciso di utilizzare per cercare di ottenere attenzione sono le immagini. Non immagini enormi a tutto schermo – per rompere un’abitudine visiva ultimamente molto diffusa e consolidata e per non appesantire il sito – ma comunque presenti e centrali. Le usiamo nei singoli post, e poi in tutte le pagine di archivio – la home page e gli archivi per categoria – dove costruiscono una griglia regolare e ritmata. Molto poi sta nella capacità di scegliere immagini efficaci: in fase di progettazione abbiamo deciso di privilegiare l’impatto visivo rispetto alla coerenza con il tema trattato, e Daniela negli ultimi mesi ha fatto secondo me un ottimo lavoro di selezione.

3. Pattern visivi

È vero, ultimamente tutti i siti sono uguali, e per quanto mi riguarda non è necessariamente un problema: anche tutti i secchi sono uguali, e funzionano benissimo. Detto questo, restando comunque all’interno di una struttura di massima che-le-persone-sono-abituate-a-vedere – navigazione in alto, poi l’articolo, gli articoli correlati, i commenti, il footer – ho cercato di forzare un po’ e di creare alcuni pattern visivi insoliti.

Ho lavorato con particolare attenzione sulla testata del singolo post: perché nel caso del blog di Ehiweb il singolo post è il punto di accesso principale – lo trovi tra i risultati di Google oppure condiviso su Facebook – e perché banalmente è la prima cosa che chi legge vede quando arriva sulla pagina.

Su schermi piccoli c’è meno spazio e meno margine d’azione: la foto in evidenza è di sfondo al titolo, con un’opacizzazione semitrasparente dello stesso blu del logo di Ehiweb. A movimentare un po’ le cose ci sono il font e l’immagine, oltre alla navigazione: che invece del classico menu a comparsa tiene sempre visibile la voce principale – Cos’è Ehiweb? – e permette di svelare le altre o scorrendo verso destra o aprendo il menu usando un pulsante. Un’altra cosa che non si è abituati a vedere, e che può portare le persone a distrarsi un istante – e quindi dal nostro punto di vista a concentrarsi di più.

Su schermi più grandi ho intenzionalmente cercato di costruire qualcosa di strano, e ho capito di essere sulla strada giusta quando ho fatto vedere un prototipo a Enrica e lei ha impiegato qualche secondo a capire che cosa stesse guardando: era esattamente la reazione che stavo cercando. Ho usato una struttura 1/3 + 2/3: a sinistra il modulo del titolo – monospaziato, bianco su arancione – con una call to action chiara: Condividi su Facebook; a destra l’immagine, che occupa la maggior parte dello spazio. Niente di davvero incomprensibile, ma comunque qualcosa che non siamo abituati a vedere.

4. Navigazione

Diciamo che siamo riusciti ad attirare la tua attenzione: ti sei accorto di essere in un posto diverso, con la sua identità, ma dove sei? Hai visto con la coda dell’occhio scritto Ehiweb. Ma cos’è Ehiweb?

Progettando il blog io e Daniela abbiamo deciso di mettere questa domanda al centro del sistema di navigazione: è l’unica voce di menu sempre visibile – anche su schermi piccoli – ed è la prima, quasi al centro dello schermo, su schermi più grandi. È una domanda spontanea e naturale che viene a chi si incuriosisce. È la domanda che si fanno le persone che vogliono saperne di più: è nella loro lingua, e funziona molto meglio di altre etichette: chi siamo, su di noi, about eccetera.

Soprattutto, a qualche mese di distanza i dati ci dicono che è una domanda che sta funzionando: è la seconda pagina più vista dopo la home, e il settimo contenuto del sito più visto in assoluto.

Ti va di iscriverti alla mia newsletter?

Più o meno una volta al mese scrivo una lettera ai miei amici, dove parlo di fatti miei, delle cose che faccio e delle cose che penso. Se vuoi scrivo anche a te, e diventiamo amici: basta che scrivi il tuo indirizzo email qui sotto, e clicchi sul pulsante.

Se ti iscrivi accetti le cose sulla privacy.