Най-добри практики за дизайн на банер за бисквитки

Вашият банер за бисквитки е едно от първите неща, които посетителят вижда. Той формира възприятието му за вашата марка, доверието му във вашия бизнес и — което е критично — дали съгласието му е юридически валидно. Добре проектираният банер постига съответствие без излишни пречки. Лошо проектираният или отблъсква потребителите, или произвежда съгласие, което няма да издържи на регулаторна проверка.

Това ръководство обхваща принципите на дизайна, UX моделите и изискванията за достъпност, които отличават съответстващия и лесен за ползване банер за бисквитки от потенциалната отговорност.

Първите впечатления имат значение

Проучванията последователно показват, че потребителите вземат решения за банерите за бисквитки за две-три секунди. Повечето потребители не четат целия текст. Те сканират за разпознаваеми модели — бутони, превключватели, познат език — и действат инстинктивно. Това означава, че визуалният дизайн на вашия банер тежи колкото и юридическото му съдържание.

Целта е правилното действие да е очевидно, а наличните избори да са ясни от пръв поглед. Ако потребителят трябва да мисли какво да прави, вашият дизайн се е провалил.

Ключови принципи за първите впечатления:

• Яснота вместо оригиналност. Банерът за бисквитки не е мястото за креативни текстове или нестандартен потребителски интерфейс. Използвайте познати модели, които потребителите разпознават.
• Визуална йерархия. Най-важните елементи — описанието на целта и бутоните за действие — трябва да са най-видни. Второстепенните елементи (връзка към настройки, връзка към политика) могат да са по-незабележими, но все пак трябва да са видими.
• Празно пространство. Пренаселеният банер създава чувство на претовареност. Дайте на елементите пространство да дишат. Отстъпите и разстоянията сигнализират професионализъм и улесняват сканирането на съдържанието.

Йерархия и визуална тежест на бутоните

Тук се проваля съответствието на повечето банери за бисквитки — и тук се налагат повечето глоби.

Насоки 05/2020 на EDPB относно съгласието, както и множество мерки за прилагане от страна на CNIL, италианския Garante и датския Datatilsynet, установиха ясен принцип: опцията за отхвърляне на бисквитки трябва да бъде представена със същата видимост като опцията за приемане.

Какво означава това на практика:

• Бутоните за приемане и отхвърляне трябва да са с еднакъв размер. Бутон „Приемане на всички“ с ширина 200 пиксела до текстова връзка „Отхвърляне“ не е равностойна видимост. И двата трябва да са изобразени като бутони със сравними размери.
• И двата бутона трябва да имат сравнима визуална тежест. Ако бутонът за приемане е плътен, висококонтрастен бутон, бутонът за отхвърляне също трябва да е плътен бутон — не с контур, „призрачен“ или само текстов елемент. CNIL наложи глоба конкретно на Google от 150 милиона евро през 2022 г., частично защото опцията за отхвърляне изискваше повече усилия от приемането.
• Цветът не трябва да манипулира. Яркозелен бутон „Приемане“ до сив бутон „Отхвърляне“ е тъмен модел. Използвайте основния цвят на вашата марка и за двата или неутрални цветове и за двата. Визуалният сигнал не трябва да насочва потребителя към един избор.
• Редът на бутоните има по-малко значение, отколкото си мислите. Дали приемането или отхвърлянето е първо не е основната грижа — визуалната тежест е. При това положение, поставянето на бутона за отхвърляне вляво (първи в реда на четене) може да сигнализира неутралност.

Препоръчителен модел за бутони

Съответстващият и лесен за ползване банер обикновено използва три действия:

1. Отхвърляне на всички — плътен бутон
2. Приемане на всички — плътен бутон с равен размер и визуална тежест
3. Управление на предпочитанията — второстепенен бутон или връзка (може да е по-незабележим, тъй като води към втори слой)

Цвят и контраст

Изборът на цветове в банерите за бисквитки служи за две цели: консистентност на марката и четимост. От гледна точка на съответствието, ключовите изисквания са:

• Контраст на текста. Целият текст в банера трябва да отговаря на изискванията за контраст на WCAG 2.1 AA: минимално съотношение на контраста 4,5:1 за нормален текст и 3:1 за едър текст. Това важи за описанието на целта, надписите на бутоните и връзките.
• Контраст на бутоните. Фоновете на бутоните трябва да имат достатъчен контраст спрямо фона на банера, а текстът на бутоните трябва да има достатъчен контраст спрямо фона на бутона. Проверете внимателно и двата слоя.
• Видимост на връзките. Връзките към вашата политика за бисквитки и политика за поверителност трябва да са визуално разграничими от заобикалящия текст — обикновено чрез цвят и подчертаване.
• Фон. Фонът на банера трябва да осигурява достатъчен контраст спрямо заобикалящата го среда. Ако банерът припокрива съдържанието на страницата, уверете се, че припокриването е достатъчно непрозрачно, така че текстът на банера да се чете независимо от съдържанието на страницата отдолу.

Често използван подход е бял или много светъл фон за банера, тъмен текст за четимост и основния цвят на вашата марка за бутоните. Това обикновено дава силни съотношения на контраста и чист, професионален вид.

Текст и микротекстове

Текстът във вашия банер за бисквитки трябва да е юридически достатъчен, но също така да е четим за нетехническа аудитория. Съображение 39 на GDPR изрично изисква информацията за обработката на данни да се предоставя на „ясен и разбираем език“.

Заглавие

Поддържайте го просто и директно. Ефективни примери:

• „Използваме бисквитки“
• „Предпочитания за бисквитки“
• „Вашите избори за поверителност“

Избягвайте неясен или уклончив език като „Ценим вашата поверителност“ — това не казва на потребителя нищо действено.

Описание на целта

С едно до три изречения обяснете какви бисквитки използвате и защо. Бъдете конкретни:

„Използваме основни бисквитки, за да работи този сайт. Бихме искали да използваме и аналитични бисквитки, за да разберем как използвате нашия сайт, както и маркетингови бисквитки, за да ви показваме подходящо съдържание. Можете да приемете всички, да отхвърлите всички или да управлявате предпочитанията си.“

Това е кратко, конкретно и действено. Сравнете го със, за съжаление, честото:

„Този уебсайт използва бисквитки, за да гарантира, че получавате най-доброто изживяване. Като продължавате да използвате този сайт, вие се съгласявате с използването на бисквитки от наша страна.“

Вторият пример не съответства на изискванията: той предполага съгласие чрез продължаване на браузването (невалидно съгласно GDPR), не уточнява целите и не предлага избор.

Надписи на бутоните

Надписите на бутоните трябва да са недвусмислени:

• „Приемане на всички“ и „Отхвърляне на всички“ — ясен, паралелен език
• „Управление на предпочитанията“ или „Персонализиране“ — за опцията за настройки
• Избягвайте: „ОК“, „Разбрах“, „Продължи“, „Разбирам“ — те са двусмислени и не представляват конкретно съгласие

Дизайн с приоритет на мобилни устройства

Над 60% от уеб трафика е мобилен. Вашият банер за бисквитки ще се вижда на екрани с ширина едва 320 пиксела. Ако проектирате първо за настолен компютър и адаптирате за мобилни устройства, почти сигурно ще завършите с пренаселено, неизползваемо мобилно изживяване.

Съображения за мобилен дизайн:

• Подредете бутоните вертикално. Хоризонталните редове от бутони, които работят на настолен компютър, стават нечетими на мобилни устройства. Подредете бутоните за приемане, отхвърляне и настройки вертикално с оформление на цялата ширина.
• Зони за докосване. Бутоните трябва да са поне 44x44 пиксела (WCAG 2.5.5, ниво AAA) или минимум 24x24 пиксела (WCAG 2.5.8, ниво AA). На мобилни устройства по-голямото винаги е по-добро — стремете се към височина от 48 пиксела или повече.
• Покритие на екрана. На мобилни устройства банерът за бисквитки лесно може да покрие 60–80% от видимата област. Това е приемливо за първоначален подканващ прозорец, но банерът не трябва да прави сайта напълно неизползваем. Ако използвате модален прозорец, уверете се, че потребителите все още могат да разпознаят, че са на правилния сайт.
• Размер на текста. Никога не слизайте под 14 пиксела за основен текст или 12 пиксела за второстепенен текст на мобилни устройства. Потребителите не бива да мащабират, за да прочетат банера ви.
• Поведение при превъртане. Ако съдържанието на банера ви надвишава височината на видимата област на мобилни устройства (особено панелът за предпочитания), то трябва да може да се превърта в рамките на банера. Не допускайте съдържанието на банера да излиза извън екрана, без начин да се стигне до бутоните за приемане/отхвърляне.

UX на превключвателите за категории

Панелът за предпочитания — вторият слой на многослойния банер — е мястото, където потребителите правят подробни избори. Стандартният модел използва превключватели за категории: по един превключвател на всяка категория бисквитки (необходими, аналитични, маркетингови, предпочитания), всеки с надпис и описание.

Насоки за дизайн на превключвателите:

• Визуалните състояния трябва да са недвусмислени. Включено (дадено съгласие) и изключено (отказано съгласие) трябва да са ясно разграничими чрез цвят, позиция и в идеалния случай надпис („Вкл.“ / „Изкл.“ или отметка / X). Не разчитайте само на цвета — това не работи за потребители с цветна слепота.
• Необходимите бисквитки трябва да са включени и деактивирани. Категорията „Строго необходими“ трябва да е с включен превключвател, който е визуално деактивиран (в сиво или с икона на катинар), с бележка, обясняваща, че тези бисквитки не могат да бъдат деактивирани, защото са необходими за функционирането на сайта.
• Състоянието по подразбиране за несъществените категории трябва да е изключено. Предварително отметнатите превключватели представляват предварително избрано съгласие, което е изрично забранено с решението на Съда на ЕС по делото Planet49.
• Описанията на категориите трябва да са четими за хора. „Аналитични бисквитки“ е надпис. „Помогнете ни да разберем как посетителите взаимодействат с нашия уебсайт, като събираме анонимни данни за използването“ е описание. Осигурете и двете.
• Разгъваеми списъци с бисквитки. Под всяка категория осигурете разгъваем раздел, който изброява отделните бисквитки: име, доставчик, цел и продължителност. Това ниво на прозрачност все повече се очаква от органите за защита на данните.

Дизайн на панела за настройки/предпочитания

Панелът за предпочитания е критичен компонент. Когато потребител кликне върху „Управление на предпочитанията“, той активно се ангажира със своите избори за поверителност — това е потребителят, който искате да третирате с най-голямо уважение.

• Ясно заглавие. „Предпочитания за бисквитки“ или „Управление на вашата поверителност“ — направете очевидно за какво е предназначен този панел.
• Бутон за запазване. Забележим бутон „Запазване на предпочитанията“, който потвърждава подробните избори на потребителя. Този бутон трябва да е лесно достъпен без прекомерно превъртане.
• Приемане на всички и Отхвърляне на всички трябва да останат налични. Дори в панела за предпочитания осигурете бутони за бърз достъп за приемане на всички или отхвърляне на всички. Някои потребители отварят панела от любопитство, но все пак искат бързо действие.
• Поведение при затваряне. Ако потребител затвори панела за предпочитания без да запази, третирайте това като липса на дадено съгласие — не задавайте несъществени бисквитки. Не хващайте потребителите в капана на панела.

Персонализиране на марката при запазване на съответствието

Вашият банер за бисквитки трябва да изглежда като част от уебсайта ви, а не като намеса на трета страна. Повечето платформи за управление на съгласието позволяват персонализиране на цветове, шрифтове, разположение на логото и текст. Използвайте това, за да съгласувате банера с идентичността на вашата марка.

Персонализирането на марката обаче не трябва да компрометира съответствието:

• Можете да използвате цветовете на вашата марка, но бутоните все пак трябва да имат равна визуална тежест.
• Можете да използвате шрифта на вашата марка, но текстът все пак трябва да е четим при използваните размери.
• Можете да добавите логото си, но то не трябва да избутва критичното съдържание (описание на целта, бутони) под видимата линия.
• Можете да персонализирате текста, но той все пак трябва да е конкретен, точен и пълен.

Изисквания за достъпност на банерите за бисквитки

Банер за бисквитки, който не е достъпен, не съответства на изискванията — както съгласно законодателството за поверителност (потребителят не може да даде информирано съгласие, ако не може да възприеме или използва банера), така и съгласно законодателството за достъпност (Европейския акт за достъпност и националните закони срещу дискриминацията на хората с увреждания).

Изисквания на WCAG AA

• Навигация с клавиатура. Всеки интерактивен елемент — бутони, превключватели, връзки, икони за затваряне — трябва да е достъпен и управляем чрез клавиатура. Редът на табулиране трябва да е логичен (обикновено: текст за целта, след това отхвърляне, после приемане, после управление на предпочитанията).
• Управление на фокуса. Когато банерът се появи, фокусът трябва да се премести към него (или той трябва да бъде обявен). Когато банерът бъде затворен, фокусът трябва да се върне към основното съдържание. Индикаторите за фокус трябва да са видими.
• Поддръжка на екранни четци. Банерът трябва да използва подходящи ARIA роли и надписи. Използвайте role="dialog" и aria-label="Cookie consent" за контейнера на банера. Бутоните трябва да имат достъпни имена. Състоянията на превключвателите трябва да се обявяват (aria-checked).
• Контраст на цвета. Целият текст и интерактивните елементи трябва да отговарят на съотношенията за контраст на WCAG 2.1 AA (4,5:1 за нормален текст, 3:1 за едър текст и UI компоненти).
• Без капани за клавиатурата. Потребителите трябва да могат да навигират извън банера. Макар че модалният прозорец може да ограничи фокуса до банера (хващането на фокуса за модални прозорци е приет модел), винаги трябва да има начин банерът да бъде затворен и да се стигне до съдържанието на страницата.
• Движение. Ако банерът използва анимации (плъзгане, избледняване), спазвайте медийната заявка prefers-reduced-motion и осигурете алтернатива с намалено или без движение.

Тестване на достъпността на вашия банер

1. Навигирайте през целия банер само с клавиатурата (Tab, Enter, Space, Escape).
2. Тествайте с екранен четец (VoiceOver на macOS, NVDA на Windows).
3. Проверете контраста на цвета с инструмент като WebAIM Contrast Checker.
4. Тествайте при 200% мащабиране — банерът трябва да остане използваем.
5. Тествайте на мобилни устройства с активиран VoiceOver или TalkBack.

Тестване и итерация

Банерът за бисквитки не е елемент от типа „настрой и забрави“. Поведението на потребителите, регулациите и използването на бисквитки на вашия сайт се променят с течение на времето. Планирайте текущо тестване:

• Проценти на съгласие. Проследявайте какъв процент от потребителите приемат, отхвърлят или персонализират. Ако процентът ви на отхвърляне е подозрително нисък (под 10%), възможно е банерът ви да използва тъмни модели — независимо дали умишлено или не.
• Проценти на взаимодействие. Проследявайте колко потребители взаимодействат с панела за предпочитания. Ниската ангажираност може да означава, че опцията „Управление на предпочитанията“ не е достатъчно видима.
• A/B тестване. Тествайте различни текстове, надписи на бутони и оформления. Целта не е да максимизирате процентите на съгласие — а да максимизирате процентите на информирано съгласие. Банер, с който повече потребители се ангажират, е по-добър банер.
• Регулаторни актуализации. Наблюдавайте насоките от съответните за вас органи за защита на данните. Тълкуванията при прилагането се развиват и вашият банер трябва да се развива с тях.
• Одити на бисквитки. Редовно сканирайте сайта си за нови бисквитки. Ако добавите нов аналитичен инструмент или маркетингов пиксел, категориите на банера ви трябва да бъдат актуализирани, за да ги отразят.

Passiro предоставя автоматизирано сканиране на бисквитки и анализ на процентите на съгласие, за да ви помогне да поддържате банера си точен и ефективен. Научете повече за управлението на съгласието с Passiro.