Consent-Banner gestalten: Was der erste Dialog über dein Produkt verrät

Das Consent-Banner ist das einzige Element einer Website, das wirklich jede Person sieht. Vor dem Hero, vor der Navigation, vor dem ersten Satz Text. Und es ist in den meisten Projekten das Element, über das am wenigsten nachgedacht wurde: Es kommt aus einem Tool, wird zwei Tage vor dem Launch eingebaut, jemand trägt die Markenfarbe ein, fertig.

Bei einer Festival-Website habe ich einmal gesehen, wohin das führt. Auf dem Handy legte sich das Banner über zwei Drittel des Bildschirms, direkt über dem Programm. Akzeptieren war ein kräftiger Knopf, Ablehnen gab es nicht — stattdessen führte ein grauer Textlink zu einer Liste mit über hundert Anbieternamen, jeder mit eigenem Schalter. Wer das Line-up sehen wollte, hatte eine realistische Option: zustimmen. Und genau das haben fast alle getan.

Rechtlich war das zum Launch-Zeitpunkt bestenfalls grenzwertig. Gestalterisch war es eindeutig: Das Erste, was dieses Festival seinen Besucher:innen mitgeteilt hat, war „Deine Entscheidung interessiert uns nicht, wir wollen nur das Häkchen." Niemand hatte das so beschlossen. Es war einfach die Standardeinstellung eines Tools, das niemand angefasst hatte.

Dieser Artikel handelt davon, wie man diesen Dialog gestaltet, statt ihn zu installieren: welche Anforderungen wirklich aus dem Recht kommen und welche aus Gewohnheit, wie die erste und die zweite Ebene aussehen müssen, was mit Tastatur und Screenreader passiert — und warum die beste Lösung oft darin besteht, das Banner kleiner zu machen, indem man das Produkt sauberer baut.

1. Der erste Dialog ist kein Beiwerk

Ein Consent-Banner ist funktional ein Dialog: Es unterbricht, es verlangt eine Entscheidung, es liegt über allem anderen. Damit gelten dafür dieselben Regeln wie für jedes andere Overlay im Interface — nur unter verschärften Bedingungen, weil es die allererste Interaktion ist und weil die Person, die davorsteht, dein Produkt noch gar nicht kennt.

In diesen zwei, drei Sekunden lernt sie nebenbei vier Dinge:

• Wie ernst du Entscheidungen nimmst. Zwei gleichwertige Knöpfe sagen: Du darfst wirklich wählen. Ein leuchtender Knopf neben einem blassen Textlink sagt das Gegenteil, und zwar sehr deutlich.
• Wie sorgfältig gearbeitet wurde. Ein Banner in fremder Typografie, mit anderen Radien und einem Knopf, den es sonst nirgends im Produkt gibt, ist ein sichtbarer Fremdkörper. Es ist der erste Eindruck — und er stammt von einem Dienstleister.
• Wie schnell es weitergeht. Viele Consent-Tools laden als blockierendes Skript vor dem Inhalt. Die gefühlte Ladezeit der Seite beginnt damit nicht beim ersten Pixel, sondern beim Banner.
• Wie viel hier eigentlich passiert. „Wir und 114 Partner verarbeiten Daten" ist eine Information, die Leute lesen. Sie macht etwas mit dem Vertrauen, bevor der erste Inhalt zu sehen ist.

Keiner dieser vier Punkte ist juristisch. Alle vier sind Gestaltung. Und alle vier werden in der Praxis an ein Tool delegiert, dessen Standardeinstellungen für einen anderen Zweck optimiert sind: möglichst viele Zustimmungen.

Faustregel: Wenn das Banner aussieht, als käme es von jemand anderem, dann kommt es von jemand anderem — und die Leute merken das. Die Konfigurationsoberfläche jedes seriösen Consent-Tools lässt Schriftart, Abstände, Radien und Knopfstile setzen. Das ist eine halbe Stunde Arbeit, und sie entscheidet über den ersten Eindruck.

2. Was das Banner leisten muss — und was davon Gestaltung ist

Es lohnt sich, die Anforderungen einmal sauber zu trennen, weil im Projektalltag ständig Recht und Gewohnheit vermischt werden. Die rechtliche Grundlage in Deutschland sind im Wesentlichen zwei Dinge: § 25 TDDDG regelt, dass das Speichern von Informationen auf dem Endgerät und der Zugriff darauf — also Cookies und alles Vergleichbare — eine Einwilligung braucht, sofern es nicht unbedingt erforderlich ist. Und die DSGVO beschreibt, was eine Einwilligung überhaupt ist: freiwillig, für den konkreten Fall, informiert, unmissverständlich, durch eine aktive Handlung — und jederzeit so einfach widerrufbar, wie sie erteilt wurde. Vorangekreuzte Kästchen gelten seit dem Planet49-Urteil des EuGH nicht als Einwilligung.

Daraus folgen ein paar Dinge, über die man nicht mehr diskutieren muss:

• Nichts Nicht-Notwendiges lädt vor der Entscheidung. Das ist keine Gestaltungsfrage, sondern eine Implementierungsfrage — aber sie wird häufig im Design-Review entdeckt, weil die Karte im Footer schon da ist, bevor jemand geklickt hat.
• Ablehnen muss möglich sein, und zwar ohne Umweg. Die europäischen Aufsichtsbehörden haben sich in ihrer Cookie-Banner-Taskforce genau an diesem Punkt abgearbeitet: Eine Ablehn-Möglichkeit erst auf der zweiten Ebene ist der häufigste Beschwerdegrund überhaupt.
• Alles ist standardmäßig aus. Jeder Schalter, der beim Öffnen schon an ist, ist entweder notwendig — oder falsch.
• Widerruf braucht einen festen Platz. Wenn die Zustimmung zwei Klicks gekostet hat, darf der Widerruf nicht zehn kosten.

Was daraus nicht folgt, aber trotzdem überall steht: dass der Dialog die ganze Seite blockieren muss, dass er mittig liegen muss, dass er aus 400 Wörtern Erklärtext bestehen muss, dass jeder einzelne Anbieter auf der ersten Ebene genannt werden muss. Das sind Entscheidungen, keine Vorschriften — und es sind genau die Entscheidungen, die den Unterschied zwischen einem erträglichen und einem furchtbaren Banner ausmachen.

Hinweis: Das hier ist kein Rechtsrat. Ich gestalte diese Dialoge, ich prüfe sie nicht. Die konkrete Ausgestaltung — welche Dienste als notwendig gelten, wie die Zwecke benannt werden, was in der Datenschutzerklärung stehen muss — gehört vor den Launch zu jemandem, der dafür haftet. Was ich beitragen kann, ist die Form: dass die rechtlich saubere Variante nicht aussieht wie eine Strafe.

3. Gleichwertig heißt gleichwertig

Die wichtigste Entscheidung fällt auf der ersten Ebene, und sie ist schnell beschrieben: Zustimmen und Ablehnen stehen nebeneinander, auf derselben Ebene, in derselben Form. Gleiche Größe, gleicher Stil, gleiche Prominenz. Wenn du einen gefüllten und einen umrandeten Knopf nimmst, ist das vertretbar — solange beide Knöpfe sind und beide gleich gut zu treffen.

Was dagegen Alltag ist, lässt sich in vier Mustern zusammenfassen, und alle vier sind Dark Patterns im eigentlichen Wortsinn: Sie funktionieren nur, weil sie die Wahrnehmung ausnutzen.

• Der Kontrast-Trick: „Alle akzeptieren" in Markenfarbe, „Ablehnen" in Hellgrau auf Weiß. Technisch sind beide da. Im peripheren Sehen existiert nur einer.
• Der Ebenen-Trick: Ablehnen gibt es nur hinter „Einstellungen", und dort erst nach dem Scrollen, unter der Anbieterliste. Jeder zusätzliche Schritt ist ein Filter, und er filtert genau in die gewünschte Richtung.
• Der Benennungs-Trick: „Akzeptieren" gegen „Mehr Optionen". Das eine ist ein Ergebnis, das andere ist Arbeit. Niemand wählt freiwillig Arbeit.
• Das Confirmshaming: „Nein danke, ich möchte ein schlechteres Erlebnis." Das ist der Punkt, an dem ein Interface anfängt, seine Nutzer:innen zu beleidigen.

Der Prüfstein dafür ist unspektakulär und dauert zehn Sekunden: Mach einen Screenshot vom Banner und entsättige ihn. Wenn in Graustufen immer noch sofort klar ist, welchen Knopf du drücken „sollst", ist die Auswahl nicht gleichwertig. Farbe darf die Marke zeigen. Sie darf nicht die Entscheidung treffen.

Und das ist, anders als oft behauptet, kein Verzicht. Eine Zustimmung, die durch Gestaltungsdruck zustande kommt, ist in zweierlei Hinsicht wertlos: rechtlich, weil sie nicht freiwillig war, und praktisch, weil die Daten dahinter Menschen beschreiben, die nie zustimmen wollten. Wer seine Reichweite auf solchen Zahlen plant, plant auf Sand. Ich habe das in Projekten erlebt, in denen nach einer Umstellung auf eine faire Auswahl die Zustimmungsquote spürbar fiel — und die verbleibenden Daten zum ersten Mal zu den Umsätzen passten.

4. Die zweite Ebene: Zwecke statt Anbieterlisten

Die zweite Ebene ist der Ort, an dem die meisten Banner endgültig auseinanderfallen. Sie entsteht fast immer aus der Datenbank des Tools heraus: Jeder eingebundene Dienst bekommt eine Zeile, jede Zeile einen Schalter, dazu Hoster, Speicherdauer und Rechtsgrundlage. Fachlich vollständig, praktisch unbenutzbar.

Die Gegenfrage ist einfach: Worüber entscheiden Leute eigentlich? Nicht über einen Anbieternamen, den sie noch nie gehört haben. Sie entscheiden über einen Zweck. Deshalb gehört die zweite Ebene nach Zwecken gegliedert, in Nutzersprache, mit höchstens vier bis fünf Gruppen:

• Notwendig: Alles, ohne das die Seite nicht funktioniert — Sitzung, Warenkorb, Sprachwahl, Sicherheit. Kein Schalter, sondern ein Hinweis, warum hier nichts zu entscheiden ist.
• Statistik: Reichweitenmessung. Ein Satz, der sagt, was gemessen wird und was nicht: „Wir sehen, welche Seiten aufgerufen werden. Wir sehen nicht, wer du bist."
• Komfort: Eingebettete Karten, Videos, Schriften von Dritten. Das ist die Gruppe, die Leute am ehesten zulassen, weil sie einen sichtbaren Gegenwert hat.
• Marketing: Alles, was Menschen über Seiten hinweg wiedererkennt. Hier ist Ehrlichkeit das einzige, was trägt: Wer das beschönigt, verliert den Rest des Dialogs gleich mit.

Die Anbieterdetails verschwinden damit nicht — sie rücken eine Ebene tiefer, hinter ein Aufklappen pro Gruppe. Wer sie sehen will, findet sie. Wer sie nicht sehen will, wird nicht mehr damit zugeschüttet. In einem Bildungsportal haben wir so aus einer Liste von knapp vierzig Einträgen vier Gruppen gemacht; die Liste selbst ist vollständig geblieben, nur eben eingeklappt. Die Zahl der Leute, die überhaupt bis zum Speichern kamen, hat sich dadurch sichtbar verändert.

Dazu drei Details, an denen diese Ebene sonst scheitert: Das Speichern braucht einen eindeutigen Knopf („Auswahl speichern"), der nicht aussieht wie ein Abbrechen. „Alle ablehnen" gehört auch hier hin, nicht nur auf die erste Ebene. Und die Schalterzeilen brauchen Luft — eine Liste aus eng gestapelten Schaltern mit je drei Zeilen Kleingedrucktem liest niemand, egal wie korrekt sie ist.

5. Tastatur, Fokus und Screenreader

Ein Dialog, der sich über alles legt, ist der härteste Fall für die Bedienung ohne Maus. Und weil das Banner vor dem Inhalt steht, trifft jeder Fehler hier wirklich jede Person, die auf Tastatur oder Screenreader angewiesen ist — es gibt keinen Weg daran vorbei. Entsprechend gehört Consent in jedes Audit zur Barrierefreiheit, auch wenn es „nur das Tool" ist.

Die Punkte, die ich in dieser Reihenfolge prüfe:

• Der Fokus springt beim Öffnen hinein. Nicht auf den Zustimmen-Knopf, sondern an den Anfang des Dialogs, damit der Text zuerst gelesen wird.
• Der Fokus bleibt drin, solange der Dialog blockiert. Was hinter der Abdunkelung liegt, muss auch für die Tabulatortaste unerreichbar sein. Ein Banner, das visuell blockiert und per Tastatur nicht, ist die schlimmste aller Varianten: Die Person tabbt durch eine Seite, die sie nicht sieht.
• Es gibt keine Sackgasse. Fokus hinein ist richtig, Fokus gefangen ohne Ausweg ist es nicht: Jede Taste muss irgendwann wieder zu einer der Auswahlmöglichkeiten führen.
• Escape ist eindeutig. Wenn die Taste schließt, muss klar sein, was dann gilt — und die einzige saubere Antwort ist: nichts Zusätzliches wird gesetzt. Ein Escape, das als Zustimmung gewertet wird, ist keine Einwilligung durch aktive Handlung.
• Der Fokusring ist sichtbar, auch auf der Markenfarbe. Das ist die Stelle, an der Standard-Themes der Tools fast immer durchfallen: dunkler Ring auf dunklem Knopf.
• Die Knöpfe haben genug Kontrast und genug Fläche. Beschriftung gegen Knopfhintergrund mindestens 4,5:1, der Knopf gegen den Dialog mindestens 3:1, Trefferfläche mindestens 44 × 44 Pixel. Auf dem Handy ist das der Unterschied zwischen einer Entscheidung und einem Zufallstreffer.

Praxis-Test, 60 Sekunden: Seite im privaten Fenster öffnen, Maus wegschieben, nur mit Tab, Shift-Tab, Leertaste und Enter bedienen. Lässt sich ablehnen? Kommst du aus dem Dialog heraus? Siehst du jederzeit, wo du bist? Ich habe diesen Test in den letzten Jahren an vielen fertigen Websites gemacht. Die Mehrheit fällt beim zweiten Punkt durch.

Und dann ist da noch das Handy. Ein Banner, das mehr als die Hälfte des Bildschirms einnimmt, ist keine Information mehr, sondern eine Barriere. Auf kleinen Geräten gehört der Dialog nach unten, kompakt, mit scrollbarem Text und den Knöpfen in Daumenreichweite — nicht als Mittelkasten, dessen Knöpfe unter der Falz hängen.

6. Die Sprache im Banner

Kaum ein Text wird so oft gelesen und so selten geschrieben. Die meisten Banner laufen mit dem Vorschlagstext des Tools, und der ist in einer eigentümlichen Mischung aus Rechtsabteilung und Marketing verfasst: „Wir schätzen Ihre Privatsphäre. Wir und unsere Partner verwenden Technologien wie Cookies, um Ihr Erlebnis zu personalisieren und zu verbessern."

Das ist Microcopy, die ihre Aufgabe nicht erfüllt: Sie sagt nicht, was passiert, und sie klingt wie eine Entschuldigung. Besser wird es mit drei Regeln.

• Ein Satz, was passiert, bevor irgendetwas anderes kommt. „Wir messen anonym, welche Seiten gelesen werden, und binden Videos von YouTube ein." Das ist konkret, prüfbar und in fünf Sekunden gelesen.
• Knöpfe als Ergebnis, nicht als Tätigkeit. „Alle akzeptieren" und „Nur notwendige" sind parallel gebaut, etwa gleich lang und beschreiben beide einen Zustand. „Akzeptieren" gegen „Verwalten" tut das nicht.
• Zahlen statt Adjektive. „Vier Dienste" ist eine Information. „Ausgewählte Partner" ist eine Verschleierung, und zwar eine, die auffällt.

Was außerdem hilft: Du-Form, wenn der Rest der Seite duzt, und Sie-Form, wenn nicht — das Banner ist kein Rechtsdokument im Produkt, sondern Teil des Produkts. Und: keine Angstmache in die andere Richtung. „Ohne Cookies funktioniert diese Seite nur eingeschränkt" ist in neun von zehn Fällen schlicht falsch, und wer es trotzdem schreibt, hat den Satz von der freiwilligen Einwilligung nicht zu Ende gedacht.

7. Weniger Banner: Datensparsamkeit, Widerruf, Messung

Die eleganteste Lösung für den Consent-Dialog ist, ihn klein zu machen — nicht durch Gestaltung, sondern durch das, was im Produkt eingebunden ist. Jeder Dienst, den du nicht brauchst, ist eine Zeile weniger im Dialog, ein Zweck weniger, eine Entscheidung weniger:

• Schriften selbst ausliefern. Webfonts vom eigenen Server brauchen keine Einwilligung und laden meist schneller.
• Analytik ohne Cookies. Mehrere Werkzeuge messen Reichweite serverseitig oder ohne Wiedererkennung über Geräte hinweg. Je nach Ausgestaltung fällt damit eine ganze Kategorie weg — ob im konkreten Fall eine Einwilligung nötig bleibt, klärt die Datenschutzberatung, nicht das Marketing.
• Einbettungen erst auf Klick. Karte, Video, Social-Wall: ein Vorschaubild, ein Satz, wohin die Verbindung geht, ein Knopf. Das ist mehr Arbeit als ein iframe und löst die Frage an der Stelle, an der sie entsteht.
• Das Zählen selbst hinterfragen. Bei kleinen Projektseiten ist die ehrlichste Antwort manchmal, auf Messung zu verzichten. Dann gibt es gar kein Banner — und das ist für Besucher:innen die mit Abstand beste Variante.

Was bleibt, braucht einen Widerrufsweg, der nicht versteckt ist: ein fester Eintrag im Footer, der denselben Dialog wieder öffnet, mit den aktuell gesetzten Schaltern — nicht ein leeres Formular, das so tut, als hätte man nie entschieden. Dass der Dialog beim Wiederöffnen den Istzustand zeigt, ist technisch trivial und wird trotzdem ständig vergessen.

Bleibt die Frage, woran man merkt, ob der Dialog taugt. Die Zahl, die in den Tools am größten angezeigt wird, ist die Zustimmungsquote — und sie ist als Qualitätsmaß untauglich, weil man sie mit jedem der Tricks aus Abschnitt 3 nach oben bekommt. Nützlicher sind drei andere:

• Entscheidungsquote: Wie viele treffen überhaupt eine Wahl, statt das Banner zu ignorieren und wegzuscrollen? Ein hoher Ignorier-Anteil heißt, dass der Dialog nicht verstanden wird.
• Zeit bis zur Entscheidung: Steigt sie über ein paar Sekunden, ist der Text zu lang oder die Auswahl unklar.
• Nutzung der zweiten Ebene: Wenn praktisch niemand die Einstellungen öffnet, ist das entweder ein gutes Zeichen (die erste Ebene genügt) oder ein schlechtes (der Weg dorthin ist unsichtbar). Das lässt sich nur mit einem Blick auf die Gestaltung beantworten, nicht aus der Statistik.

Diese Zahlen gehören einmal im Quartal angesehen, zusammen mit der Liste der eingebundenen Dienste. Beides wächst still: Irgendwer bindet ein Tracking-Pixel für eine Kampagne ein, die seit acht Monaten vorbei ist, und niemand nimmt es wieder heraus.

Fazit

Das Consent-Banner ist der ungeliebteste Dialog im Web, und genau deshalb ist er eine der lohnendsten Gestaltungsaufgaben: Es gibt kaum ein Element, bei dem der Abstand zwischen Standardeinstellung und sorgfältiger Arbeit so groß und so sichtbar ist.

• Es ist ein Dialog, kein Rechtstext. Dieselben Regeln wie für jedes Overlay — plus die Verschärfung, dass es die erste Interaktion überhaupt ist.
• Gleichwertig heißt gleichwertig. Zustimmen und Ablehnen auf einer Ebene, in einer Form. Der Graustufen-Test entscheidet, nicht die Absicht.
• Zwecke statt Anbieter. Vier bis fünf Gruppen in Nutzersprache, Details hinter dem Aufklappen, alles standardmäßig aus.
• Tastatur zuerst. Fokus hinein, kein Durchtabben nach hinten, sichtbarer Fokusring, eindeutiges Escape. Das ist der Teil, den Tools am häufigsten falsch machen.
• Weniger einbinden schlägt besser gestalten. Jeder Dienst, der nicht da ist, muss nicht erklärt, nicht abgefragt und nicht verwaltet werden.

Und wenn du nur eine Sache mitnimmst: Öffne deine eigene Seite im privaten Fenster und versuche, mit der Tastatur abzulehnen. Was in den nächsten dreißig Sekunden passiert, sagt mehr über dein Produkt aus als jede Designpräsentation.