Oggi voglio inaugurare una nuova rubrica che si chiama Ti smonto il sito di…Nel corso di questo articolo, io e te esploreremo il dinamico mondo della progettazione web e della UX.
Tutto inizia con una mia deformazione professionale che consiglio a chiunque debba giudicare un sito. Prima di guardarlo, lo leggo. Strizzo gli occhi e sfuoco le immagini, azzero ogni effetto e transizione. Un po’ come farebbe Google e un po’ come farebbe uno screen reader. È un approccio spietato, ma mi serve a capire se sotto il design c’è un’idea o è solo chiacchiere e distintivo.
Ho deciso di inaugurare questo format con futuronazionale.it, il sito del partito fondato da Roberto Vannacci.
Premessa doverosa, così fughiamo ogni dubbio. Qui non si parla di programmi politici, di Europa o di chi votare nel 2027. Qui parliamo di pixel, di colori, di navigazione e di parole. Del sito come prodotto di comunicazione, insomma, esattamente come lo guarderemmo se ce lo portasse un cliente e ci chiedesse: è da buttare nel cesso?
Il mondo è sempre più blu.
L’arte di somigliarsi quando bisognerebbe distinguersi
Partiamo subito con il primo input visivo del sito, il suo logo. Un cerchio blu sfumato, la scritta bianca in maiuscolo, il cognome del fondatore in giallo e, al centro, un’ala tricolore che mezza stampa italiana ha scambiato per una fiamma. Appena è uscita la notizia del deposito del marchio, Nazione Futura, il think tank conservatore di Francesco Giubilei, ha fatto notare che il proprio logo è… un cerchio blu con la scritta bianca e un tricolore stilizzato. Pochi giorni dopo lo ha impugnato. Gabriele Maestri, giurista che da anni studia i contrassegni elettorali, ha osservato che quel giallo su fondo blu ricorda da vicino quello con cui la Lega scrive il nome di Salvini. Aggiungiamoci pure il blu di Fratelli d’Italia con la sua fiamma tricolore, l’azzurro di Forza Italia, e il quadro è completo. Un gran bel casino.
Il centrodestra italiano ha un’uniforme cromatica, e Futuro Nazionale l’ha indossata senza nemmeno cambiarsi la cravatta
Quando ci apprestiamo ad un restyling o ancora meglio a creare un sito da zero, mi pare dovuta una riflessione sul logo. Se qualcosa non torna possiamo intervenire con piccole modifiche che magari rendano meno palesi certe similitudini. Ma qui siamo sicuri che il problema nasca da un caso fortuito?
I sociologi Paul DiMaggio e Walter Powell lo chiamavano isomorfismo mimetico. Quando un’organizzazione nasce in un contesto incerto, tende a imitare quelle che percepisce come legittime. È una strategia rassicurante, perché sembri subito della famiglia, ma ha un prezzo molto alto da pagare. Nel marketing, Jenny Romaniuk e Byron Sharp hanno passato anni a dimostrare che la distintività conta più della differenziazione. Niente più di distante da quello che succede tra gli scaffali del supermercato.
Poi c’è un paradosso, una dissonanza che trovo quasi poetica. Lo storico Michel Pastoureau, che al blu ha dedicato un intero libro, racconta come dal dopoguerra in poi sia diventato il colore preferito dalla maggioranza degli occidentali proprio perché non divide. È il colore del consenso, delle istituzioni, delle bandiere sovranazionali. Un colore che non fa rumore. Ora, il Manifesto di Futuro Nazionale si scaglia contro una politica fatta di tinte spente e volti smorti, di braccia basse e calici annacquati, contro i linguaggi misurati e le vie di mezzo. Quindi mi pare bislacco che per rappresentarsi scelga il colore più moderato della storia dell’Occidente. I contenuti del sito gridano rottura, ma la palette cromatica dice continuità.
Come interveniamo?
Sganciamoci dai competitor con un colore che rompe gli schemi. Per i pulsanti e gli elementi su cui la gente deve cliccare (le CTA), ci serve un colore forte, che salti subito all’occhio e che nessun altro nel nostro settore stia usando.
Scansionando la home come farebbe un bot
Torniamo al mio vizio. Analizzando la homepage di futuronazionale.it cosa rimarrebbe? Il menu. Una hero section striminzita votata alla mistificazione del suo leader affiancato ancora una volta dal logo del partito. Un modulo contatti. E in mezzo l’elemento più dinamico della pagina: un nastro di parole velocissime a scorrimento orizzontale. Vitale, Virtù, Identità, Tradizioni, Amore, Libertà, Eccellenza, Entusiasmo. Nessuna frase che spieghi chi sei, cosa proponi, perché l’utente dovrebbe restare.
Steve Krug, nel suo Don’t Make Me Think, la bibbia del web design, sostiene che una homepage deve rispondere a colpo d’occhio a tre domande:
-
What is this? (Che cos’è questo posto?)
-
What can I do here? (Cosa posso fare qui?)
-
Why should I be/stay here? (Perché dovrei rimanere qui e non andare altrove?)
Una celebre ricerca di psicologia del web design pubblicata nel 2006 su Behaviour & Information Technology condotta Gitte Lindgaard ha quantificato quel colpo d’occhio.
Abbiamo solo 50 millisecondi per fare buona impressione, prima che l’utente decida se restare o andarsene
Otto sostantivi astratti in movimento non rispondono a nessuna delle tre domande. Krug ha un nome per questo genere di testo, le chiama happy talk. Parole autoreferenziali che l’utente salta a piè pari. Il consiglio? Eliminarle.
Questo non significa che il testo a scorrimento sia una pratica da evitare sempre e comunque. A me piace moltissimo, cattura la visione periferica e aiuta a orientare l’attenzione dell’utente. Ma qui c’è un dettaglio che mi ha fatto sorridere. Le iniziali dovrebbero concorrere a formare la parola VITALE agganciandosi così allo storytelling del Manifesto del partito che dichiara di riconoscersi in sei parole chiave. Solo che la E ne contiene due, Eccellenza ed Entusiasmo, quindi sono sette, e nel nastro diventano otto perché ci finisce dentro anche Vitale. Un’inezia? Sì. La struttura del messaggio dovrebbe essere alla base della comunicazione di un brand. Ma se la logica non è chiara nemmeno per chi scrive, figuriamoci per chi legge.
Scrollando sino alla fine mi rendo conto che il menu principale e quello nel footer raccontano due siti diversi.
In alto Comitati è una voce principale, in basso finisce dentro la colonna Chi siamo non cliccabile; in alto Aderisci contiene la pagina Negozio Italiano, in basso no; l’Esecutivo nazionale e l’Assemblea nazionale, nel footer, semplicemente spariscono. L’informatico Jakob Nielsen inseriva la coerenza e il rispetto degli standard tra le dieci euristiche fondamentali dell’usabilità già nel 1994. Non un dettaglio da nerd. Ogni incoerenza costringe l’utente a ricostruire la mappa mentale del sito, e ogni sforzo in più è un motivo per lasciare la pagina.
Che facciamo come prima cosa?
Interveniamo nella testata lavorando su un nuovo banner che colpisca subito. Togliamo la foto stock del generale e il logo (ma quante volte è stato già inserito in tutto il sito?). Ragioniamo sul concept della foto, sulla CTA può essere congeniale agli obiettivi di conversione scegliendo tra Aderisci al Movimento e Leggi il Programma.
Un marchio senza libretto d’istruzioni
Istruzioni di Brand governance
Qui voglio essere onesto, perché c’è una scelta che mi piace. Nella sezione Media, alla voce Il logo, il sito mette a disposizione il simbolo in quattro formati: png, svg, pdf e perfino il file sorgente di Illustrator. È una scelta generosa per un movimento che vuole crescere dal basso. I comitati locali possono stampare, impaginare e produrre materiale senza dover chiedere il permesso. Il problema è che manca un manuale d’uso. Non ci sono indicazioni sull’area da rispettare, nessuna versione in negativo o monocromatica codificata, nessun riferimento cromatico. Come ripeteva Alina Wheeler in ogni capitolo del suo Designing Brand Identity, un’identità vive o muore in base alla coerenza con cui viene applicata. E la coerenza non si ottiene di certo affidandosi al buon senso di cento volontari armati di Canva, anche se fossero piccioni animati dalle migliori intenzioni.
Questa pagina dovrebbe innanzitutto spiegare il logo soprattutto per tutte le motivazioni che ti ho elencato all’inizio. Quando i giornali hanno parlato di fiamma tricolore, dall’entourage di Vannacci è arrivata la precisazione che non si trattasse di nessuna fiamma, ma di due ali che fanno volare alto e un’onda che travolge. E dove sta scritto? Non sul sito di certo. George Lakoff, il linguista che ha studiato come i frame orientano il discorso politico (Non pensare all’elefante!), sostiene che se non definisci tu il significato dei tuoi simboli, lo farà qualcun altro. E di solito non sarà a tuo favore!
Cosa funziona? (sì, qualcosa funziona)
Sarebbe troppo comodo chiuderla qui. L’obiettivo di conversione è chiarissimo e non è quello di mostrarti il logo sino allo sfinimento. Aderisci sta nel menu principale ed è esattamente ciò che un partito in fase di costruzione deve chiedere all’utente.
La pagina Manifesto è breve, divisa in blocchi leggibili. I contenuti istituzionali, dallo statuto all’organigramma fino alla sezione trasparenza, sono raggiungibili in pochissimi passaggi, cosa non affatto scontata.
Il punto, quindi, non è che il sito sia fatto male.
Il sito ha l’impostazione di una brochure, quasi fosse un’estensione dei social e dei comizi dal vivo
Un posto dove depositare documenti invece che uno spazio dove costruire un racconto. Bruno Munari scriveva che complicare è facile e semplificare è difficile. In questo caso non c’è stato nemmeno lo sforzo (seppur maldestro) di aggiungere elementi o stratificare il pensiero. C’è invece il vuoto, l’assenza di una scelta, l’incapacità o il rifiuto di prendere una posizione, di dare una direzione chiara o di selezionare cosa è importante e cosa no. È una critica che interessa il progetto web nella sua interezza e che rende il sito insignificante.
Il futuro che somiglia al passato
C’è un’ultima cosa che mi frulla in testa da quando ho finito la mia analisi. In Italia la parola “futuro”, in comunicazione, non è mai neutra. Nel 1909 Marinetti firmava il Manifesto del Futurismo proclamando di voler distruggere i musei, le biblioteche, le accademie d’ogni specie. Il sito di Futuro Nazionale compie un miracolo al contrario nel tentativo di tenere insieme l’estetica della rottura e la retorica della conservazione. Riesce a rendere la parola futuro incredibilmente nostalgica. Il contrasto tra la spigolosità del logo e la rassicurante melassa di parole d’ordine tradizionali non crea scintille, ma solo un grande cortocircuito.
IMMAGINE DI COPERTINA TRATTA DAL FILM Obsession.
Ti abbiamo incuriosito? Scopri cos’altro abbiamo scritto su questo argomento
