Отключаем тёмные паттерны: фальшивую срочность и скрытые галочки
«Осталось всего 2 штуки». «Прямо сейчас это смотрят 12 человек». Таймер обратного отсчёта, который сбрасывается при каждой перезагрузке. Заранее проставленная галочка, добавляющая страховку, которую ты не просил. Это тёмные паттерны — интерфейсные трюки, созданные, чтобы поторопить и обхитрить тебя. Эта статья показывает, как нейтрализовать самые частые из них с помощью CSS и JavaScript, чтобы ты делал покупки с ясной головой.
Что считается тёмным паттерном
Тёмный паттерн — это решение интерфейса, которое выгодно бизнесу за твой счёт, эксплуатируя то, как работают внимание и значения по умолчанию. Те, что стоит обезвредить на странице магазина:
- Фальшивая срочность — таймеры обратного отсчёта, «распродажа закончится через 04:59», которое стартует заново при перезагрузке.
- Фальшивый дефицит — «осталось всего 2», «быстро раскупают», числа, не связанные с реальным складом.
- Фальшивое социальное доказательство — «это смотрят 12 человек», случайное и непроверяемое.
- Подсовывание в корзину — заранее проставленные допы: страховка, пожертвования, экспресс-доставка.
- Confirmshaming — ссылка отказа, сформулированная так, чтобы пристыдить: «Нет, спасибо, я не люблю экономить».
Ты не можешь помешать сайту быть так спроектированным, но можешь отредактировать то, как он рендерится в твоём браузере.
Как распознать фальшивый отсчёт
Настоящий дедлайн одинаков для всех и переживает перезагрузку. Фальшивый — сбрасывается. Быстрый тест: запомни таймер, перезагрузи страницу, посмотри снова. Если он прыгнул назад на «05:00» — это театр. Открой DevTools, панель Elements, и найди элемент, чей текст тикает вниз, — запомни его класс.
Прячем виджеты фальшивой срочности с помощью CSS
Самое быстрое решение — заставить виджеты давления исчезнуть полностью. Они почти всегда аккуратно отделены и названы так, как они есть на самом деле:
/* 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;
}Как всегда, флаг i делает совпадение по атрибутам регистронезависимым. Начни с этого блока; он мгновенно убирает видимый шум на большинстве торговых страниц.
Замораживаем отсчёт вместо того, чтобы прятать его
Иногда хочется видеть, что распродажа существует, но не подгоняться тикающими часами. Заморозь их: останови скрипт, который их обновляет. Грубый, надёжный подход — нейтрализовать функции таймеров до того, как стартует скрипт страницы, на 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);
};Это намеренно широко — оно останавливает каждый интервал короче секунды, который на странице товара почти всегда является отсчётом. Если оно заморозит что-то нужное, сузь его, проверяя fn.toString() на ключевые слова вроде countdown перед блокировкой.
Более мягкая альтернатива: дай таймеру работать, но один раз закрепи отображаемый текст, а затем останови обновления этого узла:
// 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 });
}Снимаем скрытые галочки допов
Самый дорогой тёмный паттерн — заранее проставленная галочка: страховка доставки, «округлить в пользу благотворительности», повторяющееся членство. Она отмечена по умолчанию и сформулирована так, чтобы ты проскользнул мимо. Сними их с помощью JavaScript после загрузки страницы:
// 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 });События change и input важны — без них итог страницы может по-прежнему включать доп, хотя галочка выглядит снятой. Всегда проверяй, что цена обновилась.
Обезвреживаем формулировки confirmshaming
Переписать текст легко не получится, но можно помешать confirmshaming делать своё дело: сделай вариант отказа таким же заметным и нейтральным, как вариант согласия. Если сайт стилизует «Нет, спасибо» как крошечный серый текст, перестилизуй его:
/* 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;
}Ограничиваем область действия с помощью JustZix
Часть этих правил агрессивна — блокировка интервалов короче секунды может затронуть живо обновляемый виджет, который тебе как раз нужен. Поэтому ограничь область. Создай папку под названием «Анти-тёмные-паттерны» и добавь по одному правилу на каждый магазин, которым ты пользуешься, у каждого — узкий URL-паттерн. Выключай всю папку, когда не покупаешь. Ты получаешь более спокойное оформление заказа без побочных эффектов в других местах.
Смотри также
- Убираем мягкие пейволлы — те же навыки удаления оверлея.
- Собери наблюдатель цены и наличия — следи за реальной ценой вместо фальшивой срочности.
- Готовые к вставке сниппеты в разделе «Примеры».
Покупка должна быть решением, а не реакцией. Установи JustZix, вставь CSS-блок выше — и смотри, как искусственное давление исчезает с каждой страницы товара, которую ты открываешь.
Оцени эту статью
Оценок пока нет — оцени первым.