Boas Práticas de Design de Banners de Cookies

O seu banner de cookies é uma das primeiras coisas que um visitante vê. Molda a perceção que este tem da sua marca, a confiança no seu negócio e — o que é crucial — determina se o consentimento é juridicamente válido. Um banner bem concebido garante a conformidade sem gerar atrito. Um banner mal concebido ou afasta os utilizadores ou produz um consentimento que não resistirá ao escrutínio regulatório.

Este guia aborda os princípios de design, os padrões de UX e os requisitos de acessibilidade que distinguem um banner de cookies em conformidade e prático de uma potencial responsabilidade jurídica.

As Primeiras Impressões Contam

A investigação demonstra de forma consistente que os utilizadores tomam decisões sobre banners de cookies em dois a três segundos. A maioria dos utilizadores não lê o texto completo. Procuram padrões reconhecíveis — botões, seletores, linguagem familiar — e agem por instinto. Isto significa que o design visual do seu banner tem tanto peso quanto o seu conteúdo jurídico.

O objetivo é tornar a ação correta óbvia e as opções disponíveis claras à primeira vista. Se um utilizador tiver de pensar sobre o que fazer, o seu design falhou.

Princípios essenciais para as primeiras impressões:

• Clareza acima de originalidade. Um banner de cookies não é o lugar para textos criativos ou interfaces pouco convencionais. Use padrões familiares que os utilizadores reconheçam.
• Hierarquia visual. Os elementos mais importantes — a descrição da finalidade e os botões de ação — devem ser os mais destacados. Os elementos secundários (link para definições, link para a política) podem ter menos destaque, mas continuam a ter de estar visíveis.
• Espaço em branco. Um banner sobrecarregado é opressivo. Dê espaço aos elementos para respirar. O espaçamento e as margens transmitem profissionalismo e facilitam a leitura do conteúdo.

Hierarquia dos Botões e Peso Visual

É aqui que a maioria dos banners de cookies falha na conformidade — e onde é aplicada a maioria das coimas.

As Diretrizes 05/2020 do CEPD sobre o consentimento, bem como várias ações de fiscalização por parte da CNIL, do Garante italiano e do Datatilsynet dinamarquês, estabeleceram um princípio claro: a opção de rejeitar cookies deve ser apresentada com o mesmo destaque que a opção de os aceitar.

O que isto significa na prática:

• Os botões de aceitar e rejeitar têm de ter o mesmo tamanho. Um botão "Aceitar tudo" com 200 píxeis de largura ao lado de um link de texto "Rejeitar" não constitui igualdade de destaque. Ambos têm de ser apresentados como botões de dimensões comparáveis.
• Ambos os botões têm de ter peso visual comparável. Se o seu botão de aceitar for um botão preenchido de alto contraste, o botão de rejeitar também tem de ser um botão preenchido — e não um elemento com contorno, transparente ou apenas texto. A CNIL aplicou especificamente uma coima de 150 milhões de euros à Google em 2022, em parte porque a opção de rejeitar exigia mais esforço do que a de aceitar.
• A cor não deve manipular. Um botão "Aceitar" verde vivo ao lado de um botão "Rejeitar" cinzento é um padrão obscuro (dark pattern). Use a cor principal da sua marca em ambos, ou cores neutras em ambos. O sinal visual não deve orientar o utilizador para uma escolha.
• A ordem dos botões importa menos do que imagina. Que a opção de aceitar ou rejeitar apareça primeiro não é a preocupação principal — o peso visual é. Dito isto, colocar o botão de rejeitar à esquerda (primeiro na ordem de leitura) pode transmitir neutralidade.

Padrão de Botões Recomendado

Um banner em conformidade e prático usa normalmente três ações:

1. Rejeitar tudo — um botão preenchido
2. Aceitar tudo — um botão preenchido do mesmo tamanho e peso visual
3. Gerir preferências — um botão ou link secundário (pode ter menos destaque, uma vez que conduz a uma segunda camada)

Cor e Contraste

As escolhas de cor nos banners de cookies servem dois propósitos: coerência da marca e legibilidade. Do ponto de vista da conformidade, os requisitos essenciais são:

• Contraste do texto. Todo o texto do banner tem de cumprir os requisitos de contraste WCAG 2.1 AA: um rácio de contraste mínimo de 4,5:1 para texto normal e 3:1 para texto grande. Isto aplica-se à descrição da finalidade, às etiquetas dos botões e aos links.
• Contraste dos botões. Os fundos dos botões têm de ter contraste suficiente relativamente ao fundo do banner, e o texto dos botões tem de ter contraste suficiente relativamente ao fundo do botão. Verifique ambas as camadas.
• Visibilidade dos links. Os links para a sua política de cookies e política de privacidade têm de ser visualmente distinguíveis do texto circundante — normalmente através de cor e sublinhado.
• Fundo. O fundo do banner tem de proporcionar contraste suficiente em relação ao que o rodeia. Se o seu banner se sobrepõe ao conteúdo da página, garanta que a sobreposição é suficientemente opaca para que o texto do banner seja legível, independentemente do conteúdo da página subjacente.

Uma abordagem comum é usar um fundo branco ou muito claro para o banner, texto escuro para legibilidade e a cor principal da sua marca para os botões. Isto produz normalmente rácios de contraste fortes e um aspeto limpo e profissional.

Texto e Microtexto

O texto do seu banner de cookies tem de ser juridicamente suficiente, mas também tem de ser legível por um público não técnico. O Considerando 39 do RGPD exige explicitamente que a informação sobre o tratamento de dados seja fornecida em "linguagem clara e simples".

Título

Mantenha-o simples e direto. Exemplos eficazes:

• "Utilizamos cookies"
• "Preferências de cookies"
• "As suas escolhas de privacidade"

Evite linguagem vaga ou evasiva como "Valorizamos a sua privacidade" — isto não diz ao utilizador nada de acionável.

Descrição da Finalidade

Em uma a três frases, explique que cookies utiliza e porquê. Seja específico:

"Utilizamos cookies essenciais para o funcionamento deste site. Gostaríamos também de usar cookies de análise para compreender como utiliza o nosso site, e cookies de marketing para lhe mostrar conteúdo relevante. Pode aceitar todos, rejeitar todos ou gerir as suas preferências."

Isto é conciso, específico e acionável. Compare com o infelizmente comum:

"Este website utiliza cookies para garantir que tem a melhor experiência. Ao continuar a utilizar este site, concorda com a nossa utilização de cookies."

O segundo exemplo não está em conformidade: presume o consentimento através da continuação da navegação (não válido nos termos do RGPD), não especifica as finalidades e não oferece uma escolha.

Etiquetas dos Botões

As etiquetas dos botões devem ser inequívocas:

• "Aceitar tudo" e "Rejeitar tudo" — linguagem clara e paralela
• "Gerir preferências" ou "Personalizar" — para a opção de definições
• Evite: "OK", "Percebi", "Continuar", "Compreendo" — são ambíguas e não constituem consentimento específico

Design Mobile-First

Mais de 60% do tráfego web é móvel. O seu banner de cookies será visto em ecrãs tão pequenos como 320 píxeis de largura. Se conceber primeiro para desktop e depois adaptar para dispositivos móveis, acabará quase de certeza com uma experiência móvel sobrecarregada e inutilizável.

Considerações de design móvel:

• Empilhe os botões verticalmente. As filas horizontais de botões que funcionam no desktop tornam-se ilegíveis no telemóvel. Empilhe os botões de aceitar, rejeitar e definições verticalmente, com uma disposição de largura total.
• Áreas de toque. Os botões têm de ter pelo menos 44x44 píxeis (WCAG 2.5.5, Nível AAA) ou, no mínimo, 24x24 píxeis (WCAG 2.5.8, Nível AA). No telemóvel, maior é sempre melhor — procure atingir 48 píxeis ou mais de altura.
• Cobertura do ecrã. No telemóvel, um banner de cookies pode facilmente cobrir 60-80% da área visível. Isto é aceitável para um aviso inicial, mas o banner não pode tornar o site completamente inutilizável. Se usar uma sobreposição modal, garanta que os utilizadores conseguem identificar que estão no site correto.
• Tamanho do texto. Nunca desça abaixo de 14 píxeis para o texto principal ou 12 píxeis para o texto secundário no telemóvel. Os utilizadores não devem precisar de fazer zoom para ler o seu banner.
• Comportamento de deslocamento. Se o conteúdo do seu banner exceder a altura da área visível no telemóvel (especialmente o painel de preferências), tem de ser possível deslocá-lo dentro do banner. Não deixe que o conteúdo do banner ultrapasse o ecrã sem forma de chegar aos botões de aceitar/rejeitar.

UX dos Seletores de Categoria

O painel de preferências — a segunda camada de um banner por camadas — é onde os utilizadores fazem escolhas granulares. O padrão habitual usa seletores de categoria: um seletor por categoria de cookies (necessários, análise, marketing, preferências), cada um com uma etiqueta e uma descrição.

Diretrizes de design para seletores:

• Os estados visuais têm de ser inequívocos. Ativado (consentimento dado) e desativado (consentimento não dado) têm de ser claramente distinguíveis através da cor, da posição e, idealmente, de uma etiqueta ("Ativado" / "Desativado" ou um visto / X). Não confie apenas na cor — isto falha para os utilizadores daltónicos.
• Os cookies necessários devem estar ativados e desativados para edição. A categoria "Estritamente necessários" deve estar ativada com o seletor visualmente inativo (esbatido ou com um ícone de cadeado), com uma nota a explicar que estes cookies não podem ser desativados por serem necessários ao funcionamento do site.
• O estado predefinido para as categorias não essenciais tem de ser desativado. Os seletores pré-selecionados constituem consentimento previamente dado, o que é explicitamente proibido pelo acórdão Planet49 do TJUE.
• As descrições das categorias devem ser legíveis por humanos. "Cookies de análise" é uma etiqueta. "Ajudam-nos a compreender como os visitantes interagem com o nosso website, recolhendo dados de utilização anónimos" é uma descrição. Forneça ambos.
• Listas de cookies expansíveis. Em cada categoria, forneça uma secção expansível que liste os cookies individuais: nome, fornecedor, finalidade e duração. Este nível de transparência é cada vez mais esperado pelas autoridades de proteção de dados.

Design do Painel de Definições/Preferências

O painel de preferências é um componente crítico. Quando um utilizador clica em "Gerir preferências", está ativamente a envolver-se com as suas escolhas de privacidade — é o utilizador que deve tratar com maior respeito.

• Cabeçalho claro. "Preferências de cookies" ou "Gerir a sua privacidade" — deixe óbvia a finalidade deste painel.
• Botão de guardar. Um botão "Guardar preferências" bem destacado que confirme as escolhas granulares do utilizador. Este botão tem de estar facilmente acessível sem deslocamento excessivo.
• Aceitar tudo e Rejeitar tudo devem permanecer disponíveis. Mesmo no painel de preferências, forneça botões de atalho para aceitar tudo ou rejeitar tudo. Alguns utilizadores abrem o painel por curiosidade, mas ainda assim querem uma ação rápida.
• Comportamento ao fechar. Se um utilizador fechar o painel de preferências sem guardar, trate isto como ausência de consentimento — não defina cookies não essenciais. Não prenda os utilizadores no painel.

Personalização de Marca sem Comprometer a Conformidade

O seu banner de cookies deve parecer parte do seu website, e não uma intrusão de terceiros. A maioria das plataformas de gestão de consentimento permite personalizar cores, tipos de letra, colocação do logótipo e texto. Utilize isto para alinhar o banner com a identidade da sua marca.

No entanto, a personalização de marca não pode comprometer a conformidade:

• Pode usar as cores da sua marca, mas os botões têm de manter igualdade de peso visual.
• Pode usar o tipo de letra da sua marca, mas o texto tem de continuar legível nos tamanhos utilizados.
• Pode adicionar o seu logótipo, mas este não pode empurrar o conteúdo crítico (descrição da finalidade, botões) para fora da área visível.
• Pode personalizar o texto, mas este tem de continuar específico, exato e completo.

Requisitos de Acessibilidade para Banners de Cookies

Um banner de cookies que não é acessível não está em conformidade — nem ao abrigo da legislação de privacidade (o utilizador não poderia dar um consentimento informado se não conseguisse percecionar ou operar o banner) nem ao abrigo da legislação de acessibilidade (o European Accessibility Act e as leis nacionais de não discriminação da deficiência).

Requisitos WCAG AA

• Navegação por teclado. Todos os elementos interativos — botões, seletores, links, ícones de fechar — têm de ser alcançáveis e operáveis através do teclado. A ordem de tabulação tem de ser lógica (normalmente: texto da finalidade, depois rejeitar, depois aceitar, depois gerir preferências).
• Gestão do foco. Quando o banner surge, o foco deve mover-se para ele (ou este deve ser anunciado). Quando o banner é dispensado, o foco deve regressar ao conteúdo principal. Os indicadores de foco têm de ser visíveis.
• Suporte a leitores de ecrã. O banner tem de usar funções (roles) e etiquetas ARIA adequadas. Utilize role="dialog" e aria-label="Cookie consent" para o contentor do banner. Os botões têm de ter nomes acessíveis. Os estados dos seletores têm de ser anunciados (aria-checked).
• Contraste de cor. Todo o texto e elementos interativos têm de cumprir os rácios de contraste WCAG 2.1 AA (4,5:1 para texto normal, 3:1 para texto grande e componentes de interface).
• Sem armadilhas de teclado. Os utilizadores têm de conseguir navegar para fora do banner. Embora uma sobreposição modal possa restringir o foco ao banner (o aprisionamento do foco em modais é um padrão aceite), tem de existir sempre uma forma de dispensar o banner e chegar ao conteúdo da página.
• Movimento. Se o banner usar animações (deslizar, desvanecer), respeite a media query prefers-reduced-motion e forneça uma alternativa com movimento reduzido ou sem movimento.

Testar a Acessibilidade do Seu Banner

1. Navegue por todo o banner usando apenas o teclado (Tab, Enter, Espaço, Escape).
2. Teste com um leitor de ecrã (VoiceOver no macOS, NVDA no Windows).
3. Verifique o contraste de cor com uma ferramenta como o WebAIM Contrast Checker.
4. Teste com zoom a 200% — o banner deve permanecer utilizável.
5. Teste no telemóvel com o VoiceOver ou o TalkBack ativado.

Testes e Iteração

Um banner de cookies não é um elemento que se configura e esquece. O comportamento dos utilizadores, os regulamentos e a utilização de cookies do seu site mudam todos com o tempo. Planeie testes contínuos:

• Taxas de consentimento. Monitorize a percentagem de utilizadores que aceitam, rejeitam ou personalizam. Se a sua taxa de rejeição for suspeitamente baixa (inferior a 10%), o seu banner pode estar a usar padrões obscuros — intencionalmente ou não.
• Taxas de interação. Monitorize quantos utilizadores interagem com o painel de preferências. Um baixo envolvimento pode indicar que a opção "Gerir preferências" não está suficientemente visível.
• Testes A/B. Teste diferentes textos, etiquetas de botões e disposições. O objetivo não é maximizar as taxas de consentimento — é maximizar as taxas de consentimento informado. Um banner com o qual mais utilizadores se envolvem é um banner melhor.
• Atualizações regulatórias. Acompanhe as orientações das autoridades de proteção de dados relevantes para si. As interpretações de fiscalização evoluem, e o seu banner deve evoluir com elas.
• Auditorias de cookies. Analise regularmente o seu site em busca de novos cookies. Se adicionar uma nova ferramenta de análise ou pixel de marketing, as categorias do seu banner têm de ser atualizadas para o refletir.

A Passiro fornece análise automática de cookies e estatísticas de taxas de consentimento para o ajudar a manter o seu banner exato e eficaz. Saiba mais sobre a gestão de consentimento da Passiro.