Best practice per il design del cookie banner

Il tuo cookie banner è una delle prime cose che un visitatore vede. Influenza la sua percezione del tuo brand, la fiducia nella tua azienda e — aspetto cruciale — se il suo consenso è legalmente valido. Un banner ben progettato garantisce la conformità senza attriti. Uno progettato male allontana gli utenti oppure produce un consenso che non reggerebbe a un controllo normativo.

Questa guida illustra i principi di design, i modelli di UX e i requisiti di accessibilità che distinguono un cookie banner conforme e intuitivo da una potenziale fonte di rischio.

La prima impressione conta

Le ricerche dimostrano costantemente che gli utenti prendono decisioni sui cookie banner in due o tre secondi. La maggior parte non legge l'intero testo. Cerca con lo sguardo schemi riconoscibili — pulsanti, interruttori, terminologia familiare — e agisce d'istinto. Ciò significa che il design visivo del banner ha lo stesso peso del suo contenuto legale.

L'obiettivo è rendere ovvia l'azione corretta e chiare a colpo d'occhio le opzioni disponibili. Se un utente deve riflettere su cosa fare, il tuo design ha fallito.

Principi chiave per una buona prima impressione:

• Chiarezza prima dell'originalità. Un cookie banner non è il luogo adatto a testi creativi o interfacce non convenzionali. Usa schemi familiari che gli utenti riconoscano.
• Gerarchia visiva. Gli elementi più importanti — la descrizione delle finalità e i pulsanti d'azione — devono essere i più evidenti. Gli elementi secondari (link alle impostazioni, link all'informativa) possono essere meno prominenti ma devono comunque rimanere visibili.
• Spazi bianchi. Un banner affollato risulta opprimente. Lascia agli elementi il giusto respiro. Margini e spaziature trasmettono professionalità e rendono i contenuti più facili da scorrere.

Gerarchia dei pulsanti e peso visivo

È qui che la maggior parte dei cookie banner viola la conformità — ed è qui che vengono comminate la maggior parte delle sanzioni.

Le Linee guida 05/2020 dell'EDPB sul consenso, e numerose azioni di enforcement da parte di CNIL, del Garante italiano e del Datatilsynet danese, hanno stabilito un principio chiaro: l'opzione per rifiutare i cookie deve essere presentata con la stessa evidenza dell'opzione per accettarli.

Cosa significa in pratica:

• I pulsanti di accettazione e rifiuto devono avere le stesse dimensioni. Un pulsante "Accetta tutti" largo 200 pixel accanto a un link testuale "Rifiuta" non rappresenta pari evidenza. Entrambi devono essere resi come pulsanti di dimensioni comparabili.
• Entrambi i pulsanti devono avere un peso visivo comparabile. Se il pulsante di accettazione è pieno e ad alto contrasto, anche il pulsante di rifiuto deve essere un pulsante pieno — non un elemento con solo contorno, trasparente o costituito da solo testo. La CNIL ha sanzionato Google specificamente per 150 milioni di euro nel 2022, in parte perché l'opzione di rifiuto richiedeva più sforzo rispetto all'accettazione.
• Il colore non deve manipolare. Un pulsante "Accetta" verde brillante accanto a un pulsante "Rifiuta" grigio è un dark pattern. Usa il colore primario del tuo brand per entrambi, oppure colori neutri per entrambi. Il segnale visivo non deve orientare l'utente verso una scelta.
• L'ordine dei pulsanti conta meno di quanto pensi. Che venga prima l'accettazione o il rifiuto non è la preoccupazione principale — lo è il peso visivo. Detto questo, collocare il pulsante di rifiuto a sinistra (per primo nell'ordine di lettura) può segnalare neutralità.

Modello di pulsanti consigliato

Un banner conforme e intuitivo utilizza in genere tre azioni:

1. Rifiuta tutti — un pulsante pieno
2. Accetta tutti — un pulsante pieno di dimensioni e peso visivo uguali
3. Gestisci preferenze — un pulsante o link secondario (può essere meno prominente, poiché conduce a un secondo livello)

Colore e contrasto

Le scelte cromatiche nei cookie banner servono a due scopi: coerenza col brand e leggibilità. Dal punto di vista della conformità, i requisiti chiave sono:

• Contrasto del testo. Tutto il testo nel banner deve soddisfare i requisiti di contrasto WCAG 2.1 AA: un rapporto di contrasto minimo di 4,5:1 per il testo normale e di 3:1 per il testo grande. Ciò vale per la descrizione delle finalità, le etichette dei pulsanti e i link.
• Contrasto dei pulsanti. Lo sfondo dei pulsanti deve avere un contrasto sufficiente rispetto allo sfondo del banner, e il testo dei pulsanti deve avere un contrasto sufficiente rispetto allo sfondo del pulsante. Verifica entrambi i livelli.
• Visibilità dei link. I link alla tua cookie policy e alla privacy policy devono essere visivamente distinguibili dal testo circostante — solitamente tramite colore e sottolineatura.
• Sfondo. Lo sfondo del banner deve garantire un contrasto sufficiente rispetto a ciò che lo circonda. Se il banner si sovrappone al contenuto della pagina, assicurati che l'overlay sia abbastanza opaco da rendere il testo leggibile indipendentemente dal contenuto sottostante.

Un approccio comune consiste nell'usare uno sfondo bianco o molto chiaro per il banner, testo scuro per la leggibilità e il colore primario del tuo brand per i pulsanti. Questo produce in genere ottimi rapporti di contrasto e un aspetto pulito e professionale.

Testi e microcopy

Il testo del cookie banner deve essere legalmente sufficiente, ma deve anche essere leggibile da un pubblico non tecnico. Il Considerando 39 del GDPR richiede esplicitamente che le informazioni sul trattamento dei dati siano fornite con un "linguaggio semplice e chiaro".

Titolo

Mantienilo semplice e diretto. Esempi efficaci:

• "Utilizziamo i cookie"
• "Preferenze sui cookie"
• "Le tue scelte sulla privacy"

Evita un linguaggio vago o evasivo come "Teniamo alla tua privacy" — non fornisce all'utente alcuna indicazione utile.

Descrizione delle finalità

In una-tre frasi, spiega quali cookie utilizzi e perché. Sii specifico:

"Utilizziamo cookie essenziali per il funzionamento di questo sito. Vorremmo inoltre utilizzare cookie analitici per capire come usi il nostro sito, e cookie di marketing per mostrarti contenuti pertinenti. Puoi accettare tutti, rifiutare tutti o gestire le tue preferenze."

Questo testo è conciso, specifico e concreto. Confrontalo con quello purtroppo diffuso:

"Questo sito web utilizza cookie per garantirti la migliore esperienza. Continuando a utilizzare questo sito, accetti il nostro utilizzo dei cookie."

Il secondo esempio non è conforme: presuppone il consenso attraverso la navigazione continuata (non valido ai sensi del GDPR), non specifica le finalità e non offre una scelta.

Etichette dei pulsanti

Le etichette dei pulsanti devono essere inequivocabili:

• "Accetta tutti" e "Rifiuta tutti" — linguaggio chiaro e parallelo
• "Gestisci preferenze" o "Personalizza" — per l'opzione delle impostazioni
• Da evitare: "OK", "Ho capito", "Continua", "Comprendo" — sono ambigui e non costituiscono un consenso specifico

Design mobile-first

Oltre il 60% del traffico web proviene da dispositivi mobili. Il tuo cookie banner sarà visualizzato su schermi larghi anche solo 320 pixel. Se progetti prima per desktop e poi adatti al mobile, finirai quasi certamente con un'esperienza mobile angusta e inutilizzabile.

Considerazioni per il design mobile:

• Impila i pulsanti in verticale. Le righe orizzontali di pulsanti che funzionano su desktop diventano illeggibili su mobile. Impila verticalmente i pulsanti di accettazione, rifiuto e impostazioni con un layout a tutta larghezza.
• Aree di tocco. I pulsanti devono essere di almeno 44x44 pixel (WCAG 2.5.5, Livello AAA) o come minimo 24x24 pixel (WCAG 2.5.8, Livello AA). Su mobile, più grande è sempre meglio — punta a un'altezza di 48 pixel o più.
• Copertura dello schermo. Su mobile, un cookie banner può facilmente coprire il 60-80% della viewport. Questo è accettabile per una richiesta iniziale, ma il banner non deve rendere il sito completamente inutilizzabile. Se usi un overlay modale, assicurati che gli utenti possano comunque riconoscere di trovarsi sul sito giusto.
• Dimensione del testo. Non scendere mai sotto i 14 pixel per il corpo del testo o i 12 pixel per il testo secondario su mobile. Gli utenti non dovrebbero dover ingrandire per leggere il banner.
• Comportamento allo scroll. Se il contenuto del banner supera l'altezza della viewport su mobile (soprattutto il pannello delle preferenze), deve essere scorrevole all'interno del banner. Non lasciare che il contenuto del banner si estenda oltre lo schermo senza modo di raggiungere i pulsanti di accettazione/rifiuto.

UX degli interruttori di categoria

Il pannello delle preferenze — il secondo livello di un banner a livelli — è dove gli utenti effettuano scelte granulari. Il modello standard utilizza interruttori di categoria: un interruttore per ciascuna categoria di cookie (necessari, analitici, marketing, preferenze), ciascuno con un'etichetta e una descrizione.

Linee guida di design per gli interruttori:

• Gli stati visivi devono essere inequivocabili. Attivo (consenso concesso) e disattivo (consenso negato) devono essere chiaramente distinguibili tramite colore, posizione e idealmente un'etichetta ("Attivo" / "Disattivo" o un segno di spunta / X). Non affidarti solo al colore — questo penalizza gli utenti daltonici.
• I cookie necessari dovrebbero essere attivi e disabilitati. La categoria "Strettamente necessari" dovrebbe essere attivata con l'interruttore visivamente disabilitato (in grigio o con un'icona di lucchetto), con una nota che spiega che questi cookie non possono essere disattivati perché indispensabili al funzionamento del sito.
• Lo stato predefinito per le categorie non essenziali deve essere disattivo. Gli interruttori preselezionati costituiscono un consenso preimpostato, esplicitamente vietato dalla sentenza Planet49 della CGUE.
• Le descrizioni delle categorie devono essere comprensibili. "Cookie analitici" è un'etichetta. "Ci aiutano a capire come i visitatori interagiscono con il nostro sito web raccogliendo dati di utilizzo anonimi" è una descrizione. Fornisci entrambe.
• Elenchi di cookie espandibili. Sotto ciascuna categoria, fornisci una sezione espandibile che elenca i singoli cookie: nome, fornitore, finalità e durata. Questo livello di trasparenza è sempre più atteso dalle autorità per la protezione dei dati.

Design del pannello impostazioni/preferenze

Il pannello delle preferenze è un componente fondamentale. Quando un utente clicca su "Gestisci preferenze", sta interagendo attivamente con le proprie scelte sulla privacy — è l'utente che vuoi trattare con il massimo rispetto.

• Intestazione chiara. "Preferenze sui cookie" o "Gestisci la tua privacy" — rendi evidente lo scopo di questo pannello.
• Pulsante di salvataggio. Un pulsante ben visibile "Salva preferenze" che conferma le scelte granulari dell'utente. Questo pulsante deve essere facilmente raggiungibile senza scroll eccessivi.
• "Accetta tutti" e "Rifiuta tutti" devono rimanere disponibili. Anche nel pannello delle preferenze, fornisci pulsanti scorciatoia per accettare o rifiutare tutti. Alcuni utenti aprono il pannello per curiosità ma desiderano comunque un'azione rapida.
• Comportamento alla chiusura. Se un utente chiude il pannello delle preferenze senza salvare, trattalo come consenso non concesso — non impostare cookie non essenziali. Non intrappolare gli utenti nel pannello.

Personalizzazione del brand mantenendo la conformità

Il tuo cookie banner dovrebbe apparire come parte del tuo sito web, non come un'intrusione di terze parti. La maggior parte delle piattaforme di gestione del consenso consente di personalizzare colori, font, posizione del logo e testi. Sfrutta questa possibilità per allineare il banner all'identità del tuo brand.

Tuttavia, la personalizzazione del brand non deve compromettere la conformità:

• Puoi usare i colori del tuo brand, ma i pulsanti devono comunque avere lo stesso peso visivo.
• Puoi usare il font del tuo brand, ma il testo deve comunque essere leggibile alle dimensioni utilizzate.
• Puoi aggiungere il tuo logo, ma non deve spingere i contenuti fondamentali (descrizione delle finalità, pulsanti) sotto la piega.
• Puoi personalizzare i testi, ma devono comunque essere specifici, accurati e completi.

Requisiti di accessibilità per i cookie banner

Un cookie banner non accessibile non è conforme — sia ai sensi della normativa sulla privacy (l'utente non potrebbe fornire un consenso informato se non fosse in grado di percepire o utilizzare il banner) sia della normativa sull'accessibilità (l'European Accessibility Act e le leggi nazionali contro la discriminazione basata sulla disabilità).

Requisiti WCAG AA

• Navigazione da tastiera. Ogni elemento interattivo — pulsanti, interruttori, link, icone di chiusura — deve essere raggiungibile e utilizzabile tramite tastiera. L'ordine di tabulazione deve essere logico (in genere: testo delle finalità, poi rifiuta, poi accetta, poi gestisci preferenze).
• Gestione del focus. Quando il banner compare, il focus dovrebbe spostarsi su di esso (o esso dovrebbe essere annunciato). Quando il banner viene chiuso, il focus dovrebbe tornare al contenuto principale. Gli indicatori di focus devono essere visibili.
• Supporto per screen reader. Il banner deve utilizzare ruoli ed etichette ARIA appropriati. Usa role="dialog" e aria-label="Cookie consent" per il contenitore del banner. I pulsanti devono avere nomi accessibili. Gli stati degli interruttori devono essere annunciati (aria-checked).
• Contrasto cromatico. Tutto il testo e gli elementi interattivi devono soddisfare i rapporti di contrasto WCAG 2.1 AA (4,5:1 per il testo normale, 3:1 per il testo grande e i componenti dell'interfaccia).
• Nessuna trappola per tastiera. Gli utenti devono poter allontanarsi dal banner. Sebbene un overlay modale possa limitare il focus al banner (il focus trapping per i modali è un modello accettato), deve sempre esistere un modo per chiudere il banner e raggiungere il contenuto della pagina.
• Movimento. Se il banner utilizza animazioni (scorrimento, dissolvenza), rispetta la media query prefers-reduced-motion e fornisci un'alternativa con movimento ridotto o assente.

Testare l'accessibilità del banner

1. Naviga l'intero banner usando solo la tastiera (Tab, Invio, Spazio, Esc).
2. Effettua un test con uno screen reader (VoiceOver su macOS, NVDA su Windows).
3. Verifica il contrasto cromatico con uno strumento come il WebAIM Contrast Checker.
4. Testa con zoom al 200% — il banner deve rimanere utilizzabile.
5. Testa su mobile con VoiceOver o TalkBack abilitati.

Test e iterazione

Un cookie banner non è un elemento da impostare una volta e dimenticare. Il comportamento degli utenti, le normative e l'utilizzo dei cookie del tuo sito cambiano tutti nel tempo. Pianifica test continui:

• Tassi di consenso. Monitora quale percentuale di utenti accetta, rifiuta o personalizza. Se il tuo tasso di rifiuto è sospettosamente basso (sotto il 10%), il banner potrebbe utilizzare dark pattern — intenzionalmente o meno.
• Tassi di interazione. Monitora quanti utenti interagiscono con il pannello delle preferenze. Un basso coinvolgimento può indicare che l'opzione "Gestisci preferenze" non è sufficientemente visibile.
• Test A/B. Testa testi, etichette dei pulsanti e layout diversi. L'obiettivo non è massimizzare i tassi di consenso — è massimizzare i tassi di consenso informato. Un banner con cui più utenti interagiscono è un banner migliore.
• Aggiornamenti normativi. Monitora le indicazioni delle autorità per la protezione dei dati di riferimento. Le interpretazioni in materia di enforcement evolvono, e il tuo banner dovrebbe evolvere di conseguenza.
• Audit dei cookie. Effettua regolarmente una scansione del sito alla ricerca di nuovi cookie. Se aggiungi un nuovo strumento di analytics o un pixel di marketing, le categorie del banner devono essere aggiornate di conseguenza.

Passiro offre scansione automatica dei cookie e analisi dei tassi di consenso per aiutarti a mantenere il banner accurato ed efficace. Scopri di più sulla gestione del consenso di Passiro.