Banner cookie: esempi di design

Un buon design del banner cookie offre scelte comprensibili, funziona su uno schermo piccolo e lascia un modo chiaro per tornare alle preferenze. Ogni esempio qui sotto mostra quando il layout è utile, una scelta di design che conta e una cosa da testare su uno smartphone o nel percorso del visitatore.

I sei layout sono concept originali disegnati per questo articolo. Non sono screenshot di siti di clienti né varianti vincenti emerse da test di conversione.

1. Il negozio indipendente: una scheda compatta in basso

Una scheda bianca con un bordo sottile si trova in fondo allo schermo, chiaramente separata dalla pagina retrostante. La spiegazione è breve e le scelte principali stanno insieme.

• Utile quando: le foto dei prodotti danno già personalità visiva al sito e molti visitatori arrivano direttamente sulle pagine prodotto.
• Scelta di design: affianca “Accetta tutti” e “Rifiuta tutti” con le stesse dimensioni e lo stesso stile, e lasciali impilare con la stessa larghezza su mobile. Mantieni visibile “Gestisci preferenze” come terza scelta.
• Test: su una vera pagina prodotto, da smartphone, verifica che la scheda non copra “Aggiungi al carrello”, il totale del carrello o un pulsante della chat. Con la tastiera, verifica che il focus non sparisca mai dietro la scheda; le linee guida del W3C sul focus nascosto usano i banner cookie come esempio.

2. Il sito di servizi B2B: una barra discreta a tutta larghezza

Una barra sobria lungo il fondo della pagina usa i colori neutri del sito e un solo colore d’accento. Le finalità sono spiegate con il linguaggio semplice che useresti in una conversazione commerciale.

• Utile quando: i visitatori arrivano per capire un servizio e poi raggiungono un modulo di contatto o di richiesta demo, quindi il banner non dovrebbe fare concorrenza all’offerta.
• Scelta di design: usa lo spazio per descrizioni chiare delle finalità, ad esempio cosa misurano gli strumenti di analisi e se usi la pubblicità, invece che per un grande titolo.
• Test: segui il percorso del lead su smartphone, dalla landing page al modulo inviato. Il titolo e il pulsante del modulo dovrebbero restare raggiungibili, e il tag di conversione del modulo dovrebbe rispettare la scelta fatta.

3. L’agenzia creativa: cornice espressiva, scelte neutre

Un sito colorato può comunque avere un’interfaccia di consenso pacata. La personalità va nello sfondo della scheda, nel bordo o nel titolo; le etichette delle azioni restano semplici.

• Utile quando: il brand è audace e un semplice riquadro grigio sembrerebbe fuori luogo.
• Scelta di design: applica il colore del brand alla cornice, non a un solo pulsante. Entrambe le scelte principali ricevono lo stesso trattamento; la nostra analisi dei dark pattern illustra le trappole da evitare.
• Test: verifica ogni etichetta sullo sfondo del brand rispetto alle linee guida del W3C sul contrasto, poi guarda il banner su smartphone sopra la parte più carica della tua homepage.

4. L’editore: spazio per i dettagli senza un muro di testo

Gli editori lavorano spesso con molti fornitori e molte finalità. Il primo livello presenta chiaramente la decisione; una vista di dettaglio contiene le informazioni su fornitori e finalità.

• Utile quando: il sito è finanziato dalla pubblicità, lavora con diversi partner pubblicitari o usa un framework come IAB TCF.
• Scelta di design: mantieni il testo leggibile e lascia che la vista di dettaglio faccia il suo lavoro, invece di comprimere una lunga spiegazione sui fornitori in una piccola scheda. Se usi IAB TCF, i testi e i controlli che richiede determinano il design, quindi verificali prima di definire lo stile.
• Test: su smartphone, apri i dettagli, trova un fornitore, modifica una finalità e salva. Poi riapri le impostazioni e verifica che la modifica sia stata mantenuta.

5. L’attività mobile-first: azioni impilate e focus visibile

Progetta prima per lo schermo più piccolo che supporti. Impila le azioni a tutta larghezza e dai spazio a ciascuna.

• Utile quando: la maggior parte dei visitatori arriva da smartphone, ad esempio da campagne sui social media o per prenotare un servizio locale.
• Scelta di design: rendi ogni scelta un’area di tocco comoda e mantieni l’opzione per rifiutare facile da raggiungere quanto quella per accettare, senza dover scorrere all’interno del banner. La dimensione minima dell’area di tocco secondo il W3C è di 24 per 24 pixel CSS; un’area più grande è più facile da toccare.
• Test: ingrandisci la pagina e ruota lo smartphone in orizzontale; tutte le scelte dovrebbero restare raggiungibili. Poi completa il banner su desktop usando solo la tastiera e verifica che il focus sia sempre visibile.

Un mockup pulito non è un test di accessibilità. Ciò che va verificato è la pagina reale, su dispositivi reali.

6. Il sito internazionale: un layout che regge la traduzione

Etichette inglesi brevi possono diventare molto più lunghe in un’altra lingua. Lascia uno spazio flessibile invece di una larghezza fissa e stretta attorno al testo originale.

• Utile quando: il sito si rivolge a visitatori in più lingue, come un negozio che spedisce in tutta Europa.
• Scelta di design: scegli un layout in cui i pulsanti possano andare a capo o impilarsi quando le etichette si allungano, e traduci l’intero pannello: finalità, impostazioni, pulsanti e link alle informative.
• Test: controlla l’anteprima di ogni lingua supportata su uno smartphone con il browser impostato in quella lingua. Un titolo tradotto sopra comandi non tradotti offre ai visitatori un’esperienza incompleta.

Lingua e area geografica risolvono problemi diversi. Un visitatore di lingua tedesca non si trova automaticamente in Germania, e un visitatore negli Stati Uniti può preferire lo spagnolo. Tieni la selezione della lingua separata dalla configurazione del consenso per regione.

Una revisione del design che puoi finire in una sola sessione

• Leggi ogni etichetta su uno smartphone senza ingrandire.
• Confronta la visibilità dell’accettazione e del rifiuto.
• Controlla il contrasto del testo su ogni pulsante e sfondo.
• Completa il percorso delle preferenze usando solo la tastiera.
• Riapri le impostazioni dopo la chiusura del banner.
• Controlla in ogni lingua supportata che non ci siano testi mancanti o tagliati.
• Verifica che i comandi importanti del sito restino utilizzabili.

Poi chiedi a qualcuno che non ha progettato il banner di spiegare cosa significa ogni scelta. Quella conversazione spesso rivela più di un altro giro di ritocchi ai colori.