Bandeaux de cookies : exemples de design

Un bon design de bandeau de cookies offre des choix compréhensibles, fonctionne sur un petit écran et laisse un chemin clair pour revenir aux préférences. Chaque exemple ci-dessous indique quand la mise en page est utile, un choix de design déterminant et un point à tester sur téléphone ou dans le parcours du visiteur.

Les six mises en page sont des concepts originaux dessinés pour cet article. Ce ne sont ni des captures d’écran de sites clients ni des variantes gagnantes de tests de conversion.

1. La boutique indépendante : une carte compacte en bas de l’écran

Une carte blanche à fine bordure se place en bas de l’écran, nettement séparée de la page en arrière-plan. L’explication est courte et les choix principaux sont regroupés.

• Utile quand : les photos des produits portent déjà la personnalité visuelle et que de nombreux visiteurs arrivent directement sur les pages produits.
• Choix de design : placez « Tout accepter » et « Tout refuser » côte à côte, avec la même taille et le même style, et laissez-les s’empiler à largeur égale sur mobile. Gardez « Gérer les préférences » visible comme troisième choix.
• Test : sur une vraie page produit, sur téléphone, vérifiez que la carte ne masque pas « Ajouter au panier », le total du panier ou un bouton de chat. Au clavier, vérifiez que le focus ne disparaît jamais derrière la carte ; les recommandations du W3C sur le focus masqué prennent les bandeaux de cookies comme exemple.

2. Le site de services B2B : une barre discrète sur toute la largeur

Une barre sobre en bas de la page reprend les couleurs neutres du site et une couleur d’accent. Les finalités sont expliquées dans le langage simple que vous utiliseriez lors d’un échange commercial.

• Utile quand : les visiteurs viennent comprendre un service puis rejoignent un formulaire de contact ou de démo ; le bandeau ne doit donc pas faire concurrence à l’offre.
• Choix de design : consacrez l’espace à des descriptions claires des finalités, par exemple ce que mesure l’outil d’audience et si vous faites de la publicité, plutôt qu’à un grand titre.
• Test : suivez le parcours du prospect sur téléphone, de la page d’atterrissage à l’envoi du formulaire. Le titre et le bouton du formulaire doivent rester accessibles, et la balise de conversion du formulaire doit respecter le choix effectué.

3. L’agence créative : un cadre expressif, des choix neutres

Un site haut en couleur peut tout de même avoir une interface de consentement sobre. La personnalité passe par le fond de la carte, sa bordure ou son titre ; les libellés des actions restent simples.

• Utile quand : la marque est audacieuse et qu’une simple boîte grise ne serait pas à sa place.
• Choix de design : appliquez la couleur de la marque au cadre, pas à un seul bouton. Les deux choix principaux reçoivent le même traitement ; notre analyse des dark patterns présente les pièges à éviter.
• Test : vérifiez chaque libellé sur le fond aux couleurs de la marque au regard des recommandations du W3C sur le contraste, puis affichez le bandeau sur téléphone au-dessus de la partie la plus chargée de votre page d’accueil.

4. Le site média : de la place pour les détails sans pavé de texte

Les éditeurs travaillent souvent avec de nombreux fournisseurs et de nombreuses finalités. Le premier niveau présente clairement la décision ; une vue détaillée contient les informations sur les fournisseurs et les finalités.

• Utile quand : le site est financé par la publicité, travaille avec plusieurs partenaires publicitaires ou utilise un cadre tel que l’IAB TCF.
• Choix de design : gardez un texte lisible et laissez la vue détaillée jouer son rôle, au lieu de comprimer une longue explication sur les fournisseurs dans une petite carte. Si vous utilisez l’IAB TCF, ses textes et commandes obligatoires déterminent le design : confirmez-les avant de travailler le style.
• Test : sur téléphone, ouvrez les détails, trouvez un fournisseur, modifiez une finalité et enregistrez. Rouvrez ensuite les paramètres et vérifiez que la modification a été conservée.

5. L’activité pensée d’abord pour le mobile : actions empilées et focus visible

Concevez d’abord pour le plus petit écran que vous prenez en charge. Empilez les actions sur toute la largeur et laissez de l’espace à chacune.

• Utile quand : la plupart des visiteurs arrivent sur téléphone, par exemple depuis des campagnes sur les réseaux sociaux ou pour réserver un service local.
• Choix de design : faites de chaque choix une cible tactile confortable et gardez l’option de refus aussi facile à atteindre que l’acceptation, sans défilement à l’intérieur du bandeau. La taille de cible minimale selon le W3C est de 24 × 24 pixels CSS ; plus grand, c’est plus facile à toucher.
• Test : zoomez et passez le téléphone en mode paysage ; tous les choix doivent rester accessibles. Parcourez ensuite le bandeau sur ordinateur uniquement au clavier et vérifiez que le focus est toujours visible.

Une maquette soignée n’est pas un test d’accessibilité. C’est la page réelle, sur de vrais appareils, qu’il faut vérifier.

6. Le site international : une mise en page qui résiste à la traduction

Des libellés anglais courts peuvent devenir beaucoup plus longs dans une autre langue. Prévoyez un espace flexible plutôt qu’une largeur fixe étroite autour du texte d’origine.

• Utile quand : le site s’adresse à des visiteurs dans plusieurs langues, comme une boutique qui livre dans toute l’Europe.
• Choix de design : choisissez une mise en page où les boutons peuvent passer à la ligne ou s’empiler quand les libellés s’allongent, et traduisez tout le panneau : finalités, paramètres, boutons et liens vers les politiques.
• Test : prévisualisez chaque langue prise en charge sur un téléphone dont le navigateur est réglé dans cette langue. Un titre traduit au-dessus de commandes non traduites offre aux visiteurs une expérience incomplète.

Langue et géographie répondent à des problèmes différents. Un visiteur germanophone ne se trouve pas forcément en Allemagne, et un visiteur américain peut préférer l’espagnol. Séparez le choix de la langue de la configuration régionale du consentement.

Une revue de design à boucler en une seule séance

• Lisez chaque libellé sur téléphone sans zoomer.
• Comparez la visibilité de l’acceptation et du refus.
• Vérifiez le contraste du texte sur chaque bouton et chaque fond.
• Effectuez tout le parcours des préférences uniquement au clavier.
• Rouvrez les paramètres après la fermeture du bandeau.
• Vérifiez dans chaque langue prise en charge qu’aucun texte ne manque ni n’est coupé.
• Confirmez que les commandes importantes du site restent utilisables.

Demandez ensuite à quelqu’un qui n’a pas conçu le bandeau d’expliquer ce que signifie chaque choix. Cette conversation en révèle souvent plus qu’une nouvelle série d’ajustements de couleurs.