Wyłącz dark patterns: fałszywą pilność, podstępne checkboxy
„Zostały tylko 2 sztuki w magazynie.” „12 osób ogląda to teraz.” Timer odliczający, który resetuje się przy każdym przeładowaniu. Wstępnie zaznaczone pole dodające ubezpieczenie, o które nigdy nie prosiłeś. To dark patterns — sztuczki interfejsu zaprojektowane, aby Cię popędzać i oszukiwać. Ten artykuł pokazuje, jak zneutralizować te najczęstsze za pomocą CSS i JavaScriptu, abyś mógł robić zakupy z trzeźwą głową.
Co liczy się jako dark pattern
Dark pattern to wybór UI, który przynosi korzyść biznesowi Twoim kosztem, wykorzystując sposób działania uwagi i ustawień domyślnych. Te warte rozbrojenia na stronie sklepu:
- Fałszywa pilność — timery odliczające, „promocja kończy się za 04:59”, które restartują się przy przeładowaniu.
- Fałszywy niedobór — „zostały tylko 2”, „szybko się sprzedaje”, liczby niemające związku z prawdziwym stanem magazynu.
- Fałszywy dowód społeczny — „12 osób ogląda to teraz”, losowe i niemożliwe do zweryfikowania.
- Przemycanie do koszyka — wstępnie zaznaczone dodatki: ubezpieczenie, darowizny, dostawa ekspresowa.
- Confirmshaming — link odmowy sformułowany tak, by Cię zawstydzić: „Nie, dziękuję, nie lubię oszczędzać pieniędzy”.
Nie powstrzymasz strony przed projektowaniem jej w ten sposób, ale możesz zmienić to, jak renderuje się w Twojej przeglądarce.
Wykrywanie fałszywego odliczania
Prawdziwy termin jest taki sam dla wszystkich i przeżywa przeładowanie. Fałszywy się resetuje. Szybki test: zanotuj timer, przeładuj stronę, spójrz ponownie. Jeśli wskoczył z powrotem na „05:00”, to teatr. Otwórz DevTools, panel Elements, i znajdź element, którego tekst odlicza — zanotuj jego klasę.
Ukrywanie widżetów fałszywej pilności za pomocą CSS
Najszybszy fix to sprawić, by widżety nacisku zniknęły całkowicie. Prawie zawsze są to czysto wydzielone, nazwane wprost elementy:
/* 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;
}Jak zawsze, flaga i sprawia, że dopasowanie atrybutów nie rozróżnia wielkości liter. Zacznij od tego bloku; w mgnieniu oka usuwa widoczny szum z większości stron sklepowych.
Zamrażanie odliczania zamiast jego ukrywania
Czasem chcesz widzieć, że promocja istnieje, ale nie być popędzanym przez tykający zegar. Zamroź go: zatrzymaj skrypt, który go aktualizuje. Bezpośrednie, niezawodne podejście to zneutralizować funkcje timera zanim skrypt strony wystartuje, na 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);
};Jest to celowo szerokie — zatrzymuje każdy interwał poniżej sekundy, który na stronie produktu jest prawie zawsze odliczaniem. Jeśli zamrozi coś, czego potrzebujesz, zawęź to, sprawdzając fn.toString() pod kątem słów kluczowych w stylu countdown przed zablokowaniem.
Łagodniejsza alternatywa: pozwól timerowi działać, ale przypnij raz wyświetlany tekst, a potem zatrzymaj aktualizacje tego węzła:
// 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 });
}Odznaczanie podstępnych pól dodatków
Najdroższy dark pattern to wstępnie zaznaczony checkbox: ubezpieczenie wysyłki, „zaokrąglij na cele charytatywne”, cykliczne członkostwo. Jest zaznaczony domyślnie i sformułowany tak, byś przemknął obok niego wzrokiem. Odznacz je za pomocą JavaScriptu po załadowaniu strony:
// 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 });Zdarzenia change i input mają znaczenie — bez nich suma na stronie może nadal zawierać dodatek, mimo że pole wygląda na odznaczone. Zawsze sprawdzaj, czy cena się zaktualizowała.
Rozbrajanie sformułowań confirmshamingu
Tekstu nie da się łatwo przepisać, ale możesz powstrzymać confirmshaming przed spełnianiem swojej roli: spraw, by opcja odmowy była tak samo widoczna i neutralna jak opcja akceptacji. Jeśli strona stylizuje „Nie, dziękuję” jako maleńki szary tekst, przestyluj go:
/* 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;
}Ograniczanie zasięgu za pomocą JustZix
Niektóre z tych reguł są agresywne — blokowanie interwałów poniżej sekundy mogłoby wpłynąć na widżet aktualizujący się na żywo, który faktycznie chcesz mieć. Więc ogranicz ich zasięg. Utwórz folder o nazwie „Anty dark-patterns” i dodaj jedną regułę na każdy używany sklep, każdą z wąskim wzorcem URL. Wyłącz cały folder, gdy nie robisz zakupów. Zyskasz spokojniejszy checkout bez efektów ubocznych gdzie indziej.
Zobacz też
- Usuwanie miękkich paywalli — te same umiejętności usuwania nakładek.
- Zbuduj watcher ceny i dostępności — śledź prawdziwe ceny zamiast fałszywej pilności.
- Gotowe do wklejenia snippety w sekcji Przykłady.
Zakupy powinny być decyzją, nie reakcją. Zainstaluj JustZix, wklej powyższy blok CSS i patrz, jak wytworzony nacisk znika z każdej strony produktu, którą odwiedzasz.
Oceń ten wpis
Brak ocen — oceń jako pierwszy.