Bestu starfsvenjur við hönnun samþykkisborða fyrir vafrakökur

Samþykkisborðinn fyrir vafrakökur er eitt af því fyrsta sem gestur sér. Hann mótar sýn þeirra á vörumerkið þitt, traust þeirra á fyrirtækinu — og, sem er lykilatriði, hvort samþykki þeirra er lögmætt. Vel hannaður borði nær fram samræmi án núnings. Illa hannaður borði annaðhvort fælir notendur frá eða framleiðir samþykki sem stenst ekki skoðun eftirlitsaðila.

Þessi leiðarvísir fjallar um þau hönnunarreglur, notendaviðmótsmynstur og aðgengiskröfur sem skilja á milli samræmds, notendavæns samþykkisborða og áhættu.

Fyrstu áhrif skipta máli

Rannsóknir sýna stöðugt að notendur taka ákvarðanir um samþykkisborða á tveimur til þremur sekúndum. Flestir notendur lesa ekki allan textann. Þeir skanna eftir þekkjanlegum mynstrum — hnöppum, rofum, kunnuglegu orðalagi — og bregðast við eftir eðlisávísun. Þetta þýðir að sjónræn hönnun borðans vegur jafn þungt og lagalegt innihald hans.

Markmiðið er að gera rétta aðgerð augljósa og fyrirliggjandi val skýrt við fyrstu sýn. Ef notandi þarf að hugsa um hvað hann eigi að gera, hefur hönnunin þín brugðist.

Lykilreglur fyrir fyrstu áhrif:

• Skýrleiki umfram snjallmennsku. Samþykkisborði fyrir vafrakökur er ekki staðurinn fyrir skapandi textagerð eða óhefðbundið viðmót. Notaðu kunnugleg mynstur sem notendur þekkja.
• Sjónræn stigskipan. Mikilvægustu þættirnir — tilgangslýsingin og aðgerðahnapparnir — ættu að vera mest áberandi. Aukaþættir (stillingahlekkur, stefnuhlekkur) mega vera minna áberandi en verða samt að vera sýnilegir.
• Auðvist. Þröngur borði virkar yfirþyrmandi. Gefðu þáttum rými til að anda. Innfylling og bil gefa til kynna fagmennsku og gera efni auðveldara að skanna.

Stigskipan hnappa og sjónrænt vægi

Hér bregðast flestir samþykkisborðar samræmi — og hér eru flestar sektir gefnar út.

Leiðbeiningar EDPB 05/2020 um samþykki, og margar aðgerðir CNIL, ítalska Garante og danska Datatilsynet, hafa fest í sessi skýra reglu: möguleikinn á að hafna vafrakökum verður að vera settur fram jafn áberandi og möguleikinn á að samþykkja þær.

Hvað þetta þýðir í raun:

• Samþykkis- og höfnunarhnappar verða að vera af sömu stærð. Hnappur með áletruninni „Samþykkja allt“ sem er 200 pixlar á breidd við hlið textahlekks með áletruninni „Hafna“ er ekki jafnt vægi. Báðir verða að birtast sem hnappar af sambærilegri stærð.
• Báðir hnappar verða að hafa sambærilegt sjónrænt vægi. Ef samþykkishnappurinn þinn er heilfylltur, hástigskiptur hnappur, verður höfnunarhnappurinn þinn líka að vera heilfylltur hnappur — ekki útlínaður, gagnsær eða einungis texti. CNIL sektaði Google sérstaklega um 150 milljónir evra árið 2022, að hluta til vegna þess að höfnunarmöguleikinn krafðist meiri fyrirhafnar en samþykki.
• Litur má ekki hagræða. Skærgrænn „Samþykkja“-hnappur við hlið grás „Hafna“-hnapps er dökkt mynstur. Notaðu aðallit vörumerkisins fyrir báða, eða hlutlausa liti fyrir báða. Sjónræna vísbendingin má ekki stýra notandanum að einu vali.
• Röð hnappa skiptir minna máli en þú heldur. Hvort samþykki eða höfnun kemur fyrst er ekki aðaláhyggjuefnið — sjónrænt vægi er það. Þó getur það gefið til kynna hlutleysi að setja höfnunarhnappinn til vinstri (fyrst í lesröð).

Ráðlagt hnappamynstur

Samræmdur og notendavænn borði notar yfirleitt þrjár aðgerðir:

1. Hafna öllu — heilfylltur hnappur
2. Samþykkja allt — heilfylltur hnappur af sömu stærð og sjónrænu vægi
3. Stjórna stillingum — aukahnappur eða hlekkur (má vera minna áberandi, þar sem hann leiðir í annað lag)

Litur og birtuskil

Litaval í samþykkisborðum þjónar tveimur tilgangi: samræmi við vörumerki og læsileika. Frá sjónarhóli samræmis eru lykilkröfurnar:

• Textabirtuskil. Allur texti í borðanum verður að uppfylla WCAG 2.1 AA birtuskilakröfur: lágmarksbirtuskilahlutfall 4,5:1 fyrir venjulegan texta og 3:1 fyrir stóran texta. Þetta á við um tilgangslýsingu, hnappamerkingar og hlekki.
• Hnappabirtuskil. Bakgrunnur hnappa verður að hafa nægileg birtuskil við bakgrunn borðans, og hnappatexti verður að hafa nægileg birtuskil við bakgrunn hnappsins. Athugaðu bæði lögin tvisvar.
• Sýnileiki hlekkja. Hlekkir á vafrakökustefnu og persónuverndarstefnu verða að vera sjónrænt aðgreinanlegir frá umliggjandi texta — yfirleitt með lit og undirstrikun.
• Bakgrunnur. Bakgrunnur borðans verður að veita nægileg birtuskil við umhverfi sitt. Ef borðinn liggur yfir efni síðunnar, tryggðu að yfirlagið sé nógu ógegnsætt til að borðatextinn sé læsilegur óháð undirliggjandi efni síðunnar.

Algeng nálgun er að nota hvítan eða mjög ljósan bakgrunn fyrir borðann, dökkan texta fyrir læsileika, og aðallit vörumerkisins fyrir hnappa. Þetta gefur yfirleitt sterk birtuskilahlutföll og hreint, faglegt útlit.

Texti og smátexti

Textinn í samþykkisborðanum þínum verður að vera lagalega fullnægjandi, en hann verður líka að vera læsilegur fyrir áhorfendur án tæknilegrar þekkingar. GDPR forsenda 39 krefst þess beinlínis að upplýsingar um gagnavinnslu séu veittar á „skýru og einföldu máli“.

Fyrirsögn

Hafðu hana einfalda og skýra. Áhrifarík dæmi:

• „Við notum vafrakökur“
• „Kökustillingar“
• „Þitt persónuverndarval“

Forðastu óljóst eða undanfærandi orðalag eins og „Við metum persónuvernd þína“ — það segir notandanum ekkert sem hann getur brugðist við.

Tilgangslýsing

Útskýrðu í einni til þremur setningum hvaða vafrakökur þú notar og hvers vegna. Vertu nákvæmur:

„Við notum nauðsynlegar vafrakökur til að þessi síða virki. Við viljum líka nota greiningarkökur til að skilja hvernig þú notar síðuna okkar, og markaðskökur til að sýna þér viðeigandi efni. Þú getur samþykkt allt, hafnað öllu eða stjórnað stillingunum þínum.“

Þetta er hnitmiðað, nákvæmt og áþreifanlegt. Berðu það saman við það sem er því miður algengt:

„Þessi vefsíða notar vafrakökur til að tryggja að þú fáir bestu upplifunina. Með því að halda áfram að nota þessa síðu samþykkir þú notkun okkar á vafrakökum.“

Seinna dæmið er ósamræmt: það gefur í skyn samþykki með áframhaldandi vafri (ekki gilt samkvæmt GDPR), tilgreinir ekki tilgang og býður ekki upp á val.

Hnappamerkingar

Hnappamerkingar ættu að vera ótvíræðar:

• „Samþykkja allt“ og „Hafna öllu“ — skýrt, samhliða orðalag
• „Stjórna stillingum“ eða „Sérsníða“ — fyrir stillingavalið
• Forðastu: „Í lagi“, „Skil það“, „Halda áfram“, „Ég skil“ — þessi eru óljós og teljast ekki sérstakt samþykki

Farsímamiðuð hönnun

Yfir 60% vefumferðar kemur frá farsímum. Samþykkisborðinn þinn mun sjást á skjám sem eru allt niður í 320 pixla á breidd. Ef þú hannar fyrst fyrir borðtölvu og aðlagar að farsíma muntu næstum örugglega enda með þröngri, ónothæfri farsímaupplifun.

Atriði við farsímahönnun:

• Staflaðu hnöppum lóðrétt. Láréttar hnapparaðir sem virka á borðtölvu verða ólæsilegar á farsíma. Staflaðu samþykkis-, höfnunar- og stillingahnöppum lóðrétt með fullri breidd.
• Snertisvæði. Hnappar verða að vera að minnsta kosti 44x44 pixlar (WCAG 2.5.5, stig AAA) eða að lágmarki 24x24 pixlar (WCAG 2.5.8, stig AA). Á farsíma er stærra alltaf betra — stefndu á 48 pixla eða meira í hæð.
• Skjáþekja. Á farsíma getur samþykkisborði auðveldlega hulið 60–80% af skjásvæðinu. Þetta er ásættanlegt fyrir upphaflega áskorun, en borðinn má ekki gera síðuna algjörlega ónothæfa. Ef þú notar yfirlagsglugga, tryggðu að notendur geti samt þekkt að þeir séu á réttri síðu.
• Textastærð. Farðu aldrei undir 14 pixla fyrir meginmálstexta eða 12 pixla fyrir aukatexta á farsíma. Notendur ættu ekki að þurfa að auka aðdrátt til að lesa borðann þinn.
• Skrunhegðun. Ef efni borðans fer yfir hæð skjásvæðisins á farsíma (sérstaklega stillingaspjaldið), verður að vera hægt að skruna innan borðans. Ekki láta borðaefnið teygja sig út fyrir skjáinn án nokkurrar leiðar til að ná til samþykkis-/höfnunarhnappanna.

Notendaviðmót flokkarofa

Stillingaspjaldið — annað lag lagskiptrar borða — er þar sem notendur taka nákvæmar ákvarðanir. Staðalmynstrið notar flokkarofa: einn rofa fyrir hvern vafrakökuflokk (nauðsynlegar, greiningar, markaðssetning, stillingar), hver með merkingu og lýsingu.

Hönnunarleiðbeiningar fyrir rofa:

• Sjónræn ástönd verða að vera ótvíræð. Kveikt (samþykki gefið) og slökkt (samþykki haldið eftir) verða að vera skýrt aðgreinanleg með lit, stöðu og helst merkingu („Kveikt“ / „Slökkt“ eða haktákn / X). Ekki treysta einungis á lit — það bregst litblindum notendum.
• Nauðsynlegar vafrakökur ættu að vera kveiktar og óvirkar. Flokkurinn „Strangt nauðsynlegar“ ætti að vera kveiktur með rofanum sjónrænt óvirkjuðum (grár eða með læsingartákni), ásamt athugasemd sem útskýrir að ekki sé hægt að slökkva á þessum vafrakökum þar sem þær eru nauðsynlegar til að síðan virki.
• Sjálfgefið ástand ónauðsynlegra flokka verður að vera slökkt. Forhakaðir rofar teljast forvalið samþykki, sem er beinlínis bannað samkvæmt Planet49-úrskurði CJEU.
• Flokkslýsingar ættu að vera læsilegar mönnum. „Greiningarkökur“ er merking. „Hjálpar okkur að skilja hvernig gestir eiga samskipti við vefsíðuna okkar með því að safna nafnlausum notkunargögnum“ er lýsing. Veittu bæði.
• Útvíkkanlegir kökulistar. Undir hverjum flokki skaltu veita útvíkkanlegan hluta sem listar upp einstakar vafrakökur: nafn, veitanda, tilgang og gildistíma. Þessi gagnsæisstig er í auknum mæli vænst af persónuverndaryfirvöldum.

Hönnun stillinga-/valspjalds

Stillingaspjaldið er lykilþáttur. Þegar notandi smellir á „Stjórna stillingum“ er hann virkur að taka þátt í persónuverndarvali sínu — þetta er notandinn sem þú vilt koma fram við af mestri virðingu.

• Skýr haus. „Kökustillingar“ eða „Stjórnaðu persónuvernd þinni“ — gerðu augljóst til hvers þetta spjald er.
• Vistunarhnappur. Áberandi „Vista stillingar“-hnappur sem staðfestir nákvæmt val notandans. Þessi hnappur verður að vera auðnáanlegur án óhóflegs skruns.
• Samþykkja allt og hafna öllu ættu áfram að vera í boði. Jafnvel í stillingaspjaldinu skaltu bjóða upp á flýtihnappa til að samþykkja allt eða hafna öllu. Sumir notendur opna spjaldið af forvitni en vilja samt fljóta aðgerð.
• Lokunarhegðun. Ef notandi lokar stillingaspjaldinu án þess að vista, skaltu meðhöndla það sem að ekkert samþykki hafi verið gefið — ekki setja ónauðsynlegar vafrakökur. Ekki festa notendur í spjaldinu.

Sérsníðing vörumerkis án þess að fórna samræmi

Samþykkisborðinn þinn ætti að virka sem hluti af vefsíðunni þinni, ekki íhlutun þriðja aðila. Flestir samþykkisstjórnunarvettvangar leyfa sérsníðingu á litum, letri, staðsetningu merkis og texta. Notaðu þetta til að samræma borðann við vörumerkjaímynd þína.

Hins vegar má sérsníðing vörumerkis ekki skerða samræmi:

• Þú getur notað vörumerkjaliti þína, en hnappar verða samt að hafa jafnt sjónrænt vægi.
• Þú getur notað vörumerkjaletur þitt, en textinn verður samt að vera læsilegur í þeim stærðum sem notaðar eru.
• Þú getur bætt við merkinu þínu, en það má ekki ýta lykilefni (tilgangslýsingu, hnöppum) niður fyrir sjónarrönd.
• Þú getur sérsniðið texta, en hann verður samt að vera nákvæmur, réttur og heildstæður.

Aðgengiskröfur fyrir samþykkisborða

Samþykkisborði sem er ekki aðgengilegur er ekki samræmdur — bæði samkvæmt persónuverndarlögum (notandinn gæti ekki gefið upplýst samþykki ef hann gæti ekki skynjað eða stjórnað borðanum) og samkvæmt aðgengislögum (European Accessibility Act og landslög um mismunun gagnvart fötluðum).

WCAG AA kröfur

• Lyklaborðsflakk. Sérhver gagnvirkur þáttur — hnappar, rofar, hlekkir, lokunartákn — verður að vera náanlegur og nothæfur með lyklaborði. Flipuröð verður að vera rökrétt (yfirleitt: tilgangstexti, síðan höfnun, síðan samþykki, síðan stjórnun stillinga).
• Fókusstjórnun. Þegar borðinn birtist ætti fókus að færast á hann (eða hann ætti að vera tilkynntur). Þegar borðanum er lokað ætti fókus að fara aftur á meginefnið. Fókusvísar verða að vera sýnilegir.
• Stuðningur við skjálesara. Borðinn verður að nota viðeigandi ARIA-hlutverk og merkingar. Notaðu role="dialog" og aria-label="Cookie consent" fyrir umgjörð borðans. Hnappar verða að hafa aðgengileg nöfn. Rofaástönd verða að vera tilkynnt (aria-checked).
• Litabirtuskil. Allur texti og gagnvirkir þættir verða að uppfylla WCAG 2.1 AA birtuskilahlutföll (4,5:1 fyrir venjulegan texta, 3:1 fyrir stóran texta og viðmótshluti).
• Engar lyklaborðsgildrur. Notendur verða að geta flakkað burt frá borðanum. Þótt yfirlagsgluggi megi takmarka fókus við borðann (fókusgildra fyrir gluggamyndir er viðurkennt mynstur), verður alltaf að vera leið til að loka borðanum og ná til efnis síðunnar.
• Hreyfing. Ef borðinn notar hreyfimyndir (innskrun, deyfingu), skaltu virða prefers-reduced-motion miðlaskilyrðið og bjóða upp á minnkaðan valkost eða valkost án hreyfingar.

Að prófa aðgengi borðans þíns

1. Flakkaðu um allan borðann með einungis lyklaborðinu (Tab, Enter, bilslá, Escape).
2. Prófaðu með skjálesara (VoiceOver á macOS, NVDA á Windows).
3. Staðfestu litabirtuskil með verkfæri eins og WebAIM Contrast Checker.
4. Prófaðu við 200% aðdrátt — borðinn ætti að vera áfram nothæfur.
5. Prófaðu á farsíma með VoiceOver eða TalkBack virkjuðum.

Prófun og endurbætur

Samþykkisborði er ekki þáttur sem þú setur upp og gleymir. Hegðun notenda, reglugerðir og kökunotkun síðunnar þinnar breytast öll með tímanum. Gerðu ráð fyrir áframhaldandi prófunum:

• Samþykkishlutföll. Fylgstu með hversu hátt hlutfall notenda samþykkir, hafnar eða sérsníður. Ef höfnunarhlutfallið þitt er grunsamlega lágt (undir 10%), gæti borðinn þinn verið að nota dökk mynstur — hvort sem það er af ásetningi eða ekki.
• Samskiptahlutföll. Fylgstu með hversu margir notendur eiga samskipti við stillingaspjaldið. Lítil þátttaka getur bent til þess að valið „Stjórna stillingum“ sé ekki nógu sýnilegt.
• A/B-prófun. Prófaðu mismunandi texta, hnappamerkingar og útlit. Markmiðið er ekki að hámarka samþykkishlutföll — það er að hámarka upplýst samþykkishlutföll. Borði sem fleiri notendur eiga samskipti við er betri borði.
• Uppfærslur reglna. Fylgstu með leiðbeiningum frá viðeigandi persónuverndaryfirvöldum. Túlkanir á framfylgd þróast, og borðinn þinn ætti að þróast með þeim.
• Kökuúttektir. Skannaðu síðuna þína reglulega eftir nýjum vafrakökum. Ef þú bætir við nýju greiningarverkfæri eða markaðspixli, verður að uppfæra borðaflokkana til að endurspegla það.

Passiro veitir sjálfvirka vafrakökuskönnun og greiningu á samþykkishlutföllum til að hjálpa þér að halda borðanum þínum nákvæmum og áhrifaríkum. Lærðu meira um samþykkisstjórnun Passiro.