Slapukų juostos dizaino geriausioji praktika

Jūsų slapukų juosta yra viena iš pirmųjų dalykų, kurį pamato lankytojas. Ji formuoja lankytojo požiūrį į jūsų prekės ženklą, pasitikėjimą jūsų verslu ir – tai itin svarbu – tai, ar jo sutikimas yra teisiškai galiojantis. Gerai suprojektuota juosta užtikrina atitiktį be trukdžių. Prastai suprojektuota juosta arba atbaido vartotojus, arba sukuria sutikimą, kuris neatlaikys priežiūros institucijų patikros.

Šiame vadove aptariami dizaino principai, UX šablonai ir prieinamumo reikalavimai, skiriantys atitiktį užtikrinančią, vartotojui patogią slapukų juostą nuo teisinės rizikos.

Pirmasis įspūdis yra svarbus

Tyrimai nuosekliai rodo, kad vartotojai sprendimus dėl slapukų juostos priima per dvi–tris sekundes. Dauguma vartotojų neskaito viso teksto. Jie greitai peržvelgia atpažįstamus elementus – mygtukus, jungiklius, pažįstamą kalbą – ir veikia instinktyviai. Tai reiškia, kad jūsų juostos vizualinis dizainas yra ne mažiau svarbus nei jos teisinis turinys.

Tikslas – padaryti teisingą veiksmą akivaizdų, o galimus pasirinkimus – aiškius iš pirmo žvilgsnio. Jei vartotojui reikia galvoti, ką daryti, jūsų dizainas nepasiteisino.

Pagrindiniai pirmojo įspūdžio principai:

• Aiškumas svarbiau už išradingumą. Slapukų juosta nėra vieta kūrybiniams tekstams ar netradicinei sąsajai. Naudokite pažįstamus šablonus, kuriuos vartotojai atpažįsta.
• Vizualinė hierarchija. Svarbiausi elementai – tikslo aprašymas ir veiksmų mygtukai – turi būti labiausiai matomi. Antriniai elementai (nustatymų nuoroda, politikos nuoroda) gali būti mažiau ryškūs, bet vis tiek turi būti matomi.
• Tuščia erdvė. Perkrauta juosta atrodo slegianti. Palikite elementams erdvės kvėpuoti. Tarpai ir atstumai signalizuoja profesionalumą ir palengvina turinio peržiūrą.

Mygtukų hierarchija ir vizualinis svoris

Būtent čia dauguma slapukų juostų neatitinka reikalavimų – ir čia skiriama daugiausia baudų.

EDPB gairės 05/2020 dėl sutikimo ir daugybė CNIL, Italijos Garante bei Danijos Datatilsynet vykdymo veiksmų nustatė aiškų principą: galimybė atmesti slapukus turi būti pateikta taip pat ryškiai kaip ir galimybė juos priimti.

Ką tai reiškia praktikoje:

• Priėmimo ir atmetimo mygtukai turi būti tokio pat dydžio. 200 pikselių pločio mygtukas „Priimti visus“ šalia teksto nuorodos „Atmesti“ nėra lygiavertis ryškumas. Abu turi būti pateikti kaip panašių matmenų mygtukai.
• Abu mygtukai turi turėti panašų vizualinį svorį. Jei jūsų priėmimo mygtukas yra vientisas, didelio kontrasto mygtukas, tai ir atmetimo mygtukas turi būti vientisas – ne apvestas kontūru, permatomas ar tik teksto pavidalo. 2022 m. CNIL skyrė Google 150 mln. EUR baudą iš dalies todėl, kad atmetimo galimybė reikalavo daugiau pastangų nei priėmimas.
• Spalva neturi manipuliuoti. Ryškiai žalias mygtukas „Priimti“ šalia pilko mygtuko „Atmesti“ yra tamsusis šablonas. Naudokite savo prekės ženklo pagrindinę spalvą abiem arba neutralias spalvas abiem. Vizualinis signalas neturi kreipti vartotojo prie vieno pasirinkimo.
• Mygtukų tvarka mažiau svarbi, nei manote. Ar priėmimas, ar atmetimas yra pirmas – tai ne pagrindinis rūpestis; svarbiausias yra vizualinis svoris. Vis dėlto atmetimo mygtuko patalpinimas kairėje (pirmas skaitymo tvarka) gali signalizuoti neutralumą.

Rekomenduojamas mygtukų šablonas

Atitiktį užtikrinanti ir vartotojui patogi juosta paprastai naudoja tris veiksmus:

1. Atmesti visus – vientisas mygtukas
2. Priimti visus – vientisas mygtukas, lygaus dydžio ir vizualinio svorio
3. Tvarkyti nuostatas – antrinis mygtukas ar nuoroda (gali būti mažiau ryškus, nes veda į antrą sluoksnį)

Spalva ir kontrastas

Spalvų pasirinkimas slapukų juostose tarnauja dviem tikslams: prekės ženklo nuoseklumui ir įskaitomumui. Atitikties požiūriu pagrindiniai reikalavimai yra šie:

• Teksto kontrastas. Visas juostos tekstas turi atitikti WCAG 2.1 AA kontrasto reikalavimus: mažiausias kontrasto santykis 4,5:1 įprastam tekstui ir 3:1 dideliam tekstui. Tai taikoma tikslo aprašymui, mygtukų žymoms ir nuorodoms.
• Mygtukų kontrastas. Mygtukų fonas turi pakankamai kontrastuoti su juostos fonu, o mygtukų tekstas turi pakankamai kontrastuoti su mygtuko fonu. Patikrinkite abu sluoksnius.
• Nuorodų matomumas. Nuorodos į jūsų slapukų politiką ir privatumo politiką turi vizualiai skirtis nuo supančio teksto – paprastai spalva ir pabraukimu.
• Fonas. Juostos fonas turi pakankamai kontrastuoti su aplinka. Jei juosta uždengia puslapio turinį, užtikrinkite, kad perdanga būtų pakankamai neperšviečiama, kad juostos tekstas būtų įskaitomas nepriklausomai nuo po ja esančio puslapio turinio.

Įprastas būdas – naudoti baltą arba labai šviesų juostos foną, tamsų tekstą įskaitomumui ir savo prekės ženklo pagrindinę spalvą mygtukams. Taip paprastai gaunami stiprūs kontrasto santykiai bei švari, profesionali išvaizda.

Tekstas ir mikrotekstas

Jūsų slapukų juostos tekstas turi būti teisiškai pakankamas, bet taip pat suprantamas ne techniniam skaitytojui. GDPR 39 konstatuojamoji dalis aiškiai reikalauja, kad informacija apie duomenų tvarkymą būtų pateikta „aiškia ir paprasta kalba“.

Antraštė

Laikykite ją paprastą ir tiesioginę. Veiksmingi pavyzdžiai:

• „Mes naudojame slapukus“
• „Slapukų nuostatos“
• „Jūsų privatumo pasirinkimai“

Venkite neaiškios ar vengiančios kalbos, pvz., „Mes vertiname jūsų privatumą“ – ji nepasako vartotojui nieko konkretaus.

Tikslo aprašymas

Vienu–trimis sakiniais paaiškinkite, kokius slapukus naudojate ir kodėl. Būkite konkretūs:

„Mes naudojame būtinuosius slapukus, kad ši svetainė veiktų. Taip pat norėtume naudoti analitikos slapukus, kad suprastume, kaip naudojatės mūsų svetaine, bei rinkodaros slapukus, kad rodytume jums aktualų turinį. Galite priimti visus, atmesti visus arba tvarkyti savo nuostatas.“

Tai glausta, konkretu ir veiksminga. Palyginkite tai su, deja, dažnu:

„Ši svetainė naudoja slapukus, kad užtikrintų jums geriausią patirtį. Toliau naudodamiesi šia svetaine, sutinkate su slapukų naudojimu.“

Antrasis pavyzdys neatitinka reikalavimų: jis numano sutikimą per tolesnį naršymą (negalioja pagal GDPR), nenurodo tikslų ir nesuteikia pasirinkimo.

Mygtukų žymos

Mygtukų žymos turi būti nedviprasmiškos:

• „Priimti visus“ ir „Atmesti visus“ – aiški, lygiagreti kalba
• „Tvarkyti nuostatas“ arba „Pritaikyti“ – nustatymų parinkčiai
• Venkite: „Gerai“, „Supratau“, „Tęsti“, „Suprantu“ – jie yra dviprasmiški ir nesudaro konkretaus sutikimo

Mobiliesiems pritaikytas dizainas („mobile-first“)

Daugiau nei 60 % interneto srauto sukuriama mobiliuosiuose įrenginiuose. Jūsų slapukų juosta bus matoma ekranuose, kurių plotis tesiekia 320 pikselių. Jei projektuosite pirmiausia stacionariam kompiuteriui, o vėliau pritaikysite mobiliesiems, beveik neabejotinai gausite ankštą, nepatogią mobiliojo įrenginio patirtį.

Į ką atsižvelgti projektuojant mobiliesiems:

• Rikiuokite mygtukus vertikaliai. Horizontalios mygtukų eilės, veikiančios stacionariame kompiuteryje, mobiliajame tampa neįskaitomos. Rikiuokite priėmimo, atmetimo ir nustatymų mygtukus vertikaliai per visą plotį.
• Lietimo taikiniai. Mygtukai turi būti bent 44x44 pikselių (WCAG 2.5.5, AAA lygis) arba mažiausiai 24x24 pikselių (WCAG 2.5.8, AA lygis). Mobiliajame įrenginyje didesni visada geriau – siekite bent 48 pikselių aukščio.
• Ekrano padengimas. Mobiliajame įrenginyje slapukų juosta gali lengvai užimti 60–80 % ekrano. Tai priimtina pradiniam raginimui, bet juosta neturi svetainės padaryti visiškai nenaudojamos. Jei naudojate modalinę perdangą, užtikrinkite, kad vartotojai vis tiek galėtų atpažinti, jog yra tinkamoje svetainėje.
• Teksto dydis. Mobiliajame įrenginyje niekada nenusileiskite žemiau 14 pikselių pagrindiniam tekstui ar 12 pikselių antriniam tekstui. Vartotojui neturėtų reikėti didinti, kad perskaitytų jūsų juostą.
• Slinkties elgsena. Jei jūsų juostos turinys mobiliajame viršija ekrano aukštį (ypač nuostatų skydelis), jis turi būti slenkamas juostos viduje. Neleiskite juostos turiniui išsiplėsti už ekrano ribų taip, kad nebūtų kaip pasiekti priėmimo/atmetimo mygtukų.

Kategorijų jungiklių UX

Nuostatų skydelis – antrasis sluoksniuotos juostos sluoksnis – yra vieta, kur vartotojai atlieka detalius pasirinkimus. Standartinis šablonas naudoja kategorijų jungiklius: po vieną kiekvienai slapukų kategorijai (būtinieji, analitikos, rinkodaros, nuostatų), kiekvienas su žyma ir aprašymu.

Jungiklių dizaino gairės:

• Vizualinės būsenos turi būti nedviprasmiškos. Įjungta (sutikimas duotas) ir išjungta (sutikimas nesuteiktas) turi aiškiai skirtis spalva, padėtimi ir, geriausiai, žyma („Įjungta“ / „Išjungta“ arba varnelė / X). Nesiremkite vien spalva – tai neveikia daltonikams.
• Būtinieji slapukai turi būti įjungti ir neaktyvūs. Kategorija „Griežtai būtini“ turi būti įjungta su vizualiai neaktyviu jungikliu (pilkas arba su spynos piktograma) ir pastaba, paaiškinančia, kad šių slapukų negalima išjungti, nes jie būtini svetainės veikimui.
• Ne būtinųjų kategorijų numatytoji būsena turi būti išjungta. Iš anksto pažymėti jungikliai reiškia iš anksto pasirinktą sutikimą, kurį aiškiai draudžia ESTT sprendimas Planet49 byloje.
• Kategorijų aprašymai turi būti suprantami žmogui. „Analitikos slapukai“ yra žyma. „Padeda mums suprasti, kaip lankytojai sąveikauja su mūsų svetaine, renkant anoniminius naudojimo duomenis“ yra aprašymas. Pateikite abu.
• Išskleidžiami slapukų sąrašai. Po kiekviena kategorija pateikite išskleidžiamą skiltį, kurioje išvardyti atskiri slapukai: pavadinimas, teikėjas, tikslas ir trukmė. Tokio lygio skaidrumo vis dažniau tikisi duomenų apsaugos institucijos.

Nustatymų/nuostatų skydelio dizainas

Nuostatų skydelis yra esminis komponentas. Kai vartotojas spusteli „Tvarkyti nuostatas“, jis aktyviai domisi savo privatumo pasirinkimais – būtent šį vartotoją norite gerbti labiausiai.

• Aiški antraštė. „Slapukų nuostatos“ arba „Tvarkykite savo privatumą“ – padarykite akivaizdu, kam šis skydelis skirtas.
• Išsaugojimo mygtukas. Ryškus mygtukas „Išsaugoti nuostatas“, patvirtinantis detalius vartotojo pasirinkimus. Šis mygtukas turi būti lengvai pasiekiamas be perteklinės slinkties.
• „Priimti visus“ ir „Atmesti visus“ turi likti prieinami. Net nuostatų skydelyje pateikite spartiuosius mygtukus visiems priimti ar visiems atmesti. Kai kurie vartotojai atveria skydelį iš smalsumo, bet vis tiek nori greito veiksmo.
• Uždarymo elgsena. Jei vartotojas uždaro nuostatų skydelį neišsaugojęs, tai laikykite kaip sutikimo nesuteikimą – nenustatykite ne būtinųjų slapukų. Neįkalinkite vartotojų skydelyje.

Prekės ženklo pritaikymas išlaikant atitiktį

Jūsų slapukų juosta turėtų atrodyti kaip jūsų svetainės dalis, o ne trečiosios šalies įsibrovimas. Dauguma sutikimų valdymo platformų leidžia pritaikyti spalvas, šriftus, logotipo padėtį ir tekstą. Naudokite tai, kad suderintumėte juostą su savo prekės ženklo tapatybe.

Tačiau prekės ženklo pritaikymas neturi pakenkti atitikčiai:

• Galite naudoti savo prekės ženklo spalvas, bet mygtukai vis tiek turi turėti lygų vizualinį svorį.
• Galite naudoti savo prekės ženklo šriftą, bet tekstas vis tiek turi būti įskaitomas naudojamu dydžiu.
• Galite pridėti savo logotipą, bet jis neturi nustumti esminio turinio (tikslo aprašymo, mygtukų) žemiau matomos srities.
• Galite pritaikyti tekstą, bet jis vis tiek turi būti konkretus, tikslus ir išsamus.

Prieinamumo reikalavimai slapukų juostoms

Slapukų juosta, kuri nėra prieinama, neatitinka reikalavimų – tiek pagal privatumo teisę (vartotojas negalėtų duoti informuoto sutikimo, jei negalėtų suvokti ar valdyti juostos), tiek pagal prieinamumo teisę (Europos prieinamumo aktą ir nacionalinius neįgaliųjų diskriminacijos įstatymus).

WCAG AA reikalavimai

• Klaviatūros navigacija. Kiekvienas interaktyvus elementas – mygtukai, jungikliai, nuorodos, uždarymo piktogramos – turi būti pasiekiamas ir valdomas klaviatūra. Tab tvarka turi būti logiška (paprastai: tikslo tekstas, tada atmesti, tada priimti, tada tvarkyti nuostatas).
• Fokuso valdymas. Kai juosta pasirodo, fokusas turėtų persikelti į ją (arba ji turėtų būti paskelbta). Kai juosta uždaroma, fokusas turėtų grįžti į pagrindinį turinį. Fokuso indikatoriai turi būti matomi.
• Ekrano skaitytuvo palaikymas. Juosta turi naudoti tinkamas ARIA roles ir žymas. Juostos konteineriui naudokite role="dialog" ir aria-label="Cookie consent". Mygtukai turi turėti prieinamus pavadinimus. Jungiklių būsenos turi būti paskelbtos (aria-checked).
• Spalvų kontrastas. Visi tekstai ir interaktyvūs elementai turi atitikti WCAG 2.1 AA kontrasto santykius (4,5:1 įprastam tekstui, 3:1 dideliam tekstui ir sąsajos komponentams).
• Jokių klaviatūros spąstų. Vartotojai turi galėti pasitraukti nuo juostos. Nors modalinė perdanga gali apriboti fokusą juosta (fokuso užrakinimas modaliniuose languose yra priimtinas šablonas), visada turi būti būdas juostą uždaryti ir pasiekti puslapio turinį.
• Judesys. Jei juosta naudoja animacijas (išslydimą, išryškėjimą), gerbkite prefers-reduced-motion medijos užklausą ir pateikite sumažinto arba jokio judesio alternatyvą.

Juostos prieinamumo testavimas

1. Naršykite visą juostą naudodami tik klaviatūrą (Tab, Enter, Space, Escape).
2. Testuokite su ekrano skaitytuvu (VoiceOver macOS sistemoje, NVDA Windows sistemoje).
3. Patikrinkite spalvų kontrastą naudodami įrankį, pvz., WebAIM Contrast Checker.
4. Testuokite su 200 % priartinimu – juosta turi likti naudojama.
5. Testuokite mobiliajame įrenginyje su įjungtu VoiceOver ar TalkBack.

Testavimas ir tobulinimas

Slapukų juosta nėra vieną kartą nustatomas ir pamirštamas elementas. Vartotojų elgsena, reglamentai ir jūsų svetainės slapukų naudojimas laikui bėgant keičiasi. Planuokite nuolatinį testavimą:

• Sutikimo rodikliai. Stebėkite, koks procentas vartotojų priima, atmeta ar pritaiko. Jei jūsų atmetimo rodiklis įtartinai mažas (mažiau nei 10 %), jūsų juosta gali naudoti tamsiuosius šablonus – tyčia ar ne.
• Sąveikos rodikliai. Stebėkite, kiek vartotojų sąveikauja su nuostatų skydeliu. Mažas įsitraukimas gali reikšti, kad parinktis „Tvarkyti nuostatas“ nėra pakankamai matoma.
• A/B testavimas. Testuokite skirtingus tekstus, mygtukų žymas ir išdėstymus. Tikslas – ne maksimizuoti sutikimo rodiklius, o maksimizuoti informuoto sutikimo rodiklius. Juosta, su kuria įsitraukia daugiau vartotojų, yra geresnė juosta.
• Reglamentų atnaujinimai. Stebėkite atitinkamų duomenų apsaugos institucijų gaires. Vykdymo interpretacijos kinta, ir jūsų juosta turėtų kisti kartu su jomis.
• Slapukų auditai. Reguliariai skenuokite savo svetainę ieškodami naujų slapukų. Jei pridedate naują analitikos įrankį ar rinkodaros pikselį, jūsų juostos kategorijos turi būti atnaujintos, kad tai atspindėtų.

Passiro teikia automatinį slapukų skenavimą ir sutikimo rodiklių analitiką, padedančią išlaikyti jūsų juostą tikslią ir veiksmingą. Sužinokite daugiau apie Passiro sutikimų valdymą.