Infografica comparativa: come si progetta un confronto che spiega davvero

Uno sfondo azzurrissimo, quasi bianco. In alto un titolo in stampatello blu scuro, compresso e leggermente scavato come uno stampo consumato: T1D VS T2D. Sotto, la domanda in tondo più morbido: cosa cambia davvero. Poi la scheda si apre in due: TYPE 1 a sinistra, TYPE 2 a destra, e in mezzo — in nero, in corpo più piccolo — le domande che fanno da righe: cosa succede, produzione di insulina, perché succede, trattamento. A fare da contorno tre illustrazioni piatte: una siringa in alto a destra, un flacone di insulina in basso a sinistra, un braccialetto medico con la stella della vita su un avambraccio in basso al centro. In fondo a destra un monogramma, due lettere. Tutto centrato, tutto blu, tutto in grassetto.

È una scheda divulgativa fatta con un template, con un obiettivo dichiaratamente serio: spiegare in trenta secondi che diabete di tipo 1 e di tipo 2 non sono la stessa malattia. Il contenuto, per come è scritto, è corretto e onesto. Il problema è che il progetto grafico lavora contro il contenuto. E il modo in cui lo fa è interessante, perché è lo stesso errore che vedo ripetersi in quasi tutte le infografiche comparative che mi capita di revisionare: dalle locandine di ambulatorio alle slide aziendali.

La gerarchia è rovesciata: le domande pesano meno delle risposte

Provo la prova che faccio sempre: guardo la scheda per un secondo e mezzo, poi chiudo gli occhi e mi chiedo cosa ho letto. Qui mi resta un muro azzurro. Il motivo è misurabile: le domande — che sono la struttura logica del confronto — sono in nero, in corpo minore e in peso simile alle risposte; le risposte sono enormi, blu, tutte in grassetto. Il lettore riceve prima il dettaglio e poi la categoria. È come entrare in una biblioteca dove i libri sono giganti e i cartelli delle sezioni sono foglietti appesi in mezzo agli scaffali.

C’è anche un effetto collaterale tipico dei testi centrati: la frase più corta sembra la più importante. Insulin is required, due parole, corpo grande, pesa visivamente il doppio del blocco sul tipo 2 che invece dice tre cose. Non è una scelta di contenuto, è un incidente di impaginazione. E si somma al fatto che le righe delle due colonne non sono allineate tra loro: la prima risposta a sinistra parte più in alto di quella a destra, e la mente fatica a capire che stanno rispondendo alla stessa domanda. Il raggruppamento percettivo funziona per vicinanza e per allineamento: se due elementi non sono su una linea comune, non li leggiamo come coppia.

Aggiungo un dettaglio che sembra pignoleria ma non lo è: il titolo. La lettera D di quel carattere compresso, accanto a 1 e 2, si legge facilmente come uno zero. Io stesso, alla prima occhiata a distanza di schermo, ho visto T10 VS T20. In una grafica sanitaria un’ambiguità sull’etichetta è un danno, non un vezzo tipografico. E la parola diabete, curiosamente, non compare mai per intero: chi non conosce già le sigle non ha nessun punto d’appoggio.

La trappola del falso parallelismo: due colonne promettono una simmetria che non esiste

Qui arriva la parte che mi interessa di più. Lo schema A contro B incolonnato è uno dei dispositivi grafici più persuasivi mai inventati, perché non argomenta: presuppone. Due colonne affiancate della stessa larghezza comunicano, prima di ogni parola, tre cose non dette: che le due entità sono confrontabili sullo stesso piano, che hanno lo stesso peso e che sono opposte l’una all’altra. Se una delle tre non è vera, la grafica mente anche quando il testo è ineccepibile.

Nel caso del diabete la questione è tutt’altro che teorica. La classificazione dell’Organizzazione mondiale della sanità non descrive due caselle speculari, ma un insieme di tipi che comprende anche forme ibride e forme non classificate, oltre al diabete a esordio in età adulta con caratteristiche autoimmuni e a quello gestazionale. Il modello a due colonne perfette non è solo semplificato: è un contenitore che spinge chi progetta a inventare un contrario anche dove non esiste, perché ogni casella vuota da un lato viene percepita come mancanza e non come dato non pertinente. Chi legge conclude, senza accorgersene, che le due categorie coprono tutto il campo.

La soluzione non è rinunciare al confronto, ma dichiararne i limiti dentro la grafica: una riga finale che dica esplicitamente che esistono altre forme, oppure una terza colonna sottile dedicata a ciò che le due condizioni hanno in comune. È un aggiustamento minimo che cambia la logica del pezzo: da tabella che oppone a mappa che orienta.

La lezione dell’Isotype: confrontare senza deformare

Quando devo rimettere in ordine una comparazione visiva torno sempre allo stesso archivio mentale: il lavoro di Otto Neurath e Marie Neurath, nato nella Vienna degli anni Venti e proseguito in Inghilterra, oggi conservato e studiato dal Dipartimento di Typography and Graphic Communication dell’Università di Reading. Il loro linguaggio per figure serviva proprio a questo: raccontare salute, lavoro e mortalità a un pubblico con scolarizzazione bassa, senza chiedergli di fidarsi di una didascalia.

La regola più famosa di quel metodo è anche la più controintuitiva: per indicare una quantità doppia non si ingrandisce la figurina, si ripete la stessa figurina due volte. Sembra un vincolo estetico, è una precauzione cognitiva: quando si scala un simbolo in altezza e larghezza, l’occhio ne percepisce l’area, non la dimensione lineare, e il confronto si gonfia. L’Isotype ha capito un secolo prima di noi che la geometria del confronto è parte del messaggio. La versione contemporanea di quel principio sono le griglie di icone usate nella comunicazione del rischio clinico, che mostrano il numeratore dentro il denominatore e aiutano chi ha poca dimestichezza coi numeri a non dimenticarsi il totale: un aiuto documentato nella letteratura sul processo decisionale medico.

Nella scheda che stiamo guardando non ci sono numeri, e per una volta va bene così. Ma se domani chi l’ha fatta volesse aggiungere una percentuale di prevalenza, il modo per farlo senza trasformarla in slogan è esattamente quello: una griglia di figure ripetute, il totale sempre visibile, mai un’icona ingrandita per dire di più.

Contrasto, colore e sopravvivenza allo screenshot

Un’infografica sanitaria vive una seconda vita fuori dal nostro controllo: viene salvata, ricompressa, inoltrata, letta su un telefono con luminosità bassa in una sala d’attesa. Progettarla significa progettare per quella seconda vita. Il riferimento operativo che uso è il criterio di contrasto delle linee guida internazionali per l’accessibilità dei contenuti: rapporto minimo di 4,5 a 1 per il testo normale e 3 a 1 per il testo di grandi dimensioni. Il blu scuro su azzurro chiarissimo, qui, regge; il blu più tenue delle risposte è al limite, e dopo una ricompressione aggressiva perde definizione.

Il punto debole vero è un altro: la scheda distingue i livelli informativi usando blu e nero. Sono due colori molto vicini in luminosità, e per una parte dei lettori — pensiamo a chi ha una visione dei colori ridotta o semplicemente a uno schermo tarato male — diventano quasi lo stesso colore. La regola che applico è secca: il colore può rinforzare una distinzione, non può essere l’unico modo per riconoscerla. Serve una differenza anche di corpo, di peso o di posizione. Per lo stesso motivo la coppia rosso-verde resta la scelta peggiore per marcare due categorie contrapposte: è la combinazione che più frequentemente collassa nelle forme comuni di deficit della visione dei colori, e le sequenze cromatiche progettate per essere accessibili nascono proprio per evitarla.

Ultimo dettaglio, spesso trascurato: la fonte. Qui in basso a destra c’è solo un monogramma. Quando un’immagine sanitaria circola staccata dal contesto, chi la trova non ha modo di verificarla. Una riga di piede con l’ente di riferimento e l’anno costa due centimetri di spazio e vale tutta la credibilità del pezzo.

Come la ridisegnerei, in concreto

Non ripartirei da zero: il contenuto è la parte buona. Interverrei sull’impalcatura.

Un titolo unico e autosufficiente, con la parola diabete scritta per intero, e sigle solo come sottotitolo.
Una griglia vera a due colonne con righe allineate sull’asse verticale: le due risposte alla stessa domanda devono partire dalla stessa linea.
Testo allineato a sinistra in entrambe le colonne, non centrato: il margine sinistro costante è ciò che permette all’occhio di tornare a capo senza cercare.
Inversione della gerarchia: domande più grandi e in colore pieno, risposte in corpo minore e in un grigio-blu meno acceso.
Un solo formato per le righe: tutte domande oppure tutte etichette, mai un misto.
Illustrazioni ridotte e relegate ai margini, con lo spazio vuoto usato come strumento di separazione invece dei riempitivi.
Una nota finale che ammette la complessità e una riga di fonte con l’anno.

Sei prove da fare su qualunque confronto a due colonne

Questa è la checklist che uso, mia o altrui, prima di dare l’ok a una comparazione visiva.

Prova dell’occhiata. Un secondo e mezzo: se non capisco quali sono le categorie confrontate, la gerarchia è sbagliata.
Prova della riga. Copro una colonna: la domanda resta comprensibile da sola?
Prova del terzo caso. Esiste qualcosa che non sta in nessuna delle due colonne? Se sì, va detto.
Prova del bianco e nero. Converto in scala di grigi: le distinzioni sopravvivono senza il colore?
Prova del pollice. Guardo l’immagine sul telefono a distanza di braccio: il testo più piccolo è ancora leggibile?
Prova dello screenshot orfano. Se l’immagine gira senza didascalia, contiene al suo interno chi la firma e su cosa si basa?

Chi ha fatto questa scheda ha già la parte difficile: ha capito che una distinzione clinica mal compresa produce stigma, e ha provato a rimediare con gli strumenti che aveva. Il passo successivo non è più decorazione, è meno: una griglia, tre livelli di testo, un colore in meno, una riga di fonte in più. Le infografiche comparative che funzionano non sono quelle che riempiono la pagina, ma quelle che dopo trenta secondi lasciano in testa una struttura.