Zum Hauptinhalt springen
Banner-Design

Cookie-Banner: Manipulative Designs erkennen

Ihr Cookie-Banner sollte eine Entscheidung leicht machen. Wenn das Ablehnen Detektivarbeit erfordert, sollten Sie sich das Design noch einmal ansehen.

Dark Patterns sind Gestaltungsentscheidungen in Benutzeroberflächen, die Menschen zu einer Entscheidung lenken, die sie sonst vielleicht nicht treffen würden. In einem Cookie-Banner kann das bedeuten, die Ablehnung zu verstecken, optionale Zwecke vorauszuwählen oder schwer verständlich zu formulieren. Eine hohe Akzeptanzrate sagt Ihnen nicht, ob die Besucher die Entscheidung verstanden haben.

Für Teams mit Besuchern aus Europa ist der Bericht der Cookie-Banner-Taskforce des Europäischen Datenschutzausschusses (EDSA) eine nützliche Referenz. Er hält die Mindestpositionen fest, auf die sich die europäischen Datenschutzbehörden bei der Bearbeitung einer Reihe von Beschwerden über Cookie-Banner geeinigt haben. Nationale Vorschriften und Leitlinien gelten zusätzlich, sodass dasselbe Layout nicht in jedem Land gleich beurteilt wird.

Zu jedem der folgenden Muster gibt es eine kurze Problembeschreibung und eine konkrete Lösung. Die Lösungen sind unsere praktischen Empfehlungen; wo ein Punkt aus dem Gesetz oder aus Leitlinien von Behörden stammt, sagen wir das.

Illustration mit dem Titel „Beide Optionen leicht auffindbar machen“: Ein Banner mit der Markierung „Schwer abzulehnen“ hat einen großen Button „Alle akzeptieren“ und einen blassen Link zu den Einstellungen; ein Banner mit der Markierung „Klare Auswahl“ zeigt „Alle akzeptieren“ und „Optionale ablehnen“ als gleichwertige Buttons.
Zwei beispielhafte Cookie-Banner vergleichen einen versteckten Ablehnungslink mit gleich gut sichtbaren Buttons „Alle akzeptieren“ und „Optionale ablehnen“.

1. Die Ablehnungsoption ist da, aber schwer zu sehen

In der Mitte sitzt ein großer Button „Alle akzeptieren“. Die Alternative ist ein blasser Link in einem Absatz. Technisch können Besucher ablehnen, aber zuerst müssen sie die Option entdecken.

Problem: Die Ablehnung sieht nicht wie eine Wahlmöglichkeit aus. Sie ist wie Fließtext gestaltet, abseits der Buttons platziert oder in der Erklärung versteckt, und auf dem Smartphone kann sie ganz verschwinden.

Lösung: Machen Sie die Ablehnung zu einem Button neben „Alle akzeptieren“, in derselben Größe und Form. Auf Mobilgeräten stapeln Sie beide Buttons in voller Breite übereinander. Ein Kollege sollte die Ablehnung auf einem Smartphone ohne Hinweis finden.

Die Taskforce des EDSA nannte dies als Beispiel für ein Design, das nicht zu einer wirksamen Einwilligung führt: Die einzige Alternative zur Einwilligung ist ein in den Text eingebetteter „Ablehnen“-Link ohne ausreichende visuelle Hervorhebung, die die Aufmerksamkeit eines durchschnittlichen Nutzers darauf lenken würde.

In Frankreich hat die CNIL mehrere Website-Betreiber im Dezember 2024 angewiesen, Banner zu ändern, bei denen die Ablehnungsoption ein in die Informationen eingebetteter Link war oder deutlich weniger hervorgehoben wurde als das Akzeptieren, weil das Ablehnen nicht so einfach war wie das Akzeptieren.

Bei diesem Muster geht es um Sichtbarkeit. Bei Muster 3 geht es um die Anzahl der Schritte: Eine Ablehnungsoption kann gut sichtbar sein und trotzdem in einen langen Weg durch die Einstellungen führen.

2. Optionale Kategorien sind von Anfang an aktiviert

Ein Besucher öffnet die Einstellungen und findet Marketing bereits aktiviert. Speichert er diese Ansicht, könnte eine Entscheidung erfasst werden, die er nie getroffen hat.

Problem: Schalter für Analyse oder Marketing sind aktiviert, bevor der Besucher sie berührt, sodass Nichtstun wie ein Ja wirkt.

Lösung: Stellen Sie jede optionale Kategorie standardmäßig auf aus, wo eine Opt-in-Einwilligung erforderlich ist. Nur unbedingt erforderliche Speicherung bleibt aktiviert, gekennzeichnet als immer aktiv, mit einer einzeiligen Erklärung neben jedem Schalter.

Beispielhaftes Banner im Vorher-nachher-Vergleich: optionale Kategorien erst vorausgewählt, dann standardmäßig deaktiviert.
Lassen Sie optionale Zwecke deaktiviert, bis der Besucher sie auswählt.

Hier ist die Position der EU eindeutig. Laut Erwägungsgrund 32 DSGVO sollten bereits angekreuzte Kästchen keine Einwilligung darstellen, und die Taskforce des EDSA bestätigte, dass vorab angekreuzte Opt-in-Kästchen nicht zu einer wirksamen Einwilligung führen.

3. Ablehnen erfordert mehr Schritte als Akzeptieren

Zählen Sie die Klicks. Wenn das Akzeptieren einen Klick erfordert, das Ablehnen aber ein Einstellungsfenster, mehrere Schalter und einen Speichern-Button, erfüllen die beiden Wege sehr unterschiedliche Aufgaben.

Problem: Die erste Ebene bietet „Alle akzeptieren“ und „Einstellungen“, aber keine Möglichkeit abzulehnen. Ablehnen heißt: eine zweite Ebene öffnen, Kategorien deaktivieren und bestätigen.

Lösung: Platzieren Sie „Alle ablehnen“ auf derselben Ebene wie „Alle akzeptieren“, damit das Ablehnen genau wie das Akzeptieren nur einen Klick erfordert. Behalten Sie „Einstellungen verwalten“ als dritten Button für Besucher, die eine gezielte Auswahl treffen möchten.

Beispielhafter Einwilligungsablauf, der einen versteckten Ablehnungsweg mit direkten Bedienelementen zum Akzeptieren und Ablehnen vergleicht.
Machen Sie das Ablehnen so leicht erreichbar wie das Akzeptieren.

Im Bericht des EDSA hielt die große Mehrheit der beteiligten Behörden es für einen Verstoß, wenn eine Ebene mit einem Einwilligungsbutton keine Möglichkeit zur Ablehnung bietet. Einige wenige Behörden sahen das anders, weil die ePrivacy-Richtlinie eine Ablehnungsoption nicht ausdrücklich erwähnt. Prüfen Sie die Leitlinien der Behörde, die für Ihre Website zuständig ist.

4. Farbe und Kontrast verstecken eine Option

Markenfarben sind in Ordnung. Verschwindende Bedienelemente nicht. Eine blassgraue Ablehnungsbeschriftung auf Weiß kann schwer lesbar sein, selbst wenn jemand gezielt danach sucht.

Problem: „Alle akzeptieren“ ist ein ausgefüllter Button in einer kräftigen Markenfarbe, während die Ablehnung kontrastarmer Text auf hellem Hintergrund ist. Die eine Aktion ist offensichtlich, die andere leicht zu übersehen.

Lösung: Geben Sie den Hauptoptionen denselben Button-Stil oder zumindest ein vergleichbares visuelles Gewicht und gut lesbare Beschriftungen. Prüfen Sie jede Beschriftung anhand der Kontrastvorgaben des W3C (4,5:1 für normalen Text) und machen Sie den Tastaturfokus sichtbar.

Beispielhafte Banner-Bedienelemente vor und nach der verbesserten Sichtbarkeit der Ablehnungsoption.
Machen Sie beide Optionen gut lesbar und leicht auffindbar.

Die Behörden beurteilen das im Einzelfall. Die Taskforce des EDSA war sich einig, dass kein allgemeiner Farb- oder Kontraststandard vorgeschrieben werden kann, nannte aber ein offensichtlich irreführendes Beispiel: einen Ablehnungsbutton, dessen Textkontrast so gering ist, dass er für praktisch keinen Nutzer lesbar ist. Auch die praktischen Cookie-Empfehlungen der CNIL befassen sich mit irreführender visueller Hervorhebung.

5. Vage Formulierungen verschleiern den Zweck

„Ihr Erlebnis verbessern“ kann bedeuten, eine Spracheinstellung zu speichern, Besuche zu messen oder eine Werbezielgruppe aufzubauen. Das sind unterschiedliche Tätigkeiten.

Problem: Der Bannertext verwendet allgemeine Formulierungen, statt zu benennen, was die optionalen Cookies tun, sodass Besucher nicht erkennen können, worin sie einwilligen.

Lösung: Benennen Sie jeden Zweck in einfachen Worten, zum Beispiel: „Wir verwenden optionale Analyse-Cookies, um zu verstehen, welche Seiten besucht werden.“ Beschreiben Sie Werbung in einem eigenen Satz und nennen Sie nur Tools und Zwecke, die Ihre Website tatsächlich nutzt.

Beispielhafter Einwilligungstext, der sich von vagen Formulierungen zu klar benannten Analyse- und Werbezwecken ändert.
Benennen Sie den Zweck hinter der Entscheidung.

Die Taskforce des EDSA war sich einig, dass ein Banner klar machen sollte, worum es geht, welchem Zweck die Einwilligung dient und wie man sie erteilt. Ein gefälliger Satz, der die falschen Tools beschreibt, erfüllt dieses Ziel nicht.

6. Ablehnen mit schlechtem Gewissen

„Nein danke, ich möchte keine bessere Website“ ist keine sinnvolle Beschriftung für eine Einwilligungsoption. Sie verknüpft eine Wahl, die für sich allein verständlich sein sollte, mit einem Argument.

Problem: Der Button zum Akzeptieren klingt positiv, während die Beschriftung zum Ablehnen mit Schuldgefühlen oder Sarkasmus arbeitet. Die Formulierung setzt Besucher unter Druck, statt die Wahl zu beschreiben.

Lösung: Verwenden Sie neutrale, parallel aufgebaute Button-Beschriftungen wie „Alle akzeptieren“, „Alle ablehnen“ und „Einstellungen verwalten“. Heben Sie sich werbende Texte für die Bereiche Ihrer Website auf, in denen Besucher damit rechnen, überzeugt zu werden.

Beispielhafte Ablehnungsformulierung, die sich von einer Botschaft, die Schuldgefühle weckt, zu einer neutralen Ablehnungsoption ändert.
Formulieren Sie jede Option neutral.

7. Eine Entscheidung zu ändern ist schwerer, als sie zu treffen

Nach dem Akzeptieren verschwindet das Banner. Um zu widerrufen, muss der Besucher jetzt Ihre Datenschutzerklärung durchsuchen oder den Support kontaktieren.

Problem: Nach der ersten Entscheidung gibt es keinen sichtbaren Weg zurück zu den Einstellungen, sodass der Widerruf weit mehr Aufwand erfordert als zuvor das Akzeptieren.

Lösung: Fügen Sie einen Button für Cookie-Einstellungen hinzu, der auf jeder Seite verfügbar bleibt, oder einen klar beschrifteten Link an einer festen Stelle wie dem Footer, der dieselben Optionen wieder öffnet. Testen Sie dann das Ergebnis: Nach dem Widerruf sollten optionale Tags nicht mehr ausgelöst werden.

Beispielhafte Website mit einem schwer auffindbaren Link zu den Einstellungen und einem dauerhaft verfügbaren Bedienelement für Cookie-Einstellungen.
Sorgen Sie für einen klaren Weg zurück zu den Cookie-Einstellungen.

Art. 7 Abs. 3 DSGVO verlangt, dass der Widerruf der Einwilligung so einfach ist wie ihre Erteilung. Die Taskforce des EDSA nennt als Beispiele ein kleines, dauerhaft sichtbares Symbol oder einen Link an einer sichtbaren, üblichen Stelle, ein bestimmtes Design für den Widerruf ist jedoch nicht vorgeschrieben; die Behörden beurteilen die Lösung im Einzelfall.

Eine bessere Prüfung als „Ist die Akzeptanz gestiegen?“

Bitten Sie jemanden außerhalb des Projekts, drei Aufgaben zu erledigen: optionale Cookies ablehnen, nur Analyse erlauben und diese Erlaubnis später widerrufen. Achten Sie darauf, wo die Person zögert. Führen Sie dann den technischen „Alle ablehnen“-Test durch, um zu prüfen, ob die Website diese Entscheidungen umsetzt.

Layouts, die die Optionen klar halten und dabei die visuelle Gestaltung variieren, finden Sie in sechs Designbeispielen für Cookie-Banner.

Drei kurze Fragen

Darf ein Cookie-Banner unsere Markenfarben verwenden?

Ja. Die praktische Frage ist, ob Besucher jede Option weiterhin lesen, verstehen und nutzen können. Ein einheitlicher Markenauftritt sollte die Orientierung erleichtern.

Ist eine hohe Einwilligungsrate ein Beleg für ein gutes Banner?

Für sich allein nicht. Prüfen Sie die Oberfläche, die Bedeutung der Optionen und das daraus folgende Verhalten der Tags, bevor Sie Schlüsse aus den Akzeptanzzahlen ziehen.

Gelten außerhalb Europas dieselben Designregeln?

Nein. In Kalifornien zum Beispiel sind viele Datenschutzentscheidungen Opt-outs statt Opt-ins, dennoch verlangen die Vorschriften Symmetrie bei der Auswahl. Das Enforcement Advisory der CPPA zu Dark Patterns hält außerdem fest, dass ein durch Dark Patterns erlangtes Ja keine Einwilligung ist. Einen umfassenderen Vergleich finden Sie unter Cookie-Einwilligung in der EU und in Kalifornien.

Ein Design, das Besucher verstehen.

Passiro Free umfasst einen visuellen Banner-Editor mit Bedienelementen zum Akzeptieren, Ablehnen und für Einstellungen sowie einen Button für Cookie-Einstellungen, mit dem Besucher ihre Entscheidung später ändern können. Geben Sie beiden Hauptoptionen das gleiche Gewicht und testen Sie sie dann auf Ihrer eigenen Website.