Najboljše prakse oblikovanja piškotnih pasic

Piškotna pasica je ena prvih stvari, ki jih obiskovalec opazi. Oblikuje njegovo dojemanje vaše znamke, zaupanje v vaše podjetje in — kar je ključno — ali je njegova privolitev pravno veljavna. Dobro zasnovana pasica dosega skladnost brez trenja. Slabo zasnovana pa uporabnike bodisi odvrne bodisi ustvari privolitev, ki ne bo prestala regulativnega preverjanja.

Ta vodnik obravnava načela oblikovanja, vzorce uporabniške izkušnje in zahteve glede dostopnosti, ki ločujejo skladno, uporabniku prijazno piškotno pasico od pravne odgovornosti.

Prvi vtis šteje

Raziskave dosledno kažejo, da uporabniki o piškotnih pasicah odločajo v dveh do treh sekundah. Večina uporabnikov ne prebere celotnega besedila. Preletijo iskanje prepoznavnih vzorcev — gumbov, stikal, znanega jezika — in ravnajo po instinktu. To pomeni, da ima vizualno oblikovanje vaše pasice enako težo kot njena pravna vsebina.

Cilj je, da je pravilno dejanje očitno in razpoložljive izbire na prvi pogled jasne. Če mora uporabnik razmišljati, kaj naj stori, je vaše oblikovanje odpovedalo.

Ključna načela za prve vtise:

• Jasnost pred domiselnostjo. Piškotna pasica ni prostor za ustvarjalno pisanje besedil ali nekonvencionalne vmesnike. Uporabite znane vzorce, ki jih uporabniki prepoznajo.
• Vizualna hierarhija. Najpomembnejši elementi — opis namena in gumbi za ukrepanje — naj bodo najbolj izraziti. Sekundarni elementi (povezava do nastavitev, povezava do politike) so lahko manj izraziti, a morajo ostati vidni.
• Prazen prostor. Natrpana pasica deluje utesnjujoče. Elementom dajte prostor za dihanje. Odmiki in razmiki sporočajo profesionalnost in olajšajo preletavanje vsebine.

Hierarhija gumbov in vizualna teža

Tu večina piškotnih pasic ne izpolni skladnosti — in tu se izreka največ glob.

Smernice EDPB 05/2020 o privolitvi ter številni ukrepi izvrševanja s strani CNIL, italijanskega Garante in danske Datatilsynet so vzpostavili jasno načelo: možnost zavrnitve piškotkov mora biti predstavljena enako izrazito kot možnost njihove sprejetja.

Kaj to pomeni v praksi:

• Gumba za sprejem in zavrnitev morata biti enako velika. Gumb »Sprejmi vse«, širok 200 slikovnih pik, ob besedilni povezavi »Zavrni« ni enaka izrazitost. Oba morata biti prikazana kot gumba primerljivih dimenzij.
• Oba gumba morata imeti primerljivo vizualno težo. Če je vaš gumb za sprejem poln, visoko kontrasten gumb, mora biti tudi vaš gumb za zavrnitev poln gumb — ne obrobljen, prosojen ali le besedilni element. CNIL je leta 2022 podjetju Google izrekel globo 150 milijonov EUR deloma prav zato, ker je možnost zavrnitve zahtevala več truda kot sprejem.
• Barva ne sme manipulirati. Svetlo zelen gumb »Sprejmi« ob sivem gumbu »Zavrni« je temni vzorec. Za oba uporabite primarno barvo svoje znamke ali za oba uporabite nevtralne barve. Vizualni signal ne sme usmerjati uporabnika k eni izbiri.
• Vrstni red gumbov je manj pomemben, kot mislite. Ali je najprej sprejem ali zavrnitev, ni glavna skrb — vizualna teža je. Kljub temu lahko postavitev gumba za zavrnitev na levo (prvi v vrstnem redu branja) sporoča nevtralnost.

Priporočeni vzorec gumbov

Skladna in uporabniku prijazna pasica običajno uporablja tri dejanja:

1. Zavrni vse — poln gumb
2. Sprejmi vse — poln gumb enake velikosti in vizualne teže
3. Upravljaj nastavitve — sekundarni gumb ali povezava (lahko je manj izrazit, saj vodi do druge plasti)

Barva in kontrast

Izbira barv v piškotnih pasicah služi dvema namenoma: skladnosti znamke in berljivosti. Z vidika skladnosti so ključne zahteve:

• Kontrast besedila. Vse besedilo v pasici mora izpolnjevati zahteve glede kontrasta WCAG 2.1 AA: najmanjše razmerje kontrasta 4,5:1 za običajno besedilo in 3:1 za veliko besedilo. To velja za opis namena, oznake gumbov in povezave.
• Kontrast gumbov. Ozadja gumbov morajo imeti zadosten kontrast glede na ozadje pasice, besedilo gumbov pa mora imeti zadosten kontrast glede na ozadje gumba. Preverite obe plasti.
• Vidnost povezav. Povezave do vaše politike piškotkov in politike zasebnosti morajo biti vizualno razločljive od okoliškega besedila — običajno z barvo in podčrtanjem.
• Ozadje. Ozadje pasice mora zagotavljati zadosten kontrast glede na okolico. Če vaša pasica prekriva vsebino strani, poskrbite, da je prekrivni sloj dovolj neprosojen, da je besedilo pasice berljivo ne glede na spodnjo vsebino strani.

Pogost pristop je uporaba belega ali zelo svetlega ozadja za pasico, temnega besedila za berljivost in primarne barve vaše znamke za gumbe. To običajno ustvari močna razmerja kontrasta ter čist, profesionalen videz.

Besedila in mikrobesedila

Besedilo v vaši piškotni pasici mora biti pravno zadostno, hkrati pa mora biti berljivo za netehnično občinstvo. Uvodna izjava 39 GDPR izrecno zahteva, da so informacije o obdelavi podatkov podane v »jasnem in preprostem jeziku«.

Naslov

Naj bo preprost in neposreden. Učinkoviti primeri:

• »Uporabljamo piškotke«
• »Nastavitve piškotkov«
• »Vaše izbire glede zasebnosti«

Izogibajte se nejasnim ali izmikajočim se formulacijam, kot je »Cenimo vašo zasebnost« — to uporabniku ne pove ničesar uporabnega.

Opis namena

V enem do treh stavkih pojasnite, katere piškotke uporabljate in zakaj. Bodite natančni:

»Nujno potrebne piškotke uporabljamo, da to spletno mesto deluje. Radi bi uporabili tudi analitične piškotke za razumevanje, kako uporabljate naše spletno mesto, ter trženjske piškotke za prikaz ustrezne vsebine. Lahko sprejmete vse, zavrnete vse ali upravljate svoje nastavitve.«

To je jedrnato, natančno in izvedljivo. Primerjajte to z na žalost pogostim:

»To spletno mesto uporablja piškotke, da vam zagotovi najboljšo izkušnjo. Z nadaljnjo uporabo tega mesta soglašate z našo uporabo piškotkov.«

Drugi primer ni skladen: privolitev nakazuje z nadaljnjim brskanjem (kar po GDPR ni veljavno), ne navaja namenov in ne ponuja izbire.

Oznake gumbov

Oznake gumbov naj bodo nedvoumne:

• »Sprejmi vse« in »Zavrni vse« — jasen, vzporeden jezik
• »Upravljaj nastavitve« ali »Prilagodi« — za možnost nastavitev
• Izogibajte se: »V redu«, »Razumem«, »Nadaljuj«, »Se strinjam« — te so dvoumne in ne pomenijo specifične privolitve

Oblikovanje z mislijo najprej na mobilne naprave

Več kot 60 % spletnega prometa je mobilnega. Vaša piškotna pasica bo prikazana na zaslonih, širokih le 320 slikovnih pik. Če najprej oblikujete za namizje in nato prilagajate za mobilne naprave, boste skoraj zagotovo dobili utesnjeno, neuporabno mobilno izkušnjo.

Vidiki mobilnega oblikovanja:

• Gumbe zložite navpično. Vodoravne vrste gumbov, ki delujejo na namizju, postanejo na mobilnih napravah neberljive. Gumbe za sprejem, zavrnitev in nastavitve zložite navpično s postavitvijo po celotni širini.
• Tarče za dotik. Gumbi morajo meriti najmanj 44 × 44 slikovnih pik (WCAG 2.5.5, raven AAA) ali vsaj 24 × 24 slikovnih pik (WCAG 2.5.8, raven AA). Na mobilnih napravah je večje vedno bolje — ciljajte na 48 slikovnih pik ali več v višino.
• Pokritost zaslona. Na mobilnih napravah lahko piškotna pasica z lahkoto prekrije 60–80 % vidnega polja. To je sprejemljivo za začetni poziv, vendar pasica ne sme spletnega mesta narediti popolnoma neuporabnega. Če uporabljate modalno prekrivanje, poskrbite, da uporabniki še vedno lahko ugotovijo, da so na pravem mestu.
• Velikost besedila. Nikoli ne pojdite pod 14 slikovnih pik za osnovno besedilo ali 12 slikovnih pik za sekundarno besedilo na mobilnih napravah. Uporabniki ne bi smeli potrebovati povečave za branje vaše pasice.
• Vedenje pri drsenju. Če vsebina vaše pasice na mobilnih napravah presega višino vidnega polja (zlasti plošča z nastavitvami), mora biti znotraj pasice mogoče drsenje. Ne dovolite, da vsebina pasice sega prek zaslona brez možnosti dosega gumbov za sprejem/zavrnitev.

Uporabniška izkušnja stikal za kategorije

Plošča z nastavitvami — druga plast večplastne pasice — je mesto, kjer uporabniki opravijo natančne izbire. Standardni vzorec uporablja stikala za kategorije: eno stikalo na kategorijo piškotkov (nujno potrebni, analitični, trženjski, prednostni), vsako z oznako in opisom.

Smernice za oblikovanje stikal:

• Vizualna stanja morajo biti nedvoumna. Vklopljeno (privolitev dana) in izklopljeno (privolitev zadržana) morata biti jasno razločljiva z barvo, položajem in po možnosti oznako (»Vklop« / »Izklop« ali kljukica / X). Ne zanašajte se le na barvo — to odpove pri barvno slepih uporabnikih.
• Nujno potrebni piškotki naj bodo vklopljeni in onemogočeni. Kategorija »Nujno potrebni« naj bo vklopljena, s stikalom, ki je vizualno onemogočeno (posiveno ali z ikono ključavnice), z opombo, ki pojasnjuje, da teh piškotkov ni mogoče onemogočiti, ker so potrebni za delovanje spletnega mesta.
• Privzeto stanje za nebistvene kategorije mora biti izklopljeno. Vnaprej označena stikala pomenijo vnaprej izbrano privolitev, kar je izrecno prepovedano s sodbo Sodišča EU v zadevi Planet49.
• Opisi kategorij naj bodo razumljivi ljudem. »Analitični piškotki« je oznaka. »Pomagajo nam razumeti, kako obiskovalci uporabljajo naše spletno mesto, z zbiranjem anonimnih podatkov o uporabi« je opis. Zagotovite oboje.
• Razširljivi seznami piškotkov. Pod vsako kategorijo zagotovite razširljiv razdelek, ki našteva posamezne piškotke: ime, ponudnik, namen in trajanje. To raven preglednosti organi za varstvo podatkov vse bolj pričakujejo.

Oblikovanje plošče z nastavitvami/preferencami

Plošča z nastavitvami je ključni sestavni del. Ko uporabnik klikne »Upravljaj nastavitve«, se dejavno vključuje v svoje izbire glede zasebnosti — to je uporabnik, ki ga želite obravnavati z največ spoštovanja.

• Jasen naslov. »Nastavitve piškotkov« ali »Upravljajte svojo zasebnost« — naj bo očitno, čemu je namenjena ta plošča.
• Gumb za shranjevanje. Izrazit gumb »Shrani nastavitve«, ki potrdi uporabnikove natančne izbire. Ta gumb mora biti zlahka dosegljiv brez pretiranega drsenja.
• Gumba »Sprejmi vse« in »Zavrni vse« naj ostaneta na voljo. Tudi na plošči z nastavitvami zagotovite bližnjična gumba za sprejem ali zavrnitev vsega. Nekateri uporabniki odprejo ploščo iz radovednosti, a še vedno želijo hitro dejanje.
• Vedenje ob zapiranju. Če uporabnik zapre ploščo z nastavitvami brez shranjevanja, to obravnavajte kot dano nobeno privolitev — ne nastavljajte nebistvenih piškotkov. Ne ujemite uporabnikov v ploščo.

Prilagajanje znamki ob ohranjanju skladnosti

Vaša piškotna pasica naj deluje kot del vašega spletnega mesta, ne kot vsiljivec tretje osebe. Večina platform za upravljanje privolitev omogoča prilagajanje barv, pisav, postavitve logotipa in besedil. To izkoristite za uskladitev pasice z identiteto vaše znamke.

Vendar prilagajanje znamki ne sme ogroziti skladnosti:

• Uporabite lahko barve svoje znamke, a gumbi morajo še vedno imeti enako vizualno težo.
• Uporabite lahko pisavo svoje znamke, a besedilo mora ostati berljivo pri uporabljenih velikostih.
• Dodate lahko svoj logotip, a ta ne sme potisniti ključne vsebine (opis namena, gumbi) pod vidno polje.
• Prilagodite lahko besedilo, a ostati mora natančno, točno in popolno.

Zahteve glede dostopnosti za piškotne pasice

Piškotna pasica, ki ni dostopna, ni skladna — tako po zakonodaji o zasebnosti (uporabnik ne bi mogel dati informirane privolitve, če pasice ne bi mogel zaznati ali upravljati) kot po zakonodaji o dostopnosti (Evropski akt o dostopnosti in nacionalni zakoni o prepovedi diskriminacije invalidov).

Zahteve WCAG AA

• Krmarjenje s tipkovnico. Vsak interaktivni element — gumbi, stikala, povezave, ikone za zapiranje — mora biti dosegljiv in upravljiv prek tipkovnice. Vrstni red tabulatorja mora biti logičen (običajno: besedilo o namenu, nato zavrnitev, nato sprejem, nato upravljanje nastavitev).
• Upravljanje fokusa. Ko se pasica pojavi, naj se fokus premakne nanjo (ali naj bo napovedana). Ko je pasica zaprta, naj se fokus vrne na glavno vsebino. Kazalniki fokusa morajo biti vidni.
• Podpora bralnikom zaslona. Pasica mora uporabljati ustrezne vloge in oznake ARIA. Za vsebnik pasice uporabite role="dialog" in aria-label="Cookie consent". Gumbi morajo imeti dostopna imena. Stanja stikal morajo biti napovedana (aria-checked).
• Barvni kontrast. Vsi elementi besedila in interaktivni elementi morajo izpolnjevati razmerja kontrasta WCAG 2.1 AA (4,5:1 za običajno besedilo, 3:1 za veliko besedilo in komponente vmesnika).
• Brez pasti tipkovnice. Uporabniki morajo imeti možnost, da se od pasice pomaknejo drugam. Čeprav lahko modalno prekrivanje omeji fokus na pasico (ujemanje fokusa za modalna okna je sprejet vzorec), mora vedno obstajati način za zapiranje pasice in dostop do vsebine strani.
• Gibanje. Če pasica uporablja animacije (vdrsevanje, pojemanje), upoštevajte medijsko poizvedbo prefers-reduced-motion in zagotovite različico z zmanjšanim ali brez gibanja.

Preizkušanje dostopnosti vaše pasice

1. Po celotni pasici se pomaknite samo s tipkovnico (Tab, Enter, presledek, Escape).
2. Preizkusite z bralnikom zaslona (VoiceOver v macOS, NVDA v sistemu Windows).
3. Preverite barvni kontrast z orodjem, kot je WebAIM Contrast Checker.
4. Preizkusite pri 200-odstotni povečavi — pasica mora ostati uporabna.
5. Preizkusite na mobilni napravi z omogočenim VoiceOver ali TalkBack.

Preizkušanje in nadgrajevanje

Piškotna pasica ni element, ki bi ga nastavili in pozabili. Vedenje uporabnikov, predpisi in uporaba piškotkov na vašem mestu se sčasoma spreminjajo. Načrtujte nenehno preizkušanje:

• Stopnje privolitve. Spremljajte, kolikšen odstotek uporabnikov sprejme, zavrne ali prilagodi. Če je vaša stopnja zavrnitve sumljivo nizka (pod 10 %), morda vaša pasica uporablja temne vzorce — namerno ali ne.
• Stopnje interakcije. Spremljajte, koliko uporabnikov se vključi v ploščo z nastavitvami. Nizka vključenost lahko kaže, da možnost »Upravljaj nastavitve« ni dovolj vidna.
• A/B-preizkušanje. Preizkusite različna besedila, oznake gumbov in postavitve. Cilj ni maksimirati stopnje privolitve — cilj je maksimirati stopnje informirane privolitve. Pasica, s katero se vključuje več uporabnikov, je boljša pasica.
• Regulativne posodobitve. Spremljajte smernice svojih pristojnih organov za varstvo podatkov. Razlage izvrševanja se razvijajo in vaša pasica naj se razvija skupaj z njimi.
• Pregledi piškotkov. Redno pregledujte svoje spletno mesto glede novih piškotkov. Če dodate novo analitično orodje ali trženjski piksel, morate posodobiti kategorije pasice, da to odražajo.

Passiro zagotavlja samodejno pregledovanje piškotkov in analitiko stopenj privolitve, da vam pomaga ohranjati pasico natančno in učinkovito. Več o upravljanju privolitev s platformo Passiro.