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:
- Falsa urgenza — timer di conto alla rovescia, "i saldi finiscono tra 04:59" che riparte alla ricarica.
- Falsa scarsita — "solo 2 rimasti", "vendita veloce", numeri che non hanno alcun legame con l'inventario reale.
- Falsa riprova sociale — "12 persone stanno guardando questo articolo", casuale e non verificabile.
- Inserimento furtivo nel carrello — extra pre-spuntati: assicurazione, donazioni, spedizione espressa.
- Confirmshaming — il link di rifiuto formulato per farti vergognare: "No grazie, non mi piace risparmiare".
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
- Rimuovi i soft paywall — le stesse abilita di rimozione degli overlay.
- Costruisci un monitor di prezzo e disponibilita — traccia i prezzi reali invece della falsa urgenza.
- Snippet pronti da incollare nella sezione Esempi.
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.