← Tutti gli articoli

Tutorial

Disattivare i dark pattern: falsa urgenza, caselle subdole

"Solo 2 rimasti in magazzino." "12 persone stanno guardando questo articolo in questo momento." Un timer di conto alla rovescia che si azzera ogni volta che ricarichi. Una casella pre-spuntata che aggiunge un'assicurazione che non hai mai chiesto. Questi sono dark pattern — trucchi di interfaccia progettati per metterti fretta e ingannarti. Questo articolo mostra come neutralizzare quelli piu comuni con CSS e JavaScript cosi puoi fare acquisti a mente lucida.

Cosa conta come dark pattern

Un dark pattern e una scelta di UI che avvantaggia l'azienda a tue spese sfruttando il funzionamento dell'attenzione e dei valori predefiniti. Quelli che vale la pena disarmare su una pagina di acquisto:

Non puoi impedire a un sito di essere progettato cosi, ma puoi modificare come viene renderizzato nel tuo browser.

Riconoscere un finto conto alla rovescia

Una scadenza reale e la stessa per tutti e sopravvive a una ricarica. Una falsa si azzera. Test rapido: annota il timer, ricarica la pagina, guarda di nuovo. Se e tornato a "05:00", e teatro. Apri i DevTools, pannello Elements, e trova l'elemento il cui testo conta alla rovescia — annota la sua classe.

Nascondere i widget di falsa urgenza con CSS

La soluzione piu rapida e far sparire del tutto i widget di pressione. Sono quasi sempre elementi nettamente separati e chiamati con il loro nome reale:

/* Fake urgency, scarcity and social-proof widgets */
.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;
}

Come sempre, il flag i rende il matching degli attributi senza distinzione tra maiuscole e minuscole. Inizia con questo blocco; ripulisce il rumore visibile sulla maggior parte delle pagine di vendita all'istante.

Congelare un conto alla rovescia invece di nasconderlo

A volte vuoi vedere che un saldo esiste ma non essere messo fretta da un orologio che ticchetta. Congelalo: ferma lo script che lo aggiorna. L'approccio diretto e affidabile e neutralizzare le funzioni del timer prima che parta lo script della pagina, a document_start:

// Freeze countdowns: defang the timers the page uses to tick
const realSetInterval = window.setInterval;

window.setInterval = function (fn, delay, ...args) {
  // Block fast-ticking timers (countdowns update ~every second)
  if (delay && delay <= 1000) {
    console.log('[dark-patterns] blocked a 1s interval');
    return -1;            // a harmless fake id
  }
  return realSetInterval.call(this, fn, delay, ...args);
};

Questo e volutamente ampio — ferma ogni intervallo sotto il secondo, che su una pagina di prodotto e quasi sempre un conto alla rovescia. Se congela qualcosa che ti serve, restringilo controllando fn.toString() per parole chiave come countdown prima di bloccarlo.

Un'alternativa piu delicata: lascia girare il timer ma fissa una volta il suo testo mostrato, poi ferma gli aggiornamenti a quel nodo:

// Pin the countdown text and stop it changing
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 });
}

Deselezionare le caselle di extra subdole

Il dark pattern piu costoso e la casella pre-spuntata: assicurazione di spedizione, un "arrotonda per beneficenza", un abbonamento ricorrente. E spuntata per impostazione predefinita e formulata cosi da farti sorvolare. Deselezionale con JavaScript dopo il caricamento della pagina:

// Un-tick pre-checked add-on checkboxes
function unchargeMe() {
  document.querySelectorAll('input[type="checkbox"]:checked')
    .forEach(box => {
      const label = (box.closest('label')?.textContent
        || box.parentElement?.textContent || '').toLowerCase();

      // Only touch boxes that smell like a paid add-on
      if (/insurance|protection|warranty|donation|round up|express|priority|membership|subscribe/.test(label)) {
        box.checked = false;
        // Fire events so the page recalculates the 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();
// Re-run when the cart re-renders
new MutationObserver(unchargeMe)
  .observe(document.body, { childList: true, subtree: true });

Gli eventi change e input contano — senza di essi il totale della pagina potrebbe includere ancora l'extra anche se la casella sembra deselezionata. Verifica sempre che il prezzo si sia aggiornato.

Disinnescare la formulazione del confirmshaming

Non puoi riscrivere facilmente il testo, ma puoi impedire al confirmshaming di fare il suo lavoro: rendi l'opzione di rifiuto visibile e neutrale quanto quella di accettazione. Se un sito imposta lo stile di "No grazie" come minuscolo testo grigio, ridisegnalo:

/* Make the decline link a normal, readable button */
.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;
}

Circoscriverlo con JustZix

Alcune di queste regole sono aggressive — bloccare gli intervalli sotto il secondo potrebbe influire su un widget ad aggiornamento dal vivo che vuoi davvero. Quindi circoscrivile. Crea una cartella chiamata "Anti dark-pattern" e aggiungi una regola per ogni sito di acquisto che usi, ciascuna con un pattern di URL ristretto. Disattiva l'intera cartella quando non stai facendo acquisti. Ottieni un checkout piu calmo senza effetti collaterali altrove.

Vedi anche

Fare acquisti dovrebbe essere una decisione, non una reazione. Installa JustZix, incolla il blocco CSS sopra e guarda la pressione artificiale svanire da ogni pagina di prodotto che visiti.

Valuta questo articolo

Nessuna valutazione — sii il primo.

Provalo tu stesso

Installa JustZix e incolla qualsiasi snippet di questo articolo. Due minuti da zero a una regola funzionante su tutti i tuoi dispositivi.

Ottieni JustZix

Funzionalità · Come funziona · Esempi · Casi d'uso