Najbolje prakse dizajna kolačić bannera

Vaš banner za kolačiće jedna je od prvih stvari koju posjetitelj vidi. Oblikuje njegovu percepciju vašeg brenda, povjerenje u vaše poslovanje i — što je ključno — je li njegova privola pravno valjana. Dobro osmišljen banner postiže usklađenost bez trenja. Loše osmišljen banner ili tjera korisnike od vas ili proizvodi privolu koja neće izdržati regulatornu provjeru.

Ovaj vodič obrađuje načela dizajna, UX obrasce i zahtjeve pristupačnosti koji razlikuju usklađen banner za kolačiće ugodan korisnicima od potencijalne odgovornosti.

Prvi dojam je važan

Istraživanja dosljedno pokazuju da korisnici donose odluke o bannerima za kolačiće u dvije do tri sekunde. Većina korisnika ne čita cjelovit tekst. Skeniraju prepoznatljive obrasce — gumbe, prekidače, poznat jezik — i djeluju instinktivno. To znači da vizualni dizajn vašeg bannera nosi jednaku težinu kao i njegov pravni sadržaj.

Cilj je učiniti ispravnu radnju očitom, a dostupne izbore jasnima na prvi pogled. Ako korisnik mora razmišljati što učiniti, vaš dizajn nije uspio.

Ključna načela za prvi dojam:

• Jasnoća umjesto dosjetljivosti. Banner za kolačiće nije mjesto za kreativno pisanje ili nekonvencionalno sučelje. Koristite poznate obrasce koje korisnici prepoznaju.
• Vizualna hijerarhija. Najvažniji elementi — opis svrhe i gumbi za radnje — trebaju biti najistaknutiji. Sekundarni elementi (poveznica na postavke, poveznica na pravila) mogu biti manje istaknuti, ali i dalje moraju biti vidljivi.
• Bijeli prostor. Prenatrpan banner djeluje neodoljivo. Dajte elementima prostora da dišu. Razmaci i odmaci odaju profesionalnost i olakšavaju skeniranje sadržaja.

Hijerarhija gumba i vizualna težina

Ovdje većina bannera za kolačiće ne uspijeva u usklađenosti — i ovdje se izriče većina kazni.

Smjernice EDPB-a 05/2020 o privoli te brojne provedbene mjere CNIL-a, talijanskog Garantea i danskog Datatilsyneta uspostavili su jasno načelo: mogućnost odbijanja kolačića mora biti prikazana jednako istaknuto kao i mogućnost njihova prihvaćanja.

Što to znači u praksi:

• Gumbi za prihvaćanje i odbijanje moraju biti iste veličine. Gumb "Prihvati sve" širine 200 piksela pored tekstualne poveznice "Odbij" nije jednaka istaknutost. Oba moraju biti prikazana kao gumbi usporedivih dimenzija.
• Oba gumba moraju koristiti usporedivu vizualnu težinu. Ako je vaš gumb za prihvaćanje pun, visokokontrastan gumb, i vaš gumb za odbijanje mora biti pun gumb — a ne obrubljeni, prozirni ili čisto tekstualni element. CNIL je 2022. godine izrekao kaznu Googleu od 150 milijuna EUR dijelom upravo zato što je mogućnost odbijanja zahtijevala više napora od prihvaćanja.
• Boja ne smije manipulirati. Svijetlozeleni gumb "Prihvati" pored sivog gumba "Odbij" jest tamni obrazac (dark pattern). Koristite primarnu boju svog brenda za oba, ili neutralne boje za oba. Vizualni signal ne smije usmjeravati korisnika prema jednom izboru.
• Redoslijed gumba manje je važan nego što mislite. Dolazi li prvo prihvaćanje ili odbijanje nije primarna briga — vizualna težina jest. Ipak, smještanje gumba za odbijanje slijeva (prvo u redoslijedu čitanja) može signalizirati neutralnost.

Preporučeni obrazac gumba

Usklađen banner ugodan korisnicima obično koristi tri radnje:

1. Odbij sve — pun gumb
2. Prihvati sve — pun gumb jednake veličine i vizualne težine
3. Upravljaj postavkama — sekundarni gumb ili poveznica (može biti manje istaknut jer vodi na drugu razinu)

Boja i kontrast

Izbor boja u bannerima za kolačiće služi dvjema svrhama: dosljednosti brenda i čitljivosti. S gledišta usklađenosti, ključni zahtjevi su:

• Kontrast teksta. Sav tekst u banneru mora ispunjavati zahtjeve kontrasta WCAG 2.1 AA: minimalni omjer kontrasta 4,5:1 za normalan tekst i 3:1 za velik tekst. To se odnosi na opis svrhe, oznake gumba i poveznice.
• Kontrast gumba. Pozadine gumba moraju imati dovoljan kontrast u odnosu na pozadinu bannera, a tekst gumba mora imati dovoljan kontrast u odnosu na pozadinu gumba. Dvaput provjerite oba sloja.
• Vidljivost poveznica. Poveznice na vaša pravila o kolačićima i pravila o privatnosti moraju biti vizualno razaznatljive od okolnog teksta — obično bojom i podcrtavanjem.
• Pozadina. Pozadina bannera mora pružati dovoljan kontrast u odnosu na okolinu. Ako vaš banner prekriva sadržaj stranice, osigurajte da je prekrivač dovoljno neproziran da tekst bannera bude čitljiv bez obzira na sadržaj stranice ispod.

Uobičajeni pristup jest korištenje bijele ili vrlo svijetle pozadine za banner, tamnog teksta radi čitljivosti i primarne boje vašeg brenda za gumbe. To obično daje snažne omjere kontrasta te čist, profesionalan izgled.

Tekst i mikrotekst

Tekst u vašem banneru za kolačiće mora biti pravno dostatan, ali mora biti i čitljiv netehničkoj publici. GDPR-ova uvodna izjava 39 izričito zahtijeva da informacije o obradi podataka budu pružene "jasnim i jednostavnim jezikom".

Naslov

Neka bude jednostavan i izravan. Učinkoviti primjeri:

• "Koristimo kolačiće"
• "Postavke kolačića"
• "Vaši izbori privatnosti"

Izbjegavajte nejasan ili izbjegavajući jezik poput "Cijenimo vašu privatnost" — to korisniku ne govori ništa što bi mogao poduzeti.

Opis svrhe

U jednoj do tri rečenice objasnite koje kolačiće koristite i zašto. Budite konkretni:

"Koristimo nužne kolačiće kako bi ova stranica funkcionirala. Također bismo željeli koristiti analitičke kolačiće za razumijevanje kako koristite našu stranicu te marketinške kolačiće za prikazivanje relevantnog sadržaja. Možete prihvatiti sve, odbiti sve ili upravljati svojim postavkama."

Ovo je sažeto, konkretno i djelotvorno. Usporedite to s nažalost čestim primjerom:

"Ova web-stranica koristi kolačiće kako bismo vam osigurali najbolje iskustvo. Nastavkom korištenja ove stranice slažete se s našom uporabom kolačića."

Drugi primjer nije usklađen: podrazumijeva privolu putem nastavka pregledavanja (nije valjano prema GDPR-u), ne navodi svrhe i ne nudi izbor.

Oznake gumba

Oznake gumba trebaju biti nedvosmislene:

• "Prihvati sve" i "Odbij sve" — jasan, paralelan jezik
• "Upravljaj postavkama" ili "Prilagodi" — za mogućnost postavki
• Izbjegavajte: "U redu", "Shvaćam", "Nastavi", "Razumijem" — ovo je dvosmisleno i ne predstavlja specifičnu privolu

Dizajn prilagođen mobilnim uređajima

Više od 60% web-prometa dolazi s mobilnih uređaja. Vaš banner za kolačiće bit će prikazan na zaslonima širine već i 320 piksela. Ako dizajnirate prvo za stolna računala pa prilagođavate za mobilne uređaje, gotovo sigurno ćete završiti s prenatrpanim, neupotrebljivim mobilnim iskustvom.

Razmatranja za mobilni dizajn:

• Slažite gumbe okomito. Vodoravni redovi gumba koji funkcioniraju na stolnim računalima postaju nečitljivi na mobilnim uređajima. Slažite gumbe za prihvaćanje, odbijanje i postavke okomito, uz raspored pune širine.
• Ciljevi dodira. Gumbi moraju biti najmanje 44x44 piksela (WCAG 2.5.5, razina AAA) ili minimalno 24x24 piksela (WCAG 2.5.8, razina AA). Na mobilnim uređajima veće je uvijek bolje — ciljajte na 48 piksela ili više visine.
• Pokrivenost zaslona. Na mobilnim uređajima banner za kolačiće može lako prekriti 60-80% prozora za prikaz. To je prihvatljivo za početni upit, ali banner ne smije učiniti stranicu potpuno neupotrebljivom. Ako koristite modalni prekrivač, osigurajte da korisnici i dalje mogu prepoznati da su na pravoj stranici.
• Veličina teksta. Nikada ne idite ispod 14 piksela za tekst tijela ili 12 piksela za sekundarni tekst na mobilnim uređajima. Korisnici ne bi trebali povećavati zumiranje da bi pročitali vaš banner.
• Ponašanje pomicanja. Ako sadržaj vašeg bannera premašuje visinu prozora za prikaz na mobilnim uređajima (osobito ploča s postavkama), mora biti moguće pomicati ga unutar bannera. Ne dopustite da se sadržaj bannera proteže izvan zaslona bez načina da se dođe do gumba za prihvaćanje/odbijanje.

UX prekidača kategorija

Ploča s postavkama — drugi sloj slojevitog bannera — mjesto je gdje korisnici donose granularne izbore. Standardni obrazac koristi prekidače kategorija: jedan prekidač po kategoriji kolačića (nužni, analitika, marketing, postavke), svaki s oznakom i opisom.

Smjernice za dizajn prekidača:

• Vizualna stanja moraju biti nedvosmislena. Uključeno (privola dana) i isključeno (privola uskraćena) moraju biti jasno razaznatljivi bojom, položajem i idealno oznakom ("Uključeno" / "Isključeno" ili kvačica / X). Nemojte se oslanjati samo na boju — to zakazuje za korisnike koji ne razlikuju boje.
• Nužni kolačići trebaju biti uključeni i onemogućeni. Kategorija "Strogo nužni" treba biti uključena, a prekidač vizualno onemogućen (zasivljen ili s ikonom lokota), uz napomenu koja objašnjava da se ti kolačići ne mogu isključiti jer su potrebni za funkcioniranje stranice.
• Zadano stanje za neobvezne kategorije mora biti isključeno. Unaprijed označeni prekidači predstavljaju unaprijed odabranu privolu, što je izričito zabranjeno presudom Suda EU-a u predmetu Planet49.
• Opisi kategorija trebaju biti čitljivi ljudima. "Analitički kolačići" je oznaka. "Pomozite nam razumjeti kako posjetitelji komuniciraju s našom web-stranicom prikupljanjem anonimnih podataka o korištenju" je opis. Pružite oboje.
• Proširivi popisi kolačića. Pod svakom kategorijom osigurajte proširivi odjeljak koji navodi pojedinačne kolačiće: naziv, pružatelja, svrhu i trajanje. Ovu razinu transparentnosti sve više očekuju tijela za zaštitu podataka.

Dizajn ploče postavki/preferencija

Ploča s postavkama ključna je komponenta. Kada korisnik klikne "Upravljaj postavkama", aktivno se bavi svojim izborima privatnosti — to je korisnik prema kojem želite postupati s najviše poštovanja.

• Jasno zaglavlje. "Postavke kolačića" ili "Upravljajte svojom privatnošću" — neka bude očito čemu ova ploča služi.
• Gumb za spremanje. Istaknut gumb "Spremi postavke" koji potvrđuje granularne izbore korisnika. Ovaj gumb mora biti lako dostupan bez pretjeranog pomicanja.
• Prihvati sve i Odbij sve trebaju ostati dostupni. Čak i na ploči s postavkama, osigurajte prečace za prihvaćanje ili odbijanje svega. Neki korisnici otvaraju ploču iz znatiželje, ali i dalje žele brzu radnju.
• Ponašanje pri zatvaranju. Ako korisnik zatvori ploču s postavkama bez spremanja, tretirajte to kao da nije dana privola — nemojte postavljati neobvezne kolačiće. Nemojte zarobiti korisnike u ploči.

Prilagodba brendu uz očuvanje usklađenosti

Vaš banner za kolačiće treba djelovati kao dio vaše web-stranice, a ne kao upad treće strane. Većina platformi za upravljanje privolama omogućuje prilagodbu boja, fontova, položaja logotipa i teksta. Iskoristite to za usklađivanje bannera s identitetom vašeg brenda.

Međutim, prilagodba brendu ne smije narušiti usklađenost:

• Možete koristiti boje svog brenda, ali gumbi i dalje moraju imati jednaku vizualnu težinu.
• Možete koristiti font svog brenda, ali tekst i dalje mora biti čitljiv u korištenim veličinama.
• Možete dodati svoj logotip, ali on ne smije gurnuti ključni sadržaj (opis svrhe, gumbe) ispod vidljivog dijela ekrana.
• Možete prilagoditi tekst, ali on i dalje mora biti konkretan, točan i potpun.

Zahtjevi pristupačnosti za bannere kolačića

Banner za kolačiće koji nije pristupačan nije usklađen — kako prema zakonu o privatnosti (korisnik ne bi mogao dati informiranu privolu ako ne može percipirati ili upravljati bannerom), tako i prema zakonu o pristupačnosti (Europski akt o pristupačnosti i nacionalni zakoni o zabrani diskriminacije osoba s invaliditetom).

Zahtjevi WCAG AA

• Navigacija tipkovnicom. Svaki interaktivni element — gumbi, prekidači, poveznice, ikone za zatvaranje — mora biti dostupan i njime se mora moći upravljati putem tipkovnice. Redoslijed tabulatora mora biti logičan (obično: tekst svrhe, zatim odbijanje, zatim prihvaćanje, zatim upravljanje postavkama).
• Upravljanje fokusom. Kada se banner pojavi, fokus se treba pomaknuti na njega (ili treba biti najavljen). Kada se banner zatvori, fokus se treba vratiti na glavni sadržaj. Pokazatelji fokusa moraju biti vidljivi.
• Podrška za čitače zaslona. Banner mora koristiti odgovarajuće ARIA uloge i oznake. Koristite role="dialog" i aria-label="Cookie consent" za spremnik bannera. Gumbi moraju imati pristupačne nazive. Stanja prekidača moraju biti najavljena (aria-checked).
• Kontrast boja. Sav tekst i interaktivni elementi moraju ispunjavati omjere kontrasta WCAG 2.1 AA (4,5:1 za normalan tekst, 3:1 za velik tekst i UI komponente).
• Bez zamki tipkovnice. Korisnici moraju moći navigirati izvan bannera. Iako modalni prekrivač može ograničiti fokus na banner (zarobljavanje fokusa za modalne prozore prihvaćen je obrazac), uvijek mora postojati način za zatvaranje bannera i dolazak do sadržaja stranice.
• Kretanje. Ako banner koristi animacije (uklizavanje, stapanje), poštujte medijski upit prefers-reduced-motion i osigurajte alternativu sa smanjenim kretanjem ili bez kretanja.

Testiranje pristupačnosti vašeg bannera

1. Navigirajte cijeli banner koristeći samo tipkovnicu (Tab, Enter, Space, Escape).
2. Testirajte s čitačem zaslona (VoiceOver na macOS-u, NVDA na Windowsu).
3. Provjerite kontrast boja alatom poput WebAIM Contrast Checkera.
4. Testirajte pri zumiranju od 200% — banner treba ostati upotrebljiv.
5. Testirajte na mobilnom uređaju s uključenim VoiceOverom ili TalkBackom.

Testiranje i iteracija

Banner za kolačiće nije element koji se postavi i zaboravi. Ponašanje korisnika, propisi i uporaba kolačića na vašoj stranici mijenjaju se tijekom vremena. Planirajte kontinuirano testiranje:

• Stope privole. Pratite koji postotak korisnika prihvaća, odbija ili prilagođava. Ako je vaša stopa odbijanja sumnjivo niska (ispod 10%), vaš banner možda koristi tamne obrasce — bilo namjerno ili ne.
• Stope interakcije. Pratite koliko korisnika komunicira s pločom postavki. Niska angažiranost može ukazivati na to da mogućnost "Upravljaj postavkama" nije dovoljno vidljiva.
• A/B testiranje. Testirajte različit tekst, oznake gumba i rasporede. Cilj nije maksimizirati stope privole — cilj je maksimizirati stope informirane privole. Banner s kojim više korisnika komunicira bolji je banner.
• Regulatorna ažuriranja. Pratite smjernice svojih relevantnih tijela za zaštitu podataka. Provedbena tumačenja se razvijaju, a vaš banner treba se razvijati s njima.
• Revizije kolačića. Redovito skenirajte svoju stranicu za nove kolačiće. Ako dodate novi analitički alat ili marketinški piksel, kategorije vašeg bannera moraju se ažurirati kako bi ga odražavale.

Passiro pruža automatizirano skeniranje kolačića i analitiku stopa privole kako bi vam pomogao održati vaš banner točnim i učinkovitim. Saznajte više o Passirovom upravljanju privolama.