Banners de cookies: ejemplos de diseño

Un buen diseño de banner de cookies ofrece a las personas opciones comprensibles, funciona en una pantalla pequeña y deja un camino claro para volver a las preferencias. Cada ejemplo de abajo muestra cuándo es útil el diseño, una decisión de diseño que importa y una cosa que probar en un móvil o en el recorrido del visitante.

Los seis diseños son conceptos originales dibujados para este artículo. No son capturas de pantalla de webs de clientes ni ganadores probados en conversión.

1. La tienda independiente: una tarjeta inferior compacta

Una tarjeta blanca con un borde fino se sitúa en la parte inferior de la pantalla, claramente separada de la página que hay detrás. La explicación es breve y las opciones principales están juntas.

• Útil cuando: las fotos de producto ya aportan la personalidad visual y muchos visitantes llegan directamente a páginas de producto.
• Decisión de diseño: coloca «Aceptar todo» y «Rechazar todo» uno al lado del otro, con el mismo tamaño y estilo, y deja que se apilen con el mismo ancho en el móvil. Mantén visible «Gestionar preferencias» como tercera opción.
• Prueba: en una página de producto real y en un móvil, comprueba que la tarjeta no tapa «Añadir a la cesta», el total de la cesta ni un botón de chat. Con el teclado, comprueba que el foco nunca desaparece detrás de la tarjeta; la orientación del W3C sobre el foco oculto usa los banners de cookies como ejemplo.

2. La web de servicios B2B: una barra discreta a todo lo ancho

Una barra sobria en la parte inferior de la página usa los colores neutros de la web y un color de acento. Las finalidades se explican con el lenguaje sencillo que usarías en una conversación comercial.

• Útil cuando: los visitantes llegan para entender un servicio y después pasan a un formulario de contacto o de demostración, así que el banner no debería competir con la oferta.
• Decisión de diseño: dedica el espacio a descripciones claras de las finalidades, como qué mide la analítica y si usas publicidad, en lugar de a un titular grande.
• Prueba: sigue en un móvil el recorrido de un posible cliente, desde la página de destino hasta el formulario enviado. El titular y el botón del formulario deben seguir siendo accesibles, y la etiqueta de conversión del formulario debe respetar la opción elegida.

3. La agencia creativa: marco expresivo, opciones neutras

Una web llena de color puede tener igualmente una interfaz de consentimiento tranquila. La personalidad va en el fondo de la tarjeta, el borde o el titular; las etiquetas de las acciones siguen siendo sencillas.

• Útil cuando: la marca es atrevida y una simple caja gris quedaría fuera de lugar.
• Decisión de diseño: aplica el color de marca al marco, no a un solo botón. Las dos opciones principales reciben el mismo tratamiento; nuestro análisis de patrones oscuros repasa las trampas que debes evitar.
• Prueba: comprueba cada etiqueta sobre el fondo de marca con la orientación del W3C sobre contraste y luego mira el banner en un móvil sobre la parte más cargada de tu página de inicio.

4. El medio digital: espacio para el detalle sin un muro de texto

Los medios digitales suelen trabajar con muchos proveedores y finalidades. La primera capa plantea la decisión con claridad; una vista de detalle recoge la información sobre proveedores y finalidades.

• Útil cuando: la web se financia con publicidad, trabaja con varios socios publicitarios o usa un marco como IAB TCF.
• Decisión de diseño: mantén el texto legible y deja que la vista de detalle cumpla su función, en lugar de comprimir una larga explicación sobre proveedores en una tarjeta pequeña. Si usas IAB TCF, sus textos y controles obligatorios condicionan el diseño, así que confírmalos antes de darle estilo.
• Prueba: en un móvil, abre los detalles, busca un proveedor, cambia una finalidad y guarda. Después vuelve a abrir los ajustes y comprueba que el cambio se ha mantenido.

5. El negocio pensado para el móvil: acciones apiladas y foco visible

Diseña primero para la pantalla más pequeña que admitas. Apila las acciones a todo lo ancho y dale espacio a cada una.

• Útil cuando: la mayoría de los visitantes llegan desde el móvil, por ejemplo desde campañas en redes sociales o para reservar un servicio local.
• Decisión de diseño: haz que cada opción sea un área táctil cómoda y que la opción de rechazar sea tan fácil de alcanzar como la de aceptar, sin desplazarse dentro del banner. El tamaño mínimo de objetivo del W3C es de 24 por 24 píxeles CSS; cuanto más grande, más fácil de pulsar.
• Prueba: amplía la pantalla y gira el móvil a horizontal; todas las opciones deben seguir siendo accesibles. Después completa el banner en un ordenador usando solo el teclado y comprueba que el foco está siempre visible.

Una maqueta limpia no es una prueba de accesibilidad. Lo que hay que comprobar es la página en funcionamiento, en dispositivos reales.

6. La web internacional: un diseño que resiste la traducción

Las etiquetas cortas en inglés pueden volverse mucho más largas en otro idioma. Deja un espacio flexible en lugar de un ancho fijo y estrecho alrededor del texto original.

• Útil cuando: la web atiende a visitantes en varios idiomas, como una tienda que envía a toda Europa.
• Decisión de diseño: elige un diseño en el que los botones puedan pasar a otra línea o apilarse cuando las etiquetas crecen, y traduce todo el panel: finalidades, ajustes, botones y enlaces a las políticas.
• Prueba: previsualiza cada idioma admitido en un móvil con el navegador configurado en ese idioma. Un titular traducido encima de controles sin traducir ofrece a los visitantes una experiencia incompleta.

El idioma y la geografía resuelven problemas distintos. Un visitante que habla alemán no está necesariamente en Alemania, y un visitante de EE. UU. puede preferir el español. Mantén la selección de idioma separada de la configuración regional del consentimiento.

Una revisión de diseño que puedes terminar de una sentada

• Lee todas las etiquetas en un móvil sin ampliar la pantalla.
• Compara la visibilidad de las opciones de aceptar y rechazar.
• Comprueba el contraste del texto en cada botón y cada fondo.
• Completa el recorrido de preferencias usando solo el teclado.
• Vuelve a abrir los ajustes después de que se cierre el banner.
• Revisa cada idioma admitido en busca de textos que falten o aparezcan cortados.
• Confirma que los controles importantes de la web siguen siendo utilizables.

Después, pide a alguien que no haya diseñado el banner que explique qué significa cada opción. Esa conversación suele revelar más que otra ronda de ajustes de color.