← Alle Beiträge

Anleitungen

Dark Patterns abschalten: falsche Dringlichkeit, hinterhältige Checkboxen

16 Mai 2026 · von JustZix Team

„Nur noch 2 auf Lager." „12 Personen schauen sich das gerade an." Ein Countdown-Timer, der bei jedem Neuladen zurückspringt. Eine vorab angekreuzte Box, die eine Versicherung hinzufügt, nach der du nie gefragt hast. Das sind Dark Patterns — Interface-Tricks, die dich hetzen und überlisten sollen. Dieser Artikel zeigt, wie du die häufigsten mit CSS und JavaScript neutralisierst, damit du mit klarem Kopf einkaufen kannst.

Was als Dark Pattern zählt

Ein Dark Pattern ist eine UI-Entscheidung, die dem Unternehmen auf deine Kosten nützt, indem sie ausnutzt, wie Aufmerksamkeit und Voreinstellungen funktionieren. Die, die es auf einer Shopping-Seite zu entschärfen lohnt:

• Falsche Dringlichkeit — Countdown-Timer, „Angebot endet in 04:59", das beim Neuladen neu startet.
• Falsche Knappheit — „nur noch 2 übrig", „verkauft sich schnell", Zahlen ohne Verbindung zum echten Lagerbestand.
• Falscher sozialer Beweis — „12 Personen schauen sich das an", zufällig und unüberprüfbar.
• Heimlich in den Warenkorb — vorab angekreuzte Add-ons: Versicherung, Spenden, Expressversand.
• Confirmshaming — der Ablehnen-Link so formuliert, dass er dich beschämt: „Nein danke, ich spare nicht gern Geld".

Du kannst eine Seite nicht davon abhalten, so gestaltet zu sein, aber du kannst bearbeiten, wie sie in deinem Browser dargestellt wird.

Einen falschen Countdown erkennen

Eine echte Frist ist für alle gleich und überlebt ein Neuladen. Eine falsche springt zurück. Schneller Test: Merk dir den Timer, lade die Seite neu, schau noch mal. Ist er zurück auf „05:00" gesprungen, ist es Theater. Öffne die DevTools, Elements-Panel, und finde das Element, dessen Text herunterzählt — notiere seine Klasse.

Falsche-Dringlichkeit-Widgets mit CSS verstecken

Der schnellste Fix ist, die Druck-Widgets ganz verschwinden zu lassen. Sie sind fast immer sauber abgetrennte, nach ihrem Zweck benannte Elemente:

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

Wie immer macht das i-Flag das Attribut-Matching Groß-/Kleinschreibung-unabhängig. Fang mit diesem Block an; er räumt den sichtbaren Lärm auf den meisten Shop-Seiten sofort weg.

Einen Countdown einfrieren statt verstecken

Manchmal willst du sehen, dass es ein Angebot gibt, aber nicht von einer tickenden Uhr gehetzt werden. Frier ihn ein: Stoppe das Skript, das ihn aktualisiert. Der grobe, zuverlässige Ansatz ist, die Timer-Funktionen zu neutralisieren, bevor das Skript der Seite startet, bei 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);
};

Das ist absichtlich breit — es stoppt jedes Intervall im Sekundenbereich, was auf einer Produktseite fast immer ein Countdown ist. Friert es etwas ein, das du brauchst, verenge es, indem du fn.toString() vor dem Blockieren auf Schlüsselwörter wie countdown prüfst.

Eine sanftere Alternative: Lass den Timer laufen, aber pinne seinen angezeigten Text einmal fest und stoppe dann Updates an diesem Knoten:

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

Häkchen aus hinterhältigen Add-on-Boxen entfernen

Das teuerste Dark Pattern ist die vorab angekreuzte Checkbox: Versandversicherung, ein „auf den nächsten Euro aufrunden", eine wiederkehrende Mitgliedschaft. Sie ist standardmäßig angekreuzt und so formuliert, dass du darüber hinwegliest. Entferne die Häkchen mit JavaScript nach dem Laden der Seite:

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

Die change- und input-Events sind wichtig — ohne sie kann die Seitensumme das Add-on noch enthalten, obwohl die Box ausgekreuzt aussieht. Prüfe immer, ob sich der Preis aktualisiert hat.

Confirmshaming-Formulierungen entschärfen

Text lässt sich nicht leicht umschreiben, aber du kannst Confirmshaming davon abhalten, seinen Job zu tun: Mach die Ablehnen-Option so sichtbar und neutral wie die Annehmen-Option. Stylt eine Seite „Nein danke" als winzigen grauen Text, restyle es:

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

Mit JustZix abgrenzen

Manche dieser Regeln sind aggressiv — das Blockieren von Intervallen im Sekundenbereich könnte ein live aktualisierendes Widget treffen, das du tatsächlich willst. Also grenz sie ab. Erstelle einen Ordner namens „Anti-Dark-Patterns" und füge eine Regel pro Shopping-Seite hinzu, die du nutzt, jede mit einem engen URL-Muster. Schalte den ganzen Ordner aus, wenn du nicht einkaufst. Du bekommst einen ruhigeren Checkout ohne Nebenwirkungen anderswo.

Siehe auch

• Weiche Paywalls entfernen — dieselben Overlay-Entfernungs-Fähigkeiten.
• Einen Preis- und Bestandswächter bauen — verfolge echte Preise statt falscher Dringlichkeit.
• Sofort einsetzbare Snippets im Beispiele-Bereich.

Einkaufen sollte eine Entscheidung sein, keine Reaktion. Installiere JustZix, füge den CSS-Block oben ein und sieh zu, wie der künstliche Druck von jeder Produktseite verschwindet, die du besuchst.