powered by 
Die Seite der AG ist jetzt für alle benutzbar. Ehrlich ist sie noch nicht: Der Cookie-Banner, das Häkchen im Formular und der Countdown sind Dark Patterns, Gestaltung, die Menschen zu etwas bringt, das sie gar nicht wollen. Der Name stammt von dem Designer Harry Brignull, der sie 2010 zu sammeln begann. Das Handbuch zeigt die häufigsten unter Dark Patterns.
Harry Brignull, Designer für Benutzeroberflächen (User Experience) mit einem Doktortitel in Kognitionswissenschaft. Am 28. Juli 2010 meldete er die Website darkpatterns.org an, eine Sammlung von Oberflächen, die Menschen absichtlich täuschen, und gab ihnen damit ihren Namen: Dark Patterns. Heute heißt die Sammlung deceptive.design; 2023 erschien sein Buch »Deceptive Patterns«, und vor Gericht erklärt er als Gutachter, wie solche Tricks wirken.
Ein Häkchen, das schon gesetzt ist, ein Satz mit doppelter Verneinung, eine Frist, die nicht stimmt: Jede dieser Arten steht in seiner Sammlung, mit echten Beispielen großer Firmen.
Foto: Rob Douglas, 2010, CC BY-SA 2.0, zugeschnitten (Wikimedia Commons)
Wenn du den ersten Teil ausgelassen hast, hol dir die Seite wie dort unter Die Seite holen beschrieben.
Der Banner der AG hat einen großen grünen Knopf »Alle akzeptieren« und darunter, klein und hellgrau, »Einstellungen«. Ablehnen steht nirgends. Unten sind zwei Banner nebeneinander, links einer wie auf vielen großen Seiten, rechts ein fairer.
Bevor du es ausprobierst: Wie viele Klicks brauchst du im linken Banner, bis alles abgelehnt ist, was nicht nötig ist?
Die Datenschutz-Grundverordnung verlangt, dass eine Einwilligung freiwillig ist
und dass Ablehnen so leicht geht wie Zustimmen. Bau den Banner der AG um: eine
Frage, die sagt, wofür das Cookie ist, und zwei Knöpfe derselben Art, einer
zum Ablehnen und einer zum Zustimmen. Beide rufen closeBanner() auf.
<div class="cookie-banner" id="banner"> <p>Dürfen wir mit einem Cookie zählen, welche Seiten du liest?</p> <button class="choice" onclick="closeBanner()">Ablehnen</button> <button class="choice" onclick="closeBanner()">Zustimmen</button> </div>
Der Banner in fair-web/index.html hat zwei Knöpfe, Ablehnen und Zustimmen, und keinen kleinen Link mehr.
Im Formular der AG steht neben einem gesetzten Häkchen: »Entfernen Sie das Häkchen nicht, wenn Sie keine Angebote nicht verpassen möchten.« Was passiert, wenn du es stehen lässt und dich anmeldest?
Hier geht es weiter, sobald du deine Antwort oben abgegeben hast.
Wer das Häkchen stehen lässt, bekommt Werbung: »keine Angebote nicht verpassen« heißt »Angebote bekommen«. Die doppelte Verneinung soll verwirren, und das Häkchen ist schon gesetzt, damit nichts tun Zustimmen heißt.
Ein faires Häkchen ist nicht gesetzt, und sein Text sagt geradeaus, was es
bedeutet: »Ja, schickt mir Neuigkeiten der AG per E-Mail.« Nimm checked weg
und schreib den Satz in ein <label> für das Häkchen.
In fair-web/index.html ist kein Häkchen schon gesetzt.
»Nur noch 2 Plätze frei! Die Anmeldung endet in 05:00.« Der rote, blinkende Satz soll Eile machen: Wer Angst hat, etwas zu verpassen, denkt weniger nach.
Bevor du es ausprobierst: Du wartest eine Minute, bis der Countdown bei 04:00 steht, und lädst die Seite dann neu. Was zeigt er?
Hier geht es weiter, sobald du deine Antwort oben abgegeben hast.
Nach dem Neuladen steht wieder 05:00 da. script.js zählt bei jedem Laden von
300 Sekunden herunter; die Anmeldung endet in Wahrheit am 10. Mai, und wie
viele Plätze frei sind, weiß die Seite gar nicht.
Nimm die Zeile mit dem Countdown aus index.html und das Zählen aus
script.js, und schreib stattdessen, was wirklich gilt: »Die Anmeldung ist bis
zum 10. Mai offen.« Wenn die Plätze wirklich knapp sind, darf das dastehen,
aber nur, wenn es stimmt.
In fair-web/index.html steht kein Countdown mehr.
Die AG kostet nichts. Beim Einkaufen im Netz begegnet dir noch ein Muster: Der Preis, mit dem ein Angebot lockt, wächst Schritt für Schritt bis zur Kasse. Wer schon drei Schritte gegangen ist, bricht ungern ab, auch wenn es teurer geworden ist.