← Todos los artículos

Tutoriales

Desactivar patrones oscuros: urgencia falsa, casillas tramposas

16 mayo 2026 · por JustZix Team

«Solo quedan 2 en stock.» «12 personas están viendo esto ahora mismo.» Un temporizador de cuenta atrás que se reinicia cada vez que recargas. Una casilla premarcada que añade un seguro que nunca pediste. Estos son patrones oscuros — trucos de interfaz diseñados para apresurarte y engañarte. Este artículo muestra cómo neutralizar los más comunes con CSS y JavaScript para que puedas comprar con la cabeza despejada.

¿Qué cuenta como patrón oscuro?

Un patrón oscuro es una decisión de interfaz que beneficia al negocio a tu costa explotando cómo funcionan la atención y los valores por defecto. Los que vale la pena desarmar en una página de compra:

• Urgencia falsa — temporizadores de cuenta atrás, «la oferta termina en 04:59» que se reinicia al recargar.
• Escasez falsa — «solo quedan 2», «se agota rápido», números sin conexión con el inventario real.
• Prueba social falsa — «12 personas están viendo esto», aleatorio e inverificable.
• Cuela-en-el-carrito — extras premarcados: seguro, donaciones, envío exprés.
• Confirmshaming — el enlace de rechazo redactado para avergonzarte: «No gracias, no me gusta ahorrar dinero».

No puedes impedir que un sitio se diseñe así, pero sí puedes editar cómo se renderiza en tu navegador.

Detectar una cuenta atrás falsa

Una fecha límite real es la misma para todos y sobrevive a una recarga. Una falsa se reinicia. Test rápido: anota el temporizador, recarga la página, mira de nuevo. Si saltó de vuelta a «05:00», es teatro. Abre DevTools, panel Elements, y encuentra el elemento cuyo texto va descontando — anota su clase.

Ocultar widgets de urgencia falsa con CSS

El arreglo más rápido es hacer que los widgets de presión desaparezcan por completo. Casi siempre son elementos limpiamente separados y nombrados por lo que son:

/* 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;
}

Como siempre, el flag i hace que la coincidencia de atributos no distinga mayúsculas. Empieza con este bloque; limpia el ruido visible de la mayoría de las páginas de comercio al instante.

Congelar una cuenta atrás en lugar de ocultarla

A veces quieres ver que existe una oferta pero no que te apresure un reloj corriendo. Congélalo: detén el script que lo actualiza. El enfoque contundente y fiable es neutralizar las funciones de temporizador antes de que arranque el script de la página, en 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);
};

Esto es deliberadamente amplio — detiene cada intervalo por debajo del segundo, que en una página de producto casi siempre es una cuenta atrás. Si congela algo que necesitas, acótalo comprobando fn.toString() en busca de palabras clave como countdown antes de bloquear.

Una alternativa más suave: deja que el temporizador corra pero fija su texto mostrado una vez, y luego detén las actualizaciones de ese 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 });
}

Desmarcar casillas tramposas de extras

El patrón oscuro más caro es la casilla premarcada: seguro de envío, un «redondea para una causa benéfica», una membresía recurrente. Está marcada por defecto y redactada para que la pases por alto. Desmárcalas con JavaScript después de que la página cargue:

// 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 });

Los eventos change e input importan — sin ellos el total de la página puede seguir incluyendo el extra aunque la casilla parezca desmarcada. Verifica siempre que el precio se actualizó.

Desactivar la redacción de confirmshaming

No puedes reescribir texto fácilmente, pero sí puedes impedir que el confirmshaming haga su trabajo: haz que la opción de rechazo sea tan visible y neutral como la de aceptar. Si un sitio estiliza «No gracias» como texto gris diminuto, re-estilízalo:

/* 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;
}

Acotarlo con JustZix

Algunas de estas reglas son agresivas — bloquear intervalos por debajo del segundo podría afectar a un widget de actualización en vivo que sí quieres. Así que acótalas. Crea una carpeta llamada «Anti patrones oscuros» y añade una regla por cada sitio de compras que uses, cada una con un patrón de URL ajustado. Desactiva toda la carpeta cuando no estés comprando. Obtienes un checkout más tranquilo sin efectos secundarios en otros sitios.

Mira también

• Eliminar muros de pago blandos — las mismas habilidades de quitar capas.
• Crear un vigilante de precio y stock — sigue precios reales en lugar de urgencia falsa.
• Fragmentos listos para pegar en la sección de Ejemplos.

Comprar debería ser una decisión, no una reacción. Instala JustZix, pega el bloque CSS de arriba y observa cómo la presión fabricada se desvanece de cada página de producto que visitas.