← Tous les articles

Tutoriels

Désactiver les dark patterns : fausse urgence, cases sournoises

16 mai 2026 · par JustZix Team

« Plus que 2 en stock. » « 12 personnes regardent cet article en ce moment. » Un compte à rebours qui se réinitialise à chaque rechargement. Une case pré-cochée qui ajoute une assurance que vous n'avez jamais demandée. Ce sont des dark patterns — des astuces d'interface conçues pour vous presser et vous tromper. Cet article montre comment neutraliser les plus courants avec du CSS et du JavaScript pour que vous puissiez acheter l'esprit clair.

Qu'est-ce qu'un dark pattern

Un dark pattern est un choix d'interface qui profite à l'entreprise à vos dépens en exploitant le fonctionnement de l'attention et des valeurs par défaut. Ceux qu'il vaut la peine de désamorcer sur une page d'achat :

• La fausse urgence — comptes à rebours, « la promo se termine dans 04:59 » qui redémarre au rechargement.
• La fausse rareté — « plus que 2 », « se vend vite », des chiffres sans lien avec le vrai stock.
• La fausse preuve sociale — « 12 personnes regardent ceci », aléatoire et invérifiable.
• L'ajout sournois au panier — options pré-cochées : assurance, dons, livraison express.
• Le confirmshaming — le lien de refus formulé pour vous faire honte : « Non merci, je n'aime pas économiser ».

Vous ne pouvez pas empêcher un site d'être conçu ainsi, mais vous pouvez modifier la façon dont il s'affiche dans votre navigateur.

Repérer un faux compte à rebours

Une vraie échéance est la même pour tout le monde et survit à un rechargement. Une fausse se réinitialise. Test rapide : notez le minuteur, rechargez la page, regardez à nouveau. S'il a sauté à « 05:00 », c'est du théâtre. Ouvrez les DevTools, panneau Elements, et trouvez l'élément dont le texte décompte — notez sa classe.

Masquer les widgets de fausse urgence avec du CSS

La correction la plus rapide est de faire disparaître entièrement les widgets de pression. Ce sont presque toujours des éléments proprement séparés et nommés selon ce qu'ils sont :

/* Widgets de fausse urgence, rarete et preuve sociale */
.countdown-timer,
.sale-timer,
.urgency-banner,
.stock-warning,
.low-stock,
.viewing-now,
.recently-viewed-count,
[class*="countdown" i],
[class*="urgency" i],
[class*="scarcity" i],
[class*="viewers" i],
[class*="people-viewing" i] {
  display: none !important;
}

Comme toujours, le drapeau i rend la correspondance d'attributs insensible à la casse. Commencez par ce bloc ; il nettoie instantanément le bruit visible sur la plupart des pages de vente.

Figer un compte à rebours plutôt que le masquer

Parfois vous voulez voir qu'une promo existe sans être pressé par une horloge qui tourne. Figez-le : arrêtez le script qui le met à jour. L'approche directe et fiable est de neutraliser les fonctions de minuteur avant que le script de la page ne démarre, au moment document_start :

// Fige les comptes a rebours : desarme les minuteurs que la page utilise
const realSetInterval = window.setInterval;

window.setInterval = function (fn, delay, ...args) {
  // Bloque les minuteurs rapides (les comptes a rebours s'actualisent ~chaque seconde)
  if (delay && delay <= 1000) {
    console.log('[dark-patterns] blocked a 1s interval');
    return -1;            // un faux id inoffensif
  }
  return realSetInterval.call(this, fn, delay, ...args);
};

C'est délibérément large — cela arrête chaque intervalle inférieur à la seconde, ce qui sur une page produit est presque toujours un compte à rebours. Si cela fige quelque chose dont vous avez besoin, restreignez-le en vérifiant fn.toString() pour des mots-clés comme countdown avant de bloquer.

Une alternative plus douce : laissez le minuteur tourner mais fixez son texte affiché une fois, puis arrêtez les mises à jour de ce nœud :

// Fixe le texte du compte a rebours et l'empeche de changer
const timer = document.querySelector('[class*="countdown" i]');
if (timer) {
  const frozen = timer.textContent;
  new MutationObserver(() => {
    if (timer.textContent !== frozen) timer.textContent = frozen;
  }).observe(timer, { childList: true, subtree: true, characterData: true });
}

Décocher les cases d'options sournoises

Le dark pattern le plus coûteux est la case pré-cochée : assurance de livraison, un « arrondir pour une œuvre caritative », un abonnement récurrent. Elle est cochée par défaut et formulée pour que vous passiez vite dessus. Décochez-les avec du JavaScript après le chargement de la page :

// Decoche les cases d'options pre-cochees
function unchargeMe() {
  document.querySelectorAll('input[type="checkbox"]:checked')
    .forEach(box => {
      const label = (box.closest('label')?.textContent
        || box.parentElement?.textContent || '').toLowerCase();

      // Ne touche que les cases qui sentent l'option payante
      if (/insurance|protection|warranty|donation|round up|express|priority|membership|subscribe|assurance|abonnement/.test(label)) {
        box.checked = false;
        // Declenche les evenements pour que la page recalcule le total
        box.dispatchEvent(new Event('change', { bubbles: true }));
        box.dispatchEvent(new Event('input', { bubbles: true }));
        console.log('[dark-patterns] un-checked:', label.trim().slice(0, 60));
      }
    });
}

unchargeMe();
// Relance quand le panier se re-rend
new MutationObserver(unchargeMe)
  .observe(document.body, { childList: true, subtree: true });

Les événements change et input comptent — sans eux, le total de la page peut encore inclure l'option même si la case semble décochée. Vérifiez toujours que le prix s'est mis à jour.

Désamorcer la formulation du confirmshaming

Vous ne pouvez pas facilement réécrire le texte, mais vous pouvez empêcher le confirmshaming de faire son travail : rendez l'option de refus aussi visible et neutre que l'option d'acceptation. Si un site stylise « Non merci » en minuscule texte gris, restylez-le :

/* Rend le lien de refus un bouton normal et lisible */
.modal a[class*="decline" i],
.modal button[class*="dismiss" i],
[class*="confirm-shame" i] {
  font-size: 1rem !important;
  color: inherit !important;
  text-decoration: underline !important;
  opacity: 1 !important;
}

Cibler avec JustZix

Certaines de ces règles sont agressives — bloquer les intervalles inférieurs à la seconde pourrait affecter un widget à mise à jour en direct que vous voulez vraiment. Alors ciblez-les. Créez un dossier appelé « Anti dark-patterns » et ajoutez une règle par site d'achat que vous utilisez, chacune avec un motif d'URL serré. Désactivez tout le dossier quand vous ne faites pas d'achats. Vous obtenez un paiement plus calme sans effets de bord ailleurs.

À voir aussi

• Supprimer les paywalls souples — les mêmes compétences de retrait de surcouche.
• Construire un surveillant de prix et de stock — suivez les vrais prix plutôt que la fausse urgence.
• Des snippets prêts à coller dans la section Exemples.

Acheter devrait être une décision, pas une réaction. Installez JustZix, collez le bloc CSS ci-dessus, et regardez la pression fabriquée disparaître de chaque page produit que vous visitez.