Bune practici pentru designul bannerelor de cookie-uri

Bannerul de cookie-uri este unul dintre primele lucruri pe care le vede un vizitator. Acesta modelează percepția asupra brandului tău, încrederea în afacerea ta și — un aspect esențial — determină dacă consimțământul este valid din punct de vedere juridic. Un banner bine conceput asigură conformitatea fără fricțiuni. Unul prost conceput fie alungă utilizatorii, fie produce un consimțământ care nu va rezista scrutinului autorităților.

Acest ghid acoperă principiile de design, tiparele de UX și cerințele de accesibilitate care disting un banner de cookie-uri conform și prietenos pentru utilizator de o sursă de răspundere juridică.

Prima impresie contează

Cercetările arată în mod constant că utilizatorii iau decizii legate de bannerele de cookie-uri în două-trei secunde. Majoritatea nu citesc textul integral. Ei scanează tipare recognoscibile — butoane, comutatoare, limbaj familiar — și acționează instinctiv. Aceasta înseamnă că designul vizual al bannerului cântărește la fel de mult ca și conținutul juridic.

Obiectivul este ca acțiunea corectă să fie evidentă, iar opțiunile disponibile să fie clare dintr-o privire. Dacă un utilizator trebuie să se gândească ce anume să facă, designul tău a eșuat.

Principii-cheie pentru prima impresie:

• Claritate în locul ingeniozității. Un banner de cookie-uri nu este locul potrivit pentru texte creative sau interfețe neconvenționale. Folosește tipare familiare, pe care utilizatorii le recunosc.
• Ierarhie vizuală. Cele mai importante elemente — descrierea scopului și butoanele de acțiune — ar trebui să fie cele mai proeminente. Elementele secundare (link către setări, link către politică) pot fi mai puțin proeminente, dar trebuie să rămână vizibile.
• Spațiu alb. Un banner înghesuit devine copleșitor. Lasă elementele să respire. Marginile și spațierea semnalează profesionalism și fac conținutul mai ușor de scanat.

Ierarhia butoanelor și greutatea vizuală

Aici eșuează majoritatea bannerelor de cookie-uri în ceea ce privește conformitatea — și aici se aplică cele mai multe amenzi.

Ghidul 05/2020 al EDPB privind consimțământul, precum și numeroasele acțiuni de aplicare a legii inițiate de CNIL, de Garante-ul italian și de Datatilsynet-ul danez, au stabilit un principiu clar: opțiunea de a respinge cookie-urile trebuie prezentată cu o proeminență egală cu cea de a le accepta.

Ce înseamnă acest lucru în practică:

• Butoanele de acceptare și respingere trebuie să aibă aceeași dimensiune. Un buton „Acceptă tot" lat de 200 de pixeli lângă un link text „Respinge" nu reprezintă o proeminență egală. Ambele trebuie redate ca butoane cu dimensiuni comparabile.
• Ambele butoane trebuie să folosească o greutate vizuală comparabilă. Dacă butonul de acceptare este unul plin, cu contrast ridicat, și butonul de respingere trebuie să fie un buton plin — nu un element cu contur, tip fantomă sau doar text. CNIL a amendat Google în mod specific cu 150 de milioane EUR în 2022, parțial pentru că opțiunea de respingere presupunea mai mult efort decât cea de acceptare.
• Culoarea nu trebuie să manipuleze. Un buton verde aprins „Acceptă" lângă un buton gri „Respinge" este un tipar întunecat. Folosește culoarea principală a brandului tău pentru ambele sau culori neutre pentru ambele. Semnalul vizual nu trebuie să orienteze utilizatorul spre o anumită alegere.
• Ordinea butoanelor contează mai puțin decât crezi. Dacă acceptarea sau respingerea apare prima nu este preocuparea principală — greutatea vizuală este. Cu toate acestea, plasarea butonului de respingere în stânga (primul în ordinea de citire) poate semnala neutralitate.

Tiparul recomandat pentru butoane

Un banner conform și prietenos pentru utilizator folosește de regulă trei acțiuni:

1. Respinge tot — un buton plin
2. Acceptă tot — un buton plin, de dimensiune și greutate vizuală egală
3. Gestionează preferințele — un buton sau link secundar (poate fi mai puțin proeminent, întrucât duce la un al doilea nivel)

Culoare și contrast

Alegerile de culoare din bannerele de cookie-uri servesc două scopuri: consistența brandului și lizibilitatea. Din perspectiva conformității, cerințele-cheie sunt:

• Contrastul textului. Tot textul din banner trebuie să respecte cerințele de contrast WCAG 2.1 AA: un raport minim de contrast de 4,5:1 pentru textul normal și 3:1 pentru textul mare. Acest lucru se aplică descrierii scopului, etichetelor butoanelor și link-urilor.
• Contrastul butoanelor. Fundalurile butoanelor trebuie să aibă un contrast suficient față de fundalul bannerului, iar textul butoanelor trebuie să aibă un contrast suficient față de fundalul butonului. Verifică ambele straturi.
• Vizibilitatea link-urilor. Link-urile către politica de cookie-uri și politica de confidențialitate trebuie să fie distinctibile vizual de textul din jur — de regulă prin culoare și subliniere.
• Fundalul. Fundalul bannerului trebuie să ofere un contrast suficient față de mediul înconjurător. Dacă bannerul se suprapune peste conținutul paginii, asigură-te că suprapunerea este suficient de opacă încât textul bannerului să fie lizibil indiferent de conținutul paginii de dedesubt.

O abordare frecventă este folosirea unui fundal alb sau foarte deschis pentru banner, a unui text închis pentru lizibilitate și a culorii principale a brandului pentru butoane. Aceasta produce de obicei rapoarte de contrast puternice și un aspect curat, profesional.

Texte și microtexte

Textul din bannerul de cookie-uri trebuie să fie suficient din punct de vedere juridic, dar trebuie să fie și lizibil pentru un public non-tehnic. Considerentul 39 din GDPR impune în mod explicit ca informațiile privind prelucrarea datelor să fie furnizate într-un „limbaj clar și simplu".

Titlul

Menține-l simplu și direct. Exemple eficiente:

• „Folosim cookie-uri"
• „Preferințe privind cookie-urile"
• „Opțiunile tale de confidențialitate"

Evită formulările vagi sau evazive de tipul „Prețuim confidențialitatea ta" — acestea nu îi spun utilizatorului nimic concret.

Descrierea scopului

În una-trei propoziții, explică ce cookie-uri folosești și de ce. Fii specific:

„Folosim cookie-uri esențiale pentru ca acest site să funcționeze. Am dori, de asemenea, să folosim cookie-uri de analiză pentru a înțelege cum utilizezi site-ul nostru și cookie-uri de marketing pentru a-ți afișa conținut relevant. Poți accepta tot, respinge tot sau îți poți gestiona preferințele."

Este concis, specific și concret. Compară-l cu formularea din păcate foarte răspândită:

„Acest site web folosește cookie-uri pentru a-ți asigura cea mai bună experiență. Continuând să folosești acest site, ești de acord cu utilizarea de către noi a cookie-urilor."

Al doilea exemplu este neconform: presupune consimțământul prin continuarea navigării (nevalid conform GDPR), nu specifică scopurile și nu oferă o alegere.

Etichetele butoanelor

Etichetele butoanelor trebuie să fie lipsite de ambiguitate:

• „Acceptă tot" și „Respinge tot" — limbaj clar și paralel
• „Gestionează preferințele" sau „Personalizează" — pentru opțiunea de setări
• Evită: „OK", „Am înțeles", „Continuă", „Înțeleg" — acestea sunt ambigue și nu constituie un consimțământ specific

Design orientat spre mobil („mobile-first")

Peste 60% din traficul web este mobil. Bannerul tău de cookie-uri va fi văzut pe ecrane cu lățimea de doar 320 de pixeli. Dacă îl concepi mai întâi pentru desktop și îl adaptezi apoi pentru mobil, aproape sigur vei ajunge la o experiență mobilă înghesuită și greu de folosit.

Considerații de design pentru mobil:

• Aranjează butoanele pe verticală. Rândurile orizontale de butoane care funcționează pe desktop devin ilizibile pe mobil. Aranjează butoanele de acceptare, respingere și setări pe verticală, cu o dispunere pe toată lățimea.
• Zonele de atingere. Butoanele trebuie să aibă cel puțin 44x44 pixeli (WCAG 2.5.5, nivelul AAA) sau, ca minim, 24x24 pixeli (WCAG 2.5.8, nivelul AA). Pe mobil, mai mare este întotdeauna mai bine — vizează 48 de pixeli sau mai mult în înălțime.
• Acoperirea ecranului. Pe mobil, un banner de cookie-uri poate acoperi cu ușurință 60-80% din zona vizibilă. Acest lucru este acceptabil pentru un prompt inițial, dar bannerul nu trebuie să facă site-ul complet inutilizabil. Dacă folosești o suprapunere modală, asigură-te că utilizatorii pot totuși identifica faptul că se află pe site-ul corect.
• Dimensiunea textului. Nu coborî niciodată sub 14 pixeli pentru textul principal sau 12 pixeli pentru textul secundar pe mobil. Utilizatorii nu ar trebui să fie nevoiți să mărească pentru a citi bannerul.
• Comportamentul de derulare. Dacă conținutul bannerului depășește înălțimea zonei vizibile pe mobil (mai ales panoul de preferințe), acesta trebuie să poată fi derulat în interiorul bannerului. Nu lăsa conținutul bannerului să se extindă dincolo de ecran fără posibilitatea de a ajunge la butoanele de acceptare/respingere.

UX-ul comutatoarelor de categorii

Panoul de preferințe — al doilea nivel al unui banner stratificat — este locul unde utilizatorii fac alegeri granulare. Tiparul standard folosește comutatoare de categorii: câte un comutator pentru fiecare categorie de cookie-uri (necesare, analiză, marketing, preferințe), fiecare cu o etichetă și o descriere.

Recomandări de design pentru comutatoare:

• Stările vizuale trebuie să fie lipsite de ambiguitate. Pornit (consimțământ acordat) și oprit (consimțământ retras) trebuie să fie clar distinctibile prin culoare, poziție și, în mod ideal, o etichetă („Pornit" / „Oprit" sau o bifă / un X). Nu te baza doar pe culoare — acest lucru eșuează pentru utilizatorii cu daltonism.
• Cookie-urile necesare ar trebui să fie pornite și dezactivate. Categoria „Strict necesare" ar trebui să fie pornită, cu comutatorul dezactivat vizual (estompat sau cu o pictogramă de lacăt) și cu o notă care explică faptul că aceste cookie-uri nu pot fi dezactivate, deoarece sunt necesare pentru funcționarea site-ului.
• Starea implicită pentru categoriile neesențiale trebuie să fie oprită. Comutatoarele prebifate constituie un consimțământ preselectat, care este interzis în mod explicit de hotărârea Planet49 a CJUE.
• Descrierile categoriilor trebuie să fie inteligibile. „Cookie-uri de analiză" este o etichetă. „Ne ajută să înțelegem cum interacționează vizitatorii cu site-ul nostru web prin colectarea de date anonime de utilizare" este o descriere. Oferă-le pe ambele.
• Liste de cookie-uri extensibile. Sub fiecare categorie, oferă o secțiune extensibilă care enumeră cookie-urile individuale: nume, furnizor, scop și durată. Acest nivel de transparență este tot mai mult așteptat de autoritățile de protecție a datelor.

Designul panoului de setări/preferințe

Panoul de preferințe este o componentă esențială. Când un utilizator apasă pe „Gestionează preferințele", se implică activ în alegerile sale de confidențialitate — acesta este utilizatorul pe care vrei să-l tratezi cu cel mai mare respect.

• Antet clar. „Preferințe privind cookie-urile" sau „Gestionează-ți confidențialitatea" — fă evident scopul acestui panou.
• Buton de salvare. Un buton proeminent „Salvează preferințele" care confirmă alegerile granulare ale utilizatorului. Acest buton trebuie să fie ușor accesibil, fără derulare excesivă.
• Butoanele „Acceptă tot" și „Respinge tot" ar trebui să rămână disponibile. Chiar și în panoul de preferințe, oferă butoane de scurtătură pentru a accepta tot sau a respinge tot. Unii utilizatori deschid panoul din curiozitate, dar tot își doresc o acțiune rapidă.
• Comportamentul de închidere. Dacă un utilizator închide panoul de preferințe fără a salva, tratează acest lucru ca lipsă de consimțământ — nu seta cookie-uri neesențiale. Nu bloca utilizatorii în panou.

Personalizarea brandului menținând totodată conformitatea

Bannerul tău de cookie-uri ar trebui să pară o parte a site-ului tău, nu o intruziune terță. Majoritatea platformelor de gestionare a consimțământului permit personalizarea culorilor, a fonturilor, a poziționării logo-ului și a textelor. Folosește acest lucru pentru a alinia bannerul cu identitatea brandului tău.

Cu toate acestea, personalizarea brandului nu trebuie să compromită conformitatea:

• Poți folosi culorile brandului tău, dar butoanele trebuie totuși să aibă o greutate vizuală egală.
• Poți folosi fontul brandului tău, dar textul trebuie totuși să fie lizibil la dimensiunile utilizate.
• Poți adăuga logo-ul tău, dar acesta nu trebuie să împingă conținutul esențial (descrierea scopului, butoanele) sub linia de vizibilitate.
• Poți personaliza textele, dar acestea trebuie totuși să fie specifice, precise și complete.

Cerințe de accesibilitate pentru bannerele de cookie-uri

Un banner de cookie-uri care nu este accesibil nu este conform — atât conform legislației privind confidențialitatea (utilizatorul nu ar putea acorda un consimțământ informat dacă nu poate percepe sau utiliza bannerul), cât și conform legislației privind accesibilitatea (European Accessibility Act și legile naționale privind discriminarea persoanelor cu dizabilități).

Cerințe WCAG AA

• Navigare cu tastatura. Fiecare element interactiv — butoane, comutatoare, link-uri, pictograme de închidere — trebuie să poată fi accesat și utilizat cu tastatura. Ordinea de tabulare trebuie să fie logică (de regulă: textul scopului, apoi respingere, apoi acceptare, apoi gestionarea preferințelor).
• Gestionarea focalizării. Când bannerul apare, focalizarea ar trebui să se mute pe el (sau acesta ar trebui anunțat). Când bannerul este închis, focalizarea ar trebui să revină la conținutul principal. Indicatorii de focalizare trebuie să fie vizibili.
• Suport pentru cititoarele de ecran. Bannerul trebuie să folosească roluri și etichete ARIA adecvate. Folosește role="dialog" și aria-label="Cookie consent" pentru containerul bannerului. Butoanele trebuie să aibă nume accesibile. Stările comutatoarelor trebuie anunțate (aria-checked).
• Contrastul de culoare. Tot textul și toate elementele interactive trebuie să respecte rapoartele de contrast WCAG 2.1 AA (4,5:1 pentru textul normal, 3:1 pentru textul mare și componentele de interfață).
• Fără capcane de tastatură. Utilizatorii trebuie să poată naviga în afara bannerului. Deși o suprapunere modală poate restricționa focalizarea la banner (blocarea focalizării pentru modale este un tipar acceptat), trebuie să existe întotdeauna o modalitate de a închide bannerul și de a ajunge la conținutul paginii.
• Mișcarea. Dacă bannerul folosește animații (glisare, estompare), respectă interogarea media prefers-reduced-motion și oferă o alternativă cu mișcare redusă sau fără mișcare.

Testarea accesibilității bannerului tău

1. Navighează prin întregul banner folosind doar tastatura (Tab, Enter, Space, Escape).
2. Testează cu un cititor de ecran (VoiceOver pe macOS, NVDA pe Windows).
3. Verifică contrastul de culoare cu un instrument precum WebAIM Contrast Checker.
4. Testează la o mărire de 200% — bannerul ar trebui să rămână utilizabil.
5. Testează pe mobil cu VoiceOver sau TalkBack activat.

Testare și iterare

Un banner de cookie-uri nu este un element de tip „setează și uită". Comportamentul utilizatorilor, reglementările și utilizarea cookie-urilor pe site-ul tău se schimbă toate în timp. Planifică testarea continuă:

• Ratele de consimțământ. Urmărește ce procent de utilizatori acceptă, resping sau personalizează. Dacă rata de respingere este suspect de scăzută (sub 10%), este posibil ca bannerul tău să folosească tipare întunecate — intenționat sau nu.
• Ratele de interacțiune. Urmărește câți utilizatori interacționează cu panoul de preferințe. O implicare scăzută poate indica faptul că opțiunea „Gestionează preferințele" nu este suficient de vizibilă.
• Testare A/B. Testează diferite texte, etichete de butoane și dispuneri. Obiectivul nu este maximizarea ratelor de consimțământ — ci maximizarea ratelor de consimțământ informat. Un banner cu care interacționează mai mulți utilizatori este un banner mai bun.
• Actualizări de reglementare. Monitorizează îndrumările autorităților relevante de protecție a datelor. Interpretările privind aplicarea legii evoluează, iar bannerul tău ar trebui să evolueze odată cu ele.
• Audituri de cookie-uri. Scanează regulat site-ul pentru cookie-uri noi. Dacă adaugi un nou instrument de analiză sau un pixel de marketing, categoriile bannerului tău trebuie actualizate pentru a le reflecta.

Passiro oferă scanarea automată a cookie-urilor și analize ale ratelor de consimțământ pentru a te ajuta să menții bannerul precis și eficient. Află mai multe despre gestionarea consimțământului cu Passiro.