Psychologia w UX i na frontendzie: perswazja, której możesz bronić

Każdy interfejs coś komuś sprzedaje: kolejność planów, plan zaznaczony z góry, liczba pod gwiazdkami. Ktoś wybrał każdą z tych rzeczy i często był to programista, który pisał komponent. Większości psychologii, która za nimi stoi, da się używać uczciwie, a granica jest prosta: prawdziwe dane, pełna cena i „nie” tak samo łatwe jak „tak”. Tę samą granicę wyznacza prawo UE, a UOKiK karze sklepy, które ją przekraczają.

TL;DR

• Na ekranach najwięcej robi osiem efektów: awersja do straty, niedobór, dowód społeczny, kotwiczenie, ustawienia domyślne, efekt wabika, gradient celu i wzajemność.
• Uczciwa wersja czyta prawdziwe dane: stan magazynu, odliczanie do faktycznego końca oferty, przekreśloną cenę, która była najniższą ceną z 30 dni.
• Nieuczciwa je wymyśla. Wytyczne UE zakazują fałszywych liczników i zmyślonych liczb, a UOKiK ukarał polski sklep za zegary, które odliczały w kółko.

To nie jest porada prawna: jestem programistą, który przeczytał źródła. Jeśli od strony z cennikiem zależy Twój biznes, zapytaj prawnika.

Dlaczego to problem programisty frontendu?

Bo te decyzje lądują w kodzie. Który przycisk opcji ma checked, czy pole wyboru startuje zaznaczone, skąd pochodzi przekreślona cena: to propsy, wartości domyślne i powiązania z danymi.

Wytyczne Komisji Europejskiej do dyrektywy o nieuczciwych praktykach handlowych (UCPD) mówią to bez owijania w bawełnę: „W dyrektywie o nieuczciwych praktykach handlowych nie wymaga się zamiaru stosowania praktyk typu »dark patterns«”. Dark pattern wdrożony przypadkiem nadal jest dark patternem.

W zwykłym sklepie zastosowanie ma przede wszystkim UCPD, którą w Polsce wdraża ustawa o przeciwdziałaniu nieuczciwym praktykom rynkowym. Akt o usługach cyfrowych (DSA) też zakazuje zwodniczych interfejsów (art. 25), ale tylko na platformach internetowych (bez mikro i małych) i nie tam, gdzie stosuje się UCPD lub RODO.

Doszedłem do tego z dwóch stron. Pierwsza to dwa kursy na Udemy w 2025 roku, z psychologii marketingu i UX writingu (są w moim CV). Druga to moja aplikacja Linkoglot, w której darmowy okres próbny przechodzi w subskrypcję. Mój test dla każdego komponentu, który ma przekonywać: czy byłbym spokojny, gdyby użytkownik przeczytał jego kod?

Które efekty najczęściej widać na ekranach?

Efekt	Co mówi źródło	Uczciwe użycie	Nieuczciwe użycie
Awersja do straty	Straty ważą więcej niż równe im zyski (Kahneman i Tversky, 1979)	Powiedz wprost, co ktoś zachowa, a co straci	Zawstydzanie na przycisku „nie”
Niedobór	Chcemy bardziej tego, czego może zabraknąć (Cialdini)	Informacja o stanie z prawdziwego magazynu	Licznik, który startuje od nowa przy każdej wizycie
Dowód społeczny	Patrzymy na zachowanie innych, żeby zdecydować o swoim (NN/g)	Prawdziwa liczba opinii ze źródłem	Wymyślone „ogląda teraz 12 osób”
Kotwiczenie	Decyzję opieramy na jednej informacji, „kotwicy” (NN/g)	Przekreślona cena, która naprawdę obowiązywała	Cena „regularna”, której nikt nigdy nie zapłacił
Ustawienia domyślne	Ludzie zostają przy tym, co ustawione z góry (NN/g)	Domyślna opcja, która pasuje większości	Zaznaczony z góry płatny dodatek
Efekt wabika	Opcja wyraźnie gorsza od jednej z pozostałych zwiększa szansę wyboru tej lepszej (Huber, Payne i Puto, 1982)	Trzy prawdziwe plany, porównane rzetelnie	Plan, który istnieje tylko po to, żeby go odrzucić
Gradient celu	Przyspieszamy, im bliżej nagrody (Kivetz, Urminsky i Zheng, 2006)	Pasek postępu liczony z prawdziwych kroków	„90% gotowe”, kiedy tak nie jest
Wzajemność	Czujemy się zobowiązani oddać to, co dostaliśmy najpierw (Cialdini)	Okres próbny, który naprawdę się przydaje	„Prezent”, pod którym kryje się subskrypcja

Gdzie widać je na tej stronie?

Ta strona sprzedaje jedną rzecz, rozmowę o pracy, i trzyma się tych samych zasad:

Strona CV

Formularz

• Żadnej deklaracji bez faktu. Nagłówek mówi „Zatrudnij mnie” tylko wtedy, gdy w ustawieniach jest zaznaczone, że szukam pracy. Po wyłączeniu tej opcji ten sam przycisk nazywa się „Kontakt”.
• Pełny koszt z góry. Przycisk PDF na stronie CV pokazuje rozmiar pliku, odczytany z samego pliku podczas budowania strony.
• Nic nie jest wybrane za Ciebie. Tematy nad formularzem kontaktowym są opcjonalne i żaden nie startuje zaznaczony.
• Awersja do straty, która uspokaja. Gdy wiadomości nie da się wysłać, tekst zostaje w polu, a komunikat błędu to mówi. Pod przyciskiem wysyłki jedna linijka mówi, do czego posłuży Twój adres.

Jak działa ten formularz, z błędem włącznie, opisuję w tekście formularz kontaktowy na stronie statycznej.

Jak pokazać niedobór i nie skłamać?

Niedobór działa tylko wtedy, gdy jest prawdziwy, więc komponent nie powinien się renderować bez prawdy. Ta informacja o stanie bierze liczbę z magazynu, a bez niej nie pokazuje niczego:

---
// StockNote.astro: liczba pochodzi z magazynu albo nic się nie renderuje.
interface Props {
  stock: number | null; // null = w tej chwili nie wiemy
  threshold?: number;
}
const { stock, threshold = 5 } = Astro.props;
const low = stock !== null && stock > 0 && stock <= threshold;
---

{low && <p class="stock-note">Na stanie: {stock} szt.</p>}

Na stronie statycznej liczba wpisana w czasie budowania się starzeje. Renderuj stronę na żądanie, pobieraj stan i pokazuj, kiedy go sprawdzono, albo zrezygnuj z tej informacji.

Z odliczaniem jest tak samo: termin pochodzi z danych, z których korzysta koszyk. Nieuczciwa wersja to jedna linijka, świeże piętnaście minut przy każdym wczytaniu strony:

const endsAt = new Date(Date.now() + 15 * 60_000); // termin, który nigdy nie nadchodzi

Wytyczne zakazują w każdych okolicznościach fałszywego „tylko przez ograniczony czas” (załącznik I, nr 7) i dodają: „Dotyczy to na przykład fałszywych liczników czasu i informacji o ograniczonej ilości towaru na stronach internetowych”. W maju 2025 roku UOKiK nałożył prawie 15 mln zł kary na Azagroup, właściciela sklepów born2be.pl i renee.pl. Towary były w promocji przez cały czas, a zegary odliczające resetowano. UOKiK zaznaczył, że decyzja jest nieprawomocna.

Jak uczciwie korzystać z dowodu społecznego?

Pokazuj liczby z własnej bazy i mów, skąd pochodzą: „4,6 na podstawie 312 opinii z potwierdzonych zamówień” (liczby wymyślone), z linkiem do opisu, jak opinie są weryfikowane.

Od dyrektywy Omnibus ten link jest obowiązkowy: przedsiębiorca, który udostępnia opinie, musi poinformować, czy i jak sprawdza, że pochodzą od prawdziwych klientów (art. 7 ust. 6 UCPD). Fałszywe opinie, a także zapewnianie, że opinie są prawdziwe, bez ich sprawdzenia, są zakazane wprost (załącznik I, nr 23b i 23c).

NN/g wskazuje uczciwe ryzyko: dowód społeczny może zadziałać odwrotnie, gdy pokazuje, że coś podoba się zbyt małej liczbie osób. Poczekaj, aż liczba będzie warta pokazania, i nie zaokrąglaj jej w górę. A plakietka „ogląda teraz 12 osób” wymyślona w przeglądarce podpada pod „podawanie niedokładnych informacji o warunkach rynkowych” (załącznik I, nr 18).

Jak tabela cen powinna używać kotwic i wabików?

Kotwica to pierwsza liczba, którą ktoś zobaczy, i to ona ustawia odbiór kolejnej, na przykład cena pierwotna obok ceny po obniżce. Którą cenę pierwotną wolno pokazać, określa prawo UE. Art. 6a dyrektywy w sprawie podawania cen mówi: „Wcześniejsza cena oznacza najniższą cenę stosowaną przez podmiot gospodarczy w okresie, który nie może być krótszy niż 30 dni przed zastosowaniem obniżki ceny”. Dodała go dyrektywa Omnibus, a w Polsce to art. 4 ustawy o informowaniu o cenach towarów i usług, który obejmuje także usługi.

Przekreślona liczba pochodzi więc z historii cen:

---
interface Props {
  price: number;
  lowest30: number; // najniższa cena z 30 dni przed obniżką
  locale: string; // "pl-PL", "en-GB"...
  currency: string; // "PLN", "EUR"...
}
const { price, lowest30, locale, currency } = Astro.props;
const money = new Intl.NumberFormat(locale, { style: "currency", currency });
const off = Math.floor((1 - price / lowest30) * 100);
---

<p class="price">
  <strong>{money.format(price)}</strong>
  <del><span class="sr-only">Najniższa cena z 30 dni przed obniżką: </span>{money.format(lowest30)}</del>
  <span>-{off}%</span>
</p>

Intl.NumberFormat daje polskiej stronie przecinek dziesiętny i „zł” bez ręcznego formatowania. Math.floor zaokrągla rabat w dół, więc etykieta nigdy nie obiecuje więcej, niż wynika z rachunku. A że większość czytników ekranu domyślnie nie ogłasza <del> (MDN), ukryty tekst mówi, która cena jest stara.

W styczniu 2026 roku UOKiK nałożył za naruszenie tej zasady prawie 31 mln zł kary na Zalando i prawie 6 mln zł na Whaleco (Temu). Zalando liczyło rabaty od cen „regularnych” zamiast od najniższej ceny z 30 dni, a u Temu tej ceny czasem brakowało albo była błędna. Obie decyzje są nieprawomocne.

Przy przełączniku „miesięcznie / rocznie” uczciwą kotwicą jest cena miesięczna, którą naprawdę pobierasz, razy dwanaście, a karta planu rocznego podaje pełną kwotę pobieraną raz w roku. Wytyczne wymagają, by konsumentowi wyraźnie wskazać zarówno kwotę jednorazową, jak i kwoty płatności cyklicznych.

Wabiki to przypadek subtelniejszy. Huber, Payne i Puto pokazali w 1982 roku, że opcja wyraźnie gorsza od jednego planu (ale nie od drugiego) przesuwa wybory w stronę planu, który ją pokonuje. Mój test: jeśli ktoś kupi środkowy plan, czy chętnie go dostarczę? Jeśli plan istnieje tylko po to, żeby go odrzucić, wycinam go.

Czy domyślne opcje i zaznaczone pola są dozwolone?

Ustawienia domyślne mają siłę, bo ludzie przy nich zostają, jak pisał Jakob Nielsen w 2005 roku. Dopuszczał zaznaczenie z góry planu rocznego w subskrypcji, z jednym zastrzeżeniem: jeśli zawsze ustawiasz domyślnie najdroższą opcję, tracisz wiarygodność.

Tam, gdzie chodzi o pieniądze, prawo jest surowsze: wytyczne przypominają, że art. 22 dyrektywy w sprawie praw konsumentów zakazuje pobierania opłat za dodatkowe usługi przez z góry zaznaczone pola. Tę samą zasadę stosuję do zgód na newsletter: pole, które trzeba odznaczyć, to nie jest wybór, którego ktoś dokonał.

<label>
  <input type="checkbox" name="newsletter" />
  Wysyłaj mi comiesięczny newsletter (wypiszesz się jednym kliknięciem)
</label>

Bez checked, a etykieta mówi, jak to cofnąć.

Jak paski postępu korzystają z gradientu celu?

Im bliżej celu, tym bardziej się staramy. W badaniu Kivetza, Urminsky'ego i Zhenga klienci kawiarni, których karta na 12 pieczątek miała już 2 przybite, szybciej robili potrzebne 10 zakupów niż ci ze zwykłą kartą na 10 pieczątek. Ta sama praca, ale wydawało się, że jest się dalej. W długim formularzu uczciwa wersja liczy prawdziwe kroki:

const required = [...form.querySelectorAll<HTMLInputElement>("input[required]")];
const bar = form.querySelector<HTMLProgressElement>("progress")!;

const update = () => {
  bar.max = required.length;
  bar.value = required.filter((input) => input.value.trim() !== "").length;
};
form.addEventListener("input", update);
update();

Natywny <progress> z <label> jest dostępny od ręki (MDN). Fory są w porządku, jeśli są prawdziwe, na przykład pola wypełnione przy rejestracji. Pasek, który na pierwszym ekranie skacze do 80%, pożycza efekt, nie płacąc za niego.

Kiedy awersja do straty zamienia się w zawstydzanie?

Straty ważą więcej niż równe im zyski, więc „Stracisz zapisane listy” działa mocniej niż „Zachowaj zapisane listy”. Powiedzenie, co ktoś straci, to informacja. Pisanie „nie” tak, żeby człowiek poczuł się źle, już nie. Wytyczne mówią, że wzbudzanie u konsumenta poczucia winy (ang. confirmshaming) może stanowić praktykę agresywną w rozumieniu art. 8 UCPD.

Przycisk odmowy mówi „Nie, dziękuję”, nigdy „Nie, nie chcę uczyć się szybciej”. Rezygnacja wygląda tak:

1. 01 Anuluj subskrypcję Przycisk mówi, co robi, i łatwo go znaleźć, tak samo jak ten, który subskrypcję zostawia.
2. 02 Jeden uczciwy ekran Co się zmieni i kiedy. Bez pętli i bez zawstydzania.
3. 03 Gotowe Nie więcej kroków, niż wymagał zapis.

Wytyczne ujmują ostatni krok jako zasadę: „anulowanie subskrypcji powinno być równie łatwe, jak jej rozpoczęcie”. Podają też „jeden przycisk bardzo widoczny, inny ukryty” jako przykład praktyki manipulacyjnej.

A wzajemność i darmowe okresy próbne?

Daj najpierw coś użytecznego, na przykład okres próbny, w którym produkt pokazuje, co potrafi, a ludzie chętniej się odwdzięczą. Pułapką staje się wtedy, gdy pod prezentem kryje się umowa: wytyczne opisują „wprowadzające w błąd bezpłatne okresy próbne i pułapki subskrypcyjne”. Ekran taki jak w Linkoglocie sprawdzam pod czterema kątami:

• Pierwszy ekran oferty mówi, kiedy kończy się okres próbny i zaczyna płatna subskrypcja.
• Pokazana cena to cena, która zostanie pobrana, za okres, w lokalnym formacie.
• Przycisk zamówienia mówi, że rozpoczyna płatną subskrypcję.
• Jak zrezygnować, jest napisane obok oferty, a nie tylko w regulaminie.

Ograniczenia

• Przeczytałem przepisy, wytyczne Komisji i strony UOKiK, ale nie orzecznictwo. Decyzje UOKiK, które cytuję, były w chwili ogłoszenia nieprawomocne.
• Badania to konkretne eksperymenty, jak karta lojalnościowa w kawiarni. Pokazują, że efekty istnieją, a nie to, jak duże będą na Twojej stronie.
• Przykłady z tej strony to cztery szczegóły, a nie audyt każdego ekranu.

Jeśli budujesz ekrany, które mają kogoś przekonać, napisz do mnie, gdzie Ty stawiasz te granice. Więcej o aplikacji z subskrypcją przeczytasz we wpisie o tym, jak w pojedynkę wypuściłem Linkoglota, a inny przepis UE czytany prosto ze źródła w tekście o analityce bez cookies w Polsce.

Źródła

1. Kahneman, D. i Tversky, A. (1979). Prospect Theory: An Analysis of Decision under Risk. Econometrica 47(2), 263-291 (otwiera się w nowej karcie) (dostęp: 7 października 2026)
2. Prospect Theory and Loss Aversion: How Users Make Decisions (Nielsen Norman Group) (otwiera się w nowej karcie) (dostęp: 7 października 2026)
3. Dr. Robert Cialdini's Seven Principles of Persuasion (Influence at Work) (otwiera się w nowej karcie) (dostęp: 7 października 2026)
4. Social Proof in the User Experience (Nielsen Norman Group) (otwiera się w nowej karcie) (dostęp: 7 października 2026)
5. The Anchoring Principle (Nielsen Norman Group) (otwiera się w nowej karcie) (dostęp: 7 października 2026)
6. The Power of Defaults (Nielsen Norman Group) (otwiera się w nowej karcie) (dostęp: 7 października 2026)
7. Huber, J., Payne, J. W. i Puto, C. (1982). Adding Asymmetrically Dominated Alternatives. Journal of Consumer Research 9(1), 90-98 (otwiera się w nowej karcie) (dostęp: 7 października 2026)
8. Kivetz, R., Urminsky, O. i Zheng, Y. (2006). The Goal-Gradient Hypothesis Resurrected. Journal of Marketing Research 43(1), 39-58 (otwiera się w nowej karcie) (dostęp: 7 października 2026)
9. Zawiadomienie Komisji 2021/C 526/01: Wytyczne dotyczące wykładni i stosowania dyrektywy 2005/29/WE (EUR-Lex) (otwiera się w nowej karcie) (dostęp: 7 października 2026)
10. Rozporządzenie (UE) 2022/2065 (akt o usługach cyfrowych), EUR-Lex (otwiera się w nowej karcie) (dostęp: 7 października 2026)
11. Dyrektywa (UE) 2019/2161 (dyrektywa Omnibus), EUR-Lex (otwiera się w nowej karcie) (dostęp: 7 października 2026)
12. UOKiK: Informacje o obniżkach cen (portal Prawa konsumenta) (otwiera się w nowej karcie) (dostęp: 7 października 2026)
13. UOKiK: Endless "promotions", decision by the President of UOKiK (27.05.2025) (otwiera się w nowej karcie) (dostęp: 7 października 2026)
14. Decyzja Prezesa UOKiK nr RKR-1/2025 (Azagroup) z 21 maja 2025 r. (otwiera się w nowej karcie) (dostęp: 7 października 2026)
15. UOKiK: Lowest price in the 30 days before the discount, penalties for Zalando and Temu (14.01.2026) (otwiera się w nowej karcie) (dostęp: 7 października 2026)
16. <del>: The Deleted Text element (MDN) (otwiera się w nowej karcie) (dostęp: 7 października 2026)
17. <progress>: The Progress Indicator element (MDN) (otwiera się w nowej karcie) (dostęp: 7 października 2026)