Cookie Banner gestalten: rechtssicher und nutzerfreundlich, so geht es

Kurze Antwort
Wie sollten Sie ein Cookie Banner gestalten?
Ein Cookie Banner gestalten heißt, eine Einwilligungsabfrage zu bauen, die Besucher klar fragt, Akzeptieren und Ablehnen gleich sichtbar anbietet, auf dem Smartphone keine Inhalte verdeckt und einen einfachen Weg zur späteren Änderung bietet. So erfüllt das Banner rechtliche Erwartungen und vertreibt trotzdem keine Besucher.
Dieser Leitfaden behandelt nur die Gestaltung. Das heißt, wir schauen auf Position, Schaltflächen, Textlänge und Verhalten auf kleinen Bildschirmen. Wie Tags das Einwilligungssignal an Analyse und Werbetools weitergeben, ist dagegen ein eigenes technisches Thema. Das erklären wir in unserem Beitrag Ist Google Consent Mode v2 Pflicht?, deshalb wiederholen wir es hier nicht.
Ein wichtiger Hinweis: Dieser Artikel ist keine Rechtsberatung. Klären Sie mit einer Anwältin oder einem Anwalt, auf welcher Rechtsgrundlage die Cookies Ihrer Website beruhen. Wir, Talha Aslan und Team, teilen die praktischen Probleme aus unseren Webdesign Projekten und die allgemeine Richtung offizieller Leitlinien.
Warum ist das Cookie Banner ein Rechts und Designthema zugleich?
Viele Unternehmen sehen das Cookie Banner als juristisches Plugin und installieren es ganz zum Schluss. Dabei ist das Banner der allererste Kontakt eines Besuchers mit Ihrer Website. Wirkt die Gestaltung schwach, wirkt also auch der erste Eindruck schwach.
Rechtlich ist die Erwartung klar: Besucher sollen freiwillig, informiert und durch eine eindeutige Handlung einwilligen. Gestalterisch lautet die Frage dagegen, ob Besucher diese Wahl leicht verstehen und treffen können. Beide Seiten führen zum selben Ziel. Ein klares, ausgewogenes Banner senkt das Risiko und schafft zugleich Vertrauen.
Ein nachlässiges Banner richtet dagegen echten Schaden an:
- Es verdeckt die Hälfte des Smartphone Bildschirms, und Besucher springen ab.
- Es versteckt die Ablehnung, was Vertrauen und Rechtssicherheit beschädigt.
- Es erscheint erst nach dem Laden und verschiebt das Layout.
- Lange Rechtstexte ermüden, und niemand liest sie.
Kurz gesagt: Ein Cookie Banner wirkt wie ein kleines Detail. In der Praxis beeinflusst es allerdings Conversions, Barrierefreiheit und Vertrauen direkt.
Was erwarten Datenschutzbehörden allgemein von der Bannergestaltung?
In der EU prägen die ePrivacy Regeln und die DSGVO, wie Websites nach einer Cookie Einwilligung fragen. In Deutschland kommt zudem das TDDDG hinzu. Die Einzelheiten unterscheiden sich je nach Land; prüfen Sie deshalb den aktuellen Stand immer bei einer offiziellen Quelle und mit juristischer Beratung.
Trotzdem tauchen einige Grundsätze in offiziellen Leitlinien immer wieder auf. Nicht notwendige Cookies dürfen erst nach der Einwilligung laufen. Vorab angekreuzte Kästchen gelten nicht als wirksame Einwilligung. Außerdem warnen Behörden vor Oberflächen, die Besucher zu einer bestimmten Antwort drängen.
Für Gestalter ergeben sich daraus einige praktische Regeln:
- Nicht notwendige Cookies bleiben aus, bis der Besucher zustimmt.
- Akzeptieren und Ablehnen stehen auf derselben Ebene und mit gleichem Gewicht.
- Kontrollkästchen starten leer.
- Besucher können ihre Wahl jederzeit ändern.
- Der Text erklärt in einfachen Worten, wozu die Cookies dienen.
Die juristische Auslegung gehört in Fachhände. Hier sprechen wir nur darüber, wie sich diese Regeln auf dem Bildschirm zeigen. Den größeren Rahmen beschreibt unser Leitfaden für eine datenschutzkonforme Website.
Leiste unten oder Dialog in der Mitte: Welche Position funktioniert besser?
Die Position entscheidet, wie viel Aufmerksamkeit das Banner bekommt und wie viel Inhalt es verdeckt. Drei Varianten sind verbreitet: eine schmale Leiste am unteren Rand, eine kleine Box in einer Ecke und ein Dialogfenster in der Bildschirmmitte.
Zunächst: Die untere Leiste verdeckt am wenigsten. Besucher können sofort lesen, und die Leiste bleibt trotzdem sichtbar. Allerdings übersehen manche Besucher sie lange; die Entscheidung bleibt dann offen.
Der Dialog in der Mitte fordert die Entscheidung dagegen sofort. Er zieht Aufmerksamkeit auf sich, verdeckt aber den Inhalt und wirkt schnell wie eine Mauer. Auf dem Smartphone verschwindet oft der gesamte erste Bildschirm dahinter.
Die Eckbox bietet somit einen Mittelweg. Auf dem Desktop funktioniert sie gut; auf schmalen Bildschirmen sollte sie dann zu einer Leiste über die volle Breite werden.
Nach unserer Erfahrung liefern auf den meisten Unternehmensseiten die untere Leiste oder die Eckbox das ausgewogenste Ergebnis. Inhaltsstarke Seiten fahren meist mit einer kompakten Leiste gut. Sehen Sie das als Ausgangspunkt, nicht als Regel. Am Ende entscheiden Ihre Inhaltsstruktur und das Verhalten Ihrer Besucher.
Wie schneiden die Positionen im direkten Vergleich ab?
Die folgende Tabelle fasst Stärken und Schwächen der Positionen aus Gestaltungssicht zusammen. Es handelt sich um allgemeine Tendenzen; Ihre Ergebnisse können abweichen.
| Position | Verdeckt Inhalt | Sichtbarkeit | Mobile Eignung | Passend für |
|---|---|---|---|---|
| Leiste unten | Gering | Mittel | Gut bei begrenzter Höhe | Blogs, Magazine, Inhaltsseiten |
| Eckbox | Gering | Mittel | Auf kleinen Bildschirmen als Leiste | Unternehmensseiten, Portfolios |
| Dialog in der Mitte | Hoch | Hoch | Schwach, verdeckt den ersten Bildschirm | Sonderfälle mit sofortiger Entscheidung |
| Leiste oben | Mittel | Mittel | Kann mit dem Menü kollidieren | Selten unsere erste Wahl |
Beachten Sie beim Lesen einen Punkt: Hohe Sichtbarkeit macht den Dialog nicht automatisch zur richtigen Wahl. Müssen Besucher entscheiden, bevor sie Inhalte sehen, steigt das Absprungrisiko, vor allem bei bezahltem Traffic. Wählen Sie also einen Dialog, dann halten Sie ihn kurz und dunkeln Sie die Seite dahinter nicht komplett ab.
Warum sollten Ablehnen und Akzeptieren gleich aussehen?
Gleichwertige Sichtbarkeit ist das zentrale Prinzip der Bannergestaltung. Besucher sollen beide Optionen sehen und mit gleichem Aufwand wählen können. Ist eine Schaltfläche groß und farbig, die andere nur ein blasser Textlink, dann lenkt die Oberfläche in eine Richtung.
Konkret bedeutet Gleichwertigkeit:
- Beide Schaltflächen haben dieselbe Größe und stehen in derselben Zeile.
- Auch wenn eine gefüllt und die andere umrandet ist, bleibt der Kontrast bei beiden gut lesbar.
- Ablehnen versteckt sich nicht auf einer zweiten Ebene wie den Einstellungen.
- Die Beschriftungen bleiben klar, etwa Akzeptieren und Ablehnen.
Zum Beispiel könnte in einem Beispielszenario Akzeptieren in Ihrer Markenfarbe gefüllt sein. Ablehnen hätte dann dieselbe Größe, einen weißen Hintergrund und einen dunklen Rahmen. So bleibt die Markenidentität erhalten, und beide Optionen bleiben gut sichtbar.
Zudem können Sie eine dritte Schaltfläche wie Einstellungen ergänzen. Sie wirkt meist etwas zurückhaltender, denn sie dient den Details und nicht der Hauptentscheidung. Mehr zu Beschriftungen finden Sie in unserem Beitrag Was ist UX Writing?.
Was ist ein Dark Pattern, und wie zeigt es sich im Cookie Banner?
Ein Dark Pattern ist ein Gestaltungstrick, der Nutzer zu einer Wahl lenkt, die sie so nicht bewusst treffen wollten. In Cookie Bannern sind solche Muster verbreitet, und sie schaden Vertrauen und Rechtssicherheit.
Konkret begegnen uns diese Muster am häufigsten, wenn Teams ein Cookie Banner gestalten:
- Ablehnen erscheint nur in den Einstellungen.
- Ablehnen steht als kontrastarmer grauer Text da.
- Kästchen in den Einstellungen sind vorab angekreuzt.
- Nach einer Ablehnung taucht das Banner auf jeder Seite erneut auf.
- Verwirrende doppelte Verneinungen erschweren das Verständnis.
- Das Schließen Symbol zählt als Zustimmung.
Einige dieser Tricks heben die Zustimmungsrate kurzfristig vielleicht an. Allerdings schauen Behörden immer genauer auf solche Lenkungen; somit kann das Risiko den Gewinn übersteigen. Außerdem sinkt das Vertrauen in die Marke, sobald sich Besucher getäuscht fühlen.
Zusammengefasst: Wer ein Cookie Banner gestalten will, das langfristig trägt, verzichtet ganz auf Dark Patterns. Das Ziel ist keine hohe Zustimmungsrate, sondern eine echte, informierte Wahl.
Wie verhindern Sie, dass das Cookie Banner mobil Inhalte verdeckt?
Auf dem Smartphone zählt jeder Zentimeter. Eine Box, die auf dem Desktop ausgewogen wirkt, kann mobil leicht den halben Bildschirm füllen.
Auch Google warnt in der mobilen Suche vor aufdringlichen Interstitials. Die Seite von Google Search Central zu aufdringlichen Interstitials behandelt Dialoge aus rechtlichen Gründen gesondert. Dennoch empfiehlt sie, solche Dialoge verantwortungsvoll und ohne unnötige Verdeckung einzusetzen.
Unsere praktischen Regeln für mobile Ansichten:
- Begrenzen Sie das Banner auf einen kleinen Teil des Bildschirms.
- Passen die Schaltflächen nicht nebeneinander, stapeln Sie sie in gleicher Breite.
- Halten Sie den Text kurz und verlagern Sie Details in die Einstellungen.
- Platzieren Sie die Schaltflächen im unteren, gut erreichbaren Bereich.
- Gibt es ein fixiertes Menü unten, darf das Banner es nicht überlagern.
Die Daumenreichweite erklären wir in unserem Leitfaden zur Daumenzone, den größeren Ansatz im Beitrag Was ist Mobile First Design?. Beginnen Sie mit diesen beiden Blickwinkeln, dann müssen Sie das Banner später nicht mühsam verkleinern.
Sollte ein Cookie Banner Layoutverschiebungen vermeiden?
Ja. Schiebt das Banner nach dem Laden den Inhalt nach unten, verlieren Besucher ihre Leseposition und tippen womöglich daneben. Google misst solche unerwarteten Sprünge mit Cumulative Layout Shift, kurz CLS.
Die Erklärung von web.dev zu CLS beschreibt Layoutverschiebungen ohne Nutzerinteraktion als Problem. Ein Cookie Banner trägt genau dieses Risiko, denn viele Websites fügen es per Skript erst nach dem ersten Rendern ein.
Zwei Ansätze helfen. Erstens gestalten Sie das Banner als fixierte Ebene über dem Inhalt; dann bewegt sich darunter nichts. Zweitens reservieren Sie den Platz von Anfang an, falls das Banner im Seitenfluss stehen muss.
Halten Sie außerdem das Skript schlank. Ein schweres Einwilligungstool kann den ersten Seitenaufbau bremsen. Alle Core Web Vitals erklären wir im Beitrag LCP, INP und CLS erklärt.
Wie lang darf der Bannertext sein?
Der Bannertext sollte so kurz sein, dass Besucher ihn in wenigen Sekunden lesen und verstehen. Einen langen Rechtsabsatz liest niemand; folglich erfüllt er auch seinen Informationszweck nicht.
Ein guter Bannertext beantwortet drei Fragen knapp. Welche Arten von Cookies nutzen Sie? Wozu dienen sie? Was kann der Besucher wählen? Die Details gehören dagegen in die Cookie Richtlinie und die Einstellungen.
Als Beispielszenario funktioniert dieses Gerüst gut. Ein Satz nennt den Zweck, ein zweiter erinnert an die Wahl, dann folgt der Link zur Richtlinie. Zum Beispiel: Wir nutzen notwendige Cookies für den Betrieb der Website und weitere Cookies für Messung und ein besseres Erlebnis nur mit Ihrer Erlaubnis. Ihre Wahl können Sie jederzeit ändern.
Achten Sie beim Schreiben auf diese Punkte:
- Ersetzen Sie Fachbegriffe durch einfache Wörter.
- Sprechen Sie Besucher direkt an, mit wir und Sie.
- Vermeiden Sie drohende oder vorwurfsvolle Formulierungen.
- Geben Sie dem Richtlinienlink eine aussagekräftige Beschriftung.
Wie gestalten Sie die Einstellungsebene?
Die Einstellungsebene ist der zweite Bildschirm, auf dem Besucher Cookie Kategorien einzeln wählen. Weil das Banner kurz bleibt, stehen hier die Details. Deshalb ist ihr Aufbau genauso wichtig wie das Banner selbst.
Meist gliedern Websites Cookies in notwendige, Statistik, Funktions und Marketing Kategorien. Die notwendige Kategorie bleibt aktiv und gesperrt, alle anderen starten ausgeschaltet. Neben jede Kategorie gehört eine Beschreibung aus ein oder zwei Sätzen.
Darauf sollten Sie auf dieser Ebene achten:
- Zeigen Sie den Zustand der Schalter mit Text, nicht nur mit Farbe.
- Stellen Sie Alle ablehnen und Auswahl speichern nebeneinander.
- Legen Sie lange Cookie Listen in aufklappbare Abschnitte.
- Sorgen Sie dafür, dass sich die Ebene per Tastatur öffnen und schließen lässt.
So können interessierte Besucher ins Detail gehen, alle anderen entscheiden mit den zwei Schaltflächen im Banner. Zum Beispiel sollte in einem Beispielszenario jemand, der nur Statistik erlauben will, diese Wahl mit drei Klicks speichern können.
Wo gehört der Link zum Ändern der Einstellungen hin?
Eine Einwilligung ist kein einmaliges Ereignis. Besucher können ihre Meinung ändern; daher brauchen sie einen einfachen Weg zurück zu ihren Einstellungen. Das entspricht der allgemeinen Richtung offizieller Leitlinien und guter Nutzererfahrung.
Die verbreitetste und klarste Lösung ist ein Link im Footer jeder Seite, etwa mit der Beschriftung Cookie Einstellungen. Dieser Link öffnet die Einstellungsebene erneut und zeigt die aktuelle Wahl.
Manche Websites nutzen stattdessen ein kleines dauerhaftes Symbol in einer Ecke. Das funktioniert ebenfalls. Allerdings darf das Symbol keine Inhalte verdecken, und es braucht eine zugängliche Textbeschriftung. Sonst verstehen Nutzer von Screenreadern nicht, wozu es dient.
Zudem hilft ein Link oder eine Schaltfläche direkt in der Cookie Richtlinie, die dieselben Einstellungen öffnet. Dann können Leser der Richtlinie ihre Wahl sofort anpassen.
Wie machen Sie ein Cookie Banner barrierefrei?
Ein Cookie Banner muss für alle funktionieren, auch für Tastaturnutzer, Screenreader Nutzer und Menschen mit eingeschränktem Sehvermögen. Ein nicht barrierefreies Banner kann manche Besucher sonst von der ganzen Website ausschließen.
Die WCAG Richtlinien des W3C bieten dafür einen guten Rahmen. Zum Beispiel verlangt das WCAG 2.2 Kriterium Focus Not Obscured, dass ein fokussiertes Element nicht vollständig von Ebenen wie fixierten Leisten verdeckt ist. Fixierte Banner am unteren Rand verletzen dieses Kriterium leicht.
Das sollten Sie prüfen:
- Text und Schaltflächen brauchen ausreichenden Kontrast; messen Sie ihn mit unserem Kontrastrechner.
- Tastaturnutzer erreichen die Schaltflächen in logischer Reihenfolge.
- Bei einem Dialog bleibt der Fokus darin und kehrt nach dem Schließen zurück.
- Screenreader lesen die Beschriftungen verständlich vor.
Die Grundlagen beschreibt unser Beitrag Barrierefreie Website nach WCAG und BFSG.
Wie sieht ein Banner im Stil Ihrer Marke aus?
Ein Cookie Banner sollte nicht wie ein Fremdkörper wirken. Die Standardthemen fertiger Einwilligungstools passen selten zu Schrift, Farben oder Eckenradius Ihrer Website. Folglich wirkt der erste Moment auf Ihrer Seite unfertig.
Ein paar einfache Schritte lösen das also schnell. Zunächst übernehmen Sie Hauptschrift und Textgröße ins Banner. Dann gleichen Sie die Schaltflächen an die übrigen Buttons Ihrer Website an. Schließlich nehmen Sie Eckenradius, Schatten und Abstände aus Ihrem Designsystem.
Trotzdem darf die Markenwirkung das Gleichheitsprinzip nie aushebeln. Bekommt zum Beispiel nur Akzeptieren die Markenfarbe, dann braucht Ablehnen dieselbe Größe und ausreichenden Kontrast. So gehört das Banner zur Marke und bleibt dennoch ausgewogen.
Auf Websites mit dunklem Design sollte auch das Banner dunkel sein. Eine grellweiße Box auf dunkler Seite lenkt ab und lässt das Banner dominanter wirken, als es sein müsste.
Fertiges Einwilligungstool oder eigene Gestaltung?
Die meisten Websites nutzen für ihr Cookie Banner ein fertiges Consent Management Tool. Solche Tools übernehmen Kategorien, Einwilligungsnachweise und die Kommunikation mit Tags. Somit sparen sie auf der technischen Seite viel Zeit.
Allerdings sind ihre gestalterischen Optionen oft begrenzt. Deshalb behalten wir in den meisten Projekten die Technik des Tools und passen nur das Aussehen an das Designsystem der Website an. So erhalten Sie technische Zuverlässigkeit und optische Stimmigkeit zugleich.
Prüfen Sie beim Vergleich, wie flexibel die Gestaltungsoptionen sind. Ein Tool, bei dem Sie Größe, Reihenfolge und Farben der Schaltflächen nicht ändern können, erschwert das Gleichheitsprinzip. Ein Tool, das Ablehnen nur auf der zweiten Ebene anbietet, würden wir zum Beispiel nicht ohne Anpassung einsetzen.
Dagegen bietet ein komplett eigenes Banner mehr Freiheit, bringt aber auch mehr Verantwortung. Dann kümmern Sie sich selbst um Nachweise, das Speichern der Wahl und darum, dass Tags nicht vor der Einwilligung feuern.
Egal welchen Weg Sie wählen, die Prinzipien bleiben gleich. Möchten Sie Ihr Cookie Banner gestalten lassen, dann übernimmt unser Webdesign Service diesen Teil Ihrer Website für Sie.
Wie beeinflusst die Speicherung der Einwilligung die Gestaltung?
Ihre Website speichert die Entscheidung jedes Besuchers und merkt sie sich für eine gewisse Zeit. Dieses technische Detail prägt die Gestaltung direkt, denn es bestimmt, wie oft das Banner zurückkehrt.
Erscheint das Banner bei jedem Besuch, ermüden die Besucher und klicken irgendwann gedankenlos auf Akzeptieren. Das widerspricht dem Gedanken einer informierten Wahl. Andererseits bleiben Besucher ahnungslos, wenn sich Ihre Cookie Struktur ändert und die Wahl nie erneuert.
Planen Sie daher diese Punkte ein:
- Merken Sie sich die Wahl für einen angemessenen Zeitraum; den aktuellen Richtwert prüfen Sie bei offiziellen Quellen und Ihrer Rechtsberatung.
- Zeigen Sie das Banner erneut, wenn sich Kategorien ändern.
- Fragen Sie Ablehnende nicht auf jeder Seite erneut.
- Zeigen Sie in den Einstellungen eventuell das Datum der letzten Wahl.
Sprechen Sie außerdem mit Ihren Entwicklern über die Einwilligungsnachweise. Als Gestalter planen Sie, wann und wie dieser Nachweis für Besucher sichtbar wird. Kommt in einem Beispielszenario ein neues Marketingtool hinzu, könnte das Banner etwa nur für diese neue Kategorie kurz nachfragen.
Wie gehen mehrsprachige Websites mit dem Cookie Banner um?
Auf mehrsprachigen Websites planen Sie das Banner für jede Sprache einzeln. Die Grundregel lautet: Das Banner erscheint in derselben Sprache wie die Seite. Ein englisches Banner auf einer deutschen Seite erschwert das Verständnis der Wahl.
Achten Sie bei der Übersetzung auf die Länge der Beschriftungen. Deutsche Begriffe sind zum Beispiel oft länger als englische; folglich passen die Schaltflächen eventuell nicht in eine Zeile. Stapeln Sie sie dann, aber in gleicher Breite.
Auch die Schrift spielt eine Rolle. Fehlen Ihrer Webschrift bestimmte Zeichen, zeigt das Banner in manchen Sprachen fehlerhafte Buchstaben. Dieser kleine Makel wirkt nachlässig; prüfen Sie das Banner deshalb in jeder Sprache mindestens einmal mit eigenen Augen.
Kontrollieren Sie außerdem, ob der Richtlinienlink in jeder Sprache auf die richtige Seite führt. Ein häufiger Fehler ist ein englisches Banner, das auf eine anderssprachige Richtlinie verweist. Das wirkt klein, untergräbt aber den Informationszweck.
Schließlich können in verschiedenen Märkten unterschiedliche Regeln gelten. Holen Sie daher für jeden Markt eigene Rechtsberatung ein und halten Sie die Gestaltung in einem gemeinsamen Rahmen.
Wie messen Sie die Wirkung des Banners?
Bei der Messung eines Cookie Banners geht es nicht darum, die Zustimmungsrate künstlich zu steigern. Stattdessen wollen Sie verstehen, wie stark das Banner Besucher stört. Diese Unterscheidung ist wichtig, denn eine hohe Zustimmungsrate allein beweist kein gutes Design.
Konkret können Sie diese Signale beobachten:
- Wie lange das Banner offen bleibt, bis Besucher entscheiden.
- Wie viele Besucher abspringen, während das Banner sichtbar ist.
- Den Anteil der Besucher, die die Einstellungen öffnen.
- Wie sich das Verhalten zwischen Smartphone und Desktop unterscheidet.
Bedenken Sie, dass auch diese Messung den Einwilligungsregeln folgt. Statistik Cookies laufen also nicht bei Besuchern, die ablehnen. Somit sehen Sie manche Signale nur für Zustimmende; berücksichtigen Sie diese Grenze bei der Auswertung.
Zum Beispiel könnten Sie in einem Beispielszenario den Text kürzen, die Schaltflächen stapeln und dann schnellere Entscheidungen auf dem Smartphone sehen. Testen Sie solche Änderungen einzeln, damit Sie wissen, welcher Schritt gewirkt hat.
Wie testen Sie das Banner nach dem Livegang?
Mit dem Livegang ist die Arbeit nicht erledigt. Browserupdates, neue Plugins und Themeänderungen können das Banner unbemerkt beschädigen. Deshalb empfehlen wir eine regelmäßige Testroutine.
Eine einfache Testrunde sieht so aus:
- Öffnen Sie die Website in einem privaten Fenster und prüfen Sie, ob das Banner auf dem ersten Bildschirm erscheint.
- Klicken Sie auf Ablehnen und kontrollieren Sie dann in den Entwicklertools des Browsers, dass keine nicht notwendigen Cookies entstehen.
- Laden Sie die Seite neu; das Banner sollte geschlossen bleiben.
- Öffnen Sie die Einstellungen über den Footer Link und ändern Sie Ihre Wahl.
- Wiederholen Sie die Runde auf einem Smartphone und per Tastatur.
Die mobile Ansicht prüfen Sie außerdem schnell mit unserem Test auf Mobilfreundlichkeit. Diese Routine kostet nach jedem größeren Update nur wenige Minuten. Dennoch verhindert sie, dass ein defektes Banner monatelang unbemerkt bleibt.
Welche Checkliste hilft beim Cookie Banner gestalten?
Haken Sie vor dem Livegang jeden Punkt der folgenden Liste ab. Sie fasst alle Prinzipien dieses Beitrags kurz zusammen.
- Akzeptieren und Ablehnen stehen auf derselben Ebene in gleicher Größe.
- Ablehnen hat gut lesbaren Kontrast.
- Kästchen in den Einstellungen starten leer.
- Nicht notwendige Cookies laufen erst nach der Einwilligung.
- Mobil verdeckt das Banner nur einen kleinen Teil des Bildschirms.
- Das Layout verschiebt sich nicht.
- Der Text bleibt bei wenigen Sätzen, der Richtlinienlink ist klar.
- Ein Footer Link öffnet die Einstellungen erneut.
- Tastaturnutzer können das gesamte Banner bedienen.
- Kein fokussiertes Element verschwindet hinter dem Banner.
- Schrift und Farben Ihrer Marke tragen sich ins Banner.
- Eine Rechtsberatung hat die Texte geprüft.
Nicht jeder Punkt wiegt gleich schwer. Gleichwertige Schaltflächen, keine Cookies vor der Einwilligung und ein Weg zur späteren Änderung sind allerdings die Grundlagen, die Sie nie auslassen sollten.
Welche Fehler passieren beim Cookie Banner gestalten am häufigsten?
Die Fehler, die uns in der Praxis am häufigsten begegnen, entstehen meist aus guter Absicht. Oft fügt ein Team das Banner in Eile ein, und danach schaut niemand mehr darauf.
Typisch sind diese Punkte: Tests nur auf dem Desktop, Ablehnen versteckt in den Einstellungen, das unveränderte Standardthema und ein vergessener Footer Link. Auf manchen Websites erscheint das Banner zudem nach dem Schließen auf jeder Seite erneut, was Besucher ermüdet.
Ein weiteres häufiges Problem sind Überschneidungen mit anderen Ebenen. Zum Beispiel stapeln sich Chatblase, fixierter Messenger Button und Cookie Banner in derselben Ecke. Dann wissen Besucher nicht mehr, wohin sie tippen sollen.
Eine kurze Durchsicht deckt die meisten dieser Fehler auf. Zudem brauchen Sie dafür kein spezielles Tool; ein Smartphone, ein Laptop und ein paar Minuten genügen. Öffnen Sie die Website auf verschiedenen Geräten und testen Sie das Banner aus Sicht eines Besuchers.
Wer sollte das Cookie Banner auf Ihrer Website umsetzen?
Ein Cookie Banner liegt an der Schnittstelle von Gestaltung, Entwicklung und Recht. Die besten Ergebnisse entstehen daher in Projekten, in denen alle drei zusammenarbeiten. Die Rechtsberatung liefert den Text, das Design passt das Banner an die Website an, und die Entwicklung stellt sicher, dass keine Cookies vor der Einwilligung laufen.
Wir, Talha Aslan und Team, sehen das Cookie Banner als Komponente, die wir ab dem ersten Entwurf mitplanen, und nicht als nachträglichen Anbau. So klären wir Position, Balance der Schaltflächen, mobiles Verhalten und Markenwirkung von Anfang an.
Vertreibt Ihr aktuelles Banner Besucher oder versteckt es die Ablehnung? Dann bauen wir diesen Teil Ihrer Website für Sie. Fordern Sie auf unserer Webdesign Seite ein Angebot an, und wir gestalten ein ausgewogenes Cookie Banner, das zu Ihrer Website und Ihrer Marke passt.


