Evästebannerin suunnittelun parhaat käytännöt

Evästebanneri on yksi ensimmäisistä asioista, jonka kävijä näkee. Se muokkaa mielikuvaa brändistäsi, luottamusta yritykseesi ja – mikä olennaisinta – sitä, onko annettu suostumus oikeudellisesti pätevä. Hyvin suunniteltu banneri saavuttaa vaatimustenmukaisuuden ilman kitkaa. Huonosti suunniteltu banneri joko karkottaa käyttäjät tai tuottaa suostumuksen, joka ei kestä sääntelyviranomaisten tarkastelua.

Tässä oppaassa käydään läpi suunnitteluperiaatteet, käyttökokemuskuviot ja saavutettavuusvaatimukset, jotka erottavat vaatimustenmukaisen, käyttäjäystävällisen evästebannerin vastuuriskistä.

Ensivaikutelmalla on merkitystä

Tutkimukset osoittavat johdonmukaisesti, että käyttäjät tekevät evästebannereita koskevat päätöksensä kahdessa tai kolmessa sekunnissa. Useimmat käyttäjät eivät lue koko tekstiä. He silmäilevät tunnistettavia kuvioita – painikkeita, kytkimiä, tuttua kieltä – ja toimivat vaiston varassa. Tämä tarkoittaa, että bannerisi visuaalisella suunnittelulla on yhtä paljon painoarvoa kuin sen oikeudellisella sisällöllä.

Tavoitteena on tehdä oikeasta toiminnasta ilmeinen ja saatavilla olevista valinnoista selkeitä yhdellä silmäyksellä. Jos käyttäjän on mietittävä, mitä tehdä, suunnittelusi on epäonnistunut.

Ensivaikutelman keskeiset periaatteet:

• Selkeys nokkeluuden edelle. Evästebanneri ei ole paikka luovalle tekstinlaadinnalle tai epätavanomaisille käyttöliittymäratkaisuille. Käytä tuttuja kuvioita, jotka käyttäjät tunnistavat.
• Visuaalinen hierarkia. Tärkeimpien elementtien – käyttötarkoituksen kuvauksen ja toimintopainikkeiden – tulee olla näkyvimmät. Toissijaiset elementit (asetuslinkki, käytäntölinkki) voivat olla vähemmän näkyviä, mutta niiden on silti oltava havaittavissa.
• Tyhjä tila. Ahdas banneri tuntuu ylivoimaiselta. Anna elementeille tilaa hengittää. Täyte ja välistys viestivät ammattimaisuudesta ja tekevät sisällöstä helpommin silmäiltävää.

Painikehierarkia ja visuaalinen painoarvo

Tässä useimmat evästebannerit epäonnistuvat vaatimustenmukaisuudessa – ja tässä useimmat sakot langetetaan.

EDPB:n suostumusta koskevat ohjeet 05/2020 sekä lukuisat CNIL:n, Italian Garanten ja Tanskan Datatilsynetin täytäntöönpanotoimet ovat vahvistaneet selkeän periaatteen: evästeiden hylkäämisvaihtoehto on esitettävä yhtä näkyvästi kuin niiden hyväksymisvaihtoehto.

Mitä tämä tarkoittaa käytännössä:

• Hyväksy- ja hylkää-painikkeiden on oltava samankokoisia. 200 pikselin levyinen "Hyväksy kaikki" -painike "Hylkää"-tekstilinkin vieressä ei ole yhtä näkyvä. Molemmat on esitettävä kooltaan vertailukelpoisina painikkeina.
• Molempien painikkeiden on käytettävä vertailukelpoista visuaalista painoarvoa. Jos hyväksymispainikkeesi on täytetty, korkeakontrastinen painike, myös hylkäämispainikkeen on oltava täytetty painike – ei ääriviivoitettu, läpikuultava tai pelkkä tekstielementti. CNIL langetti Googlelle vuonna 2022 nimenomaan 150 miljoonan euron sakon osittain siksi, että hylkäämisvaihtoehto vaati enemmän vaivaa kuin hyväksyminen.
• Väri ei saa manipuloida. Kirkkaan vihreä "Hyväksy"-painike harmaan "Hylkää"-painikkeen vieressä on hämäävä suunnittelukuvio (dark pattern). Käytä brändisi pääväriä molemmissa tai neutraaleja värejä molemmissa. Visuaalinen viesti ei saa ohjata käyttäjää kohti tiettyä valintaa.
• Painikkeiden järjestys merkitsee vähemmän kuin luulet. Ensisijainen huolenaihe ei ole se, tuleeko hyväksy vai hylkää ensin – vaan visuaalinen painoarvo. Silti hylkäämispainikkeen sijoittaminen vasemmalle (ensimmäiseksi lukemisjärjestyksessä) voi viestiä neutraaliudesta.

Suositeltu painikekuvio

Vaatimustenmukainen ja käyttäjäystävällinen banneri käyttää tyypillisesti kolmea toimintoa:

1. Hylkää kaikki – täytetty painike
2. Hyväksy kaikki – samankokoinen ja yhtä painava täytetty painike
3. Hallitse asetuksia – toissijainen painike tai linkki (voi olla vähemmän näkyvä, sillä se johtaa toiseen kerrokseen)

Väri ja kontrasti

Evästebannerien väriratkaisuilla on kaksi tarkoitusta: brändin johdonmukaisuus ja luettavuus. Vaatimustenmukaisuuden näkökulmasta keskeiset vaatimukset ovat:

• Tekstin kontrasti. Kaiken bannerissa olevan tekstin on täytettävä WCAG 2.1 AA -kontrastivaatimukset: vähintään 4,5:1 kontrastisuhde tavalliselle tekstille ja 3:1 suurelle tekstille. Tämä koskee käyttötarkoituksen kuvausta, painikkeiden tekstejä ja linkkejä.
• Painikkeiden kontrasti. Painikkeiden taustan on erotuttava riittävästi bannerin taustasta, ja painikkeen tekstin on erotuttava riittävästi painikkeen taustasta. Tarkista molemmat kerrokset.
• Linkkien näkyvyys. Evästekäytäntöösi ja tietosuojaselosteeseen johtavien linkkien on erotuttava visuaalisesti ympäröivästä tekstistä – tyypillisesti värin ja alleviivauksen avulla.
• Tausta. Bannerin taustan on tarjottava riittävä kontrasti ympäristöönsä nähden. Jos banneri peittää sivun sisältöä, varmista, että peite on riittävän läpinäkymätön, jotta bannerin teksti on luettavissa taustalla olevasta sivun sisällöstä riippumatta.

Yleinen lähestymistapa on käyttää bannerissa valkoista tai hyvin vaaleaa taustaa, tummaa tekstiä luettavuuden vuoksi ja brändisi pääväriä painikkeissa. Tämä tuottaa tyypillisesti vahvat kontrastisuhteet sekä siistin, ammattimaisen ilmeen.

Teksti ja mikrotekstit

Evästebannerisi tekstin on oltava oikeudellisesti riittävä, mutta sen on myös oltava ei-teknisen yleisön luettavissa. GDPR:n johdanto-osan 39 kohta edellyttää nimenomaisesti, että tietojenkäsittelyä koskevat tiedot annetaan "selkeästi ja yksinkertaisesti".

Otsikko

Pidä se yksinkertaisena ja suorana. Tehokkaita esimerkkejä:

• "Käytämme evästeitä"
• "Evästeasetukset"
• "Yksityisyysvalintasi"

Vältä epämääräistä tai kiertelevää kieltä, kuten "Arvostamme yksityisyyttäsi" – tämä ei kerro käyttäjälle mitään toimintakelpoista.

Käyttötarkoituksen kuvaus

Selitä yhdestä kolmeen lauseessa, mitä evästeitä käytät ja miksi. Ole täsmällinen:

"Käytämme välttämättömiä evästeitä sivuston toiminnan varmistamiseksi. Haluaisimme myös käyttää analytiikkaevästeitä ymmärtääksemme, miten käytät sivustoamme, sekä markkinointievästeitä näyttääksemme sinulle relevanttia sisältöä. Voit hyväksyä kaikki, hylätä kaikki tai hallita asetuksiasi."

Tämä on ytimekäs, täsmällinen ja toimintakelpoinen. Vertaa sitä valitettavan yleiseen:

"Tämä verkkosivusto käyttää evästeitä varmistaakseen parhaan mahdollisen käyttökokemuksen. Jatkamalla sivuston käyttöä hyväksyt evästeiden käytön."

Toinen esimerkki ei ole vaatimustenmukainen: se olettaa suostumuksen selailun jatkamisen kautta (mikä ei ole pätevää GDPR:n mukaan), ei täsmennä käyttötarkoituksia eikä tarjoa valinnanvaraa.

Painikkeiden tekstit

Painikkeiden tekstien tulee olla yksiselitteisiä:

• "Hyväksy kaikki" ja "Hylkää kaikki" – selkeää, rinnakkaista kieltä
• "Hallitse asetuksia" tai "Mukauta" – asetusvaihtoehdolle
• Vältä: "OK", "Selvä", "Jatka", "Ymmärrän" – nämä ovat epäselviä eivätkä muodosta täsmällistä suostumusta

Mobiililähtöinen suunnittelu

Yli 60 % verkkoliikenteestä on mobiililiikennettä. Evästebanneriasi katsotaan näytöillä, jotka voivat olla vain 320 pikseliä leveitä. Jos suunnittelet ensin työpöytäversion ja sovitat sen mobiiliin, päädyt lähes varmasti ahtaaseen, käyttökelvottomaan mobiilikokemukseen.

Mobiilisuunnittelun huomioitavat seikat:

• Aseta painikkeet pystysuoraan. Vaakasuorat painikerivit, jotka toimivat työpöydällä, muuttuvat luettavuudeltaan heikoiksi mobiilissa. Aseta hyväksy-, hylkää- ja asetuspainikkeet pystysuoraan koko leveydeltä.
• Kosketuskohteet. Painikkeiden on oltava vähintään 44x44 pikseliä (WCAG 2.5.5, taso AAA) tai vähintään 24x24 pikseliä (WCAG 2.5.8, taso AA). Mobiilissa suurempi on aina parempi – tavoittele vähintään 48 pikselin korkeutta.
• Näytön peitto. Mobiilissa evästebanneri voi helposti peittää 60–80 % näkymästä. Tämä on hyväksyttävää alkukehotteelle, mutta banneri ei saa tehdä sivustosta täysin käyttökelvotonta. Jos käytät modaalista peitettä, varmista, että käyttäjät voivat silti tunnistaa olevansa oikealla sivustolla.
• Tekstin koko. Älä koskaan mene alle 14 pikselin leipätekstissä tai alle 12 pikselin toissijaisessa tekstissä mobiilissa. Käyttäjien ei pitäisi joutua zoomaamaan lukeakseen banneriasi.
• Vieritystoiminta. Jos bannerin sisältö ylittää näkymän korkeuden mobiilissa (erityisesti asetuspaneeli), sen on oltava vieritettävissä bannerin sisällä. Älä anna bannerin sisällön ulottua näytön ulkopuolelle ilman mahdollisuutta tavoittaa hyväksy-/hylkää-painikkeita.

Kategoriakytkimien käyttökokemus

Asetuspaneeli – kerroksellisen bannerin toinen kerros – on paikka, jossa käyttäjät tekevät tarkempia valintoja. Vakiokuvio käyttää kategoriakytkimiä: yksi kytkin evästekategoriaa kohti (välttämättömät, analytiikka, markkinointi, asetukset), kukin nimikkeellä ja kuvauksella varustettuna.

Kytkimien suunnitteluohjeet:

• Visuaalisten tilojen on oltava yksiselitteisiä. Päällä (suostumus annettu) ja pois (suostumus evätty) on erotuttava selkeästi värin, sijainnin ja mieluiten nimikkeen ("Päällä" / "Pois" tai valintamerkki / X) avulla. Älä luota pelkkään väriin – tämä epäonnistuu värisokeilla käyttäjillä.
• Välttämättömien evästeiden tulee olla päällä ja poissa käytöstä. "Ehdottoman välttämättömät" -kategorian tulisi olla kytkettynä päälle siten, että kytkin on visuaalisesti poissa käytöstä (harmaana tai lukkokuvakkeella), sekä huomautuksella, jossa selitetään, ettei näitä evästeitä voi poistaa käytöstä, koska ne ovat välttämättömiä sivuston toiminnalle.
• Ei-välttämättömien kategorioiden oletustilan on oltava pois. Valmiiksi rastitetut kytkimet muodostavat ennalta valitun suostumuksen, joka on nimenomaisesti kielletty EU-tuomioistuimen Planet49-ratkaisussa.
• Kategorioiden kuvausten tulee olla ihmisen luettavissa. "Analytiikkaevästeet" on nimike. "Auta meitä ymmärtämään, miten kävijät ovat vuorovaikutuksessa verkkosivustomme kanssa keräämällä anonyymiä käyttödataa" on kuvaus. Tarjoa molemmat.
• Laajennettavat evästeluettelot. Tarjoa kunkin kategorian alla laajennettava osio, joka luettelee yksittäiset evästeet: nimi, tarjoaja, käyttötarkoitus ja kesto. Tätä läpinäkyvyyden tasoa tietosuojaviranomaiset odottavat yhä enemmän.

Asetus-/valintapaneelin suunnittelu

Asetuspaneeli on kriittinen osa. Kun käyttäjä napsauttaa "Hallitse asetuksia", hän on aktiivisesti tekemisissä yksityisyysvalintojensa kanssa – tämä on käyttäjä, jota haluat kohdella mahdollisimman kunnioittavasti.

• Selkeä otsikko. "Evästeasetukset" tai "Hallitse yksityisyyttäsi" – tee ilmeiseksi, mitä varten paneeli on.
• Tallennuspainike. Näkyvä "Tallenna asetukset" -painike, joka vahvistaa käyttäjän tekemät tarkat valinnat. Tämän painikkeen on oltava helposti tavoitettavissa ilman liiallista vieritystä.
• Hyväksy kaikki- ja Hylkää kaikki -vaihtoehtojen tulee pysyä saatavilla. Tarjoa myös asetuspaneelissa pikapainikkeet kaikkien hyväksymiseen tai hylkäämiseen. Jotkut käyttäjät avaavat paneelin uteliaisuuttaan, mutta haluavat silti nopean toiminnon.
• Sulkemiskäyttäytyminen. Jos käyttäjä sulkee asetuspaneelin tallentamatta, käsittele tämä suostumuksen puuttumisena – älä aseta ei-välttämättömiä evästeitä. Älä lukitse käyttäjiä paneeliin.

Brändin mukauttaminen vaatimustenmukaisuutta säilyttäen

Evästebannerisi tulisi tuntua osalta verkkosivustoasi, ei kolmannen osapuolen tunkeutumiselta. Useimmat suostumuksenhallinta-alustat mahdollistavat värien, fonttien, logon sijainnin ja tekstin mukauttamisen. Käytä tätä bannerin yhdenmukaistamiseen brändi-identiteettisi kanssa.

Brändin mukauttaminen ei kuitenkaan saa vaarantaa vaatimustenmukaisuutta:

• Voit käyttää brändivärejäsi, mutta painikkeilla on silti oltava yhtäläinen visuaalinen painoarvo.
• Voit käyttää brändifonttiasi, mutta tekstin on silti oltava luettavissa käytetyillä kokoluokilla.
• Voit lisätä logosi, mutta se ei saa työntää kriittistä sisältöä (käyttötarkoituksen kuvaus, painikkeet) näkymän ulkopuolelle.
• Voit mukauttaa tekstiä, mutta sen on silti oltava täsmällinen, tarkka ja täydellinen.

Evästebannerien saavutettavuusvaatimukset

Evästebanneri, joka ei ole saavutettava, ei ole vaatimustenmukainen – sekä tietosuojalain nojalla (käyttäjä ei voinut antaa tietoista suostumusta, jos hän ei kyennyt havaitsemaan tai käyttämään banneria) että saavutettavuuslainsäädännön nojalla (esteettömyysdirektiivi ja kansalliset vammaisten syrjinnän kieltävät lait).

WCAG AA -vaatimukset

• Näppäimistönavigointi. Jokaisen interaktiivisen elementin – painikkeiden, kytkimien, linkkien, sulkemiskuvakkeiden – on oltava tavoitettavissa ja käytettävissä näppäimistöllä. Tabulointijärjestyksen on oltava looginen (tyypillisesti: käyttötarkoituksen teksti, sitten hylkää, sitten hyväksy, sitten hallitse asetuksia).
• Kohdistuksen hallinta. Kun banneri ilmestyy, kohdistuksen tulisi siirtyä siihen (tai se pitäisi ilmoittaa). Kun banneri suljetaan, kohdistuksen tulisi palata pääsisältöön. Kohdistusilmaisimien on oltava näkyviä.
• Ruudunlukijan tuki. Bannerin on käytettävä asianmukaisia ARIA-rooleja ja -nimikkeitä. Käytä bannerin säiliölle role="dialog" ja aria-label="Cookie consent". Painikkeilla on oltava saavutettavat nimet. Kytkimien tilat on ilmoitettava (aria-checked).
• Värikontrasti. Kaiken tekstin ja interaktiivisten elementtien on täytettävä WCAG 2.1 AA -kontrastisuhteet (4,5:1 tavalliselle tekstille, 3:1 suurelle tekstille ja käyttöliittymäkomponenteille).
• Ei näppäimistöansoja. Käyttäjien on kyettävä navigoimaan pois bannerista. Vaikka modaalinen peite voi rajoittaa kohdistuksen banneriin (kohdistuksen lukitseminen modaaleille on hyväksytty kuvio), aina on oltava tapa sulkea banneri ja tavoittaa sivun sisältö.
• Liike. Jos banneri käyttää animaatioita (liukuminen, häivytys), kunnioita prefers-reduced-motion -mediakyselyä ja tarjoa vähennetty tai liikkeetön vaihtoehto.

Bannerisi saavutettavuuden testaaminen

1. Navigoi koko banneria pelkällä näppäimistöllä (Tab, Enter, välilyönti, Escape).
2. Testaa ruudunlukijalla (VoiceOver macOS:llä, NVDA Windowsilla).
3. Tarkista värikontrasti työkalulla, kuten WebAIM Contrast Checker.
4. Testaa 200 %:n zoomilla – bannerin tulisi pysyä käyttökelpoisena.
5. Testaa mobiilissa VoiceOver tai TalkBack käytössä.

Testaus ja iterointi

Evästebanneri ei ole aseta-ja-unohda-elementti. Käyttäjien käyttäytyminen, säännökset ja sivustosi evästeiden käyttö muuttuvat kaikki ajan myötä. Varaudu jatkuvaan testaukseen:

• Suostumusasteet. Seuraa, kuinka suuri osuus käyttäjistä hyväksyy, hylkää tai mukauttaa. Jos hylkäysasteesi on epäilyttävän alhainen (alle 10 %), bannerisi saattaa käyttää hämääviä suunnittelukuvioita – tahallisesti tai tahattomasti.
• Vuorovaikutusasteet. Seuraa, kuinka moni käyttäjä on vuorovaikutuksessa asetuspaneelin kanssa. Vähäinen aktiivisuus voi viitata siihen, ettei "Hallitse asetuksia" -vaihtoehto ole riittävän näkyvä.
• A/B-testaus. Testaa erilaisia tekstejä, painikkeiden nimiä ja asetteluja. Tavoitteena ei ole suostumusasteiden maksimointi – vaan tietoisten suostumusasteiden maksimointi. Banneri, jonka kanssa useampi käyttäjä on vuorovaikutuksessa, on parempi banneri.
• Sääntelyn päivitykset. Seuraa asianmukaisten tietosuojaviranomaisten ohjeistusta. Täytäntöönpanotulkinnat kehittyvät, ja bannerisi tulisi kehittyä niiden mukana.
• Eväste­auditoinnit. Skannaa sivustosi säännöllisesti uusien evästeiden varalta. Jos lisäät uuden analytiikkatyökalun tai markkinointipikselin, bannerisi kategoriat on päivitettävä sen mukaisesti.

Passiro tarjoaa automaattisen evästeskannauksen ja suostumusasteiden analytiikan auttaakseen sinua pitämään bannerisi tarkkana ja tehokkaana. Lue lisää Passiron suostumuksenhallinnasta.