Küpsisebänneri disaini parimad praktikad

Teie küpsisebänner on üks esimesi asju, mida külastaja näeb. See kujundab tema arvamust teie brändist, usaldust teie ettevõtte vastu ja — mis kõige olulisem — seda, kas antud nõusolek on juriidiliselt kehtiv. Hästi kujundatud bänner tagab vastavuse ilma hõõrdumiseta. Halvasti kujundatud bänner kas peletab kasutajad eemale või toodab nõusolekut, mis ei pea regulatiivsele kontrollile vastu.

See juhend käsitleb disainiprintsiipe, UX-mustreid ja ligipääsetavusnõudeid, mis eristavad nõuetele vastavat ja kasutajasõbralikku küpsisebännerit vastutuse allikast.

Esmamulje on oluline

Uuringud näitavad järjekindlalt, et kasutajad teevad küpsisebännerite osas otsuse kahe kuni kolme sekundi jooksul. Enamik kasutajaid ei loe täisteksti. Nad skaneerivad äratuntavaid mustreid — nuppe, lüliteid, tuttavat sõnastust — ja tegutsevad instinktiivselt. See tähendab, et teie bänneri visuaalne disain kaalub sama palju kui selle juriidiline sisu.

Eesmärk on muuta õige tegevus ilmselgeks ja saadaolevad valikud ühe pilguga selgeks. Kui kasutaja peab mõtlema, mida teha, siis teie disain on ebaõnnestunud.

Esmamulje peamised põhimõtted:

• Selgus, mitte nutikus. Küpsisebänner ei ole koht loominguliseks tekstikirjutuseks ega ebatavaliseks kasutajaliideseks. Kasutage tuttavaid mustreid, mida kasutajad ära tunnevad.
• Visuaalne hierarhia. Kõige olulisemad elemendid — eesmärgi kirjeldus ja tegevusnupud — peaksid olema kõige silmatorkavamad. Teisesed elemendid (seadete link, poliitika link) võivad olla vähem esile tõstetud, kuid peavad siiski nähtaval olema.
• Tühik. Kokku surutud bänner tundub üle jõu käiv. Andke elementidele hingamisruumi. Polsterdus ja vahed annavad märku professionaalsusest ning muudavad sisu hõlpsamini skaneeritavaks.

Nuppude hierarhia ja visuaalne kaal

Just siin ebaõnnestub enamik küpsisebännereid vastavuses — ja siin väljastatakse enamik trahve.

EDPB juhised 05/2020 nõusoleku kohta ning mitmed CNIL-i, Itaalia Garante ja Taani Datatilsynet-i jõustamismeetmed on kehtestanud selge põhimõtte: küpsiste tagasilükkamise võimalus peab olema esitatud sama silmatorkavalt kui nende vastuvõtmise võimalus.

Mida see praktikas tähendab:

• Vastuvõtu- ja tagasilükkamisnupud peavad olema sama suured. „Nõustu kõigega" nupp, mis on 200 pikslit lai, kõrvuti „Lükka tagasi" tekstilingiga ei ole võrdne silmatorkavus. Mõlemad tuleb kuvada võrreldavate mõõtmetega nuppudena.
• Mõlemad nupud peavad kasutama võrreldavat visuaalset kaalu. Kui teie vastuvõtunupp on täidetud, kõrge kontrastiga nupp, siis peab ka teie tagasilükkamisnupp olema täidetud nupp — mitte piirjoonega, läbipaistev ega ainult tekstiline element. CNIL trahvis Google'it 2022. aastal 150 miljoni euroga muu hulgas seetõttu, et tagasilükkamise võimalus nõudis rohkem pingutust kui nõustumine.
• Värv ei tohi manipuleerida. Ergav roheline „Nõustu" nupp halli „Lükka tagasi" nupu kõrval on tume muster. Kasutage mõlema jaoks oma brändi põhivärvi või mõlema jaoks neutraalseid värve. Visuaalne signaal ei tohi suunata kasutajat ühe valiku poole.
• Nuppude järjekord on vähem oluline, kui arvate. See, kas nõustumine või tagasilükkamine on esimesena, ei ole peamine mure — visuaalne kaal on. Sellele vaatamata võib tagasilükkamisnupu paigutamine vasakule (lugemisjärjestuses esimesena) anda märku neutraalsusest.

Soovitatav nupumuster

Nõuetele vastav ja kasutajasõbralik bänner kasutab tavaliselt kolme tegevust:

1. Lükka kõik tagasi — täidetud nupp
2. Nõustu kõigega — võrdse suuruse ja visuaalse kaaluga täidetud nupp
3. Halda eelistusi — teisene nupp või link (võib olla vähem esile tõstetud, kuna viib teisele kihile)

Värv ja kontrast

Värvivalikud küpsisebännerites teenivad kahte eesmärki: brändi järjepidevust ja loetavust. Vastavuse seisukohalt on peamised nõuded järgmised:

• Teksti kontrast. Kogu bänneri tekst peab vastama WCAG 2.1 AA kontrastinõuetele: minimaalne kontrastisuhe 4,5:1 tavalise teksti ja 3:1 suure teksti puhul. See kehtib eesmärgi kirjelduse, nupusiltide ja linkide kohta.
• Nupu kontrast. Nupu taust peab olema piisava kontrastiga bänneri tausta suhtes ning nupu tekst peab olema piisava kontrastiga nupu tausta suhtes. Kontrollige mõlemad kihid üle.
• Linkide nähtavus. Lingid teie küpsisepoliitikale ja privaatsuspoliitikale peavad olema ümbritsevast tekstist visuaalselt eristatavad — tavaliselt värvi ja allajoonimise abil.
• Taust. Bänneri taust peab tagama piisava kontrasti oma ümbruse suhtes. Kui teie bänner katab lehe sisu, veenduge, et kate on piisavalt läbipaistmatu, et bänneri tekst oleks loetav sõltumata all olevast lehe sisust.

Levinud lähenemine on kasutada bänneri jaoks valget või väga heledat tausta, loetavuse tagamiseks tumedat teksti ning nuppude jaoks oma brändi põhivärvi. See annab tavaliselt tugevad kontrastisuhted ning puhta ja professionaalse välimuse.

Tekst ja mikrotekst

Teie küpsisebänneri tekst peab olema juriidiliselt piisav, kuid samas ka mittetehnilisele publikule loetav. GDPR-i põhjenduspunkt 39 nõuab sõnaselgelt, et andmetöötluse teave esitatakse „selges ja lihtsas keeles".

Pealkiri

Hoidke see lihtsa ja otsekohesena. Tõhusad näited:

• „Me kasutame küpsiseid"
• „Küpsiste eelistused"
• „Teie privaatsusvalikud"

Vältige ebamäärast või põiklevat sõnastust nagu „Me väärtustame teie privaatsust" — see ei ütle kasutajale midagi tegevusele suunavat.

Eesmärgi kirjeldus

Selgitage ühe kuni kolme lausega, milliseid küpsiseid te kasutate ja miks. Olge konkreetne:

„Me kasutame olulisi küpsiseid, et see sait toimiks. Sooviksime kasutada ka analüütikaküpsiseid, et mõista, kuidas te meie saiti kasutate, ning turundusküpsiseid, et näidata teile asjakohast sisu. Võite nõustuda kõigega, kõik tagasi lükata või hallata oma eelistusi."

See on kokkuvõtlik, konkreetne ja tegevusele suunav. Võrrelge seda kahjuks levinud versiooniga:

„See veebisait kasutab küpsiseid, et tagada teile parim kogemus. Selle saidi kasutamist jätkates nõustute küpsiste kasutamisega."

Teine näide ei vasta nõuetele: see eeldab nõusolekut sirvimise jätkamise kaudu (GDPR-i alusel kehtetu), ei täpsusta eesmärke ega paku valikut.

Nupusildid

Nupusildid peaksid olema ühemõttelised:

• „Nõustu kõigega" ja „Lükka kõik tagasi" — selge, paralleelne sõnastus
• „Halda eelistusi" või „Kohanda" — seadete valiku jaoks
• Vältige: „OK", „Selge", „Jätka", „Ma saan aru" — need on mitmetähenduslikud ega kujuta endast konkreetset nõusolekut

Mobiilikeskne disain

Üle 60% veebiliiklusest on mobiilne. Teie küpsisebännerit nähakse ekraanidel, mis on kõigest 320 pikslit laiad. Kui kujundate esmalt lauaarvutile ja kohandate seejärel mobiilile, jõuate peaaegu kindlasti kokku surutud ja kasutuskõlbmatu mobiilikogemuseni.

Mobiilidisaini kaalutlused:

• Paigutage nupud vertikaalselt. Horisontaalsed nupuread, mis töötavad lauaarvutil, muutuvad mobiilis loetamatuks. Paigutage nõustu-, tagasilükkamis- ja seadetenupud vertikaalselt, kasutades kogu laiust.
• Puutepunktid. Nupud peavad olema vähemalt 44x44 pikslit (WCAG 2.5.5, tase AAA) või minimaalselt 24x24 pikslit (WCAG 2.5.8, tase AA). Mobiilis on suurem alati parem — püüelge vähemalt 48 piksli kõrgusele.
• Ekraani kate. Mobiilis võib küpsisebänner hõlpsalt katta 60–80% vaateaknast. See on esialgse teate puhul vastuvõetav, kuid bänner ei tohi muuta saiti täielikult kasutuskõlbmatuks. Kui kasutate modaalset katet, veenduge, et kasutajad saavad siiski tuvastada, et nad on õigel saidil.
• Teksti suurus. Ärge kunagi minge mobiilis põhiteksti puhul alla 14 piksli või teisese teksti puhul alla 12 piksli. Kasutajad ei tohiks pidada teie bänneri lugemiseks suumima.
• Kerimiskäitumine. Kui teie bänneri sisu ületab mobiilis vaateakna kõrguse (eriti eelistuste paneel), peab see olema bänneri sees keritav. Ärge laske bänneri sisul ulatuda ekraanist väljapoole nii, et nõustumis-/tagasilükkamisnuppudeni ei saa jõuda.

Kategoorialülitite UX

Eelistuste paneel — kihilise bänneri teine kiht — on koht, kus kasutajad teevad detailseid valikuid. Standardmuster kasutab kategoorialüliteid: üks lüliti küpsisekategooria kohta (vajalikud, analüütika, turundus, eelistused), igaüks sildi ja kirjeldusega.

Disainisuunised lülitite jaoks:

• Visuaalsed olekud peavad olema ühemõttelised. Sees (nõusolek antud) ja väljas (nõusolek andmata) peavad olema selgelt eristatavad värvi, positsiooni ja ideaalis sildi abil („Sees" / „Väljas" või linnuke / X). Ärge tuginege ainult värvile — see ebaõnnestub värvipimedate kasutajate puhul.
• Vajalikud küpsised peaksid olema sees ja keelatud. Kategooria „Rangelt vajalikud" peaks olema sisse lülitatud koos visuaalselt keelatud lülitiga (hallitud või lukuikooniga), koos märkusega, mis selgitab, et neid küpsiseid ei saa välja lülitada, sest need on saidi toimimiseks vajalikud.
• Mitteoluliste kategooriate vaikeolek peab olema väljas. Eelmärgistatud lülitid kujutavad endast eelvalitud nõusolekut, mis on Euroopa Kohtu Planet49 otsusega selgesõnaliselt keelatud.
• Kategooriate kirjeldused peaksid olema inimloetavad. „Analüütikaküpsised" on silt. „Aitab meil mõista, kuidas külastajad meie veebisaidiga suhtlevad, kogudes anonüümseid kasutusandmeid" on kirjeldus. Pakkuge mõlemat.
• Laiendatavad küpsiste loendid. Iga kategooria all pakkuge laiendatavat sektsiooni, mis loetleb üksikud küpsised: nimi, pakkuja, eesmärk ja kestus. Andmekaitseasutused ootavad seda läbipaistvuse taset üha enam.

Seadete/eelistuste paneeli disain

Eelistuste paneel on kriitiline komponent. Kui kasutaja klõpsab „Halda eelistusi", tegeleb ta aktiivselt oma privaatsusvalikutega — just seda kasutajat soovite kohelda kõige suurema austusega.

• Selge päis. „Küpsiste eelistused" või „Hallake oma privaatsust" — tehke selgeks, milleks see paneel on.
• Salvestusnupp. Silmatorkav „Salvesta eelistused" nupp, mis kinnitab kasutaja detailseid valikuid. See nupp peab olema hõlpsalt kättesaadav ilma liigse kerimiseta.
• „Nõustu kõigega" ja „Lükka kõik tagasi" peaksid jääma saadavaks. Isegi eelistuste paneelis pakkuge otseteenuppe kõigega nõustumiseks või kõige tagasilükkamiseks. Mõned kasutajad avavad paneeli uudishimust, kuid soovivad siiski kiiret tegevust.
• Sulgemiskäitumine. Kui kasutaja sulgeb eelistuste paneeli ilma salvestamata, käsitlege seda kui nõusoleku andmata jätmist — ärge seadke mitteolulisi küpsiseid. Ärge lõksustage kasutajaid paneeli.

Brändi kohandamine vastavust säilitades

Teie küpsisebänner peaks tunduma teie veebisaidi osana, mitte kolmanda osapoole sissetungina. Enamik nõusolekuhaldusplatvorme võimaldab kohandada värve, kirjatüüpe, logo paigutust ja teksti. Kasutage seda bänneri sobitamiseks oma brändi identiteediga.

Brändi kohandamine ei tohi aga vastavust kahjustada:

• Võite kasutada oma brändi värve, kuid nuppudel peab olema võrdne visuaalne kaal.
• Võite kasutada oma brändi kirjatüüpi, kuid tekst peab olema kasutatud suurustes loetav.
• Võite lisada oma logo, kuid see ei tohi lükata kriitilist sisu (eesmärgi kirjeldus, nupud) allapoole nähtavat ala.
• Võite kohandada teksti, kuid see peab siiski olema konkreetne, täpne ja täielik.

Ligipääsetavusnõuded küpsisebänneritele

Küpsisebänner, mis ei ole ligipääsetav, ei ole nõuetele vastav — nii privaatsusõiguse alusel (kasutaja ei saaks anda teadlikku nõusolekut, kui ta ei suudaks bännerit tajuda ega kasutada) kui ka ligipääsetavusõiguse alusel (Euroopa ligipääsetavuse akt ja riiklikud puudega isikute diskrimineerimise vastased seadused).

WCAG AA nõuded

• Klaviatuurinavigatsioon. Iga interaktiivne element — nupud, lülitid, lingid, sulgemisikoonid — peab olema klaviatuuriga kättesaadav ja kasutatav. Tabulaatori järjekord peab olema loogiline (tavaliselt: eesmärgi tekst, seejärel tagasilükkamine, seejärel nõustumine, seejärel eelistuste haldamine).
• Fookuse haldamine. Kui bänner ilmub, peaks fookus liikuma sellele (või see tuleks ette lugeda). Kui bänner suletakse, peaks fookus naasma põhisisule. Fookuse indikaatorid peavad olema nähtavad.
• Ekraanilugeja tugi. Bänner peab kasutama sobivaid ARIA rolle ja silte. Kasutage bänneri konteineri jaoks role="dialog" ja aria-label="Cookie consent". Nuppudel peavad olema ligipääsetavad nimed. Lülitite olekud tuleb ette lugeda (aria-checked).
• Värvikontrast. Kõik teksti- ja interaktiivsed elemendid peavad vastama WCAG 2.1 AA kontrastisuhetele (4,5:1 tavalise teksti puhul, 3:1 suure teksti ja kasutajaliidese komponentide puhul).
• Klaviatuurilõkse pole. Kasutajad peavad saama bännerilt eemale liikuda. Kuigi modaalne kate võib fookuse bänneriga piirata (fookuse lõksustamine modaalide puhul on aktsepteeritud muster), peab alati olema võimalus bänner sulgeda ja lehe sisuni jõuda.
• Liikumine. Kui bänner kasutab animatsioone (sisselibisemine, sulandumine), austage prefers-reduced-motion meediapäringut ja pakkuge vähendatud või ilma liikumiseta alternatiivi.

Bänneri ligipääsetavuse testimine

1. Navigeerige kogu bänneril ainult klaviatuuri abil (Tab, Enter, tühik, Escape).
2. Testige ekraanilugejaga (VoiceOver macOS-is, NVDA Windowsis).
3. Kontrollige värvikontrasti tööriistaga nagu WebAIM Contrast Checker.
4. Testige 200% suumiga — bänner peaks jääma kasutatavaks.
5. Testige mobiilis sisselülitatud VoiceOveri või TalkBackiga.

Testimine ja iteratsioon

Küpsisebänner ei ole seadista-ja-unusta element. Kasutajate käitumine, regulatsioonid ja teie saidi küpsisekasutus muutuvad kõik aja jooksul. Planeerige pidevat testimist:

• Nõusolekumäärad. Jälgige, kui suur protsent kasutajaid nõustub, lükkab tagasi või kohandab. Kui teie tagasilükkamise määr on kahtlaselt madal (alla 10%), võib teie bänner kasutada tumedaid mustreid — kas tahtlikult või mitte.
• Suhtlusmäärad. Jälgige, kui palju kasutajaid suhtleb eelistuste paneeliga. Madal kaasatus võib viidata sellele, et valik „Halda eelistusi" ei ole piisavalt nähtav.
• A/B testimine. Testige erinevat teksti, nupusilte ja paigutusi. Eesmärk ei ole maksimeerida nõusolekumäärasid — see on maksimeerida teadlike nõusolekute määrasid. Bänner, millega rohkem kasutajaid suhtleb, on parem bänner.
• Regulatiivsed uuendused. Jälgige oma asjakohaste andmekaitseasutuste juhiseid. Jõustamise tõlgendused arenevad ning teie bänner peaks nendega koos arenema.
• Küpsiseauditid. Skaneerige oma saiti regulaarselt uute küpsiste suhtes. Kui lisate uue analüütikatööriista või turunduspiksli, tuleb teie bänneri kategooriaid vastavalt uuendada.

Passiro pakub automaatset küpsiste skaneerimist ja nõusolekumäärade analüütikat, et aidata teil hoida oma bänner täpne ja tõhus. Lugege rohkem Passiro nõusolekuhalduse kohta.