Colori e conversioni: 5 esperimenti A/B che cambiano le idee

Colori e conversioni: 5 esperimenti A/B che cambiano le idee

Sui colori delle CTA c’e’ folklore (rosso vs verde) e poca scienza. Cinque esperimenti A/B veri che mostrano cosa funziona davvero e perche’.

I 5 esperimenti reali

Risultati osservati:

  • Rosso vs Verde su CTA: differenza nulla nel 70% dei casi. Quello che conta e’ il contrasto, non il colore in se.
  • Pulsante grande vs piccolo: pulsante grande aumenta CTR del 8-12% in media.
  • CTA con icona vs senza: icona aiuta solo se rinforza l’azione (carrello, freccia).
  • Background pulsante con gradient vs flat: gradient performa meglio sui giovani, peggio sui senior.
  • CTA in fondo pagina vs ripetuta nel contenuto: ripetizione +15-25% conversioni.

Cosa conta davvero

Sopra il colore: contrasto rispetto al background, dimensione, posizione nella pagina, chiarezza del verbo d’azione, valore percepito (‘Scarica gratis’ vs ‘Scarica’).

Come fare A/B test efficaci

Tre regole: testa una variabile alla volta (no design completamente diverso), serve traffico minimo (500-1000 conversioni/mese per significativita), durata minima 14 giorni anche se i numeri arrivano prima.

In pratica per la tua agenzia o PMI

  • Audit le CTA principali: contrasto, dimensione, copy chiaro.
  • Test prima di credere ai ‘best practice colori CTA’ di YouTube.
  • Misura conversion rate, non solo click.
  • Fai 1 A/B test al mese su elemento diverso.

I colori contano meno di quanto si pensi. Il contesto, contrasto e copy contano molto di piu’. A/B test seri sono l’unico modo per separare folklore da realta’.

Esperimenti A/B su colori CTA spiegati

Risultati di 5 esperimenti reali condotti. Esperimento 1 rosso vs verde su CTA con stesso contrasto background: differenza statisticamente nulla in 70% dei casi. Esperimento 2 pulsante grande vs piccolo: il grande aumenta CTR del 8-12% medio. Esperimento 3 CTA con icona vs senza: icona aiuta solo se rinforza l’azione (carrello, freccia). Esperimento 4 background pulsante con gradient vs flat: gradient performa meglio sui giovani, peggio sui senior. Esperimento 5 CTA in fondo pagina vs ripetuta nel contenuto: ripetizione +15-25% conversioni.

Cosa conta davvero piu’ del colore

Sopra il colore della CTA contano questi fattori. Contrasto: differenza visiva chiara col background. Dimensione: 44×44 pixel minimi per touch. Posizione: above-the-fold e ripetuta. Copy verbale: verbo d’azione + valore percepito (Scarica gratis batte Scarica). Spazio bianco: bottone respira nella pagina, non e’ compresso.

Come fare A/B test efficaci sulla CTA

Tre regole d’oro per A/B test seri. Una variabile alla volta (no design completamente diverso). Traffico minimo per significativita’: 500-1000 conversioni per variante. Durata minima 14 giorni anche se i numeri arrivano prima (cattura settimana intera, weekend, weekday). Tool consigliato: Google Optimize sostituito da GA4 + tool come VWO o Optimizely.

Errori comuni nel testing colori

Quattro errori che invalidano il test. Errore 1: cambiare il test prima della significativita’ statistica. Errore 2: testare su periodo non rappresentativo (festivita’, sales). Errore 3: leggere risultati su un singolo segmento di traffico (mobile vs desktop danno risultati diversi). Errore 4: prendere decisioni globali da test su una sola pagina.

Perche’ il contrasto batte il colore nei test A/B sui CTA

Quando una PMI di Bergamo ci chiede di riprogettare il pulsante “Richiedi preventivo” sul sito di lead generation, la prima reazione interna del cliente e’ quasi sempre la stessa: “facciamolo rosso, converte di piu'”. E’ un riflesso culturale che arriva dai blog di marketing degli anni 2010 e che oggi non regge a un test serio. Nei nostri ultimi diciotto mesi di esperimenti su siti B2B italiani con traffico tra 8.000 e 40.000 visite mese, la variabile “colore in se'” ha prodotto una differenza statisticamente significativa in meno del 30% dei casi. Quello che ha sempre fatto la differenza, in compenso, e’ stato il rapporto di contrasto tra il pulsante e l’area che lo circonda, calcolato secondo la metrica WCAG AA su sfondo reale e non su mockup.

Un caso recente: e-commerce di accessori moda a Bologna, pulsante “Aggiungi al carrello” verde su sfondo grigio chiaro. Test con variante arancione sullo stesso sfondo: +9,4% di add-to-cart su 12.000 sessioni per variante, p-value 0,03. La differenza non era spiegata dal colore in se’, ma dal contrasto effettivo che e’ passato da 2,8:1 a 4,7:1. Quando abbiamo replicato il test con verde scuro (contrasto 5,9:1) la performance dell’arancione si e’ azzerata. Il pulsante che vince e’ quello che si stacca dalla pagina, e il colore e’ solo lo strumento per arrivarci. Smettere di discutere di palette e iniziare a misurare il contrasto con strumenti come WebAIM Contrast Checker e’ il primo passo per chiudere la conversazione folkloristica e aprirne una basata su dati.

Come strutturare un test A/B sui CTA che produca dati affidabili

Il primo errore di chi vuole testare un CTA e’ partire dal tool, non dal protocollo. Per un test che dia risultati spendibili in agenzia servono tre numeri prima di toccare GA4 o qualsiasi piattaforma di experimentation: il traffico settimanale stabile della pagina target, il tasso di conversione attuale e la dimensione minima di effetto che si vuole rilevare. Una landing di un’agency di Milano che gira a 1.200 sessioni settimanali e converte al 3,2% richiede circa quattro settimane per rilevare un miglioramento del 20% con potenza statistica del 80%. Se la stessa landing fa 250 sessioni a settimana, il test va abbandonato perche’ impiegherebbe oltre cinque mesi e nel frattempo cambierebbero troppo il contesto di traffico e la stagionalita’.

La nostra checklist operativa: una variante alla volta (mai testare colore e copy insieme), randomizzazione 50/50, niente filtri pre-test sulle audience, esclusione del traffico interno via filtro IP, durata minima fissata a due cicli settimanali completi per assorbire la stagionalita’ giorno-per-giorno, stop del test solo al raggiungimento della dimensione campionaria pianificata. Tool come VWO, Convert, AB Tasty o un setup custom GA4 + Cloudflare Workers funzionano tutti se rispetti queste regole. Strumento sbagliato ma protocollo giusto batte sempre strumento giusto e protocollo improvvisato. La parte piu’ difficile, in pratica, e’ resistere alla tentazione di “guardare i risultati intermedi” dopo cinque giorni: e’ li’ che si commettono errori da peeking che invalidano tutto il test.

Gli errori sui CTA che vediamo nelle PMI italiane

Il piu’ frequente e’ la diluizione: pagine con sei o sette CTA diversi che competono per l’attenzione. Un sito di formazione professionale di Torino con cui abbiamo lavorato aveva nella stessa view above-the-fold il pulsante “Scopri di piu'”, il banner “Iscriviti alla newsletter”, la chat live aperta in basso a destra, uno sticky header con “Chiama subito” e un pop-up exit-intent. Risultato: tasso di click sul CTA principale al 1,1%. Dopo aver rimosso tutto tranne il pulsante principale e la chat (chiusa di default), il CTR e’ salito al 3,8% in due settimane, senza toccare colore o copy del pulsante stesso. La gerarchia visiva e’ un moltiplicatore che spesso pesa piu’ del singolo elemento.

Secondo errore tipico: il verbo d’azione generico. “Scopri”, “Vai”, “Continua” producono tassi di click sistematicamente inferiori a verbi che descrivono il valore percepito. “Scarica la guida PDF” batte “Scopri di piu'” in modo trasversale su qualsiasi B2B abbiamo testato, perche’ esplicita il formato e azzera l’ansia di compilare un form per finire in una sales call non richiesta. Terzo errore: posizionare il CTA primario solo sotto il fold senza ripeterlo lungo la pagina. Su una pagina lunga di servizio per uno studio commercialista di Brescia, l’inserimento di un secondo CTA identico a meta’ pagina ha portato un +21% di conversioni totali, e l’80% di quel guadagno e’ arrivato dal CTA in mezzo, non da quello finale. La ripetizione contestuale non e’ insistenza, e’ rispetto del flusso di lettura.

Microcopy: la leva sottovalutata che cambia i tassi di click

Il testo dentro al pulsante vale spesso quanto colore, dimensione e posizione messi insieme. Su una landing di consulenza HR di Padova, sostituire “Invia richiesta” con “Prenota call gratuita di 20 minuti” ha aumentato le conversioni del 34% in tre settimane di test, su un volume di 5.400 sessioni per variante. Il pulsante era identico per colore, dimensione e posizione sotto il form. L’unica differenza era la promessa esplicita: tempo limitato, gratis, formato chiaro. Le tre parole “call gratuita 20 minuti” hanno fatto saltare un’obiezione interna che probabilmente impediva al visitatore di cliccare anche quando il messaggio della pagina aveva gia’ fatto il lavoro di convincimento.

Le regole che applichiamo costantemente: massimo quattro o cinque parole sul pulsante, verbo all’imperativo prima persona quando ha senso (“Ricevi la guida” funziona meglio di “Richiedi guida”), specificita’ sul cosa succede dopo il click (“Vai al checkout” batte “Procedi”), assenza totale di gergo agency tipo “lead magnet” o “demo book”. Per gli e-commerce in particolare il CTA carrello deve dire esattamente quello che fa: “Aggiungi al carrello” e’ migliore di “Acquista” perche’ il secondo evoca pagamento immediato e attiva la barriera cognitiva del checkout. Un piccolo dettaglio di copy che, ripetuto su 50.000 sessioni mensili di un e-commerce medio italiano, sposta diverse migliaia di euro di revenue all’anno senza cambiare nulla del prodotto o del prezzo.